Instalação
Configure um projeto com Tailwind v4, conecte o registry da Lens Tech e adicione o primeiro componente.
Os componentes chegam ao projeto pelo CLI do shadcn. Você precisa de React, Tailwind CSS v4 e um components.json
apontando para o registry da Lens Tech. Escolha o seu framework.
Crie o projeto
O create-next-app já configura TypeScript, App Router e Tailwind CSS v4. Aceite as opções padrão.
npx create-next-app@latest meu-projetoConfira o Tailwind v4
O app/globals.css deve começar com o import do Tailwind. Se o projeto é antigo e usa tailwind.config.js, migre
para a v4 antes de seguir (guia oficial).
@import "tailwindcss";Inicie o shadcn
O comando cria o components.json, o lib/utils.ts e as variáveis de cor padrão no CSS.
npx shadcn@latest initConecte o registry da Lens Tech
Adicione o bloco registries ao components.json. A partir daqui, @lenstech/<nome> aponta para o nosso registry.
{
"$schema": "https://ui.shadcn.com/schema.json",
"registries": {
"@lenstech": "https://ui.lenstech.com.br/r/{name}.json"
}
}Mantenha os outros campos que o init criou. O trecho acima mostra só o que muda.
Instale a base e o tema
lenstech-base mapeia os tokens para o Tailwind e instala as dependências (React Aria, tw-animate-css, lucide-react…).
theme-neutro é o tema padrão, preto e branco, e grava as cores claras e escuras no seu CSS. Para um cliente, troque
pelo tema dele, como theme-clinica-sorriso. Para a identidade da própria Lens, use theme-lenstech.
npx shadcn@latest add @lenstech/lenstech-base @lenstech/theme-neutroImporte as animações
Overlays e menus usam as classes do tw-animate-css. O init costuma adicionar o import; confira se ele está logo
depois do Tailwind.
@import "tailwindcss";
@import "tw-animate-css";Carregue as fontes
O tema neutro usa Geist (texto e títulos) e Geist Mono (números). O next/font renomeia as famílias, então
exponha cada uma como variável CSS:
import { Geist, Geist_Mono } from "next/font/google"
import "./globals.css"
const geist = Geist({ subsets: ["latin"], variable: "--font-geist" })
const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html
lang="pt-BR"
data-theme="neutro"
className={`${geist.variable} ${geistMono.variable}`}
suppressHydrationWarning
>
<body>{children}</body>
</html>
)
}Depois aponte os tokens de fonte para essas variáveis, no fim do CSS:
:root[data-theme="neutro"] {
--font-body: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
--font-display: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
--font-code: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
}Usando outro tema, carregue as fontes dele. O lenstech, por exemplo, usa Sora, IBM Plex Sans e IBM Plex Mono.
O Tailwind lê esses tokens: font-sans usa --font-body, font-heading usa --font-display e font-mono usa
--font-code. Títulos h1 a h4 já recebem font-heading.
Marque o tema no <html>
O atributo data-theme já aparece no exemplo acima. Ele identifica o tema ativo e é o seletor do bloco de fontes.
Use o mesmo nome do tema instalado. O suppressHydrationWarning evita avisos quando o modo escuro
altera a classe do <html>.
Adicione o primeiro componente
npx shadcn@latest add @lenstech/buttonO arquivo vai para components/ui/button.tsx, junto com o que ele precisar (por exemplo, lib/utils.ts).
Use
import { Button } from "@/components/ui/button"
export default function Page() {
return (
<main className="grid min-h-svh place-items-center">
<Button>Agendar horário</Button>
</main>
)
}Sem configurar namespace
Para testar um componente sem mexer no components.json, passe a URL completa do item:
npx shadcn@latest add https://ui.lenstech.com.br/r/button.jsonFunciona porque as dependências dentro do registry já usam URLs completas. O CLI resolve tudo sozinho, inclusive componentes que dependem de outros. A base e o tema também podem ser instalados assim:
npx shadcn@latest add https://ui.lenstech.com.br/r/lenstech-base.json https://ui.lenstech.com.br/r/theme-neutro.jsonPara uso contínuo, prefira o namespace: os comandos ficam curtos e o CLI consegue listar e buscar os itens.
Atualizar um componente
O código é do seu projeto, então não há atualização automática. Para trazer a versão nova de um componente, rode o
add de novo. O CLI pergunta antes de sobrescrever. Se você alterou o arquivo, compare as mudanças antes de aceitar.
npx shadcn@latest add @lenstech/button