Instalacao

O TRDR UI se instala de tres jeitos, dependendo do que o projeto ja usa. Em qualquer um deles, uma correcao publicada na biblioteca chega no seu projeto pelo proximo update de versao.

Projeto com Tailwind v4

O caminho padrao. Use este se o projeto ja usa Tailwind v4 ou se voce esta comecando.

Instalar

npm i @trdr/ui @trdr/tokens

Importar no CSS global

@import "tailwindcss";
@import "@trdr/ui/styles";

Marcar o tema no html

<html lang="pt-BR" data-theme="dark">

Projeto sem Tailwind

Para projeto em CSS puro, CSS Modules ou MUI. O bundle vem pre-compilado e sem preflight, entao ele nao zera a baseline de estilo que o projeto ja tem.

Instalar

npm i @trdr/ui

Importar o CSS pronto

@import "@trdr/ui/standalone.css";

So os tokens

Quando o projeto nao vai usar os componentes, mas precisa das cores, espacamentos e tipografia da marca. E o que a skill trdr-design ja entrega hoje.

Instalar

npm i @trdr/tokens

Importar as CSS variables

@import "@trdr/tokens/tokens.css";

Usar um componente

Importe pelo subpath. Ele existe para que o bundle final leve so o que voce usou, e para nao arrastar a fronteira de client component do seu app sem necessidade.

uso

import { Button } from "@trdr/ui/button"

export function Exemplo() {
  return <Button variant="primary">Confirmar</Button>
}

Quando voce precisa mudar um componente

Ai voce ejeta: o codigo e copiado para dentro do seu projeto e passa a ser seu. O custo e que ele para de receber correcao automatica, e por isso existe o doctor: ele compara o que voce ejetou com a versao atual da biblioteca e mostra o que mudou.

eject

npx shadcn@latest add https://trdr.mrocontent.com.br/r/button.json

# depois, quando quiser saber o que mudou na biblioteca
npx @trdr/cli doctor

Endpoints publicos

Servidos por este site, com CORS aberto, para consumo por ferramenta e por agente de IA.

Endpoint	O que e
/tokens.css	As CSS variables do design system, dark e light
/theme.css	O tema Tailwind v4, com o vocabulario shadcn aliasado
/tokens.json	Catalogo de tokens com valor, referencia e descricao
/v2/components.json	Catalogo de componentes gerado do codigo real
/registry.json	Indice do registry shadcn
/r/[nome].json	Um item do registry, para npx shadcn add
/components.json	Contrato antigo, congelado. Nao use em codigo novo