Skip to content
Aback UI

Foundation

Card

A bordered surface for grouping related content and actions.

StableUsed in Aback Tools, Aback Launch, Aback GroupRegistry JSON (opens in a new tab)

Workspace settings

Pro

Manage the name and address for this workspace.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add card

Writes components/ui/card.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
} from "@/components/ui/card";

API reference

Props and composition points for Card. Native element props pass through.

PropTypeDefaultDescription
CardTitle as"h2" | "h3" | "h4""h3"Keeps the heading order correct without changing the visual style.
CardHeader / CardContent / CardFooterdivNoneLayout slots. Header and content use 24px page insets.
classNamestringNoneLayout adjustments only. Borders and shadow come from the system.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • A card is a visual grouping, not a landmark. Do not add role region without a label.
  • CardTitle renders a real heading. Choose the level that continues the page outline.
  • Interactive cards should put the link on a real anchor inside the title, not on the whole div.
  • Keep one clear action hierarchy per card; do not place two subtle ghost actions side by side.

Used in production

The Aback products whose interfaces shaped this component.

Related