React Bits: animaciones y componentes React listos para tu web, gratis
React Bits es una colección open source de más de 165 componentes React animados —efectos de texto, fondos, elementos de interfaz— para copiar y pegar en tu proyecto. Es gratis y sin límite, con cuatro variantes por componente (JS/TS, CSS/Tailwind). Hay una versión Pro paga con bloques y plantillas.
Probado por Pispeo · Actualizado el
- Qué es
- Sitio web
- Plan
- Freemium
- Límite del plan gratis
- La librería principal es open source y gratis para siempre: 165+ componentes, sin límite de uso, sin cuenta. React Bits Pro es un pago único (no suscripción) que agrega cientos de bloques de página, bloques de UI, plantillas y un kit para agentes de IA.
- ¿Es segura?
- Sí — Es código abierto: copiás el componente a tu proyecto o lo instalás por CLI. No corre nada en un servidor de terceros.
- Precio
- React Bits Pro: pago único con updates de por vida (monto a confirmar en la web)
- Qué ofrece
- 165+ componentes: animaciones de texto, fondos, elementos de UI
- 4 variantes por componente: JS-CSS, JS-Tailwind, TS-CSS, TS-Tailwind
- Instalación por copiar y pegar o por CLI (shadcn, jsrepo)
- Compatibilidad con GSAP y Framer Motion; pocas dependencias
- Marca de agua
- No
Gracias por votar.
¿Recomendás React Bits?
Qué es y para qué sirve
React Bits es una colección open source de componentes React ya animados: efectos de texto (que se escriben solos, que se distorsionan, que aparecen letra por letra), fondos animados, y elementos de interfaz con movimiento. Son más de 165, crece cada semana, y cada uno viene en cuatro variantes: JavaScript o TypeScript, con CSS o con Tailwind.
En vez de programar y animar cada efecto a mano, entrás a la página del componente, copiás el código (o lo instalás por CLI) y lo pegás en tu proyecto.
¿Es gratis? Los límites del plan free
La librería principal es gratis para siempre y open source: sin límite de uso, sin cuenta. La única parte paga es React Bits Pro, que es un pago único (no una suscripción) con updates de por vida, y agrega cientos de bloques de página, bloques de UI de app, plantillas y un kit para agentes de IA.
Cómo se usa
- Entrás a reactbits.dev y buscás el componente (texto, fondo, UI).
- Elegís tu variante (JS/TS, CSS/Tailwind).
- Copiás el código a tu proyecto o lo instalás por CLI.
- Ajustás las props (colores, velocidad, tamaño).
Lo bueno y lo malo
Lo bueno (verificado): open source y gratis, muchísimos efectos, cuatro variantes por componente, y el código queda en tu proyecto (no dependés de un servicio).
Lo malo: es solo para React, y algunas animaciones vistosas pueden pesar en móviles si no se cuidan.
¿Para quién no es?
Si no usás React, no aplica. Y para un sistema de diseño completo conviene sumar una librería de componentes “seria” (shadcn/ui, Material UI) además de estos efectos.
Alternativas
Están Aceternity UI y Magic UI (misma idea, foco en animación), shadcn/ui (base de componentes) y, si aparece la review, OriginKit. Mirá el resto de librerías de componentes UI que probamos.
Preguntas frecuentes
¿React Bits es gratis?
La librería principal es open source y gratis para siempre: más de 165 componentes, sin límite de uso ni cuenta. Solo la versión Pro (bloques de página, plantillas, kit para agentes de IA) se paga, y es un pago único, no una suscripción.
¿Cómo se usa un componente de React Bits?
Cada componente tiene su página con el código listo para copiar y pegar en tu proyecto React, en la variante que uses (JavaScript o TypeScript, CSS o Tailwind). También se puede instalar por CLI con shadcn o jsrepo.
¿Necesito otras librerías para que funcionen?
Están pensados con pocas dependencias. Algunos usan herramientas de animación como GSAP o Framer Motion; cada página del componente aclara qué necesita.
¿Sirve para producción o es solo para prototipos?
Sirve para producción: el código queda en tu proyecto y lo ajustás como cualquier componente propio. Conviene revisar el peso de las animaciones más pesadas en móviles.
