Nan Design

Nan Design 是一套基于 React 与 TypeScript 的中后台组件库，面向管理后台、数据看板、工作台和流程型业务系统。组件库提供统一的视觉语言、类型安全的接口、可复用的交互模式和开箱即用的样式，适合快速搭建专业、稳定、易维护的 Web 应用。

特性

• 基于 React 和 TypeScript 构建，提供完整类型声明。
• 覆盖布局、导航、数据展示、数据录入、反馈、弹层和上传等高频中后台场景。
• 内置一致的设计 token、圆角、间距、状态色和交互反馈。
• 支持通过 ConfigProvider 全局配置 调整主题色和基础视觉参数。
• 同时输出 ES Module、UMD、CSS 和 .d.ts 类型文件。
• 配套组件测试，覆盖常见渲染、状态和交互行为。

安装

npm install nan-design

快速开始

import { Button, Card, ConfigProvider, Space } from "nan-design";
import "nan-design/style.css";

export function App() {
  return (
    <ConfigProvider theme={{ colorPrimary: "#1677ff" }}>
      <Card title="发布概览" subtitle="生产环境部署">
        <Space>
          <Button variant="primary">发布</Button>
          <Button>预览</Button>
        </Space>
      </Card>
    </ConfigProvider>
  );
}

组件清单

通用

• Button 按钮
• Icon 图标
• Typography 排版
• Space 间距
• Divider 分割线

布局

• Layout 布局
• PageHeader 页头
• Card 卡片
• Drawer 抽屉
• Modal 弹窗

导航

• Breadcrumb 面包屑
• Menu 菜单
• NavMenu 导航菜单
• Pagination 分页
• PageTabs 页面标签
• Tabs 标签页

数据展示

• Avatar 头像
• Badge 徽标
• Calendar 日历
• Descriptions 描述列表
• List 列表
• Statistic 统计数值
• Table 表格
• Tag 标签
• Timeline 时间轴
• Tree 树

数据录入

• Checkbox 复选框
• ColorPicker 颜色选择器
• DatePicker 日期选择器
• DateTimePicker 日期时间选择器
• Editor 编辑器
• FormItem 表单项
• Input 输入框
• Radio 单选框
• RangePicker 日期范围选择器
• RichEditor 富文本编辑器
• Segmented 分段控制器
• Select 选择器
• Switch 开关
• Textarea 文本域
• TimePicker 时间选择器
• Upload 上传
• DraggerUpload 拖拽上传

反馈

• Alert 警告提示
• Empty 空状态
• Message 全局提示
• Notification 通知提醒
• Popover 气泡卡片
• Progress 进度条
• Result 结果页
• Skeleton 骨架屏
• Spin 加载中
• Steps 步骤条
• Tooltip 文字提示

高级组件

• Cascader 级联选择
• Transfer 穿梭框
• ConfigProvider 全局配置
• ProTable 高级表格
• PermissionMatrix 权限矩阵

样式引入

在应用入口引入样式文件：

import "nan-design/style.css";

通过 ConfigProvider 全局配置 调整主题：

<ConfigProvider
  theme={{
    colorPrimary: "#0057ff",
    borderRadius: 8,
  }}
>
  <App />
</ConfigProvider>

本地开发

npm install
npm test
npm run build

启动文档站：

npm run docs:dev

构建文档站：

npm run docs:build

包产物

npm 包包含以下产物：

• dist/nan-design.js
• dist/nan-design.umd.cjs
• dist/nan-design.css
• dist/lib.d.ts

License

MIT