Registry
Como os componentes e temas são publicados, como adicionar itens novos e onde o registry está hospedado.
O registry é o catálogo que o CLI do shadcn consulta. Cada componente e cada tema vira um arquivo JSON com o código,
as dependências e as variáveis CSS. Este site serve esses arquivos em https://ui.lenstech.com.br/r/{name}.json.
Como funciona
O caminho do código até o projeto do cliente tem quatro etapas:
| Etapa | O que acontece | Onde |
|---|---|---|
| Fragmentos | Cada grupo de componentes descreve seus itens num JSON próprio. tokens.json é gerado pelo build de tokens. | packages/registry/registry/lenstech/_items/*.json |
| Merge | pnpm registry:build junta os fragmentos em um registry.json e confere se todos os arquivos existem. | packages/registry/registry.json |
| Build do shadcn | shadcn build embute o código de cada arquivo e gera um JSON por item. | packages/registry/public/r/*.json |
| Publicação | O build do site copia packages/registry/public/r para public/r na raiz. A Vercel serve em /r/. | ui.lenstech.com.br/r/*.json |
No merge, as dependências entre itens (@lenstech/button) são reescritas para URLs completas
(https://ui.lenstech.com.br/r/button.json). Por isso um componente instala o que precisa mesmo em projetos que não
configuraram o namespace @lenstech.
As respostas em /r/ têm CORS liberado e cache de uma hora na CDN. Depois de um deploy, a versão nova pode levar
alguns minutos para aparecer para todos.
Tipos de item
| Tipo | Exemplos | O que instala |
|---|---|---|
registry:style | lenstech-base | Mapeamento dos tokens para o Tailwind, estilos de base e as dependências npm comuns. |
registry:theme | theme-lenstech, theme-exemplo-verde | Variáveis de cor, fonte e raio do tema, em :root (claro) e .dark (escuro). |
registry:ui | button, dialog, select | Um componente, em components/ui/. |
registry:block | site-header, data-table | Uma composição pronta de vários componentes. |
registry:lib | utils | Funções auxiliares usadas pelos componentes (cn, anéis de foco). |
O catálogo completo está em Componentes e na seção Blocos da navegação.
Adicionar um componente
Resumo do fluxo. As regras completas (React Aria, tokens, estados via data-*) estão no
CONTRIBUTING.md.
Crie o componente em packages/registry/registry/lenstech/ui/<nome>.tsx. Imports internos sempre como
@/registry/lenstech/...; o CLI reescreve para os aliases do projeto do cliente.
Declare o item no fragmento do grupo, em packages/registry/registry/lenstech/_items/<grupo>.json:
{
"name": "dialog",
"type": "registry:ui",
"title": "Dialog",
"description": "Janela modal para confirmações e formulários curtos.",
"dependencies": ["react-aria-components"],
"registryDependencies": ["@lenstech/utils", "@lenstech/button"],
"files": [{ "path": "registry/lenstech/ui/dialog.tsx", "type": "registry:ui" }]
}Gere e valide:
pnpm registry:build
pnpm typecheckDocumente: exemplos em examples/<nome>/ e a página em content/docs/componentes/<nome>.mdx.
Para testar o registry localmente antes do deploy, gere com a URL local e reinicie o servidor do site:
REGISTRY_URL=http://localhost:3000 pnpm registry:build
pnpm siteOs itens ficam em http://localhost:3000/r/<nome>.json. Antes de enviar, gere de novo sem REGISTRY_URL, para as
dependências voltarem a apontar para o domínio público.
Adicionar e publicar um tema de cliente
Crie o tema com o CLI (detalhes em Temas):
pnpm theme --name clinica-sorriso --label "Clínica Sorriso" --primary "#0EA5E9"Confira o resultado neste site, com o seletor de tema, em claro e escuro. Confira também o
packages/tokens/themes/CONTRAST.md.
Faça commit do clinica-sorriso.theme.json e dos arquivos gerados e envie para main. A Vercel faz o deploy e o
item theme-clinica-sorriso fica disponível:
npx shadcn@latest add @lenstech/theme-clinica-sorrisoTemas são públicos
Todo item do registry é um JSON público: qualquer pessoa com a URL consegue ler. Um tema contém só cores, fontes e raio. Não coloque dados confidenciais no nome, no label ou na descrição, como o nome de um cliente que ainda não pode ser divulgado. Nesses casos, use um slug neutro até o lançamento.
Hospedagem
O site e o registry são o mesmo projeto na Vercel. O site fica na raiz do repositório e as configurações de build estão em vercel.json.
| Configuração | Valor |
|---|---|
| Repositório | guilherme-fortuna/lenstech-lib |
| Root Directory | ./ (raiz, padrão) |
| Framework | Next.js |
| Install Command | pnpm install --frozen-lockfile |
| Build Command | pnpm build |
| Branch de produção | main |
O pnpm build gera os tokens, gera o registry, copia os JSON para public/r e só então compila o site. Cada push em main publica; cada pull request ganha uma URL de preview.
Domínio
Na Vercel, abra o projeto, vá em Settings → Domains e adicione ui.lenstech.com.br.
No hPanel da Hostinger, abra o domínio lenstech.com.br e vá em DNS / Nameservers → Gerenciar registros DNS.
Crie o registro:
| Tipo | Nome | Aponta para | TTL |
|---|---|---|---|
CNAME | ui | cname.vercel-dns.com | padrão |
Volte à Vercel e aguarde a verificação. A propagação do DNS costuma levar alguns minutos, mas pode chegar a algumas horas. O certificado SSL é emitido e renovado automaticamente.