Card

Elevated surface for grouped content - header, body, footer slots.

Preview → install → use

Preview

npx shadcn@latest add @atroui/card

Project Alpha

Shipped this week

A calm surface with clear hierarchy.

Accent edge

Optional brand border

Same primitives - compose with tokens, not one-off styles.

Source lands in your repo. Setup: Installation · Registry catalog.

Use Card when the surface itself is the interaction container. Prefer plain sections for static marketing layout.

Prop	Type	Default	Description
size	'default' \| 'sm'	'default'	Density.
className	string	-	Extra classes (e.g. border-brand/30).