跳到正文
Linasan UI

概览

@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';

本页目录