團隊成員網格

完整的團隊介紹區塊：漸層縮寫頭像的成員卡網格，滾動進場時逐卡 stagger 浮現，hover 卡片浮起並自底部滑出社群連結列，含眉標、標題與副標的區塊排版。

載入預覽⋯

Playground

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

眉標小籤eyebrow

區塊主標題title

副標說明subtitle

桌面欄數columns

<TeamGridSection />

安裝

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

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

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

npm install motion lucide-react clsx tailwind-merge

使用

import { TeamGridSection } from "@/components/ui/team-grid-section";

<TeamGridSection
  eyebrow="我們的團隊"
  title="認識幕後推手"
  subtitle="一群熱愛介面與動效的設計師和工程師。"
  columns={3}
  members={[
    {
      name: "林承翰",
      role: "共同創辦人・執行長",
      bio: "十年產品老兵。",
      hue: 262,
      socials: [
        { kind: "mail", href: "mailto:chenghan@example.com" },
        { kind: "website", href: "https://example.com" },
      ],
    },
  ]}
/>

Props

TeamGridSection

Prop	型別	預設值	說明
`eyebrow`	`string`	`"團隊成員"`	標題上方的眉標小籤，傳空字串可隱藏
`title`	`string`	`"認識我們的團隊"`	區塊主標題
`subtitle`	`string`	—	主標題下方的副標說明文字
`members`	`TeamMember[]`	—	團隊成員清單
`columns`	`2 \| 3 \| 4`	`3`	桌面版網格欄數
`className`	`string`	—	透傳到最外層 `section`

TeamMember

Prop	型別	預設值	說明
`name`	`string`	—	成員姓名，拉丁名取單字首字母、中文名取末兩字作頭像縮寫
`role`	`string`	—	職稱或角色描述
`bio`	`string`	—	一句話簡介（可選）
`hue`	`number`	依索引產生	頭像漸層色相 0-360，未提供時以黃金角度決定性分配
`socials`	`TeamSocialLink[]`	`[]`	hover 時自卡片底部滑出的社群連結列

TeamSocialLink

Prop	型別	預設值	說明
`kind`	`"mail" \| "website" \| "chat" \| "send"`	—	連結類型，決定圖示與預設標籤
`href`	`string`	—	連結網址（`mailto:` 或 `https:`）
`label`	`string`	類型中文名稱	無障礙朗讀標籤

可及性

每個社群連結都有 aria-label（成員姓名＋連結類型），螢幕閱讀器可清楚辨識連結對象
鍵盤 Tab 聚焦到卡片內的社群連結時，社群列會自動展開，不依賴滑鼠 hover
使用者系統開啟「減少動態效果」時，停用進場位移、卡片浮起與滑出動畫，社群列改為純淡入
頭像縮寫與色相光暈為裝飾性元素，均標記 aria-hidden 不干擾朗讀

團隊成員網格

On this page