Bouncy accordion

Por qué entró

Le da vida a una lista que si no queda estática y aburrida: cada ítem se abre con rebote

Sirve para

• el programa de la ficha de un curso, módulo por módulo
• preguntas frecuentes

No sirve para

• Contenido que hay que ver todo junto (comparar módulos): ahí va una lista abierta
• Más de 8 o 10 filas: el rebote cansa

Origen: beui.dev, porteado a nuestro stack y traducido. La licencia del sitio no está declarada: se usa en nuestras apps, no se publica.

Cómo se usa

import { BouncyAccordion } from '@/components/ui/bouncy-accordion/BouncyAccordion'

<BouncyAccordion
  defaultValue="m1"
  items={[
    { id: 'm1', icon: <span>01</span>, title: 'Power Query', description: 'Lenguaje M, transformaciones, fechas.' },
    { id: 'm2', icon: <span>02</span>, title: 'Modelado', description: 'DAX, medidas, indicadores.' },
  ]}
/>

• items: { id, title, description?, icon?, disabled? }. icon es lo que va antes del título: un ícono o un número.
• defaultValue / value + onValueChange: el id abierto (o null).
• collapsible (por defecto true): con false siempre queda una abierta.
• classNames: clases por parte (item, trigger, title, description…).
• Accesible: cada fila es un button con aria-expanded; el contenido cerrado queda inert. Con prefers-reduced-motion abre y cierra sin animar.

Qué toma de tu app

El fondo de las filas es --ui-surface; el texto, --ui-ink, --ui-ink-soft y --ui-ink-muted; las fuentes, --ui-font-text. Las duraciones salen de --ui-dur. El radio (24 px) y la separación (12 px) son fijos: son parte del gesto. Necesita motion y lucide-react.