Orbit of faces

Centred heading circled by orbiting team avatars.

Usage

import { TeamOrbit } from '@/components/blocks/team-03'


<TeamOrbit />


// Bring your own people
<TeamOrbit
  eyebrow="Our team"
  heading="The people behind the product"
  cta={{ label: 'Join us', href: '/careers' }}
  speed={1.5}
  members={[
    { name: 'Jane Doe', role: 'Founder', photo: 'https://example.com/jane.jpg' },
    { name: 'Sam Lee', role: 'Engineer', photo: 'https://example.com/sam.jpg' },
  ]}
/>

Install

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

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

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

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

Source

Props

Orbit of faces props
Prop	Type	Default	Description
eyebrow	string	= 'The team'	Small label above the heading.
heading	string	= 'Twelve people, one steady orbit'	Section heading, rendered as an h2 in the centre of the orbit.
description	string	= Short team note	Supporting text under the heading.
cta	TeamOrbitCta \| null	= { label: 'See open roles', href: '#' }	Blue link under the description. Pass null to hide it.
members	TeamOrbitMember[]	= Twelve sample people	People as { name, role, photo }, spread across the three rings from the inside out. Square photos work best.
speed	number	= 1	Orbit speed multiplier. 2 turns twice as fast, 0.5 half as fast.
className	string	= undefined	Extra classes for the section.
style	CSSProperties	= undefined	Inline styles, handy for overriding the --pp-* theme variables.