Page UI

Page UI 是一套可直接复制粘贴到 React/Next.js 项目中的落地页组件与模板，基于 Shadcn UI 和 TailwindCSS 构建，解决开发者从零设计落地页耗时、转化率低的问题。

核心用法：复制粘贴，零依赖

Page UI 不提供 npm 包，所有组件以代码片段形式存在。用户浏览文档或模板后，直接复制所需部分的代码到自己的代码库中，组件随即成为项目的一部分，无需额外安装依赖。

• Thief Mode（偷师模式）：一键复制模板中的任意区块，连代码带样式直接拿走
• 与 Shadcn UI 同理念：复用代码而非安装库，保持项目轻量
• 支持手动安装或通过 Shipixen 一键部署含全部组件的代码库

模板与组件：覆盖落地页全场景

官方提供 30+ 组件和 10+ 完整模板，涵盖从导航到定价、从社交证明到 CTA 的常见区块。每个组件都带有详细的 props 说明和代码示例，支持实时切换主题预览。

• LandingLeadingPill：用于公告、徽章的灵活内联组件，支持 SVG 边框、彩虹渐变、毛玻璃背景
• CTA 特效组件：Primary CTA Text Effects 和 Primary CTA Background Effects，分别提供文字动画和粒子/画布背景
• 定价比较组件：支持 2-5 个产品/服务的功能对比，可自定义页眉、页脚和特性列表
• About 区块：展示公司愿景、使命的信任构建组件
• 模板示例：Gnomie AI（B2C AI SaaS 轮播与产品导览）、Specta（创作者平台，含跑马灯和展示区）、Minimum Via（极简风格产品/服务代理）

设计原则：从成功 SaaS 页面提炼

团队花费数月分析大量高转化 SaaS 落地页，将经过验证的布局、文案节奏和视觉层次融入组件。所有组件均可主题化，暗色模式原生支持。

• 主题切换：文档内直接切换主题，所见即所得
• 响应式与暗色模式：所有组件内置响应式设计，暗色模式开箱即用
• 用户口碑：Isa T. 称赞“主题化和响应式设计 + 暗色模式”；Adarsh G. 表示“会一直使用”；SnackStack 评价“营销利器”

适用人群与上手路径

适合使用 React/Next.js 的开发者，尤其是独立开发者、初创团队和需要快速迭代落地页的项目。无需设计背景，只需基本的 React 和 TailwindCSS 知识。

• 安装指南：提供 Next.js（13+）、React（17+）和手动安装三种方式
• AI 辅助：Page AI 可用自然语言生成生产级落地页代码
• 文档质量：数百个可直接复制修改的示例，每个组件都有完整的 props 和代码样本

常见问题

Q1：Page UI 和 Shadcn UI 是什么关系？

A1：Page UI 借鉴了 Shadcn UI 的“复制粘贴”理念，部分组件直接构建在 Shadcn UI 和 TailwindCSS 之上，可视为 Shadcn UI 在落地页场景的扩展库。

Q2：Page UI 的模板和组件真的完全免费吗？

A2：是的。所有模板和组件均免费且开源，用户复制后永久拥有代码，无需署名，无任何隐藏付费项。

Q3：非 React 项目能用 Page UI 吗？

A3：目前仅支持 React / Next.js（TypeScript），官方计划未来支持更多框架，但暂无具体时间表。

更多同类工具与网站,可在落地页组件分类继续挑选。

信息核实于 2026年7月,具体以官网为准。