Team Roster Selector
Interactive team roster selection list with generative avatars, spring hover pill, and multi-select state.
6.8 KB
•Updated on September 17, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-team-roster-selectorUsage
Code
import { TeamRosterSelector } from '@/components/spaceui/team-roster-selector'
export default function Example() {
return <TeamRosterSelector />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
members | TeamMember[] | DEFAULT_MEMBERS | List of team members with avatar seeds |
selectedIds | string[] | — | Controlled selected member IDs |
onSelectionChange | (ids: string[]) => void | — | Selection change callback |
onAction | (ids: string[]) => void | — | CTA action button callback |
title | string | Team Members | Header title text |
corner | number | 24 | Corner radius in px |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.