Componentes HonoX Hono/JSX

Um conjunto de componentes lindamente projetado e acessível.

Um sistema de design completo de 3 camadas criado para HonoX, PandaCSS e Sveltia CMS. Rápido, leve e totalmente acessível, seguindo os hábitos padrão dos usuários.

Vitrine de Abas

Reimplementado totalmente em Hono/JSX puro com indicadores deslizantes, ativação de foco manual/automática e suporte completo à navegação por teclado.

Extremamente Rápido

SSR por padrão com uma pegada estática mínima. Hidrata apenas quando a interação é necessária.
Opção Zero JS

Totalmente Acessível

Seguindo exatamente os padrões WAI-ARIA. Totalmente navegável pelo teclado com tabIndex itinerante e estados aria.
Compatível com A11y

Design Impressionante

Transições de indicador deslizante e layouts com precisão de pixel mapeados para os hábitos modernos dos usuários.
Panda CSS

Demonstrando nossa robusta implementação em Hono/JSX do Slider Carousel do Ark UI. Deslizável, pronto para reprodução automática e totalmente acessível.

Carrossel Interativo com Reprodução Automática

Gatilhos de reprodução automática, pontos personalizados e pausa ao passar o mouse.

Carrossel em Loop com Múltiplos Slides

Exibindo 2 slides por página com uma grade rica e responsiva.

Central Interativa de Componentes

Explore os recursos avançados do sistema de componentes Artefact UI agrupados por categoria de uso.

Controles de Formulário

Controle Switch

Botões de alternância elegantes

Grupo de Caixas de Seleção

Suporte para estados normal e indeterminado

Controle Deslizante

Valores numéricos ajustáveis
Controle Único45
Seleção de Intervalo15, 75

Grupo de Rádio

Opções mutuamente exclusivas

Grupo de Cartões de Rádio

Opções exclusivas em estilo de cartão
Contorno
Sutil
Superfície
Sólido

Grupo Segmentado

Controles de seleção deslizantes

Campo de Tags

Adicione e remova tags de palavras-chave
Hono
Vite
Panda
Pressione Enter para adicionar uma tag

Campo PIN

Entrada de código único com colar e avanço automático
Verifique seu e-mail para o código de 6 dígitos

Grupo de Avaliação

Avaliações por estrelas com precisão de meio valor
Avalie sua experiência
Precisão de meia estrela
Avaliação média

Campo

Entrada rotulada com validação em tempo real
Deve ter pelo menos 3 caracteres

Área de Texto

Entrada multilinha com validação em tempo real
Conte-nos um pouco mais (mínimo de 20 caracteres)

Seletores Complexos

Seletor de Data

Seletores avançados de data e intervalo

Seleção Suspensa

Selects acessíveis e comboboxes com autocompletar
React
Solid
Svelte
Vue
Hono

Seletor de Cor

Seletor de espectro completo de cor
Escolha a Cor do Tema

Upload de Arquivos

Zona de arrastar e soltar com regras de validação
Arraste e solte ou procure arquivos

    Sobreposições e Navegação

    Popover e Tooltip

    Caixas de informação contextual

    Modais e Gavetas

    Painéis sobrepostos com captura de foco

    Menus Suspensos de Ação

    Acionadores de listas de ação aninháveis

    Cartão ao Passar o Mouse

    Pop-up de informação ao passar o mouse

    Conteúdo Recolhível

    Seções de acordeão suaves

    Nossa captura de foco acessível e navegação pelo teclado funcionam perfeitamente em todos os dispositivos.

    Trilha de Navegação

    Hierarquias de navegação

    Feedback e Utilitários

    Barras de Progresso

    Carregadores de progresso lineares e circulares
    Enviando Dados
    72%
    ProcessandoProgress

    Esqueletos e Alertas

    Widgets de feedback e espaço reservado

    Área de Transferência e Toast

    Utilitários interativos de feedback ao usuário

    Editável

    Clique para editar em linha, no local
    Artefact UI Suite
    Adicione uma descrição…