Sections
Process steps
How working with you goes, as an ordered list.
Installation
npx shadcn@latest add http://localhost:3000/r/process-steps.jsonMKT UI is not published yet, so this points at your local development server. Set NEXT_PUBLIC_REGISTRY_URL to the deployed origin to show the public command.
Also installs: container, section, section-heading.
Usage
import { ProcessSteps } from "@/components/process-steps";
<ProcessSteps
eyebrow="How it works"
title="Four steps from call to fixed"
steps={[
{ id: "1", title: "Tell us what's wrong", description: "Send a few details or call.", duration: "5 minutes" },
{ id: "2", title: "Get a written price", description: "A fixed price by email.", duration: "Same business day" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title (required) | ReactNode | — | Section heading. |
| steps (required) | ProcessStep[] | — | Each needs `id`, `title`, and `description`. |
| layout | "horizontal" | "timeline" | "horizontal" | `timeline` stacks vertically with a connecting line and stays readable past four or five steps. |
| action | ReactNode | — | Action under the steps. |
| headingAs | "h2" | "h3" | "h2" | Heading level. |
| surface | "default" | "muted" | "brand" | "inverted" | "default" | Background treatment. |
ProcessStep
| Prop | Type | Default | Description |
|---|---|---|---|
| id (required) | string | — | Stable key. |
| title (required) | string | — | What happens at this step. |
| description (required) | ReactNode | — | What the customer does, or what you do. |
| duration | ReactNode | — | What this step costs them in time, e.g. "About 30 minutes". Answers the question people actually have. |
| icon | ReactNode | — | A Lucide icon. Replaces the step number. |
Behaviour
It is an ordered list, which is not incidental — the order is the content. Each step's heading carries a screen-reader-only "Step 3:" prefix, so the position is announced even when an icon has replaced the visible number.
The connecting line in the timeline layout is drawn with a decorative element that is skipped for the final step, so the line never trails off into nothing.
Renders on the server.
Limitations
- No numbered-list or detailed-alternating variants yet.
horizontalfixes at four columns on wide screens. Usetimelinefor more steps.