SpringCheck

Checkbox con muelle que marca, tacha y atenúa la tarea.

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/SpringCheck-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"Ship the build"
checkedbooleanundefined
defaultCheckedbooleanfalse
onChange(checked: boolean) => void-
disabledbooleanfalse
colorstring"#ffffff"
fillColorstring"#ffffff"
checkColorstring"#0b0b0f"
boxSizenumber28
boxRadiusnumber9
fontSizenumber18
bouncenumber0.2
strikeLagnumber0.12
doneOpacitynumber0.42
strike"left" | "center" | "right" | "none""left"
ariaLabelstring-
classNamestring""

Otros efectos de microinteracciones

  • ThoughtLine — Cabecera de razonamiento de IA con pasos y temporizador.
  • AnimatedCircularProgressBar — Indicador circular de progreso animado.
  • CometDial — Dial que se lanza con un gesto y deja una estela de cometa.
  • GlideSelect — Selector cuyo menú sale de su esquina con un resaltado que se desliza.
  • LiveButton — Botón con indicador “en directo”.
  • PulseHeart — Botón de “me gusta” que late y cambia el contador.