# Stepper with top color bars and card art
> Adding a payment card in 4 steps, each tab with its own color bar on the top edge that thickens when selected, over a card drawing and a caption.
A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-stepper-23).
- Page, with a live preview: https://shadcn.exchange/r/reui/c-stepper-23
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-stepper-23-light-52dc57a2c675ff1e.png
- Registry item: https://reui.io/r/new-york-v4/c-stepper-23.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-23.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-23.tsx`
```tsx
"use client"
import { useRef, useState } from "react"
import { Frame, FramePanel } 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"
// Each step owns a color. Its column sets it as the text color, and the bar
// and indicator inherit it through currentColor. The theme has no blue token,
// so step 3 takes the palette color.
const steps = [
{ color: "text-info", caption: "Enter the card number and expiry" },
{ color: "text-warning", caption: "Add the billing address" },
{ color: "text-blue-500", caption: "Confirm the card with your bank" },
{ color: "text-success", caption: "Review and save the card" },
]
// The design's 3:1 dashed ring on a 12px box, its 1.4 stroke overflowing the
// box. pathLength 36 closes the dashes in nine even segments, turned to start
// at 1 o'clock. Loading dims the track under a 38.5% arc that rests at 11 to
// 4 o'clock when motion is reduced.
function Ring({ spin = false }: { spin?: boolean }) {
return (
)
}
// Off the active step the indicator sits at 40% opacity, which dims these
// too. Completed and loading are spelled out for screen readers as well.
const indicators = {
completed: (
<>
Completed
),
inactive: ,
loading: (
<>
In progress
),
}
function CardIllustration() {
return (
)
}
export function Pattern() {
const [current, setCurrent] = useState(2)
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
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 nav bleeds over the panel's top and side padding, so the bars
sit flush with its edges and the panel's overflow-hidden rounds
their ends. Only a block, auto-width nav stretches into those
margins, and the tabs' focus ring is inset so the clip spares it. */}
{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.
return (
{/* 30px: the 4px bar, a 12px gap and the 14px label row,
so the active bar grows into the gap and the row
never moves. */}
{/* The active bar's corners stop at the panel radius,
so the square styles stay square. */}
{/* Under 28rem a quarter row only fits the number, so
the word moves to sr-only and the tab keeps its
name. */}
Step
{step}
{/* The primitive fills each state with its own color,
so each is cleared for the icon to take the step's. */}
)
})}
{/* The card art is a static empty state; only the caption under
it follows the active step. */}
{steps.map((item, index) => (