Navegación
Gratis
Pasos
Pasos con una línea de progreso que se llena de un nodo al siguiente; el paso nuevo se enciende cuando el trazo llega y la palomita se dibuja al completarse.
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 10 (7 ajustables)
- CuentaTus datos (completado)
- EquipoInvita gente (paso actual)
- PlanElige uno (pendiente)
- ListoA trabajar (pendiente)
Instalación
1. Instala el paquete
npm i furin2. Impórtalo
import { Stepper } from "furin";También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| steps | (string | { label, description? })[] | "Cuenta, Equipo, Plan, Listo" | Pasos: textos o { label, description }. |
| current | number | "" | Paso actual, desde 0 (modo controlado). |
| defaultCurrent | number | 1 | Paso inicial (modo libre). |
| onChange | (index: number) => void | "" | Se llama al cambiar de paso. |
| orientation | "horizontal" | "vertical" | "horizontal" | Dirección de la lista de pasos. |
| clickable | boolean | true | Deja volver a un paso ya completado pulsándolo. |
| controls | boolean | true | Muestra los botones Atrás y Siguiente. |
| color | string | "#8EA2FF" | Color del progreso. |
| label | string | "Progreso" | Etiqueta accesible de la lista. |
| autoplay | number | 0 | Segundos entre avances automáticos (0 = apagado; se detiene al interactuar). |
Sigue explorando
Pestañas gelatina
GratisPestañas accesibles cuya selección es una gota de líquido: se estira hacia la pestaña nueva, se adelgaza en el cuello y se funde al llegar.
Navegación
Píldora de pestañas
GratisPestañas accesibles (tablist, flechas, Inicio y Fin) con una píldora que se desliza con resorte: el borde que avanza llega primero y la estira al cruzar.
Navegación