AU

Artefact UI

HonoX Hono/JSX-Komponenten

Eine wunderschön konstruierte, barrierefreie Komponenten-Suite.

Ein vollständiges dreistufiges Designsystem für HonoX, PandaCSS und Sveltia CMS. Schnell, leichtgewichtig und vollständig barrierefrei, orientiert an gängigen Nutzergewohnheiten.

Tabs-Showcase

Vollständig neu implementiert in reinem Hono/JSX mit gleitenden Indikatoren, manueller/automatischer Fokusaktivierung und vollständiger Tastaturnavigation.

Blitzschnell

Standardmäßig SSR mit minimalem statischem Fußabdruck. Hydratisiert nur, wenn Interaktion erforderlich ist.
Null-JS-Option

Vollständig Barrierefrei

Folgt exakt den WAI-ARIA-Standards. Vollständig per Tastatur navigierbar mit wanderndem tabIndex und aria-Zuständen.
A11y-konform

Beeindruckendes Design

Gleitende Indikatorübergänge und pixelgenaue Layouts, abgestimmt auf moderne Nutzergewohnheiten.
Panda CSS

Ausgewählte Karussell-Implementierung

Demonstration unserer robusten Hono/JSX-Implementierung des Ark-UI-Slider-Carousels. Wischbar, autoplay-bereit und vollständig barrierefrei.

Interaktives Autoplay-Karussell

Autoplay-Auslöser, benutzerdefinierte Punkte und Pause bei Hover.
Echtzeit-Analysen — Pulse liefert Live-Daten und Dashboards mit Streaming-Latenz unter einer Sekunde.

Echtzeit-Analysen — Pulse liefert Live-Daten und Dashboards mit Streaming-Latenz unter einer Sekunde.

Mehrfach-Folien-Karussell mit Schleife

Zeigt 2 Folien pro Seite mit einem umfangreichen, responsiven Raster.
Folie 1

Folie 1

Folie 2

Folie 2

Interaktiver Komponenten-Hub

Entdecken Sie die vielfältigen Funktionen des Artefact-UI-Komponentensystems, gruppiert nach Nutzungskategorie.

Formularsteuerelemente

Switch-Steuerelement

Elegante Umschaltflächen

Checkbox-Gruppe

Unterstützung für normale und unbestimmte Zustände

Schieberegler

Anpassbare numerische Werte
Einzelner Regler45
Bereichsauswahl15, 75

Radio-Gruppe

Sich gegenseitig ausschließende Optionen

Radio-Karten-Gruppe

Exklusive Auswahl im Kartenstil
Umriss
Dezent
Fläche
Voll

Segment-Gruppe

Gleitende Auswahlsteuerung

Tags-Feld

Schlagwort-Tags hinzufügen und entfernen
Hono
Vite
Panda
Drücken Sie die Eingabetaste, um ein Tag hinzuzufügen

PIN-Feld

Einmalcode-Eingabe mit Einfügen und automatischem Weiterspringen
Prüfen Sie Ihre E-Mails auf den 6-stelligen Code

Bewertungsgruppe

Sternebewertungen mit Halbwert-Genauigkeit
Bewerten Sie Ihre Erfahrung
Halbstern-Genauigkeit
Durchschnittsbewertung

Feld

Beschriftetes Feld mit Live-Validierung
Muss mindestens 3 Zeichen lang sein

Textbereich

Mehrzeiliges Feld mit Live-Validierung
Erzählen Sie uns etwas mehr (mind. 20 Zeichen)

Komplexe Auswahlfelder

Datumsauswahl

Erweiterte Datums- und Bereichsauswahl

Dropdown-Auswahl

Barrierefreie Selects und Comboboxen mit Autovervollständigung
React
Solid
Svelte
Vue
Hono

Farbauswahl

Auswahl des vollständigen Farbspektrums
Themenfarbe wählen

Datei-Upload

Drag-and-Drop-Bereich mit Validierungsregeln
Dateien per Drag & Drop ablegen oder durchsuchen

    Overlays & Navigation

    Popover & Tooltip

    Kontextbezogene Infoboxen

    Modale & Drawer

    Overlay-Panels mit Fokusfalle

    Aktions-Dropdowns

    Verschachtelbare Aktionslisten-Auslöser

    Hover-Karte

    Info-Popup bei Hover

    Einklappbarer Inhalt

    Sanfte Akkordeon-Abschnitte

    Unsere barrierefreie Fokusfalle und Tastaturnavigation funktionieren einwandfrei auf allen Geräten.

    Breadcrumb

    Navigationshierarchien

    Feedback & Werkzeuge

    Fortschrittsbalken

    Lineare und kreisförmige Fortschrittsanzeigen
    Daten werden hochgeladen
    72%
    VerarbeitungProgress

    Skeletons & Warnungen

    Feedback- und Platzhalter-Widgets

    Zwischenablage & Toast

    Interaktive Feedback-Werkzeuge für Nutzer

    Bearbeitbar

    Klicken zum Inline-Bearbeiten vor Ort
    Artefact UI Suite
    Beschreibung hinzufügen…