Stepper

Asistente de pasos con transiciones animadas.

  • Código: RODD·CP·044
  • Familia: Componentes
  • Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/Stepper-TS-TW

Cuándo usarlo

Sustituyen a un componente estándar cuando la experiencia es parte del producto.

Props para personalizarlo

PropTipoPor defecto
childrenReactNode—
initialStepnumber1
onStepChange(step: number) => void() => {}
onFinalStepCompleted() => void() => {}
stepCircleContainerClassNamestring
stepContainerClassNamestring
contentClassNamestring
footerClassNamestring
backButtonPropsobject{}
nextButtonPropsobject{}
backButtonTextstring"Back"
nextButtonTextstring"Continue"
disableStepIndicatorsbooleanfalse
renderStepIndicator{}undefined

Otros efectos de componentes

  • AnimatedList — Lista con entrada escalonada y navegación con teclado.
  • CardNav — Barra de navegación que se expande en paneles de tarjetas.
  • Counter — Contador de rodillos animado con easing.
  • Dock — Dock estilo macOS con magnificación por proximidad.
  • ElementAlongSvgPath — Elementos que se mueven siguiendo un trazado SVG.
  • GlassSurface — Superficie de cristal estilo Apple con distorsión en tiempo real.