Day RingsFreev2.0.0

Daily goals over about a month on one ring: a spoke per day stacks each goal's progress, and the pinned day's goals wrap the ring as arcs that glow past 100%. Scrub by pointer or arrow keys, filter to one goal, log today in a tap and undo it. In parts, on Lumen's chart core.

Built on shadcn/ui chart conventions

.md

Add to your project

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

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-day-rings.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

Read only

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

goals–
{ id, label, unit, goal, step, chip? }[]
Each goal (inside out): its id (the config key for its colour), target and the quick-log step.
days–
{ date: string; values: (number | null)[] }[]
Oldest first, ISO dates; the last day is today. Missing values stay missing, never zero.
config–
ChartConfig
Colours by goal id (shadcn's shape).
pinned / defaultPinned / onPinnedChange–
string | null
The pinned day as an ISO date; null is today.
filter / defaultFilter / onFilterChange–
string | null
A goal id, or null for all goals.
onLog / onUndo–
(goalId, delta) => void
A quick log for today, and the last log undone (with the reversed delta). The ring updates at once; persist here.
readOnlyfalse
boolean
Hide the quick logs.
formatValue / locale–
(value, goal) => string / string
How values and dates read.

Show all 11 props

labels–
Partial<DayRingsLabels>
Every word, for i18n.
motion"full"
"full" | "subtle" | "off"
Reduced motion always wins.
Parts–
DayRingsRing · Goals · Filter · Summary · Log · Table · Card
Arrange them yourself inside <DayRings>, or use DayRingsCard; useDayRings() reads the state.

Anatomy

Beautiful UI original: SVG ring, no chart library.
On Lumen's chart core: ChartContainer (shadcn ChartConfig colours), Modes, Table, Live; Stat's rolling digits in the centre.
The model (lumen/lib/day-rings-model) is plain data: build it on the server if you like.

DayRingsdata-slot="chart"
Data, pinned day, filter, logs and undo.
DayRingsRingdata-slot="day-rings-ring"
The ring slider and its centre readout.
DayRingsGoalsdata-slot="day-rings-goals"
Each goal on the pinned day, with a cell meter.
DayRingsFilterdata-slot="chart-modes"
All goals, or one.
DayRingsSummarydata-slot="day-rings-summary"
Days closed, a cell per day.
DayRingsLogdata-slot="day-rings-log"
Quick logs, undo, back to today.
DayRingsTabledata-slot="chart-table"
Every day for screen readers.

Part of

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

Changelog

v2.0.0 · 2026-09-30All 1 entries

v2.0.0 · 2026-09-30
Rebuilt as Lumen parts on the chart core (was glass-day-rings, still installable as an alias)

Keyboard

← / →: Previous or next day
Page Up / Down: A week back or forward
Home / End: First day, or today
Arrows (filter): Move between All and each goal

More in Charts

Stat Cards

Stat

Chart