Contact Picker

Searchable people picker with a focused search input above a list that tints the selected row.

Start typing to search
Beste Sözen
Beste SözenDesign lead
Mirko Petrov
Mirko PetrovEngineer
Noor Ahmed
Noor AhmedProduct

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Form29 } from "@/components/beste/piece/form29";

<Form29
  label="Primary contact"
  selectedHint="Start typing to search"
  items={[
    {
      "name": "Beste Sözen",
      "hint": "Design lead",
      "initial": "M",
      "imageSrc": "https://oud.pics/sm/l/gmail.jpeg",
      "alt": "Beste Sözen"
    },
    {
      "name": "Mirko Petrov",
      "hint": "Engineer",
      "initial": "M",
      "imageSrc": "https://oud.pics/sm/l/stripe.jpeg",
      "alt": "Mirko Petrov"
    },
    {
      "name": "Noor Ahmed",
      "hint": "Product",
      "initial": "N",
      "imageSrc": "https://oud.pics/sm/l/notion.png",
      "alt": "Noor Ahmed"
    }
  ]}
  selectedIndex={0}
/>