КомпонентыНовое
Пошаговая форма
Шаги с кружками, которые превращаются в галочки, и полоской прогресса. Содержимое шага выезжает в сторону движения: вперёд или назад.
Настройки
accentColor
secondaryColor
glowColor
Основано на Checked Stepper (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
11 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| steps | { label: string; content?: ReactNode }[] | — | Шаги: подпись и содержимое. |
| initialStep | number | 0 | С какого шага начать, счёт с нуля. |
| showProgress | boolean | true | Полоска, которая заполняется до текущего шага. |
| activeScale | number | 1.2 | Насколько увеличен кружок текущего шага. |
| prevLabel | string | "Previous" | Текст кнопки назад. |
| nextLabel | string | "Next" | Текст кнопки вперёд. |
| onStepChange | (step: number) => void | — | Вызывается с номером нового шага. |
| accentColor | string | "#ffffff" | Основной цвет: пройденные шаги, начало полосы и кнопка «Далее». |
| secondaryColor | string | "#a3a3a3" | Второй цвет: им заканчивается градиент полосы прогресса. |
| glowColor | string | "rgba(255, 255, 255, 0.35)" | Мягкое свечение вокруг текущего шага. |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 4
npm install motion lucide-react clsx tailwind-merge