NAMCHE UI

Progress

A determinate progress bar for rollouts, downloads, and other measurable operations.

Downloading Sirdar-7B weights
x

Install

pnpm dlx shadcn@latest add @namche/progress

Usage

import { Progress, ProgressLabel, ProgressValue } from '@/components/ui/progress';

<Progress value={68}>
  <div className="flex items-center justify-between">
    <ProgressLabel>Downloading Sirdar-7B weights</ProgressLabel>
    <ProgressValue />
  </div>
</Progress>

Progress renders its ProgressTrack/ProgressIndicator automatically after any children you pass, so only compose ProgressLabel and ProgressValue — don't render the track yourself. value is 0–100, or null for an indeterminate state. Built on Base UI's Progress primitive.

On this page