Which charting library do these blocks use?

Recharts, through the shadcn Chart wrapper, which is the same setup the shadcn chart documentation uses. Series colors come from CSS variables, so charts follow your theme in light and dark without maintaining a second palette. A few arc gauges and segment meters are hand-drawn SVG instead, because Recharts has no primitive for that shape.

What is the difference between a chart block and a stats block?

A chart block leads with the figure: the visualization is the point and the numbers frame it. A stats block leads with the number and may add a sparkline for context. Reach for stats when you want a KPI strip across the top of a page, and for a chart block when you want the panel a user actually studies.

Can I change the data and the number of series?

Yes. Each block keeps its dataset as a plain array at the top of the file and maps series through a chart config object, so adding or removing a series is a small edit in two places. Period switchers read from keyed datasets, which means a new range is a new key rather than new component logic.

Do the charts work in dark mode?

Yes. Charts draw from theme CSS variables rather than hardcoded hex values, so light and dark both work without extra configuration. A few blocks in the set are deliberately dark-surfaced for crypto and DeFi dashboards, and those keep their own treatment so the card still reads correctly next to lighter panels.

Shadcn Chart Blocks and Analytics Cards

Finished Chart Cards, Including the Types the Docs Skip

The free shadcn chart documentation gets you a bar, line, area, pie, or radial chart on a blank canvas. What it does not get you is the card around it: the header stat, the delta badge, the period tabs that swap the dataset, the legend listing each source with its share, and a tooltip that looks like your product. That surrounding layer is most of the work, and it is what these blocks are.

They are built on ReUI Frame and Badge with the shadcn Chart wrapper over Recharts, plus Tabs, Select, Item, Tooltip, DropdownMenu, Separator, and Avatar for the controls and context around the figure.

A large share of the set is chart types you will not find in the component docs at all: segmented arc gauges, half-donut radials with a center total, segmented distribution bars, forty-segment capacity meters, diagonal hatched bars, and per-row sparklines inside a metrics list.

All Chart Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Chart 1 Inventory KPI summary card with period tabs and per-metric sparkline trends
Chart 2 Four-column KPI stat row with corner line sparklines and trend badges
Chart 3 Portfolio Balance Cards with Bottom-Anchored Line Charts on a Dotted Bed
Chart 4 Account Balance Line Chart with Reference Line, Peak Dots and Stat Header
Chart 5 Finance KPI metric grid with delta badges, brand logo stacks and mini area sparklines
Chart 6 Metric-switcher line chart card with clickable KPI tabs and pulsing animated dots
Chart 7 Two metric panels with semicircular segmented arc gauges and reviewer avatar stacks
Chart 8 Three-column KPI metric row with radial segmented gauges and trend indicators
Chart 9 Capital Inflows fund breakdown card with segmented distribution bar and range filter
Chart 10 Heart rate metric card with segmented zone bar and large bpm readout
Chart 11 Distance Metric Card with Week, Month, Year Tabs and Dotted Sparkline Fill
Chart 12 Capital inflows semicircular gauge card with source breakdown and range switcher
Chart 13 Capital inflows donut chart card with Week, Month, Year tabs and a per-source legend
Chart 14 Portfolio Allocation Card with Week/Month/Year Tabs and Segmented Bar Meter
Chart 15 Three KPI stat cards with gradient sparkline area charts and hover tooltips
Chart 16 Conversion Funnel Stacked Area Chart with Stage KPI Tiles and Period Selector
Chart 17 Compact campaign analytics card with gradient area chart and 5D to 6M period tabs
Chart 18 Orders overview card with period tabs, stat tiles, and animated gradient area chart
Chart 19 Dark finance metric card with composed area-and-line chart and day, week, month period tabs
Chart 20 Sales vs goals composed line and area chart with vertical reference line marker
Chart 21 Cashflow area and line chart card with period range selector and total plus percentage trend
Chart 22 Revenue performance card with line chart and period tabs (5D / 2W / 1M)
Chart 23 Multi-line social media activity chart with platform comparison and time-range selector
Chart 24 Dual-axis e-commerce sales vs views line chart with period selector and KPI trend badges
Chart 25 Order Metrics List Card with Per-Row Line Sparklines and Trend Badges
Chart 26 Dark floor price analytics card with period tabs and monotone line chart
Chart 27 Browser usage donut chart card with 5D, 2W and 1M period tabs and total visitors KPI
Chart 28 Operational KPI metric cards with segmented bar gauge for utilization and capacity tracking
Chart 29 Inventory velocity bar chart card with diagonal hatched bars and dotted backdrop
Chart 30 Grouped air vs sea freight bar chart with hover-dimmed bars and live region readout

Chart Types Beyond the Standard Set

Segmented arc and radial gauges Semicircular SVG arc gauges for uptime and code coverage, three-across segmented radial gauges for API and ops monitoring, and a half-donut inflows gauge with a center total.
Segmented bars and meters A distribution bar splitting each fund's share, a vertical segmented allocation meter, a four-band heart rate zone meter, and a forty-segment utilization gauge.
Sparkline variants Corner line sparklines with hover tooltips, gradient area sparklines, dotted-fill sparklines that swap per period, and per-row sparklines in a vertical KPI list with trend Badge chips.
Composed and dual-axis charts Area plus line composed charts, a dark two-gradient DeFi card, and a dual-axis sales versus views chart plotting two independent scales as solid and dashed lines.
Reference lines and markers A balance line chart with a date reference line and custom dots on peaks and troughs, and a sales versus goal chart with a dashed vertical reference marker.
Funnels and comparisons A stacked-area conversion funnel over visits, product views, add to cart, and checkout, and a grouped freight bar chart that dims other bars on hover with a live region readout.

The Card Around the Chart Is Already Wired

Period switching in every form it takes: Week, Month, Year Tabs, 5D, 2W, 1M, 6M tabs, 7d to 12m Select menus, 6m to 2y ranges, and 30 versus 90 day toggles, each swapping the dataset rather than only restyling it.
Metric switchers where clickable KPI tabs change which series the chart draws, so four or six metrics share a single figure instead of needing four cards.
Trend deltas as tone-coded Badge chips beside the headline value, with the percent change tied to the active period.
Custom tooltips, including dark tooltips, that match the card instead of shipping the Recharts default.
Entrance behaviour that stays out of the way: grow-up bar reveals, animated area reveals, and pulsing dots on the active point.
Context that turns a figure into a panel: center totals, per-source legends with amount and percent share, reviewer Avatar stacks, icon tiles, and an Export, Filter, Share DropdownMenu.

Written for a Dashboard Domain, Not a Sample Dataset

Finance takes the largest share: net worth and portfolio KPI grids with brand logo stacks, an account balance tracker with high, low, and change stats, capital inflow breakdowns by source as donut, gauge, and distribution bar, cashflow area and line cards, and dark crypto cards for total value locked and NFT floor price.

Commerce and marketing cover a conversion funnel with stage KPI tiles and a period selector, orders and revenue overview cards, campaign impressions across 5D to 6M tabs, and a dual-axis sales versus views chart. Traffic analytics adds a browser share donut and a multi-line Facebook, Instagram, and LinkedIn comparison.

Operations rounds it out with API and uptime gauges, capacity and utilization meters, inventory velocity and catalog health cards, an air versus sea freight transit comparison for logistics, and a small fitness set covering heart rate zones and cycling distance.

Related Shadcn Application Block Categories

Stats (15) Number-first KPI strips for when the metric leads and the chart is only a supporting sparkline.
Dashboard (8) Full overview screens that combine a metric row, a chart layer, and a searchable data grid into one page.
Card (43) Non-chart panels for the rest of an analytics grid, from summaries and activity to interactive surfaces.
List (11) Ranked and grouped rows for the breakdown that usually sits beside a donut or a distribution bar.
Timeline (9) Chronological activity and audit views for explaining the spikes and drops a chart surfaces.
Gantt (3) Timeline bars and task trees when the data you are visualising is schedule shaped rather than series shaped.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (291) Browse 291 Shadcn Application blocks across 21 categories.
Shadcn Data Grid Blocks (35) Browse 35 Shadcn Data Grid blocks across 8 categories.
Shadcn Solutions Blocks (65) Browse 65 Shadcn Solutions blocks across 9 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 12 categories.
Shadcn Marketing Blocks (24) Browse 24 Shadcn Marketing blocks across 4 categories.

Frequently Asked Questions

Finished Chart Cards, Including the Types the Docs Skip