Components

Progress

Progress bar: the determinate fill glides to each new value on a weighty spring; `indeterminate` sends a soft lumen segment traveling the track on a slow loop (a static mid-fill under reduced motion).

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add progress

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Progress } from "@lumora/ui/components/progress";
// or from the barrel:
import { Progress } from "@lumora/ui";

Props worth knowing

value is completion from 0–100; the fill glides to each new value on the glide spring. indeterminate sends a lumen segment traveling the track instead, and gradient blends the fill from the lumen into the dusk accent. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.