PrimitivesCard

Card

Card groups related content with a subtle border, card background, and shadow. The compound parts are unstyled wrappers with sensible padding, so they compose with any layout.

Card ships with a full API table, a copyable example, and accessibility notes.

tsx

Monthly usage

Requests across all providers.

12,480

+18% from last month

Installation

Install the package once, then import Card from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { Card } from "@agent-ui/react/card";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@agent-ui/react";
2 
3<Card>
4  <CardHeader>
5    <CardTitle>Usage</CardTitle>
6    <CardDescription>Requests this month</CardDescription>
7  </CardHeader>
8  <CardContent>12,480</CardContent>
9</Card>

API reference

Every prop Card accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
className	string	—	Merged onto the root surface.
children	ReactNode	—	Card parts or arbitrary content.

Compound parts

Card exposes these parts for composition.

Compound parts
Part	Description
CardHeader	Vertical stack with p-6 padding.
CardTitle	h3 heading, 2xl semibold, tight tracking.
CardDescription	Muted small paragraph.
CardContent	p-6 wrapper without top padding.
CardFooter	Horizontal flex row, p-6 without top padding.

Use it with the rest of the library

Card composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

9 lines · copy-ready