登入註冊頁 Auth Pages｜React 元件

登入／註冊頁組，含欄位展開收合、標題與按鈕文字morph、送出載入狀態等表單動效。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add "https://webberui.com/r/auth-pages.json?t=<安裝 token>"

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

版面款式variant

初始模式defaultMode

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<AuthPages/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add "https://webberui.com/r/auth-pages.json?t=<安裝 token>"

或在 components.json 設定 registries 後，改用 @webberui/auth-pages 安裝。

使用

import { AuthPages } from "@/components/ui/auth-pages";
import { Apple, Mail } from "lucide-react";

<AuthPages
  defaultMode="login"
  onSubmit={async (mode, values) => {
    await signIn(mode, values);
  }}
  onSocial={(id) => oauth(id)}
  socialProviders={[
    { id: "email", label: "Email", icon: Mail },
    { id: "apple", label: "Apple", icon: Apple },
  ]}
/>;

受控模式

不傳 mode 時由元件自行管理登入／註冊狀態（非受控）。若要與路由或外部狀態同步，改用受控寫法：

const [mode, setMode] = React.useState<AuthMode>("login");

<AuthPages mode={mode} onModeChange={setMode} onSubmit={handleSubmit} />;

split 款式

variant="split" 會在寬螢幕左側加上流動漸層的品牌側欄，窄螢幕自動收合為單欄卡片。可用 aside 覆寫側欄內容。

<AuthPages variant="split" aside={<MyBrandPanel />} onSubmit={handleSubmit} />;

Props

Prop	型別	預設值	說明
`mode`	`"login" \| "signup"`	—	受控目前模式；未提供時為非受控
`defaultMode`	`"login" \| "signup"`	`"login"`	非受控時的初始模式
`onModeChange`	`(mode) => void`	—	模式切換時觸發
`onSubmit`	`(mode, values) => void \| Promise<void>`	—	送出表單；回傳 Promise 時顯示載入狀態
`onSocial`	`(providerId) => void`	—	點擊社群登入按鈕時觸發
`variant`	`"card" \| "split"`	`"card"`	版面款式
`brand`	`ReactNode`	—	卡片頂端品牌區塊
`socialProviders`	`AuthSocialProvider[]`	—	社群登入清單；留空不顯示
`aside`	`ReactNode`	—	split 款式側欄內容
`className`	`string`	—	外層容器樣式

onSubmit 的 values 為 AuthSubmitValues：登入模式含 email、password、remember；註冊模式改含 name、email、password、confirmPassword。

動效細節

掛載時卡片內容以 stagger 依序淡入上移
切換模式時，姓名與確認密碼欄位以 spring 展開／收合高度，登入專屬的「記住我／忘記密碼」列同步替換
標題與送出按鈕文字以 morph 過場切換，送出中顯示旋轉載入圖示

可及性

表單以 aria-labelledby 關聯標題，欄位皆有對應 <label> 與 autoComplete
密碼顯示切換為真正的按鈕，帶 aria-label 與 aria-pressed
中文等 IME 組字期間按 Enter 不會誤送出表單（含 Safari keyCode 229 情境）
使用者開啟「減少動態效果」時，進場、欄位展開與文字 morph 皆改為瞬間切換，側欄漸層停止流動

Auth Pages

把這個效果裝進你的專案

本頁目錄