Staggered speaker cards on one warm backdrop with a champagne keynote card, scroll-in and hover motion.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/team
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { TeamCarousel } from "@/components/blocks/team";23export function Team() {4return (5<TeamCarousel6eyebrow="Our people"7title="The team behind Kite"8ctaHref="/about"9members={[10{ name: "Ana Ruiz", role: "CEO", photo: "/team/ana.png", linkedinHref: "https://linkedin.com/in/ana" },11{ name: "Tom Lee", role: "CTO", photo: "/team/tom.png", featured: { eyebrow: "Talk", title: "Shipping weekly", href: "/talks/tom" } },12{ name: "Mia Chen", role: "Design", photo: "/team/mia.png", xHref: "https://x.com/mia" },13]}14/>15);16}
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Speakers" | Small caps line above the heading |
| title | string | "Meet the team" | Heading |
| ctaLabel | string | "View all" | Button under the heading |
| ctaHref | string | "#" | Button link |
| members | TeamMember[] | 7 sample people | People: name, role, photo or look, profile/LinkedIn/X links, optional featured talk |
| profileLabel | string | "View profile" | Link text revealed on hover |
| watchLabel | string | "Watch" | Button on the featured card |
| liveLabel | string | "Live" | Badge on the featured card |
| className | string | – | Extra classes on the section |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.