### 如何在 Router App 中使用
Shadcn/
UI 或
Shadcn/
UI 与 Router App 的集成
Shadcn/
UI 是一个基于 Tailwind CSS 构建的高质量
UI 组件库，适用于现代前端框架如
React 和 Next.js。以下是关于如何在 Router App（例如 Next.js 应用程序中的 `app` 路由器模式）中集成和使用
Shadcn/
UI 的详细说明。
#### 集成步骤
1. **初始化
项目**
如果尚未创建 Next.js
项目，则可以通过以下命令快速启动一个新的 Next.js 13
+ 项目[^4]：
```bash
npx create-next-app@latest my-app --typescript --eslint --tailwind --src-dir
cd my-app
```
2. **安装
Shadcn/
UI**
安装所需的依赖项以启用
Shadcn/
UI 功能。运行以下命令来安装必要的包：
```bash
npm install @
shadcn/
ui react-dom
```
3. **配置 Tailwind CSS**
确保
项目的 Tailwind CSS 已正确定义并加载了
Shadcn/
UI 所需的扩展样式。如果需要自定义或移除某些部分，请参考文档调整 `tailwind.config.js` 文件的内容。
4. **引入组件**
将
Shadcn/
UI 提供的基础组件导入到您的应用程序中。例如，在布局文件 (`app/layout.tsx`) 中可以这样写入基础结构代码：
```tsx
import "./globals.css";
import { Button } from "@/components/
ui/button";
export default function RootLayout({
children,
}: {
children:
React.
ReactNode;
}) {
return (
<html lang="en">
<body>
{/* Example of using a button component */}
<Button variant="default">Click Me</Button>
{children}
</body>
</html>
);
}
```
5. **设置路由保护机制**
对于涉及用户身份验证的应用场景，可借鉴
React 基于
shadcn/
ui 实现登录/注销功能的经验[^2]。具体来说，利用 Next.js 的中间件或者客户端逻辑完成对未授权用户的重定向处理。下面是一个简单的例子展示如何结合
Shadcn/
UI 表单组件实现登录界面：
```tsx
"use client";
import { useState, useEffect } from "
react";
import { useForm } from "
react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Input } from "@/components/
ui/input";
import { Label } from "@/components/
ui/label";
import { Button } from "@/components/
ui/button";
const loginSchema = z.object({
email: z.string().email(),
password: z.string().min(6),
});
type LoginInputs = z.infer<typeof loginSchema>;
export default function LoginPage() {
const [loading, setLoading] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
} = useForm<LoginInputs>({
resolver: zodResolver(loginSchema),
});
async function onSubmit(data: LoginInputs) {
try {
setLoading(true);
// Simulate API call here...
console.log({ data });
} catch (error) {
alert(error.message || "An error occurred.");
} finally {
setLoading(false);
}
}
return (
<div className="flex flex-col items-center justify-center h-screen gap-8">
<h1 className="text-2xl font-bold text-gray-900">Sign In</h1>
<form
onSubmit={handleSubmit(onSubmit)}
className="space-y-4 w-full max-w-md"
>
<div>
<Label htmlFor="email">Email Address</Label>
<Input
id="email"
placeholder="example@example.com"
{...register("email")}
/>
{errors.email && (
<p className="mt-1 text-sm text-red-700">{errors.email?.message}</p>
)}
</div>
<div>
<Label htmlFor="password">Password</Label>
<Input
id="password"
type="password"
autoComplete="current-password"
{...register("password")}
/>
{errors.password && (
<p className="mt-1 text-sm text-red-700">
{errors.password?.message}
</p>
)}
</div>
<Button disabled={loading} type="submit">
Sign In
</Button>
</form>
</div>
);
}
```
6. **优化用户体验**
参考已有的最佳实践案例，比如官方提供的 dashboard starter kit[^3]，从中学习更多高级技巧用于增强实际开发过程中的效率与质量。
---
扫一扫
1941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
