Library Saas-UI 专为SaaS产品打造的React组件库

做 SaaS 前端，永远在重复造轮子：登录/注册、个人资料、计费订阅、设置页、引导流程……这些“每个 SaaS 都要有”的界面，每次从零搭既慢又容易不统一。
Saas UI 的切入点，是把这些 SaaS 典型界面做成一套基于 Chakra UI 的 React 组件与设计系统，并用 CLI 把侧边栏、引导等组合件直接装进你的项目。

项目基本信息

一、项目介绍

saas-js/saas-ui 是一个面向 SaaS 产品的 React 组件库与设计系统，MIT 协议，构建在 Chakra UI 之上。它提供认证界面、引导（onboarding）、计费、设置、侧边栏等可直接复用的组合件，并配套 @saas-ui/cli 脚手架，把组件“安装”进你的代码库而不是当黑盒依赖。另有 Saas UI Pro 提供进阶商业组件。

二、核心优势

1. SaaS 专属：认证、计费、设置、引导等界面开箱即用。
2. Chakra 底座：继承 Chakra 的主题与可访问性。
3. CLI 安装：组合件以源码形式装进项目，可改可控。
4. 设计系统：统一视觉与交互，降低不一致成本。
5. 可渐进：免费核心 + 可选 Pro 扩展。

三、适用场景

• 创业团队快速搭建 SaaS 后台与落地页。
• 需要登录、计费、设置等标准流程的产品。
• 想用 Chakra 但缺 SaaS 级组合件。
• 重视可访问性与统一设计语言。

四、安装教程

用 CLI 初始化并添加组合件：

npx @saas-ui/cli@rc init
npx @saas-ui/cli@rc add sidebar

常见报错：CLI 为 rc 阶段，命令参数可能随版本变化，按官方文档核对；项目需先具备 React + Chakra 基础环境，否则组件无法渲染。

五、使用示例

初始化会生成 components.json 并装入 Provider 与组合件，随后像普通组件一样使用：

import { Sidebar } from '@/components/sidebar'

<Sidebar items={[...]} />

真实效果：一条命令就能把一套可用、可改的侧边栏/引导流程放进项目，省去从零拼装 SaaS 标准界面的时间。

六、常见问题

Q：必须依赖 Chakra 吗？
A：是的，Saas UI 构建在 Chakra UI 之上，需要 Chakra 环境。
Q：免费和 Pro 差在哪？
A：免费核心含常用组件；Pro 提供进阶商业组件与工作流。
Q：只能 React 用吗？
A：当前主要面向 React 生态。

七、总结

Saas UI 把 SaaS 典型界面（认证、计费、设置、引导等）做成基于 Chakra UI 的 React 组件与设计系统，并用 CLI 把组合件以源码形式装进项目，可改可控。对快速搭建 SaaS 后台、又想要统一设计语言的创业团队，它是显著提效的起点；MIT 协议、免费核心加可选 Pro。