FeedbackAvailable

Progress

Accessible indicator for progress across courses, tasks, and multi-step flows.

Lesson 168%

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/progress.json

Import the component into your project and keep the source code under your control.

tsx

import { Progress } from "@/components/ui/progress"

export function Example() {
  return <Progress value={68} label="Lesson 1" showValue />
}

Visual options included in the component’s official API.

Lesson 168%

Practice complete100%

Appearance, behavior and keyboard checks.

Distinguish loading, progress, success, error and empty data as appropriate. Keep messages understandable without color.
The indicator needs no hover. Only actions and dismiss controls receive focus. Respect reduced motion.

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
value	number \| null	0	Clamped between 0 and 100. null or a non-finite number is indeterminate.
label	string	—	Visible label and accessible name.
aria-label	string	Progress	Accessible name when there is no visible label.
showValue	boolean	false	Displays the percentage to the user.

Rules that should remain intact when adapting the component to a product.

Exposes progressbar semantics and minimum, maximum, and current values.

Use label or aria-label to identify what is progressing.

Animated changes respect prefers-reduced-motion.