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

none

Header actions

CardHeader stacks vertically by default, so a button in the top-right corner used to mean hand-copying flex-row items-start justify-between gap-3 space-y-0 at every call site — and dropping space-y-0 knocked the button out of alignment. The actions prop packages that exact string: it flips the header to a row and reserves the slot. The text column is min-w-0, so a long title is free to wrap or, with truncate on the CardTitle, to clip — instead of pushing the buttons out of the card.

Business unit

Last updated yesterday

12 members · 3 open roles

Manual layout

Same result, four more classes.

CardAction is the older, lower-level piece — an ml-auto box you place yourself once you have already made the header a row. Prefer actions; CardAction stays exported for code that already uses it.

Compound API

Every part is also attached to Card itself, so you can import one name and reach the slots through it — Card.Header, Card.Title, Card.Description, Card.Content, Card.Footer, and Card.Action. Both styles render identical markup; pick one per codebase.

Deployment

Production, europe-west1.

Last shipped 14 minutes ago.

Example: Stats card

Total Revenue

$45,231

+12%

Compared to $40,385 last month

Props

Card — the root surface.

Prop	Type	Default	Description
`variant`	'default' \| 'elevated' \| 'outline' \| 'ghost'	`'default'`	Visual style of the card. default and elevated fill with bg-card and differ only in shadow depth; outline and ghost are transparent.
`padding`	'none' \| 'sm' \| 'md' \| 'lg'	`'md'`	Internal padding size — none, p-4, p-6, or p-8.
`className`	string	`—`	Additional Tailwind classes to merge.
`...rest`	React.ComponentProps<'div'>	`—`	All native div props are forwarded to the root element.

CardHeader — the title block.

Prop	Type	Default	Description
`actions`	React.ReactNode	`—`	Buttons or a menu pinned to the top-right of the header. Passing it switches the header from its default vertical stack to a row; omitting it leaves the layout and DOM untouched.
`actionsClassName`	string	`—`	className for the actions cluster only — use it to change the gap or allow wrapping.
`className`	string	`—`	Additional Tailwind classes to merge onto the header.
`...rest`	React.ComponentProps<'div'>	`—`	All native div props are forwarded.

The remaining parts take native element props only: CardTitle renders an <h3>, CardDescription a <p>, and CardContent, CardFooter, and CardAction render a <div>. The cardVariants helper is exported too, for building a surface that has to match a Card without being one.

Accessibility

Card is a generic div — add role if needed for landmark navigation.
CardTitle already renders an <h3>. Do not nest another heading inside it; if the surrounding outline needs a different level, override the element from the page instead of doubling up.
Card borders use the decorative border token, which is deliberately below the 3:1 threshold — it groups content for the eye and must never be the only thing marking an interactive control.