Skip to content
EMBOSS
Docs menu

Progress

A milled channel filling with accent — indeterminate state sweeps instead of pretending to know the total.

@emboss/progress
Bouncing mix
x

Installation

pnpm dlx shadcn@latest add @emboss/progress

Usage

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

export function Example() {
  return <Progress value={64} aria-label="Transfer" />;
}

API reference

Progress

Pass value={null} for indeterminate. Label with aria-label or the ProgressLabel part.

PropTypeDefaultDescription
valuenumber | null—Current progress; null renders the indeterminate sweep.
min / maxnumber / number0 / 100Range of the channel.

ProgressLabel / ProgressValue

Optional labelled readout parts, wired to the progressbar by the primitive.

Source

View source — progress.tsx
progress.tsx
"use client";

import { Progress as BaseProgress } from "@base-ui/react/progress";
import { cn } from "@/lib/utils";

export type ProgressProps = React.ComponentProps<typeof BaseProgress.Root>;

/**
 * A milled channel filling with accent. Indeterminate state runs a sweep
 * along the channel instead of pretending to know the total.
 *
 * @example
 * <Progress value={64} aria-label="Transfer" />
 */
function Progress({ className, children, ...props }: ProgressProps) {
  return (
    <BaseProgress.Root data-slot="progress" {...props}>
      <BaseProgress.Track
        data-slot="progress-track"
        className={cn(
          "relative block h-2 w-full overflow-hidden rounded-full bg-well-deep shadow-deboss-1",
          className,
        )}
      >
        <BaseProgress.Indicator
          data-slot="progress-indicator"
          className="block h-full rounded-full bg-accent shadow-flush transition-[width] duration-(--duration-settle) ease-(--ease-settle) data-indeterminate:w-2/5 data-indeterminate:animate-progress-sweep"
        />
      </BaseProgress.Track>
      {children}
    </BaseProgress.Root>
  );
}

function ProgressLabel({
  className,
  ...props
}: React.ComponentProps<typeof BaseProgress.Label>) {
  return (
    <BaseProgress.Label
      data-slot="progress-label"
      className={cn("text-sm font-medium text-ink", className)}
      {...props}
    />
  );
}

function ProgressValue({
  className,
  ...props
}: React.ComponentProps<typeof BaseProgress.Value>) {
  return (
    <BaseProgress.Value
      data-slot="progress-value"
      className={cn("font-mono text-sm text-ink-muted tabular-nums", className)}
      {...props}
    />
  );
}

export { Progress, ProgressLabel, ProgressValue };

Related

MeterA level meter milled into the chassis — zone colors are painted into the channel and a shutter covers what the value hasn't reached.SkeletonA debossed empty pocket awaiting content, with a slow light sheen sweeping across it.