@koko/ui 预览

按钮 / 徽章

variant: default · outline · secondary · ghost · destructive · link

默认次要描边危险⌘K

卡片

Card 系列 + 数据指标卡 + 用户卡

总收入

¥45,231.89

+20.1% 较上月

订阅数

+2,350

+180.1% 较上月

销售额

+12,234

+19% 较上月

活跃用户

+573

+201 较上小时

创建项目

一键部署你的新项目。

名称

框架

通知设置

选择你想接收的提醒。

邮件通知

推送通知

每周摘要

音量

团队成员

本项目有 3 位协作者。

张

张三

zhang@example.com

李

李四

li@example.com

王

王五

wang@example.com

图表

基于 Recharts 3, 颜色走 --chart-1..5 变量, 随主题 / 暗色自动变化

面积图

访问与注册趋势

柱状图

本周任务 / 完成

折线图

访问量

饼图

流程占比

径向图

完成率 72%

表格

Table 基础组件 + Badge 状态 + 行内操作

最近 5 笔订单
编号	渠道	状态	日期	金额
INV-001	山姆会员店	已完成	2026-10-21	¥2,500.00
INV-002	京东自营	处理中	2026-10-22	¥1,280.50
INV-003	淘宝旗舰店	待处理	2026-10-23	¥860.00
INV-004	小红书种草	已完成	2026-10-24	¥430.00
INV-005	什么值得买	失败	2026-10-25	¥99.00

日期选择器

Calendar 基础 + DatePicker / DateRangePicker 封装 (包内 extra/date-picker)

October 2026

选择器

点击弹出日历

单日期

日期范围

当前值: 2026/10/25 · 2026/10/20 ~ 2026/10/27

表单控件

邮箱

无效状态

留言

验证码

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

通知方式

全部

仅提及

关闭

同意服务条款

进度

x

格式

浮层

导航 / 反馈

概览内容。

可以, 改 CSS 变量即可。

已部署

新版本已上线。

构建失败

请检查日志。

暂无数据

创建第一个条目开始吧。

滚动条目 1

滚动条目 2

滚动条目 3

滚动条目 4

滚动条目 5

滚动条目 6

滚动条目 7

滚动条目 8

滚动条目 9

滚动条目 10

滚动条目 11

滚动条目 12

图标

lucide-react 全量 1903 枚, 按名搜索 (最多显示 96)

96 个结果

Su	Mo	Tu	We	Th	Fr	Sa

按钮 / 徽章

卡片

图表

表格

日期选择器

表单控件

浮层

导航 / 反馈

能自定义主题吗?

支持暗色吗?

图标