HextaUI Blocks完全指南：84个现成页面积木，1天搭完整个SaaS产品

HextaUI Blocks完全指南：84个现成页面积木，1天搭完整个SaaS产品

【免费下载链接】HextaUIReady-to-use foundation components/blocks built on top of shadcn/ui.项目地址: https://gitcode.com/gh_mirrors/he/HextaUI

HextaUI 是一套构建在 shadcn/ui 之上的现成页面组件库（Blocks），提供 80 多个开箱即用的 SaaS 页面级积木：登录注册页、订阅计费页、设置中心、AI 聊天界面……一条命令添加到项目里，1 天就能拼完一整个 SaaS 产品的界面。本文面向新手，讲清楚 HextaUI 是什么、84 个 Blocks 都覆盖哪些页面、以及如何最快完成安装与组合。

HextaUI 是什么？与 shadcn/ui 的关系

一句话：shadcn/ui 给你"按钮、输入框"，HextaUI 给你"整页"。

• shadcn/ui是原子级组件库：Button、Input、Dialog、Table。
• HextaUI在原子组件之上，组装好了完整的业务页面：一个auth-login-form就是一个带社交登录、邮箱密码登录的完整登录页；一个billing-pricing-table就是带功能对比的定价表。
• 每个 Block 都是独立的 React 源码文件（MIT 协议），添加后直接属于你的项目，可随意修改，没有"黑盒依赖"。

所有 Blocks 的源码集中在registry/new-york/blocks/目录下，按业务场景分为 6 个子目录；每个页面都有对应的注册元数据 JSON，存放在public/r/（例如public/r/auth-login-form.json），供 shadcn CLI 一键安装时拉取。

84 个页面级 Blocks 全景：6 大分类清单

按项目内registry/new-york/blocks/的实际文件统计，各分类数量如下：

几个对新手最实用的举例：

• 登录/注册：auth-login-form（邮箱密码 + 社交登录）、auth-signup-form、auth-magic-link（无密码登录）；
• 变现三件套：billing-pricing-table（定价表）+billing-plan-selector（月/年切换）+billing-subscription-card（当前订阅）；
• 设置中心：18 个 Settings Blocks 基本覆盖后台设置页能想到的所有 Tab；
• AI 产品：14 个 AI Blocks 支持流式输出、引用来源、思考过程动画，做 AI 应用可以直接用。

一键安装步骤：3 条命令搭出登录页

HextaUI 完全复用 shadcn 的 registry 安装机制，无需额外学习成本。

第 1 步：准备一个 Next.js + shadcn/ui 项目

先创建 Next.js 应用并初始化 shadcn（安装 Tailwind、Radix 等基础依赖），这一步是 shadcn/ui 的常规流程。

第 2 步：配置 HextaUI 注册表

项目根目录的components.json中已声明了 HextaUI 的 registry（@hextaui），指向public/r/*.json这套元数据。新项目的配置结构可参考本仓库的components.json。

第 3 步：用 CLI 添加 Blocks

bunx shadcn add @hextaui/auth-login-form

命令执行后，登录页源码会被下载到你的项目components目录中，依赖自动补齐。之后按需再添加：

bunx shadcn add @hextaui/billing-pricing-table bunx shadcn add @hextaui/settings-profile

💡 想看某个 Block 长什么样？本仓库components/demo/目录下有每个组件的演示文件，app/blocks/则是所有 Blocks 的在线预览路由源码，lib/blocks-registry.tsx维护了页面与组件的完整映射。

如果想通读源码，可获取仓库后浏览：

git clone https://gitcode.com/gh_mirrors/he/HextaUI

典型 SaaS 组合：1 天搭建路线

以"AI 笔记 SaaS"为例，按这个顺序组合 Blocks，一天内可以完成全部页面：

技巧：每个 Block 都带示例数据，先跑通再替换成自己的接口；需要局部微调时直接改源码文件即可，比如改registry/new-york/blocks/billing/billing-pricing-table.tsx里的套餐字段。

新手常见问题：5 个高频疑问解答

Q1：HextaUI 会限制我改样式吗？

不会。安装后代码就在你仓库里，配合 Tailwind CSS 类名即可自由定制，项目还内置了主题切换能力（见components/theme-provider.tsx与lib/generate-theme-script.ts）。

Q2：只能用 Next.js 吗？

Block 是标准 React + Tailwind 组件，React/Vite 项目同样可用，只是 shadcn CLI 一键安装体验在 Next.js 下最顺。

Q3：和直接抄 shadcn/ui 官方示例比，优势在哪？

shadcn 官方给的是"组件"，HextaUI 给的是"页面"。你要做订阅页，自己组合要半天，HextaUI 一条命令 30 秒，且包含搜索、分页、空状态等细节处理。

Q4：AI 类 Blocks 需要自己接模型吗？

需要。Blocks 负责界面（流式渲染、引用、错误重试等），模型 API 调用由你接 OpenAI 或任意兼容接口，Mock 数据已内置方便先开发界面。

Q5：项目里如何快速找到某个 Block？

翻registry.json（全部条目的索引）或public/llms.txt（带描述的完整清单），两者都按分类列出全部条目。

总结：为什么 HextaUI 适合新手快速上线 SaaS

• ✅零学习成本：复用 shadcn 安装机制，一条shadcn add命令搞定；
• ✅覆盖全：84 个页面积木横跨 AI、认证、计费、设置、任务、团队 6 大场景；
• ✅源码归属自己：MIT 协议、直接进仓库，无黑盒依赖；
• ✅省时间：登录页到账单页的组合路线，1 天可完成整个 SaaS 界面。

对新手来说，最实际的用法是：先按本文的"1 天路线"把页面全部装出来跑通，再逐页替换数据源——界面框架交给 HextaUI 的 Blocks，你的精力留给产品和业务。🚀

【免费下载链接】HextaUIReady-to-use foundation components/blocks built on top of shadcn/ui.项目地址: https://gitcode.com/gh_mirrors/he/HextaUI