Skip to content
UI Kit
Accent color

How it works and process steps

How it works, from four steps in a row to a rail that fills while you scroll.

7 variants
Switch category

Three to five steps, in order

A process section answers how it works, and it lowers the effort a visitor expects before the first contact. The seven layouts here show three to six steps with a number, a title and a sentence, and they keep the order clear for screen readers as an ordered list.

Horizontal steps and Compact fit three or four short steps under the features. Cards gives each step a little more text. Vertical timeline and Centered rail suit longer processes such as a renovation or an onboarding, the rail fills as you scroll. Big numbers works for bold brand pages, With images when each step has something to show.

Start each step with a verb, such as Book, Meet, Receive. Say what the visitor does and what you do, so the division of work is clear. Three steps are easier to remember than six, merge steps when you can.

Process

Horizontal steps

Numbered steps joined by a line, stacked on phones.

Open in Studio

Cards

One card per step with icon and duration, joined by small arrows.

Open in Studio

Vertical timeline

Phases down a line, durations on the left, details in each card.

Open in Studio

Big numbers

Large numerals carry the order, details sit in a third column.

Open in Studio

With images

Each step next to its picture, alternating sides.

Open in Studio

Centered rail

A rail down the middle fills while you scroll and lights each step as it passes.

Open in Studio

Compact

All steps in one card, for checkout pages and tight spaces.

Open in Studio

Details

What Process brings along, read from the registry and the source.

Area
Content
Variants
7
Version
1.0.0 · since 1.0.0
File
components/ui/process.tsx
Brings along
utilskitbuttoniconsectionreveal
npm packages
None
Languages
English and German, 3 texts of its own
Studio
All 7 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The ProcessProps interface from components/ui/process.tsx, with the comments from the code.

  • variantoptional
    ProcessVariant

    horizontalcardsvertical-timelinebig-numberswith-imagescentered-railcompact

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • stepsrequired
    ProcessStep[]
  • actionoptional
    { label: string; href: string }

Built-in texts

Process writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 3 texts
stepEnglish Step {n}German Schritt {n}
ofEnglish ofGerman von
stepsEnglish StepsGerman Schritte

Accessibility

Read from the source of the component.

  • Adds text for screen readers where icons and graphics stand alone.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Moves with the scroll, its progress follows the position on the page.
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 6 places in the code switch motion off then.

Frequent questions

How do I install Process?

With aiw add @ai-website/process. The command puts components/ui/process.tsx into your project, the code is yours from then on. It brings along button, icon, section and reveal. It needs no further npm packages.

Which variants does Process have?

7 variants, Horizontal steps, Cards, Vertical timeline, Big numbers, With images, Centered rail and Compact. You pick one with the variant prop, for example variant="cards".

Can I translate the texts of Process?

Yes. Process carries 3 texts of its own in English and German, such as “of” and “Steps”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Process?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Process with aiw_components and install it with aiw_add @ai-website/process. Name the variant in your prompt, for example variant="horizontal", and the assistant writes your content straight into the props.

Can I adjust Process without code?

Yes, in the Studio. All 7 variants are editable there, texts, lists and switches. The Studio writes the matching Process code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Process on a page.

Often searched

Jump to

Copied to the clipboard