Data & feedback@neumorphism-ui/progress

Progress

Uses Base UI Progress progressbar semantics. Normalizes valid max and value values, and exposes an indeterminate state when value is missing or invalid.

@neumorphism-ui/progress

Registry JSON

Preview

Registry build82%

Theme tokens12 / 16

Waiting for data—

Installation

npx shadcn@latest add @neumorphism-ui/progress

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

<div className="grid gap-2">
  <div id="upload-label" className="flex justify-between">
    <span>File upload</span>
    <span>72%</span>
  </div>
  <Progress value={72} max={100} aria-labelledby="upload-label" />
</div>

API Reference

Component	Prop	Type	Default	Description
`Progress`	`value`	`number \| null`	`null`	The current progress value, normalized between 0 and max.
`Progress`	`max`	`number`	`100`	The total range greater than 0; invalid values fall back to 100.
`Progress`	`aria-label / aria-labelledby`	`string`	`—`	The accessible name of the task in progress.
`Progress`	`getValueLabel`	`(value, max) => string`	`—`	Creates aria-valuetext when a description beyond the numeric value is needed.