Layout & chrome
CmAppShell
Use como estrutura raiz de sistemas administrativos quando a navegação lateral, o topo, o drawer mobile e a área rolável precisam se coordenar.
Import
import { CmAppShell } from "cosmemilton-ui/client";Shell administrativo completo
Exemplo com CmSidebar standalone, CmTopbar, ações, métricas e conteúdo rolável.
Pedidos
Acompanhe a fila, priorize pendências e mantenha o time alinhado.
Receita hoje
R$ 42,8k
↑ 12%vs. ontem
Pedidos
12818 aguardando ação
SLA
94%
↓ 3%últimas 24h
Fila de atendimento
Tempo médio 14minPedido #1048Acme Ltda. - aguardando separação
Pedido #1049Aurora Foods - pagamento confirmado
Pedido #1050Nimbus Tech - revisar endereço
Checklist do turno
Separação conferida12 pedidos liberados para expedição
Pendências fiscais3 notas exigem revisão antes do envio
Equipe de suporte5 conversas aguardam resposta
API rápida
Props principais de cada peça exportada.
CmAppShell
sidebartopbarchromedensitysidebarWidthcollapsedSidebarWidthheightcontentPaddingcontentClassNamemainClassName
Notas
Para uma navegação lateral pronta, passe CmSidebar com standalone no slot sidebar.
Se usar topbar customizada, passe uma função e renderize controls.mobileMenuButton para manter o drawer acessível no mobile.
CmAppShell controla altura e scroll interno. Use height quando estiver dentro de uma área demonstrativa; em apps reais o padrão ocupa a viewport.