# @theme-ui/presets

> Theme UI includes an optional presets package that can be used as examples or as a starting point for extending your own themes.

Latest version **0.17.4** (published 2026-01-02) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.17.4 |
| Published | 2026-01-02 |
| First published | 2019-06-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 18.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5409 |
| Author | Brent Jackson |
| Maintainers | jxnblk, johno, hasparus, lachlanjc |
| Keywords | theme-ui, css, css-in-js, style, emotion |

## Links

- npm: https://www.npmjs.com/package/@theme-ui/presets
- Repository: https://github.com/system-ui/theme-ui
- Homepage: https://github.com/system-ui/theme-ui#readme
- Issues: https://github.com/system-ui/theme-ui/issues
- npm.io page: https://npm.io/package/@theme-ui/presets

## Dependencies (14)

- [@theme-ui/preset-base](https://npm.io/package/@theme-ui/preset-base.md) ^0.17.4
- [@theme-ui/preset-dark](https://npm.io/package/@theme-ui/preset-dark.md) ^0.17.4
- [@theme-ui/preset-deep](https://npm.io/package/@theme-ui/preset-deep.md) ^0.17.4
- [@theme-ui/preset-funk](https://npm.io/package/@theme-ui/preset-funk.md) ^0.17.4
- [@theme-ui/preset-tosh](https://npm.io/package/@theme-ui/preset-tosh.md) ^0.17.4
- [@theme-ui/preset-bulma](https://npm.io/package/@theme-ui/preset-bulma.md) ^0.17.4
- [@theme-ui/preset-swiss](https://npm.io/package/@theme-ui/preset-swiss.md) ^0.17.4
- [@theme-ui/preset-future](https://npm.io/package/@theme-ui/preset-future.md) ^0.17.4
- [@theme-ui/preset-roboto](https://npm.io/package/@theme-ui/preset-roboto.md) ^0.17.4
- [@theme-ui/preset-system](https://npm.io/package/@theme-ui/preset-system.md) ^0.17.4
- [@theme-ui/preset-polaris](https://npm.io/package/@theme-ui/preset-polaris.md) ^0.17.4
- [@theme-ui/preset-sketchy](https://npm.io/package/@theme-ui/preset-sketchy.md) ^0.17.4
- [@theme-ui/preset-tailwind](https://npm.io/package/@theme-ui/preset-tailwind.md) ^0.17.4
- [@theme-ui/preset-bootstrap](https://npm.io/package/@theme-ui/preset-bootstrap.md) ^0.17.4

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.17.4 (latest) — 2026-01-02
- 0.17.2-develop.1 (develop) — 2025-02-14
- 0.16.2-scale-tuples.0 (canary) — 2023-09-26
- 0.6.0-alpha.8 (next) — 2021-03-19
- 0.4.0-highlight.0 (highlight) — 2020-05-08
- 0.17.2 — 2025-02-14
- 0.17.2-develop.0 — 2024-12-18
- 0.17.1 — 2024-10-24
- 0.17.1-develop.0 — 2024-10-24
- 0.17.0 — 2024-10-18
- 0.17.0-develop.1 — 2024-10-18
- 0.17.0-develop.0 — 2024-10-18
- 0.16.2 — 2024-02-19
- 0.16.2-develop.5 — 2024-02-19
- 0.16.2-develop.2 — 2024-01-05
- … 430 more at https://npm.io/package/@theme-ui/presets/versions

## README

# @theme-ui/presets

Theme UI includes an optional presets package that can be used as examples or as a starting point for extending your own themes.

```sh
npm i @theme-ui/presets
```

```jsx
// example theme
import { funk } from '@theme-ui/presets'

export default {
  ...funk,
  styles: {
    ...funk.styles,
  },
}
```

To view an example of the built-in presets, see the [Demo][].

[demo]: https://theme-ui.com/demo

Currently, the following presets are available for use:

- [`base`](https://theme-ui.com/presets/base)
- [`system`](https://theme-ui.com/presets/system)
- [`funk`](https://theme-ui.com/presets/funk)
- [`future`](https://theme-ui.com/presets/future)
- [`roboto`](https://theme-ui.com/presets/roboto)
- [`dark`](https://theme-ui.com/presets/dark)
- [`deep`](https://theme-ui.com/presets/deep)
- [`swiss`](https://theme-ui.com/presets/swiss)
- [`tosh`](https://theme-ui.com/presets/tosh)
- [`bootstrap`](https://theme-ui.com/presets/bootstrap)
- [`bulma`](https://theme-ui.com/presets/bulma) (WIP)
- [`tailwind`](https://theme-ui.com/presets/tailwind)
- [`sketchy`](https://theme-ui.com/presets/sketchy), [Demo website](https://themeui-sketchy.netlify.app/)

## Contributing

We'd love to have more presets added to the Theme UI project.
If you'd like to add a new preset or improve upon the existing ones, please open an [issue][] or [pull request][].

[issue]: https://github.com/system-ui/theme-ui/issues
[pull request]: https://github.com/system-ui/theme-ui/pulls

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