Getting Started
Install Theme UI.
npm install theme-ui @emotion/react
Create a theme object to include custom color, typography, and layout values.
import type { Theme } from 'theme-ui'export const theme: Theme = {fonts: {body: 'system-ui, sans-serif',heading: '"Avenir Next", sans-serif',monospace: 'Menlo, monospace',},colors: {text: '#000',background: '#fff',primary: '#33e',},}
Pass your theme
object to ThemeUIProvider
.
/** @jsxImportSource theme-ui */import { ThemeUIProvider } from 'theme-ui'import { theme } from './theme'export const App = () => (<ThemeUIProvider theme={theme}><h1sx={{color: 'primary',fontFamily: 'heading',}}>Hello</h1></ThemeUIProvider>)
sx
prop
Use the sx
prop throughout your application to add styles based on your theme
to any component. Enable the sx
prop by adding the
/** @jsxImportSource theme-ui */
comment to the top of your file or
configuring jsxImportSource
in your Babel config.
The sx
prop lets you add any valid CSS to an element, while using values from
your theme to keep styles consistent. You can think of the style object that the
sx
prop accepts as a superset of CSS.
/** @jsxImportSource theme-ui */export default (props) => (<divsx={{fontWeight: 'bold',fontSize: 4, // picks up value from `theme.fontSizes[4]`color: 'primary', // picks up value from `theme.colors.primary`}}>Hello</div>)
Responsive styles
The sx
prop also supports using arrays as values to change properties
responsively with a mobile-first approach.
/** @jsxImportSource theme-ui */export default (props) => (<divsx={{// applies width 100% to all viewport widths,// width 50% above the first breakpoint,// and 25% above the next breakpointwidth: ['100%', '50%', '25%'],}}/>)
If you prefer standard CSS syntax, you can use nested objects for responsive styles as well.
<divsx={{width: '100%','@media screen and (min-width: 40em)': {width: '50%',},}}/>
Components
Theme UI includes a library of primitive UI components, which can be completely customized with your theme and include support for variants. You can use variants to encapsulate more complex, component-specific styles that can be changed with props. Import and use these components to handle layout, images, forms, and more.
/** @jsxImportSource theme-ui */import { Box, Label, Input, Button } from 'theme-ui'export default (props) => (<Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}><Label htmlFor="search">Search</Label><Input id="search" name="search" {...props} /><Button>Go</Button></Box>)
See the Components documentation for more.
Edit the page on GitHub