People Autocomplete

Mention-style popover listing matching people with avatars, role lines, and a presence dot.

and
Andrea Kim
Andrea KimDesign
Andre Costa
Andre CostaGrowth
Anders Lee
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"
    }
  ]}
/>