Member Selector
An interactive participant and member avatar selector with dynamic row layout, animated selection badges, quick-add button, and searchable popover.
12.2 KB
•Updated on September 26, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-member-selectorUsage
Code
import { MemberSelector } from '@/components/spaceui/member-selector'Code
const [selected, setSelected] = useState(['1', '2'])
<MemberSelector
members={members}
selected={selected}
onChange={setSelected}
maxVisible={5}
label="Participants"
/>API Reference
MemberSelector Props
| Prop | Type | Default | Description |
|---|---|---|---|
members | Member[] | required | List of available members (id, name, email?, avatar?) |
selected | string[] | required | Array of currently selected member IDs |
onChange | (selected: string[]) => void | required | Callback when selection changes |
max | number | - | Optional maximum number of selectable members |
maxVisible | number | 5 | Maximum number of avatars displayed in horizontal row |
label | string | - | Optional header label (e.g. "Participants") |
className | string | - | Additional class names applied to the container |
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.
Related Components
Powered by