Card

A versatile container for grouping related content.

Basic

A Card with CardHeader, CardContent, and CardFooter.

Project overview

A summary of the current project status.

Everything is on track. The next milestone is due at the end of the sprint.

<Card>
<CardHeader
  title="Project overview"
  description="A summary of the current project status."
/>
<CardContent className="mt-4">
  <p>Everything is on track. The next milestone is due at the end of the sprint.</p>
</CardContent>
<CardFooter className="mt-4">
  <Button variant="primary" size="sm">View project</Button>
  <Button variant="outline" size="sm">Dismiss</Button>
</CardFooter>
</Card>

With action

Pass a node to the action prop on CardHeader to render it in the top-right slot.

API usage

Requests in the last 30 days.

Live

12,430 requests — 99.9% uptime.

<Card>
<CardHeader
  title="API usage"
  description="Requests in the last 30 days."
  action={<Badge variant="success" dot>Live</Badge>}
/>
<CardContent className="mt-4">
  <p>12,430 requests — 99.9% uptime.</p>
</CardContent>
</Card>

Padding variants

Use the padding prop to control the card's internal spacing.

padding="none"

padding="sm"

padding="md" (default)

padding="lg"

<Card padding="none">…</Card>
<Card padding="sm">…</Card>
<Card padding="md">…</Card>
<Card padding="lg">…</Card>

Props

Card

Prop	Type	Default	Description
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Internal spacing of the card
`className`	`string`	—	Additional Tailwind classes
`children`	`ReactNode`	—	Card content

CardHeader

Prop	Type	Default	Description
`title`	`string`	—	Bold heading rendered inside the header
`description`	`string`	—	Muted sub-text below the title
`action`	`ReactNode`	—	Right-aligned slot for buttons, badges, etc.
`separator`	`boolean`	`false`	Renders a bottom border separator between header and body
`className`	`string`	—	Additional Tailwind classes
`children`	`ReactNode`	—	Arbitrary content below title and description

CardContent

Prop	Type	Default	Description
`className`	`string`	—	Additional Tailwind classes
`children`	`ReactNode`	—	Main body content

CardFooter

Prop	Type	Default	Description
`className`	`string`	—	Additional Tailwind classes
`children`	`ReactNode`	—	Footer actions; laid out as a flex row with gap