Stepper

Guía visual de progreso por pasos. Soporta orientación horizontal y vertical, variante compacta 'dots' para mobile, pasos opcionales, error por paso, clic para navegar entre pasos ya visitados, y cualquier icono personalizado en el indicador.

  1. InformaciónDatos básicos
  2. 2AssetsPortada y galería
  3. 3Publicar · opcional

Instalación#

bash
pnpm add @tsukira/ui

Uso#

tsx
import { Stepper } from "@tsukira/ui"; const steps = [  { id: "datos", title: "Datos personales" },  { id: "pago", title: "Método de pago" },  { id: "confirmar", title: "Confirmación", optional: true },]; <Stepper steps={steps} current={1} />

Ejemplos#

Estados de paso

done · active · pending · error
  1. CuentaDatos de acceso
  2. PerfilInformación pública
  3. EquipoColaboradoresAñade al menos un miembro
  4. 4Listo · opcional

Variante dots (mobile)

variant='dots' — oculta labels, ideal para pantallas pequeñas
  1. Paso 1
  2. 2Paso 2
  3. 3Paso 3
  4. 4Paso 4

Orientación vertical

orientation='vertical' — útil en sidebars y wizards laterales
  1. Datos del juegoNombre, género y descripción
  2. 2Archivos multimediaPortada y capturas
  3. 3Precio y distribuciónRegión y modelo de monetización

Fusión: wizard de checkout con navegación

Stepper controlado con useState + Buttons Anterior/Siguiente

Fusión: wizard con campos por paso

Stepper + FormField e Input del paso activo

API#

StepperPropsextends HTMLAttributes<HTMLOListElement>
PropTipoDefaultDescripción
steps*StepDef[]—Pasos.
current*number—Índice (0-based) del paso activo.
orientation'horizontal' | 'vertical'—Orientación.
size'sm' | 'md' | 'lg'—Tamaño.
variant'full' | 'dots'—Variante visual. `'dots'` esconde labels — pensada para mobile.
onStepClick((index: number) => void)—Clic en paso (si se pasa).