React chart components
Free React chart components drawn in SVG: area, line, bar, stacked, donut, gauge, radar, funnel and heatmap charts with legends, tooltips and dark mode.
17 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
These charts are plain SVG with no charting library underneath, which keeps them small and easy to restyle. Colors come from the accent and status tokens, so a chart always matches the rest of the product.
Each chart handles the details that make dashboards readable: tabular numbers, quiet gridlines, clear legends, and tooltip cards that match the rest of the interface.
Components 17
Area ChartuiDependency 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.npx shadcn@latest add ui.minidev.pro/r/area-chart.jsonBar ChartuiLightweight 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.npx shadcn@latest add ui.minidev.pro/r/bar-chart.jsonChart CarduiCard 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.npx shadcn@latest add ui.minidev.pro/r/chart-card.jsonChart LegenduiWrapping chart legend with small color swatches and labels. Pass colors per series or fall back to accent, success, warning and danger theme tokens.npx shadcn@latest add ui.minidev.pro/r/chart-legend.jsonChart Tooltip CarduiTooltip card for charts showing a title and label and value rows with tabular numbers. Drop it into any chart library's custom tooltip slot.npx shadcn@latest add ui.minidev.pro/r/chart-tooltip-card.jsonDonut ChartuiSingle 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.npx shadcn@latest add ui.minidev.pro/r/donut-chart.jsonFunnel StepsuiA conversion funnel drawn as labeled horizontal bars scaled to the largest step, with formatted counts per stage. Suited to signup and checkout analytics.npx shadcn@latest add ui.minidev.pro/r/funnel-steps.jsonGauge ChartuiA semicircle SVG gauge that fills to a value against a max and prints the percentage in the center. Exposed as an image with an accessible label for dashboards.npx shadcn@latest add ui.minidev.pro/r/gauge-chart.jsonHeatmap CelluiA square heatmap cell whose fill blends from a muted base to the accent color by an intensity from 0 to 1, with an aria label. Tile it for activity grids.npx shadcn@latest add ui.minidev.pro/r/heatmap-cell.jsonHorizontal Bar ChartuiA lightweight horizontal bar chart where each row shows a label, a rounded bar scaled to the largest value and the number. No chart library, just Tailwind.npx shadcn@latest add ui.minidev.pro/r/horizontal-bar-chart.jsonInteractive Area ChartuiA React SVG area chart with a crosshair that follows the pointer or arrow keys, showing the value and percent change against a dashed comparison line.npx shadcn@latest add ui.minidev.pro/r/interactive-area-chart.jsonLine ChartuiA multi series SVG line chart with smooth curves, a dashed hairline grid and dots on the last point of each line, colored from chart tokens. No library.npx shadcn@latest add ui.minidev.pro/r/line-chart.jsonRadar ChartuiSVG radar chart that plots normalized 0 to 1 values on labelled axes over four concentric grid rings. Themed with currentColor and labelled for screen readers.npx shadcn@latest add ui.minidev.pro/r/radar-chart.jsonStacked Bar ChartuiStacked bar chart that splits each column into colored series segments with hover titles, category labels underneath and a series legend. Uses chart CSS tokens.npx shadcn@latest add ui.minidev.pro/r/stacked-bar-chart.jsonWaffle ChartuiWaffle chart that fills a 10 column grid of squares to show a value out of a total, with a label and count above. Clear for adoption rates and percentages.npx shadcn@latest add ui.minidev.pro/r/waffle-chart.jsonPie ChartuiA React SVG pie chart with outside labels on leader lines, a legend and slices that pull out on hover or focus to show value and share, plus a hidden data table.npx shadcn@latest add ui.minidev.pro/r/pie-chart.jsonRadial ChartuiA React radial bar chart of concentric progress rings with ring labels, a legend and a rolling center total that animate on data change, or a single radial progress ring.npx shadcn@latest add ui.minidev.pro/r/radial-chart.json
Frequently asked questions
Do I need Recharts or Chart.js?
No. The charts render SVG directly from your data array. If you need zooming or very large datasets, you can still pair the chart card with a dedicated library.
Are the charts responsive?
Yes. They scale to their container and keep stroke widths and labels crisp at any size.
Can I change the chart colors?
Charts read --accent, --accent-2 and the status tokens. Change those tokens and every chart follows.