Repolode
Enviar
DavidHDev

DavidHDev/react-bits

Biblioteca com mais de 215 componentes e backgrounds gratuitos, animados e personalizáveis para React e Next.js, instaláveis via shadcn ou jsrepo.

Ver no GitHubSite
Estrelas
49,810
Forks
2,464
Issues abertas
1
Último commit
anteontem

O que é?

React Bits é uma coleção de componentes animados e interativos para React e Next.js, voltada à criação de interfaces web visualmente marcantes. Inclui animações de texto, como texto dividido, efeito de máquina de escrever e revelações durante a rolagem, além de efeitos de cursor, interações ao passar o mouse, cards, carrosséis, microinterações de UI e backgrounds animados para seções inteiras.

Cada componente tem uma demonstração interativa com controles e está disponível em quatro variantes: JavaScript ou TypeScript, com estilos em CSS puro ou Tailwind. Os componentes podem ser adicionados com o shadcn CLI ou o jsrepo, ou então o código-fonte pode ser copiado manualmente. Uma configuração de registro MCP do shadcn permite que agentes de programação com IA, como Claude Code e Cursor, encontrem e adicionem componentes.

O projeto também inclui ferramentas criativas gratuitas, que rodam no navegador, para gerar código e imagens de background, mockups de fotos de produtos, formas de logo com materiais 3D, efeitos de textura e sons de interface. Pro é um plano pago que oferece componentes, seções de página, templates e agent skills adicionais.

Recursos principais

  • 01Mais de 215 componentes e backgrounds animados, distribuídos entre categorias de texto, interação, cards e backgrounds.
  • 02Cada componente está disponível em JavaScript ou TypeScript, com estilos em CSS ou Tailwind.
  • 03Instale com o shadcn CLI ou o jsrepo, ou copie o código-fonte diretamente.
  • 04Compatível com agentes de programação com IA por meio do registro MCP do shadcn.
  • 05Inclui ferramentas gratuitas no navegador para backgrounds, mockups de produtos, logos, texturas e sons.

Casos de uso

  • Adicionar animações de texto chamativas ou revelações durante a rolagem a um site de marketing ou landing page.
  • Criar seções hero animadas e backgrounds para páginas inteiras em um app Next.js ou React.
  • Permitir que um agente de programação com IA adicione componentes prontos a um projeto com Tailwind.
  • Criar capturas de tela de produtos, vídeos em loop para backgrounds ou efeitos sonoros para lançamentos e demonstrações.

Início rápido

  1. 1

    Adicione um componente com o shadcn CLI

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

    Ou adicione com o jsrepo

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

Antes de usar

  • O nome da licença inclui Commons Clause, que restringe a venda do próprio software. Leia o LICENSE.md antes de usá-lo comercialmente.
  • Os metadados do repositório não indicam nenhuma licença detectada. Consulte diretamente o LICENSE.md para verificar os termos da licença.

Tópicos

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

Perguntas frequentes

O que é react-bits?
Biblioteca com mais de 215 componentes e backgrounds gratuitos, animados e personalizáveis para React e Next.js, instaláveis via shadcn ou jsrepo. React Bits é uma coleção de componentes animados e interativos para React e Next.js, voltada à criação de interfaces web visualmente marcantes. Inclui animações de texto, como texto dividido, efeito de máquina de escrever e revelações durante a rolagem, além de efeitos de cursor, interações ao passar o mouse, cards, carrosséis, microinterações de UI e backgrounds animados para seções inteiras.
react-bits é gratuito? Qual é a licença?
react-bits é open source sob a licença Other. Confira os termos da licença antes de usá-lo em produtos comerciais.
react-bits ainda é mantido?
Manutenção ativa. O último commit de react-bits foi em 19 de out. de 2026.
Para que posso usar react-bits?
Adicionar animações de texto chamativas ou revelações durante a rolagem a um site de marketing ou landing page. Criar seções hero animadas e backgrounds para páginas inteiras em um app Next.js ou React. Permitir que um agente de programação com IA adicione componentes prontos a um projeto com Tailwind. Criar capturas de tela de produtos, vídeos em loop para backgrounds ou efeitos sonoros para lançamentos e demonstrações.
Como instalar react-bits?
Adicione um componente com o shadcn CLI: npx shadcn@latest add @react-bits/SplitText-TS-TW Ou adicione com o jsrepo: npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW
Onde consigo react-bits?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/DavidHDev/react-bits

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados