机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

🚀 Launch UI – Next.js 网站组件模板

一个使用 Next.js、Shadcn/ui 和 Tailwind CSS 构建的生产就绪网站组件的全面集合。非常适合希望快速使用 shadcn/ui 组件构建现代响应式网站的开发者。

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
[!提示]
Tailwind v4 React 19:
Launch UI v2.0 添加了对 Tailwind v4、React 19 和 Next.js 16 的全面支持。
如果你使用的是 Tailwind 3，支持它的版本仍在 单独分支 上维护。

🚀 快速开始

1. 安装依赖项:

npm install

2. 启动开发服务器：

npm run dev

3. 打开 http://localhost:3000 查看您的网站

📚 资源

• 实时预览
• 文档

✨ 功能

• 🎨 现代设计系统：基于 shadcn/ui 构建，提供简洁且专业的外观
• 📱 完全响应式：所有组件在桌面、平板和移动设备上均完美运行
• ⚡ 性能优化：利用现代 Next.js 特性实现最佳加载速度
• 🌗 暗黑模式支持：根据系统偏好无缝切换明/暗模式
• ♿ 优先考虑可访问性：WCAG 合规组件，提供包容性的网页体验
• 🎯 SEO 优化：遵循最佳实践构建，提高搜索引擎可见性

🧱 组件

包含

• 导航栏：现代导航组件，包含多种变体，包括静态和浮动样式。具有下拉菜单、移动响应功能及暗黑模式无缝支持
• 主视觉区：惊艳的主视觉区，多种变体包括基于插图的布局、发光效果及移动应用展示。旨在给用户留下深刻第一印象并有效传递信息
• 项目：灵活的网格系统，用于功能列表、价格表及产品展示。包含默认及品牌化变体，并支持响应式布局
• Logo：干净的 Logo 展示组件，采用静态网格布局。非常适合展示品牌合作伙伴和客户 Logo，并保持一致的样式
• 常见问题：全面的 FAQ 组件，带可展开手风琴。具有流畅动画和响应式设计，提供最佳用户体验
• 统计：多功能统计显示组件，支持水平、卡片及网格布局。非常适合展示统计数据、大数字、关键指标和数据点
• 行动号召 (CTA)：强大的呼叫行动组件，包含多种样式，包括盒状布局和光束效果。旨在创建吸引用户的部分，提高参与度
• 页脚：多功能页脚，提供多种布局变体，包括默认、简约及多列样式。非常适合组织网站信息和链接

在 专业版

• 便当网格：高级砌体风格网格系统，用于创建视觉上吸引人的内容布局。非常适合以优雅的卡片式布局展示功能、产品或内容
• 功能：复杂的功能展示，支持灵活的插图位置和模型展示。包含多种布局选项，同时保持 shadcn 一贯的设计风格
• 社交认证：先进的社交认证展示，采用砌体布局、跑马灯动画和可点击卡片。专为以吸引人的方式展示用户反馈而构建
• 标签页：完全可定制的标签页，支持左、上和下对齐。以无障碍访问为设计理念，实现内容组织的无缝体验
• 轮播图：动态轮播组件，具有多种变体。特性包括平滑动画、响应式设计和可定制的导航控制
• 用户评价：综合用户评价组件，支持网格布局、轮播和静态展示。设计用于美观且可访问的客户反馈展示

🛠️ 技术栈

• 框架：Next.js 16
• 样式: Tailwind CSS
• 用户界面组件：shadcn/ui
• 语言: TypeScript
• 动画：CSS 动画和过渡效果
• 图标：Lucide 图标

💡 使用场景

Launch UI 适用于需要美观、高转化率的着陆页面，并面向注重专业质量的受众的产品。

非常适合构建以下类型的着陆页：

• 🛠️ 开发者工具：展示 API、SDK、CLI 工具和技术基础设施产品
• 🤖 AI 驱动应用：展示基于 AI、助手、智能代理和自动化工具制作的产品
• 💻 SaaS 产品：发布 Web 应用、生产力工具和业务解决方案
• 📱 移动应用：通过精美的应用展示推广 iOS 和 Android 应用
• 🚀 初创产品：非常适合独立开发者、单人创始人和技术初创公司
• ⚡ 技术产品：适用于技术产品、开发工具和编程软件

📝 许可

该仓库根据 MIT 许可 进行授权。

网站 •
文档 •
预览