Engram

Segmented bar

atom

A segmented progress/stat bar in the Destiny FUI style.

Install

npx shadcn@latest add @engram/segmented-bar

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

Example

Props

PropTypeDefaultDescription
value*number
maxnumber100
segmentsnumberOptional number of segments; renders dividing ticks when set.
colorstring"var(--engram-accent-2)"Fill color (any CSS color, e.g. a token var).
glowbooleantrueGlow the fill (Destiny stat/health bars glow in their color).

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.