Layout UI

Progress

Determinate and indeterminate progress bar built on Base UI Progress. Accessible with ARIA role=progressbar.

Preview

x
x
x

Installation

bash
npx shadcn@latest add @layout/progress

Usage

tsx
import { Progress } from "@/registry/layout/progress/progress";

Examples

Animated on mount

x

Indeterminate

x

With label

Uploading files…72%
x

Guidelines for AI agents

Pass a numeric value (0-100) for a determinate bar, or null for indeterminate. Pair with a visible label above or beside the bar so users know what is being measured. The indicator animates via CSS transition; initialise value at 0 then update to trigger the motion.

Never

  • Neveruse Progress for binary states; use a Spinner for loading without a known percentage
  • Neveromit an accessible label; Base UI forwards value to aria-valuenow but users still need context
  • Neverhardcode the indicator colour; it maps to bg-primary from the token contract
  • Neverfix the width of the Progress root in a way that breaks responsive layouts; use w-full on the parent

Tokens consumed

--layout-primary--layout-radius--layout-duration-slow