Team Grid Section

A grid of team member cards with gradient avatars and social links that flip out on hover.

A complete team introduction section: a grid of member cards with gradient initials avatars, floating up card by card with a stagger as they reveal on scroll, lifting on hover while a row of social links slides out from the bottom, with a section layout that includes an eyebrow, a heading, and a subheading.

Loading preview…

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

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Running-head tageyebrow

Section headlinetitle

Subheadingsubtitle

Desktop columnscolumns

<TeamGridSection />

Installation

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

Or, once registries are configured in components.json, install it as @webberui/team-grid-section.

Usage

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

<TeamGridSection
  eyebrow="Our team"
  title="Meet the people behind it"
  subtitle="A group of designers and engineers who love interfaces and motion."
  columns={3}
  members={[
    {
      name: "Lin Cheng-han",
      role: "Co-founder · CEO",
      bio: "A ten-year product veteran.",
      hue: 262,
      socials: [
        { kind: "mail", href: "mailto:chenghan@example.com" },
        { kind: "website", href: "https://example.com" },
      ],
    },
  ]}
/>

Props

TeamGridSection

Prop	Type	Default	Description
`eyebrow`	`string`	`"團隊成員"` (Team members)	The small eyebrow label above the heading; pass an empty string to hide it
`title`	`string`	`"認識我們的團隊"` (Meet our team)	The section's main heading
`subtitle`	`string`	—	Subheading text below the main heading
`members`	`TeamMember[]`	—	The team member list
`columns`	`2 \| 3 \| 4`	`3`	Grid column count on desktop
`className`	`string`	—	Forwarded to the outermost `section`

TeamMember

Prop	Type	Default	Description
`name`	`string`	—	Member name; Latin names take the first letter of each word and Chinese names take the last two characters as the avatar initials
`role`	`string`	—	Job title or a description of the role
`bio`	`string`	—	A one-sentence introduction (optional)
`hue`	`number`	derived from the index	Avatar gradient hue 0–360; when not provided it is assigned deterministically by the golden angle
`socials`	`TeamSocialLink[]`	`[]`	The row of social links that slides out from the bottom of the card on hover

TeamSocialLink

Prop	Type	Default	Description
`kind`	`"mail" \| "website" \| "chat" \| "send"`	—	Link type, which decides the icon and the default label
`href`	`string`	—	Link URL (`mailto:` or `https:`)
`label`	`string`	the Chinese name of the kind	Label announced by assistive technology

Accessibility

Every social link has an aria-label (the member's name plus the link type), so screen readers can clearly identify what the link points to
When Tab-focusing a social link inside a card with the keyboard, the social row expands automatically rather than depending on mouse hover
When the user has "reduce motion" enabled at the system level, the reveal offset, the card lift, and the slide-out animation are disabled, and the social row simply fades in instead
The avatar initials and the hue glow are decorative and both marked aria-hidden, so they do not interfere with announcement

Team Grid Section

On this page