People Autocomplete
Mention-style popover listing matching people with avatars, role lines, and a presence dot.
and
Andrea KimDesign
Andre CostaGrowth
Anders LeeEngineering
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
Import & use
import { Search17 } from "@/components/beste/piece/search17";
<Search17
query="and"
people={[
{
"name": "Andrea Kim",
"initials": "AK",
"role": "Design",
"online": true,
"image": "https://images.unsplash.com/photo-1709428731946-963de989d963?w=100&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDM4fHx8ZW58MHx8fHx8"
},
{
"name": "Andre Costa",
"initials": "AC",
"role": "Growth",
"image": "https://images.unsplash.com/photo-1596975806371-53084eb61b5c?w=100&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEzfHx8ZW58MHx8fHx8"
},
{
"name": "Anders Lee",
"initials": "AL",
"role": "Engineering",
"online": true,
"image": "https://images.unsplash.com/photo-1595745688820-1a8bca9dd00f?w=100&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDIyfHx8ZW58MHx8fHx8"
}
]}
/>