Componentes animados, blocos de página e telas de app, em português, um arquivo React por peça. Feitos pra gente e organizados pra agente de IA. Tudo o que um produto pede, numa biblioteca só.
1007 peças dentro
Feito por quem entende de design. E de código.
Componentes, blocos e telas de app. A construção inteira numa biblioteca só.
Roda no servidor, passa no StrictMode e não pede nada além do React. Você ou o seu agente instalam com um comando.
Props em toda peça, com o painel Personalizar na página de cada uma: cor, velocidade, tamanho.
Nítido em qualquer tela.
Cinco partes que se juntam num produto pronto.
O site, o app e o agente que monta os dois.
Peças de interface que ficam na memória.
CSS dentro de cada arquivo, sem Tailwind.
Seções prontas em 22 famílias.
Herói, preços, FAQ, depoimentos e footer.
38 famílias: painéis, tabelas, ajustes.
Um tema muda todas de uma vez.
Decidir quais modelos entram. Hoje existe um, o Portfolio.
Clone um e deixe com a sua cara.
Copiar pra IA, servidor MCP e o registro do shadcn.
O seu agente monta com bom gosto.
Instala pelo shadcn e o código fica seu.
Sem runtime, sem amarra, sem limite de projeto.
Decidir quantos modelos e quais. Hoje existe um, o Portfolio, em Next.js.
280 seções prontas em 22 famílias. Responsivas, animadas, prontas pra entrar no ar.
hero-1: Um herói em duas colunas: selo, título, dois botões e prova social de um lado, foto em preto e branco com botão de seta do outro.
Ver a famíliaInterface escolhida a dedo e orientação de desenho clara, feitas pra agente.
20 skills da casa: 8 direções de estilo, 6 tipos de página, 5 regras de acabamento e o Sharingan.
Qualquer peça entra pelo registro do shadcn, sem copiar e colar.
Fonte legível no seu repositório. Sem runtime e sem amarra.
Decidir: depoimentos de quem usa.
Comece por uma interface que já funciona e gaste o tempo deixando a ideia com a sua cara.
Uma animação que chama o olho, um layout que cabe no lançamento. Veja as prévias ao vivo e escolha as peças.
Instale o código no seu repositório. Troque o estilo, ajuste o movimento e ligue a sua lógica, na mão ou com o seu agente.
O seu produto hoje, o site de um cliente no mês que vem. Uma biblioteca de pontos de partida pronta pro que vier.
Decidir o que o acesso inclui e a licença.
Decidir os planos e o que cada um leva. Decidir: prova social
Decidir o nome
e o que este plano leva.
Decidir o nome
e o que este plano leva.
Decidir o nome
e o que este plano leva.
Decidir: forma de pagamento e checkout.
Não achou aqui? Decidir: canal de contato.
São 1007 peças: 372 componentes animados (texto, animações, componentes, fundos e 3D), 280 blocos de página em 22 famílias, 300 telas de app em 38 famílias e 55 hooks de lógica e fluxo. Decidir o que cada plano leva.
1007 peças em português, prontas pra colar. Decidir o acesso e o preço.
São 1007 peças: 372 componentes animados (texto, animações, componentes, fundos e 3D), 280 blocos de página em 22 famílias, 300 telas de app em 38 famílias e 55 hooks de lógica e fluxo. Decidir o que cada plano leva.
Cada peça tem props e um painel Personalizar na página dela, com cor, velocidade e tamanho. Um tema ao vivo, que troca destaque, base, fonte e cantos de todas as telas de app de uma vez, está a caminho.
Toda página tem o Copiar pra IA, que leva a configuração, o comando de instalação ou o prompt com o código inteiro. O servidor MCP do shadcn deixa o agente buscar e instalar as peças sozinho.
Decidir: compra única, assinatura ou aberto.
Decidir junto com a licença.
Decidir o ritmo das versões.
React 19, um arquivo .jsx por peça, com o CSS dentro. Sem Tailwind e sem dependência além do React: a peça que usa WebGL ou física traz o motor embutido. Roda no servidor e passa no StrictMode.
Decidir.
Pelo shadcn: npx shadcn@latest add https://nash.black/reaction/docs/r/<nome>.json. Ou copie o arquivo da aba Código, na página da peça.
Decidir.
Decidir.
hero-1: Um herói em duas colunas: selo, título, dois botões e prova social de um lado, foto em preto e branco com botão de seta do outro.
features-6: Quatro cartões de serviço com uma mancha de cor no canto; no hover, a descrição aparece palavra por palavra e a seta acende.
navigation-10: Barra clara com pílula de status e painel escuro de menu que entra deslizando.
cta-4: Chamada centralizada com cartões de foto que correm sem fim.
stats-10: Cartões de número em blocos de cor com contagem crescente e legendas.
404-5: 404 com título forte e cartões ilustrados coloridos espalhados embaixo.
showcase-5: Vitrine com abas de estúdios, criadores e times sobre uma faixa de cartões que corre sozinha.
social-proof-5: Depoimentos que trocam sozinhos, com carrossel de avatares e anéis de progresso.