Progress
@sushindustries/uiThe native progress element, restyled - omit value and the indeterminate state is real.
A labelled progress bar built on the native <progress> element. Give it a
value for a real fraction, or omit it for the indeterminate sweep the
browser draws for "something is happening, no percentage yet."
tanstacktanstack add https://adamjurek.com/r/tanstack/progress.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/progress.jsonWhy it is built this way
<progress> carries its own semantics, so a reader hears the fraction
announced with no ARIA written here. Omitting value gets the real
indeterminate state the browser draws, rather than a bar animated to fake
one. label has no default, because a bar with nothing to announce alongside
the number is not accessible to fix later.
What it does not do
It does not fake progress. A bar that fills on a timer to look busy tells a
smaller truth than the indeterminate sweep does, so value is for a real
fraction only - there is no "looks like progress" mode.
Install commands are not written here
Anything in packages/ui/registry.ts gets its TanStack and shadcn commands
attached automatically, so there is nothing to keep in sync.
Install
tanstack add https://adamjurek.com/r/tanstack/progress.jsonpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/progress.jsonpnpm add @sushindustries/ui @sushindustries/atomsWhat you get
| Version | 0.1.0 |
| Category | content · Loading |
| Files | progress.tsx |
| Dependencies | None |
| Tags | loading, form, no-deps |
No runtime dependencies
It brings nothing with it beyond the stylesheet.