# Stepper with phase track
> A refund case in 4 phases labeled Phase 1 to 4, joined by a single track with a dot per phase and slash dividers, above the selected phase's summary.
A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-stepper-25).
- Page, with a live preview: https://shadcn.exchange/r/reui/c-stepper-25
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-stepper-25-light-9f4a34b4a5b733a3.png
- Registry item: https://reui.io/r/new-york-v4/c-stepper-25.json
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-stepper-25.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- npm packages: `cn`
- Registry items: `button`, `@reui/stepper`
## Files
### `c-stepper-25.tsx`
```tsx
"use client"
import { useRef, useState } from "react"
import {
Stepper,
StepperContent,
StepperIndicator,
StepperItem,
StepperNav,
StepperPanel,
StepperSeparator,
StepperTitle,
StepperTrigger,
} from "@/components/reui/stepper"
import { cn } from "cn"
import { Button } from "@/components/ui/button"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
const phases = [
{
title: "Choose Resolution",
summary:
"Compare a refund, a replacement and store credit for order #4821.",
},
{
title: "Execute Resolution",
summary: "Issue the $129.00 refund to the original payment method.",
},
{
title: "Verify Outcome",
summary: "Confirm the bank has settled the refund with the customer.",
},
{
title: "Resolution Summary",
summary: "Review every action taken, then close the case.",
},
]
// pathLength counts the ring as 28 units, so the 3:1 dash pattern closes in
// seven even dashes instead of leaving a stub at the seam.
function Pending({ current = false }: { current?: boolean }) {
return (
)
}
// The 22px indicator is a disc of the page surface and the 16px dot inside
// it carries the state, so a 3px ring cuts the dot out of the track. The
// design draws the 10px check with a 1.4px line: 3.36 on a 24-unit grid.
const indicators = {
completed: (
),
inactive: ,
loading: ,
}
export function Pattern() {
const [current, setCurrent] = useState(3)
const prevRef = useRef(null)
const nextRef = useRef(null)
// One past the last step marks every step complete. No tab is selected
// then, so the last one keeps the tablist's tab stop.
const allDone = current > phases.length
function goTo(step: number) {
setCurrent(step)
// The pressed button disables itself at either end, so focus moves to its partner.
if (step === 1) nextRef.current?.focus()
if (step > phases.length) prevRef.current?.focus()
}
return (
{/* Under 32rem the labels go screen-reader only and the row keeps its
track, so any number of steps fits; the panel below names the
current one. */}
{phases.map((phase, index) => {
const step = index + 1
// The primitive shows loading on the active phase only, so every
// phase carries the flag and the spinner follows the selection.
return (
{/* Items stretch to the tallest label and mt-auto pins each
track slice to the bottom, so the track stays one line when
a title wraps. mb-2.25 holds the indicator's 9px overhang. */}
Phase {step}
{phase.title}
{step < current && (
, completed
)}
{/* Each phase draws one slice of the track, rounded only at
the outer ends; the active fill spans its whole slice, so
the first and last reach the track's ends. The theme has
no blue token, so it takes the palette blue. */}
{/* The design's 14px slash: a 1.2px line turned 45deg, centered
on the boundary and on the label rows by leaving out the
29px under them. px-1.75 keeps the labels out of its slot,
and pointer-events-none passes clicks to the trigger under it. */}
{step < phases.length && (
)}
)
})}
{phases.map((phase, index) => (