@component-driven/react-design-tokens

react-design-tokens

React components to document design tokens in a styleguide.

Examples

Component-driven Design Systems Workshop Design System

import { Grid } from 'theme-ui'
import theme from './src/examples/cdds'
import { Colors, Spacing, Typography } from './src'

;<Grid gap={5}>
  <Colors theme={theme} />
  <Spacing theme={theme} />
  <Typography theme={theme} />
</Grid>

GitHub Primer Design System

import { Grid } from 'theme-ui'
import theme from './src/examples/primer'
import { Colors, Spacing, Typography } from './src'

;<Grid gap={5}>
  <Colors theme={theme} />
  <Spacing theme={theme} />
  <Typography theme={theme} />
</Grid>