# About Section with Process Steps

> Process section in Instrument Serif: an eyebrow beside a long statement heading, a rule, then three numbered steps (Install, Compose, Deploy), each with a short list.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/about-01).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/about-01
- Screenshot: https://shadcn.exchange/shot/01orbital/about-01/light.png
- Registry item: https://01orbital.dev/r/about-01.json
- Categories: about
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/about-01.json
```

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

## Dependencies

- Registry items: `@01orbital/eyebrow`, `@01orbital/features`, `@01orbital/font-instrument-serif`, `@01orbital/heading`, `@01orbital/section`, `@01orbital/separator`

## Files

### `blocks/about/about-01/index.tsx`

```tsx
import { Eyebrow } from "@/components/editorial/eyebrow"
import {
  Feature,
  FeatureDescription,
  FeatureGroup,
  FeatureTitle,
} from "@/components/editorial/features"
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionColumns,
  SectionContent,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import { Separator } from "@/components/ui/separator"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Process",
  title:
    "As guiding partners for the unknown, we focus not only on perfecting what’s been made before, but on unlocking what comes next. Through the registry’s release programme, builders get proven, considered pieces, each reviewed against the same tokens and the same rules, so they can change the game at speed.",
} as const

const STEPS = [
  { name: "Install", items: ["One command", "Your tokens", "Plain files"] },
  { name: "Compose", items: ["Blocks & legos", "Scenes & orbs", "Your copy"] },
  { name: "Deploy", items: ["Both modes", "Every size", "One system"] },
]

// The eyebrow keeps the narrow column, the statement the wide one; the
// steps count themselves.
export default function About01() {
  return (
    <Section
      className="[--font-display:var(--font-instrument)]"
      aria-labelledby="process-title"
    >
      <SectionContent>
        <SectionColumns variant="intro">
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <SectionHeader size="lg">
            <SectionTitleGroup>
              <Heading id="process-title">{COPY.title}</Heading>
            </SectionTitleGroup>
          </SectionHeader>
        </SectionColumns>
        <Separator />
        <FeatureGroup render={<ol />} cols={3}>
          {STEPS.map((step, i) => (
            <Feature key={step.name}>
              <span
                aria-hidden="true"
                className="flex shrink-0 font-sans text-2xl/8 tracking-tight text-muted-foreground tabular-nums"
              >
                {String(i + 1).padStart(2, "0")}
              </span>
              <FeatureTitle>{step.name}</FeatureTitle>
              <FeatureDescription render={<ul role="list" />}>
                {step.items.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </FeatureDescription>
            </Feature>
          ))}
        </FeatureGroup>
      </SectionContent>
    </Section>
  )
}
```