Biblioteca de componentes do TesselHub. Cada peça usa os tokens do design system e funciona nos temas claro e escuro. A cor primária é escolhida pelo tenant — troque nas bolinhas acima e veja a interface inteira acompanhar.
Conteúdo do card. Use header, body e footer conforme necessário. Well · destaque
Tudo se encaixa
Gradiente sutil, brilho superior e sombra longa.
07 Tabs
A aba ativa usa a cor de ação do tenant. Navegue com ← → : só a aba selecionada recebe Tab.
08 Tabela de dados
Parceiros credenciados e estado da conciliação
Parceiro
Módulo
Volume
Estado
Bahia Log
Operações
R$ 12.480
Conciliado
Norte Cargas
Financeiro
R$ 8.120
Pendente
Sul Trânsito
Credenciamento
R$ 3.940
Falha
09 Modal · Drawer
Os dois prendem o foco enquanto abertos, fecham no Esc e devolvem o foco ao botão que os abriu.
10 Alertas · Toasts
Sincronização agendada
A próxima carga acontece às 03h00.
Conciliação concluída
1.284 lançamentos foram conferidos.
Pendências abertas
37 lançamentos aguardam revisão.
Falha na integração
Não foi possível conectar ao parceiro Sul Trânsito.
11 Menu · Breadcrumb · Paginação
12 Progresso · Spinner · Skeleton
13 Acordeão
O tenant escolhe uma única cor. O ThemeService escreve --brand-primary no <html> e toda a rampa (hover, press, washes, tom claro) é recalculada em CSS a partir dela — nenhum componente carrega um hex de marca.
O texto sobre a marca é escolhido por razão de contraste WCAG: uma marca clara recebe rótulo em tinta escura em vez de branco, então o botão primário continua legível.
Não. O tema escuro remapeia só as superfícies e os textos neutros. A rampa da marca continua derivando da mesma seed, então a identidade do tenant atravessa os dois temas.
14 Calendário
julho de 2026
Dom Seg Ter Qua Qui Sex Sáb
Navegue com as setas: ← → andam um dia, ↑ ↓ uma semana, PageUp e PageDown trocam de mês. Só um dia por vez recebe Tab.
15 Stepper
Dados (concluída)
2 Documentos (etapa atual)
3 Revisão (pendente)
4 Envio (pendente)
16 Empty state
Nenhum módulo por aqui
Crie o primeiro módulo para começar a montar o mosaico.