Chinese-first React components in a line-grid style: bar controls, motion graphics, charts, an AI chat panel and an app shell template. Built on Base UI.
从企业监控平台提炼的 AI 助手:嵌入与浮动布局切换,Trace 展示分析摘要、工具调用与来源,内置流式演示。
登录第二步:通行密钥、验证器 App、短信验证码和恢复码四种验证方式,可互相切换,并支持记住设备。
auth-05 的验证内容部分(Auth05Panel):没有页面外壳和示例页,可嵌进已有的登录布局。
人民币大写(按财务规范,万亿级、零的省略、分以下四舍五入)与整数中文读法的纯函数工具,无依赖,服务端可用。
即时调整主题色、圆角、内容宽度与亮暗,支持局部预览和首帧恢复。
一块带网格的区域,拖动手柄同时调两个值,十字线与淡色填充标出位置,键盘左右 / 上下分别调两条轴。
带行号与语法骨架的代码文件卡,支持扇形、级联、网格排列与悬停散开。
先识别工作邮箱所属组织的两栏登录:企业身份(SAML / OIDC)单点登录或账号密码,带组织面板、组织标识入口与异步错误。
提炼自企业监控平台的控制台外壳:固定顶栏、可折叠一级导航、二级工作区侧栏、独立滚动主区域,窄屏变抽屉,并预留右侧 aside 插槽(可放 AI 助手面板)。
全国省、市、区县三级行政区划数据,取自国家地名信息库:6 位国标代码、官方全称和校对过的地名拼音,直辖市照官方为两级。纯数据,可替换为自己的版本。
左侧品牌面板 + 右侧表单的分屏登录页:登录(密码 / 验证码)、注册(带强度条)、找回密码,zod 校验。
方条样式的互斥选项组,选中块在选项间滑动,可带图标或小样,与数值滑块同一套高度。
方格里的内容随机出现、换位、点亮,支持分类胶囊切换、首字母头像、纯色像素块与离屏暂停。
细边框卡片的层叠轮播,支持自动轮换、拖拽、键盘切换与减少动态效果。
基于官方 Sidebar 的可收起侧栏:搜索过滤、手风琴分组、带引导线的子项,收起成图标栏后悬停浮出子菜单,手机端沿用抽屉。
右侧上下文面板,组合项目进度、状态分布与分给我的任务。
基于 shadcn 官方 Sidebar:团队切换(⌘1…⌘9)、⌘K 搜索、分组导航、用户卡与多账号切换,可收起成图标,移动端为抽屉。
图表卡片布局(标题、指标行、图例、明细表)加三个图表:刻度式环形仪表、多序列折线 / 柱 / 面积图(支持堆叠与正负对比)、横向排名条。基于 shadcn chart,颜色全部取自主题变量。
由主题色字符组成的自适应画布背景,支持混合色调、渐隐遮罩、中心内容与离屏暂停。
按指定 IANA 时区显示实时时间:行内时间可带 UTC 偏移、昼夜图标与同访客的时差;另提供世界时钟(列表 / 卡片)和平滑转动的 SVG 模拟表盘。
图标轨与工作区树双栏侧栏,支持树键盘导航、模块切换、筛选和移动端抽屉。
勾选时文字被手写感划线划掉的清单,支持受控与非受控、进度汇总、自动播放与紧凑尺寸。
中国大陆手机号输入:边输边按 3-4-4 分隔且光标不乱跳,粘贴、自动填充带 +86 或横线的号码自动整理,失焦校验号段;条内可放带倒计时的「获取验证码」。值是 11 位纯数字。
窄单列短信登录:输入手机号、验证短信两步完成,支持协议确认、重发倒计时与异步错误。
以扫码为主、短信和密码为备用入口的线条网格登录区块,包含五种扫码状态。
承载方条控件的面板容器:标题栏、分组网格、恢复按钮,以及把当前参数复制为 JSX 的按钮。
一张卡片逐行列出指标的变化:指标名、一句话变化和趋势标记。好坏(绿 / 红 / 灰)与方向(上 / 下 / 平)分开设置,读屏会念出两者;数据是纯 JSON,入场依次淡入并尊重「减少动态效果」。
带标签与读数的数值滑块,支持区间、缓冲进度、刻度磁吸、数值格式化与拖出两端的弹性过冲。
支持筛选、选择、编辑与虚拟滚动的数据集表格。
方条数量选择:− 数字 +,支持长按步进、范围约束和异步提交,保存失败自动回滚。
多文件选择与证件槽位,支持拖放、拍照、格式大小校验与受控上传状态,组件不发送请求。
关键词轮换、分字显现、乱码解码与高亮扫过,支持中文与渐进增强。
方条下拉选择,支持搜索、多选、分组与触屏底部面板。
整条可点的开关,打开时铺上淡色、圆形手柄滑到右端,与数值滑块同一套高度。
方条系列基础文本框,支持标签、图标、后缀和错误提示。
按访客本地时间问候:时段图标与色调、可配置的分段时间与称呼;附带四时段指示条和会轮换副标题的问候卡片,首屏用静态文案避免水合差异。
可组合的时间线原语,支持经历、活动流、项目进度、水平路线图与交替更新日志。
多步流程的进度与回退导航,支持横排、竖排、错误状态和随容器宽度切换的紧凑形态。
同心波纹与径向标记,支持扩散脉冲、覆盖范围与离屏暂停。
节点、细线与流动光点组成的循环动画流程图:统一时间轴、进入视口才播放、减少动态效果时停在静帧;色调与底纹可配置,附带光点路径、逐字输入、加载圈与状态点等原语。
用点阵绘制的 WebGL 地球,颜色跟随主题,支持城市标记、标签、弧线、拖拽旋转与离屏暂停。
分步选择省 / 市 / 区:步骤条清楚显示第几步、可点回上一步,长列表按拼音首字母分组,支持汉字、全拼、首字母搜索;手机上从底部弹出面板。值只存最末一级的代码,数据由 props 传入、可惰性加载。
把任意平面多边形挤出成等轴测线条 3D,带斜纹顶面、跟随鼠标的线条高光与点击按下效果。
带全宽横线、竖线容器、刻度尺等多种纹路分隔带和交点十字的响应式布局原语。
一组可组合的统计卡片原语:KPI 数字与涨跌幅(绿涨红跌 / 红涨绿跌可切换)、目标状态行、配额进度条、分格计量条、延迟分区表、占比分布条与图例,数字默认按万 / 亿压缩。
整条是一行格子的分页:信息、每页条数、首尾页、页码与跳页各占一格,可单独使用,也可贴在表格底部。
一行格子组成的工具栏,格子之间虚线分隔、窄容器自动换行;方条输入、分段选择、方条下拉放进来会自动去掉外框铺满整格。
零依赖色觉模拟、Lab 与 CIEDE2000 色差计算。