shadcn.io is an independent project built on shadcn/ui
Each person has a small avatar beside the name. After a pick, that avatar and name show on the button. If the image fails, the first letter of the name shows instead.
Use it for assignees, reviewers, and mentions. A name with no picture is a text Combobox row. In React, Ark UI does not load the image. The avatar does.
Installation
Anatomy
Usage
<Combobox
collection={collection}
onInputValueChange={handleInputValueChange}
onValueChange={handleValueChange}
positioning={{ getAnchorElement: () => triggerRef.current }}
selectionBehavior="clear"
value={value}
>
<ComboboxTrigger
className={cn(
buttonVariants({ variant: "outline" }),
"w-[250px] justify-between"
)}
ref={triggerRef}
>
{selected ? (
<span className="flex items-center gap-2">
<Avatar className="size-5">
<AvatarImage alt="" src={selected.avatar} />
<AvatarFallback>{selected.label.charAt(0)}</AvatarFallback>
</Avatar>
{selected.label}
</span>
) : (
"Select user..."
)}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput
className="w-full"
placeholder="Search users..."
{/* The rest of the file is under Installation. */}FAQ
How is the avatar built?
An Avatar at size-5 with AvatarImage for the photo and AvatarFallback with the first letter of the name. The image has an empty alt, since the name is right next to it.
How does the button show the avatar?
It renders the picked person's avatar and name side by side, and Select user... before a pick. The demo finds the user for the current value.
Who is in the list?
Hayden Bleasel, shadcn, Lee Robinson and Guillermo Rauch, with their GitHub pictures.
What does the search match?
The names. The search box says Search users..., and No user found. shows when nothing matches.
What shows while an image loads?
The fallback letter, until the image has loaded. If it never loads, the letter stays.
How do I show more about each person?
Add an email or role under the name, as in Items with Metadata.
API Reference
Combobox
Sets collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
Avatar
Sets alt="", src={selected.avatar} and src={user.avatar}. The rest is on the Avatar page.
