Command Palette

Search for a command to run...

Progress

shadcn/ui

Displays an indicator showing the completion progress of a task.

Progress

import { Progress } from "@/components/optics/progress";<div className="w-full max-w-md space-y-4">  <Progress value={33} />  <Progress value={66} />  <Progress value={100} /></div>

Installation

pnpm dlx shadcn@latest add @optics/progress

Props

<Progress />
Name
Type
format
Intl.NumberFormatOptions
getAriaValueText
((formattedValue: string, value: number) => string)
locale
Intl.LocalesArgument
render
React.ReactElement

<ProgressTrack />
Name
Type
format
Intl.NumberFormatOptions
getAriaValueText
((formattedValue: string, value: number) => string)
locale
Intl.LocalesArgument
render
React.ReactElement
<ProgressIndicator />
Name
Type
format
Intl.NumberFormatOptions
getAriaValueText
((formattedValue: string, value: number) => string)
locale
Intl.LocalesArgument
render
React.ReactElement
<ProgressLabel />
Name
Type
format
Intl.NumberFormatOptions
getAriaValueText
((formattedValue: string, value: number) => string)
locale
Intl.LocalesArgument
render
React.ReactElement
<ProgressValue />
Name
Type
format
Intl.NumberFormatOptions
getAriaValueText
((formattedValue: string, value: number) => string)
locale
Intl.LocalesArgument
render
React.ReactElement
PopoverRadio Group