@framingui/ui

Installation

npm install @framingui/ui

Quick Usage

import { Button, Card, Input } from '@framingui/ui';

export function LoginForm() {
  return (
    <Card className="p-6 space-y-4">
      <Input placeholder="Email" type="email" />
      <Input placeholder="Password" type="password" />
      <Button className="w-full">Sign In</Button>
    </Card>
  );
}

Components

Button

Primary action component with multiple variants and sizes.

import { Button } from '@framingui/ui';

// Variants
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

// With icon
<Button>
  <PlusIcon className="w-4 h-4 mr-2" />
  Add Item
</Button>

Card

Container component for grouping related content.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@framingui/ui';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Main content area</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Theming

Components automatically inherit theme tokens via CSS custom properties.

/* Components use semantic tokens */
.button-primary {
  background: var(--color-brand-500);
  color: var(--color-brand-50);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
}

/* Theme-specific overrides applied automatically */
[data-theme="editorial-tech"] .button-primary {
  border-radius: var(--radius-full); /* pill buttons */
}