Skip to content
Appearance
Accent and overlay
Color mode

Progress

A determinate progress indicator shown as a specimen.

Upstream documentation

Examples

Example progress
x

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Progress
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/progress.json'

Usage

A complete example using the installed component and hook paths.

Progress usage
"use client";import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress";const ProgressPreview = function ProgressPreview() {    return (      <Progress value={62} className="w-full">        <ProgressLabel>Example progress</ProgressLabel>        <ProgressValue />      </Progress>    );  };export default function Demo() {  return <ProgressPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

Progress

Progress props
ProgressPrimitive.Root.Props & { sound?: boolean }
max
100
sound
true

ProgressTrack

ProgressTrack props
ProgressPrimitive.Track.Props

ProgressIndicator

ProgressIndicator props
ProgressPrimitive.Indicator.Props

ProgressLabel

ProgressLabel props
ProgressPrimitive.Label.Props

ProgressValue

ProgressValue props
ProgressPrimitive.Value.Props

Source

Registry JSON