Card
A container that groups related content and actions in a bordered, elevated surface.
bunx shadcn@latest add @nx-ui/cardBasic usage
Header, content and footer slots compose into a single bordered surface.
412 tonnes of green waste processed this week, tracking 6% ahead of the seasonal forecast.
Header with action
CardAction anchors a control to the top-right of the header grid, alongside a title and description.
Soil health checks are due before the fourteen plots are handed back to members for the autumn planting round.
Sizes
The default card uses generous spacing; the sm size tightens padding for dense layouts.
Used for standalone cards and feature panels across the dashboard.
Suited to grids of cards, such as a list of organisations or collection rounds.
Loading state
While data loads, mirror the eventual layout with skeleton placeholders rather than a spinner.
Composition: project card
Cards combine freely with badges, avatars and progress to build realistic dashboard tiles.
API reference
Exported parts and their props, extracted from the component source.