ProgressRail

"use client"

import { ProgressRail } from "@/registry/warren/progress-rail/progress-rail"

export default function ProgressRailDemo() {
  return <ProgressRail leftLabel="REJECTED" rightLabel="ACCEPTED" />
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/progress-rail.json

Usage

import { ProgressRail } from "@/components/ui/progress-rail"

<ProgressRail leftLabel="REJECTED" rightLabel="ACCEPTED" />

In gate mode the rail renders dots (default 28) small primary dots with the gate diamond — a rotated square — replacing the center dot. leftLabel and rightLabel render the flanking 10px mono caps in the danger and success text grades (AA on cream).

Live progress

Pass progress (0–1) to turn the rail into a live gauge: dots with index / dots < progress fill the primary tone, the rest render as the empty track, and the gate diamond sits at progress × 100% instead of the center. Out-of-range values clamp to 0–1.

The gauge container exposes role="progressbar" with aria-valuemin={0}, aria-valuemax={1}, and aria-valuenow set to the clamped value, so screen readers announce the live progress. The individual dots are aria-hidden — the role carries the value. label sets the gauge's accessible name (default "progress").

"use client"

import { ProgressRail } from "@/registry/warren/progress-rail/progress-rail"

export default function ProgressRailProgress() {
  return <ProgressRail progress={0.65} leftLabel="35% REMAINING" rightLabel="65% COMPLETE" />
}

Steps

Pass steps to swap the dot row for labeled stage markers: activeIndex fills done stages with the primary tone, and gateAt places the gate diamond on one of the stage positions instead of a dot. In both modes the gate is the same ink-and-panel rotated square (border-foreground bg-panel) — 10px for prominence over the 6px dots.

API Reference