Documentation

Integrations

Designers can be integrated with popular UI libraries and frameworks to provide a consistent design language and theme tokens across your stack.

Tailwind CSS

Use Designers as a Tailwind preset for instant design token integration:

// tailwind.config.js
module.exports = {
  presets: [require('designers/tailwind')],
  // ...your config
}

Chakra UI

Use Designers tokens with Chakra UI by extending its theme:

import { chakraTheme } from 'designers/integrations/chakra'
import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme(chakraTheme)

Mantine

Integrate Designers with Mantine for a unified theme:

import { mantineTheme } from 'designers/integrations/mantine'
import { MantineProvider } from '@mantine/core'

export function App({ children }) {
  return (
    <MantineProvider theme={mantineTheme}>
      {children}
    </MantineProvider>
  )
}

Material UI (MUI)

Use Designers tokens in your MUI theme:

import { muiTheme } from 'designers/integrations/mui'
import { ThemeProvider } from '@mui/material/styles'

export function App({ children }) {
  return (
    <ThemeProvider theme={muiTheme}>
      {children}
    </ThemeProvider>
  )
}

Tip: You can extend Designers integrations or create your own for any UI library using the exported tokens and utilities.