People Autocomplete
and
Andrea KimDesign
Andre CostaGrowth
Anders LeeEngineering
Mention-style popover listing matching people with avatars, role lines, and a presence dot.
The import and the props worth knowing about, in one place.
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"
}
]}
/>Ecommerce suggestions dropdown with a warm thumbnail, rating line, and trailing price column.
Popover that opens on focus and lists prior queries with a clock icon and remove control.
Search popover listing named saved queries with pin or star markers and a raw query beneath.
Search popover mid-query with a spinner in the input and three shimmering skeleton rows.