# How Steps

> Three numbered steps on a vertical connector rail.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/how-steps).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/how-steps
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/how-steps-light-6331b953dcaa823a.png
- Registry item: https://blockforge.terravidhal.me/r/how-steps.json
- Categories: how-it-works
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/how-steps.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `registry/blocks/how-steps.tsx`

```tsx
const steps = [
  {
    number: "01",
    title: "Connect your repository",
    description:
      "Authorize GitHub or GitLab, pick a repo. We detect the framework and configure the pipeline for you.",
  },
  {
    number: "02",
    title: "Push like you always do",
    description:
      "Every commit builds, every branch gets a preview URL. Nothing new to learn, nothing to babysit.",
  },
  {
    number: "03",
    title: "Promote to production",
    description:
      "One click — or automatic on main. Rollbacks are instant because every deploy is kept, forever.",
  },
];

export default function HowSteps() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-3xl px-6 py-20 sm:py-24">
        <div className="mb-12 text-center">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Live in three steps
          </h2>
          <p className="mt-2 text-muted-foreground">
            From repository to production in under five minutes.
          </p>
        </div>

        <ol className="space-y-0">
          {steps.map((step, index) => (
            <li key={step.number} className="relative flex gap-6 pb-10 last:pb-0">
              {/* Connector line */}
              {index < steps.length - 1 && (
                <span
                  aria-hidden
                  className="absolute top-12 left-6 h-[calc(100%-3rem)] w-px bg-border"
                />
              )}
              <span className="flex size-12 shrink-0 items-center justify-center rounded-full border border-border/60 bg-card font-mono text-sm tabular-nums">
                {step.number}
              </span>
              <div className="pt-2.5">
                <h3 className="font-medium">{step.title}</h3>
                <p className="mt-1.5 text-sm text-muted-foreground">
                  {step.description}
                </p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}
```