Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

@@directive("'use client'")

@react.component

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Progress
Copy

Usage

Copy<Progress value=33.0 />

Examples

Label

Use ProgressLabel and ProgressValue to add a label and value display.

@react.component
let make = () =>
  <Progress value={56.} className="w-full max-w-sm">

Controlled

A progress bar that can be controlled by a slider.

@@directive("'use client'")

@react.component

API Reference

See the Base UI Progress documentation.