# @s-ui/theme

> Generic theme to add styles to all SUI components

Latest version **8.134.0** (published 2025-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @s-ui/theme
pnpm add @s-ui/theme
yarn add @s-ui/theme
bun add @s-ui/theme
```

## Health

**Score 35/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 8.134.0 |
| Published | 2025-05-05 |
| First published | 2020-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 80 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 147 |
| Maintainers | alejandro.ferrante, ivanmlaborda, salvador.juan, andresin87.adevinta, izeller, gfabregoadv, a.ferrer, ignacio_navarro, oscar_ramirez, jordi.munoz, joanleon-adv, aitor.rodriguez, luis-garrido, jenifer.lopez, isabelgomez87, pa.chruscinski.ext, schibstedspain, alfredo.arronte, belen.santos, xavi_ballestar, ferrangbtw, jamile.radloff, davidmartin2108, sergi.quintela, estefania_garcia, carlosvillu-adevinta, miriam-gil, arnau.guell, ferran.simon, victor.perez.adevinta, mariapaula.forero.ext, oscar.gomez, david.nieto, oriol.puig, nacho_torrella, xavi.murcia, ignacio.rodriguez, francisco.ruiz.lloret, sziauberyte, alfredo.zimperz, andresadv, javiauso, alverd004, marian.lucaci, pablogs, alisa_bayanova, cristhianb, sergiocollado, pablo.rey-adevinta, beatrizip, alex.castells, david.cuadrado.ext, giovanny.sayas.ext, patricio.sartore, azahara, marc.benito, sergio.escano, cristina.rodriguez.duque, pol.valls, frandelacasa-adevinta, carolina.mallo.ext, daniel.perez.ext, hpintos_adevinta, carlos.gonzalezl, albert.peiro, oscar-raig-adevinta, thomas.page.ext, sebastian.badea.adevinta, victoria.pasichnyk.ext, sendami.luque.ext, luz_adv, alfredo.narvaez, ruben-martin, dann41, emiliovz, adria.velardos, arturo.vicente, diegomr, sergi.martinez.adevinta, guillemgc3, frontend-jobs, javiermiguel, atilioscolaroadv, crotundu.adevinta, candymd, florinz, denis_z, anya_ok |
| Keywords | theme, styles, css, scss, sass, less, postcss, tailwind, design, system, ui, components |

## Links

- npm: https://www.npmjs.com/package/@s-ui/theme
- Repository: https://github.com/SUI-Components/sui-components
- Homepage: https://sui-components.vercel.app/
- Issues: https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Util%3A+theme%22
- npm.io page: https://npm.io/package/@s-ui/theme

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 8.134.0 (latest) — 2025-05-05
- 9.0.0-beta.4 (beta) — 2024-09-03
- 8.127.0-typescript-support.8 (typescript-support) — 2024-05-06
- 8.133.0 — 2025-02-24
- 8.132.0 — 2025-02-04
- 8.131.0 — 2025-01-28
- 8.130.0 — 2025-01-25
- 8.129.0 — 2025-01-07
- 8.128.0 — 2025-01-07
- 9.0.0-beta.3 — 2024-08-22
- 9.0.0-beta.2 — 2024-08-19
- 9.0.0-beta.1 — 2024-08-13
- 9.0.0-beta.0 — 2024-08-08
- 8.127.0 — 2024-05-06
- 8.127.0-typescript-support.7 — 2024-04-29
- … 62 more at https://npm.io/package/@s-ui/theme/versions

## README

# SUI Components Theme

This repository contains:

- Generic variables to initialize default values and component styles.
- A set of placeholders ready to style your component (buttons, tabs, forms, grid system...).
- Functions and mixins helpers.

## Usage

Install `sui-theme` in your project:

```bash
npm install @s-ui/theme --save
```

Import `sui-theme` into your sui-component including the path in `index.scss`:

```scss
@import '~@s-ui/theme/lib/index';
```

If you want to customize your components, create your own theme and add it to your component just **before** the sui-theme import.

```scss
@import '../custom-settings';
@import '~@s-ui/theme/lib/index';
```

## Upgrade from theme-basic@7

Compatibility variables are still available to import manually.

**Import only what you need, in inheritance order**

For instance:

```scss
@import '../custom-settings';
@import '~@s-ui/theme/lib/settings-compat-v7/color';
@import '~@s-ui/theme/lib/settings-compat-v7/spacing';
@import '~@s-ui/theme/lib/index';
```

Find below the compat varible groups available:

- [settings-compat-v7/color](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_color.scss)
- [settings-compat-v7/font](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_font.scss)
- [settings-compat-v7/spacing](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_spacing.scss)
- [settings-compat-v7/box-style](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_box-style.scss)
- [settings-compat-v7/animation](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_animation.scss)
- [settings-compat-v7/layout](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_layout.scss)
- [settings-compat-v7/components](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_components.scss)

**Also, if you need it all for older components, you can do**

```scss
@import '~@s-ui/theme/lib/settings-compat-v7/index';
@import '~@s-ui/theme/lib/index';
```

## Media queries and breakpoints

### Rules & Definitions

- Breakpoints must be exactly `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`
- For new implementations, the only allowed media query is `media-breakpoint-up`
- `media-breakpoint-down`, `media-breakpoint-only` and `media-breakpoint-between` are deprecated and only kept for legacy reasons.

### Reason

- We want to create all our components `mobile first`

### Legacy components

- Keep in mind that refactoring legacy components in order to make it rules compliant would suppose a breaking change, so a new major must be released.

### Links

- [SUI Breakpoints](https://github.com/SUI-Components/sui-theme/blob/master/src/layout/_breakpoints.scss) implementation
- [SUI Media Query](https://github.com/SUI-Components/sui-theme/blob/master/src/utils/_breakpoints.scss) implementation

---
_Source: https://npm.io/package/@s-ui/theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._