Card

Installation

The components are exported from @by/experience-system. Add the package with your package manager:

pnpm add @by/experience-system

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.

Composition

Use the following composition to build a Card:

Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription (optional)
│   └── CardAction (optional)
├── CardContent (optional)
└── CardFooter (optional)

CardHeader uses a @container/card-header grid so CardAction aligns to the top trailing edge when present. CardTitle and CardDescription are plain div elements (not headings by default)—choose heading levels in the surrounding page if needed.

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@by/experience-system';

Card and its parts are client components ('use client'). Use them inside a Client Component or a dynamic import when using the Next.js App Router.

<Card className="max-w-sm">
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Supporting text.</CardDescription>
  </CardHeader>
  <CardContent>Body content.</CardContent>
</Card>

Examples

Overview

Basic header and content.

Form layout

CardAction in the header for a secondary control, CardFooter for primary actions.

Elevation

Shadow utilities on Card for depth (shadow-sm through shadow-xl).

Interactive patterns

Link-wrapped card, selectable cards, and RadioGroup card options (focus rings on the interactive wrapper).

Clickable card (link)

Full card is a link: interactive cards have stronger outline than regular cards, use `border-neutral-alpha-6` and `border-neutral-alpha-8` for normal and hovered states respectively.

Selectable cards

Click a card to select it; selection uses a higher elevation than idle cards.
Selectable cards have stronger outline than regular cards, use `border-neutral-alpha-6` and `border-neutral-alpha-8` for normal and hovered states respectively.

Radio cards

Use RadioGroup with Radio at the start of each card; wrap the card in Label so the whole surface toggles the option. Only one card can be selected at a time.

Expandable card

CardExpandTrigger in CardAction toggles the card between collapsed and expanded states via the expanded / onExpandedChange props on Card.

Expanded content

CardExpandedContent renders only when the card is expanded. Use it for supplementary content — charts, detailed breakdowns, or any region that should stay hidden until the user expands the card.

API Reference

Subsection titles name the exports from @by/experience-system. These are layout div components (not Radix primitives).

Data attribute	Values
`data-slot`	`card`