Hover reveal grid

Grayscale portrait cards that reveal details on hover.

Usage

import { TeamRevealGrid } from '@/components/blocks/team-01'


<TeamRevealGrid />


// Bring your own people
<TeamRevealGrid
  eyebrow="Our team"
  heading="The people behind the product"
  members={[
    {
      name: 'Jane Doe',
      role: 'Founder',
      bio: 'Started the company after ten years in design.',
      photo: 'https://example.com/jane.jpg',
      socials: [{ network: 'website', href: 'https://example.com/janedoe' }],
    },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/team-01

npx shadcn@latest add @pastaui-pro/team-01

yarn dlx shadcn@latest add @pastaui-pro/team-01

bunx --bun shadcn@latest add @pastaui-pro/team-01

Source

Props

Hover reveal grid props
Prop	Type	Default	Description
eyebrow	string	= 'The team'	Small label above the heading.
heading	string	= 'Small team, long memory'	Section heading.
description	string	= A short intro line	Supporting text beside the heading.
members	TeamRevealMember[]	= 8 sample people	People with a name, role, one-line bio, photo URL and optional socials. The alt text is "Portrait of" plus the name.
members[].socials	{ network: 'website' \| 'email' \| 'portfolio'; href: string }[]	= —	Icon links in the reveal panel, labelled like "Jane Doe’s website".
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.