Card

shadcn's compositional card, dressed in Fluid Functionalism. Stacked, inline, or grid — borderless by default with proximity hover that previews where a click will land.

Installation

This component is primitive-agnostic — same source under both flavors.

Playground

Inspect

Fluid motion

Spring-tuned transitions calibrated across three tiers

Accessible by default

Focus-visible rings and ARIA roles in every part

Yours to theme

Swap radius, icons, and primitive at runtime

Dark mode ready

Tokens adapt to light and dark automatically

Basic

Inspect

Fluid motion

Spring-tuned transitions calibrated across three tiers

Accessible by default

Focus-visible rings and ARIA roles in every part

Yours to theme

Swap radius, icons, and primitive at runtime

Dark mode ready

Tokens adapt to light and dark automatically

Grid — 2-D proximity

Inspect

Fluid motion

Spring-tuned transitions calibrated across three tiers

Accessible by default

Focus-visible rings and ARIA roles in every part

Yours to theme

Swap radius, icons, and primitive at runtime

Dark mode ready

Tokens adapt to light and dark automatically

Outlined group

Inspect

Fluid motion

Spring-tuned transitions calibrated across three tiers

Accessible by default

Focus-visible rings and ARIA roles in every part

Yours to theme

Swap radius, icons, and primitive at runtime

Dark mode ready

Tokens adapt to light and dark automatically

Separated tiles

Inspect

Fluid motion

Spring-tuned transitions calibrated across three tiers

Accessible by default

Focus-visible rings and ARIA roles in every part

Yours to theme

Swap radius, icons, and primitive at runtime

Dark mode ready

Tokens adapt to light and dark automatically

Fully yours — compose anything

Inspect

Meet the new Card component

Always pixel-perfectRenders your design exactly — token-driven and crisp in light and dark, at any radius

Stacked, inline, or gridOne compositional API — borderless by default, with separated tiles or a shared frame

Selected

Inspect

Fluid motion

Spring-tuned transitions calibrated across three tiers

Accessible by default

Focus-visible rings and ARIA roles in every part

Yours to theme

Swap radius, icons, and primitive at runtime

Dark mode ready

Tokens adapt to light and dark automatically

API Reference — Card

Prop	Type	Default	Description
children	ReactNode	—	Compositional parts: CardImage, CardMedia, CardHeader, CardContent, CardFooter.
onClick	() => void	—	Makes the whole card a clickable target (stretched button).
href	string	—	Makes the whole card a link (stretched anchor).
external	boolean	false	Opens href in a new tab.
label	string	—	Accessible name for the stretched link/button when the whole card is clickable.
selected	boolean	false	Persistent selected fill + title emphasis, on top of proximity hover. The group drops the hairline dividers around the selected card so the fill reads clean.
disabled	boolean	false	Dims and disables the card.
dismissible	boolean	false	Shows a dismiss (✕) button.
onDismiss	() => void	—	Called when the dismiss button is pressed.

API Reference — CardGroup

Prop	Type	Default	Description
orientation	"card" \| "inline"	"card"	Per-card layout: stacked (media/header on top) or a horizontal row.
columns	number	1	Grid columns. Greater than 1 enables 2-D proximity across rows and columns.
border	"none" \| "outlined"	"none"	Borderless (dividers only) or a drawn border.
separated	boolean	false	Split into individually-shaped tiles with a gap instead of one divided block.
proximityHover	boolean	true	Enable the magnetic proximity-hover highlight.
children	ReactNode	—	Card children. Each is auto-assigned its proximity index.

API Reference — Parts

Prop	Type	Description
CardHeader	part	Title + description grid; pins CardAction to the top-right.
CardTitle	part	Weight-animates normal → semibold when the card is selected (proximity hover previews via the highlight, not the weight).
CardDescription	part	Muted supporting text.
CardAction	part	Top-right slot in the header (e.g. a menu button); stays clickable above the card overlay.
CardContent	part	Body region below the header.
CardFooter	part	Actions row. Trailing-right in inline cards, but drops below the text (natural order) in an inline card with a CardImage; wraps under the content when stacked.
CardMedia	IconComponent \| logo	Leading icon in a tinted 32×32 tile, or a brand logo / [logoA, logoB] tuple.
CardImage	{ src }	Full-bleed image — a top banner when stacked, a square leading image when inline. Corners round only inside a framed tile (outlined, or a caller's overflow-hidden wrapper); a borderless card reads as a plain rectangle.
CardEyebrow	part	Small uppercase label above the title.
CardFeature	{ icon, title, description }	Icon + title + description row for feature lists.

API Reference — CardButton

Prop	Type	Default	Description
children	ReactNode	—	Button label.
onClick	() => void	—	Click handler.
href	string	—	Renders the action as a link.
variant	"primary" \| "secondary" \| "ghost" \| "link"	"ghost"	Visual style.
icon	IconComponent	—	Leading (or trailing) icon.
iconPosition	"start" \| "end"	—	Icon side. Defaults to end for external actions, else start.
external	boolean	false	Appends an outward arrow and opens href in a new tab.