# Stepper with flat chevron plan
> 6 contract steps as borderless arrows after a done count, finished ones in darker gray with a check and the current one tinted blue with a spinner.
A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-stepper-35).
- Page, with a live preview: https://shadcn.exchange/r/reui/c-stepper-35
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-stepper-35-light-42de26fc47cb02df.png
- Registry item: https://reui.io/r/new-york-v4/c-stepper-35.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-35.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- Registry items: `button`, `@reui/frame`, `@reui/stepper`
## Files
### `c-stepper-35.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 { Button } from "@/components/ui/button"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
const steps = [
{ title: "Intake", description: "Collect the brief and key dates" },
{ title: "Structure", description: "Outline clauses and owners" },
{ title: "Draft", description: "Write the first full version" },
{ title: "Internal check", description: "Legal and finance review" },
{ title: "Negotiate", description: "Trade redlines with the counterparty" },
{ title: "Package", description: "Bundle and send the signed files" },
]
// The check and the spinner are drawn at 1.4px, so their strokes are raised
// from lucide's default (1px at 12px, 1.17px at 14px). The dashed circle
// keeps the default.
const indicators = {
completed: (
),
loading: (
),
inactive: (
),
}
export function Pattern() {
const [current, setCurrent] = useState(4)
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's 4px inset, 6px corner and 4px inner corners, each
capped at the style's frame radius so square styles stay square. */}
{/* The steps share the full width. Under 48rem the steps around the
current one drop to their indicator, under 24rem the current one
too (the panel names it); past that the row scrolls
here, clipped to the frame's inner corners, and min-w-max keeps
the nav from shrinking. relative keeps the sr-only text in the
scroller: placed against the Frame, it escapes and widens the
page. */}
Plan {current - 1}/{steps.length}
{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.
// Pulled back 6px, each 8px notch wraps the previous arrow with
// 2px between them. Folded steps hug their icon and the current
// one takes the rest; once every label is folded they share the
// width again.
return (
{/* The design's chevron: an 8px --notch at the start, an
8px --arrow at the end, each corner rounded at 4px (1.2px
at the acute notch corners) through three points, y tuned
to the h-6 row and x to the two variables, so the outer
steps zero one and round that side instead. The clip
trims the hit area too, so a click lands where it hits. */}
{/* clip-path cuts the trigger's own focus ring, so this
pill draws it: px-1 completes the step's padding, py-0.5
clears the label's descenders and keeps the ring inside
the 24px chevron. The design sets the last step 6px
past its notch with a 6px icon gap. */}
{item.title}
{step <= current && (
{step < current ? ", done" : ", in progress"}
)}
)
})}
{steps.map((item, index) => (
Step {index + 1} of {steps.length}
{item.title}
{item.description}
))}
All {steps.length} steps done
Contract ready
Every step is done and the contract is ready to sign.