Progress

Progress renders a horizontal percent bar with optional status color and a trailing percent label. It follows Ant Design Progress line semantics (percent + status + info label). Circle, dashboard, and steps variants are out of scope for v1.

When To Use

• Show determinate completion for uploads, indexing jobs, batch ops, or wizard steps with a known percent.
• Prefer status tones (active / success / exception) when the bar should mirror lifecycle color next to tags or KPIs.
• Hide the percent label with showInfo={false} when the surrounding chrome already shows the figure.
• Use a spinner or skeleton instead when progress is indeterminate or you only need a loading affordance.
• Do not use Progress for multi-step wizards that need discrete steps — use Stepper instead.

Features

Installing

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/progress.json

npx shadcn@latest add https://ui.isaacfei.com/r/progress.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/progress.json

bun x shadcn@latest add https://ui.isaacfei.com/r/progress.json

With a namespace: npx shadcn@latest add @f-ui/progress.

registryDependencies: shadcn progress (Radix Progress primitive).

Usage

import { Progress } from "@/components/f-ui/progress/progress";

<Progress percent={60} />

Examples

Basic

Default line progress with a percent label to the right of the rail.

"use client";

import { Progress } from "@/components/f-ui/progress/progress";

export function ProgressDemo() {
  return <Progress percent={60} />;
}

Statuses

Four status tones on the track — normal, active, success, and exception.

"use client";

import { Progress } from "@/components/f-ui/progress/progress";

export function ProgressStatusesDemo() {
  return (
    <div className="flex max-w-md flex-col gap-4">
      <Progress percent={30} status="normal" />
      <Progress percent={50} status="active" />
      <Progress percent={100} status="success" />
      <Progress percent={70} status="exception" />
    </div>
  );
}

Hide Info

Omit the trailing percent when the host already shows the value elsewhere.

"use client";

import { Progress } from "@/components/f-ui/progress/progress";

export function ProgressHideInfoDemo() {
  return <Progress percent={45} showInfo={false} />;
}

Composition

Progress (f-ui)
├── Progress (ui / Radix Root — rail)
│   └── Indicator (fill)
└── info? (percent label)

f-ui owns Ant status tones and the trailing percent; the bar itself is the vendored shadcn Progress.

API Reference

Props

Slots