Card

Card is the default container for a block of an app screen, such as a form section, a summary, a list of invoices or a chart. It offers several surface treatments and a joined frame for titled sections that hold tables or stacked cards.

Install

bashnpx shadcn@4.18.0 add @siteplane/card

Import it from @/siteplane/components/card. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Settings List: Pick Settings List when every row is a labelled control; it already draws its own card and separators.
• vs Data List: Put a Data List inside a Card when the content is label and value pairs for one record.
• vs Glass: Use the glass variant only when the card sits over a photo, video or colourful surface.

Rules

• Build with CardHeader (holding CardMedia, CardTitle, CardDescription, CardAction), then CardPanel and CardFooter.
• Render the title as a heading with render={<h2 />} when it belongs in the page outline, because title parts are divs by default.
• Do not wrap a card that contains buttons in another button or link; keep each control separate.
• Pick the surface with variant (raised, subtle, header, inset, elevated, message, error, glass) and the padding with density or the --sp-rw-card-inset tokens.
• Use CardFrame with CardFrameBleed to run a table edge to edge so its columns line up with the frame header.

Reference

• Card docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.