Progress

How far along a task is, or that it is in progress.

Uploading receipts

When to use

Use when: Showing how far a task has gone, such as an upload.
Avoid when: The duration is unknown and short; use Spinner.

Installation

bunx shelf add progress

The source lands in src/components/ui/progress.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

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

<Progress />

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.