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.

Usage

Card example · tsx

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: ui

Status: stable

Since: 0.0.0

Files

card.tsx

Tokens

backgroundcardcard-foregroundbordermuted-foregroundradius

Dependencies

utilstokens

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.