Tooltip con resorte
GratisTooltip (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
Navegación
Gratis
Píldora de pestañas
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.
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 11 (6 ajustables)
Instalación
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| tabs | (string | { value, label, badge? })[] | "Resumen, Actividad, Equipo, Ajustes" | Pestañas: textos o { value, label, badge }. |
| value | string | "" | Pestaña activa (modo controlado). |
| defaultValue | string | "" | Pestaña inicial (modo libre). |
| onChange | (value: string) => void | "" | Se llama al elegir otra pestaña. |
| panels | Record<string, ReactNode> | "" | Contenido de cada panel, por valor de pestaña (opcional). |
| label | string | "Secciones" | Etiqueta accesible de la lista de pestañas. |
| stiffness | number | 380 | Rigidez del resorte de la píldora: más alto es más seco. |
| damping | number | 0.6 | Rebote de la píldora: 0.4 se pasa y regresa, 1 llega sin rebotar. |
| color | string | "#F3F4F7" | Color de la píldora. |
| activeTextColor | string | "#0B0C0F" | Color del texto sobre la píldora. |
| autoplay | number | 0 | Segundos entre cambios automáticos (0 = apagado; se detiene al interactuar). |
Sigue explorando
Día y noche
ProInterruptor de tema (role switch) donde el sol se transforma en luna, las nubes se hunden y salen las estrellas, todo con resortes.
Navegación
Diálogo ⌘K accesible con búsqueda difusa, resaltado de coincidencias, grupos y una selección de resorte que se desliza entre filas. Flechas, Enter y Escape.
Navegación