Base
Components

Card

One idea in a box: a title, a line about it, content and actions.

shadcn/uiData display
shadcn/ui docs (opens in a new tab)components/ui/card.tsx

Preview

Brand presentation
18 slides, updated on 9 October.

Installation

It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.

npx shadcn@latest add card

Examples

Header, content, footer

Card title
One line on what this card holds.
Content sits here. Keep it to one idea per card.

Loading

Skeletons in the shape of the content.

Guidelines

Use it

  • Items in a grid you compare or pick from.
  • A skeleton inside it while it loads.

Don't

  • Put cards inside cards.
  • Wrap ruled lists in cards: use rows.

Used in

The screens in this Base that show it, found in the code.