登录・注册

使用方法（Next.js）

在自己的项目里显示这个页面的 3 个步骤

1. 1

   在终端安装要用的组件和库（只需一次）

   复制

   npx shadcn@latest add button input label tabs

   复制

   npm i react-hook-form zod

   复制

   npm i @hookform/resolvers

   如果项目还没有安装 shadcn/ui，先运行一次 npx shadcn@latest init

2. 2

   把文件粘贴到这个位置

   my-app/
   ├─ components/
   │   └─ login/
   │       ├─ LoginTabs.tsx   ← 从上面的窗口复制的
   │       └─ auth.tsx   ← 从上面的窗口复制的
   └─ app/
       └─ login/
           └─ page.tsx   ← 在第 3 步创建

   文件夹不存在就新建。所有文件都放进同一个文件夹

3. 3

   在页面文件中导入

   复制

   import LoginTabs from "@/components/login/LoginTabs"
   
   export default function Page() {
     return <LoginTabs />
   }

   写在 app/login/page.tsx 中。运行 npm run dev，打开 /login 就能看到