Navegación
Gratis
Acordeón
Acordeón accesible (aria-expanded, regiones, flechas, Inicio y Fin) cuyas regiones se abren con un resorte real: la altura rebota al llegar y el contenido entra de lo borroso a lo nítido.
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 7 (3 ajustables)
Todos los componentes de la colección base, con su código completo en TypeScript. Lo copias, lo pegas y es tuyo.
Solo React. Nada de GSAP, Three ni librerías de animación: cada efecto vive en un archivo que puedes leer y cambiar.
Sí. Los componentes son seguros para renderizar en el servidor y arrancan sus efectos solo en el navegador.
Sí, sin atribución. El código que copias pasa a ser parte de tu proyecto.
Instalación
1. Instala el paquete
npm i furin2. Impórtalo
import { SpringAccordion } 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.
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| items | { id?, title, content }[] | "4 preguntas de ejemplo" | Ítems del acordeón. |
| type | "single" | "multiple" | "single" | "single" abre uno a la vez; "multiple" deja varios abiertos. |
| value | string[] | "" | Ítems abiertos (modo controlado). |
| defaultValue | string[] | "[primero]" | Ítems abiertos al inicio (modo libre). |
| onChange | (value: string[]) => void | "" | Se llama al abrir o cerrar. |
| stiffness | number | 260 | Rigidez del resorte: más alto abre más seco. |
| damping | number | 0.58 | Rebote del resorte: 0.4 rebota, 1 llega sin rebotar. |
Sigue explorando
Deslizador elástico
GratisDeslizador (role slider, teclado completo) que se estira como goma al arrastrarlo más allá de sus límites y regresa con rebote; la pista se aplasta para conservar el volumen.
Navegación