Executando verificação de segurança...
1
leonardord
5 min de leitura ·

EP19: Registries: a nova base do Frontend moderno

🧭 Mapa da Edição

📓 Depois de meses ancorado, volto para um front-end diferente: menos abstração fechada, mais código nas mãos do dev. Registries não são moda — são direção.

🌊 O CSS finalmente resolve problemas antigos, agentes nascem de frases e GPTs ficam mais rápidos que o loading spinner.

📦 O mar muda, o stack muda, o papel do desenvolvedor também. E talvez estejamos entrando numa era onde controlar a base é o verdadeiro diferencial.

📓 Entrada no Logbook

Queria falar com vocês sobre algo que acredito estar se tornando cada vez mais uma espinha dorsal no desenvolvimento Frontend — especialmente com Tailwind.

MUI, AntD, ChakraUI, React Suite, React Bootstrap… as conhecidas bibliotecas de Design Systems já foram extremamente comuns em diversas aplicações. E quando digo que “foram”, não significa que deixaram de ser usados — ainda são. Mas estão cada vez mais raros em projetos novos.

O oceano agora está repleto de copy and paste (ou “copia e cola”, para os íntimos).

Os chamados: Registries.

Mas antes de ir longe demais:

O que é um registry, afinal?

Em termos simples, é um arquivo (geralmente JSON) que descreve um componente — suas dependências, estrutura e código — e que, através de um comando CLI, pode ser extraído e colado diretamente no seu projeto. Isso quando você opta pela “instalação” automática e não manual.

Para entender o que são registries, precisamos falar antes do que foi — e do que é — o Shadcn.

Esse quase Satoshi do design web apareceu há alguns anos trazendo uma série de componentes pré-estilizados com Tailwind em cima de uma biblioteca headless chamada Radix. A premissa era simples: componentes headless, instalação atômica (instale apenas o que for usar), com uma estilização opinada por cima.

Como instalar?

  1. CLI: um simples comando instala as dependências necessárias e “copia” o código para seu projeto.
  2. Manual: pela documentação, você pode literalmente copiar a implementação e colar no seu código.

Ambas têm algo em comum: o código não fica na node_modules.

Ele não é uma dependência opaca.

Ele se torna parte do seu projeto — 100% maleável e editável por você.

E aqui está o ponto central: o propósito de um registry não é que você copie, cole e use.

É que você copie, cole, adapte e use.

Ele entrega a base lógica e visual. Você ajusta como quiser: troca variants, comportamentos, bibliotecas externas. Não gosta de Lucide? Use Phosphor. Não curte o padrão composable? Crie um wrapper com as partes.

Hoje isso foi além do Shadcn. Registries se espalharam. O padrão de distribuição mudou. Já existem diversas fontes criando componentes, lógicas e elementos visuais disponibilizados nesse formato.

Existem registries de ícones animados, hooks, componentes 8bit, neobrutalism, elementos de IA e muito mais.

Alguns exemplos:

  • **8Bitcn:** componentes em estilo 8bit
  • **Aceternity:** componentes com animações impressionantes
  • Coss: focado no headless BaseUI
  • ElevenLabs UI: componentes voltados para áudio (estou tentando arrumar uma desculpa para usar 🫠)
  • E muitos outros no diretório oficial do Shadcn

Shadcn está criando um império e ditando as regras? Quase.

Muitos registries já foram além do próprio Shadcn. Mas é inegável: registries vieram para ficar.

O motivo? IA e manutenção.

Quem já usou design systems tradicionais sabe como pode ser difícil customizá-los para que tenham “a cara do projeto”. Classes com nomenclaturas quase indecifráveis, !important espalhado, overrides frágeis…

Com registries, a história muda.

O código está ali.

Usando CSS Variables, tokens, semantic tokens — todos sob seu controle.

E aqui entra um fator novo: as IAs.

Quando o código vive dentro do seu projeto, a IA não precisa adivinhar como uma biblioteca funciona internamente. Ela lê, entende e modifica direto na fonte. O pedido vira uma edição clara em um arquivo claro — sem brigar contra abstrações fechadas.

Hoje já existem muitos registries. O próprio Shadcn expandiu além do Radix, adicionando suporte ao novo queridinho do momento: BaseUI — mais enxuto e ainda menos opinado, para quem quer controle total sobre comportamento.

Como era de se esperar, esse movimento gerou impacto. Muitos registries começaram a migrar (ou já migraram) para BaseUI — seja adicionando suporte, seja trocando totalmente a base.

Eu amo registries.

Para mim, é uma das melhores evoluções recentes no desenvolvimento Frontend quando falamos de construção de componentes, lógica e visual.

Por ter tudo pronto? Não.

Quem me conhece sabe que prefiro coisas mais manuais — principalmente CSS (amo fazer CSS, julgue-me se quiser).

Mas os registries se tornaram um boost. Um ponto de partida prático, em cima do qual adapto, melhoro, refino, adiciono ou removo conforme necessidade.

E a maioria ainda segue o padrão composable (componentes em partes, tipo quebra-cabeça: DialogRoot, DialogTrigger, DialogContent). Se você ainda não usa esse padrão, recomendo fortemente. Sua versão futura vai agradecer pela deliciosa Developer Experience (DX).

Meses ancorado no porto. Agora voltamos a velejar.

Se antes a promessa era “eu cuido do visual por você”, hoje parece ser:

“te dou a base — o resto é seu.”

A maneira de velejar muda. O mar também.

Cabe a nós ajustar o barco.

PS: A partir deste episódio, convido vocês a acessarem também a versão no Substack (onde os episódios ficam disponíveis além do email). Lá estou trazendo uma versão em podcast, com duas IAs conversando sobre o tema, gerado via NotebookLM. Acho que vai ser interessante.

🌊 Marés da semana

📦 Treasure - Good Stuff

Para combinar com o tema, os tesouros de hoje serão alguns registries favoritos que gosto de explorar quando possível:

  • React Bits: A large collection of animated, interactive & fully customizable React components for building memorable websites.
  • MagicUI: UI Library for Design Engineers. 150+ free and open-source animated components and effects built with React, Typescript, Tailwind CSS**.**

⚓ Se chegou até aqui, já deu pra sentir o clima de bordo.

Essa é uma das entradas do meu Logbook for Devs —
onde registro ideias, reflexões técnicas e ferramentas que cruzam meu caminho na jornada dev.

Toda terça e quinta tem uma nova anotação de rota, com marés atualizadas e tesouros recém-descobertos.

⛵ Quer seguir viagem comigo?
Embarque aqui.

Fonte: https://logbookfordevs.substack.com

Carregando publicação patrocinada...