Progress

A progress bar showing completion or loading state

A progress bar built on Ark UI Progress. Use the convenience API with value (and optional showLabel) or the compound API for custom layout.

60%

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

export default function Example() {
  return <Progress value={60} showLabel />;
}

View Code

Installation

bash

liminal add progress

Usage

Pass value (0–100 by default), and optionally min, max, and showLabel to display the percentage above the track.

33%

80%

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

<Progress value={33} showLabel />
<Progress value={80} showLabel />

View Code

Examples

Custom range (min / max)

50%

<Progress value={25} min={0} max={50} showLabel />

View Code

Compound API

Use ProgressRoot, ProgressLabel, ProgressValueText, ProgressTrack, and ProgressRange for custom layout.

tsx

import {
  ProgressRoot,
  ProgressLabel,
  ProgressValueText,
  ProgressTrack,
  ProgressRange,
} from "@/components/ui/progress";

export default function Example() {
  return (
    <ProgressRoot value={50} min={0} max={100}>
      <div className="mb-2 flex justify-between">
        <ProgressLabel>Upload</ProgressLabel>
        <ProgressValueText />
      </div>
      <ProgressTrack>
        <ProgressRange />
      </ProgressTrack>
    </ProgressRoot>
  );
}

API

Prop	Type	Default	Description
value	number	-	Current progress value (controlled or uncontrolled via Ark root).
min	number	0	Minimum value.
max	number	100	Maximum value.
showLabel	boolean	false	Show value text above the bar (convenience API).

The convenience Progress component passes other props to ProgressRoot. See Ark Progress for the full root API.