Documentation

React Integration

Designers provides first-class support for React. Use our hooks, providers, and components to build fully theme-aware, type-safe UIs in your React apps.

Using the useDesigners Hook

Access design tokens and theme values directly in your React components:

import { useDesigners } from 'designers/react'

export function MyComponent() {
  const { colors, typography } = useDesigners()
  return (
    <div style={{ color: colors.text.primary, fontFamily: typography.fontFamily }}>
      Hello from Designers!
    </div>
  )
}

ThemeProvider

Wrap your app with ThemeProvider to enable dark/light mode and custom themes:

import { ThemeProvider } from 'designers/react'

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

React Components

Use Designers components as regular React components:

import { Button } from 'designers/react'

export function DemoButton() {
  return <Button variant="primary">Click me</Button>
}
Tip: All Designers components are fully type-safe and support custom theming out of the box.