Component Library

Explore our shared components and design system.

Design System

Colors

--primary: #5E72E4;
--primary-light: #86A8FF;
--primary-dark: #172554;
--success: #2DCE89;
--warning: #FB6340;
--danger: #F5365C;

Typography

--font-sans: system-ui, sans-serif;
--font-mono: 'SF Mono', monospace;

Core Components

Button

<Button
  variant="primary" // primary, secondary, ghost
  size="md" // sm, md, lg
  disabled={false}
>
  Click me
</Button>

Input

<Input
  type="text"
  placeholder="Enter value..."
  error="Invalid input"
  onChange={(e) => handleChange(e)}
/>

Card

<Card
  title="Card Title"
  subtitle="Optional subtitle"
  footer={<Button>Action</Button>}
>
  Card content goes here
</Card>

Form Components

Select

<Select
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' }
  ]}
  onChange={(value) => handleSelect(value)}
/>

Checkbox

<Checkbox
  label="Remember me"
  checked={isChecked}
  onChange={(checked) => handleCheck(checked)}
/>