Template starter · MIT · v0.0.0

Um design system,
quatro stacks sincronizadas.

Template open-source para fundar seu próprio design system multi-stack. React, Vue, Svelte e Vanilla TS compartilhando tokens, temas, conteúdo trilíngue e 50+ componentes acessíveis (WCAG 2.1 AA).

Use este template Ver Storybooks ao vivo
4
Stacks sincronizadas
50+
Componentes acessíveis
3
Idiomas (pt-BR · en · es)
WCAG
2.1 AA + axe-playwright

Storybooks ao vivo

Cada stack tem sua instância de Storybook 10 com as mesmas categorias de componentes, foundations e docs page trilíngue.

⚛️
React
@base-ui/react · Tailwind 4
Abrir Storybook
 💚
Vue
reka-ui · Tailwind 4
Abrir Storybook
 🧡
Svelte 5
bits-ui · Tailwind 4 · runes
Abrir Storybook
 🌿
Vanilla TS
.nds-* · zero framework CSS
Abrir Storybook

O que vem no template

Tudo que você precisa pra largar um design system production-ready: componentes, docs, testes, skills de automação e guidelines.

50+ componentes em 7 categorias
Layout, Navigation, Form, Feedback, Display, Tables, Disclosure, Overlay — implementados nas 4 stacks com paridade.
Sistema de tokens compartilhado
Tokens CSS em docs/shared/tokens/ consumidos pelas 4 stacks. Temas + densidades + fontes em CSS vars.
Docs trilíngue
Cada componente tem docs page de 15 seções em pt-BR / en / es via translations.json compartilhado.
A11y WCAG 2.1 AA verificado
axe-playwright roda em todas as stories via postVisit. Política rígida: zero it.skip.
Skills de automação
15+ skills Claude Code para escalar: /pipeline, /dev-react, /ux-writer, /quality, /cross-stack.
Patches versionados
Mudanças em @base-ui, reka-ui, bits-ui, sonner via patch-package + registry em patches.md.
CLI tipo shadcn
Nortear CLI permite copiar componentes vanilla TS no estilo npx nortear add button.
Guidelines decisórias
11 guidelines compartilhadas (a11y, tom de voz, SEO/GEO, analytics) + por categoria de componente.
Vitest + Chromatic
Browser-mode Vitest (Playwright) + visual regression integrado em todas as stacks.

Comece em 60 segundos

Use o template no GitHub e customize tokens, marca e componentes pra fundar seu próprio design system.

# 1. Crie um repo a partir do template
gh repo create meu-design-system \
  --template julianamucci/design-system --public

# 2. Instale a stack que vai usar
cd meu-design-system/design-system-react
npm install

# 3. Rode o Storybook
npm run storybook

A documentação completa está no README e em CONTRIBUTING.md.