Components

Card

A container component with optional header, content, and footer sections. Use variants to control visual prominence.

Basic usage

Compose with CardHeader, CardContent, and CardFooter for structured layouts.

Project settings

Manage your project configuration.

Content goes here.

Variants

Four variants for different visual weights.

Default
Elevated
Outline
Ghost

Padding

sm
md
lg
none

Example: Stats card

Total Revenue

+12%

$45,231

Compared to $40,385 last month

Props

PropTypeDefaultDescription
variant'default' | 'elevated' | 'outline' | 'ghost''default'Visual style of the card.
padding'none' | 'sm' | 'md' | 'lg''md'Internal padding size.
classNamestring—Additional Tailwind classes to merge.
...restHTMLAttributes<HTMLDivElement>—All native div props are forwarded.

Accessibility

  • Card is a generic div — add role if needed for landmark navigation.
  • Use semantic headings (h2, h3) inside CardTitle when appropriate.