Contact Section

含浮動標籤、聚焦底線展開、逐項揭示與送出狀態轉場的聯絡區塊，開箱即用。

載入預覽⋯

Playground

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

區塊標題title

副標描述description

送出按鈕文字submitLabel

送出成功文字successLabel

<ContactSection />

安裝

npx shadcn@latest add https://webberui.com/r/contact-section.json

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

安裝依賴後，從 registry JSON（/r/contact-section.json 的 files[0].content）複製 contact-section.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import { ContactSection } from "@/components/ui/contact-section";

<ContactSection
  title="一起做點什麼"
  description="填寫下方表單，或透過任一管道聯絡我們。"
  onSubmit={async (values) => {
    await fetch("/api/contact", {
      method: "POST",
      body: JSON.stringify(values),
    });
  }}
/>

未提供 onSubmit 時，元件會以內建的模擬延遲呈現送出→成功的狀態轉場，方便預覽互動。onSubmit 回傳的 Promise 完成後才會切到成功態。

Props

Prop	型別	預設值	說明
`title`	`string`	`"一起做點什麼"`	區塊標題
`description`	`string`	`"填寫下方表單…"`	區塊副標描述
`info`	`ContactInfoItem[]`	內建三項	左側聯絡資訊清單
`submitLabel`	`string`	`"送出訊息"`	送出按鈕文字
`successLabel`	`string`	`"已送出，感謝你！"`	送出成功後顯示的文字
`onSubmit`	`(values) => void \| Promise<void>`	—	送出處理器；回傳 Promise 會等待其完成
`className`	`string`	—	透傳至外層容器

其中 ContactInfoItem 形如 { icon: "mail" | "phone" | "map"; label: string; hint?: string }，values 形如 { name: string; email: string; message: string }。

可及性

使用者系統開啟「減少動態效果」時，所有進場、浮動標籤與狀態轉場改為即時切換，不做位移或模糊
每個輸入欄都有對應的 label（htmlFor 綁定 id），送出按鈕在 loading 與 success 態會停用避免重複送出

Playground

安裝

使用

Props

可及性

On this page