Feedback

Progress

A determinate bar for tasks and quotas, with a label and value row and status colors for thresholds.

npx prodular-ui add progress

Label and value

The label sits left, the value right, the bar below. ProgressValue formats a percentage unless you pass a function.

Importing customers.csv

Seats

"use client"
import * as React from "react"
import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"
export default function ProgressDefault() {  const [value, setValue] = React.useState(38)  React.useEffect(() => {    const id = setInterval(() => setValue((v) => (v >= 100 ? 38 : Math.min(100, v + 7))), 900)    return () => clearInterval(id)  }, [])  return (    <div className="flex w-full max-w-sm flex-col gap-6">      <Progress value={value}>        <ProgressLabel>Importing customers.csv</ProgressLabel>        <ProgressValue />      </Progress>      <Progress value={64} size="sm">        <ProgressLabel>Seats</ProgressLabel>        <ProgressValue>{() => "16 of 25"}</ProgressValue>      </Progress>    </div>  )}

Status

Color the bar by threshold: warning near a limit, destructive at it, ai for model credits.

Storage

Monthly active users

API requests

Email sends

AI credits

import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"
const quotas = [  { label: "Storage", used: 41, detail: "41 of 100 GB", variant: "default" },  { label: "Monthly active users", used: 100, detail: "10,000 of 10,000", variant: "success" },  { label: "API requests", used: 92, detail: "9.2M of 10M", variant: "warning" },  { label: "Email sends", used: 100, detail: "Limit reached", variant: "destructive" },  { label: "AI credits", used: 58, detail: "5,800 of 10,000", variant: "ai" },] as const
export default function ProgressStatus() {  return (    <div className="flex w-full max-w-sm flex-col gap-5">      {quotas.map((q) => (        <Progress key={q.label} value={q.used} variant={q.variant}>          <ProgressLabel>{q.label}</ProgressLabel>          <ProgressValue>{() => q.detail}</ProgressValue>        </Progress>      ))}    </div>  )}

Anatomy

<Progress value={64}>  <ProgressLabel>Seats</ProgressLabel>  <ProgressValue>{() => "16 of 25"}</ProgressValue></Progress>

Guidance

Use it when

A task with a known end: an import, an upload, a sync.
Usage against a limit: seats, storage, API quota.

Avoid

Unknown durations. Use Spinner, or Skeleton for content.
Status colors for decoration. Every bar in a list should be default until it crosses a threshold.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Always pass value (0 to 100) and a ProgressLabel so the bar has an accessible name.
Use ProgressValue for the right side. Pass a function child to show units, for example {() => "16 of 25"}.
Pick variant by threshold: default under 80%, warning from 80% to 99%, destructive at the limit, success when a task completes.
Use variant="ai" only for AI credits or a model run in progress.
Use size="sm" in dense lists and cards, size="lg" for a single prominent task.

API

Progress

Prop	Type	Default	Description
value	number \| null		0 to 100. null for indeterminate.
variant	"default" \| "success" \| "warning" \| "info" \| "destructive" \| "ai"	"default"	Indicator color. Also set as data-variant.
size	"sm" \| "default" \| "lg"	"default"	Track height: 4, 6 or 8px.

ProgressValue

Prop	Type	Default	Description
children	(formatted, value) => ReactNode		Custom value text. Defaults to a percentage.