ui-components

# Neon Auth - UI 组件参考 用于认证流程的预构建 UI 组件。 ## 可用组件 - `AuthView` - 完整的认证页面（登录、注册、忘记密码等） - **优先使用此组件** - `SignedIn` / `SignedOut` - 基于认证状态的条件渲染 - `UserButton` - 带有下拉菜单的用户头像 - `NeonAuthUIProvider` - UI 组件必需的包装器 ## CSS 导入 **关键：** 选择一种导入方法。切勿同时导入两者。 **不使用 Tailwind:** typescript // 在 app/layout.tsx 或入口文件中 import "@neondatabase/auth/ui/css"; **使用 Tailwind v4:** css /* 在 app/globals.css 中 */ @import "tailwindcss"; @import "@neondatabase/auth/ui/tailwind"; ## NeonAuthUIProvider 设置 ### Next.js App Router tsx "use client"; import { NeonAuthUIProvider } from "@neondatabase/auth/react/ui"; import { authClient } from "@/lib/auth/client"; import { useRouter } from "next/navigation"; import Link from "next/link"; export function AuthProvider({ children }: { children: React.ReactNode }) { const router = useRouter(); return ( router.refresh()} Link={Link} social={{ providers: ["google", "github"], }} > {children} ); } ### React SPA (使用 react-router-dom) tsx import { NeonAuthUIProvider } from "@neondatabase/auth/react/ui"; import { useNavigate, Link as RouterLink } from "react-router-dom"; import { authClient } from "./lib/auth-client"; function Link({ href, ...props }: { href: string } & React.AnchorHTMLAttributes) { return ; } export function Providers({ children }: { children: React.ReactNode }) { const navigate = useNavigate(); return ( navigate(path)} replace={(path) => navigate(path, { replace: true })} onSessionChange={() => {}} Link={Link} social={{ providers: ["google", "github"], }} > {children} ); } ## AuthView 组件 渲染完整的认证页面。 ### Next.js App Router 创建 `app/auth/[path]/page.tsx`: tsx import { AuthView } from "@neondatabase/auth/react/ui"; import { authViewPaths } from "@neondatabase/auth/react/ui/server"; export function