AU

Artefact UI

HonoX Hono/JSX 组件

一套精美打造、无障碍的组件套件。

专为 HonoX、PandaCSS 与 Sveltia CMS 构建的完整三层设计系统。快速、轻量且完全无障碍，遵循标准用户习惯。

标签页展示

完全使用纯 Hono/JSX 重新实现，带有滑动指示器、手动/自动聚焦激活以及完整的键盘导航支持。

极速响应

默认开启 SSR，静态体积最小化。仅在需要交互时才进行水合。
零 JS 方案

完全无障碍

严格遵循 WAI-ARIA 标准。通过漫游 tabIndex 与 aria 状态实现完整的键盘导航。
符合 A11y

精美设计

滑动指示器过渡与像素级精准布局，契合现代用户习惯。
Panda CSS

特色轮播实现

展示我们基于 Ark UI 的 Slider Carousel 的稳健 Hono/JSX 实现。支持滑动、自动播放且完全无障碍。

交互式自动播放轮播

自动播放触发、自定义圆点以及悬停暂停。
实时分析 — Pulse 以亚秒级流延迟提供实时数据与仪表盘。

实时分析 — Pulse 以亚秒级流延迟提供实时数据与仪表盘。

多图循环轮播

每页显示 2 张幻灯片，采用丰富的响应式网格。
幻灯片 1

幻灯片 1

幻灯片 2

幻灯片 2

交互式组件中心

按使用类别浏览 Artefact UI 组件系统的丰富功能。

表单控件

开关控件

时尚的切换按钮

复选框组

支持普通与半选状态

滑块

可调数值
单滑块45
范围选择15, 75

单选组

互斥选择

单选卡片组

卡片式互斥选择
描边
柔和
表面
实心

分段控件

滑动选择控件

标签输入

添加与移除关键词标签
Hono
Vite
Panda
按 Enter 添加标签

验证码输入

支持粘贴与自动前进的一次性代码输入
请查看邮件获取 6 位验证码

评分组

支持半星精度的星级评分
评价您的体验
半星精度
平均评分

输入框

带实时校验的带标签输入框
至少需要 3 个字符

多行文本

带实时校验的多行文本输入
请再多写一些（至少 20 个字符）

复杂选择器

日期选择器

高级日期与范围选择器

下拉选择

无障碍的 select 与自动补全组合框
React
Solid
Svelte
Vue
Hono

颜色选择器

全色域选择器
选择主题颜色

文件上传

带校验规则的拖放区
拖放文件或点击浏览

    浮层与导航

    气泡卡片与提示

    上下文信息框

    模态框与抽屉

    带焦点陷阱的浮层面板

    操作下拉菜单

    可嵌套的操作列表触发器

    悬停卡片

    悬停时显示的信息弹窗

    可折叠内容

    流畅的手风琴区块

    我们的无障碍焦点陷阱与键盘导航在所有设备上都能顺畅运行。

    面包屑

    导航层级

    反馈与工具

    进度条

    线性与环形进度加载器
    正在上传数据
    72%
    处理中Progress

    骨架屏与警告

    反馈与占位组件

    剪贴板与提示

    交互式用户反馈工具

    可编辑

    点击就地行内编辑
    Artefact UI Suite
    添加描述…