Card

Cards are the system's repeatable surface primitive. They provide edge, spacing, and typographic hierarchy for places where content needs to feel grouped and intentional, whether that content is editorial copy, product metadata, or a compact utility workflow.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>System Surface</CardTitle>
    <CardDescription>Structure before decoration.</CardDescription>
  </CardHeader>
</Card>

Why This Primitive Exists

The Swiss card keeps the familiar shadcn import story, but it adds a stricter content rhythm so cards can scale from plain utility panels to more art-directed shelves.

• Use a card when a section needs a visible frame and repeatable internal spacing.
• Reach for card subcomponents before hand-rolling local title, meta, and footer patterns.
• Change variant or tone to fit the surface, not to compensate for weak content hierarchy.

Examples

Variant Overview

The base card works well for standard UI, while the repo-specific variants tune the surface for denser data panels, editorial modules, or action-driven utilities.

Composition With Media And Actions

The exported subcomponents are meant to be combined. CardMedia, CardPrice, and CardActions let a product or launch card stay within the same primitive instead of branching into a separate bespoke layout.

import {
  Card,
  CardActions,
  CardContent,
  CardHeader,
  CardMedia,
  CardPrice,
  CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"

<Card variant="media">
  <CardMedia />
  <CardHeader>
    <CardTitle>Grid Chair</CardTitle>
  </CardHeader>
  <CardContent>
    <CardPrice>$420</CardPrice>
    <CardActions>
      <Button>Add to cart</Button>
      <Button variant="outline">See details</Button>
    </CardActions>
  </CardContent>
</Card>

In Context

Cards become more useful when they show relationship, not just isolation. Pair an editorial summary card with a quieter supporting panel so adjacent content can share the same visual grammar without feeling duplicated.

<Card variant="data" tone="hero">
  <CardHeader>
    <CardTitle>Supporting metrics</CardTitle>
  </CardHeader>
  <CardContent>{/* compact metrics or filters */}</CardContent>
</Card>

Guidance

Start With Content Structure

• Use CardHeader for identity, not just decoration.
• Keep CardTitle short enough to hold an intentional line length.
• Put metadata in CardMeta or CardEyebrow so the title can stay focused on the main idea.

Choose Variant Before Tone

• Pick variant based on the kind of surface you are building.
• Use tone="quiet" or tone="hero" as a secondary adjustment after the structure is right.
• Reserve tone="inverse" for genuinely dark or image-heavy environments.

Prefer Reuse Over One-Off Layouts

• If a card needs pricing, actions, or media, use the exported slots before creating a custom wrapper.
• Keep footer actions concise; a card is a container, not a full page.
• When content can sit directly on the page without losing clarity, skip the card entirely.

API Reference

Card

The root Card component renders a div and accepts standard React.ComponentProps<"div"> plus the shared surface variants below.

Exported Slots

Use the slot components to keep hierarchy consistent instead of re-creating local typography rules.