Componentes
47 Web Components prontos para uso. Clique em um componente para ver a documentação completa.
Formulário(13)
y-buttonBotão interativo com múltiplas variantes, tamanhos e estado de carregamento.
y-inputCampo de entrada de texto com suporte a label, descrição e estado de erro.
y-textareaCampo de texto multilinha para conteúdos maiores.
y-selectMenu dropdown para seleção de opções.
y-checkboxCaixa de seleção para opções binárias.
y-radio-groupGrupo de opções mutuamente exclusivas.
y-switchToggle switch para ativar/desativar opções.
y-toggleBotão toggle para alternar estado on/off.
y-labelRótulo acessível para campos de formulário.
y-sliderControle deslizante para seleção de valor numérico.
y-comboboxCampo de busca com autocomplete e seleção de opções.
y-date-pickerSeletor de data com calendário integrado.
y-input-otpCampo para entrada de código OTP (One-Time Password).
Exibição(10)
y-badgeRótulo visual para status, contagens e categorias.
y-avatarRepresentação visual de um usuário ou entidade.
y-cardContainer versátil com variantes, tamanhos e estado interativo para agrupar conteúdo relacionado.
y-alertMensagem de alerta para feedback e notificações inline.
y-separatorLinha divisória para separar seções de conteúdo.
y-skeletonPlaceholder animado para conteúdo em carregamento.
y-spinnerIndicador de carregamento circular animado.
y-progressBarra de progresso para indicar conclusão de tarefas.
y-kbdIndicador de tecla de atalho do teclado.
y-aspect-ratioContainer que mantém uma proporção fixa (aspect ratio).
Navegação(5)
y-tabsNavegação por abas para alternar entre seções de conteúdo.
y-breadcrumbTrilha de navegação hierárquica.
y-paginationControles de paginação para navegação em listas.
y-navigation-menuMenu de navegação horizontal com submenus.
y-menubarBarra de menus estilo desktop com submenus dropdown.
Overlay(10)
y-dialogModal dialog para interações que requerem atenção do usuário.
y-alert-dialogDialog de confirmação para ações destrutivas ou irreversíveis.
y-sheetPainel lateral deslizante para conteúdo secundário.
y-drawerDrawer que desliza de baixo para cima (mobile-friendly).
y-tooltipDica flutuante ao passar o mouse sobre um elemento.
y-popoverConteúdo flutuante acionado por clique.
y-dropdown-menuMenu dropdown com itens de ação.
y-hover-cardCard flutuante ao passar o mouse, para informações extras.
y-context-menuMenu de contexto ativado por clique direito.
y-toasterNotificação temporária para feedback de ações.
Layout(6)
y-accordionLista expansível de seções com conteúdo oculto.
y-collapsibleContainer com conteúdo que pode ser expandido/recolhido.
y-tableTabela de dados estilizada para listagens.
y-scroll-areaÁrea de rolagem customizada com scrollbar estilizado.
y-carouselCarrossel para navegação entre slides de conteúdo.
y-resizablePainéis redimensionáveis com handles de arraste.