PeekRating

Valoración con estrellas que se levantan en ola al pasar.

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/PeekRating-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
valuenumberundefined
defaultValuenumber0
onChange(value: number) => void-
onPreview(value: number | null) => void-
countnumber5
shape"star" | "heart" | "bolt""star"
iconReactNodeundefined
labelsstring[][]
activeColorstring"#f5b400"
idleColorstring"#52525b"
tipColorstring"#27272a"
tipTextColorstring"#f5f5f5"
sizenumber28
liftnumber6
magnifynumber1.15
riseDurationnumber320
popScalenumber1.3
showTipbooleantrue
allowClearbooleantrue
readOnlybooleanfalse
disabledbooleanfalse
ariaLabelstring"Rating"
classNamestring""

Otros efectos de microinteracciones

  • RippleButton — Botón con onda al hacer clic.
  • Shredder — Lista con trituradora: arrastra una fila para destruirla.
  • SquishSwitch — Interruptor que se estira según la velocidad y se aplasta al llegar.
  • 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.