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



Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
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}
/>