React Bits es una de esas bibliotecas que entran por los ojos. Abres el catálogo, mueves el ratón y en dos minutos ya quieres poner fondos animados, textos que aparecen por letras y cursores con partículas por toda la web. El peligro está justo ahí: confundir una demo bonita con una buena decisión de diseño.
La he revisado como la usaría en un proyecto real con Claude Code o Codex: mirando el código actual, la licencia, el sistema de instalación, el MCP y una pieza concreta. He elegido DotGrid, un fondo de puntos interactivo. La conclusión corta es que React Bits puede ahorrar mucho trabajo, siempre que el agente reciba límites claros y tú no conviertas la página en un parque de atracciones.
TL;DR: El resumen sin rodeos
- Qué es: una colección abierta de más de 200 componentes animados e interactivos para React.
- Qué aporta a un agente: componentes con el código a la vista, cuatro variantes habituales y un registro compatible con shadcn.
- Qué he probado: la build completa del repositorio y una integración aislada de DotGrid desde el código oficial actual.
- Resultado: ambas builds terminaron correctamente. DotGrid añade GSAP y genera un paquete JavaScript considerable para un solo fondo.
- MCP: React Bits se conecta mediante el MCP de shadcn y su registro
@react-bits. No mantiene un servidor MCP independiente. - Límite principal: el componente probado escucha ratón y clic, pero no incluye una respuesta propia a
prefers-reduced-motionni una interacción táctil equivalente al movimiento del ratón. - Licencia: MIT con Commons Clause. Puedes usar los componentes dentro de un producto, pero no venderlos o redistribuirlos como biblioteca.
- Valoración: pendiente de Dani. La ficha debe mostrar
--/100hasta que exista una nota aprobada.
En este artículo
- En cristiano: qué hace React Bits
- Qué incluye y por qué encaja con agentes de código
- Prueba real: DotGrid desde el código actual
- React Bits en vídeo
- MCP de React Bits: qué hace y cómo se conecta
- Lo que me gusta
- Lo que vigilaría antes de publicarlo
- Precio y licencia
- Qué dice la gente que lo usa
- React Bits frente a otras opciones
- Veredicto
- Preguntas frecuentes sobre React Bits
- Fuentes y alcance de las pruebas
En cristiano: qué hace React Bits
React Bits te da piezas visuales ya construidas. No es un constructor de páginas ni una plantilla completa. Tú eliges un efecto, te llevas el código al proyecto y lo adaptas a tu diseño.
Esa diferencia le viene muy bien a un agente de código. Claude Code o Codex no tienen que imaginar cómo programar desde cero un fondo de puntos, una galería circular o una entrada de texto. Pueden partir de una implementación conocida y concentrarse en colocarla, ajustar colores, reducir movimiento y encajarla con tu sistema visual.
También evita una trampa habitual: instalar una dependencia opaca y confiar en ella para siempre. Aquí el componente acaba dentro de tu repositorio. Lo puedes leer, modificar y quitar. A cambio, el mantenimiento también pasa a ser tuyo.
Qué incluye y por qué encaja con agentes de código
El repositorio oficial agrupa los componentes en animaciones de texto, fondos, cursores, animaciones generales y componentes. La cifra cambia con el catálogo, así que prefiero quedarme con el dato estable: hoy supera las 200 piezas.
Cada componente suele ofrecer combinaciones de JavaScript o TypeScript con CSS o Tailwind. Esto importa más de lo que parece. Un agente puede escoger una variante cercana al proyecto en lugar de traducirla a ciegas y dejar media integración a medias.
React Bits admite instalación con shadcn y jsrepo. En shadcn, por ejemplo, el patrón oficial es este:
npx shadcn@latest add @react-bits/BlurText-TS-TW
No usaría ese comando sin más. Antes le diría al agente qué componente quiero, en qué sección va, qué dependencia añade y qué comportamiento debe conservar cuando el usuario reduce las animaciones.
Prueba real: DotGrid desde el código actual
Para esta review descargué el repositorio oficial en su revisión actual del 19 de septiembre de 2026. La build completa generó el registro con 816 archivos, el sitemap con 217 URL y compiló 12.649 módulos. Terminó correctamente, aunque Vite avisó de fragmentos grandes.
Después saqué DotGrid del catálogo y lo monté en una aplicación React mínima. La build aislada también terminó correctamente. El componente ocupa unas 8 KB de fuente sin minificar, pero depende de GSAP e InertiaPlugin. En esa prueba mínima, el JavaScript final quedó en unos 304 KB sin comprimir y 101 KB con gzip. No todo ese peso pertenece a DotGrid, porque también están React y el pequeño armazón de la prueba, pero sirve para desmontar una idea: un fondo llamativo no sale gratis.
DotGrid dibuja el patrón en un canvas, sigue el movimiento del ratón y responde al clic. El efecto funciona y es fácil de personalizar. En una cabecera corta puede aportar profundidad sin robar protagonismo al texto.
El código actual no consulta prefers-reduced-motion. Tampoco usa eventos de puntero o táctiles para reproducir en móvil la interacción basada en mousemove. Un toque puede acabar generando un clic, pero la experiencia no equivale a mover un cursor. Si lo añades a producción, el agente debe preparar una versión estática o desactivada para movimiento reducido y revisar el comportamiento en una pantalla táctil real.
React Bits en vídeo
El vídeo de Code Like Dev sirve como recorrido visual rápido por varios efectos, entre ellos Strands, Cubes, Galaxy, Circular Gallery, Border Glow y Lightfall. Dura 14 segundos. Es útil para entender el tipo de catálogo, pero no es una prueba del MCP ni de la calidad técnica de cada componente.
MCP de React Bits: qué hace y cómo se conecta
React Bits no tiene un servidor MCP propio separado. Su documentación propone usar el MCP de shadcn y registrar el catálogo de React Bits. Esta precisión importa porque decir “instala el MCP de React Bits” puede hacer pensar que existe otro servicio o proceso.
Primero se añade el registro a components.json:
{
"registries": {
"@react-bits": "https://reactbits.dev/r/{name}.json"
}
}
Para Claude Code, el comando oficial de inicialización es:
npx shadcn@latest mcp init --client claude
Después hay que reiniciar Claude Code. El comando /mcp permite comprobar si la conexión aparece activa. A partir de ahí se le puede pedir al agente que liste fondos disponibles en el registro o que añada un componente concreto.
Con Codex usaría la misma idea: conectar un servidor MCP compatible con shadcn y conservar el registro en components.json. La parte verdaderamente útil no es que el agente conozca un nombre comercial. Es que pueda consultar el registro y traer la variante correcta al repositorio.
Orden que le daría al agente
Consulta el registro oficial de React Bits mediante shadcn y localiza DotGrid en TypeScript con Tailwind. Antes de instalarlo, dime qué archivos y dependencias añadirá. Intégralo solo en la cabecera, mantén intactos el texto y la llamada a la acción, y crea una alternativa estática para prefers-reduced-motion. Comprueba desbordamiento horizontal, contraste, interacción táctil y coste de renderizado. Al terminar, enumera los archivos modificados y las pruebas realizadas.
Lo que me gusta
La primera ventaja es la velocidad. Un efecto que exigiría varias iteraciones aparece ya resuelto y parametrizado. Para prototipos y páginas con una dirección visual clara, eso puede recortar bastante trabajo.
La segunda es que ves el código. No dependes de una caja cerrada ni de una suscripción para que el fondo siga funcionando. El agente puede explicarte la implementación y adaptarla.
La tercera es la variedad de formatos. JavaScript, TypeScript, CSS y Tailwind cubren una parte amplia de los proyectos React actuales. El registro de shadcn añade una ruta razonable para trabajar desde Claude Code.
Lo que vigilaría antes de publicarlo
Movimiento. Un efecto puede ser agradable durante cinco segundos y cansar durante una lectura completa. La alternativa para movimiento reducido debe formar parte de la integración.
Peso. Algunos componentes añaden GSAP, Three.js u otras dependencias. El agente debe revisar el paquete concreto, no asumir que toda la biblioteca pesa lo mismo.
Dependencias del repositorio. npm audit informó de 28 avisos al instalar el proyecto completo. No los atribuyo a DotGrid: esa cifra mezcla la web de documentación, herramientas de build y dependencias que no viajan necesariamente con el componente. Si clonas el proyecto entero, toca revisar el árbol real que vas a desplegar.
Móvil. Un componente diseñado alrededor del cursor pierde parte de su interacción en táctil. Hay que decidir si conserva valor como fondo estático.
Accesibilidad. Un resultado visualmente atractivo no garantiza contraste, foco, lectura con teclado o ausencia de mareo. React Bits aporta la pieza, no la validación de la página completa.
Mantenimiento. Copiar el componente te da control y también responsabilidad. Las mejoras posteriores del repositorio no llegan solas a tu versión.
Precio y licencia
El repositorio y sus componentes se pueden usar gratuitamente. La licencia combina MIT con Commons Clause. Permite incorporar el código a una web, una aplicación o un producto comercial. La restricción relevante es que no puedes vender, sublicenciar o redistribuir los componentes como producto por sí mismos, ni empaquetarlos para competir con la colección.
No sustituye una revisión legal si tu negocio consiste precisamente en vender componentes. Para una web propia o de cliente, el caso habitual encaja con el uso permitido que describe la licencia.
Qué dice la gente que lo usa
React Bits frente a otras opciones
Si buscas componentes de interfaz más sobrios y estructurales, shadcn/ui es una base más lógica. Si quieres bloques de marketing y patrones decorativos, Magic UI se acerca bastante. Si tu prioridad es explorar referencias antes de diseñar, Refero resuelve otro momento del proceso.
React Bits encaja cuando ya sabes qué sección quieres mejorar y necesitas movimiento con personalidad. No lo usaría como excusa para decidir toda la dirección visual desde el catálogo.
Puedes comparar el resto de opciones en el recopilatorio de bibliotecas de componentes UI para crear webs con IA.
Veredicto
React Bits es un buen acelerador para diseño con agentes. El código abierto, las variantes y el registro de shadcn hacen que Claude Code o Codex puedan trabajar con piezas concretas sin inventarlas desde cero.
Mi regla sería sencilla: un componente, una función y una prueba. Si DotGrid ayuda a separar la cabecera y mantiene legible la llamada a la acción, se queda. Si solo demuestra que sabemos mover puntos, fuera.
La nota queda en --/100 hasta que Dani la apruebe. La prueba actual confirma que DotGrid compila y funciona como base, pero también deja claro el trabajo que falta para una integración seria: movimiento reducido, táctil, coste de renderizado y revisión visual dentro de la página real.
Preguntas frecuentes sobre React Bits
¿React Bits es gratis?
Sí. El repositorio y los componentes se pueden usar gratis bajo MIT con Commons Clause. Puedes integrarlos en un producto, pero no revender la colección o los componentes como producto independiente.
¿React Bits funciona con Claude Code?
Sí. La documentación oficial propone configurar el registro @react-bits y usar el MCP de shadcn. También puedes pedirle a Claude Code que copie e integre el código manualmente.
¿React Bits tiene un MCP propio?
No como servidor separado. React Bits utiliza el MCP de shadcn y publica su catálogo como registro compatible.
¿Puedo usar React Bits con Codex?
Sí. Codex puede trabajar con el código del repositorio, con el registro de shadcn o con un servidor MCP compatible. Conviene pedirle que revise dependencias, movimiento reducido, móvil y rendimiento antes de cerrar la integración.
¿React Bits funciona en móvil?
Los componentes pueden renderizar en móvil, pero el comportamiento depende de cada pieza. DotGrid está planteado alrededor del movimiento del ratón y no ofrece una interacción táctil equivalente en el código revisado.
¿React Bits perjudica el rendimiento?
No necesariamente, pero los efectos no son gratis. DotGrid añade GSAP y dibuja en canvas. Otros componentes pueden usar dependencias diferentes. Hay que medir la pieza concreta dentro de la página real.
¿Qué componente debería probar primero?
Elige uno que resuelva una sección concreta. Un fondo como DotGrid puede servir para una cabecera. Una animación de texto puede ayudar a una entrada corta. Evita instalar varios efectos antes de comprobar si el primero mejora la página.
Fuentes y alcance de las pruebas
- Repositorio oficial de React Bits, código y README consultados el 19 de septiembre de 2026.
- Licencia oficial.
- Código actual de DotGrid y su vídeo oficial, incluidos en el repositorio.
- Build completa del repositorio y build aislada de DotGrid ejecutadas localmente el 19 de septiembre de 2026.
- Documentación de MCP de shadcn.
- Vídeo de Code Like Dev, usado como recorrido visual de terceros.
- Publicaciones originales de Reddit enlazadas en la sección social.
No he medido conversión, FPS en móviles físicos ni todos los componentes del catálogo. Las cifras de build describen las pruebas realizadas en este entorno y no sustituyen una medición dentro de tu proyecto.
