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.

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 Input

Add and remove keyword tags
Hono
Vite
Panda

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…