Componentes

Lista de seções expansivas para perguntas frequentes, filtros e detalhes progressivos.

Mensagem contextual com tom semântico, ação opcional e modo descartável.

Confirmação acionada por trigger render-prop para ações destrutivas ou sensíveis.

Carrossel de cards ou mídia com controles e dots opcionais.

Área expansível com trigger customizável.

Diálogo controlado para confirmações com estado de submissão.

Modal acessível com foco preso, scroll lock, tamanhos e rodapé.

Painel lateral ou inferior para detalhes e edições contextuais.

Estado vazio com título, descrição, ícone e ação opcional.

Cartão de detalhe acionado por hover/foco.

Bloco de log de execução com estado por linha, rolagem automática e anúncio opcional.

Conteúdo flutuante ancorado a um trigger.

Renderização em document.body e painel posicionado em cantos da viewport.

Barra de progresso nativa estilizada.

Modal de progresso com passos, status e barra agregada.

Indicador de status tonal (online/atenção/offline) com tamanhos e halo pulsante.

Abas compostas por Root, List, Trigger e Content.

Sistema de notificações temporárias com provider e hook.

Fluxo em etapas com orientação horizontal ou vertical.

Casca de aplicação com sidebar, topbar e área principal responsiva.

Container de proporção fixa para mídia, gráficos e previews.

Grid responsivo com API curta container/size, auto-fit/auto-fill, templates e spans por breakpoint.

Primitivos de composição para alinhar, empilhar e limitar largura.

Container de página com padding, gap, largura máxima e scroll.

Cabeçalho de página com título, descrição, meta, ícone e ações.

Painel com largura ajustável por arraste.

Área com altura controlada para conteúdo rolável.

Cabeçalho de seção com descrição, ações, borda e padding.

Separador horizontal ou vertical com espaçamento e comprimento.

Layout de navegação lateral com grupos, colapso, marca e rodapé.

Barra flexível de controles com densidade, wrap e alinhamento.

Barra superior com seções start, center e end.

Avatar com imagem, fallback e tamanhos padronizados.

Marcador compacto para status, categorias e contadores leves.

Gráfico de barras simples para comparações rápidas.

Frame comum para gráficos com título, legenda, loading, vazio e fallback tabular.

Calendário mensal com seleção de data.

Superfície flexível para agrupar conteúdo, cabeçalho, rodapé e cover.

Bloco de código com linguagem, modo inline e botão de copiar.

Tabela com ordenação, paginação, toolbar, empty state e painel de detalhe.

Grade de miniaturas com lightbox em tela cheia: teclado, miniaturas e legendas.

Progresso radial / donut com tom, faixa, arco parcial e valor central.

Gateway para Iconify, usando nomes de ícones de 150+ bibliotecas.

Badge circular para destacar um ícone ou símbolo curto.

Linha de item com título, descrição e metadado.

Representa teclas e atalhos de teclado.

Gráfico de linha simples para tendências.

Mapa Leaflet com markers tonais, popups React, picker de coordenada e tiles compatíveis com dark mode.

Card de KPI com valor, tendência, tom e acento.

Barra de proporção com segmentos rotulados e alça que divide o espaço entre dois vizinhos.

Agenda em visões dia/semana com eventos sobrepostos, slots clicáveis, toolbar e linha do horário atual.

Barras de intensidade (Wi-Fi, qualidade de link) convertendo 0–100 em barras acesas.

Pares rótulo/valor de uma tela de revisão, em linhas ou empilhados, com tom por item.

Tipografia com elemento, tamanho, tom, peso, espaçamento e truncamento.

Linha do tempo / feed de atividade com trilho vertical, marcadores tonais e horários.

Árvore de categorias/permissões com busca, expansão, seleção e drag opcional.

Trilha hierárquica com adaptador de link opcional.

Botão de ação com variantes, tons, tamanhos, ícones e loading.

Agrupa botões em orientação horizontal ou vertical.

Paleta de comandos com trigger, busca, atalhos e itens.

Menu contextual aberto por clique secundário.

Menu ancorado com itens, separadores, atalhos e alinhamento.

Link com variantes, tons e adaptador para roteadores.

Barra horizontal de itens de menu com ação trailing.

Menu de navegação horizontal com item ativo.

Paginação em modo completo ou compacto.

Botão com dropdown de opções para escolher uma ação ou filtro.

Menu de usuário com avatar, cabeçalho e itens de dropdown.

Checkbox com label, descrição e apresentações compactas.

Cartão de escolha (rádio ou checkbox) com título, descrição, ícone e slot de destaque.

Seleção pesquisável com item, descrição e estado vazio.

Combobox de seleção múltipla: filtro digitado com checkbox, sem fechar a lista.

Wrapper de campo com label, dica, descrição, erro e densidade.

Envio de arquivos com arrastar-e-soltar, preview, validação e callback onUpload.

Estrutura de formulário com título, descrição, grid e barra de ações.

Input com label, ajuda, erro, sucesso, adornos e modo numérico.

Moldura para agrupar input com prefixo e sufixo.

Entrada segmentada para códigos curtos.

Label acessível com indicador opcional.

Seleção múltipla compacta com dropdown.

Linha de preferência com título, descrição e switch — ou outro controle no lugar dele.

Medidor de força de senha com estimador puro, rótulo de nível e dicas do que falta.

Grupo de opções mutuamente exclusivas.

Editor de texto rico zero-dependência (contentEditable) com toolbar e saída em HTML.

Select customizado com label, estados, adornos, clear e ícones opcionais.

Lista selecionável com cadeado e indicador de sinal, sobre rádios nativos.

Captura de assinatura manuscrita via canvas, com data URL PNG e integração com formulários.

Controle de faixa sobre <input type="range"> nativo, com marcas, tons e adornos.

Alternador booleano com input oculto opcional para formulários.

Área de texto com label, ajuda, erro, sucesso e adornos.

Provider de tema, densidade e chrome para a aplicação.

Controle de troca de tema com apresentação normal ou compacta.