color mode

中文 | English

Deploy GitHub Workflow Status (branch) thanks License

⚡️ 快速模板 Starter Template - React v19 + Next.js + Nextra (v4) + TypeScript + TailwindCSS (v4) + Shadcn UI

• 🚀 Live Demo 在线体验
• ✨ 备用地址1
• ✨ 备用地址2

• Tailwind CSS v4 升级:全面升级至 Tailwind CSS v4,优化性能并引入新特性。
• Nextra v4 重构:升级至 Nextra v4,提升文档生成效率和开发体验。

👉 点击查看详细升级说明

• ⚡️ Next.js + TypeScript: 高效的 React 框架和类型安全支持
• 🎨 Tailwind CSS (v4): 原子化 CSS, 快速构建自定义、响应式界面 UI
• 🧩 Shadcn UI: 高度可定制的 UI 组件集合,无需安装额外依赖
• 📚 Nextra v4: 基于 Next.js 的静态站点生成器,专为文档而优化
• 🛠️ ESLint: 统一编码风格和最佳实践
• ⛅ 轻量化设计: 精简项目设置,专注于内容编写

• React 19.x
• Node >= 20.x
• Pnpm 9.x
• VS Code 插件 dbaeumer.vscode-eslint >= v3.0.5 (pre-release)

image

image

image

image

image

• 安装依赖

pnpm i

• 本地开发

pnpm dev

接着用浏览器打开 http://localhost:8000 即可访问服务

🎉 成功运行了? 如果你喜欢这个模板的简洁配置,别忘了鼓励一下:

Star this repo

本项目已集成 Shadcn UI, 按照以下步骤安装/编辑组件并使用:

首次执行 pnpm dlx shadcn@latest init 命令初始化 Shadcn UI 基本项目结构(如果尚未初始化)

[!IMPORTANT]

该初始化命令用于创建 Shadcn UI 的基本项目结构

本项目已完成初始化,无需再次运行此命令

1. 使用 Shadcn CLI 添加组件:

   pnpm dlx shadcn@latest add <组件名>

   如添加 <Alert /> 组件,执行以下命令即可,详见文档

   pnpm dlx shadcn@latest add alert

2. 使用组件

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
export default function Home() {
 return (
 <Alert>
 <AlertTitle>Heads up!</AlertTitle>
 <AlertDescription>
 You can add components and dependencies to your app using the cli.
 </AlertDescription>
 </Alert>
 )
}

3. 自定义组件样式(可选)

Shadcn UI 组件通常已提供了流行的默认样式和功能,能满足大多数需求,若确实需要进行自定义定制,可编辑相应的组件文件,如:

打开 src/components/ui/alert.tsx 文件来修改 Alert 组件的样式

注意:在大多数情况下,Shadcn UI 提供的默认样式已经足够满足需求,无需进行额外修改

以下是一些开发者和团队正在使用、参考或受本项目启发的项目:

💡 如果您的项目也在使用或借鉴了本项目,我们诚挚欢迎您:

• 通过提交 Issue 分享您的项目链接
• 提交 Pull Request (PR) 将您的项目添加到列表中

本模板作为技术方案参考提供,使用者需知悉以下风险及义务:

• 技术风险:依赖框架(Next.js/Nextra/Tailwind CSS等)存在版本迭代风险,第三方组件(如 Shadcn UI)的行为规范以原始仓库为准,环境配置变更可能导致不可预见的构建异常
• 使用限制:禁止用于违反开源协议或法律法规的场景,使用者需自行完成代码安全审查及生产环境验证
• 责任免除:不承诺技术方案的业务适用性、安全性担保及定制支持,因使用/修改引发的直接或间接后果均由使用者自行承担

MIT License | Copyright © 2020-PRESENT Wisdom