Card

A surface container with header, title, description, content, and footer sections for grouping related information.

cardcontainersurfacelayoutpanel

How do I install the Card component?

Run the command below in a project with the shadcn CLI. It copies the component source into your repo and installs its dependencies.

npx shadcn@latest add https://www.saasuji.com/r/card.json

Dependencies

Also available as a markdown reference for AI agents: /components/card.md

Related components

Avatar

Circular profile images built on Radix Avatar with an automatic initials fallback, plus overlapping AvatarGroup and count primitives.

Skeleton

Shimmering or pulsing placeholder blocks with three preset compositions for product cards, product lists, and category grids.

Bento Grid

A three-column asymmetric feature grid with BentoGrid and BentoCard, including background, icon, description, and call-to-action slots that reveal on hover.