DUI
⌘K

Components / Feedback

Progress

Shows completion of a task or process.

Preview

Project progress

1import { Progress } from "@/components/ui/progress"2
3export function ProgressDemo() {4  return <Progress value={18} />5}

default

The default style of this component.

Project progress

1import { Progress } from "@/components/ui/progress"2
3export function ProgressDemo() {4  return <Progress value={64} />5}

complete

The complete style of this component.

Project progress

1import { Progress } from "@/components/ui/progress"2
3export function ProgressDemo() {4  return <Progress value={100} />5}

Installation

Add the source directly to your project with the shadcn CLI.

npx shadcn@latest add qentrah/DUI/progress

Usage

Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.