✨ Publier v1 is live — a polished docs platform built for the open web.
Skip to content

Steps

Numbered step list with a vertical guideline connecting each bullet. Write each step as a <li> child — MDX, code blocks, and nested lists all work inside.

<Steps> renders a semantic <ol> with numbered bullets connected by a vertical guideline. Use it for procedures: installation walkthroughs, setup sequences, ordered checklists. Each step is an <li> child — anything valid in MDX is valid as step content.

Installation walkthrough

  1. Scaffold a new site. Pick a template (docs, blog, company-site, or full):

    Terminal window
    publier new my-site

  2. Add your content. Drop MDX files under src/content/docs/:

    Terminal window
    echo "---\ntitle: Hello\n---\n\nWorld" > src/content/docs/hello.mdx

  3. Run the dev server.

    Terminal window
    cd my-site && publier dev

  4. Ship it. publier build outputs static HTML to dist/. Deploy to any static host — Vercel, Cloudflare Pages, Netlify, an S3 bucket, or python -m http.server.

import { Steps } from '@publier/shell/components';


<Steps>
  <li>
    **Scaffold a new site.**
    ```bash
    publier new my-site
    ```
  </li>
  <li>
    **Add your content.** Drop MDX files under `src/content/docs/`.
  </li>
  <li>
    **Run the dev server.**
    ```bash
    cd my-site && publier dev
    ```
  </li>
  <li>
    **Ship it.** `publier build` outputs static HTML to `dist/`.
  </li>
</Steps>

Resuming a split procedure

Continue numbering across sections with start. Handy when a single procedure spans several H2 sections:

  1. Verify the build output. Check that dist/ contains one .html file per page.
  2. Smoke-test the deployment. Open three pages, run Cmd/Ctrl+K, click a sidebar link.
  3. Announce the release. Post the URL in your team channel — you’re done.
<Steps start={5}>
  <li>**Verify the build output.** Check that `dist/` contains one `.html` file per page.</li>
  <li>**Smoke-test the deployment.** Open three pages, run Cmd/Ctrl+K, click a sidebar link.</li>
  <li>**Announce the release.** Post the URL in your team channel — you're done.</li>
</Steps>

Single-line steps

Not every step needs a paragraph. Short lines work fine:

  1. Install the CLI: curl -fsSL https://publier.net/install.sh | sh.
  2. Run publier login and paste your token.
  3. publier doctor to verify the install.

Props

PropTypeDefaultDescription
startnumber1Starting step number.
classstring—Extra CSS class.

Each step is a <li> child. Any MDX content is valid inside — paragraphs, code blocks, nested lists, callouts.

Behaviour

  • Renders as <ol class="publier-steps">.
  • The vertical guideline and numbered bullets are pure CSS — no JavaScript.
  • start sets a CSS custom property (--publier-steps-start) that shifts the counter; the numbered bullets compute from there.
  • Respects prefers-reduced-motion for any guide animations.