Components

Card

Elevated container that groups related content. Compose from CardHeader / CardContent / CardFooter.

Updated Jul 8, 2026 by Leonardo Posada

Basic

Payments summary
Last 30 days across all providers.
$128,450.20
+12.4% vs previous period
<Card className="w-full max-w-md">
  <CardHeader>
    <CardTitle>Payments summary</CardTitle>
    <CardDescription>Last 30 days across all providers.</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="text-2xl font-semibold">$128,450.20</div>
    <div className="text-xs text-muted-foreground mt-1">
      +12.4% vs previous period
    </div>
  </CardContent>
  <CardFooter>
    <Button variant="outline" size="sm">
      View report <ArrowRight weight="light" />
    </Button>
  </CardFooter>
</Card>

When to use

  • Grouping related fields, metrics, or actions.
  • Dashboard KPI tiles.
  • Preview of a resource (rule, transaction, product).

When not to use

  • Full-page layout — use a Template.
  • Modal-like content — use Dialog or Sheet.

Usage

Do
  • Use CardHeader + CardTitle + CardDescription when there's a heading.
  • Keep padding consistent (p-5 dense, p-6 default).
  • For actions, put them in CardFooter aligned to the right.
Don't
  • Don't nest Cards inside Cards — flatten the hierarchy.
  • Don't rely on shadow alone — border + shadow-xs is the Yuno signature.