Velocity X Components

Long-form

Tutorial Step List

A numbered how-to walkthrough where every step gets its own anchored heading, optional code block, and optional screenshot, so a reader can bookmark a specific step or a support agent can link straight to the one that's failing instead of saying 'scroll down'.

Subscription Included with the Velocity Components subscription.
bash 
$ velocityx add tutorial-step-list

Built for astro.

Full docs for Tutorial Step List →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.1
Tutorial Step List

  1. Install the CLI

    #

    Add the package to your project.

    bash 
    npm install velocity-cli

  2. Run the generator

    #

    This scaffolds the starter files.

    bash 
    velocity init

  3. Preview your first component

    #

    Start the dev server and open the generated route.

Props

NameTypeRequiredDefaultDescription
stepsTutorialStep[]Yes
idPrefixstringNo'step'Prefix used for each step's anchor id, e.g. "step" → #step-1.

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text 
components/velocity/tutorial-step-list/TutorialStepList.astro

Using the Tutorial Step List component

Install it with velocityx add tutorial-step-list. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Related components

More from Long-form.

Admonition BlockPro

The note / tip / warning / danger callout a docs page or technical article needs repeatedly, from one component instead of four. Left accent bar + icon + label so variants read apart at a glance without relying on colour alone, built for pages that stack several of these without feeling noisy.

astro
Article Disclosure BannerPro

The affiliate/sponsored/review-unit disclosure strip that monetised long-form content needs near the top of the piece — calm, matter-of-fact copy with an optional link to a standing disclosure policy.

astro
Article Feedback PromptPro

A lightweight 'was this helpful?' strip for the end of a post or docs page — thumbs up/down with an optional comment box that only appears after a choice is made, ending in a thank-you state. A deliberately lighter, binary take than a full satisfaction-score prompt, built to drop straight into prose with no state library.

astro
Article HeroPro

The opening block for a blog or long-form page — kicker, headline, dek, and an author/date/read-time meta row, with an optional cover image. Marked up as a proper document header with one real h1, so the rest of the article's heading order stays correct.

astro