Card

A surface that groups related content.

Invite your team

Teammates can view and edit every project.

When to use

Use when: Grouping content about one thing, such as a summary, a setting, or an item in a grid.
Avoid when: Every section of a page would be a card; use spacing and headings instead.

Installation

bunx shelf add card

The source lands in src/components/ui/card.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Card from "@/components/ui/card";

<Card.Root>
  <Card.Header>
    <Card.Title>Revenue</Card.Title>
    <Card.Description>Last 30 days</Card.Description>
  </Card.Header>
  <Card.Content>…</Card.Content>
  <Card.Footer>…</Card.Footer>
</Card.Root>

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, utils
Figma: In progress. See Designers and Figma.