> For the complete documentation index, see [llms.txt](https://olga-f.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://olga-f.gitbook.io/react/design-systems/theme-ui.md).

# Theme UI

> [Theme UI](https://theme-ui.com/getting-started) combines several libraries together to form a mini-framework for styling applications.

> Theme UI is built with:
>
> * [Emotion](https://emotion.sh/docs/introduction): used to generate isolated CSS with theming context
> * [MDX](https://mdxjs.com/): used to provide custom Emotion styled components to MDX documents, without polluting the global CSS scope
> * [Typography.js](https://github.com/KyleAMathews/typography.js): optionally used for creating rich typographic styles with a simple, high-level API

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

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

Make a file `theme.js`  on the root of your app. To view an example of the built-in presets, see the [Demo](https://theme-ui.com/demo).

`theme.js` uses a preset theme "*bulma*" with some extras:

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

const theme = {
  ...bulma,
  containers: {
    card: {
      boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
      border: '1px solid',
      borderColor: 'muted',
      borderRadius: '4px',
      p: 2,
    },
    page: {
      width: '100%',
      maxWidth: '960px',
      m: 0,
      mx: 'auto',
    }
  },
  styles: {
    ...bulma.styles
  }
}

export default theme
```

```jsx
import React from 'react'
import {ThemeProvider} from 'theme-ui'
import theme from '../theme'

function App({ Component, pageProps }) {
  return(
    <ThemeProvider theme={theme}> 
    <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default App
```