Repolode
Enviar
DavidHDev

DavidHDev/react-bits

Biblioteca de más de 215 componentes y fondos animados y personalizables para React y Next.js, instalables con shadcn o jsrepo.

Ver en GitHubSitio web
Estrellas
49,810
Forks
2,464
Issues abiertos
1
Último commit
anteayer

¿Qué es?

React Bits es una colección de componentes animados e interactivos para React y Next.js, pensada para crear interfaces web con una identidad visual distintiva. Incluye animaciones de texto, como texto dividido, máquinas de escribir y revelados al desplazarse; efectos del cursor, interacciones al pasar el puntero, tarjetas, carruseles, pequeñas microinteracciones de UI y fondos animados para secciones completas.

Cada componente tiene una demo interactiva con controles y está disponible en cuatro variantes: JavaScript o TypeScript, con estilos de CSS sin frameworks o Tailwind. Los componentes se agregan con shadcn CLI o jsrepo, o se puede copiar el código fuente manualmente. La configuración de un registro MCP de shadcn permite que agentes de programación con IA, como Claude Code y Cursor, encuentren y agreguen componentes.

El proyecto también incluye herramientas creativas gratuitas que funcionan en el navegador para generar código e imágenes de fondo, mockups de productos, formas de logotipos con materiales 3D, efectos de textura y sonidos para interfaces. Pro es un plan de pago que ofrece componentes, secciones de página, plantillas y habilidades para agentes adicionales.

Funciones clave

  • 01Más de 215 componentes y fondos animados, organizados en categorías de texto, interacción, tarjetas y fondos.
  • 02Cada componente está disponible en JavaScript o TypeScript, con estilos de CSS o Tailwind.
  • 03Instalación con shadcn CLI o jsrepo, o copia directa del código fuente.
  • 04Compatible con agentes de programación con IA mediante el registro MCP de shadcn.
  • 05Incluye herramientas gratuitas para el navegador para crear fondos, mockups de productos, logotipos, texturas y sonidos.

Casos de uso

  • Agregar animaciones de texto llamativas o revelados al desplazarse a un sitio de marketing o una landing page.
  • Crear secciones hero animadas y fondos para páginas completas en una aplicación de Next.js o React.
  • Permitir que un agente de programación con IA incorpore componentes listos para usar en un proyecto de Tailwind.
  • Crear capturas de productos, videos en bucle para fondos o efectos de sonido para lanzamientos y demos.

Inicio rápido

  1. 1

    Añade un componente con shadcn CLI

    npx shadcn@latest add @react-bits/SplitText-TS-TW
  2. 2

    O añádelo con jsrepo

    npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

Antes de usarlo

  • El nombre de la licencia incluye Commons Clause, que restringe la venta del software en sí. Lee LICENSE.md antes de usarlo con fines comerciales.
  • Los metadatos del repositorio no muestran ninguna licencia detectada. Consulta directamente LICENSE.md para comprobar las condiciones de la licencia.

Temas

#react#nextjs#component-library#animation#tailwind#ui-components#typescript#shadcn#3d#animations

Preguntas frecuentes

¿Qué es react-bits?
Biblioteca de más de 215 componentes y fondos animados y personalizables para React y Next.js, instalables con shadcn o jsrepo. React Bits es una colección de componentes animados e interactivos para React y Next.js, pensada para crear interfaces web con una identidad visual distintiva. Incluye animaciones de texto, como texto dividido, máquinas de escribir y revelados al desplazarse; efectos del cursor, interacciones al pasar el puntero, tarjetas, carruseles, pequeñas microinteracciones de UI y fondos animados para secciones completas.
¿react-bits es gratuito? ¿Qué licencia tiene?
react-bits es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-bits sigue mantenido?
Mantenimiento activo. El último commit de react-bits fue el 19 oct 2026.
¿Para qué puedo usar react-bits?
Agregar animaciones de texto llamativas o revelados al desplazarse a un sitio de marketing o una landing page. Crear secciones hero animadas y fondos para páginas completas en una aplicación de Next.js o React. Permitir que un agente de programación con IA incorpore componentes listos para usar en un proyecto de Tailwind. Crear capturas de productos, videos en bucle para fondos o efectos de sonido para lanzamientos y demos.
¿Cómo se instala react-bits?
Añade un componente con shadcn CLI: npx shadcn@latest add @react-bits/SplitText-TS-TW O añádelo con jsrepo: npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW
¿Dónde consigo react-bits?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/DavidHDev/react-bits

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados