電子報訂閱區塊
訂閱表單區塊：輸入動畫、送出成功變身與社會證明。
置中的電子報訂閱 section：Email 輸入框 focus 時亮起光暈，送出按鈕依序變身 loading 旋轉圈與成功打勾，並有紙飛機自按鈕飛出；下方以訂閱者頭像堆疊與人數提供社會證明，成功後人數即時 +1。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
12480
3200
<NewsletterSignupSection />
安裝
npx shadcn@latest add https://webberui.com/r/newsletter-signup-section.json或在 components.json 設定 registries 後，改用 @webberui/newsletter-signup-section 安裝。
安裝依賴後，從 registry JSON（/r/newsletter-signup-section.json 的 files[0].content）複製 newsletter-signup-section.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { NewsletterSignupSection } from "@/components/ui/newsletter-signup-section";
<NewsletterSignupSection
title="每週一封，設計靈感直送信箱"
subtitle="精選 UI 動畫技巧與前端趨勢，隨時可以取消訂閱。"
subscriberCount={12480}
onSubscribe={async (email) => {
await fetch("/api/subscribe", {
method: "POST",
body: JSON.stringify({ email }),
});
}}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | "訂閱我們的電子報" | 區塊主標題 |
subtitle | string | "每週精選內容直送信箱，隨時可以取消訂閱。" | 副標說明文字 |
placeholder | string | "you@example.com" | Email 輸入框的 placeholder 文字 |
buttonLabel | string | "訂閱" | 送出按鈕的預設文字 |
successLabel | string | "已訂閱" | 送出成功後按鈕顯示的文字 |
successMessage | string | "感謝訂閱！確認信已寄往你的信箱。" | 成功後於表單下方顯示的提示訊息 |
subscriberCount | number | 12480 | 訂閱者總數，顯示於社會證明文字 |
avatars | string[] | ["林","陳","張","王","李"] | 頭像堆疊的縮寫清單，每個字串渲染為一顆漸層頭像 |
onSubscribe | (email: string) => void | Promise<void> | — | 送出時呼叫；reject 時顯示錯誤並回到待輸入狀態 |
resetDelay | number | 3200 | 成功後自動重置的延遲（毫秒），0 表示停留在成功態 |
className | string | — | 透傳到最外層 section |
可及性
- Email 輸入框具
sr-onlylabel、type="email"與autoComplete="email"，支援瀏覽器自動填入 - 錯誤與成功訊息置於
aria-live="polite"區域，輔助科技會即時播報 - 格式錯誤時輸入框標記
aria-invalid，並以aria-describedby關聯錯誤文字 - 送出中按鈕標記
aria-busy並停用，防止重複送出 - 使用者系統開啟「減少動態效果」時，停用紙飛機飛出與錯誤搖晃動畫，僅保留淡入回饋
- 頭像堆疊為裝飾性內容（
aria-hidden），訂閱人數以純文字提供