Search

Search components and blocks

Sign in

AI Chart Card

Pro

A chart an agent drew in answer to a prompt. The prompt sits in a pill on top next to a sliding Week / Month / Quarter switch. Each change (or Regenerate) shows a dithered loader cycling status lines, then crossfades to a dither bar chart that grows in, with a one-line takeaway fading in beneath it.

pnpm dlx shadcn@latest add @ditherui/ai-chart-card
Show me signups over time
Querying the data...
Generated by AI · check the numbers

Props

promptstring"Show me signups over time"
ranges{ key: string; label: string; data: { label: string; value: number }[]; insight: string }[]Week / Month / Quarter sample data
rangestring—
defaultRangestringfirst range key
onRangeChange(key: string) => void—
className / ...div propsReact.ComponentProps<"div">—

When to use the AI chart card

Use it when an assistant answers with a chart. The prompt sits in a pill on top next to a sliding Week, Month or Quarter switch.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components