SlideCommit

Desliza para confirmar, con estados de carga, éxito y error.

Cómo instalarlo

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

Cuándo usarlo

Para acciones frecuentes: confirmar, marcar, valorar. El feedback convierte un clic en una sensación.

Props para personalizarlo

PropTipoPor defecto
labelReactNode"Slide to pay"
doneLabelReactNode"Paid"
errorLabelReactNode"Payment failed"
onConfirm() => void | Promise<unknown>-
onDone() => void-
onError(reason: unknown) => void-
trackColorstring"#262626"
handleColorstring"#f5f5f5"
successColorstring"#22c55e"
dangerColorstring"#e5484d"
widthnumber280
heightnumber56
radiusnumber28
speednumber50
returnBouncenumber0.38
landingDipnumber0.026
holdMsnumber1500
disabledbooleanfalse
iconReactNodeundefined
classNamestring""

Otros efectos de microinteracciones

  • SwipeRow — Fila que se desliza para revelar acciones.
  • WakeSlider — Slider de barras que deja una estela según la velocidad.
  • BranchedMenu — Menú desplegable con ramas curvas hacia cada opción.
  • FlipCard — Tarjeta de dos caras que gira en 3D con clic o arrastre.
  • InteractiveHoverButton — Botón cuya flecha y texto se transforman al pasar el ratón.
  • PeekRating — Valoración con estrellas que se levantan en ola al pasar.