# Team grid Team members grid with gradient initials avatars, bio reveal on hover, social links and a hiring card. - Type: block - Category: Sections - Tier: Free - Dependencies: lucide-react, motion ## Install ```bash npx shadcn@latest add https://facadeui.com/r/team-grid.json ``` ## Usage ```tsx import { TeamGrid } from "@/components/facade/team-grid"; export default function Page() { return ; } ``` ## Source ```tsx "use client"; import * as React from "react"; import { motion, useReducedMotion } from "motion/react"; import { ArrowRight, Mail, Plus, Sparkles } from "lucide-react"; import { cn } from "@/lib/utils"; export interface TeamSocials { linkedin?: string; x?: string; instagram?: string; email?: string; } export interface TeamMember { name: string; role: string; bio: string; location?: string; socials?: TeamSocials; /** Optional photo URL. Falls back to a gradient initials avatar. */ imageSrc?: string; } export interface TeamGridProps { eyebrow?: string; heading?: string; description?: string; members?: TeamMember[]; showHiringCard?: boolean; hiringHeading?: string; hiringText?: string; hiringCtaLabel?: string; hiringHref?: string; openRoles?: number; className?: string; } const DEFAULT_MEMBERS: TeamMember[] = [ { name: "Jessica Moreno", role: "Founder and Managing Broker", location: "Miami, FL", bio: "Fifteen years selling waterfront homes in Coconut Grove and Coral Gables. Over $480M in closed sales and still answers her own phone.", socials: { linkedin: "#", instagram: "#", email: "jessica@baysiderealty.com" }, }, { name: "Andre Thompson", role: "Senior Listing Agent", location: "Coral Gables, FL", bio: "Former architect who reads floor plans like novels. Andre leads our luxury listings and staging strategy.", socials: { linkedin: "#", x: "#", email: "andre@baysiderealty.com" }, }, { name: "Mei Chen", role: "Buyer Specialist", location: "Brickell, FL", bio: "Helps first-time buyers and relocating families find the right condo, from pre-approval to the keys. Fluent in Mandarin.", socials: { linkedin: "#", instagram: "#" }, }, { name: "Carlos Ruiz", role: "Investment Advisor", location: "Wynwood, FL", bio: "Runs the numbers on multifamily and short-term rentals. Carlos has helped 60+ clients build Miami rental portfolios.", socials: { linkedin: "#", x: "#", email: "carlos@baysiderealty.com" }, }, { name: "Hannah Brooks", role: "Marketing Director", location: "Miami Beach, FL", bio: "Produces the photography, video and campaigns that sell our listings 19 days faster than the county average.", socials: { instagram: "#", linkedin: "#" }, }, { name: "Samuel Okoye", role: "Transaction Coordinator", location: "Miami, FL", bio: "Keeps every deadline, inspection and closing on track so our clients never have to chase paperwork.", socials: { linkedin: "#", email: "samuel@baysiderealty.com" }, }, { name: "Olivia Park", role: "Leasing Agent", location: "Edgewater, FL", bio: "Matches renters with the right building in under a week on average. Knows every concierge on Biscayne by name.", socials: { instagram: "#", email: "olivia@baysiderealty.com" }, }, ]; function initials(name: string) { return name .split(" ") .slice(0, 2) .map((p) => p[0]?.toUpperCase() ?? "") .join(""); } function hue(name: string) { let h = 11; for (let i = 0; i < name.length; i++) h = (h * 29 + name.charCodeAt(i)) % 360; return h; } function LinkedinIcon() { return ( ); } function XIcon() { return ( ); } function InstagramIcon() { return ( ); } function SocialLinks({ member }: { member: TeamMember }) { const s = member.socials; if (!s) return null; const items: { key: string; href: string; label: string; icon: React.ReactNode }[] = []; if (s.linkedin) items.push({ key: "li", href: s.linkedin, label: `${member.name} on LinkedIn`, icon: }); if (s.x) items.push({ key: "x", href: s.x, label: `${member.name} on X`, icon: }); if (s.instagram) items.push({ key: "ig", href: s.instagram, label: `${member.name} on Instagram`, icon: }); if (s.email) items.push({ key: "em", href: `mailto:${s.email}`, label: `Email ${member.name}`, icon: }); return (
{items.map((it) => ( {it.icon} ))}
); } function MemberCard({ member, index, reduce }: { member: TeamMember; index: number; reduce: boolean }) { const h = hue(member.name); const [open, setOpen] = React.useState(false); return ( setOpen(true)} onMouseLeave={() => setOpen(false)} onFocus={() => setOpen(true)} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setOpen(false); }} >
{member.imageSrc ? ( ) : (
{initials(member.name)}
)}

{member.bio}

{member.name}

{member.role}

{/* Bio is always visible on touch screens */}

{member.bio}

{member.location ? {member.location} : }
); } export function TeamGrid({ eyebrow = "Our team", heading = "Local experts who know every street", description = "Bayside Realty is a boutique brokerage of agents who live in the neighborhoods they sell. Hover a card to meet the person behind it.", members = DEFAULT_MEMBERS, showHiringCard = true, hiringHeading = "We're hiring", hiringText = "Licensed in Florida and hungry to build something? We offer mentorship, real leads and an 80/20 split.", hiringCtaLabel = "See open roles", hiringHref = "#", openRoles = 3, className, }: TeamGridProps) { const reduce = useReducedMotion() ?? false; return (

{eyebrow}

{heading}

{description}

); } export default TeamGrid; ```