Plataformas

React (Next e Vite)

Para os apps e sites em React com Tailwind 4 e shadcn/ui: app.agrosdr, ad3.agrosdr, app.influenciadoresdoagro, www.agrosdr e novos projetos.

Instruções para LeadCultura. Troque a marca no topo para ver os valores de outra.

1. Instale o tema

O CLI do shadcn grava as variáveis da marca (claro e escuro), o mapeamento do Tailwind e as utilidades no CSS global do projeto.

terminal

npx shadcn@latest add https://ds.leadcultura.com.br/r/theme-leadcultura.json

Sem shadcn? Baixe o CSS e importe depois do Tailwind:

terminal

curl -o src/styles/theme.css https://ds.leadcultura.com.br/tokens/leadcultura.css

src/app/globals.css (ou src/index.css no Vite)

@import 'tailwindcss';
@import 'tw-animate-css';
@import './styles/theme.css';

2. Carregue a fonte

O tema só declara a família; o arquivo da fonte precisa ser carregado no entry do app (layout.tsx no Next, main.tsx no Vite).

terminal

pnpm add @fontsource-variable/inter

entry do app

import '@fontsource-variable/inter'

3. Tema escuro

Os tokens escuros entram com a classe dark no <html>. No Next, use o next-themes com attribute="class".

Atalho do registry

Registre o namespace uma vez no components.json e instale itens pelo nome: npx shadcn add @leadcultura/theme-leadcultura. Os componentes da fase 2 vão sair por aqui.

components.json

{
  "registries": {
    "@leadcultura": "https://ds.leadcultura.com.br/r/{name}.json"
  }
}