Pular para o conteúdo
Sinapse Sinapse

React

Tutorial completo para usar Sinapse em React com Vite: projeto, Tailwind v4, tema inline, validação e primeiro botão com shadcn.

Tutorial por stack

React usa Sinapse como tema antes de entrar com shadcn

O fluxo fica explícito: primeiro o app Vite compila Tailwind e o tema inline gerado pela CLI, depois shadcn entra como biblioteca de componentes.

  1. 01 Crie ou abra um projeto React com Vite
  2. 02 Instale Tailwind v4, Vite plugin e alias @
  3. 03 Aplique o tema ITpS com o CLI
  4. 04 Valide os tokens antes do shadcn
  5. 05 Inicialize shadcn depois do CSS validado
  6. 06 Adicione só o Button e valide no App

1 · Projeto

Crie ou abra um projeto React com Vite

Se o projeto já existe, entre nele. Em projeto novo, use o template React + TypeScript para seguir o caminho esperado pelo shadcn.

terminal

pnpm create vite@latest meu-app --template react-ts
cd meu-app
pnpm install

2 · Tailwind v4

Instale Tailwind v4, Vite plugin e alias @

O Sinapse depende do Tailwind v4. O shadcn também espera alias @/* apontando para src, então já deixe o Vite e o TypeScript preparados.

terminal

pnpm add tailwindcss @tailwindcss/vite
pnpm add -D @types/node

vite.config.ts

import path from 'node:path'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

tsconfig.app.json (trecho)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Se o seu tsconfig já tem compilerOptions, adicione apenas baseUrl e paths dentro dele.

3 · CSS Sinapse

Aplique o tema ITpS com o CLI

Rode o CLI ITpS para instalar @itps/styles, escrever o tema inline no CSS global e remover blocos de tema shadcn que sobrescrevem os tokens.

terminal

pnpm dlx github:ITPS/sinapse-ui-cli init

estrutura sugerida

src/
├── App.tsx
└── index.css

src/index.css

@import "tailwindcss";

/* itps-theme:start */
/* tema ITpS gerado pela CLI */
/* itps-theme:end */

src/main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Enquanto os pacotes forem usados por tarball, rode pnpm --package=./itps-cli-0.3.0.tgz dlx itps init --package ./itps-styles-0.3.0.tgz.

4 · Validação Sinapse

Valide os tokens antes do shadcn

Confirme que o tema já está funcionando no React. Se o botão aparecer com azul institucional e texto contrastante, os tokens ITpS chegaram ao app.

src/App.tsx

export default function App() {
  return (
    <button
      type="button"
      className="rounded-md bg-primary px-4 py-2 text-primary-foreground"
    >
      Sinapse rodando
    </button>
  )
}

5 · Biblioteca

Inicialize shadcn depois do CSS validado

Agora rode o init. Quando a CLI perguntar por estilo, cor ou variáveis, mantenha uma base neutra: o visual final deve vir do CSS Sinapse.

terminal

pnpm dlx shadcn@latest init

Se o init do shadcn recriar blocos :root/.dark/@theme no CSS, rode pnpm dlx github:ITPS/sinapse-ui-cli init novamente para limpar e reaplicar o tema ITpS.

6 · Primeiro componente

Adicione só o Button e valide no App

Use o Button como teste de integração. Depois de adicionar o componente, rode o comando individual da CLI para adicionar as variants itps sem alterar as variants originais do shadcn.

terminal

pnpm dlx shadcn@latest add button
pnpm dlx github:ITPS/sinapse-ui-cli add button

src/App.tsx

import { Button } from '@/components/ui/button'

export default function App() {
  return <Button variant="itps">Sinapse rodando</Button>
}

O comando add é por componente: pnpm dlx github:ITPS/sinapse-ui-cli add button adapta só o Button. Ele não instala todos os componentes; para outros componentes documentados, use pnpm dlx github:ITPS/sinapse-ui-cli add <nome>. Quando não houver adapter de patch, o comando confirma o contrato theme-only sem alterar arquivos.

Próximos passos

Continue com a referência certa

Comece por aqui

Volte ao tutorial dos 3 arquivos e do primeiro botão.

Docs shadcn Vite

Instalação oficial para React + Vite.

Button Sinapse

Referência visual do primeiro componente validado.