Theme UI

https://github.com/system-ui/theme-ui
Admin
Theme UI is a library for creating themeable user interfaces and design systems based on...
Tokens:51,610
Snippets:789
Trust Score:7.6
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install @theme-ui/style-guide

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/style-guide/README.md

Command to install the package via npm.

```sh
npm i @theme-ui/style-guide
```

--------------------------------

### Install @theme-ui/color

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/color/README.md

Install the package using npm.

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

--------------------------------

### Install @theme-ui/preset-sketchy

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-sketchy/README.md

Install the package using npm.

```sh
npm i @theme-ui/preset-sketchy
```

--------------------------------

### Install the package

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/match-media/README.md

Command to install the match-media package via npm.

```sh
npm i @theme-ui/match-media
```

--------------------------------

### Install @theme-ui/custom-properties

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/custom-properties/README.md

Install the package using npm.

```bash
npm i @theme-ui/custom-properties
```

--------------------------------

### Install @theme-ui/preset-funk

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-funk/README.md

Use npm to install the preset package in your project.

```sh
npm i @theme-ui/preset-funk
```

--------------------------------

### Install @theme-ui/presets

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/presets/README.md

Use npm to install the presets package into your project.

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

--------------------------------

### Install @theme-ui/mdx

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/mdx/README.md

Command to install the package via npm.

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

--------------------------------

### Install @theme-ui/core

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/core/README.md

Install the core package along with the required @emotion/react dependency.

```sh
npm i @theme-ui/core @emotion/react
```

--------------------------------

### Install @theme-ui/css

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/css/README.md

Install the core package along with the required emotion dependency.

```sh
npm i @theme-ui/css @emotion/react
```

--------------------------------

### Install the Bootstrap preset

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-bootstrap/README.md

Use npm to install the package as a dependency in your project.

```sh
npm i @theme-ui/preset-bootstrap
```

--------------------------------

### Install @theme-ui/css

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/test-utils/README.md

Use this command to install the package via npm.

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

--------------------------------

### Install @theme-ui/preset-tosh

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-tosh/README.md

Use npm to install the preset package into your project.

```sh
npm i @theme-ui/preset-tosh
```

--------------------------------

### Install @theme-ui/components

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/components/README.md

Install the components package along with its required peer dependency.

```sh
npm i @theme-ui/components @emotion/react
```

--------------------------------

### Install @theme-ui/typography

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/packages/typography.mdx

Install the package via npm.

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

--------------------------------

### Install @theme-ui/tachyons

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/tachyons/README.md

Install the package via npm.

```bash
npm i @theme-ui/tachyons
```

--------------------------------

### Install @theme-ui/preset-base

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-base/README.md

Use npm to install the base preset package in your project.

```sh
npm i @theme-ui/preset-base
```

--------------------------------

### Install @theme-ui/tailwind

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/tailwind/README.md

Use npm to install the package as a dependency.

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

--------------------------------

### Install @theme-ui/color-modes

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/color-modes/README.md

Command to install the package via npm.

```sh
npm i @theme-ui/color-modes
```

--------------------------------

### Install @theme-ui/preset-deep

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-deep/README.md

Use npm to install the preset package into your project.

```sh
npm i @theme-ui/preset-deep
```

--------------------------------

### Install @theme-ui/preset-swiss

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-swiss/README.md

Use npm to install the preset package into your project.

```sh
npm i @theme-ui/preset-swiss
```

--------------------------------

### Render Style Guide Components

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/style-guide/README.md

Example usage of ColorPalette, TypeScale, and TypeStyle components within a React component.

```jsx
import { Themed } from '@theme-ui/mdx'
import { TypeScale, TypeStyle, ColorPalette } from '@theme-ui/style-guide'

export default (props) => (
  <>
    <Themed.h1>Style Guide</Themed.h1>
    <ColorPalette />
    <TypeScale />
    <TypeStyle fontFamily="heading" fontWeight="heading" lineHeight="heading" />
    <TypeStyle fontFamily="body" fontWeight="body" lineHeight="body" />
  </>
)
```

--------------------------------

### Start documentation development server

Source: https://github.com/system-ui/theme-ui/blob/develop/CONTRIBUTING.md

Launches the Gatsby development server for documentation with hot reloading.

```sh
pnpm run dev:docs
```

--------------------------------

### Install Theme UI dependencies

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/getting-started/index.mdx

Install the core library and the required emotion peer dependency.

```sh
npm install theme-ui @emotion/react
```

--------------------------------

### Install gatsby-theme-ui-blog

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/packages/gatsby-theme-ui-blog.mdx

Install the theme package via npm.

```sh
npm i gatsby-theme-ui-blog
```

--------------------------------

### Install @theme-ui/preset-polaris

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-polaris/README.md

Use npm to install the preset package in your project.

```sh
npm i @theme-ui/preset-polaris
```

--------------------------------

### Install dependencies

Source: https://github.com/system-ui/theme-ui/blob/develop/CONTRIBUTING.md

Run this command in the root directory to install dependencies and link local packages.

```sh
pnpm i
```

--------------------------------

### Install gatsby-theme-style-guide

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/gatsby-theme-style-guide/README.md

Install the package via npm to begin using the theme.

```sh
npm i gatsby-theme-style-guide
```

--------------------------------

### Install @theme-ui/preset-dark

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-dark/README.md

Use npm to install the preset package in your project.

```sh
npm i @theme-ui/preset-dark
```

--------------------------------

### Install the Tailwind preset

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-tailwind/README.md

Use npm to install the package as a dependency in your project.

```sh
npm i @theme-ui/preset-tailwind
```

--------------------------------

### Install Theme UI Prism component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/mdx/syntax-highlighting.mdx

Install the required package via npm.

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

--------------------------------

### Install @theme-ui/global dependencies

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/global/README.md

Install the necessary packages to use the global component in a project.

```sh
npm i @theme-ui/global @theme-ui/core @emotion/react
```

--------------------------------

### Install the preset package

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-system/README.md

Use this command to install the preset-2019 package via npm.

```sh
npm i @theme-ui/preset-2019
```

--------------------------------

### Install Theme UI dependencies

Source: https://github.com/system-ui/theme-ui/blob/develop/MIGRATING.md

Install the umbrella package along with required peer dependencies to resolve context mismatch issues.

```bash
npm install theme-ui @emotion/react @emotion/styled @mdx-js/react
```

--------------------------------

### Install @theme-ui/preset-future

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-future/README.md

Use npm to add the preset package to your project dependencies.

```sh
npm i @theme-ui/preset-future
```

--------------------------------

### Install gatsby-plugin-theme-ui

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/packages/gatsby-theme-ui-blog.mdx

Install the theme UI plugin to enable theme customization.

```sh
npm i gatsby-plugin-theme-ui
```

--------------------------------

### Install MDX dependencies

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/mdx/index.mdx

Install the necessary packages to enable MDX support in a Theme UI project.

```sh
npm i @theme-ui/mdx @mdx-js/react
```

--------------------------------

### Install Typography.js package

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/mdx/styling.mdx

Install the necessary packages to use Typography.js themes with Theme UI.

```sh
npm i @theme-ui/typography typography-theme-wordpress-2016
```

--------------------------------

### Install the Roboto preset

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-roboto/README.md

Use npm to add the preset package to your project dependencies.

```sh
npm i @theme-ui/preset-roboto
```

--------------------------------

### JSX Syntax Example

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/jsx-pragma.mdx

A basic example of JSX syntax used for rendering components.

```jsx
// example JSX
<div>
  <Button onClick={handleClick}>Hello</Button>
</div>
```

--------------------------------

### Install gatsby-theme-ui-layout

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/gatsby-theme-ui-layout/README.md

Use npm to install the theme package in your Gatsby project.

```sh
npm i gatsby-theme-ui-layout
```

--------------------------------

### Install the Bulma preset

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-bulma/README.md

Use npm to add the preset package to your project dependencies.

```sh
npm i @theme-ui/preset-bulma
```

--------------------------------

### Install Theme UI dependencies for Gatsby

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/getting-started/gatsby.mdx

Run this command to install the required packages for Theme UI, MDX support, and the Gatsby plugin.

```sh
npm i theme-ui @theme-ui/mdx gatsby-plugin-theme-ui @emotion/react @mdx-js/react
```

--------------------------------

### Run the typecheck script

Source: https://github.com/system-ui/theme-ui/blob/develop/scripts/typecheck-built-files/README.md

Execute these commands to build the packages, install dependencies, and run the typecheck process.

```sh
# ensure Theme UI packages are built
cd ../.. && pnpm build

# install dependencies -- package.json contains relative paths to package directories
pnpm install

# run the script
pnpm start
```

--------------------------------

### Rendering a Box component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/box.mdx

Basic usage example demonstrating padding and color properties.

```jsx
<Box p={4} color="background" bg="primary">
  Beep
</Box>
```

--------------------------------

### Header A5 Live Example

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/recipes/header-a5.mdx

A centered header layout using Theme UI sx prop for styling and layout control.

```jsx
<header
  sx={{
    py: 4,
    variant: 'styles.header',
  }}>
  <div
    sx={{
      display: 'flex',
      justifyContent: 'center',
      mb: 3,
    }}>
    <Link to="/" title="Home">
      <img
        alt="UI Logo"
        src="https://contrast.now.sh/cff/40f?size=48&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI"
      />
      <span
        sx={{
          position: 'absolute',
          width: 1,
          height: 1,
          overflow: 'hidden',
          top: -9999,
        }}>
        Home
      </span>
    </Link>
  </div>
  <div
    sx={{
      display: 'flex',
      justifyContent: 'center',
    }}>
    <Link
      to="/work"
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Work
    </Link>
    <Link
      to="/blog"
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Blog
    </Link>
    <Link
      to="/about"
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      About
    </Link>
    <Link
      to="/contact"
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Contact
    </Link>
  </div>
</header>
```

--------------------------------

### CSS Grid Component Implementation

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/recipes/css-grid.mdx

A full component example using the @jsxImportSource pragma to define a responsive grid layout with theme-aware spacing.

```jsx
/** @jsxImportSource theme-ui */

export default (props) => (
  <div
    sx={{
      display: 'grid',
      gridGap: 4, // theme.space[4]
      // use arrays for mobile-first responsive styles
      gridTemplateColumns: [
        'auto', // default to a stacked layout on small screens
        '1fr 256px', // use columns for larger screens
      ],
    }}
  >
    <main>{props.children}</main>
    <div>Sidebar</div>
  </div>
)
```

--------------------------------

### Render Theme UI components

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/index.mdx

Example of using Box, Flex, Heading, and Button components with the sx prop.

```jsx
<Box p={4} bg="highlight">
  <Flex
    sx={{
      alignItems: 'center',
    }}>
    <Heading>Components</Heading>
    <Button ml="auto">Beep</Button>
  </Flex>
</Box>
```

--------------------------------

### Define a custom theme object

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/theming.mdx

Provides a full example of a theme configuration based on the @theme-ui/presets structure.

```javascript
// example base theme from @theme-ui/presets
export const theme = {
  breakpoints: ['40em', '52em', '64em'],
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
  fonts: {
    body:
      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: 'inherit',
    monospace: 'Menlo, monospace',
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#07c',
    secondary: '#30c',
    muted: '#f6f6f6',
  },
  text: {
    heading: {
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
    },
  },
  styles: {
    root: {
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
    },
    h1: {
      variant: 'text.heading',
      fontSize: 5,
    },
    h2: {
      variant: 'text.heading',
      fontSize: 4,
    },
    h3: {
      variant: 'text.heading',
      fontSize: 3,
    },
    h4: {
      variant: 'text.heading',
      fontSize: 2,
    },
    h5: {
      variant: 'text.heading',
      fontSize: 1,
    },
    h6: {
      variant: 'text.heading',
      fontSize: 0,
    },
    pre: {
      fontFamily: 'monospace',
      overflowX: 'auto',
      code: {
        color: 'inherit',
      },
    },
    code: {
      fontFamily: 'monospace',
      fontSize: 'inherit',
    },
    table: {
      width: '100%',
      borderCollapse: 'separate',
      borderSpacing: 0,
    },
    th: {
      textAlign: 'left',
      borderBottomStyle: 'solid',
    },
    td: {
      textAlign: 'left',
      borderBottomStyle: 'solid',
    },
  },
}
```

--------------------------------

### Responsive CSS Grid with sx prop

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/recipes/css-grid.mdx

A live example demonstrating a two-column grid layout that switches from stacked to side-by-side based on screen size.

```jsx
<div
  sx={{
    display: 'grid',
    gridGap: 4,
    gridTemplateColumns: ['auto', '1fr 256px'],
  }}
>
  <main>Main</main>
  <aside>Sidebar</aside>
</div>
```

--------------------------------

### Configure gatsby-theme-style-guide

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/gatsby-theme-style-guide/README.md

Add the theme to your gatsby-config.js file to enable the style guide generation.

```js
// gatsby-config.js
module.exports = {
  plugins: ['gatsby-plugin-theme-ui', 'gatsby-theme-style-guide'],
}
```

--------------------------------

### Full Gatsby Link component implementation

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/recipes/gatsby-link.mdx

A complete example showing the required JSX pragma and component structure for a styled Gatsby Link.

```jsx
/** @jsxImportSource theme-ui */
import { Link } from 'gatsby'

export default (props) => (
  <Link
    {...props}
    activeClassName="active"
    sx={{
      color: 'inherit',
      '&.active': {
        color: 'primary',
      },
    }}
  />
)
```

--------------------------------

### Basic Flexbox layout

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/flex.mdx

Example of using the Flex component to arrange child Box elements.

```jsx
<Flex>
  <Box p={2} bg="primary" color="white" sx={{ flex: '1 1 auto' }}>
    Flex
  </Box>
  <Box p={2} bg="muted">
    Box
  </Box>
</Flex>
```

--------------------------------

### Define a Theme Object

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/theme-spec.mdx

Example structure of a theme object containing color, font, font weight, and line height scales.

```js
// example theme
{
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#07c',
    secondary: '#05a',
    accent: '#609',
    muted: '#f6f6f6',
  },
  fonts: {
    body: 'system-ui, sans-serif',
    heading: 'system-ui, sans-serif',
    monospace: 'Menlo, monospace',
  },
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
}
```

--------------------------------

### Apply Syntax Themes

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/prism/README.md

Import a preset and add the styles to theme.styles.code.

```javascript
// theme.js
import nightOwl from '@theme-ui/prism/presets/night-owl.json'

const theme = {
  // ...theme
  styles: {
    code: {
      ...nightOwl,
    },
  },
}
```

--------------------------------

### Define theme variants

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/paragraph.mdx

Example structure for defining text variants within the theme object.

```js
// example theme variants
{
  text: {
    block: {
      variant: 'paragraph',
      my: 2,
      textAlign: 'justify',
      textAlignLast: 'start',
      textJustify: 'auto',
    },
  }
}
```

--------------------------------

### Create a styled layout component with InvertedBanner

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/mdx/layout-components.mdx

An example of augmenting the theme prop and applying sx styles to create an inverted color effect.

```jsx
/** @jsxImportSource theme-ui */
import { ThemeUIProvider } from 'theme-ui'

const InvertedBanner = (props) => (
  <ThemeUIProvider
    theme={{
      styles: {
        // style child elements
        h1: {
          fontSize: [5, 6, 7],
        },
      },
    }}
  >
    <div
      {...props}
      sx={{
        // swap colors for an inverted effect
        color: 'background',
        bg: 'primary',
        px: 3,
        py: 4,
      }}
    />
  </ThemeUIProvider>
)

export default InvertedBanner
```

--------------------------------

### Create theme file

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/getting-started/gatsby.mdx

Define your theme configuration in the specified directory to customize colors and other design tokens.

```js
// example theme file
const theme = {
  colors: {
    text: '#000',
    background: '#fff',
  },
}

export default theme
```

--------------------------------

### invert

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/color/README.md

Gets the inverted color.

```APIDOC
## invert(color)

### Description
Get the inverted color.

### Signature
`invert(color)`
```

--------------------------------

### complement

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/color/README.md

Gets the complement of a color.

```APIDOC
## complement(color)

### Description
Get the complement of a color.

### Signature
`complement(color)`
```

--------------------------------

### Initialize Theme UI with a Typography.js theme

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/packages/typography.mdx

Use the toTheme function to convert a Typography.js theme object for use with ThemeUIProvider.

```js
import { ThemeUIProvider } from 'theme-ui'
import { toTheme } from '@theme-ui/typography'
import wp2016 from 'typography-theme-wordpress-2016'

const theme = toTheme(wp2016)

export default (props) => (
  <ThemeUIProvider theme={theme}>{props.children}</ThemeUIProvider>
)
```

--------------------------------

### Use ThemeProvider and sx prop

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/core/README.md

Wrap your application with ThemeProvider and use the sx prop for styling elements based on the theme.

```js
/** @jsxImportSource @theme-ui/core */

import { ThemeProvider } from '@theme-ui/core'

export function App() {
  return (
    <ThemeProvider theme={{ colors: { primary: '#33e' } }}>
      <h1 sx={{ color: 'primary' }}>Hello</h1>
    </ThemeProvider>
  )
}
```

--------------------------------

### Create a basic layout component with ThemeUIProvider

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/mdx/layout-components.mdx

A foundational component structure using ThemeUIProvider to wrap content in a div.

```jsx
/** @jsxImportSource theme-ui */
import { ThemeUIProvider } from 'theme-ui'

export default (props) => (
  <ThemeUIProvider theme={{}}>
    <div {...props} />
  </ThemeUIProvider>
)
```

--------------------------------

### Configure remark-slug in contentlayer.config.js

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/mdx/linked-headings.mdx

Integrate remark-slug into the mdx configuration object within the contentlayer source setup.

```js
import { defineDocumentType, makeSource } from 'contentlayer/source-files'
import remarkSlug from 'remark-slug'

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: '*.mdx',
  contentType: 'mdx',
  fields: {},
}))

export default makeSource({
  contentDirPath: 'posts',
  documentTypes: [Post],
  mdx: {
    remarkPlugins: [remarkSlug],
    rehypePlugins: [],
  },
})
```

--------------------------------

### Radio component usage

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/radio.mdx

Example of using Radio components within Label wrappers to create a selection group.

```jsx
<Label>
  <Radio
    name='dark-mode'
    value='true'
    defaultChecked={true}
  />
  Dark Mode
</Label>
<Label>
  <Radio
    name='dark-mode'
    value='false'
  />
  Light Mode
</Label>
```

--------------------------------

### Create a basic layout component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/layouts.mdx

Define a wrapper component using the sx prop for default layout styles.

```javascript
// example src/layout.js
/** @jsxImportSource theme-ui */

export default (props) => (
  <div
    sx={{
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100vh',
    }}>
    <header
      sx={{
        width: '100%',
        display: 'flex',
        alignItems: 'center',
      }}>
      Header content
    </header>
    <main
      sx={{
        width: '100%',
        flex: '1 1 auto',
      }}>
      <div
        sx={{
          maxWidth: 768,
          mx: 'auto',
          px: 3,
        }}>
        {props.children}
      </div>
    </main>
    <footer
      sx={{
        width: '100%',
      }}>
      Footer content
    </footer>
  </div>
)
```

--------------------------------

### Extend the system theme

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-system/README.md

Import the preset-system and spread its properties into your custom theme configuration.

```jsx
// example theme
import theme from '@theme-ui/preset-system'

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

--------------------------------

### Configure Highlight Styling

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/prism/README.md

Control highlight appearance in styles.pre under .highlight.

```json
".highlight": {
  "background": "hsla(0, 0%, 30%, .5)"
}
```

--------------------------------

### Accessing optional theme properties

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/typescript.mdx

Demonstrates the type error when accessing optional properties directly versus using the get utility.

```tsx
/** @jsxImportSource theme-ui */
import { Theme } from 'theme-ui'

const theme: Theme = {
  space: [0, 8, 16, 32, 64, 128, 256],
  sizes: [0, 8, 16, 32, 64, 128, 256],
}

// Type error on `theme.space` and `theme.sizes`.
// Object is possibly 'undefined'.ts(2532)
return <div sx={{ size: (t) => t.space[3] + t.sizes[5] }} />
```

```tsx
/** @jsxImportSource theme-ui */
import { Theme, get } from 'theme-ui'

// No error
return <div sx={{ size: (t) => get(t, 'space.3') + get(t, 'sizes.5') }} />
```

--------------------------------

### Cycle through multiple color modes

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/color-mode-toggles.mdx

Cycles through an array of defined color modes using the modulo operator to loop back to the start.

```jsx
/** @jsxImportSource theme-ui */
import { useColorMode } from 'theme-ui'

const modes = ['light', 'dark', 'purple', 'pink']

export default (props) => {
  const [mode, setMode] = useColorMode()

  return (
    <button
      {...props}
      onClick={(e) => {
        const index = modes.indexOf(mode)
        const next = modes[(index + 1) % modes.length]
        setMode(next)
      }}
    />
  )
}
```

--------------------------------

### Compare JSX Pragma Implementations

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/how-it-works.mdx

Demonstrates the functional equivalence between using Emotion's css prop and Theme UI's sx prop for styling components.

```jsx
// with Emotion's JSX function
// this is typically handled with the Emotion Babel preset
/** @jsxImportSource @emotion/react */
import { css } from 'theme-ui'

export default (props) => (
  <div
    {...props}
    css={css({
      color: 'white',
      bg: 'primary',
      fontSize: 4,
    })}
  />
)
```

```jsx
// with Theme UI's JSX function
/** @jsxImportSource theme-ui */

export default (props) => (
  <div
    {...props}
    sx={{
      color: 'white',
      bg: 'primary',
      fontSize: 4,
    }}
  />
)
```

--------------------------------

### Use Theme UI primitive components

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/getting-started/index.mdx

Import and use pre-built components that support theme variants and custom styling.

```jsx
/** @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>
)
```

--------------------------------

### Configure plugin options

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/gatsby-plugin-theme-ui/README.md

Use options to specify a prism preset for code blocks or a base theme preset.

```js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-theme-ui',
      options: {
        prismPreset: 'night-owl',
        preset: '@theme-ui/preset-funk',
      },
    },
  ],
}
```

--------------------------------

### Flexbox Sidebar Layout Component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/recipes/flexbox-sidebar.mdx

A live example of a flexbox container with a sidebar and main content area that wraps based on container width.

```jsx
<div
  sx={{
    display: 'flex',
    flexWrap: 'wrap',
  }}>
  <aside
    sx={{
      flexGrow: 1,
      flexBasis: 'sidebar',
    }}>
    Sidebar
  </aside>
  <main
    sx={{
      flexGrow: 99999,
      flexBasis: 0,
      minWidth: 320,
    }}>
    Main
  </main>
</div>
```

--------------------------------

### Import Grid Component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/grid.mdx

Import the Grid component from the theme-ui package.

```sh
import { Grid } from 'theme-ui'
```

--------------------------------

### Import MDX components

Source: https://github.com/system-ui/theme-ui/blob/develop/MIGRATING.md

Use the MDX hook to access components instead of the removed Theme UI context object.

```javascript
import { useMDXComponents } from '@mdx-js/react'
```

--------------------------------

### Defining theme variants for headings

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/heading.mdx

Example structure for defining text variants within the theme object, specifically targeting the heading variant.

```js
// example theme variants
{
  text: {
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '0.2em',
    },
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
    },
  }
}
```

--------------------------------

### Define a theme object

Source: https://github.com/system-ui/theme-ui/blob/develop/README.md

Create a theme configuration object following the System UI Theme Specification.

```js
// example theme.js
export default {
  fonts: {
    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}
```

--------------------------------

### Extend the Sketchy Theme

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-sketchy/README.md

Import the preset and spread it into your custom theme configuration.

```jsx
// example theme
import theme from '@theme-ui/preset-sketchy'

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

--------------------------------

### Build Tailwind CSS

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/tailwind/README.md

Run the Tailwind CLI command to generate the output CSS file.

```sh
tailwind build input.css -o output.css
```

--------------------------------

### Apply a Prism theme

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/mdx/syntax-highlighting.mdx

Import and apply a pre-built syntax theme from the Prism package within your theme configuration.

```js
import nightOwl from '@theme-ui/prism/presets/night-owl'

const theme = {
  styles: {
    pre: {
      ...nightOwl,
    },
  },
}

export default theme
```

--------------------------------

### Define responsive typography in theme

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/responsive-typography.mdx

Configure font scales, weights, and line heights, then apply them to global styles using responsive array values.

```js
// example theme with responsive typography styles
{
  fontSizes: [
    12, 14, 16, 18, 24, 32, 48, 64, 72,
  ],
  fonts: {
    body: 'system-ui, sans-serif',
    heading: 'Poppins, sans-serif',
  },
  fontWeights: {
    body: 400,
    heading: 900,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
  text: {
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
    },
  },
  styles: {
    root: {
      fontFamily: 'body',
      fontWeight: 'body',
      lineHeight: 'body',
    },
    p: {
      fontSize: [2, 3],
    },
    h1: {
      variant: 'text.heading',
      fontSize: [5, 6, 7],
    },
    h2: {
      variant: 'text.heading',
      fontSize: [4, 5],
    },
  },
}
```

--------------------------------

### Split theme into multiple files

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/merging-themes.mdx

Organize theme properties into separate modules and import them into a central index file.

```js
// example theme/colors.js
export default {
  text: '#000',
  background: '#fff',
  primary: '#07c',
}
```

```js
// example theme/fonts.js
export default {
  body: 'system-ui, sans-serif',
  heading: 'Baskerville, Georgia, serif',
  monospace: 'Menlo, monospace',
}
```

```js
// example theme/index.js
import colors from './colors'
import fonts from './fonts'

export default {
  colors,
  fonts,
}
```

--------------------------------

### Use CSS Utility

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/api.mdx

Apply theme-aware styles using the Emotion css prop or direct function calls.

```js
css(styleObject)(theme)
```

```jsx
<div css={css(styles)} />
```

--------------------------------

### useThemeUI

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/api.mdx

A hook to access the full Theme UI context.

```APIDOC
## useThemeUI()

### Description
Returns the full Theme UI context object, including the current theme, components, and color mode state.
```

--------------------------------

### Import Input component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/input.mdx

Import the Input component from the theme-ui package.

```js
import { Input } from 'theme-ui'
```

--------------------------------

### Implement Footer A1 with Theme UI

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/recipes/footer-a1.mdx

A responsive footer layout using flexbox and the sx prop for styling.

```jsx
<footer
  sx={{
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    p: 2,
    variant: 'styles.footer',
  }}>
  <Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
    Home
  </Link>
  <Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
    Blog
  </Link>
  <Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
    About
  </Link>
  <div sx={{ mx: 'auto' }} />
  <div sx={{ p: 2 }}>© 2019 Jane Doe</div>
</footer>
```

--------------------------------

### ThemeUIProvider

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/api.mdx

A wrapper component that provides the theme context and MDX components to the application tree.

```APIDOC
## ThemeUIProvider

### Description
Wraps the application to provide theme context, MDX components, and color mode state management.

### Props
- **theme** (Object) - Required - Theming context object.
- **components** (Object) - Optional - Custom MDX components.
- **children** (Node) - Required - React children to be wrapped.
```

--------------------------------

### Configure JSX Runtime

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/api.mdx

Use the pragma comment to enable the sx prop in your components.

```jsx
/** @jsxImportSource theme-ui */

export default (props) => (
  <div
    {...props}
    sx={{
      color: 'primary',
    }}
  />
)
```

--------------------------------

### Using responsive hooks

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/match-media/README.md

Basic implementation of useResponsiveValue and useBreakpointIndex to access theme-based responsive values.

```js
import { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media'

const MyComponent = () => {
  // Return literal values:
  const color = useResponsiveValue(['red', 'green', 'blue'])
  // Or provide a function to access theme values:
  const themeColor = useResponsiveValue((theme) => [
    theme.colors.red,
    theme.colors.green,
    theme.colors.blue,
  ])
  // `useBreakpointIndex` returns the index of the currently matched media query:
  const index = useBreakpointIndex()

  return (
    <div>
      The current color is: {color}, and the current index is: {index}
    </div>
  )
}
```

--------------------------------

### Theme Prism with Theme UI Colors

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/prism/README.md

Use the theme-ui preset to map syntax highlighting to theme.colors keys.

```javascript
// src/gatsby-plugin-theme-ui/index.js
import prism from '@theme-ui/prism/presets/theme-ui'

export default {
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
    secondary: '#119',
    accent: '#639',
    gray: '#666',
  },
  styles: {
    code: {
      ...prism,
    },
  },
}
```

--------------------------------

### Import Theme UI Switch Component

Source: https://github.com/system-ui/theme-ui/blob/develop/examples/next/components/about.mdx

Import the Switch component from the @theme-ui/components package for use in MDX files.

```javascript
import { Switch } from 'theme-ui'
```

--------------------------------

### Rendering headings with the Heading component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/heading.mdx

Demonstrates default rendering and using the as prop to change the underlying HTML element.

```jsx
<Heading>Hello</Heading>
<Heading as='h3'>Subhead</Heading>
```

--------------------------------

### Responsive Tiled Layout with sx prop

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/recipes/tiled-layout.mdx

Uses CSS Grid with auto-fit and minmax to create a responsive layout of tiles.

```jsx
<div
  sx={{
    display: 'grid',
    gridGap: 3,
    gridTemplateColumns: `repeat(auto-fit, minmax(128px, 1fr))`,
  }}>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>
```

--------------------------------

### Extend the deep theme

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-deep/README.md

Import the preset and spread it into your custom theme configuration.

```jsx
// example theme
import theme from '@theme-ui/preset-deep'

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

--------------------------------

### Import Text component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/text.mdx

Import the Text component from the theme-ui package.

```js
import { Text } from 'theme-ui'
```

--------------------------------

### Implement responsive styles

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/getting-started/index.mdx

Use array values for mobile-first responsive design or standard CSS media queries within the sx prop.

```jsx
/** @jsxImportSource theme-ui */

export default (props) => (
  <div
    sx={{
      // applies width 100% to all viewport widths,
      // width 50% above the first breakpoint,
      // and 25% above the next breakpoint
      width: ['100%', '50%', '25%'],
    }}
  />
)
```

```jsx
<div
  sx={{
    width: '100%',
    '@media screen and (min-width: 40em)': {
      width: '50%',
    },
  }}
/>
```

--------------------------------

### Import and extend the Roboto theme

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-roboto/README.md

Import the preset and spread its properties into your custom theme configuration.

```jsx
// example theme
import theme from '@theme-ui/preset-roboto'

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

--------------------------------

### Configure Next.js with Babel

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/jsx-pragma.mdx

Customize the Next.js Babel preset to include the Theme UI import source configuration.

```js
module.exports = {
  presets: [
    [
      'next/babel',
      {
        'preset-react': {
          importSource: 'theme-ui', // or '@theme-ui/core'
          runtime: 'automatic',
          throwIfNamespace: false,
        },
      },
    ],
  ],
  // ...
}
```

--------------------------------

### Configure theme options

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/gatsby-theme-style-guide/README.md

Customize the theme behavior, such as changing the base path for the generated page.

```js
module.exports = {
  plugins: [
    'gatsby-plugin-theme-ui',
    {
      resolve: 'gatsby-theme-style-guide',
      options: {
        // sets path for generated page
        basePath: '/design-system',
      },
    },
  ],
}
```

--------------------------------

### Use standard CSS media queries

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/sx-prop.mdx

Define responsive styles using nested objects with standard CSS media query syntax.

```jsx
<div
  sx={{
    width: '100%',
    '@media screen and (min-width: 40em)': {
      width: '50%',
    },
  }}
/>
```

--------------------------------

### Import Progress component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/progress.mdx

Import the Progress component from the theme-ui package.

```js
import { Progress } from 'theme-ui'
```

--------------------------------

### Import Select Component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/select.mdx

Import the Select and Box components from the theme-ui package.

```js
import { Select, Box } from 'theme-ui'
```

--------------------------------

### Default breakpoint behavior

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/match-media/README.md

Demonstrates the default behavior when no options are provided, defaulting to the first breakpoint.

```js
import { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media'

const MyComponent = () => {
  const color = useResponsiveValue(['red', 'green', 'blue'])
  const index = useBreakpointIndex()

  return (
    <div>
      The current color is: {color}, and the current index is: {index}
      // Gatsby will output: // The current color is: red, and the current index
      is: 0
    </div>
  )
}
```

--------------------------------

### Provide theme context

Source: https://github.com/system-ui/theme-ui/blob/develop/README.md

Wrap the application with ThemeUIProvider to make the theme object available throughout the component tree.

```jsx
// basic usage
import { ThemeUIProvider } from 'theme-ui'
import theme from './theme'

export default (props) => (
  <ThemeUIProvider theme={theme}>{props.children}</ThemeUIProvider>
)
```

--------------------------------

### Import Image component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/image.mdx

Import the Image component from the theme-ui package.

```js
import { Image } from 'theme-ui'
```

--------------------------------

### Render PostList A1 with Theme UI

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/recipes/post-list-a1.mdx

Uses the sx prop to apply theme-based styles to a list of posts, including hover states for links.

```jsx
<ul
  sx={{
    listStyle: 'none',
    m: 0,
    px: 3,
    py: 4,
  }}>
  {posts.map((post) => (
    <li
      key={post.id}
      sx={{
        mb: 4,
      }}>
      <Themed.h2
        sx={{
          m: 0,
        }}>
        <Link
          to={post.slug}
          sx={{
            color: 'inherit',
            textDecoration: 'none',
            ':hover,:focus': {
              color: 'primary',
              textDecoration: 'underline',
            },
          }}>
          {post.title}
        </Link>
      </Themed.h2>
      <small sx={{ fontWeight: 'bold' }}>{post.date}</small>
      <Themed.p>{post.excerpt}</Themed.p>
    </li>
  ))}
</ul>
```

--------------------------------

### Import NavLink

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/nav-link.mdx

Import the NavLink component from the theme-ui package.

```js
import { NavLink } from 'theme-ui'
```

--------------------------------

### Import Alert component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/alert.mdx

Import the Alert component from the theme-ui package.

```js
import { Alert } from 'theme-ui'
```

--------------------------------

### Importing Form Components

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/forms.mdx

Import the necessary form primitives from the theme-ui package.

```js
import {
  Label,
  Input,
  Select,
  Textarea,
  Radio,
  Checkbox,
  Slider,
} from 'theme-ui'
```

--------------------------------

### Implement ColorModeProvider

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/color-modes/README.md

Wrap the application with ColorModeProvider inside a ThemeProvider to enable color mode functionality.

```jsx
import { ThemeProvider } from '@theme-ui/core'
import { ColorModeProvider } from '@theme-ui/color-modes'
import theme from './theme'

export default (props) => (
  <ThemeProvider theme={theme}>
    <ColorModeProvider>{props.children}</ColorModeProvider>
  </ThemeProvider>
)
```

--------------------------------

### Apply margin and padding shorthands

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/sx-prop.mdx

Utilize shorthand properties for margin and padding that map to the theme.space scale.

```jsx
// example of using margin and padding shorthand syntax
<div
  sx={{
    px: 3, // padding-left & padding-right
    // paddingX: 3 will also work
    py: 4, // padding-top & padding-bottom
    mb: 3, // margin-bottom
  }}
/>
```

--------------------------------

### Import and extend the Bootstrap theme

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-bootstrap/README.md

Import the preset and spread it into your theme configuration object to apply or override styles.

```jsx
// example theme
import theme from '@theme-ui/preset-bootstrap'

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

--------------------------------

### Configure @babel/preset-react for Automatic Runtime

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/jsx-pragma.mdx

Set the importSource to 'theme-ui' within your babel.config.js to enable the automatic JSX transform.

```js
// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-react',
      {
        importSource: 'theme-ui', // or '@theme-ui/core'
        runtime: 'automatic',
        throwIfNamespace: false,
      },
    ],
  ],
  // ...
}
```

--------------------------------

### Extend the Funk theme

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/preset-funk/README.md

Import the preset and spread its properties into your custom theme configuration.

```jsx
// example theme
import theme from '@theme-ui/preset-funk'

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

--------------------------------

### Import AspectRatio component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/aspect-ratio.mdx

Import the component from the theme-ui package.

```js
import { AspectRatio } from 'theme-ui'
```

--------------------------------

### Apply Base Styles

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/api.mdx

Wrap non-MDX content to apply styles defined in theme.styles.

```jsx
<BaseStyles>
  <h1>
    Styled based on <code>theme.styles</code>
  </h1>
</BaseStyles>
```

--------------------------------

### Render Paragraph variants

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/paragraph.mdx

Demonstrates basic usage, block variant styling, and overriding the HTML element using the 'as' prop.

```jsx
<Paragraph>Hello World!</Paragraph>
<Paragraph variant="block">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc elit,
  feugiat ut velit eget, pellentesque accumsan libero. Duis interdum ante sed
  ipsum imperdiet congue nec non mauris. Quisque ac ultricies nunc. Sed nisi
  diam, suscipit eu laoreet a, bibendum nec mauris. Aliquam tristique rhoncus
  ipsum scelerisque egestas. Maecenas rhoncus malesuada mauris, vel porta ex
  tincidunt non. Duis ac sapien in felis fermentum tristique. Nam a erat
  faucibus, varius magna ac, interdum tortor. Aenean quis varius mi, nec
  molestie neque. In dignissim diam in velit pharetra cursus. Integer gravida,
  arcu non sagittis iaculis, justo leo facilisis augue, consequat mollis risus
  erat quis velit. In turpis nibh, ornare ut facilisis id, dignissim non enim.
  Fusce maximus elit sit amet dolor aliquet, et tristique elit eleifend. Aenean
  ornare tortor sem, at sollicitudin ipsum scelerisque a.
</Paragraph>
<Paragraph as="small" sx={{ fontStyle: 'italic' }}>Something a bit less important</Paragraph>
```

--------------------------------

### Run tests

Source: https://github.com/system-ui/theme-ui/blob/develop/CONTRIBUTING.md

Executes unit tests for the project using Jest.

```sh
pnpm test
```

```sh
pnpm test --watch
```

```sh
pnpm test core/test/react-jsx -t 'accepts sx prop'
```

--------------------------------

### Define and apply keyframes with object syntax

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/keyframes.mdx

Use the keyframes helper with an object to define animation steps and apply it within the sx prop using a template string.

```js
import { Box } from 'theme-ui'
import { keyframes } from '@emotion/react'

const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })

export default (props) => (
  <Box {...props} sx={{ animation: `${fadeIn} 1s backwards` }} />
)
```

--------------------------------

### Using sx prop with Box component in MDX

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/sx-prop.mdx

Demonstrates wrapping MDX content in a Theme UI Box component to apply styles via the sx prop.

```mdx
import { Box } from 'theme-ui'

<Box
  sx={{
    padding: 3,
    bg: 'highlight',
  }}
>

# Hello

</Box>
```

--------------------------------

### Responsive Grid with Width

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/grid.mdx

Create a grid where child elements have a minimum width that changes responsively.

```jsx
<Grid width={[128, null, 192]}>
  <Box bg="primary">Box</Box>
  <Box bg="muted">Box</Box>
  <Box bg="primary">Box</Box>
  <Box bg="muted">Box</Box>
</Grid>
```

--------------------------------

### Server-side rendering configuration

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/match-media/README.md

Configuring default breakpoint indices for server-side rendering environments.

```js
import { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media'

const MyComponent = () => {
  const color = useResponsiveValue(['red', 'green', 'blue'], {
    defaultIndex: 1,
  })
  const index = useBreakpointIndex({ defaultIndex: 0 })

  return (
    <div>
      The current color is: {color}, and the current index is: {index}
      // Gatsby will output: // The current color is: green, and the current index
      is: 0
    </div>
  )
}
```

--------------------------------

### Migrate styled-components import to Emotion

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/styled-components.mdx

Replace the styled-components import with @emotion/styled to maintain compatibility with Theme UI.

```js
// before
import styled from 'styled-components'
```

```js
// after
import styled from '@emotion/styled'
```

--------------------------------

### Configure Vite with esbuild

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/guides/jsx-pragma.mdx

Inject the Theme UI jsx import automatically into every file using the jsxInject option in vite.config.js.

```js
import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxFactory: 'jsx',
    jsxInject: `import { jsx } from 'theme-ui'`,
  },
})
```

--------------------------------

### Implement heading components with TypeScript

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/mdx/linked-headings.mdx

A TypeScript implementation of heading components using Theme UI's sx prop for styling.

```tsx
import type { ComponentPropsWithoutRef } from 'react'
import { Themed } from '@theme-ui/mdx'

const createHeadingWithLink =
  (Level: 'h2' | 'h3' | 'h4' | 'h5' | 'h6') =>
  (props: ComponentPropsWithoutRef<'h2'>) =>
    (
      <Level {...props}>
        {props.id && (
          <a
            href={`#${props.id}`}
            sx={{
              color: 'inherit',
              textDecoration: 'none',
              ':hover': {
                textDecoration: 'underline',
              },
            }}
          >
            {props.children}
          </a>
        )}
      </Level>
    )

export const components = {
  h2: createHeadingWithLink('h2'),
  h3: createHeadingWithLink('h3'),
  h4: createHeadingWithLink('h4'),
  h5: createHeadingWithLink('h5'),
  h6: createHeadingWithLink('h6'),
}
```

--------------------------------

### Render basic Image

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/image.mdx

Display an image using the src prop.

```jsx
<Image src={images.flatiron} />
```

--------------------------------

### Import Paragraph component

Source: https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/pages/components/paragraph.mdx

Import the Paragraph component from the theme-ui package.

```js
import { Paragraph } from 'theme-ui'
```
Tokens:
Raw