uix-uiProgress
Linear progress bar. 5 values.
import { Progress } from "@/components/ui/progress";
export default function Example() {
return (
<div style={{ width: 320, maxWidth: "100%" }}>
<Progress value={64} aria-label="Order progress" />
</div>
);
}
Installation
$ npx uix-ui@latest add progressThis copies the file into components/ui/progress.tsx in your project. npx shadcn@latest add @uix/progress works too.
Usage
import { Progress } from "@/components/ui/progress";
<div style={{ width: 320, maxWidth: "100%" }}>
<Progress value={64} aria-label="Order progress" />
</div>
Examples
Live
20% packed
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
export default function Example() {
const [v, setV] = React.useState(20);
return (
<div style={{ width: 320, display: "grid", gap: 12 }}>
<Progress value={v} aria-label="Packing your order" />
<div className="flex items-center justify-between">
<span className="text-body-small text-fg-secondary">{v}% packed</span>
<Button size="sm" variant="outline" onClick={() => setV(x => (x >= 100 ? 0 : x + 20))}>{v >= 100 ? "Start over" : "Pack more"}</Button>
</div>
</div>
);
}
Empty to full
import { Progress } from "@/components/ui/progress";
export default function Example() {
return (
<div style={{ width: 320, display: "grid", gap: 16 }}>
<Progress value={0} aria-label="Not started" />
<Progress value={35} aria-label="A third done" />
<Progress value={100} aria-label="Complete" />
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | 0 to 100. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts