StacklyUI
Components/Progress

Progress

A determinate progress bar with a gradient fill.

01

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsx
function Demo() {
  const [value, setValue] = useState(66)
  return (
    <div className="w-full max-w-sm space-y-4">
      <Progress value={value} />
      <div className="flex gap-2">
        <Button size="sm" variant="outline" onClick={() => setValue(Math.max(0, value - 10))}>-10</Button>
        <Button size="sm" variant="outline" onClick={() => setValue(Math.min(100, value + 10))}>+10</Button>
      </div>
    </div>
  )
}
render(<Demo />)
02

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/progress

Or install the package and import it:

$pnpm add @stacklyui/ui motion
03

Usage

Import Progress from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.