# Comece por aqui

Instale o Sinapse DS pelo registry do shadcn (React, Next.js, Vue, Nuxt) ou copie o CSS (Astro, HTML) e valide o primeiro botão.

## React, Next.js, Vue e Nuxt: registry Sinapse

O registry entrega tema, ícones Tabler e componentes pelo CLI da sua stack. Configure uma vez por projeto; cada página de componente traz o comando para instalá-lo. O tema substitui os tokens do shadcn e preserva variáveis e regras próprias do projeto.

React e Next.js (shadcn/ui):

```bash
# projeto novo (Next.js; use -t vite para React + Vite)
pnpm dlx shadcn@latest init https://dsystem.sinapse.org.br/r/base.json -t next -n meu-app

# projeto shadcn existente
pnpm dlx shadcn@latest registry add "@sinapse=https://dsystem.sinapse.org.br/r/styles/{style}/{name}.json"
pnpm dlx shadcn@latest add @sinapse/theme
```

Vue 3 e Nuxt 4 (shadcn-vue):

```bash
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/theme.json
```

Guias: `/desenvolver/react.md`, `/desenvolver/next.md`, `/desenvolver/vue.md`, `/desenvolver/nuxt.md`.

## Astro e HTML: CSS versionado

Baixe os arquivos versionados (ou copie o conteúdo na página `/comecar`), importe no CSS principal depois do Tailwind e valide o primeiro botão Sinapse.

```bash
mkdir -p src/styles/sinapse/fonts && for f in index.css tokens.css components.css icons.css fonts/tabler-icons.woff2; do curl -fsSL -o "src/styles/sinapse/$f" "https://dsystem.sinapse.org.br/css/0.9.0/$f"; done
```

Em HTML sem build, use o CSS pré-compilado (tokens, classes itps-* e ícones, sem utilitários do Tailwind):

```html
<link rel="stylesheet" href="https://dsystem.sinapse.org.br/css/0.9.0/sinapse.min.css">
```

## Fluxo

1. Confirme Tailwind v4.
2. Baixe os arquivos CSS Sinapse com o comando acima (5 arquivos, com ícones) ou copie `tokens.css`, `components.css` e `index.css` da página `/comecar` (sem ícones).
3. Importe Tailwind primeiro e Sinapse depois.
4. Valide com os botões do Design System.
5. Escolha o guia da sua stack.

## 1. Pré-requisito

O Sinapse DS depende do Tailwind v4. Os mapeamentos `@theme inline` e utilitários `@utility` são recursos da v4.

## 2. Arquivos CSS

Crie uma pasta equivalente a:

```txt
src/
└── styles/
    ├── global.css
    └── sinapse/
        ├── tokens.css
        ├── components.css
        └── index.css
```

Baixe `tokens.css`, `components.css` e `index.css` de `/css/0.9.0/` com o comando da seção "Astro e HTML" acima, ou copie o conteúdo na página `/comecar`. O Markdown não repete os arquivos para não ficar pesado demais.

## 3. CSS principal

```css
@import "tailwindcss";
@import "./sinapse/index.css";
```

Se o CSS principal estiver em outra pasta, ajuste apenas o caminho relativo.

## 4. Validação

```html
<button type="button" class="itps-btn itps-btn--outline">
  <i class="ti ti-plus" aria-hidden="true"></i>
  Adicionar
</button>

<button type="button" class="itps-btn itps-btn--outline">
  Avançar
  <i class="ti ti-arrow-right" aria-hidden="true"></i>
</button>

<button type="button" class="itps-btn itps-btn--outline">
  <i class="ti ti-download" aria-hidden="true"></i>
  Baixar relatório
  <i class="ti ti-external-link" aria-hidden="true"></i>
</button>
```

Se os botões aparecerem com o visual Sinapse, o CSS local está funcionando.

## 5. Próximo passo

Depois da validação, siga o guia da sua stack:

- React: `/desenvolver/react`
- Next.js: `/desenvolver/next`
- Vue 3: `/desenvolver/vue`
- Nuxt 4: `/desenvolver/nuxt`
- Astro: `/desenvolver/astro`
- HTML: `/desenvolver/html`