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>
  );
}