React chart components for Tailwind CSS
Charts and stats turn numbers into something people can read at a glance. The chart set covers trends (Line Chart and Area Chart), comparisons (Bar Chart, grouped, stacked or 100%), parts of a whole (Donut Chart and Radial Bar) and conversion (Funnel Chart). For dashboards there are Stat Card, the KPI tile with a delta that knows good from bad, Trend Badge, Gauge, Sparkline for table cells and running text, Leaderboard and Animated Counter. Heatmap Calendar, GitHub Activity and Tracker show activity over days and weeks, from contribution grids to uptime bars.
All Charts & Stats[15]
Gauge
One value against a scale and its zones: a speedometer arc, needle or segmented dial with a target tick and a counting value.
GitHub ActivityFree
A contribution heatmap with a footer panel that expands over the grid to rank your top repositories.
Radial bar
Several goals at once as concentric activity rings or 270° radial bars, each filling toward its own target and lapping past 100%.
Tracker
A row of status blocks over time, one per day, hour or deploy: uptime pages, sync health, delivery success and habit streaks.
Heatmap calendar
Activity by day over weeks or a year: a grid of day cells on a one-hue scale, with month and weekday labels, a total and a legend.
Stat Card
The KPI tile of a dashboard: a label, a big number that counts up, a delta pill that knows good from bad, a sparkline and a goal bar.
Sparkline
A word-sized chart for table cells, list rows, KPI tiles and running text: a line, an area, bars or win / loss ticks.
Leaderboard
A ranked list of people, teams or products by one metric: medals, proportional bars, rank changes, a podium and a pinned "you" row.
Area chart
Volumes over time as filled areas: overlapping gradients, stacked bands for parts of a total, or 100% stacked shares.
Bar chart
Compares categories or periods as columns or horizontal bars, grouped, stacked or 100%, with negatives below a clear zero line.
Donut chart
Parts of a whole as a donut or pie, with the total in the middle, a legend with values and shares, and a selectable slice.
Funnel chart
A conversion funnel: each step's count, its conversion and the drop-off between steps, as aligned bars or a tapered funnel shape.
Guides
Tutorials and guides from the blog that use these components.
Build it: screens and apps
Nextjs Admin Dashboard Tutorial: 5 Screens, Phone-Ready
A nextjs admin dashboard tutorial for the App Router: app shell, KPI home, server-side data tables, settings and team pages, each one usable on a phone.
19 min read
About Charts & Stats
The charts share one set of parts from Chart kit in Hooks & Utilities: the palette, formatters, axes, crosshair, tooltip and legend, drawn as SVG with d3 scales and shapes. Colors come from the theme tokens, so every chart follows light and dark mode. On a phone you tap a point to pin the readout and drag sideways to scrub, while a vertical drag still scrolls the page, and the keyboard can walk through every point. 2 of the 15 chart and stat components are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 13 are part of Pro.