Rare UI: componentes animados gratis para React

Una carpeta que despliega sus tarjetas al pasar el ratón, un botón que pide confirmar antes de borrar y un indicador que muestra el avance de lectura. Rare UI, el proyecto de Swami Malode, reúne más de veinte componentes para React con pequeños detalles de movimiento. Su catálogo permite verlos antes de llevar el código a una web.

Movimiento en controles conocidos

La colección combina elementos de navegación, campos de entrada y efectos visuales. Folder Component abre una carpeta con profundidad y tarjetas superpuestas; Duration Picker sirve para elegir una duración, mientras que OTP Input recoge códigos de verificación. Hay también menús laterales y reacciones con emojis.

Entre los efectos visuales, Fluid Orb dibuja una esfera animada con WebGL. El registro de componentes detalla qué instala cada pieza y qué bibliotecas necesita. Conviene mirar esa lista: muchas animaciones usan Motion, pero las dependencias cambian según el componente.

El código queda en tu proyecto

Rare UI utiliza React, TypeScript y Tailwind CSS. La instalación se hace con la herramienta de línea de comandos de shadcn, que añade los archivos al proyecto. El repositorio oficial propone este ejemplo para Fluid Orb:

npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

A partir de ahí puedes abrir el archivo, cambiar sus colores o ajustar el comportamiento. Folder Component, por ejemplo, ofrece opciones de tamaño y color. No hace falta adoptar todo el catálogo para usar una pieza; esa forma de trabajar encaja con quien ya tiene un diseño y quiere añadir una interacción concreta.

Antes de integrar un componente, conviene comprobar su comportamiento con teclado, en móvil y con la preferencia de reducir animaciones.

Gratis, con atribución obligatoria

Los componentes se pueden utilizar y modificar en proyectos personales y comerciales. La licencia publicada combina MIT con Commons Clause y una condición de atribución: exige un enlace visible a Rare UI y conservar los avisos de crédito y copyright en el código copiado.

La licencia prohíbe vender, sublicenciar o redistribuir los propios componentes, incluidos los paquetes y las versiones para otros frameworks. Conviene tenerlo presente si trabajas en una plantilla o en un kit que vas a vender. Para explorar la colección, la carpeta o el botón de borrado muestran bien el tipo de detalle que ofrece Rare UI.