# How It Works Section v1

> Three-step process section with accent-colored heading prefix, top-border step numbers, and staggered IntersectionObserver entrance animation.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/how-it-works-section-v1).

- Page, with a live preview: https://shadcn.exchange/r/uiception/how-it-works-section-v1
- Screenshot: https://shadcn.exchange/shot/uiception/how-it-works-section-v1/light.png
- Registry item: https://uiception.com/r/how-it-works-section-v1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/how-it-works-section-v1.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: `geist`
- Registry items: `card`

## Files

### `registry/new-york/blocks/how-it-works-section-v1/page.tsx`

```tsx
import HowItWorksSectionV1 from "./components/how-it-works-section-v1"

export default function Page() {
  return <HowItWorksSectionV1 />
}
```

### `registry/new-york/blocks/how-it-works-section-v1/components/how-it-works-section-v1.tsx`

```tsx
import StepsGrid from "./steps-grid"
import "../styles/how-it-works-section-v1.css"

export default function HowItWorksSectionV1() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4">
        <div className="mb-12 flex flex-col items-center text-center md:mb-16">
          <h2 className="max-w-2xl text-4xl font-medium tracking-tight sm:text-5xl lg:text-6xl">
            <span className="text-muted-foreground">3 Steps</span>{" "}
            To Ship
            <br />
            Faster Than Ever
          </h2>
        </div>
        <StepsGrid />
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/how-it-works-section-v1/components/steps-grid.tsx`

```tsx
"use client"

import { steps } from "../lib/steps"
import StepCard from "./step-card"

export default function StepsGrid() {
  return (
    <div className="hiw1-grid relative grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3 lg:gap-10">
      {steps.map((step, i) => (
        <div key={step.id} className="hiw1-step-item relative isolate">
          <StepCard step={step} />
          {i < steps.length - 1 ? (
            <>

              <span
                aria-hidden
                className={
                  i === 0
                    ? "hiw1-beam-h pointer-events-none absolute top-1/2 hidden -translate-y-1/2 sm:block"
                    : "hiw1-beam-h pointer-events-none absolute top-1/2 hidden -translate-y-1/2 lg:block"
                }
              />

              <span
                aria-hidden
                className={
                  i === 0
                    ? "hiw1-beam-vertical pointer-events-none absolute -bottom-12 left-1/2 h-12 w-px -translate-x-1/2 lg:hidden"
                    : "hiw1-beam-vertical pointer-events-none absolute -bottom-12 left-1/2 h-12 w-px -translate-x-1/2 sm:hidden"
                }
              />
            </>
          ) : null}
        </div>
      ))}
    </div>
  )
}
```

### `registry/new-york/blocks/how-it-works-section-v1/components/step-card.tsx`

```tsx
import { GeistPixelGrid } from "geist/font/pixel"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import type { Step } from "../lib/steps"

type Props = {
  step: Step
}

export default function StepCard({ step }: Props) {
  return (
    <Card className="flex h-full flex-col rounded-[2rem] py-0">
      <CardHeader className="p-8 pb-0">
        <CardTitle className="text-base text-muted-foreground">
          {step.number}
        </CardTitle>
      </CardHeader>
      <CardContent className="flex flex-1 flex-col p-8 pt-6 pb-12">
        <CardTitle
          className={`${GeistPixelGrid.className} text-[2.75rem] leading-[1.05] font-medium tracking-tight text-foreground/90`}
        >
          {step.title}
        </CardTitle>
        <CardDescription className="mt-auto line-clamp-4 min-h-24 pt-4 text-[15px] leading-relaxed text-muted-foreground/80">
          {step.description}
        </CardDescription>
      </CardContent>
    </Card>
  )
}
```

### `registry/new-york/blocks/how-it-works-section-v1/lib/steps.ts`

```ts
export type Step = {
  id: string
  number: string
  title: string
  description: string
}

export const steps: Step[] = [
  {
    id: "browse",
    number: "01",
    title: "Browse",
    description:
      "Explore a growing library of UI blocks built with Next.js, Tailwind CSS, and shadcn/ui. Find the right one and you are halfway there.",
  },
  {
    id: "copy",
    number: "02",
    title: "Copy",
    description:
      "Paste the code straight into your project. No installs, no wrappers and no lock in. Just clean components that you fully own.",
  },
  {
    id: "ship",
    number: "03",
    title: "Ship",
    description:
      "Every block is styled, responsive and ready to go. Take your idea straight to production without writing a single line of boilerplate.",
  },
]
```

### `registry/new-york/blocks/how-it-works-section-v1/styles/how-it-works-section-v1.css`

```css
.hiw1-beam-h {
  right: -3rem;
  width: 3rem;
  height: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--muted-foreground) 0 4px,
    transparent 4px 8px
  );
  background-size: 16px 2px;
  animation: hiw1-dash-flow 1.5s linear infinite;
}

@media (min-width: 1024px) {
  .hiw1-beam-h {
    right: -2.5rem;
    width: 2.5rem;
  }
}

.hiw1-beam-vertical {
  width: 2px;
  background-image: repeating-linear-gradient(
    180deg,
    var(--muted-foreground) 0 4px,
    transparent 4px 8px
  );
  background-size: 2px 16px;
  animation: hiw1-dash-flow-v 1.5s linear infinite;
}

@keyframes hiw1-dash-flow {
  to {
    background-position: 16px 0;
  }
}

@keyframes hiw1-dash-flow-v {
  to {
    background-position: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiw1-beam-h,
  .hiw1-beam-vertical {
    animation: none;
    background-position: 0 0;
  }
}
```