Componentes

Hierarquia tipográfica para títulos, textos e conteúdo auxiliar.

Tokens de cor por família, com o valor resolvido nos temas claro e escuro lado a lado.

Alterna o tema global claro e escuro com preferência persistida.

Define direção LTR ou RTL para árvores inteiras de interface.

Ícones Lucide com tamanhos padrão, semântica de estado e regras de acessibilidade.

Container, Row e Col com spans responsivos e gutter por token.

Barra de navegação superior com marca, links fixos e colapso mobile.

Classes utilitárias de display, flex, texto e espaçamento, sempre baseadas em tokens.

Agrupa label, descrição, controle e mensagem de erro acessível.

Rótulo flutuante, fieldset e campo horizontal para formulários densos.

Entrada textual consistente para formulários e filtros.

Entrada de texto multilinha com estados semânticos.

Seleção nativa estilizada para opções simples.

Seleção booleana com label, descrição e estado parcial.

Escolha única entre opções mutuamente exclusivas.

Ativa ou desativa uma configuração imediatamente.

Seleciona valor único ou intervalo em uma escala.

Busca e seleciona opções em listas extensas.

Seleciona uma data em popover com calendário acessível.

Entrada segmentada para códigos de autenticação.

Combina entrada, prefixos, sufixos e ações em um único controle.

Rótulo acessível e consistente para controles de formulário.

Select HTML nativo estilizado, ideal para formulários simples e mobile.

Seletor composto para opções ricas com estado controlado.

Ação principal com variantes, tamanhos e estado de carregamento.

Controle pressionável para preferências binárias.

Agrupa toggles relacionados em uma escolha visual.

Menu de ações associado a um botão disparador.

Ações contextuais abertas com botão direito ou toque longo.

Busca rápida de comandos e navegação por teclado.

Botão de fechar acessível para painéis, modais e cartões.

Agrupa ações relacionadas sem duplicar bordas ou espaçamento.

Barra de menus para comandos densos em aplicações desktop-like.

Mensagem persistente de informação, sucesso, aviso ou erro.

Rótulo compacto para status, categorias e metadados.

Feedback temporário disparado após uma ação.

Comunica progresso mensurável de uma operação.

Indica espera breve quando não há progresso mensurável.

Reserva a estrutura do conteúdo durante carregamento.

Explica ausência de dados e oferece o próximo passo.

Descrição curta para controles compactos ou somente ícone.

Indicador visual compacto para estado, presença e legenda.

Agrupa conteúdo e ações semanticamente relacionadas.

Alterna painéis relacionados sem navegar para outra página.

Expande e recolhe blocos de conteúdo vertical.

Mostra localização e hierarquia dentro da aplicação.

Navega por conjuntos extensos de resultados.

Navegação principal recolhível para aplicações operacionais.

Área com rolagem controlada e visual consistente.

Primitivos para conversas com mensagens ricas, anexos e composer.

Preserva proporções de imagens, vídeos e previews responsivos.

Balão de mensagem reutilizável para usuário, assistente e sistema.

Navegação acessível por uma sequência responsiva de conteúdos.

Exibe ou oculta uma região preservando contexto e acessibilidade.

Fluxos e diagramas com nós, arestas, controles e minimapa, tematizados por tokens.

Lista vertical com ícone, conteúdo, estado ativo e item desabilitado.

Mídia com legenda semanticamente associada ao conteúdo.

Imagem responsiva com object-fit e raio por atributos.

Destaca a seção visível na navegação durante a rolagem.

Linha composta para listas com mídia, conteúdo e ações.

Região rolável e anunciável para fluxos de mensagens.

Navegação principal com links, painéis ricos e estado ativo.

Painéis redimensionáveis por ponteiro ou teclado.

Divisor visual horizontal ou vertical, sem ruído semântico.

Estrutura semântica para dados tabulares simples.

Tabela operacional com busca, ordenação e paginação.

Visualização mensal e seleção acessível de datas.

Gráfico de barras acessível com tooltip por categoria.

Barras horizontais interativas para rankings e comparação.

Linha temporal com crosshair e tooltip para cada ponto.

Área interativa para destacar volume e tendência acumulada.

Distribuição proporcional com destaque e tooltip por segmento.

Composição circular interativa com total e legenda.

Tendência compacta com inspeção de cada ponto.

Representa pessoas com imagem ou iniciais de fallback.

Representa arquivos anexados com metadados e ação de remoção.

Tarefa focada que bloqueia temporariamente o conteúdo de fundo.

Confirma uma ação crítica ou irreversível.

Bottom sheet ou painel offcanvas para edição ou criação contextual.

Painel offcanvas em posições start, end ou top; vira bottom sheet no mobile.

Conteúdo complementar ancorado a um controle.

Preview rico revelado por hover ou foco de teclado.

Painel modal lateral para tarefas contextuais extensas.