# Stepper with filled status chevrons
> 8 proposal steps as nested arrows in a frame, green with a check once finished, solid blue with a spinner when current and dashed rings ahead.
A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-stepper-33).
- Page, with a live preview: https://shadcn.exchange/r/reui/c-stepper-33
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-stepper-33-light-f14ba465445c2ca1.png
- Registry item: https://reui.io/r/new-york-v4/c-stepper-33.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-33.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/frame`, `@reui/stepper`
## Files
### `c-stepper-33.tsx`
```tsx
"use client"
import { useEffect, useRef, useState } from "react"
import { Frame } from "@/components/reui/frame"
import {
Stepper,
StepperContent,
StepperIndicator,
StepperItem,
StepperNav,
StepperPanel,
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 steps = [
{ title: "Intake", description: "Log the brief, scope and deadline." },
{ title: "Structure", description: "Outline the sections and name owners." },
{ title: "Kick-off", description: "Brief writers on tone and timeline." },
{ title: "Draft", description: "Write a first pass of every section." },
{ title: "Consolidate", description: "Merge sections into one voice." },
{ title: "Internal check", description: "Legal and finance review terms." },
{ title: "Negotiate", description: "Settle open terms with procurement." },
{ title: "Package", description: "Export, sign and send the proposal." },
]
// The step in progress adds a center dot and spins the dashed ring around it.
function Ring({ active = false }: { active?: boolean }) {
return (
{active && }
)
}
const indicators = {
completed: (
),
inactive: ,
loading: ,
}
// A chevron cut from its box: --notch bites into the start edge and --arrow
// points out of the end edge, and --stretch scales both (as --n and --a) for a
// taller copy whose edges stay parallel. Every corner is rounded, so the clip
// traces each with three points, both ends of the curve and its middle; an end
// with no depth collapses them onto a straight edge. The shape mirrors whole in
// RTL, which is why its outer corners round the physical left and right.
function Chevron({ className }: { className?: string }) {
return (
)
}
export function Pattern() {
const [current, setCurrent] = useState(6)
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 > steps.length
// Past the collapsed width (many steps in a small box) the row scrolls, so
// the current step comes back into view when it changes or the row resizes,
// and a tab comes into view when focus lands on it (the browser leaves a
// half-hidden one where it is). Only the row scrolls, never the page.
const rowRef = useRef(null)
useEffect(() => {
const row = rowRef.current
if (!row) return
const reveal = (tab: Element | null) => {
if (!tab) return
const box = row.getBoundingClientRect()
const { left, right } = tab.getBoundingClientRect()
if (left < box.left || right > box.right) {
row.scrollLeft += (left + right - box.left - box.right) / 2
}
}
const onFocus = (event: FocusEvent) =>
reveal((event.target as Element).closest('[role="tab"]'))
const observer = new ResizeObserver(() =>
reveal(row.querySelector('[aria-selected="true"]'))
)
observer.observe(row)
row.addEventListener("focusin", onFocus)
return () => {
observer.disconnect()
row.removeEventListener("focusin", onFocus)
}
}, [current])
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 > steps.length) prevRef.current?.focus()
}
return (
{/* The design rounds the frame at radius-sm and the chevron ends 2px
inside it; min() keeps lyra and sera square. Under 56rem the steps
around the current one drop to their icon, under 24rem the current
one too (the panel names it); past that the frame
scrolls, and its 4px inset keeps the 2px focus ring inside the clip.
min-w-max keeps the end padding in range. */}
{steps.map((item, index) => {
const step = index + 1
// The primitive shows loading on the active step only, so every
// step carries the flag and the spinner follows the selection.
// Steps hug their labels rather than share out the row.
return (
{/* The 8px notch reaches back over the 4px gap, so the
chevrons nest with an even channel between them. */}
{/* The focus ring is the same chevron 2px larger all round,
so 32/28 of h-7 and --stretch is 8/7. The fill in front
of it is opaque, so only its outer 2px shows. */}
{/* Each state tints ::after over an opaque background, the
layers the design uses: input at 40%, success at 20%,
and the palette blue-500 for the step in progress (the
theme has no blue token). */}
{item.title}
{step < current && (
, completed
)}
)
})}
{steps.map((item, index) => (