Progress

Linear progress indicator. Use the wrapper or compose ProgressTrack + ProgressIndicator with a raw base-ui Progress.Root.

Values with label

Uploading25%

Processing60%

Almost done90%

Complete100%

import { Progress } from "@brijbyte/agentic-ui/progress";

import "@brijbyte/agentic-ui/progress.css";

export default function ValuesDemo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", width: "100%" }}>
      <Progress value={25} label="Uploading" showValue />
      <Progress value={60} label="Processing" showValue />
      <Progress value={90} label="Almost done" showValue />
      <Progress value={100} label="Complete" showValue status="success" />
    </div>
  );
}

Status colours

Default

Success

Warning

Error

import { Progress } from "@brijbyte/agentic-ui/progress";

import "@brijbyte/agentic-ui/progress.css";

export default function StatusDemo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", width: "100%" }}>
      <Progress value={45} status="default" label="Default" />
      <Progress value={45} status="success" label="Success" />
      <Progress value={45} status="warning" label="Warning" />
      <Progress value={45} status="error" label="Error" />
    </div>
  );
}

Indeterminate

Loading…

import { Progress } from "@brijbyte/agentic-ui/progress";

import "@brijbyte/agentic-ui/progress.css";

export default function IndeterminateDemo() {
  // Pass value={null} to show the indeterminate animation.
  return (
    <div style={{ width: "100%" }}>
      <Progress value={null} label="Loading…" />
    </div>
  );
}

Composed: base-ui Root + styled parts

build step 4/6

import { Progress as BaseProgress } from "@base-ui/react/progress";
import { ProgressTrack, ProgressIndicator } from "@brijbyte/agentic-ui/progress";

import "@brijbyte/agentic-ui/progress.css";

export default function ComposedDemo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-1-5)", width: "100%" }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--font-size-xs)", color: "var(--color-secondary)" }}>
        build step 4/6
      </span>
      <BaseProgress.Root value={66} max={100}>
        <ProgressTrack size="lg">
          <ProgressIndicator status="success" />
        </ProgressTrack>
      </BaseProgress.Root>
    </div>
  );
}

API Reference

Progress

base-ui docs ↗

Linear progress indicator with optional label and percentage display.
Pass value={null} for an indeterminate animated state. Use status
to apply semantic colour to the fill.

Prop	Type	Default
value	`number \| null`	`null`
Current progress value. `null` for indeterminate state.
max	`number`	`100`
Maximum value (the "complete" end).
label	`string`	—
Accessible label shown above the bar.
showValue	`boolean`	`false`
Display the percentage next to the label.
status	`"default" \| "success" \| "warning" \| "error"`	`default`
Semantic colour for the progress fill.
size	`"sm" \| "md" \| "lg"`	`md`
Bar thickness.
className	`string`	—

Styled Parts

base-ui docs ↗

Pre-styled wrappers around the corresponding base-ui parts. All base-ui props are forwarded.

CSS Class Names

Available as keys on the ProgressStyles object. Each key maps to a hashed CSS module class name at runtime.

indicatorindicator-errorindicator-indeterminateindicator-successindicator-warninglabel-rowroottracktrack-lgtrack-mdtrack-sm