Stepper

Indicador de progreso paso a paso — horizontal y vertical.

pnpm dlx nuvo-ui add stepper

Horizontal — interactivo

Cuenta
Datos básicos de acceso
2
Perfil
Información personal
3
Plan
Elige tu suscripción
4
Confirmar
Revisa y finaliza

Paso actual: 2 de 4

Vertical

Pedido realizado
Recibimos tu pedido.
En preparación
El paquete está siendo armado.
3
En camino
Tu pedido va hacia ti.
4
Entregado
Esperando confirmación.

Uso

import { Stepper } from "@nuvo-ui/ui"

// Con currentStep (automático)
<Stepper
  steps={[
    { title: "Cuenta",    description: "Datos de acceso" },
    { title: "Perfil",    description: "Info personal"   },
    { title: "Confirmar", description: "Finalizar"       },
  ]}
  currentStep={1} // 0-indexed
/>

// Con status manual
<Stepper
  orientation="vertical"
  steps={[
    { title: "Paso 1", status: "complete" },
    { title: "Paso 2", status: "active"   },
    { title: "Paso 3", status: "upcoming" },
  ]}
/>

Props

Prop	Tipo	Default	Descripción
steps	StepItem[]	—	Array de { title, description?, status? }
currentStep	number	—	Índice activo (0-indexed); calcula status automáticamente
orientation	"horizontal" \| "vertical"	"horizontal"	Dirección del stepper