Next.js — Sinapse Design System

Tutorial por stack

Next.js usa Sinapse como tema antes do shadcn

O fluxo separa pré-requisito e biblioteca: primeiro Next + Tailwind + tema inline gerado em globals.css, depois shadcn para componentes.

01 Crie ou abra um projeto Next.js
02 Confirme Tailwind no App Router
03 Aplique o tema ITpS com o CLI
04 Valide os tokens antes do shadcn
05 Inicialize shadcn depois do CSS validado
06 Adicione só o Button e valide em app/page.tsx

1 · Projeto

Crie ou abra um projeto Next.js

Em projeto novo, escolha TypeScript, App Router, Tailwind CSS e alias @/* nas perguntas do create-next-app. Em projeto existente, confirme esses pontos antes de seguir.

terminal

pnpm create next-app@latest meu-app
cd meu-app

2 · Tailwind v4

Confirme Tailwind no App Router

O create-next-app já pode criar o projeto com Tailwind. Se o projeto não tiver Tailwind configurado, faça isso antes do Sinapse; o CSS Sinapse depende de Tailwind v4.

pré-requisito

# Se o projeto Next já existe e não tem Tailwind:
# siga o guia oficial do Tailwind para Next antes de copiar o CSS Sinapse.

No Next, não duplique configuração se o create-next-app já preparou app/globals.css e o import no layout.

3 · CSS Sinapse

Aplique o tema ITpS com o CLI

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

terminal

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

estrutura sugerida

app/
├── globals.css
├── layout.tsx
└── page.tsx

app/globals.css

@import "tailwindcss";

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

app/layout.tsx

import './globals.css'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="pt-BR">
      <body>{children}</body>
    </html>
  )
}

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

Renderize um botão com utilities semânticas em app/page.tsx. Se o azul institucional, texto contrastante e radius aparecerem, o tema está carregando no App Router.

app/page.tsx

export default function Page() {
  return (
    <main className="min-h-screen p-8">
      <button
        type="button"
        className="rounded-md bg-primary px-4 py-2 text-primary-foreground"
      >
        Sinapse rodando
      </button>
    </main>
  )
}

5 · Biblioteca

Inicialize shadcn depois do CSS validado

Agora rode o init do shadcn. Preserve o app/globals.css com Tailwind primeiro e Sinapse depois; não troque o contrato visual por outro tema.

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 em app/page.tsx

Comece pelo Button para confirmar alias, componente gerado e tokens. 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

app/page.tsx

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

export default function Page() {
  return (
    <main className="min-h-screen p-8">
      <Button variant="itps">Sinapse rodando</Button>
    </main>
  )
}

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 Next

Instalação oficial para Next.js.

Button Sinapse

Referência visual do primeiro componente validado.