Editorial list with cursor preview

Typographic roster with a cursor-following portrait.

Usage

import { TeamEditorialList } from '@/components/blocks/team-05'


<TeamEditorialList />


// Bring your own people
<TeamEditorialList
  eyebrow="Our team"
  heading="The people behind the product"
  members={[
    {
      name: 'Jane Doe',
      role: 'Founder',
      photo: 'https://example.com/jane.jpg',
      href: '/team/jane-doe',
    },
    { name: 'Sam Lee', role: 'Engineer', photo: 'https://example.com/sam.jpg' },
  ]}
  hiring={{ label: 'Join us', href: '/careers', note: 'Two open roles' }}
/>

Install

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

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

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

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

Source

Props

Editorial list with cursor preview props
Prop	Type	Default	Description
eyebrow	string	= 'The people'	Small label above the heading.
heading	string	= 'A small team with a long attention span.'	Short line introducing the list.
members	{ name: string; role: string; photo: string; href?: string }[]	= Seven sample people	People in the list. Rows with an href become profile links; rows without one are plain, non-interactive items.
hiring	{ label: string; href: string; note?: string } \| null	= { label: 'We’re hiring', href: '#careers', note: 'Four open roles' }	Closing careers row. Pass null to hide it.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline style, handy for overriding the --pp-* theme variables.