Progress ring

atom

A radial completion ring — the round counterpart to a progress bar, for node completion, character level, and compact stat readouts.

Install

npx shadcn@latest add @engram/progress-ring

Registry item: /r/progress-ring.json — the machine-readable definition agents install from.

Example

73/4100%

Props

Prop	Type	Default	Description
`value`*	`number`	`—`	—
`max`	`number`	`100`	—
`size`	`number`	`36`	Diameter in px.
`thickness`	`number`	`4`	Ring stroke width in px.
`color`	`string`	`"var(--engram-accent)"`	Fill color (any CSS color, e.g. a token var).
`trackColor`	`string`	`"var(--engram-raised-2)"`	Track (unfilled) color.
`children`	`ReactNode`	`—`	Center content (e.g. a count or completion fraction).
`label`	`string`	`—`	Accessible label.
`className`	`string`	`—`	—

Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.