Animate UI es una distribución de componentes React construidos con Tailwind CSS y Motion, basada en el registro de shadcn e inspirada en shadcn/ui y Magic UI. Su objetivo es simple pero ambicioso: ayudar a cualquier desarrollador a agregar animaciones elegantes y accesibles a su interfaz, sin sacrificar rendimiento ni convertir el código en un laberinto de dependencias imposibles de mantener.
No es una librería, es una distribución abierta
Al igual que shadcn/ui, Animate UI no es una librería típica que se
instala desde NPM y se convierte en una caja negra dentro de tu node_modules.
Es una colección abierta que puedes copiar, modificar y personalizar directamente en tu código.
Este enfoque “copy-first” te da máxima flexibilidad: no hay wrappers que pelear, no hay configuraciones mágicas que descifrar, no hay versiones que rompen tu build cuando actualizas. El código es tuyo desde el momento en que lo copias. Si necesitas cambiar algo, abres el archivo y lo cambias, sin PRs ni esperar releases.
¿Qué incluye?
- —Primitivos animados: Bloques de construcción con animación integrada. Creados originalmente para Animate UI o portados cuidadosamente de librerías populares como Radix UI, Base UI y Headless UI. Piensa en ellos como LEGOs que ya vienen con movimiento, solo tienes que ensamblarlos.
- —Componentes: Piezas esenciales de UI (botones, modales, dropdowns, tooltips) con estilos base inspirados en shadcn/ui, diseñados para integrarse fácilmente en cualquier interfaz sin chocar con tu sistema de diseño existente.
- —Iconos animados: Iconos de Lucide con transiciones suaves. Ese pequeño detalle que hace que tu UI se sienta viva sin requerir horas de trabajo de animación.
¿Por qué Animate UI?
En un ecosistema donde parece que cada semana nace una nueva librería de componentes, ¿por qué considerar Animate UI? Aquí están las razones que lo hacen diferente:
- Open source y copy-first: Acceso directo al código fuente para adaptar componentes a tu sistema de diseño. Sin abstracciones innecesarias, sin vendor lock-in.
- Animación primero, potenciado por Motion: Patrones de movimiento consistentes y componibles. No son animaciones decorativas, son transiciones que guían la atención del usuario y hacen la interfaz más intuitiva.
- Rendimiento y accesibilidad: Valores por defecto sensatos que respetan
prefers-reduced-motiony mantienen tu sitio rápido. Las animaciones bonitas no sirven de nada si el Lighthouse score se desploma. - Agnóstico de estilos: Los estilos base son mínimos y fáciles de personalizar. No te impone una estética, te da un punto de partida sólido sobre el cual construir.
- Soporte multi-primitivo: Porta componentes de múltiples librerías (Radix UI, Base UI, Headless UI) bajo una API consistente. Usa el primitivo que prefieras sin cambiar cómo escribes tu código.
¿Para quién es?
Si ya usas shadcn/ui y quieres agregar animaciones sin reescribir todo, Animate UI es tu siguiente paso natural. Si estás empezando un proyecto nuevo y quieres componentes que se sientan modernos desde el día uno, es una base excelente. Y si simplemente quieres entender cómo funcionan las animaciones en React con Motion, el código está ahí para que lo estudies.