Feedback

Progress

Linear determinate progress bar. Pass value 0 to 100.

Preview

'use client';

import { Progress } from '@brika/clay/components/progress';

/** Basic determinate progress bar, pass `value` 0 to 100. */
export default function ProgressDefaultDemo() {
  return (
    <div className="w-full max-w-xs">
      <Progress value={66} />
    </div>
  );
}

01 Installation

Install

Pull Progress from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Progress } from "@brika/clay";

tsxGranular1 line

import { Progress } from "@brika/clay/components/progress";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxProgress.tsx12 lines

'use client';

import { Progress } from '@brika/clay/components/progress';

/** Basic determinate progress bar, pass `value` 0 to 100. */
export default function ProgressDefaultDemo() {
  return (
    <div className="w-full max-w-xs">
      <Progress value={66} />
    </div>
  );
}

03 Examples

Progress, every way

Animated

Progress bar that increments automatically to simulate a running task.

GitHub

'use client';

import { Progress } from '@brika/clay/components/progress';
import { useEffect, useState } from 'react';

/** Progress bar that increments automatically to simulate a running task. */
export default function ProgressAnimatedDemo() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    if (value >= 100) return;
    const id = setTimeout(() => setValue((v) => Math.min(v + 2, 100)), 80);
    return () => clearTimeout(id);
  }, [value]);

  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Progress value={value} />
      <button
        className="self-start text-xs text-muted-foreground underline-offset-4 hover:underline"
        onClick={() => setValue(0)}
      >
        Restart
      </button>
    </div>
  );
}

Labelled

Progress with a percentage label, compose any text readout alongside the bar.

GitHub

'use client';

import { Progress } from '@brika/clay/components/progress';
import { useState } from 'react';

/** Progress with a percentage label, compose any text readout alongside the bar. */
export default function ProgressLabelledDemo() {
  const [value] = useState(42);

  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <div className="flex items-center justify-between text-sm">
        <span className="text-muted-foreground">Indexing codebase</span>
        <span className="font-medium tabular-nums">{value}%</span>
      </div>
      <Progress value={value} />
    </div>
  );
}

04 Accessibility

Accessibility

Carries role="progressbar", aria-valuenow, aria-valuemin, and aria-valuemax automatically.
Pair with a visible label or aria-label so AT announces what is progressing.
Indeterminate state should also carry an accessible description explaining the uncertainty.

05 Tokens 3 theme-overridable

Theme tokens

Every CSS variable Progress reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Progress without touching component code.

Progress tokens

3 tokens

ColorFill, border, and text colors.2

--progress-track-colorcolorvar(--secondary)
components.progress.trackColor
Background of the progress track.
--progress-indicator-colorcolorvar(--primary)
components.progress.indicatorColor
Foreground of the progress indicator.

GeometrySizes, lengths, and corner radii.1

--progress-track-heightsize0.5rem
components.progress.trackHeight
Progress track thickness.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.progress, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "progress": {
      "trackColor": "var(--secondary)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-progress-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Progress. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

No wrapper-specific props, all attributes pass through to the underlying primitive.