Pular para o conteúdo

React

Tutorial para usar o Sinapse DS em React com Vite pelo registry do shadcn: projeto novo, projeto existente e componentes.

Tutorial por stack

React usa o Sinapse pelo registry do shadcn

O registry Sinapse entrega tema, ícones Tabler e componentes pelo próprio CLI do shadcn. Um projeto novo fica pronto com um comando; em um projeto existente, registre o namespace @sinapse e aplique o tema.

  1. 01 Crie o projeto já com o Sinapse
  2. 02 Adote o Sinapse num projeto shadcn existente
  3. 03 Adicione componentes Sinapse
  4. 04 Confira o tema no navegador

1 · Projeto novo

Crie o projeto já com o Sinapse

Um comando cria o app React com Tailwind v4, aplica o tema Sinapse, instala o Button Sinapse, configura ícones Tabler e registra o namespace @sinapse no components.json. O -n define a pasta nova do projeto.

terminal

pnpm dlx shadcn@latest init https://dsystem.sinapse.org.br/r/base.json -t vite -n meu-app
cd meu-app

O base.json usa o estilo radix-nova do shadcn e a biblioteca de ícones Tabler. Depois do comando, confira os ajustes do projeto gerado no passo 4.

2 · Projeto existente

Adote o Sinapse num projeto shadcn existente

Registre o namespace @sinapse, aplique o tema e troque o Button do shadcn pelo Button Sinapse (--overwrite só nesta vez). O namespace usa o estilo do seu components.json, então projetos Radix e Base UI recebem o Button certo.

terminal

pnpm dlx shadcn@latest registry add "@sinapse=https://dsystem.sinapse.org.br/r/styles/{style}/{name}.json"
pnpm dlx shadcn@latest add @sinapse/theme
pnpm dlx shadcn@latest add @sinapse/button --overwrite

O tema substitui os tokens do shadcn (cores, radius, fontes) pelos do Sinapse. Variáveis, utilitários e regras próprias do projeto continuam no CSS. Sem terminal interativo (agentes de IA, CI), acrescente --yes aos comandos add e init: sem ele, o CLI pergunta "Continue?", cancela sozinho e o pnpm ainda mostra "Done". O registry add não aceita --yes e não precisa dele. Se o projeto ainda não usa shadcn nem Tailwind v4 (por exemplo, Vite com CSS próprio), prepare antes: instale tailwindcss e @tailwindcss/vite, registre o plugin no vite.config e crie o alias @ para src no vite.config e em compilerOptions.paths do tsconfig (sem baseUrl, que o TypeScript 6 rejeita). Depois rode pnpm dlx shadcn@latest init https://dsystem.sinapse.org.br/r/base.json: o mesmo base.json do projeto novo, aplicado na pasta atual, instala o tema, o Button Sinapse, os ícones Tabler e o namespace @sinapse, e dispensa os comandos acima. Sem o base.json, o init pergunta a biblioteca e o estilo e, sem terminal, sai sem fazer nada. O passo a passo completo, com a troca do visual antigo, está em Migrar um app existente (/desenvolver/migrar).

3 · Componentes

Adicione componentes Sinapse

Cada comando instala o componente da sua stack com o tema Sinapse e, quando necessário, o Button Sinapse. Adicione um componente por vez ou vários no mesmo comando.

terminal

pnpm dlx shadcn@latest add @sinapse/button @sinapse/modal

src/App.tsx

import { IconPlus } from '@tabler/icons-react'
import { Button } from '@/components/ui/button'

export default function Page() {
  return (
    <main className="flex gap-3 p-8">
      <Button>
        <IconPlus />
        Salvar
      </Button>
      <Button variant="secondary">Editar</Button>
      <Button variant="outline">Revisar</Button>
    </main>
  )
}

O Button Sinapse já vem no projeto novo (base.json) e no passo 2 do projeto existente. Depois disso, se o CLI perguntar se deve sobrescrever o Button ao adicionar outro componente, responda N (sem terminal interativo, o CLI já pula o arquivo).

4 · Validação

Confira o tema no navegador

Rode o servidor de desenvolvimento e abra a página inicial. O botão padrão aparece contornado em coral com texto em azul institucional; com a classe .dark no <html>, os tokens mudam para o modo escuro.

terminal

pnpm dev

O projeto gerado pelo shadcn traz escolhas que não são do Sinapse. Ajuste: lang="pt-BR" no <html>; no Next, remova a fonte Geist do layout (ela sobrescreve a Open Sans do tema) e sirva a Open Sans localmente, por exemplo com @fontsource/open-sans; se vier next-themes, use attribute="class", defaultTheme="light" e enableSystem={false} (o modo escuro do Sinapse é pela classe .dark, não pela preferência do sistema); em Vite, passe o tema ao <Toaster> do sonner, que usa next-themes; use ícones Tabler, não lucide-react.

Próximos passos

Continue com a referência certa

Comece por aqui

Escolha entre o registry (shadcn) e a cópia do CSS (Astro/HTML).

Docs shadcn Vite

Instalação oficial para React + Vite.

Componentes

Cada página traz o comando @sinapse do componente.