Progress

A thin slanted track filling with the accent, or with segments a row of cells that light up one by one, like a gauge of charges.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/progress

Examples

A bar, a gauge of charges, an unknown amount

Uploading the route

Charges

Finding a driver

progress-kinds.tsx

import { useEffect, useState } from "react";import {  Progress,  ProgressLabel,  ProgressValue,} from "@/components/zero/progress";export default function ProgressKinds() {  const [value, setValue] = useState(20);  useEffect(() => {    const timer = setInterval(      () => setValue((current) => (current >= 100 ? 0 : current + 10)),      900,    );    return () => clearInterval(timer);  }, []);  return (    <div className="grid w-full max-w-md gap-6">      <Progress value={value}>        <ProgressLabel>Uploading the route</ProgressLabel>        <ProgressValue />      </Progress>      <Progress value={value} segments={10}>        <ProgressLabel>Charges</ProgressLabel>        <ProgressValue />      </Progress>      <Progress value={null}>        <ProgressLabel>Finding a driver</ProgressLabel>      </Progress>    </div>  );}

Behaviour

Without a value (value={null}) the amount is unknown: a short block sweeps the track back and forth. Under reduced motion it holds still as a dim fill of the whole track.

The bar is a progressbar named by its label; ProgressValue shows the formatted number and takes Base UI's format.

Props

Progress

Prop	Type	Default	Description
value	number \| null	—	How far it has got; null when unknown.
segments	number	—	Splits the bar into this many cells, each lit once its share is reached.
min / max	number	0 / 100	The range.

Also takes every prop of Base UI's Progress.Root.

ProgressLabel, ProgressValue

Also takes every prop of Base UI's Progress.Label.