Introdução
Componentes acessíveis e temas por cliente para os sites e sistemas da Lens Tech.
Lens Tech UI é a base visual dos sites, páginas e sistemas que a Lens Tech entrega. São componentes React acessíveis, com visual no estilo do shadcn/ui, e um gerador de temas que transforma a cor de um cliente em um tema completo.
Não é uma biblioteca que você instala pelo npm. Assim como o shadcn/ui, o código de cada componente é copiado para o seu projeto pelo CLI do shadcn. Depois disso, o arquivo é seu: dá para ler, ajustar e versionar junto com o resto do projeto.
Como funciona
O sistema tem três camadas. Cada uma depende apenas da anterior.
| Camada | O que é | Onde fica |
|---|---|---|
| Tokens | O contrato de cores, fontes e raio (background, primary, link…) e o gerador de temas. Cada tema preenche esses tokens para claro e escuro. | packages/tokens |
| Registry | Os componentes e os temas, publicados como JSON no formato do shadcn em ui.lenstech.com.br/r/{nome}.json. | packages/registry |
| Projeto | O site ou sistema do cliente. O CLI baixa do registry o tema e os componentes que você pedir. | O seu repositório |
Os componentes nunca usam cor crua. Usam só tokens (bg-primary, text-link, border-border). Por isso, trocar o
tema troca a marca inteira sem tocar em nenhum componente.
Princípios
- Acessível por padrão. Os componentes são construídos sobre o React Aria, da Adobe. Teclado, foco, leitores de tela e toque funcionam sem configuração extra.
- Qualquer cor de cliente, com contraste AA. O gerador recebe uma ou mais cores e ajusta o que for preciso para atingir a WCAG 2.2 AA em todos os pares de texto e fundo.
- Familiar para quem conhece shadcn/ui. Mesma densidade, mesmos nomes de export (
Dialog,DialogContent…) e o mesmo CLI. - Em pt-BR. Textos padrão, exemplos e documentação em português.
Quando usar
Use em projetos React com Tailwind CSS v4: Next.js (App Router), Vite ou Laravel + Inertia. É indicado para:
- sites institucionais e landing pages de clientes;
- sistemas internos, painéis e áreas logadas;
- qualquer projeto que precise da marca do cliente sem abrir mão da acessibilidade.
Não é indicado para projetos sem React ou sem Tailwind. Nesses casos, os tokens continuam úteis como referência de cores, mas os componentes não se aplicam.