Pestañas gelatina

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.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { GooeyTabs } 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
tabs	string[]	"[\"Inicio\", \"Proyectos\", \"Equipo\", \"Contacto\"]"	Etiquetas de las pestañas (o { value, label }).
value	string	""	Pestaña activa (modo controlado).
defaultValue	string	""	Pestaña activa al inicio (modo libre).
color	string	"#EEF1FF"	Color del líquido de la selección.
textColor	string	"#A8B0C6"	Color de las pestañas inactivas.
activeTextColor	string	"#0B0C12"	Color de la pestaña activa, sobre el líquido.
gooeyness	number	7	Qué tan pegajoso es el líquido (desenfoque del filtro).
autoplay	number	0	Segundos entre cambios automáticos (0 lo apaga); se detiene al tocar.
onChange	(value: string) => void	""	Se llama al cambiar de pestaña.

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
Día y noche
Pro
Interruptor de tema (role switch) donde el sol se transforma en luna, las nubes se hunden y salen las estrellas, todo con resortes.
Navegación