# Sinapse Design System > Design system from Instituto Todos pela Saúde (ITpS). React, Next.js, Vue 3 and Nuxt 4 install it through a shadcn/shadcn-vue registry served by this site; Astro and plain HTML copy its CSS. Site: https://dsystem.sinapse.org.br Current version: 0.9.0 License: proprietary, for ITpS products only. Do not use Sinapse in non-ITpS products or republish it to public package registries. Every page listed below has a clean Markdown version at the linked `.md` URL. ## Install **React and Next.js (shadcn/ui)** - New project: `pnpm dlx shadcn@latest init https://dsystem.sinapse.org.br/r/base.json -t next -n meu-app` (use `-t vite` for React + Vite). Creates the app with the Sinapse theme, Tabler icons and the `@sinapse` namespace. - Existing shadcn project: `pnpm dlx shadcn@latest registry add "@sinapse=https://dsystem.sinapse.org.br/r/styles/{style}/{name}.json"` then `pnpm dlx shadcn@latest add @sinapse/theme` and `pnpm dlx shadcn@latest add @sinapse/button --overwrite`. - Existing React app without shadcn: set up Tailwind v4 and the `@` alias (`compilerOptions.paths`, no `baseUrl`), then `pnpm dlx shadcn@latest init https://dsystem.sinapse.org.br/r/base.json` in the project folder. Full guide: https://dsystem.sinapse.org.br/desenvolver/migrar.md. - Components: `pnpm dlx shadcn@latest add @sinapse/`, for example `pnpm dlx shadcn@latest add @sinapse/button`. **Vue 3 and Nuxt 4 (shadcn-vue)** - New project: `pnpm dlx shadcn-vue@latest init -t vite -n meu-app --base reka --style nova --icon-library tabler --font inter -b neutral` (use `-t nuxt` for Nuxt 4; on Node 22 run `npm install -g npm@11` first, the bundled npm 10 fails installing the Nuxt template), then `pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/theme.json`. - Existing shadcn-vue project: `pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/theme.json`. - Existing Vue app without shadcn-vue: set up Tailwind v4 and the `@` alias, then `pnpm dlx shadcn-vue@latest init --base reka --style nova --icon-library tabler --font inter -b neutral` and `pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/theme.json`. Full guide: https://dsystem.sinapse.org.br/desenvolver/migrar.md. - Components: `pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/.json`. **Astro and plain HTML** - With Tailwind v4 (Astro, Vite): download the versioned sources with `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/latest/$f"; done`, then add `@import "tailwindcss";` followed by `@import "./sinapse/index.css";` to `src/styles/global.css` (adjust the relative path if the main CSS lives elsewhere). - Without a build step: `` gives tokens, `itps-*` classes and icons (no Tailwind utilities). - Pin a version instead of `latest` in products (for example `/css/0.9.0/`); released versions stay available. ## Rules for AI assistants - Tailwind v4 is required; `@import "tailwindcss";` must come before any Sinapse CSS. - Without an interactive terminal (agents, CI), add `--yes` to shadcn and shadcn-vue `add` and `init`: otherwise the CLI asks "Continue?", cancels, and pnpm still prints "Done". `registry add` does not accept `--yes` and does not need it. - To bring an existing React, Next.js or Vue app without shadcn or Tailwind to Sinapse, follow `/desenvolver/migrar.md` on the DS site: Tailwind and the `@` alias first, then `init`, then remove the old CSS variables, colors, fonts and icons. - Install the Sinapse theme before components: the registry theme only replaces existing shadcn tokens when it is added directly (or through `r/base.json`). - Use the Sinapse Button in shadcn projects: `variant="itps"` (main action), `variant="itpsSecondary"` (support action) and `variant="ghost"` (discreet action, such as Cancelar in a dialog); `default` and `secondary` render the same look. The registry index lists the item as `sinapse-button`; install it as `@sinapse/button`. New projects get it from `base.json`; in an existing project run `add @sinapse/button --overwrite` once to replace the stock button. After that, if the CLI asks to overwrite the button while adding another component, answer no. - For status labels, KPI or map overlays and search fields in shadcn projects, use the Sinapse `Tag`, `DataOverlay` and `Search` (`add @sinapse/tag`, `@sinapse/data-overlay`, `@sinapse/search`): they carry the Sinapse variants. Do not rebuild them from Badge, Card or InputGroup. Other items install stock shadcn components with the Sinapse theme only; `itps-*` variants on those pages exist in HTML only (llms.txt and the "Em cada stack" section of each component page say which is which). - Interface text is pt-BR. Stock shadcn Dialog and Sheet ship an English "Close" label (screen-reader text and footer button): change it to "Fechar" in the installed files. - Use Tabler icons: `@tabler/icons-react` or `@tabler/icons-vue` in shadcn projects, the `ti ti-*` webfont classes in Astro/HTML. - Prefer semantic tokens (`bg-background`, `text-foreground`, `bg-primary`, `border-border`, `bg-brand`) over raw colors or primitive `--itps-*` tokens. - Coral `brand` and `destructive` are for borders, icons and backgrounds; as text they fail WCAG AA on light surfaces. For coral or error text use `text-brand-text` or `text-destructive-text`, and for success text `text-success-text`. - In Astro and plain HTML, reuse `itps-*` component classes (for example `itps-btn itps-btn--primary`) instead of re-creating component styles. - Dark mode is class-based: toggle the `.dark` class on ``; do not rely on `prefers-color-scheme`. - Components such as `DocPreview`, `CopyCode` and `SectionLayout` belong to the documentation site, not to the design system. Never install or copy them. - Do not install `@itps/styles` from npm: it is not published. Use the site registry (shadcn stacks) or the CSS copy flow (Astro/HTML). - Sinapse is licensed for ITpS products only. Do not use it in other products or republish it. - Brand: in shadcn/shadcn-vue projects add the `sinapse-logo` item and render `` (official artwork, negative in dark mode); for image files (Astro/HTML, favicons, documents) use only the official SVGs from `/brand/sinapse/` on the DS site. Color version on light backgrounds, negative on dark or brand-colored ones, at least 100 px wide for the logo and 24 px for the symbol. Never redraw a logo, rebuild it with text, distort, rotate, recolor it or add effects. - Write the name as `Sinapse` (only the first letter uppercase) and the DS as `Sinapse Design System`. Do not use the Itaú Display font: it belongs to Itaú and only appears inside the logo artwork; interfaces use Open Sans (`--font-sans`). - The Sinapse logo identifies Sinapse products. Other ITpS products show their own name or logo and do not use the Sinapse logo. Rules and downloads: `/fundamentos/marca.md` on the DS site. - Every ITpS product carries the ITpS brand twice: the header shows the ITpS symbol, a divider and the product name or logo (`ItpsLockup`, or the `itps-brand-lockup` classes in Astro/HTML), and the last line of the footer is the ITpS signature line (`ItpsSignature`, or the `itps-signature` classes). Add the `itps-brand` item in shadcn/shadcn-vue projects; in Astro/HTML use the SVGs from `/brand/itps/`. The signature line is mandatory; keep its text as is. ## Guides - [Comece por aqui](https://dsystem.sinapse.org.br/comecar.md): Registry setup for shadcn stacks and CSS copy for Astro/HTML. - [React](https://dsystem.sinapse.org.br/desenvolver/react.md): React + Vite with the shadcn registry. - [Next.js](https://dsystem.sinapse.org.br/desenvolver/next.md): Next.js with the shadcn registry. - [Vue 3](https://dsystem.sinapse.org.br/desenvolver/vue.md): Vue 3 + Vite with the shadcn-vue registry. - [Nuxt 4](https://dsystem.sinapse.org.br/desenvolver/nuxt.md): Nuxt 4 with the shadcn-vue registry. - [Astro](https://dsystem.sinapse.org.br/desenvolver/astro.md): Astro with the copied Sinapse CSS. - [HTML](https://dsystem.sinapse.org.br/desenvolver/html.md): Plain HTML with the copied Sinapse CSS. - [Usar com IA](https://dsystem.sinapse.org.br/desenvolver/ia.md): llms.txt, Markdown pages, the shadcn MCP server and the agent rules item. - [Migrar um app existente](https://dsystem.sinapse.org.br/desenvolver/migrar.md): Existing React, Next.js or Vue app without shadcn or Tailwind: setup, theme, replacing the old look, font, icons and a final checklist. ## Components In React/Vue, "Sinapse component" items ship the page's variants as code; the others install the listed stock shadcn components with only the Sinapse theme, so `itps-*` variants on those pages exist in HTML only. - [Avatar](https://dsystem.sinapse.org.br/componentes/avatar.md): Representação visual de uma pessoa, empresa ou sistema, com imagem, iniciais ou ícone. React/Vue: stock shadcn avatar with the Sinapse theme. - [Banner](https://dsystem.sinapse.org.br/componentes/banner.md): Mensagem persistente em largura total para status global, manutenção ou ação requerida. React/Vue: stock shadcn alert with the Sinapse theme. - [Breadcrumb](https://dsystem.sinapse.org.br/componentes/breadcrumb.md): Navegação hierárquica horizontal com página atual e composição shadcn. React/Vue: stock shadcn breadcrumb with the Sinapse theme. - [Button](https://dsystem.sinapse.org.br/componentes/button.md): Ação principal e ações de apoio com o contrato copy-first ou shadcn. React/Vue: Sinapse component. - [Callout](https://dsystem.sinapse.org.br/componentes/callout.md): Mensagem contextual dentro de uma seção, card ou fluxo de formulário. React/Vue: stock shadcn alert with the Sinapse theme. - [Card](https://dsystem.sinapse.org.br/componentes/card.md): Contêiner para agrupar informações relacionadas. React/Vue: stock shadcn card with the Sinapse theme. - [Checkbox](https://dsystem.sinapse.org.br/componentes/checkbox.md): Controle para consentimento, seleção múltipla e opções submetidas em formulário. React/Vue: stock shadcn checkbox with the Sinapse theme. - [Chip](https://dsystem.sinapse.org.br/componentes/chip.md): Controle compacto para filtro, seleção, remoção ou atalho. React/Vue: stock shadcn toggle-group with the Sinapse theme. - [Data Overlay](https://dsystem.sinapse.org.br/componentes/data-overlay.md): Card compacto para KPI, contexto de mapa ou widget de monitoramento. React/Vue: Sinapse component. - [Feature Card](https://dsystem.sinapse.org.br/componentes/feature-card.md): Card de destaque para atalhos, CTAs de seção e chamadas de recurso. React/Vue: stock shadcn card with the Sinapse theme and the Sinapse button. - [Field](https://dsystem.sinapse.org.br/componentes/field.md): Grupo semântico de label, controle, texto de apoio e erro para campos de formulário. React/Vue: stock shadcn field, input with the Sinapse theme. - [Footer](https://dsystem.sinapse.org.br/componentes/footer.md): Rodapé padrão para páginas institucionais e produtos do ITpS. React/Vue: stock shadcn separator with the Sinapse theme and the Sinapse button. - [Link](https://dsystem.sinapse.org.br/componentes/link.md): CTA inline com indicador de seta para continuidade de leitura e navegação contextual. React/Vue: composed from the Sinapse button. - [Modal](https://dsystem.sinapse.org.br/componentes/modal.md): Diálogo centralizado para decisões, confirmação e conteúdo que bloqueia o fluxo. React/Vue: stock shadcn dialog with the Sinapse theme and the Sinapse button. - [Nav Icon](https://dsystem.sinapse.org.br/componentes/nav-icon.md): Iconografia compacta para navegação, cabeçalhos e menus. React/Vue: composed from the Sinapse button. - [Pagination](https://dsystem.sinapse.org.br/componentes/pagination.md): Controles de navegação entre páginas com contrato copy-first e composição shadcn. React/Vue: stock shadcn pagination with the Sinapse theme. - [Risk Classification](https://dsystem.sinapse.org.br/componentes/risk-classification.md): Widget para percentual de risco, tag somente leitura e análise textual. React/Vue: stock shadcn card, badge with the Sinapse theme. - [Search](https://dsystem.sinapse.org.br/componentes/search.md): Campo de busca em pílula com ícone, rótulo opcional e botão de limpar. React/Vue: Sinapse component. - [Select](https://dsystem.sinapse.org.br/componentes/select.md): Lista de seleção com gatilho personalizado, listbox flutuante e suporte a teclado. React/Vue: stock shadcn select with the Sinapse theme. - [Side Panel](https://dsystem.sinapse.org.br/componentes/side-panel.md): Painel lateral para inspeção, edição contextual e navegação sem abandonar a página atual. React/Vue: stock shadcn sheet, tabs with the Sinapse theme and the Sinapse button. - [Switch](https://dsystem.sinapse.org.br/componentes/switch.md): Controle booleano para preferência com efeito imediato. React/Vue: stock shadcn switch with the Sinapse theme. - [Tabs](https://dsystem.sinapse.org.br/componentes/tabs.md): Alternância de conteúdo relacionado com lista de abas, gatilhos e painéis. React/Vue: stock shadcn tabs with the Sinapse theme. - [Tag](https://dsystem.sinapse.org.br/componentes/tag.md): Indicador somente leitura para estado, classificação ou rótulo curto. React/Vue: Sinapse component. - [TextField](https://dsystem.sinapse.org.br/componentes/textfield.md): Campo de texto em pílula (HTML copy-first) e Input compatível com shadcn. React/Vue: stock shadcn input with the Sinapse theme. - [Toast](https://dsystem.sinapse.org.br/componentes/toast.md): Notificação flutuante para feedback transitório após uma ação do usuário. React/Vue: stock shadcn sonner with the Sinapse theme and the Sinapse button. - [Tooltip](https://dsystem.sinapse.org.br/componentes/tooltip.md): Ajuda curta exibida ao passar o mouse ou focar um gatilho. React/Vue: stock shadcn tooltip with the Sinapse theme and the Sinapse button. - [Wavy Divider](https://dsystem.sinapse.org.br/componentes/wavy-divider.md): Divisor ondulado decorativo (SVG) para separar seções longas. React/Vue: stock shadcn separator with the Sinapse theme. ## Styles - [Cores](https://dsystem.sinapse.org.br/estilos/cores.md): Sistema em duas camadas: paletas primitivas do Figma e tokens semânticos compatíveis com shadcn. - [Efeitos](https://dsystem.sinapse.org.br/estilos/efeitos.md): Sombras e blur. O Figma os agrupa como estilos de efeito; o DS os expõe como tokens e utilitários. - [Espaçamento](https://dsystem.sinapse.org.br/estilos/espacamento.md): Tokens dimensionais: container, form-height, margens, spacing e telas de referência. Escala de 4px sobre Tailwind v4. - [Ícones](https://dsystem.sinapse.org.br/estilos/icones.md): Curadoria Tabler Icons com orientação por stack. Use componentes SVG em frameworks e webfont local apenas quando fizer sentido. - [Radius](https://dsystem.sinapse.org.br/estilos/radius.md): Cantos arredondados em duas camadas: escala Tailwind v4 e tokens semânticos por uso. - [Tipografia](https://dsystem.sinapse.org.br/estilos/tipografia.md): Open Sans como preferência tipográfica, com fallback de sistema e sem dependência remota no runtime. - [Tokens](https://dsystem.sinapse.org.br/estilos/tokens.md): Referência completa dos tokens semânticos que componentes consomem via utilitários Tailwind. Para paletas primitivas, veja /estilos/cores. ## Foundations - [Acessibilidade](https://dsystem.sinapse.org.br/fundamentos/acessibilidade.md): WCAG AA por padrão. Cada componente do sistema implementa um padrão ARIA documentado. - [Estados](https://dsystem.sinapse.org.br/fundamentos/estados.md): Hover, focus, active, selected, disabled, loading, error. - [Grid](https://dsystem.sinapse.org.br/fundamentos/grid.md): Uso do grid do Tailwind para colunas, gaps, breakpoints e composição responsiva no Sinapse DS. - [Layout](https://dsystem.sinapse.org.br/fundamentos/layout.md): Composição, densidade e regiões canônicas para as páginas dos produtos do ITpS. - [Marca](https://dsystem.sinapse.org.br/fundamentos/marca.md): Como usar as marcas Sinapse e ITpS nos produtos: versões, cores, área de proteção, tamanhos, fundos e usos indevidos, com os arquivos oficiais. - [Movimento](https://dsystem.sinapse.org.br/fundamentos/movimento.md): Tailwind como padrão para transições, durações, easings, animações simples e movimento reduzido no Sinapse DS. ## Data visualization - [Acessibilidade e números](https://dsystem.sinapse.org.br/visualizacao-de-dados/acessibilidade.md): Contraste, cor, alternativa em texto e números em pt-BR - [Escolher o gráfico](https://dsystem.sinapse.org.br/visualizacao-de-dados/escolher-o-grafico.md): Que gráfico responde a cada pergunta, biblioteca por stack e moldura ## Registry - [React registry index](https://dsystem.sinapse.org.br/r/registry.json): items for shadcn/ui; per-style copies under `/r/styles/{style}/`. - [Vue registry index](https://dsystem.sinapse.org.br/r/vue/registry.json): items for shadcn-vue. - [Base for new projects](https://dsystem.sinapse.org.br/r/base.json): theme, Tabler icons and the `@sinapse` namespace. ## Releases - [Changelog](https://dsystem.sinapse.org.br/changelog.md): changes and migration notes for each version. Registry items carry `meta.version`; `/css//` keeps every released version. ## Optional - [Full context](https://dsystem.sinapse.org.br/llms-full.txt): this file followed by the full Markdown of the start guide, stack guides, every component and the style, foundation and data visualization pages.