Component

Card

Card primitives help structure panels, settings surfaces, and summary blocks without introducing behavior-specific abstractions.

Preview

Release candidate

A card can compose product copy, actions, and status content.

Keep card primitives simple so contributors can read, change, and extend them without hidden runtime behavior.

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add card

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@nimjs/ui';

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Workspace analytics</CardTitle>
        <CardDescription>Weekly delivery overview.</CardDescription>
      </CardHeader>
      <CardContent>Track releases and contributor activity.</CardContent>
    </Card>
  );
}

System metadata

Registry

card

Category: display

Status: preview

Version marker: 0.0.0 (unreleased)

Files

card.tsx

Tokens

cardcard-foregroundbordermuted-foregroundradius

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

contrast awarescreen reader readable

Anatomy

root

Surface container that owns border, background, foreground, and radius styles.

header

Optional heading region for title and description content.

content

Primary body region for grouped content.

footer

Optional action or metadata region.

Usage patterns

grouped surface

Use for bounded content where title, body, and actions need a shared visual container.

composition primitive

Keep domain behavior outside the card and compose it in application code.

Guidance

Keep cards presentational. Interactions and domain logic should live in the consuming app so the package remains reusable across product surfaces and documentation examples.