AU

Artefact UI

HonoX Hono/JSX Components

A beautifully engineered, accessible component suite.

A complete 3-tier design system built for HonoX, PandaCSS, and Sveltia CMS. Fast, lightweight, and fully accessible, following standard user habits.

Tabs Showcase

Re-implemented completely in pure Hono/JSX with sliding indicators, manual/automatic focus activation, and full keyboard navigation support.

Lightning Fast

SSR by default with minimal static footprint. Hydrates only when interaction is required.
Zero JS Option

Completely Accessible

Following WAI-ARIA standards exactly. Fully keyboard navigable with roving tabIndex and aria states.
A11y Compliant

Stunning Design

Sliding indicator transitions and pixel-perfect layouts mapped to modern user habits.
Panda CSS

Featured Carousel Implementation

Demonstrating our robust Hono/JSX implementation of Ark UI's Slider Carousel. Swipeable, autoplay-ready, and fully accessible.

Interactive Autoplay Carousel

Autoplay triggers, custom dots, and hover-to-pause.
Real-Time Analytics — Pulse delivers live data and dashboards with sub-second streaming latency.

Real-Time Analytics — Pulse delivers live data and dashboards with sub-second streaming latency.

Multi-Slide Looping Carousel

Displaying 2 slides per page with a rich, responsive grid.
Slide 1

Slide 1

Slide 2

Slide 2

Interactive Component Hub

Explore the rich features of the Artefact UI component system grouped by usage category.

Form Controls

Switch Control

Sleek toggle buttons

Checkbox Group

Support for normal and indeterminate states

Slider

Adjustable numeric values
Single Thumb45
Range Selection15, 75

Radio Group

Mutually exclusive choices

Radio Card Group

Card-style exclusive choices
Outline
Subtle
Surface
Solid

Segment Group

Sliding selection controls

Tags Field

Add and remove keyword tags
Hono
Vite
Panda
Press Enter to add a tag

Pin Field

One-time code entry with paste & auto-advance
Check your email for the 6-digit code

Rating Group

Star ratings with half-value precision
Rate your experience
Half-star precision
Average rating

Field

Labeled input with live validation
Must be at least 3 characters

Textarea

Multi-line input with live validation
Tell us a bit more (20 characters min)

Complex Pickers

Date Picker

Advanced date and range pickers

Dropdown Selection

Accessible selects & autocomplete comboboxes
React
Solid
Svelte
Vue
Hono

Color Picker

Full color spectrum selector
Pick Theme Color

File Upload

Drag-and-drop zone with validation rules
Drag and drop or browse files

    Overlays & Navigation

    Popover & Tooltip

    Contextual info boxes

    Modals & Drawers

    Overlay focus-trapped panels

    Action Dropdowns

    Nestable action list triggers

    Hover Card

    Information popup on hover

    Collapsible Content

    Smooth accordion sections

    Our accessible focus trap and keyboard navigation works cleanly across all devices.

    Breadcrumb

    Navigational hierarchies

    Feedback & Utilities

    Progress Bars

    Linear and circular progress loaders
    Uploading Data
    72%
    ProcessingProgress

    Skeletons & Alerts

    Feedback and placeholder widgets

    Clipboard & Toast

    Interactive user feedback utilities

    Editable

    Click to edit inline, in place
    Artefact UI Suite
    Add a description…