Every dashboard, settings panel, and inbox row needs a container that establishes visual hierarchy without redoing border, shadow, padding, and dark-mode tokens from scratch. Inline divs accumulate Tailwind class-soup, drift from page to page, and break the moment a designer touches the theme.

Card is a controlled-by-default Tailwind v4 surface with three variants (outlined, elevated, flat), four padding sizes, and named subcomponents — Card.Header, Card.Body, Card.Footer — so layouts stay declarative. Every variant respects the theme's zinc + dark-mode tokens automatically.

Import from @particle-academy/react-fancy, drop in <Card variant="elevated">, and place Card.Header / Card.Body / Card.Footer inside. For agent-driven layouts: pass content as children — no special hooks needed, the surface is fully static.