ChartFreev1.0.0

Everything around the plot, done once: shadcn's ChartConfig as live colour variables, a header, legend and readout, a glass tooltip that follows pointer and keys, a mode switch with a gliding thumb, and the table screen readers get. The base every Lumen story chart stands on; bring your own plot.

ChartConfig from shadcn/ui

.md

Add to your project

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-chart.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-chart.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Preview

Empty stateWhat a chart shows with no data.

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

ChartContainer config–
ChartConfig
shadcn's shape: { [key]: { label, color } | { label, theme: { light, dark } } }. Each key becomes --color-<key>.
ChartModes value / defaultValue / onValueChange–
string
A radio group with the gliding thumb; arrow keys move and choose; one select cue per change.
ChartTooltip open / x / y–
boolean / number / number
Placed above the point inside the plot, kept within its edges, below when there's no room.
ChartLegendItem name / pressed–
string / boolean
The key's colour and label; with pressed, a toggle that shows or hides its series.
ChartTable caption / columns / rows–
string / string[] / (string | number)[][]
Hidden for screen readers up to 500 cells; above that, a "View as table" disclosure.
useChartSelection / useChartKeyboard / useChartSize–
hooks
Controlled-or-not state, arrow keys over the data (one tab stop), and the plot's size after mount.

Anatomy

shadcn's ChartConfig, so a config written for shadcn's charts works here.
Server-safe frame (container, header, legend, table, states); the tooltip, modes and hooks are the client parts.
No chart library: bring SVG, canvas or anything that reads CSS variables.
Every Lumen story chart is built from these parts.

ChartContainer / ChartStyledata-slot="chart"
Writes the config as --color-<key>, light and dark.
ChartHeader / ChartEyebrow / ChartTitle / ChartDescriptiondata-slot="chart-header"
The story's headline, with an optional live dot.
ChartReadoutdata-slot="chart-readout"
The headline number and its context.
ChartModes / ChartModedata-slot="chart-modes"
The segmented switch with the gliding thumb.
ChartPlotdata-slot="chart-plot"
Holds the plot's size across loading, empty and drawn.
ChartTooltip / ChartTooltipHeader / ChartTooltipRowdata-slot="chart-tooltip"
The glass tooltip.
ChartLegend / ChartLegendItemdata-slot="chart-legend"
Cells or lines per series; optional toggles.
ChartTabledata-slot="chart-table"
The data for screen readers, or on demand.
ChartEmpty / ChartLoading / ChartLivedata-slot="chart-empty"
The quiet states and the live region.

Part of

This is free. The full Lumen Halo has 120 more pieces.See the theme

Changelog

v1.0.0 · 2026-09-29All 1 entries

v1.0.0 · 2026-09-29
First release: the chart base from spec 18, shared by every Lumen story chart

Keyboard

← → ↑ ↓: Modes: move and choose. Plot (useChartKeyboard): move between points
Home / End: First or last mode or point
Enter / Space: Pin the focused point
Escape: Clear the pin

More in Charts

Stat Cards

Stat

Market Breadth