概览
@linasan/ui —— 管理后台(B 端)的组件包:shadcn 风格,基于 Radix 和 Tailwind CSS v4
@linasan/ui 是管理后台用的全部组件:从按钮、输入框这样的基础组件,到数据表格、Schema 表单、上传、图片裁剪、后台布局。
它沿用 shadcn/ui 的做法:组件是你项目里的源码,基于 Radix UI 和 Tailwind CSS v4。
外观
HeroUI 风格:灰色页面底(--page)上放白卡(--background),卡片不画边框,用 --shadow-card 分层;
主题色是蓝色(--primary: #006fee);圆角跟着 --radius(默认 8px),输入框 6、菜单项和徽标 8、按钮 10、卡片和弹窗 12。
完整的 token 见 主题。
分类
| 分类 | 内容 |
|---|---|
| 基础组件 | shadcn 的基础组件(按钮、对话框、下拉菜单、选择器……),按本设计调过外观,部分加了能力(按钮的加载态、分段控件) |
| 表单 | 日期、数字、标签、颜色、图标、组合框等输入控件,以及 Schema 表单 |
| 数据展示 | 数据表格、数据网格、高级表格、统计卡、时间线、代码块、文件预览…… |
| 反馈 | 提示条、空状态、确认弹窗、气泡确认、结果弹窗 |
| 业务组件 | 上传、图片裁剪、二维码、资源选择器、水印、权限树 |
| 布局 | 后台框架:侧栏、顶栏、标签页、命令菜单、通知、外观设置 |
在本仓库里使用
import { Button } from '@linasan/ui/components/ui/button';
import { DataTable } from '@linasan/ui/components/data-table/data-table';样式在应用入口引入一次:
@import '@linasan/ui/globals.css';