Overview

• 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: Profile Card

This example shows how to compose a user profile card using Card, Stack, and Button:

import { Card, Stack, Button } 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>
  )
}

Example: Team Grid Layout

Use Grid and Stack to build responsive layouts for lists or teams:

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

export function TeamGrid({ members }) {
  return (
    <Grid columns={3} gap="lg">
      {members.map(member => (
        <Card key={member.id} padding="md">
          <Stack spacing="sm">
            <img src={member.avatar} alt={member.name} style={{ borderRadius: '50%', width: 48, height: 48 }} />
            <h4>{member.name}</h4>
            <p>{member.role}</p>
          </Stack>
        </Card>
      ))}
    </Grid>
  )
}

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.

Theming & Customization

All core components are theme-aware. You can customize colors, spacing, and typography via the Designers config or by wrapping your app in ThemeProvider.