Skip to main content
ShadcnUI
Navigation

Card

A neutral bordered surface with composable authored regions.

When to use it. Use it to group related content without inventing workflow semantics.

Native baseline The caller's native elements, names, and document relationships remain authoritative. Exact fallback Content order and native elements remain intact without styles.

How it works

  • <.card> The caller's native elements, names, and document relationships remain authoritative.
  • package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
  • gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :card does not ship them.
  • application boundary ShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.

Examples use package semantic tokens in explicit light and dark scopes.

Accessibility and browser support

Caller headings, links, forms, and controls retain their native semantics.

Card support and fallback
Feature Locked-engine evidence When missing
Native baseline Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix. Content order and native elements remain intact without styles.
Exact fallback The locked-engine matrix retains the documented native or static outcome. Content order and native elements remain intact without styles.

Application ownership and API

The application owns data, destinations, selection, submission, loading, and commands.

Public API Package source

Provenance

Catalogue identity foundation.card, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Adapt card markup into composable semantic HEEX regions without assigning workflow behavior.