laikit UI
Summary
laikit UI 是一套 React 组件库，以统一、简约、现代为设计原则。0.3.6 提供 63 个 UI 组件，覆盖表单、布局、数据展示和内容展示。组件提供 TypeScript 类型声明，支持浅色与深色主题、多语言文案和 CSS 变量定制，通过 LaikitProvider 接入应用的路由与标题组件。npm 包名为 @lailai0916/ui，采用 MIT 许可证。
参考资料
简介
组件库提取自 lailai's Home，供 Tools、Academy 等项目复用同款控件与布局。已有组件以共享默认样式为准，宿主通过公开属性组织内容与布局。
laikit UI 是一套 React 组件库，设计遵循统一、简约、现代，提供表单、布局、数据展示和内容展示组件。
组件提供 TypeScript 类型声明，通过 CSS 变量定制颜色、字体与间距，支持浅色、深色主题和多语言文案。路由与标题组件可通过 LaikitProvider 接入应用所用的框架。
组件库采用 MIT 许可证，npm 包名为 @lailai0916/ui。这组文档对应 0.3 系列 API。
文档导航
| 文档 | 内容 |
|---|---|
| 快速开始 | 安装、样式导入、最小应用 |
| 按钮与表单 | 按钮、选择、滑块、开关与输入字段 |
| 应用交互 | 标签切换、提示、对话框与表格 |
| 布局与卡片 | 页面容器、排列、面板与卡片 |
| 数据展示 | 图表、进度、加载与异常状态 |
| 内容展示 | 头像、徽标、窗口、引用与分页 |
| 主题定制 | 主题变量、浅色与深色、主题控件 |
| 框架接入 | 路由、语言、服务端渲染、Hooks |
组件清单
0.3.6 共有 63 个 UI 组件。以下按独立导出计数，Tooltip.Label、Tooltip.Value 等子部件不重复计数；Provider、Hooks、路由适配和工具函数不计入。
| 分类 | 数量 | 组件 |
|---|---|---|
| 按钮与表单 | 21 | Button、ButtonLink、CopyButton、IconButton、LanguageButton、Segmented、Tabs、Slider、Switch、Input、TextArea、Select、DropdownSelect、TextField、TextAreaField、SelectField、DropdownSelectField、PasswordInput、PasswordField、Checkbox、Radio |
| 布局与卡片 | 16 | Card、TitleCard、LinkCard、DataCard、ShareCard、PageHeader、PageTitle、PageContent、PageContainer、SiteHeader、Stack、Cluster、Panel、PanelHeader、PanelBody、PanelFooter |
| 数据展示 | 6 | Chart、Donut、Progress、DataState、Skeleton、Table |
| 内容展示 | 18 | Alert、Dialog、Avatar、Brand、Badge、Icon、IconBlock、Hint、Tooltip、TrafficLights、WindowBar、WindowPanel、MDTitle、Quote、GitHub、EmptyState、Paginator、SkipLink |
| 主题控件 | 2 | ThemeControl、ThemeButton |
环境与接入
- 应用需要 React 与 React DOM，支持 React 18.3.1 或 19；包提供 ESM 与 TypeScript 声明。
- JavaScript 可由打包器移除未使用模块；共享样式文件包含整套组件样式。
- 图表接收应用传入的数据；
GitHub卡片会请求公开仓库信息，Iconify 图标可能发起网络请求。 - 组件样式使用 CSS Modules，主题通过
--lk-*变量定制。优先使用公开属性与变量，避免依赖生成的类名。