React charts drawn in glass, liquid and light: 17 families and 58 charts, installed as source you own. Free for any use, with a small credit; keyboard and screen-reader ready.
Materials for Recharts: bars, areas, lines, composed charts, pies, donuts, radial bars, radar charts, treemaps, funnels, Sankey diagrams, scatter and bubble charts. The native charts' look on the Recharts charts you already have. Wrap the chart in <LiquidRecharts> and give each <Bar> shape={glassBar}, each <Area> {...liquidArea({ seriesKey })}, each <Line> shape={lightLine} and each <Pie> shape={glassPie}: they draw as glass bars, liquid areas, lines of light and glass rings, and the tooltip, type, grid, legend, brush and cursor take Liquid's chrome (chrome="host" keeps Recharts' own); the data, layout and keyboard stay the chart's.
Materials for Recharts, the core: <LiquidRecharts>, its chrome, and glass bars, liquid areas, lines of light, composed charts, glass pies and donuts, radial bars and radar charts. The kinds shadcn's charts use; liquid-adapter-recharts adds treemaps, funnels, Sankey diagrams and scatter and bubble charts.
AreaChart: liquid areas for amounts over time (single, stacked, 100%, streamgraph, above or below a threshold), with the pour, the pointer ripple, range bands and projected stretches.
Liquid ribbons and flows.
BarChart: columns, rows, grouped, compare, stacked, 100%, diverging, highlights, targets as containers and engravings, and projected periods.
The bar family's layout maths and stylesheet, which BarChart and the materials bridge draw with.
Flat beads on a 2D canvas, and the labels that sit beside beads.
The materials bridge: the native charts' materials (glass bars, liquid areas, lines of light, glass rings) over a chart you already have, drawn from its own geometry. For bars, areas, lines, composed charts, pies, donuts, radial bars and radar charts; liquid-bridge-kinds adds treemaps, funnels, Sankey diagrams and scatter and bubble charts.
The materials bridge's tile, ribbon, dot and funnel kinds: glass tiles for treemaps, liquid ribbons for Sankey diagrams, glass beads for scatter and bubble charts, and the glass funnel, over a chart you already have.
Heatmap, CalendarHeatmap, Waffle and UnitColumns: patterns across hours and places as liquid cells in their exact colour, and parts of a whole in units you can count.
Liquid cells in their exact colour, and glass tiles.
Accessible chart shell with a replaceable liquid rendering surface
The compose API: charts written as children (series, axes, tooltip, legend, brush, references), rendered by the Liquid charts. Bar, line and pie charts, the shared parts, and a codemod to native props.
The compose API's area, composed, radar, radial bar and sankey charts, written as children and rendered by the Liquid area, drivers, radial and hierarchy families.
The Liquid Charts core: style rules, scales, label placement, frame, axes, tooltip, legend, states, and the flat and light materials.
Every material in one install. Glass, liquid and the liquid's motion for every chart, and <LiquidMaterials> to give the free charts their glass.
The Liquid credit a source-available chart shows beside its plot: on in the free registry, off in the Pro build.
Histogram, BoxPlot, Violin, Density and Ridgeline: how values are spread, as glass bins and boxes and liquid shapes, with references in the glass.
Glass beads with the liquid inside.
Drag handles that edit a value, and draw-your-guess strokes.
Waterfall, RangeBar, Bullet, Lollipop, Dumbbell, BackToBack, ComposedChart and Funnel: what moved the number, in glass with references in the glass.
Export a chart as PNG, SVG or CSV, and the menu that offers them.
Choropleth, TileMap and BubbleMap: where it is, on your own GeoJSON or a tile grid (US states included), with liquid regions in their exact colour, glass tiles and beads.
The raymarched glass with the liquid inside, glass for bars and rings, and <LiquidMaterials> to give the free charts their glass.
Treemap (glass tanks of liquid), Strata, Sunburst, CirclePack and Sankey (liquid flows coloured by outcome): parts within parts, and where things flow.
StatCard, StatTile, ProgressBar, CapacityBars and Meter: levels in glass, engraved references and lit gaps.
LineChart and Sparkline: lines as light, with scrub lighting, forecasts, bands, end labels, a crosshair tooltip and black-hole focus.
The optical painter the glass materials share, one WebGL2 context per page painting exact chart geometry.
ScatterChart, BubbleChart, Beeswarm and QuadrantChart: one glass bead per thing, with nearest-point hover, trends, named outliers, and fine dots over a liquid density pool for dense clouds.
Liquid areas, and the liquid's motion (the pour, the ripple and the springs).
RadialBars, Radar, RadialLine, RadialArea and PolarArea: cycles round a clock, profiles across criteria and progress round a dial.
ChordDiagram, Alluvial and ArcDiagram: who connects to whom, with glass arcs and nodes, liquid ribbons and flows, and light arcs.
Request latency over time as light: one needle per time bucket, from the fastest request to the slowest, with live sliding, targets, events and errors.
DonutChart (donut, pie, semi and tile, with a tilt view), ProgressRings and Gauge.
The ring family's geometry, frame policy and stylesheet, which DonutChart, ProgressRings, Gauge and the materials bridge draw with.
The ring mark engine (flat and light, with a pack's glass), and pin and leader labels for round charts.
The glass cursor, sounds and haptics: wrap charts in <ChartCursor> and every frame inside takes them.
shadcn's chart component (components/ui/chart.tsx) in Liquid's materials: the same ChartContainer, ChartConfig, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent and ChartStyle, so the charts you or your assistant wrote draw their bars in glass, lines in light, areas as liquid and pies, radars and radial bars in glass rings, with Liquid's tooltip card, type, legend and colours, unchanged.
The Liquid Charts agent skill for Claude Code: install, choose, theme and check a chart on the first try. Writes .claude/skills/liquid-charts/SKILL.md.
Glass from the first render: the glass materials and <LiquidProvider>, which you wrap your app in once.
NetworkGraph, TreeChart, RadialTree and Dendrogram: how things are organised, with glass beads, light links, folding trees and a draggable cut.
Native SVG liquid rendering surface
Candlestick with volume and Timeline (Gantt): prices, plans and moments on a time axis, with progress as liquid and planned work etched.
WordCloud and TermBars: what people are saying, words filled with liquid to their share, laid out the same on server and client, with a ranked list that shares hover and selection.
Brush and zoom: choosing a range and looking closer, with overview strips.