Components

Card

Content container with elevation. Compose with CardHeader, CardTitle, CardDescription, CardContent, CardFooter.

Tones

raised · sunken · outline · ghost.

Raised

Default elevation

Sunken

Recessed surface

Outline

Border only

Ghost

No surface

tsx

<Card tone="raised"><CardTitle>Raised</CardTitle></Card>
<Card tone="sunken"><CardTitle>Sunken</CardTitle></Card>
<Card tone="outline"><CardTitle>Outline</CardTitle></Card>
<Card tone="ghost"><CardTitle>Ghost</CardTitle></Card>

With composition

Brand identity

Your colour palette, fonts and tone of voice — remembered by your AI agent.

The agent reuses these every time it generates a new section.

tsx

<Card padding="lg">
  <CardHeader>
    <CardTitle>Brand identity</CardTitle>
    <CardDescription>
      Your colour palette, fonts and tone of voice — remembered by your AI agent.
    </CardDescription>
  </CardHeader>
  <CardContent>
    The agent reuses these every time it generates a new section.
  </CardContent>
  <CardFooter>
    <Button size="sm">Open brand kit</Button>
    <Button size="sm" variant="ghost">Edit</Button>
  </CardFooter>
</Card>

Padding & radius

padding: none | sm | md | lg | xl · radius: md | lg | xl | 2xl