Blocks

Composições de alto nível prontas para copiar e usar em aplicações web. Cada block usa tokens semânticos e funciona automaticamente em dark mode.

Card

Container com header, conteúdo, footer e variante de métrica.

Campo de entrada com label, ícone, senha, erro e desabilitado.

Sidebar colapsável com logo, grupos de nav, ícones e seção do usuário.

Barra superior com hamburger, breadcrumb, busca, notificações e avatar.

Composição Sidebar + Top Nav + área de conteúdo.

Título + breadcrumb + descrição + ações com variantes simples e completo.

Grid de cards métricas para dashboards: imóveis, ocupação, receita.

Busca + selects de filtro + badges de filtros ativos.

Dropdown com avatar, nome, email, links de perfil/config e logout.

Ícone + título + descrição + CTA para estados vazios e erros.

Painel dropdown com lista de notificações lidas e não-lidas.

Card centralizado com logo, form de login e links auxiliares.

Cards de métricas com mini spark line SVG — tendência visual inline.

Lista ranqueada com barras de progresso — distribuição por cidade, canal ou categoria.

Gráfico de rosca SVG com legenda interativa — composição de portfólio e distribuição.

Gráfico de área SVG com múltiplas séries, legenda clicável e métricas de resumo.