shadcn-nextjs-boilerplate
shadcn-nextjs-boilerplate 是一款专为快速构建 AI SaaS 应用而设计的开源后台管理模板。它基于 Next.js、Tailwind CSS 和 Shadcn UI 打造,旨在帮助开发者在几天内轻松启动项目,无需从零开始搭建基础架构。
该工具主要解决了开发 ChatGPT 类应用时前端重复劳动多、启动周期长的问题。它预置了超过 30 个精美的深色/浅色模式前端组件(如按钮、导航栏、卡片及聊天界面元素),并提供了完整的示例页面,让开发者能直接复用成熟的结构,专注于核心业务逻辑而非界面打磨。
这款模板非常适合全栈开发者、初创团队技术负责人以及希望快速验证产品原型的工程师使用。其独特亮点在于深度集成了 Shadcn UI 的现代化设计体系,不仅代码结构清晰、易于定制,还配套了详细的文档和 Figma 设计文件,实现了从设计到代码的无缝衔接。无论是构建 OpenAI 聊天机器人还是其他 AI 驱动的管理后台,shadcn-nextjs-boilerplate 都能提供高效、美观且免费的起步方案。
使用场景
一位全栈开发者计划在三天内上线一款面向中小企业的 AI 客服 SaaS 产品,需要快速构建包含聊天界面、用户认证和数据看板的管理后台。
没有 shadcn-nextjs-boilerplate 时
- 重复造轮子耗时久:开发者需从零配置 NextJS 路由、Tailwind CSS 主题及 Shadcn UI 组件库,仅环境搭建就消耗了整整两天。
- 核心功能开发受阻:缺乏现成的 ChatGPT 对话 UI 和 OpenAI API 对接模板,必须手动编写复杂的消息流处理和状态管理逻辑。
- 界面风格不统一:自行设计的深色/浅色模式切换及响应式布局容易出现样式冲突,导致后台管理界面在不同设备上体验割裂。
- 文档与示例缺失:遇到鉴权(Auth)或数据可视化难题时,找不到针对该技术栈的完整参考代码,排查问题效率极低。
使用 shadcn-nextjs-boilerplate 后
- 一键启动项目:通过
git clone和npm run init即可直接获得集成了 NextJS、Shadcn UI 和 Tailwind CSS 的完整工程,立省 80% 初始化时间。 - 内置 AI 业务逻辑:直接复用预制的 ChatGPT 聊天组件和 API 连接代码,只需填入 Key 即可运行流畅的对话功能,专注业务差异化。
- 专业级 UI 体验:直接使用超过 30 个精心设计的暗黑/明亮模式组件(如导航栏、卡片、表单),确保管理后台视觉统一且美观。
- 详尽文档指引:参照官方提供的复杂场景文档和 Figma 设计稿,快速解决鉴权配置和页面布局问题,开发流程顺畅无阻。
shadcn-nextjs-boilerplate 将原本数周的后台搭建工作压缩至几小时,让开发者能真正专注于核心 AI 业务逻辑的创新与落地。
运行环境要求
- 未说明
未说明
未说明

快速开始
官网 • 文档 • PRO版 • 免费模板 • Twitter
使用首个基于Shadcn UI和NextJS的Admin Dashboard样板,您可以在几天内启动自己的SaaS初创项目。立即开始使用Horizon AI样板吧!
简介
Horizon AI样板是首个专为Shadcn UI、NextJS和Tailwind CSS打造的开源Admin Dashboard OpenAI ChatGPT AI模板!让您更快地创建出色的Chat AI SaaS应用。
它包含30多种深色/浅色前端组件,如按钮、输入框、导航栏、导航标签、卡片和提示框等,让您可以自由选择和组合。
文档
每个组件都在详尽复杂的文档中得到了清晰展示。您可以点击这里了解更多文档信息。
快速开始
安装Horizon ChatGPT AI模板,只需运行以下命令之一:
- 从NodeJs官方页面安装NodeJS LTS版本(注意:本产品仅支持LTS版本)
使用以下命令克隆仓库:
git clone https://github.com/horizon-ui/shadcn-nextjs-boilerplate.git
然后在终端运行:
npm install
npm run init
最后运行以下命令启动本地服务器:
npm run dev
您的API密钥无法使用吗?
- 请确保您已注册OpenAI账户,并拥有有效的ChatGPT API密钥。我们不销售API密钥。
- 请务必在OpenAI账单页面中添加您的支付信息。如果没有支付信息,您的API密钥将无法使用。
- 应用程序会连接到OpenAI API服务器,以验证您的API密钥是否正常工作。
Figma版本
Horizon AI样板也提供Figma格式!点此查看! 🎨
示例模块
如果您希望为自己的创业项目寻找灵感,或直接向客户展示成果,可以使用我们预先构建的示例模块快速启动开发。这些模块可以帮助您迅速搭建起网站的基本框架。
查看此处的示例模块
PRO版
解锁海量组件和页面,请访问我们的PRO版——了解详情
报告问题
我们使用GitHub Issues作为Horizon UI的官方漏洞追踪工具。对于想要报告问题的用户,我们有以下建议:
- 请确保您使用的是最新版本的Horizon UI样板。请在我们的CHANGELOG文件中查看您的仪表板更新记录。
- 提供可复现的问题步骤将有助于缩短修复时间。
- 部分问题可能与浏览器有关,因此说明您是在哪个浏览器中遇到问题可能会有所帮助。
社区
加入社区吧!欢迎随时提问、报告问题,并结识已经使用Horizon UI的其他开发者!
版权与许可
致谢
特别感谢那些帮助我们打造这款优秀样板包的开源资源,包括:
版本历史
v3.0.02025/01/28v2.1.02024/09/06v2.0.02024/08/26v1.1.02024/07/18v1.0.02024/05/20常见问题
相似工具推荐
openclaw
OpenClaw 是一款专为个人打造的本地化 AI 助手,旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚,能够直接接入你日常使用的各类通讯渠道,包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息,OpenClaw 都能即时响应,甚至支持在 macOS、iOS 和 Android 设备上进行语音交互,并提供实时的画布渲染功能供你操控。 这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地,用户无需依赖云端服务即可享受快速、私密的智能辅助,真正实现了“你的数据,你做主”。其独特的技术亮点在于强大的网关架构,将控制平面与核心助手分离,确保跨平台通信的流畅性与扩展性。 OpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者,以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力(支持 macOS、Linux 及 Windows WSL2),即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你
stable-diffusion-webui
stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面,旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点,将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师,还是想要深入探索模型潜力的开发者与研究人员,都能从中获益。其核心亮点在于极高的功能丰富度:不仅支持文生图、图生图、局部重绘(Inpainting)和外绘(Outpainting)等基础模式,还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外,它内置了 GFPGAN 和 CodeFormer 等人脸修复工具,支持多种神经网络放大算法,并允许用户通过插件系统无限扩展能力。即使是显存有限的设备,stable-diffusion-webui 也提供了相应的优化选项,让高质量的 AI 艺术创作变得触手可及。
everything-claude-code
everything-claude-code 是一套专为 AI 编程助手(如 Claude Code、Codex、Cursor 等)打造的高性能优化系统。它不仅仅是一组配置文件,而是一个经过长期实战打磨的完整框架,旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能,everything-claude-code 能显著提升 AI 在复杂任务中的表现,帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略,使得模型响应更快、成本更低,同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库,还是需要 AI 协助进行安全审计与自动化测试,everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目,它融合了多语言支持与丰富的实战钩子(hooks),让 AI 真正成长为懂上
ComfyUI
ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎,专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式,采用直观的节点式流程图界面,让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景,也能自由组合模型、调整参数并实时预览效果,轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性,不仅支持 Windows、macOS 和 Linux 全平台,还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构,并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者,还是追求极致创作自由度的设计师与资深 AI 绘画爱好者,ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能,使其成为当前最灵活、生态最丰富的开源扩散模型工具之一,帮助用户将创意高效转化为现实。
LLMs-from-scratch
LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目,旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型(LLM)。它不仅是同名技术著作的官方代码库,更提供了一套完整的实践方案,涵盖模型开发、预训练及微调的全过程。 该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型,却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码,用户能够透彻掌握 Transformer 架构、注意力机制等关键原理,从而真正理解大模型是如何“思考”的。此外,项目还包含了加载大型预训练权重进行微调的代码,帮助用户将理论知识延伸至实际应用。 LLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API,而是渴望探究模型构建细节的技术人员而言,这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计:将复杂的系统工程拆解为清晰的步骤,配合详细的图表与示例,让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础,还是为未来研发更大规模的模型做准备
Deep-Live-Cam
Deep-Live-Cam 是一款专注于实时换脸与视频生成的开源工具,用户仅需一张静态照片,即可通过“一键操作”实现摄像头画面的即时变脸或制作深度伪造视频。它有效解决了传统换脸技术流程繁琐、对硬件配置要求极高以及难以实时预览的痛点,让高质量的数字内容创作变得触手可及。 这款工具不仅适合开发者和技术研究人员探索算法边界,更因其极简的操作逻辑(仅需三步:选脸、选摄像头、启动),广泛适用于普通用户、内容创作者、设计师及直播主播。无论是为了动画角色定制、服装展示模特替换,还是制作趣味短视频和直播互动,Deep-Live-Cam 都能提供流畅的支持。 其核心技术亮点在于强大的实时处理能力,支持口型遮罩(Mouth Mask)以保留使用者原始的嘴部动作,确保表情自然精准;同时具备“人脸映射”功能,可同时对画面中的多个主体应用不同面孔。此外,项目内置了严格的内容安全过滤机制,自动拦截涉及裸露、暴力等不当素材,并倡导用户在获得授权及明确标注的前提下合规使用,体现了技术发展与伦理责任的平衡。

