pnpm add @rouf-dev/pantheon-ui cmdk

import { Combobox } from "@rouf-dev/pantheon-ui";

<Combobox
  options={[
    { value: "next", label: "Next.js" },
    { value: "react", label: "React" },
    { value: "vue", label: "Vue.js" },
  ]}
  placeholder="Select framework..."
  value={value}
  onValueChange={setValue}
/>

// Use onSearch prop for async data fetching
<Combobox
  onSearch={async (query) => {
    const res = await fetch(`/api/users?q=${query}`);
    return res.json();
  }}
  debounceMs={500}
  minSearchLength={2}
  placeholder="Search users..."
  value={value}
  onValueChange={setValue}
/>

<Combobox
  options={users.map(u => ({
    value: u.id,
    label: u.name,
    description: u.email,
    avatar: u.avatarUrl
  }))}
  richDisplay
  placeholder="Select user..."
  value={value}
  onValueChange={setValue}
/>

<Combobox
  options={tags}
  allowCreate
  createText="Create tag"
  onCreate={(query) => createTag(query)}
  placeholder="Select or create tag..."
  value={value}
  onValueChange={setValue}
/>