Introduction

React components you copy into a shadcn project—not an npm package. Each graph sits in a dashed frame with a title on the top edge. Pick one accent color for highlights.

Install

The CLI copies a registry item into your repo. You can also copy the files from GitHub.

Command

pnpm dlx shadcn@latest add <origin>/r/graph-table.json

Full installation

Components

Table: Framed data table with an optional footer row for totals.
Flow: Process diagram with nodes on a dashed arrow. Accent a node to highlight a path.
Bars: Two bar groups side by side, with a label between them. The right group is usually the larger one.
Cells: Grid of filled and empty cells. Useful for density, coverage, or comparing two sets.
Scale: Labeled scale for contrast ratios, type sizes, or anything that needs a number and a short label.
Radii: Nested border radii. Inner radius equals outer minus padding.
Meter: Progress bar drawn with = characters. Empty slots stay as dashes.
Spark: Sparkline from block characters. Values scale to the highest point.
Tree: Nested tree with branch glyphs. Accent a node to highlight it.
Timeline: Vertical list of dates. Mark one row as current with the accent color.
Stack: Stacked bar for parts of a whole. Different glyphs per segment instead of colors.
Funnel: Steps get narrower as values drop. Percentages compare to the first step.
Gantt: Schedule chart. start and end are fractions from 0 to 1 along the track.
Plot: Line or area chart built from columns of block characters.
Waffle: Grid of 100 cells. The value sets how many are filled in.
Diff: List with add, remove, and unchanged rows. Works for changelogs or bundle sizes.
Invoice: Document table for invoices and quotes. From, bill-to, line items, and a totals block.
Compare: Feature matrix. Cells are text or true/false, drawn as ✓ and –.
Stat: A row of large numbers with labels. Use it for KPIs, not as a chart.
Spec: Aligned label and value rows. Spec sheets, shipping labels, type samples.
Frame: Dashed frame wrapper used by every graph. Compose with GraphTitle, GraphBody, GraphRule, and GraphArrow.