Todo projeto de painel reconstrói a mesma camada: login, layout, tabelas, árvores, notificações, configurações, estados vazios e estados de erro. Depois disso, cores, espaçamentos e detalhes de interação divergem, e manter a consistência custa mais a cada página nova.

Reunimos essa camada em uma base reutilizável e a publicamos sob a licença MIT: admin-design, o design e a implementação de um painel padrão extraídos do frontend da plataforma Runlume.

O que está incluído

  • Tema e tokens semânticos: a cor passa apenas por classes utilitárias semânticas, seis paletas predefinidas se combinam com cor base e cor de tema, e os modos claro e escuro acompanham automaticamente.
  • Três estruturas de aplicação: navegação lateral, topo mais lateral e navegação superior. Largura da barra lateral, raio, transições de página e ordem das ações do cabeçalho são ajustáveis.
  • Nove páginas de componentes: controles básicos, formulários e seletores, exibição de dados, avisos e sobreposições, navegação e fluxos, métricas e gráficos, ícones, tema e configurações, e páginas padrão. A galeria funciona como documentação e como superfície de aceite.
  • Tipos de página padrão: painel de trabalho, lista, detalhe, configurações, central de notificações, login, cadastro e recuperação de senha.
  • Chinês e inglês de fábrica, acesso por teclado e opções de acessibilidade, além da mesma busca por paleta de comandos usada na documentação.

Três pontos de entrada

Para quem serve e onde está o limite

Serve para equipes que constroem o próprio painel e não querem escrever a interface do zero uma segunda vez: copie o repositório, altere o nome em package.json, troque o menu e os recursos de marca e aponte os dados de exemplo para a sua API.

O projeto contém apenas a camada de design e interação: sem APIs de negócio, sem implementação de autenticação, sem modelo de permissões e sem regras de negócio. Os dados de exemplo ficam em memória e são reiniciados ao recarregar. Recursos como identidade, upload, arraste em árvores e carregamento sob demanda entram por props, então conectar um serviço real é substituir o callback, não editar o componente.