Card

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 Tailwind v4 surface with five variants (outlined, elevated, muted, soft, flat), four sizes that scale padding and radius together, three ways to separate its sections (rules, nothing, or tinted bands), and named subcomponents — Card.Header, Card.Body, Card.Footer, Card.Media and Card.Bleed, the last of which reaches past the card's padding so an image or a table meets its edge. 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.