Build fast. Ship right.

import { Button } from '@/components/ui/button';

<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>

import { Badge } from '@/components/ui/badge';

<Badge>Default</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Failed</Badge>

import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';

<Alert variant="success">
  <CheckCircle className="h-4 w-4" />
  <AlertTitle>Payment processed</AlertTitle>
  <AlertDescription>$45.00 collected successfully.</AlertDescription>
</Alert>

import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

<Card>
  <CardHeader>
    <CardTitle>Life Cover</CardTitle>
    <CardDescription>Real Insurance</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>

// Layout, spacing, typography — all as className
<div className="flex items-center gap-4 rounded-xl border bg-white p-6 shadow-sm">
  <span className="text-sm font-medium text-gray-900">Label</span>
  <span className="text-xs text-gray-500">Supporting text</span>
</div>

// Responsive — sm: md: lg: xl: 2xl:
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

// State variants — hover: focus: active: disabled: group-hover:
<button className="bg-brand-600 hover:bg-brand-700 disabled:opacity-50
                   focus-visible:ring-2 focus-visible:ring-brand-500">

import { cn } from '@/lib/utils';

// Conditional classes — no string interpolation bugs
<div className={cn(
  'rounded-lg border p-4',           // always applied
  isActive  && 'border-brand-500 bg-brand-50',
  isError   && 'border-red-500 bg-red-50',
  className,                         // forwarded className prop
)}>

// CVA for variant components (used in all UI components here)
import { cva } from 'class-variance-authority';
const variants = cva('base-classes', {
  variants: {
    size: { sm: 'h-8 px-3 text-xs', md: 'h-10 px-4 text-sm' },
  },
});