MSDR UI Kit

Design system e projeto-template frontend para SaaS, dashboards e backoffices. Construído sobre shadcn/ui com Base UI, no estilo Maia.

Por onde começar

Cada área documenta o que existe no código — não uma versão idealizada dele.

Cores e brand

Uma variável controla a identidade. Todos os estados derivam dela.

Tipografia

Escala semântica em Plus Jakarta Sans.

Elevação

Sombra representa elevação, não decoração.

Componentes

Primitives do shadcn e componentes MSDR, por categoria.

Blocks

Shell, dashboard, tabelas, settings, auth, billing.

Motion

Durações, curvas e reduced motion.

Princípios

Clean antes de decorativo

Hierarquia vem de espaçamento, tipografia e superfície. Sombra só quando algo realmente flutua.

Compatível com shadcn

Nomes, composição e props preservados. Customização por token e variant, não por fork da API.

Estados sempre cobertos

Nenhum bloco importante existe só no happy path: loading, empty, error e success fazem parte do componente.

Removível

Este showroom vive inteiro em (showroom). Apagar a pasta não quebra a aplicação.

Para trocar a identidade do produto inteiro, altere --brand em src/styles/tokens.css. Todo o resto — hover, active, container, ring, sidebar e a primeira série dos gráficos — é derivado automaticamente.