Índice do artigofaltam 7 min de leitura
O React Bits não é uma biblioteca que você instala: é um catálogo de código que você copia para dentro do projeto. Essa diferença muda quem mantém o código, o que a licença permite e o que aparece no seu bundle.
Existe uma categoria de ferramenta que confunde quem orça projeto: a que se parece com biblioteca, é distribuída como biblioteca e não se comporta como biblioteca. O React Bits é o exemplo mais popular dessa categoria no ecossistema React, com 46.335 estrelas no GitHub, mais que a Motion, o react-spring e o GSAP.
Este artigo explica o que você está adotando quando escolhe o React Bits, esclarece a licença, que é o ponto mais mal compreendido do projeto, mostra o que cada componente arrasta junto e termina no critério de quando ele compensa.
Resumo do artigo
- São 168 componentes distribuídos em quatro categorias, em quatro variantes cada, que você copia para o projeto por CLI ou manualmente.
- A licença é MIT com Commons Clause: uso comercial liberado, revenda dos componentes proibida. Não é uma licença aprovada pela Open Source Initiative.
- O código copiado passa a ser seu: você ganha controle total e assume a manutenção, sem atualização automática por npm.
- Vários componentes dependem de motores de animação como GSAP, Motion e three.js, então o custo real de bundle depende de quais você escolher.
O React Bits é um catálogo de código, não uma dependência
O React Bits é uma coleção de componentes React animados criada por David Haz, publicada no repositório DavidHDev/react-bits desde agosto de 2024. O modelo de distribuição é o mesmo popularizado pelo shadcn: em vez de instalar um pacote que fica no node_modules, você traz o arquivo do componente para dentro do seu código.
Existem três caminhos para trazer, e todos terminam no mesmo lugar. Pelo CLI do shadcn, com um comando por componente, no formato npx shadcn@latest add @react-bits/BlurText-TS-TW. Pelo CLI do jsrepo, com o comando indicado na página de cada componente. Ou copiando o código do site direto para um arquivo do projeto.
O sufixo do comando revela uma decisão de projeto que resolve uma dor real: cada componente existe em quatro variantes, JavaScript com CSS, JavaScript com Tailwind, TypeScript com CSS e TypeScript com Tailwind. Você não recebe um componente que precisa ser traduzido para a sua stack, recebe o que já está escrito nela.
São 168 componentes, e a maior categoria é a que ninguém espera
O material oficial do projeto anuncia mais de 165 componentes. A contagem direta nos diretórios do repositório resulta em 168, distribuídos de forma bem desigual entre as quatro categorias.
A categoria mais populosa é a de fundos animados, e isso diz o que o catálogo é de verdade. Não é uma biblioteca de interface no sentido de botão, formulário e tabela: é um catálogo de efeito visual, voltado a landing page, portfólio e página de produto que precisa impressionar nos primeiros três segundos. Quem procura sistema de design com componentes de formulário acessíveis está no lugar errado.
A licença é MIT com Commons Clause, e isso muda o que você pode fazer
O ponto mais mal compreendido do projeto está no arquivo de licença. O React Bits não está sob MIT puro: está sob MIT com a Commons Clause License Condition v1.0, assinada por David Haz. A Commons Clause é uma condição que se acopla a uma licença permissiva e retira dela um direito específico, o de vender o software.
Isso significa que a badge de licença no repositório, que diz "MIT + Commons Clause", é literal e não é decorativa. A Commons Clause não consta da lista de licenças aprovadas pela Open Source Initiative, porque restringe campo de uso, e isso basta para reprovar em política de conformidade que exige aprovação da OSI.
Na prática, a restrição atinge menos gente do que parece
A leitura correta da Commons Clause aqui é que ela mira revendedor, não usuário. Construir o site de um cliente com componentes do React Bits e cobrar pelo site é uso permitido de forma explícita no texto da licença, porque o que você vende é a aplicação, não os componentes.
O que a cláusula bloqueia são três cenários específicos e razoavelmente raros: empacotar os componentes e vender como biblioteca própria, incluí-los em um template comercial cujo valor central sejam os próprios componentes, e portar o catálogo para outra tecnologia, como Vue ou Svelte, e distribuir o resultado.
Existe um quarto cenário que merece atenção de quem trabalha com governança: empresa com política de licenças que só aceita o que a Open Source Initiative aprova vai reprovar o React Bits na revisão jurídica, mesmo que o uso pretendido fosse permitido pelo texto. Se o seu cliente tem esse controle, verifique antes de escrever a primeira linha, não depois da entrega.
Copiar código muda quem mantém
A vantagem mais citada do modelo de copiar e colar é controle: o componente está no seu repositório, você edita à vontade, sem lutar contra a API de uma biblioteca que não previu o seu caso. A contrapartida quase nunca é dita com a mesma clareza.
Biblioteca instalada
O mantenedor corrige por você- Correção de bug chega por atualização de versão
- Compatibilidade com React novo é responsabilidade do projeto
- Customizar depende do que a API expõe
- O código aparece no node_modules, não no diff
Componente copiado
Você corrige por você- Correção só chega se alguém for buscar
- Compatibilidade com React novo é sua
- Customizar é editar o arquivo
- O código entra no seu repositório e na sua revisão
Nenhum dos dois lados é melhor em abstrato. O que decide é o horizonte do projeto: em site de campanha com vida de seis meses, copiar é vantagem pura, porque ninguém vai atualizar nada mesmo. Em produto que roda por anos e passa por auditoria, cada componente copiado é código que a sua equipe adotou e vai precisar manter quando o React mudar.
Cada componente traz o próprio motor de animação
O material do projeto descreve as dependências como mínimas, e isso é verdade por componente e enganoso no agregado. O catálogo não roda sobre um único motor: ele usa o que cada efeito exige, e o arquivo de dependências do repositório lista 38 pacotes, entre eles quatro motores de animação e renderização distintos.
| Motor | O que ele sustenta no catálogo |
|---|---|
| GSAP | Timelines e efeitos de texto mais elaborados, com o pacote @gsap/react para o ciclo de vida em React. |
| Motion | Animações declarativas ligadas a estado, gestos e transições de entrada e saída. |
| three.js e OGL | Fundos e efeitos em WebGL, com react-three-fiber e pós-processamento. É a categoria mais pesada do catálogo. |
| matter-js | Efeitos com simulação física em duas dimensões, como colisão e queda de elementos. |
Fonte: arquivo package.json do repositório DavidHDev/react-bits, leitura de 28/08/2026. A lista é do projeto inteiro; cada componente copiado traz apenas as dependências que ele usa.
A consequência prática é que não existe um custo de bundle do React Bits, existe o custo dos componentes que você escolheu. Copiar um efeito de texto que usa GSAP e um fundo em WebGL na mesma página significa carregar dois motores completos, e isso precisa ser conferido no build, não presumido pela frase de dependência mínima.
As ferramentas gratuitas são o gancho menos comentado
Além dos componentes, o projeto publica três ferramentas de uso livre no site, e elas resolvem problemas que normalmente exigem software de design. O Background Studio permite explorar os fundos animados, ajustar os parâmetros e exportar o resultado como vídeo, imagem ou código. O Shape Magic gera cantos arredondados internos entre formas e exporta como SVG, componente React ou caminho de recorte. O Texture Lab aplica efeitos como ruído, dithering e ASCII sobre imagem e vídeo, com exportação em alta qualidade.
Vale citá-las porque mudam o cálculo de valor do projeto para quem não vai copiar componente nenhum. Exportar um fundo animado como vídeo ou como código, sem escrever WebGL, é útil mesmo para um time que já decidiu usar outra biblioteca de animação.
React Bits ou uma biblioteca de animação
Comparar os dois é comparar categorias diferentes, e é exatamente por isso que a comparação aparece: quem procura "animação em React" encontra os dois na mesma busca e precisa escolher.
Quando o catálogo ganha
- O efeito desejado já existe pronto e você não precisa dele customizado
- O prazo é curto e a página é vitrine, não produto de longa vida
- Ninguém no time domina WebGL ou animação de texto
- Você quer o resultado visual sem projetar a animação do zero
Quando a biblioteca ganha
- A animação é específica do produto e não existe pronta
- O projeto vai viver anos e passar por atualizações de React
- Consistência entre dezenas de telas importa mais que efeito isolado
- A política de licenças da empresa exige aprovação da OSI
Na maioria dos projetos, a resposta honesta é os dois: a biblioteca de animação para o que é do produto, o catálogo para o efeito pontual da página de entrada. O erro é tratar o React Bits como sistema de design e construir o produto inteiro em cima de componentes copiados que ninguém vai manter.
Quando o React Bits não é a escolha certa
Três situações desaconselham o catálogo.
Produto com requisito de acessibilidade formal. Efeito visual elaborado e leitor de tela raramente foram projetados juntos, e cada componente copiado vira responsabilidade sua na auditoria.
Interface de sistema, com formulário, tabela e navegação densa. O catálogo é forte em fundo, texto e efeito de entrada, e não cobre o vocabulário de componentes de aplicação.
Equipe sem processo de revisão de código de terceiros. Copiar arquivos para dentro do repositório sem alguém lendo o que entrou é como instalar dependência sem olhar, com o agravante de que aqui o código passa a ser seu.
Como decidir
- O efeito que você quer já existe no catálogo exatamente como precisa? Se precisar customizar muito, o ganho de tempo evapora.
- Sua empresa ou seu cliente exige licença aprovada pela OSI? Se sim, a Commons Clause reprova antes da discussão técnica.
- Quantos motores de animação diferentes a sua escolha de componentes vai carregar na mesma página? Confira no build.
- Quem mantém esse componente daqui a um ano? Depois de copiado, a resposta é sempre a sua equipe.
Se você respondeu que o efeito serve como está, que não há restrição de licença e que a página é vitrine, o React Bits entrega em uma tarde o que custaria uma semana. Fora dessas condições, o custo aparece depois da entrega, que é o pior momento para descobri-lo.
Precisa de uma interface que sustente o produto, não só a vitrine?
Solicite um orçamento e avance com arquitetura, escopo e entrega definidos.
Fontes e método
A apuração deste artigo foi feita em 28 de agosto de 2026, em fonte primária. Texto integral da licença, contagem de componentes por categoria, lista de dependências e formas de instalação vêm do repositório DavidHDev/react-bits, lidos nos arquivos LICENSE.md, README.md, package.json e no diretório de conteúdo. Estrelas, forks e datas vêm da API do GitHub.
A interpretação da Commons Clause apresentada aqui é leitura do texto da licença e não é orientação jurídica. Em contexto com exigência formal de conformidade, a validação deve ser feita pelo jurídico responsável. O React Bits e os demais projetos citados são externos, sem relação comercial com a X-Apps.
Perguntas frequentes
É um catálogo de componentes React animados que você copia para o seu projeto, por CLI ou copiando o código, em vez de instalar como uma dependência única do npm.
O código é público, mas a licença é MIT com a condição Commons Clause, que não é uma licença aprovada pela Open Source Initiative. Ela libera uso comercial e proíbe revender os componentes.
Sim. A licença permite usar os componentes como parte de uma aplicação, site ou produto, inclusive para fins comerciais. O que ela proíbe é vender, sublicenciar ou redistribuir os componentes em si.
O repositório oficial tinha 168 componentes distribuídos em quatro categorias na leitura de 28 de agosto de 2026. O material do projeto anuncia mais de 165.
Pelo CLI do shadcn ou do jsrepo, com o comando indicado na página de cada componente, ou copiando o código direto para o seu projeto.
Não. Vários componentes dependem de bibliotecas de animação como GSAP ou Motion, e o React Bits entrega o efeito pronto construído sobre elas.
