Desenvolver
Desenvolver
Como consumir o Sinapse no seu stack. Distribuição = tokens CSS via @itps/styles. Componentes = HTML + classes Tailwind portáveis.
Status v0.1
Tokens CSS portáveis · workspace-only
O DS distribui apenas @itps/styles (CSS framework-agnostic).
Hoje package roda como pnpm workspace dependency dentro deste monorepo — consumo externo via git submodule ou copy direto dos arquivos .css.
npm publish quando ITpS Org no npmjs estiver setup.
Comece aqui
Guia cross-stack — install + snippets HTML/Tailwind universais. Funciona em qualquer framework.
Usando os tokens
Install do @itps/styles, padrão HTML+Tailwind portável, snippets de Button/Card/Banner/Form para Astro/Vue/Nuxt/React/Svelte/Solid.
Guias por stack
Receita passo a passo para cada framework, usando a biblioteca headless compatível com os semantic tokens Sinapse.
Vue 3 & Nuxt 4 — com shadcn-vue
Init shadcn-vue, importa @itps/styles e os componentes Vue herdam coral Sinapse automaticamente.
React & Next — com shadcn
Init shadcn, substitui globals.css por @itps/styles e os componentes React herdam o tema Sinapse.
HTML — com Preline
Vanilla HTML + Preline (data-attributes + classes Tailwind). Carregando @itps/styles os componentes Preline ficam Sinapse-coral.
Distribuição — CSS único, sem lib por framework
Sinapse entrega um contrato: tokens CSS via @itps/styles.
Cada framework consome com sua biblioteca headless preferida (shadcn-vue, shadcn, Preline, Reka, Radix) — e os componentes herdam o tema sem fork, sem patch, sem manter 4 packages paralelos.
Para componentes interativos (Modal, Dropdown, Tabs), use o engine headless do seu stack e aplique as classes Sinapse aos primitives.