# Quickstart Steps (Moonarc)

A quickstart as numbered steps down a rail that fills as the reader moves through them, each number lighting as its step reaches the middle of the screen. A step has its words, its code in tabs (one per language or package manager, a copy button on each) and what the reader should see when it worked, as a line or as output, so a step can be checked before the next. A last line can point to what to read next. Scroll-driven where the browser has view timelines; the rail full and every number lit where it does not. Composes TracingBeam and CodeTabs; zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/quickstart-steps` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<QuickstartSteps steps={[{ title, text, code, result }]} />`
- Browser support: limited (Chrome 115 · not Firefox · Safari 26); elsewhere: the rail is drawn full and every number lit (Firefox)
- Measured cost: 0 B JS of its own · uses CopyButton + runtime (with dependencies 2.5 kB raw; CSS 21.6 kB raw)
- Page: https://moonarc.dev/components/quickstart-steps/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `{ title; text?; code?; result? }[]` | none | The steps, in order. text is a paragraph or two (a blank line splits them), with `code` in backticks; code is CodeTabs' tabs ({ label, code, lang }); result is what the reader should see: { label?, text?, code?, lang? }, the code in JSON unless lang says otherwise. |
| `id` | `string` | `'ma-qs'` | Prefix of the code tabs' radio names; unique on the page. |
| `eyebrow` | `string` | none | A short line above the heading. Slot "eyebrow" wins. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>. |
| `copy` | `string` | none | A line under the heading. |
| `resultLabel` | `string` | `'You should see'` | The words over a step's result. |
| `next` | `{ text: string; href: string; label: string }` | none | A last line on the rail with a link: what to read next. |
| `level` | `2 | 3` | `2` | Heading level of the heading; each step's title is one below. With no heading (steps inside a docs page), each step's title takes this level. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; on ink and brand the rail takes the tone's emphasis colour. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import QuickstartSteps from '@/components/moonarc/pro/QuickstartSteps.astro';
---
<QuickstartSteps
  id="qs"
  eyebrow="Quickstart"
  next={{ text: 'Next, send it from your app.', href: '/docs/sdks/', label: 'Pick an SDK' }}
  steps={[
    {
      title: 'Install the SDK',
      code: [
        { label: 'npm', code: 'npm install sitename' },
        { label: 'pnpm', code: 'pnpm add sitename' },
      ],
    },
    {
      title: 'Send a request',
      text: 'Your key is in the dashboard under Keys.',
      code: [{ label: 'cURL', code: 'curl https://api.example.com/v1/ping -H "Authorization: Bearer $KEY"' }],
      result: { code: '{ "ok": true }' },
    },
  ]}
>
  <span slot="headline">Send your first request in <em>two minutes</em></span>
</QuickstartSteps>
```

## Reduced motion

The rail is drawn full and every number lit.

## With ClientRouter

CSS only; the copy buttons are CodeTabs', bound through the shared runtime.

## Craft

- Every step says what success looks like. A reader who sees something else knows at that step, not three steps later.
- Each number lights on its own view timeline between 30 and 45 % of its pass through the screen, a little after the rail's head reaches it, so the light reads as the rail arriving.
- The numbers sit on the rail: pulled back across TracingBeam's gutter and centred on its line, so the list and the rail are one drawing.
- Where there is no view timeline the finished state is the default: a full rail and lit numbers, never an empty rail waiting for a scroll that will not drive it.

## Replaces

- Quickstart pages in developer docs
- Step lists with code blocks (Mintlify Steps, Starlight Steps)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/quickstart-steps` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: tracing-beam, code-tabs.