Astro — Sinapse Design System

Tutorial por stack

Astro usa o CSS Sinapse com Tailwind v4

Astro não usa o registry do shadcn: o CSS Sinapse entra como arquivos versionados baixados do site, e os componentes Astro aplicam as classes itps-*.

01 Crie ou abra um projeto Astro com Tailwind v4
02 Baixe o CSS versionado e importe depois do Tailwind
03 Crie componentes Astro com as classes itps-*
04 Confira o tema no navegador

1 · Projeto

Crie ou abra um projeto Astro com Tailwind v4

Em projeto novo, use o starter oficial. Registre o plugin do Tailwind v4 em vite.plugins no astro.config.mjs.

terminal

pnpm create astro@latest meu-app
cd meu-app
pnpm add tailwindcss @tailwindcss/vite

astro.config.mjs

import { defineConfig } from 'astro/config'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})

2 · CSS Sinapse

Baixe o CSS versionado e importe depois do Tailwind

O comando baixa tokens, componentes, ícones e a fonte Tabler para src/styles/sinapse. Importe o Sinapse no CSS global, sempre depois do Tailwind, e carregue o CSS global no layout.

terminal

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

src/styles/global.css

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

src/layouts/BaseLayout.astro

---
import '../styles/global.css'
---

<html lang="pt-BR">
  <body>
    <slot />
  </body>
</html>

A versão 0.9.0 fica fixa no comando. Para atualizar, troque a versão e rode de novo; /css/latest/ acompanha sempre a versão atual, mas, em produção, prefira a versão fixa.

3 · Componente

Crie componentes Astro com as classes itps-*

Componentes Astro ficam como camada fina sobre as classes do Design System. Cada página de componente traz o HTML pronto para copiar correspondente.

src/components/Button.astro

---
interface Props {
  label?: string
}

const { label = 'Sinapse rodando' } = Astro.props
---

<button type="button" class="itps-btn itps-btn--primary">{label}</button>

4 · Validação

Confira o tema no navegador

Rode o servidor de desenvolvimento e abra uma página que use o componente. 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

Próximos passos

Continue com a referência certa

Comece por aqui

Registry para shadcn e CSS para Astro/HTML.

Tailwind no Astro

Instalação oficial do Tailwind v4 com Astro.

Componentes

Cada página traz o HTML pronto para copiar do componente.