Design system
Polaris Kit
Biblioteca de UI React acessível e composável. Componentes, design tokens e temas em um monorepo com Turborepo.
Explore o projeto
A documentação interativa mostra a biblioteca no Storybook. O repositório reúne os pacotes, a organização dos tokens e temas e o fluxo de desenvolvimento, testes e releases.
Tecnologias
React e TypeScript sustentam os componentes e suas interfaces públicas. Turborepo coordena o monorepo, e Storybook documenta a biblioteca em um ambiente interativo. Os pacotes de tokens e temas compartilham a linguagem visual, enquanto Vitest e Changesets participam do ciclo de testes e publicação.
- React
- TypeScript
- Storybook
- Turborepo
Sobre o projeto
Polaris Kit é uma biblioteca de UI React com foco em composição, acessibilidade e consistência visual. Em vez de concentrar todas as decisões em um único pacote, o projeto separa componentes, design tokens e temas. Essa organização permite que a base visual seja compartilhada entre interfaces, enquanto cada aplicação compõe os componentes de acordo com suas necessidades.
A biblioteca também é um projeto de infraestrutura para desenvolvimento de interfaces. O Storybook oferece um espaço para explorar os componentes, e a documentação publicada no Chromatic acompanha o código do monorepo. A proposta é aproximar uso, documentação e manutenção: quem constrói uma tela encontra os componentes e a mesma linguagem visual que orienta a biblioteca.
O que ele faz
- 01
Pacotes modulares para componentes React, design tokens e temas. Essa separação permite trabalhar na interface dos componentes e na linguagem visual sem misturar suas responsabilidades.
- 02
Sistema de temas claro e escuro apoiado em uma base visual compartilhada. Tokens e temas oferecem os elementos para manter cores e outras decisões de design coerentes entre as interfaces.
- 03
Documentação interativa no Storybook, publicada no Chromatic. A aplicação de documentação faz parte do monorepo e acompanha os componentes durante o desenvolvimento.
- 04
Testes com Vitest e um fluxo de versionamento e releases com Changesets. A integração contínua também reúne lint, verificação de tipos, build e publicação da documentação.
Como foi construído
O monorepo usa Turborepo e pnpm para organizar os pacotes e a aplicação de documentação. O pacote React reúne os componentes, o pacote de tokens concentra os valores de design e o pacote de temas oferece a base para os modos claro e escuro. Essa divisão torna explícito o papel de cada parte do sistema.
O fluxo de manutenção inclui testes com Vitest, verificação de tipos e build dos pacotes. Changesets organiza o versionamento e as releases, enquanto a integração contínua reúne essas etapas com a publicação do Storybook. A arquitetura segue a filosofia de composição e busca manter a experiência de quem utiliza e de quem desenvolve a biblioteca consistente.