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/HextaUIHextaUI 是一套构建在 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/的实际文件统计各分类数量如下分类数量覆盖的典型 SaaS 页面 AI14AI 对话、流式回复、模型选择器、提示词模板、用量配额 Auth 认证16登录、注册、魔法链接、两步验证、改密、删除账户 Billing 计费16定价表、订阅卡片、发票列表、支付失败、优惠券⚙️ Settings 设置18个人资料、API Keys、Webhooks、SSO、备份、数据导入导出✅ Tasks 任务7任务看板、任务列表、项目列表、进度追踪 Team 团队15团队仪表盘、成员管理、权限矩阵、团队聊天、文件共享几个对新手最实用的举例登录/注册auth-login-form邮箱密码 社交登录、auth-signup-form、auth-magic-link无密码登录变现三件套billing-pricing-table定价表billing-plan-selector月/年切换billing-subscription-card当前订阅设置中心18 个 Settings Blocks 基本覆盖后台设置页能想到的所有 TabAI 产品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 的 registryhextaui指向public/r/*.json这套元数据。新项目的配置结构可参考本仓库的components.json。第 3 步用 CLI 添加 Blocksbunx 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一天内可以完成全部页面时间页面使用的 Blocks上午注册登录auth-signup-formauth-login-formauth-otp-verify上午定价页billing-pricing-tablebilling-plan-selector中午支付订阅billing-payment-formbilling-subscription-cardbilling-invoice-list下午AI 主界面ai-conversationai-prompt-inputai-thinking下午设置中心settings-profilesettings-securitysettings-notifications晚上团队协作team-dashboardteam-member-listteam-projects技巧每个 Block 都带示例数据先跑通再替换成自己的接口需要局部微调时直接改源码文件即可比如改registry/new-york/blocks/billing/billing-pricing-table.tsx里的套餐字段。新手常见问题5 个高频疑问解答Q1HextaUI 会限制我改样式吗不会。安装后代码就在你仓库里配合 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 秒且包含搜索、分页、空状态等细节处理。Q4AI 类 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考