Progress Bar
3 status variants. 30 skewed segments fill left to right with a scroll-gated staggered cascade.
Storage Used72%
Bandwidth48%
Memory Critical91%
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-progress-barProps
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Caption shown above the bar and used as the accessible label. |
| valuereq | number | - | 0–100; clamped internally. |
| variant | 'default'|'warning'|'fault' | 'default' | Color of the filled segments. |
| className | string | - | Extra classes merged onto the root element. |
| style | React.CSSProperties | - | Inline styles merged onto the root element. |
AI Canvas