Documentation

Components

Explore our comprehensive component library and design tokens. Everything you need to build consistent, beautiful interfaces.

50+
Components
100+
Design Tokens
20+
Animations
5+
Integrations

Component Categories

Design Tokens

Core design tokens including colors, typography, spacing, and more.

Includes:
ColorsTypographySpacingShadowsBorder RadiusBreakpoints

Typography

Text styles, font families, and typographic scales.

Includes:
HeadingsBody TextCaptionsCode TextFont WeightsLine Heights

Layout Components

Flexible layout components for building responsive interfaces.

Includes:
ContainerGridFlexStackSpacerDivider

UI Components

Ready-to-use UI components with consistent styling.

Includes:
ButtonInputCardModalDropdownNavigation

Animations

Pre-built animations and motion components.

Includes:
FadeSlideScaleRotateBounceCustom Transitions

Utilities

Utility functions and helper components.

Includes:
Theme ProviderResponsive UtilitiesColor UtilitiesType Guards

Core Components

Core components are the building blocks of the Designers system. They provide flexible, theme-aware primitives for layout, UI, and interactivity. Use them to compose your own custom components and interfaces.

  • Button: For actions and forms, supports variants, sizes, and icons.
  • Card: For grouping content, with padding, radius, and shadow options.
  • Stack: For vertical spacing and layout, replaces manual margins.
  • Grid: For responsive layouts, columns, and gaps.
  • ThemeProvider: For enabling dark/light mode and custom themes.

Example: Composing Core Components

import { Button, Card, Stack, Grid, ThemeProvider } from 'designers'

export function ProfileCard({ user }) {
  return (
    <Card padding="lg" radius="xl" shadow="md">
      <Stack spacing="md">
        <img src={user.avatar} alt="Avatar" style={{ borderRadius: '50%', width: 64, height: 64 }} />
        <h3>{user.name}</h3>
        <p style={{ color: '#666' }}>{user.bio}</p>
        <Button variant="primary">Follow</Button>
      </Stack>
    </Card>
  )
}

// Using ThemeProvider at the root
export function App() {
  return (
    <ThemeProvider>
      <Grid columns={2} gap="lg">
        <ProfileCard user={{ name: 'Jane', avatar: '/avatar.jpg', bio: 'Designer' }} />
        <ProfileCard user={{ name: 'John', avatar: '/avatar2.jpg', bio: 'Developer' }} />
      </Grid>
    </ThemeProvider>
  )
}

Tips & Best Practices

  • Use Stack and Grid for all layouts—avoid manual margins and CSS grid unless needed.
  • Customize Button and Card with props for variant, size, radius, and shadow.
  • Wrap your app in ThemeProvider to enable theme switching and token awareness.
  • All core components are fully type-safe and support custom theming via config.
Pro Tip: You can extend core components or create your own by composing them together. See the Examples page for inspiration.

Usage Example

Here's a quick example of how to use Designers components in your React application:

import { Button, Card, Stack } from 'designers'
import { useDesigners } from 'designers/react'

export function MyComponent() {
  const { colors, typography } = useDesigners()
  
  return (
    <Card padding="lg" radius="md">
      <Stack spacing="md">
        <h2 style={{ ...typography.heading.h2 }}>
          Welcome to Designers
        </h2>
        <p style={{ color: colors.text.secondary }}>
          Build beautiful interfaces with our design system.
        </p>
        <Button variant="primary" size="lg">
          Get Started
        </Button>
      </Stack>
    </Card>
  )
}

Ready to get started?

Install Designers and start building with our component library today.

Installation GuideView Examples