https://github.com/lachlanjc/theme-ui-preset-geist
Theme UI preset, derived from Geist UI
https://github.com/lachlanjc/theme-ui-preset-geist
theme-ui
Last synced: about 1 year ago
JSON representation
Theme UI preset, derived from Geist UI
- Host: GitHub
- URL: https://github.com/lachlanjc/theme-ui-preset-geist
- Owner: lachlanjc
- License: mit
- Created: 2021-01-25T21:10:02.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-25T22:39:04.000Z (over 5 years ago)
- Last Synced: 2025-03-29T20:44:16.109Z (about 1 year ago)
- Topics: theme-ui
- Language: TypeScript
- Homepage: https://theme-ui-preset-geist.vercel.app
- Size: 263 KB
- Stars: 17
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `theme-ui-preset-geist`
[Theme UI](https://theme-ui.com) theme preset, derived from [Geist UI](https://geist-ui.dev).
```bash
yarn add theme-ui-preset-geist
# npm i theme-ui-preset-geist
```
- Dark mode included
- Syntax highlighting theme included
- Variants inspired by Geist components:
- Avatars
- Badges
- Buttons
- Cards
- Containers
- Forms: input, textarea, select, radio, checkbox
See a preview/documentation: [**theme-ui-preset-geist.vercel.app**](https://theme-ui-preset-geist.vercel.app)
## Usage
```js
import { ThemeProvider } from 'theme-ui'
import theme from 'theme-ui-preset-geist'
export default ({ children }) => (
{children}
)
```
Making your own modifications:
```js
import { ThemeProvider, merge } from 'theme-ui'
import theme from 'theme-ui-preset-geist'
const brandTheme = merge(theme, {
colors: {
brand: '#ff6d00',
},
})
export default ({ children }) => (
{children}
)
```
## Contributing
All types of contributions welcome!
1. Fork this repo & clone it
2. Run `yarn` to install the development dependency ([microbundle](https://github.com/developit/microbundle))
3. Run `yarn link` so docs site can use your local version
4. Run `yarn watch` to continuously compile changes
5. In the docs directory, `yarn link theme-ui-preset-geist` to use the local version instead of the published package, then `yarn` to install dependencies & `yarn dev` to see your changes live
MIT License