Member Selector

An avatar row for picking people, with a searchable dropdown to add more.

Interaction Type

Tap an avatar to select or deselect it; selected people glide to the front and unselected ones fade to grayscale with a small plus badge. Tap Add and the circle morphs into a card with a search field; type to filter by name or email, use the arrow keys and Enter, or click anyone to toggle them. A hairline scrollbar shows only while you scroll. When the row is full, avatars pushed out shrink away as new ones pop in. Press Escape, the esc key in the field, or click outside to fold the card back. Honors prefers-reduced-motion.

Installation

npx shadcn@latest add ikislay/pixel-ui/member-selector

How to use

"use client"


import { useState } from "react"
import { MemberSelector, type Member } from "@/components/ui/member-selector"


const members: Member[] = [
  {
    id: "1",
    name: "Yuki Tanaka",
    email: "[email protected]",
    avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&h=160&fit=crop&crop=faces",
  },
  {
    id: "2",
    name: "Matt Cooper",

Source Code

// Loading…

Props

Options you can pass to customize this component.

Prop
Type
Description
members*
Member[]

Everyone who can be picked. Each member has an id and name, plus an optional email and avatar url; without an avatar, initials show instead.

selected*
string[]

Ids of the selected members.

onChange*
(selected: string[]) => void

Called with the new list of ids when someone is toggled.

max
number

Most members that can be selected. Extra picks are ignored. Unlimited by default.

maxVisible
number

How many avatars show in the row. Selected members fill it first.

label
string

Small uppercase heading above the row.

Keep in mind

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •MIT with the Commons Clause and an attribution requirement. Free to use, modify and ship in personal and commercial projects, closed source included. You own the code once it is in your project.
  • •Credit is required. Any project shipping a Pixel UI component must credit Pixel UI with a visible link back to pixelui.dev, in a footer, an about page, a credits screen or a README.
  • •Don't strip the credit or the copyright notice from the source you copied.
  • •Don't sell, sublicense or redistribute the components themselves, on their own, bundled into a template, kit, theme or paid course, or ported to another framework.
  • •Don't republish them. No mirrors, no re-uploads, no listing them as your own work.
  • •Don't repackage the registry as a competing component library.
  • •Don't claim authorship of a component or of Pixel UI itself.
  • •The LICENSE file in the repository is the full text and governs. Ask first if your use doesn't fit these rules.
Member Selector
Participants