Invoice footer

</div>
        <div className="flex items-start justify-between gap-4">
          <Label htmlFor="ws-digest" className="grid gap-1 font-normal">
            <span className="font-medium">Weekly digest</span>
            <span className="text-caption text-muted-foreground">Email a revenue summary every Monday.</span>
          </Label>
          <Switch id="ws-digest" defaultChecked />
        </div>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="ghost">Cancel</Button>
        <Button>Save changes</Button>
      </CardFooter>
    </Card>
  )
}
```

#### Sign-up form

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"

export default function FormSignup() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Create an account</CardTitle>
        <CardDescription>Start your 14-day trial. No card required.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-5">
        <div className="grid grid-cols-2 gap-3">
          <Button variant="outline">GitHub</Button>
          <Button variant="outline">Google</Button>
        </div>
        <div className="flex items-center gap-3 text-caption text-muted-foreground">
          <Separator className="flex-1" />
          or with email
          <Separator className="flex-1" />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="signup-email">Work email</Label>
          <Input id="signup-email" type="email" placeholder="you@company.com" />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="signup-password">Password</Label>
          <Input id="signup-password" type="password" />
          <p className="text-caption text-muted-foreground">At least 12 characters.</p>
        </div>
        <div className="flex items-center gap-2.5">
          <Checkbox id="signup-terms" />
          <Label htmlFor="signup-terms" className="font-normal">
            I agree to the terms of service
          </Label>
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Create account</Button>
      </CardFooter>
    </Card>
  )
}
```

### Cards

Stat cards, feature cards and pricing cards on a 16px or 24px grid.

- Use a grid with gap-4 for dense dashboards and gap-6 for marketing pages.
- Lead stat cards with the label, then the number in text-title, then context.
- Highlight one pricing card at most, with a primary ring.

#### Stat grid

```tsx
import { TrendingDownIcon, TrendingUpIcon } from "@keyline-icons/react/fill"

import { Badge } from "@/components/ui/badge"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

const stats = [
  { label: "Revenue", value: "$48,210", delta: "+12.4%", up: true, note: "vs. last month" },
  { label: "Subscriptions", value: "2,318", delta: "+8.1%", up: true, note: "142 new this month" },
  { label: "Churn", value: "2.4%", delta: "+0.3%", up: false, note: "Up from 2.1%" },
]

export default function CardsStats() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-3">
      {stats.map((s) => (
        <Card key={s.label} size="sm">
          <CardHeader>
            <CardDescription>{s.label}</CardDescription>
            <CardAction>
              <Badge variant={s.up ? "success" : "destructive"}>
                {s.up ? <TrendingUpIcon data-icon="inline-start" /> : <TrendingDownIcon data-icon="inline-start" />}
                {s.delta}
              </Badge>
            </CardAction>
          </CardHeader>
          <CardContent className="grid gap-1">
            <span className="text-title tabular-nums">{s.value}</span>
            <span className="text-caption text-muted-foreground">{s.note}</span>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
```

#### Pricing

```tsx
import { CheckIcon } from "@keyline-icons/react/fill"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

const plans = [
  { name: "Starter", price: "$0", note: "For side projects", perks: ["1 dashboard", "30 days of history"] },
  { name: "Growth", price: "$49", note: "For growing teams", perks: ["Unlimited dashboards", "Slack alerts", "5 seats"], featured: true },
  { name: "Scale", price: "$199", note: "For finance teams", perks: ["Forecasts", "SSO", "Unlimited seats"] },
]

export default function CardsPricing() {
  return (
    <div className="grid w-full items-start gap-4 md:grid-cols-3">
      {plans.map((p) => (
        <Card key={p.name} className={p.featured ? "ring-2 ring-primary" : undefined}>
          <CardHeader>
            <CardTitle>{p.name}</CardTitle>
            <CardDescription>{p.note}</CardDescription>
            {p.featured && (
              <CardAction>
                <Badge>Popular</Badge>
              </CardAction>
            )}
          </CardHeader>
          <CardContent className="grid gap-5">
            <p>
              <span className="text-title tabular-nums">{p.price}</span>
              <span className="text-body text-muted-foreground"> / month</span>
            </p>
            <ul className="grid gap-2.5 text-body">
              {p.perks.map((perk) => (
                <li key={perk} className="flex items-center gap-2">
                  <CheckIcon className="size-4 text-primary" />
                  {perk}
                </li>
              ))}
            </ul>
          </CardContent>
          <CardFooter className="border-t-0 bg-transparent">
            <Button className="w-full" variant={p.featured ? "default" : "outline"}>
              Choose {p.name}
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}
```

### Dialogs

When to use Dialog, AlertDialog and Sheet.

- Dialog for a short focused task. AlertDialog when the action can't be undone. Sheet for longer side tasks.
- The confirm button names the action. Cancel is always available.
- Destructive confirmations use the destructive button and repeat what will be deleted.

#### Edit in a dialog

Same code as the `dialog-form` example above.

#### Confirm deletion

Same code as the `dialog-confirm` example above.