# Publicar um painel padrão como código aberto: o que o admin-design cobre

Uma base de painel extraída do frontend de uma plataforma: tokens semânticos, estruturas de aplicação, componentes compartilhados, páginas padrão e galeria. Licença MIT.

> Runlume oferece recursos de plataforma, aplicativos independentes e serviços combináveis. Funções, cotas e entrega seguem o plano ou acordo. Aplicativos de negócios podem ser escolhidos separadamente; colaboração segue configuração e autorização.

Página original: https://runlume.app/pt-br/blog/admin-design-open-source

Guias para desenvolvedores · Painel padrão / Código aberto / Base de frontend

Publicado：2026-09-17 · Autor：Equipe Runlume

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

- Página de apresentação e visão geral do projeto: [adesign.runlume.app](https://adesign.runlume.app)
- Documentação, com notas de componentes e convenções de engenharia: [adoc.runlume.app](https://adoc.runlume.app)
- Demonstração ao vivo com duas contas de teste de permissões diferentes: [ago.runlume.app](https://ago.runlume.app)
- Código-fonte e issues: [github.com/runlume/admin-design](https://github.com/runlume/admin-design)

## 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.

## Páginas relacionadas

- [Plataforma](https://runlume.app/pt-br/platform)
- [Aplicativos de negócios](https://runlume.app/pt-br/apps)
- [Desenvolvedores](https://runlume.app/pt-br/developers)
- [Sobre o Runlume](https://runlume.app/pt-br/about)