Navigation
Step States
Шаги с полным набором состояний: готово, ошибка, пропущен, текущий и будущий. У каждого свой знак и своя подпись словом, а не только цвет.
- stepper
- states
- error
- accessibility
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/stepper-004
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «stepper-004» (Step States) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/stepper-004.json
Registry item: https://vibeui.ru/r/stepper-004.json
Ставится в: components/vibeui/stepper-004.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Шаги с полным набором состояний: готово, ошибка, пропущен, текущий и будущий. У каждого свой знак и своя подпись словом, а не только цвет.
Шаги с состояниями готово, ошибка, пропущен и текущий: знак, форма и слово, а не только цвет. Ноль зависимостей, один файл, клиентского JS нет.
## 3. Как использовать
import { Stepper004 } from "@/components/vibeui/stepper-004"
<Stepper004
label="Настройка магазина"
accent="#4f46e5"
/>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-stepper-004-* и не подменять её токенами вашей темы
- подпись состояния словом под заголовком: цвет и значок не различимы при дальтонизме
- пунктирную рамку у пропущенного шага: форма дублирует цвет там, где цвет не читается
- aria-current="step" на текущем шаге: без него порядок теряется в озвучке
- aria-hidden на знаках ✓, ! и ↷: сами по себе они звучат как случайные символы
- собственную светлую подложку: на тёмной карточке каталога тёмный текст пропадает
## 6. Можно менять
- шаги и их состояния через steps
- доступное имя ленты через label
- основной цвет через accent
- слова состояний — правкой таблиц MARKS и WORDS
## 7. Правила
- Состояние задаётся явно: компонент не вычисляет его из номера и не проверяет, что текущий шаг один.
- Шаг с ошибкой не блокирует следующие — это решает форма, а не индикатор.
- Пять шагов на телефоне уже тесно: ниже 30rem подсказки прячутся, остаются заголовки.
- Не выносите CSS-переменные в globals.css: компонент обязан остаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/stepper-004.jsonhttps://vibeui.ru/r/stepper-004.jsonКомпонент самодостаточен: один файл, без зависимостей, палитра в переменных --vibeui-stepper-004-*. Серверный: хуков нет. Состояние приходит данными, а не выводится из номера: пропущенный шаг может стоять между пройденными. Цвет пункта задаётся одной переменной --vibeui-stepper-004-tone, от неё красятся кружок, рамка и подпись — новое состояние добавляется одной строкой CSS плюс знаком в MARKS и словом в WORDS. Соединитель берёт цвет левого соседа через инлайновую переменную, поэтому разрыв виден ровно на месте ошибки. Пропущенный шаг дополнительно помечен пунктирной рамкой: форма работает там, где не работает цвет.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Stepper004State = "done" | "error" | "skipped" | "current" | "todo"
export type Stepper004Step = {
title: string
state: Stepper004State
hint?: string
}
export type Stepper004Props = Omit<
ComponentPropsWithoutRef<"nav">,
"children"
> & {
steps?: Stepper004Step[]
label?: string
accent?: string
}
// Идея компонента: состояние шага задаётся не только цветом. У каждого свой
// знак (✓, !, ↷) и своя подпись словом под заголовком, поэтому «ошибка» и
// «пропущен» различимы при дальтонизме и в чёрно-белой печати. Соединитель
// красится по состоянию левого соседа, поэтому разрыв виден на месте ошибки.
const STYLES = `
:where([data-vibeui-block="stepper-004"]){
--vibeui-stepper-004-bg:oklch(1 0 0);
--vibeui-stepper-004-fg:oklch(0.24 0.016 265);
--vibeui-stepper-004-muted:oklch(0.56 0.014 265);
--vibeui-stepper-004-border:oklch(0.92 0.006 265);
--vibeui-stepper-004-line:oklch(0.9 0.006 265);
--vibeui-stepper-004-accent:oklch(0.55 0.2 262);
--vibeui-stepper-004-done:oklch(0.55 0.14 155);
--vibeui-stepper-004-error:oklch(0.55 0.19 27);
--vibeui-stepper-004-skip:oklch(0.65 0.03 265);
--vibeui-stepper-004-on:oklch(1 0 0);
--vibeui-stepper-004-size:2rem;
--vibeui-stepper-004-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="stepper-004"]{
container-type:inline-size;width:100%;box-sizing:border-box;
font-family:var(--vibeui-stepper-004-font);color:var(--vibeui-stepper-004-fg);
}
[data-vibeui-block="stepper-004"] [data-part="shell"]{
background:var(--vibeui-stepper-004-bg);
border:1px solid var(--vibeui-stepper-004-border);
border-radius:1rem;padding:1.125rem 1rem 1rem;
}
[data-vibeui-block="stepper-004"] ol{
display:flex;margin:0;padding:0;list-style:none;gap:0;
}
[data-vibeui-block="stepper-004"] li{
position:relative;flex:1 1 0;min-width:0;
display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.375rem;
--vibeui-stepper-004-tone:var(--vibeui-stepper-004-line);
}
[data-vibeui-block="stepper-004"] li[data-state="done"]{--vibeui-stepper-004-tone:var(--vibeui-stepper-004-done)}
[data-vibeui-block="stepper-004"] li[data-state="error"]{--vibeui-stepper-004-tone:var(--vibeui-stepper-004-error)}
[data-vibeui-block="stepper-004"] li[data-state="skipped"]{--vibeui-stepper-004-tone:var(--vibeui-stepper-004-skip)}
[data-vibeui-block="stepper-004"] li[data-state="current"]{--vibeui-stepper-004-tone:var(--vibeui-stepper-004-accent)}
/* Соединитель берёт цвет левого соседа: разрыв видно на месте ошибки. */
[data-vibeui-block="stepper-004"] li:not(:first-child)::before{
content:"";position:absolute;top:calc(var(--vibeui-stepper-004-size) / 2 - 1px);
right:50%;left:-50%;height:2px;background:var(--vibeui-stepper-004-line);
}
[data-vibeui-block="stepper-004"] li[data-linked="true"]::before{
background:var(--vibeui-stepper-004-link);
}
[data-vibeui-block="stepper-004"] [data-part="mark"]{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;
width:var(--vibeui-stepper-004-size);height:var(--vibeui-stepper-004-size);
border-radius:9999px;border:2px solid var(--vibeui-stepper-004-tone);
background:var(--vibeui-stepper-004-bg);color:var(--vibeui-stepper-004-tone);
font-size:0.8125rem;font-weight:700;line-height:1;
}
[data-vibeui-block="stepper-004"] li[data-state="done"] [data-part="mark"],
[data-vibeui-block="stepper-004"] li[data-state="error"] [data-part="mark"]{
background:var(--vibeui-stepper-004-tone);color:var(--vibeui-stepper-004-on);
}
[data-vibeui-block="stepper-004"] li[data-state="skipped"] [data-part="mark"]{
border-style:dashed;
}
[data-vibeui-block="stepper-004"] li[data-state="current"] [data-part="mark"]{
box-shadow:0 0 0 3px color-mix(in oklab,var(--vibeui-stepper-004-accent) 18%,transparent);
}
[data-vibeui-block="stepper-004"] [data-part="title"]{
font-size:0.8125rem;font-weight:600;line-height:1.25;
}
[data-vibeui-block="stepper-004"] li[data-state="todo"] [data-part="title"],
[data-vibeui-block="stepper-004"] li[data-state="skipped"] [data-part="title"]{
font-weight:500;color:var(--vibeui-stepper-004-muted);
}
[data-vibeui-block="stepper-004"] [data-part="state"]{
font-size:0.6875rem;font-weight:650;line-height:1.2;color:var(--vibeui-stepper-004-tone);
}
[data-vibeui-block="stepper-004"] li[data-state="todo"] [data-part="state"]{color:var(--vibeui-stepper-004-muted)}
[data-vibeui-block="stepper-004"] [data-part="hint"]{
font-size:0.6875rem;line-height:1.3;color:var(--vibeui-stepper-004-muted);
}
@container (max-width: 30rem){
[data-vibeui-block="stepper-004"] [data-part="shell"] [data-part="hint"]{display:none}
[data-vibeui-block="stepper-004"] [data-part="shell"] [data-part="title"]{font-size:0.6875rem}
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="stepper-004"] *{animation:none!important;transition:none!important}}
`
const MARKS: Record<Stepper004State, string> = {
done: "✓",
error: "!",
skipped: "↷",
current: "•",
todo: "•",
}
const WORDS: Record<Stepper004State, string> = {
done: "Готово",
error: "Ошибка",
skipped: "Пропущен",
current: "Сейчас",
todo: "Впереди",
}
const DEFAULT_STEPS: Stepper004Step[] = [
{ title: "Аккаунт", state: "done", hint: "почта подтверждена" },
{ title: "Реквизиты", state: "error", hint: "не сходится ИНН" },
{ title: "Логотип", state: "skipped", hint: "можно добавить позже" },
{ title: "Оплата", state: "current", hint: "выберите способ" },
{ title: "Запуск", state: "todo" },
]
/**
* Шаги с разными состояниями: готово, ошибка, пропущен — знаком и словом.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Stepper004({
steps = DEFAULT_STEPS,
label = "Настройка магазина",
accent,
className,
style,
...props
}: Stepper004Props) {
const palette = {
...(accent ? { "--vibeui-stepper-004-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-stepper-004" precedence="medium">
{STYLES}
</style>
<nav
{...props}
data-vibeui-block="stepper-004"
aria-label={label}
className={className}
style={palette}
>
<div data-part="shell">
<ol>
{steps.map((step, index) => {
const previous = steps[index - 1]
const linked =
previous?.state === "done" || previous?.state === "skipped"
return (
<li
key={step.title}
data-state={step.state}
data-linked={linked ? "true" : undefined}
style={
{
"--vibeui-stepper-004-link":
previous?.state === "done"
? "var(--vibeui-stepper-004-done)"
: "var(--vibeui-stepper-004-skip)",
} as CSSProperties
}
aria-current={step.state === "current" ? "step" : undefined}
>
<span data-part="mark" aria-hidden="true">
{MARKS[step.state]}
</span>
<span data-part="title">{step.title}</span>
<span data-part="state">{WORDS[step.state]}</span>
{step.hint ? <span data-part="hint">{step.hint}</span> : null}
</li>
)
})}
</ol>
</div>
</nav>
</>
)
}