Stepper

01TOKENIZE

1.2M tokens

02ROUTE

384 → 8

03ATTEND

sparse 4%

04EXPERTS

38B active

05DRAFT

n=4 branches

06VERIFY

self-check

Source

"use client"

import { Stepper } from "@/registry/warren/stepper/stepper"

const STAGES = [
  { label: "TOKENIZE", description: "1.2M tokens" },
  { label: "ROUTE", description: "384 → 8" },
  { label: "ATTEND", description: "sparse 4%" },
  { label: "EXPERTS", description: "38B active" },
  { label: "DRAFT", description: "n=4 branches" },
  { label: "VERIFY", description: "self-check" },
]

export default function StepperDemo() {
  return <Stepper stages={STAGES} activeIndex={3} corners />
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/stepper.json

Usage

import { Stepper } from "@/components/ui/stepper"

<Stepper
  stages={[
    { label: "TOKENIZE", description: "1.2M tokens" },
    { label: "ROUTE", description: "384 → 8" },
    { label: "ATTEND", description: "sparse 4%" },
    { label: "EXPERTS", description: "38B active" },
    { label: "DRAFT", description: "n=4 branches" },
    { label: "VERIFY", description: "self-check" },
  ]}
  activeIndex={3}
/>

boxes (default) renders each stage as a square 2px-bordered card with a 2-digit mono index and uppercase label. Stages before activeIndex are done (primary text), the active stage inverts to the primary fill, and the rest stay pending (muted). Pass corners to add crop-mark brackets on every box — white on the active stage. onStepClick turns the stages into buttons and keeps aria-current="step" on the active one.

Strip

variant="strip" condenses the pipeline to mono text pills joined by dashed connectors. The active stage inverts to the primary fill; pass trail to soften the stage right before it with the primary-soft pill.

01TKN

02RTE

03ATT

04EXP

05DRF

06VRF

Source

"use client"

import { Stepper } from "@/registry/warren/stepper/stepper"

const STAGES = [{ label: "TKN" }, { label: "RTE" }, { label: "ATT" }, { label: "EXP" }, { label: "DRF" }, { label: "VRF" }]

export default function StepperStrip() {
  return <Stepper stages={STAGES} activeIndex={3} variant="strip" trail />
}

API Reference

Prop

Type

`StepperStage`