Perilla

Perilla metálica moleteada que se gira arrastrando.

Vista previa en vivo

Volumen64

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { MetalKnob } 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.

Prop	Tipo	Por defecto	Descripción
value	number	64	Valor actual (modo controlado).
defaultValue	number	64	Valor inicial cuando no se controla desde fuera.
onChange	(value: number) => void	undefined	Se llama cada vez que cambia el valor.
min	number	0	Valor mínimo.
max	number	100	Valor máximo.
step	number	1	Salto entre valores.
label	string	"Volumen"	Rótulo bajo la perilla.
unit	string	""	Unidad que se muestra junto al valor.
size	number	140	Diámetro de la perilla, en px.
ticks	number	11	Marcas grandes de la escala.
accent	string	"#ffb13b"	Color de las marcas encendidas.
disabled	boolean	false	Deshabilita la perilla.

Pestañas gelatina
Gratis
Pestañ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
Gratis
Pestañ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
Tooltip con resorte
Gratis
Tooltip (role tooltip) que sigue al cursor con un resorte y cuelga de él como una etiqueta: se inclina con la velocidad y se estira un poco al moverse. También aparece con el foco del teclado.
Navegación