Card
Bordered surface with a subtle background. Compose with CardHeader and CardBody for consistent padding, or use Card directly and bring your own layout.
src/components/ui/card.tsxBasic card
A plain Card with no subcomponents — apply your own padding when the layout calls for something non-standard.
Pro plan
Unlimited agents, 1M tokens/month, priority email support.
Composed — Header + Body
CardHeader has p-6 pb-3, CardBody has p-6 pt-3 — together they give a clean tight vertical rhythm.
Monthly spend
Apr 202664% of $2,000 monthly budget.
As a feature tile
Cards tile nicely in a grid — drop them into a 2- or 3-column layout for pricing, changelog entries, or feature callouts.
Streaming primitives
Token-by-token text, markdown, code, JSON, and tables.
Agent state
Trace viewer, memory inspector, tool-permission gates.
With a footer action
Extend Card with your own footer — Card's border handles the outline, so any internal divider is yours to style.
Upgrade to Team
Collaborate on prompt libraries, share traces, and get SSO.