Card

Container with two flavors: shorthand props (title + actions) for quick stat tiles, and shadcn-style composition (CardHeader / CardTitle / CardDescription / CardContent / CardFooter) for richer layouts. Pick whichever fits the screen — both stay in the same component, no extra imports.

Examples

With header + actions

Use the actions slot for a 'view all' link, menu trigger, or any control. Avoid heavy badges here — they fight for attention with the title.

Recent activity

New customer signed up · 2h ago
Plan upgraded to Pro · 5h ago
Payment received · 1d ago

<Card
  title="Recent activity"
  actions={
    <Button variant="ghost" size="sm" rightIcon={<ArrowRight size={14} />}>
      View all
    </Button>
  }
>
  <ul className="space-y-2 text-sm text-muted-foreground">
    <li>New customer signed up · 2h ago</li>
    <li>Plan upgraded to Pro · 5h ago</li>
  </ul>
</Card>

Free-form body

Account verified

Your email and phone number are confirmed. You can now invite teammates.

<Card>
  <h4 className="font-semibold">Account verified</h4>
  <p className="mt-2 text-sm text-muted-foreground">
    Your email and phone number are confirmed.
  </p>
</Card>

Header with menu trigger

Top customers

Wire actions to dropdown menus or modals — Card is the container, not the interaction.

<Card
  title="Top customers"
  actions={<button aria-label="More"><MoreHorizontal /></button>}
>
  ...
</Card>

Composition (shadcn pattern)

When you need a description / subtitle / footer, compose the sub-components. The legacy shorthand header is automatically skipped when composing — no double headers.

Upgrade to Pro

Unlock unlimited team seats, advanced analytics, and priority support.

Cancel anytime. 30-day money back guarantee.

<Card>
  <CardHeader>
    <CardTitle>Upgrade to Pro</CardTitle>
    <CardDescription>
      Unlock unlimited team seats, advanced analytics, and priority support.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-sm">Cancel anytime. 30-day money back guarantee.</p>
  </CardContent>
  <CardFooter>
    <Button>Upgrade</Button>
    <Button variant="ghost" className="ml-2">Learn more</Button>
  </CardFooter>
</Card>

API Reference

Props of the Card component.

Prop	Type	Default	Description
`title`	`string`	—	Shorthand header — omit when composing with <CardHeader>.
`actions`	`ReactNode`	—	Right side of the shorthand header.
`CardHeader`	`component`	—	Composition: top section with title + description.
`CardTitle`	`component`	—	Heading — semibold, tracking-tight.
`CardDescription`	`component`	—	Muted-foreground subtitle below the title.
`CardContent`	`component`	—	Body. Adds p-6 pt-0 so it sits right under the header.
`CardFooter`	`component`	—	Optional bottom section for actions.