VibeUI

Navigation

Process Stepper

A step indicator where completed steps are marked with a check, not colour alone. The line fills up to the current step, so progress reads without reading the labels.

  • stepper
  • progress
  • wizard
  • onboarding

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/stepper-001?lang=en

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "stepper-001" (Process Stepper) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/stepper-001.json

Registry item: https://vibeui.ru/r/stepper-001.json
Installs to: components/vibeui/stepper-001.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A step indicator where completed steps are marked with a check, not colour alone. The line fills up to the current step, so progress reads without reading the labels.

A process stepper: numbered circles, a check instead of the number on completed steps, labels and optional hints. The connecting line is filled up to the current step. Every state is derived from one number, so the steps cannot fall out of sync. Zero dependencies, one file, its own palette, no client JS.

## 3. How to use it
import { Stepper001 } from "@/components/vibeui/stepper-001"

<Stepper001
  current={2}
  steps={[
    { label: "Project", hint: "Name and address" },
    { label: "Design" },
    { label: "Publish" },
  ]}
/>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-stepper-001-* palette — do not swap it for your theme tokens (bg-primary, border-border and the like)
- the check on completed steps: colour must not be the only signal, or the state disappears for colour-blind readers and in print
- deriving every state from the single current number rather than per-step flags
- the connecting line as ::before reaching back to the previous circle's centre: a separate line element drifts when the row wraps
- aria-current="step" on the current step — it is how a screen reader locates the position in the process
- the @container query that hides the hints in a narrow column: otherwise the labels collide
- the <style> block inside the component — it holds the palette, the circles and the line

## 6. You may change
- the steps array: labels and the hints beneath them
- current — the index of the active step, counting from zero
- the accent through the accent prop — it colours completed circles and the line
- width and outer spacing through className

## 7. Rules
- This is an indicator, not navigation: the steps are not clickable. If people must go back, wrap the labels in links in your copy.
- Do not go past five steps: a long process is better split into stages, or the labels stop fitting.
- A final "Done" step is unnecessary: the last step is the completion.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/stepper-001.json
https://vibeui.ru/r/stepper-001.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-stepper-001-*. Состояние шага (done, current, todo) выводится из пропа current и попадает в data-атрибут, от которого зависят и кружок, и линия. Линия — ::before у каждого шага кроме первого, она тянется от центра предыдущего кружка. Текущий шаг помечен aria-current="step". В узкой колонке подсказки скрываются через @container, остаются кружки и подписи.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Stepper001Step = {
  label: string
  hint?: string
}

export type Stepper001Props = Omit<
  ComponentPropsWithoutRef<"nav">,
  "children"
> & {
  steps?: Stepper001Step[]
  /** Номер текущего шага, считая с нуля. Предыдущие показываются пройденными. */
  current?: number
  accent?: string
}

// Идея компонента: пройденные шаги отличаются от будущих не только цветом, но
// и знаком — галочкой вместо номера. Линия между шагами заполняется до
// текущего, поэтому прогресс виден одним взглядом, без чтения подписей.
const STYLES = `
:where([data-vibeui-block="stepper-001"]){
--vibeui-stepper-001-fg:oklch(0.24 0.016 265);
--vibeui-stepper-001-muted:oklch(0.56 0.014 265);
--vibeui-stepper-001-line:oklch(0.9 0.006 265);
--vibeui-stepper-001-accent:oklch(0.55 0.2 262);
--vibeui-stepper-001-accent-fg:oklch(1 0 0);
--vibeui-stepper-001-size:1.75rem;
--vibeui-stepper-001-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
container-type:inline-size;
}
[data-vibeui-block="stepper-001"]{
width:100%;box-sizing:border-box;
font-family:var(--vibeui-stepper-001-font);color:var(--vibeui-stepper-001-fg);
}
[data-vibeui-block="stepper-001"] ol{display:flex;margin:0;padding:0;list-style:none}
[data-vibeui-block="stepper-001"] li{
position:relative;display:flex;flex-direction:column;align-items:center;
flex:1 1 0;min-width:0;text-align:center;gap:0.375rem;
}
/* Линия идёт от центра предыдущего кружка к центру текущего. */
[data-vibeui-block="stepper-001"] li:not(:first-child)::before{
content:"";position:absolute;top:calc(var(--vibeui-stepper-001-size) / 2 - 1px);
right:50%;left:-50%;height:2px;background:var(--vibeui-stepper-001-line);
}
[data-vibeui-block="stepper-001"] li[data-state="done"]::before,
[data-vibeui-block="stepper-001"] li[data-state="current"]::before{background:var(--vibeui-stepper-001-accent)}
[data-vibeui-block="stepper-001"] [data-part="mark"]{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;
width:var(--vibeui-stepper-001-size);height:var(--vibeui-stepper-001-size);
border-radius:9999px;border:2px solid var(--vibeui-stepper-001-line);
background:oklch(1 0 0);color:var(--vibeui-stepper-001-muted);
font-size:0.75rem;font-weight:600;line-height:1;
}
[data-vibeui-block="stepper-001"] li[data-state="done"] [data-part="mark"],
[data-vibeui-block="stepper-001"] li[data-state="current"] [data-part="mark"]{
border-color:var(--vibeui-stepper-001-accent);
}
[data-vibeui-block="stepper-001"] li[data-state="done"] [data-part="mark"]{
background:var(--vibeui-stepper-001-accent);color:var(--vibeui-stepper-001-accent-fg);
}
[data-vibeui-block="stepper-001"] li[data-state="current"] [data-part="mark"]{color:var(--vibeui-stepper-001-accent)}
[data-vibeui-block="stepper-001"] [data-part="label"]{font-size:0.8125rem;font-weight:500;line-height:1.3}
[data-vibeui-block="stepper-001"] li[data-state="todo"] [data-part="label"]{color:var(--vibeui-stepper-001-muted);font-weight:400}
[data-vibeui-block="stepper-001"] [data-part="hint"]{font-size:0.75rem;line-height:1.3;color:var(--vibeui-stepper-001-muted)}
/* В узкой колонке подписи прячутся: остаются кружки и линия. */
@container (max-width: 26rem){
[data-vibeui-block="stepper-001"] [data-part="hint"]{display:none}
[data-vibeui-block="stepper-001"] [data-part="label"]{font-size:0.6875rem}
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="stepper-001"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_STEPS: Stepper001Step[] = [
  { label: "Проект", hint: "Название и адрес" },
  { label: "Дизайн", hint: "Блоки и тема" },
  { label: "Домен", hint: "Свой или наш" },
  { label: "Публикация" },
]

/**
 * Индикатор шагов: пройденные отмечены галочкой, линия заполнена до текущего.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Stepper001({
  steps = DEFAULT_STEPS,
  current = 2,
  accent,
  className,
  style,
  ...props
}: Stepper001Props) {
  const palette = {
    ...(accent ? { "--vibeui-stepper-001-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-stepper-001" precedence="medium">
        {STYLES}
      </style>
      <nav
        {...props}
        data-vibeui-block="stepper-001"
        aria-label="Шаги"
        className={className}
        style={palette}
      >
        <ol>
          {steps.map((step, index) => {
            const state =
              index < current ? "done" : index === current ? "current" : "todo"

            return (
              <li
                key={step.label}
                data-state={state}
                aria-current={state === "current" ? "step" : undefined}
              >
                <span data-part="mark" aria-hidden="true">
                  {state === "done" ? "✓" : index + 1}
                </span>
                <span data-part="label">{step.label}</span>
                {step.hint ? <span data-part="hint">{step.hint}</span> : null}
              </li>
            )
          })}
        </ol>
      </nav>
    </>
  )
}