Chart Card

Card wrapper for charts with a title, optional description and a minimum height body. Pairs with the area, bar and donut charts in a React dashboard.

src/registry/ui/chart-card.tsx/r/chart-card.json

Installation#

bash

npx shadcn@latest add @minidev/chart-card

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/chart-card.json

Usage#

tsx

import { ChartCard } from "@/components/ui/chart-card"

export function Example() {
  return (
    <ChartCard className="w-full max-w-xl" title="Signups" description="Last 14 days">
      <div className="flex h-40 items-end gap-1">
        {[40,55,48,70,62,80,75,90,88,95,92,100,110,120].map((h,i)=>(
          <div key={i} className="flex-1 rounded-sm bg-accent/80" style={{ height: `${h/1.4}%` }} />
        ))}
      </div>
    </ChartCard>
  )
}

API reference#

ChartCard props
Prop	Type	Default
`title*`	`React.ReactNode`	`-`
`description`	`React.ReactNode`	`-`
`children`	`React.ReactNode`	`-`
`className`	`string`	`-`

* required

Examples#

StatsKPIs & deltas

Area ChartDependency free SVG area chart for React with a smoothed line, dashed grid, gradient fill and an optional highlighted point. Strokes stay crisp at any size.Bar ChartLightweight React bar chart with rounded bars, dashed gridlines and labels. Hovering a bar dims the rest and shows its value; the peak is highlighted first.Chart LegendWrapping chart legend with small color swatches and labels. Pass colors per series or fall back to accent, success, warning and danger theme tokens.Chart Tooltip CardTooltip card for charts showing a title and label and value rows with tabular numbers. Drop it into any chart library's custom tooltip slot.Donut ChartSingle value donut chart in SVG that fills an accent ring to a percentage of max and prints the percent in the middle. Labelled as an image for screen readers.Funnel StepsA conversion funnel drawn as labeled horizontal bars scaled to the largest step, with formatted counts per stage. Suited to signup and checkout analytics.

All chart components

Learn more

Build a SaaS dashboard in Next.js with free componentsGuide Charts in React with Tailwind and no charting libraryGuide Best React chart libraries, and when you do not need oneGuide What is Container queries?Glossary