# Stepper with outlined chevron plan
> 6 proposal steps as nested arrows after a done count, finished ones outlined in green with a check and the current one in 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-34).
- Page, with a live preview: https://shadcn.exchange/r/reui/c-stepper-34
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-stepper-34-light-417e1cca24a5b978.png
- Registry item: https://reui.io/r/new-york-v4/c-stepper-34.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-34.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-34.tsx`
```tsx
"use client"
import { useEffect, useRef, useState, type ComponentProps } 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: "Brief, scope and deadline logged from the request.",
},
{
title: "Structure",
description: "Sections outlined, each with a named owner.",
},
{ title: "Draft", description: "A first pass of every section is shared." },
{
title: "Internal check",
description: "Legal and finance are reviewing pricing and terms.",
},
{
title: "Negotiate",
description: "Open terms settled with the client's procurement.",
},
{
title: "Package",
description: "Final proposal exported, signed and sent.",
},
]
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 as in the
// design, so the clip traces each with three points on its curve; an end with
// no depth collapses them onto a straight edge. The shape mirrors whole in
// RTL, so its corners and everything inside it use physical sides.
function Chevron({ className, ...props }: ComponentProps<"span">) {
return (
)
}
// The notch and arrow sides traced from the design, stroked 2px wide on the
// clip line: the clip keeps the inner 1px, the weight of the border they
// meet. That border insets the outline's padding box, so each side reaches
// 1px past it at both ends.
const edges = {
notch:
"M12 0H2.24C1.28 0 .71 1.07 1.24 1.87L6.52 9.78C7.42 11.12 7.42 12.88 6.52 14.22L1.24 22.13C.71 22.93 1.28 24 2.24 24H12",
arrow:
"M0 0H1.86C3.2 0 4.45.67 5.19 1.78L10.52 9.78C11.42 11.12 11.42 12.88 10.52 14.22L5.19 22.22C4.45 23.33 3.2 24 1.86 24H0",
}
function Edge({
side,
className,
}: {
side: keyof typeof edges
className: string
}) {
return (
)
}
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 steps share the full width. With every label the row needs
about 690px, so under 48rem the steps around the current one drop to
their indicator and under 24rem the current one too (the panel names
it); past that the strip scrolls, and the 2px padding keeps the focus
ring inside the scrollport.
The corner is capped at --radius-sm, 2px less inside, so the square
styles stay square. */}
{/* Every step before the current one counts as done. */}
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.
// Folded steps hug their icon and the current one takes the rest;
// once every label is folded they share the width again.
return (
{/* The 8px notch reaches back over the 2px gap, so each
arrow nests in the next notch with a 2px channel. The
clip bounds hit testing too, so the corners that reach
back select this step, not the one under them. */}
{/* The clip and the traced sides assume the 24px of h-6, so
the focus ring, 2px larger all round, is 28/24 of it,
behind the opaque base below. */}
{/* The theme has no blue token, so the step in progress
takes the palette blue-500. The tint sits on ::after;
the outline is drawn solid and faded as one layer, so
its border and traced sides never double up. */}
{item.title}
{step < current && (
, completed
)}
)
})}
{steps.map((item, index) => (