← Todas as publicações

1.101 componentes de graça e uma skill que ensina a sua IA a usar

Endossado pelo criador do shadcn/ui: tabela, gantt, kanban e calendário que a IA não monta sozinha, mais um servidor com validação de propriedade antes de escrever o código.

Se você já tentou fazer a IA montar uma tabela de verdade, com ordenação, filtro, seleção de linha, paginação, sabe que é aí que ela quebra. Ela entrega três divs e uma promessa.

O reui.io resolve esse problema específico. E resolve de um jeito que eu não vi em mais nenhuma biblioteca.

Mas antes do que ele tem, um detalhe que pesa: no site deles, na página de planos, tem um depoimento do criador do shadcn/ui, dizendo que o ReUI é um dos registros confiáveis, um dos melhores que existem. Eu não achei essa frase na boca dele fora dali. Está publicado pelo ReUI. Mesmo assim: quando o cara que criou o padrão que todo mundo usa aparece nesse contexto, eu paro pra olhar.

O endosso do criador do shadcn/ui na página de planos do ReUI
O endosso do criador do shadcn/ui na página de planos do ReUI

O que vem de graça (que é quase tudo)

Eles publicam os números num arquivo aberto no próprio site. São esses:

  • 1.101 exemplos de componente, de graça
  • 21 peças próprias que eles construíram do zero, é onde mora o ouro, já explico
  • 638 ícones em 4 estilos
  • 520 blocos premium, esses sim são pagos

O plano gratuito diz, com todas as letras: uso comercial ilimitado, atualizações vitalícias, sem precisar de conta. Você entra e copia.

O pago é pagamento único de 249 dólares e só libera os blocos premium. Não é assinatura, e não trava nada do que eu vou te mostrar aqui.

O catálogo aberto, sem login
O catálogo aberto, sem login

As 21 peças que ninguém mais tem

Essa é a parte que me fez escrever esse post. As 21 peças próprias resolvem exatamente o que a IA não consegue montar sozinha:

  • Tabela de verdade. Ordena, filtra, marca linha, pagina, arrasta coluna. Não é aquelas três caixinhas que a IA inventa. Se você tem lista de cliente, pedido ou lead, começa por aqui.
  • Agenda. Calendário pra marcar horário de verdade, não aquele mês estático. Serve em ferramenta, clínica, time.
  • Cronograma. Tarefa no tempo, com seta de quem depende de quem. A IA desenha um que só parece. Esse já nasce pronto.
  • Quadro de cards. Arrasta de uma coluna pra outra. Pedir "um Trello" pra IA quase sempre devolve um cartão bonito que não funciona. Aqui o quadro é peça.
  • Filtro avançado. Aquele de "isso e aquilo, ou aquilo outro". Uma semana se você for montar do zero.
  • O resto chato, que todo produto precisa. Subir arquivo, pasta dentro de pasta, passo a passo, linha do tempo, telefone, estrela de avaliação. Ninguém faz vídeo com isso. Sem isso o sistema não fecha.
Repara no que essa lista tem em comum: é tudo que aparece em SISTEMA. Painel, área logada, CRM, ferramenta interna. Não é peça de landing page, é peça de produto.
A tabela funcionando: ordenação, filtro e seleção, ao vivo
O calendário de eventos
O calendário de eventos

O servidor que monta a página pra sua IA

Aqui essa parada sobe um degrau.

O ReUI deixa a sua IA consultar a biblioteca ao vivo, em vez de chutar de memória. Claude, Cursor, Codex, VS Code, Copilot, v0. Se ela pedir o endereço, é https://mcp.reui.io.

Você não precisa saber o nome de ferramenta nenhuma. Manda a IA fazer.

  • Você descreve a tela. A IA pede a estrutura e já volta com as seções na ordem, cada uma casada com o bloco certo. Não é "acha um botão". É "monta a página".
  • Antes de escrever código, ela confere. O servidor olha se a propriedade existe de verdade. Se a IA inventou, ele reprova. Mata o erro antes de virar arquivo.
  • Se já tem um exemplo pronto, ela copia. Em vez de inventar do zero.

Duas coisas que mudam o uso

A busca só responde em inglês. Pedir "tabela com ordenação" volta zero. Pedir "data grid with sorting" volta três, já com o comando pra instalar. Então: fala com ela em inglês nessa hora.

Pedir pra montar a página inteira, no grátis, volta raso. Os blocos de página completa são do plano pago. Um painel de vendas pede uma tela e volta uma seção. A parte mais bonita do discurso é, na prática, o argumento de venda do Pro.

O que o grátis entrega de verdade

Sem pagar, sem conta no catálogo:

  • 1.101 exemplos de componente, pra copiar e mandar a IA encaixar
  • 21 peças próprias de sistema (quando a IA listou, vieram 22): tabela, agenda, quadro, cronograma, o ouro
  • 638 ícones em 4 estilos
  • Uso comercial ilimitado, atualização vitalícia
  • A IA consegue listar, buscar em inglês, ler o componente e conferir se a propriedade existe

O que o grátis não entrega: a página inteira montada com os blocos prontos. São 520 blocos atrás do pago, 249 dólares uma vez. O catálogo e as 21 peças não travam.

E tem uma skill pronta

Além do servidor, eles publicam uma skill: um conjunto de arquivos que ensina a sua IA a trabalhar com aquele catálogo. E a explicação deles da diferença é a melhor que eu já li sobre esse assunto:

O servidor é a mão da IA: busca, lê o componente de verdade, confere a propriedade, devolve o comando pra instalar. A skill é o cérebro: quando usar, o que pedir depois, e nunca inventar propriedade.

E eles são honestos sobre o porquê: sem a skill, a IA tende a customizar demais, refazer o que já existe pronto e inventar coisa que não tem. A skill mantém ela nos trilhos.

A skill é gratuita e funciona em todos os agentes suportados.

Como usar, do jeito rápido

Manda um print dessa etapa pra sua IA, ou só cola o texto abaixo. O resto ela faz sozinha.

npx shadcn@latest add https://reui.io/r/data-grid.json

Pra ligar o servidor na IA, o mesmo: print da tela de conexão, ou cola isto:

{
  "mcpServers": {
    "reui": {
      "type": "url",
      "url": "https://mcp.reui.io"
    }
  }
}

Na primeira vez o navegador abre uma tela de conta. É de graça, cria ali. O catálogo, esse, você abre sem nada.

O passo a passo

O prompt que eu usaria

ReUI. Liga no servidor deles se ainda não estiver.

A tela: <descreva>.

Antes de escrever código: monta as seções, lê o componente de verdade, confere se a propriedade existe, instala com o comando que o servidor devolver.
Reaproveita o bloco. Liga nos meus dados. Não redesenha. Não chuta propriedade.

Montar as seções e validar propriedade antes de escrever código. É a diferença entre a IA consultar e a IA chutar.

Onde não serve

  • Não é biblioteca de landing page. O forte aqui é sistema, painel, área logada. Pra página de vendas, outras servem melhor.
  • Ligar a IA no servidor pede uma conta. Gratuita. Se você não quiser criar, o catálogo continua aberto.

Tailwind, shadcn, o resto de requisito: manda a IA ler a documentação. Ela prepara. Você não checa isso na mão.

Por que eu juntei esse com o da Meta

Se você leu o post do Astryx, já deve ter percebido o padrão: as duas bibliotecas boas que apareceram esse mês vêm com manual pra máquina, servidor pra máquina consultar e validação pra máquina não inventar.

Isso não é coincidência. É o novo padrão. Biblioteca que não vem pronta pra IA vai ficar pra trás, porque hoje quem escreve a maior parte do código de interface não é mais a pessoa, é a ferramenta que ela está operando.

E o trabalho, que continua sendo seu, é dar contexto. Bora testar.

Nomics Tech

A IA que você viu aqui pode rodar no seu negócio

Tudo que você lê nesta newsletter sai da nossa operação real. A Nomics Tech implementa IA personalizada no seu negócio: seus contextos, seus processos, sua ferramenta. E no final, você fica com a chave.

Conhecer a Nomics Tech →
Tem um projeto de lançamento? Conheça a Nomics Coprodução e como podemos escalar o seu projeto →
1.101 componentes de graça e uma skill que ensina a sua IA a usar — Nomics Tech