Card
A container for grouping related content with optional header, footer, and sections.
Basic
Card title
A short description of the card content.
This is the main content area of the card.
Variants
Default
Standard card background.
Subtle
Muted background for secondary content.
Spacing
Default spacing
Standard padding and gap between sections.
Content area.
Compact spacing
Each section manages its own padding. No gap between sections.
Content area.
Flush spacing
3 items
Flush content reaches the card edge.
spacing="flush" drops the card’s own vertical padding and clips to the border radius, so a
table or list can reach the card edge. CardHeader picks this up and supplies its own band
(border-b, px-4 py-2.5) — use it rather than hand-rolling a header row. CardContent and
CardFooter still carry horizontal padding only, so flush bodies own their vertical spacing.
With card action
Notifications
Manage your notification preferences.
Choose which notifications you’d like to receive.