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 '@nim-ui/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

Tokens

backgroundcardcard-foregroundbordermuted-foregroundradius

Dependencies

utilstokens

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.