Steps

View full screen

Numbered vertical timeline for sequential content. Ordered list with number circles, connector lines, and slotted content. Consumer wraps in Section and provides their own heading.

Default

The full Angora journey — 5 steps from brand definition to shipped site. Titles mix slash commands (<code>) and natural-language prompts.

  1. 1

    /angora-design-system-init

    Define your brand through conversation. Intent, audience, feel — captured as design tokens.

  2. 2

    /angora "sketch me a wireframe for the blog"

    Page structure before pixels. A featured post, recent articles, category filters — mapped out as a working document.

  3. 3

    /angora "let's build that hero from the wireframe"

    Reads your tokens and wireframe. Builds a featured-post hero that belongs in your system — semantic HTML, accessibility baked in.

  4. 4

    /angora "compose the blog page components as a layout"

    Assemble real components into a full page. The wireframe becomes the layout.

  5. 5

    /angora "i've got 50 posts in a CSV and a folder of images in the inbox — make it live"

    Angora models the schema, imports every row, and wires your components to a real database. Images get automatic alt text. The design system just shipped a blog.

Center-aligned

align="center" on both Steps and StepsItem. Step content renders inside bordered cards with centered connector lines. Used on the home page for the "You talk, it builds" journey.

  1. 1

    /angora-design-system-init

    Define your brand through conversation. Intent, audience, feel — captured as design tokens.

  2. 2

    Sketch a wireframe

    Page structure before pixels. Hierarchy, sections, flow — brainstorm the layout before committing to components.

  3. 3

    Build components

    Reads your tokens and wireframe. Builds things that belong in your system — semantic HTML, accessibility baked in.

Minimal

Three generic steps showing the component is reusable beyond the Angora journey. Any sequential content works — onboarding flows, how-it-works sections, documentation.

  1. 1

    Create an account

    Sign up with your email. No credit card required.

  2. 2

    Configure your project

    Connect your repository and choose your build settings.

  3. 3

    Deploy

    Push to main and your site goes live. Every commit triggers a new build.

Anatomy

Breakdown of the number circle, connector line, content area, and spacing. The connector uses grow to fill remaining vertical space. On the last item, last:pb-0 removes bottom padding so the line naturally ends.

  1. 1

    First step

    The connector line extends from below the circle to the next step's circle.

  2. 2

    Last step

    No bottom padding — the connector line shrinks to match content height.

Shell <ol> flex flex-col
Item <li> flex gap-4 pb-8 last:pb-0
Circle w-8 h-8 rounded-full bg-muted text-sm font-semibold text-foreground
Connector w-px grow bg-border mt-2
Content pt-1 flex flex-col gap-1 max-w-[55ch]
Title font-semibold text-foreground
Description text-sm text-muted-foreground