| 1 | # @theme-ui/presets
|
| 2 |
|
| 3 | Theme UI includes an optional presets package that can be used as examples or as a starting point for extending your own themes.
|
| 4 |
|
| 5 | ```sh
|
| 6 | npm i @theme-ui/presets
|
| 7 | ```
|
| 8 |
|
| 9 | ```jsx
|
| 10 | // example theme
|
| 11 | import { funk } from '@theme-ui/presets'
|
| 12 |
|
| 13 | export default {
|
| 14 | ...funk,
|
| 15 | styles: {
|
| 16 | ...funk.styles,
|
| 17 | },
|
| 18 | }
|
| 19 | ```
|
| 20 |
|
| 21 | To view an example of the built-in presets, see the [Demo][].
|
| 22 |
|
| 23 | [demo]: https://theme-ui.com/demo
|
| 24 |
|
| 25 | Currently, the following presets are available for use:
|
| 26 |
|
| 27 | - [`base`](https://theme-ui.com/presets/base)
|
| 28 | - [`system`](https://theme-ui.com/presets/system)
|
| 29 | - [`funk`](https://theme-ui.com/presets/funk)
|
| 30 | - [`future`](https://theme-ui.com/presets/future)
|
| 31 | - [`roboto`](https://theme-ui.com/presets/roboto)
|
| 32 | - [`dark`](https://theme-ui.com/presets/dark)
|
| 33 | - [`deep`](https://theme-ui.com/presets/deep)
|
| 34 | - [`swiss`](https://theme-ui.com/presets/swiss)
|
| 35 | - [`tosh`](https://theme-ui.com/presets/tosh)
|
| 36 | - [`bootstrap`](https://theme-ui.com/presets/bootstrap)
|
| 37 | - [`bulma`](https://theme-ui.com/presets/bulma) (WIP)
|
| 38 | - [`tailwind`](https://theme-ui.com/presets/tailwind)
|
| 39 | - [`sketchy`](https://theme-ui.com/presets/sketchy), [Demo website](https://themeui-sketchy.netlify.app/)
|
| 40 |
|
| 41 | ## Contributing
|
| 42 |
|
| 43 | We'd love to have more presets added to the Theme UI project.
|
| 44 | If you'd like to add a new preset or improve upon the existing ones, please open an [issue][] or [pull request][].
|
| 45 |
|
| 46 | [issue]: https://github.com/system-ui/theme-ui/issues
|
| 47 | [pull request]: https://github.com/system-ui/theme-ui/pulls
|