Team
Prov1.0.0Your people with live local times, portraits, what they own and how to reach them.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { Team } from "@/components/ui/notchset/blocks/team";
export function About() {
return (
<Team
teams={["ENGINEERING", "RESEARCH"]}
people={[
{ id: "maya", name: "Maya Kerr", role: "Head of evals", team: "RESEARCH", city: "Berlin", tz: "Europe/Berlin", bio: "Built the first eval suite.", email: "maya@relay.dev", photo: { src: "/team/maya-480.webp", srcSet: "/team/maya-480.webp 480w, /team/maya-800.webp 800w" } },
{ id: "priya", name: "Priya Nair", role: "Agent engineer", team: "ENGINEERING", city: "Bengaluru", tz: "Asia/Kolkata", bio: "Makes tool calls safe to retry.", email: "priya@relay.dev", onCall: true, photo: { src: "/team/priya-480.webp" } },
]}
footerLink={{ label: "3 OPEN ROLES", href: "/careers" }}
/>
);
}Props
people–{ id, name, role, team, city, tz, bio, email, href?, photo, onCall?, owns? }[]tz is an IANA zone (Europe/Berlin), so local times follow daylight saving. photo takes src and srcSet.
teams–string[]The tabs, in order; EVERYONE is added in front.
workHours–[start, end]Local working hours in 24h (default 9 to 18): the shaded band and who reads as WORKING.
footerLink–{ label, href }A link under the roster, e.g. 3 OPEN ROLES.
Anatomy
- The strip, the portrait and the roster all follow one selection; hovering previews without changing it.
- Filtering keeps the selection when the person is still listed, otherwise selects the first.
- Times render after mount, so the server and the browser agree.
Teamdata-slot="team"The strip, the portrait and details, and the roster.
Source
components/ui/notchset/blocks/team.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/teamNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- An about or team page for a distributed company
- An internal directory where it matters who is working right now
Use something else when
- A hundred people or more: use a searchable directory
- Customer logos or testimonials: use a marketing grid
Mistakes to avoid
- Use real headshots cropped around the face with room above the head; the frame is 4:5 and greyscale
- Give IANA time zones, not fixed offsets, or times drift an hour twice a year
Agents find it by
- team page, about us, our team, people, staff directory, roster, who is online, time zones, on call, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/team.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ← →
- Change team
- ↑ ↓
- Move through the roster (selects as it goes)
- Enter / Space
- Select a person; a dot on the strip selects too
Accessibility
- Each dot on the strip is a button named with the person, city and local time (and on call)
- Team tabs are a tablist controlling the roster; the roster is a listbox with ↑ ↓ and Enter
- Only the shown portrait has alt text; the others are hidden while they wait to cross-fade in
Motion
- Portrait
- Cross-fades in 240ms and settles from a 4% zoom
- Details
- Rise 4px as the person changes
- Strip
- The shown person's dot grows; dots glide as time passes
- Roster
- A 3px bar grows on the selected row; rows rise in a short stagger
Responsive
- Portrait and roster sit side by side from 640px (container width) and stack below; under 420px the roster drops the city and the hint.
Performance
- Portraits load lazily with srcSet (480 and 800w); the clock ticks once every 30s for every Team on the page.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
