@mshafiqyajid/react-select

npm install @mshafiqyajid/react-select

import { SelectStyled } from "@mshafiqyajid/react-select/styled";
import "@mshafiqyajid/react-select/styles.css";

const items = [
  { value: "react",  label: "React" },
  { value: "vue",    label: "Vue" },
  { value: "svelte", label: "Svelte" },
];

const [value, setValue] = useState("");

<SelectStyled
  items={items}
  value={value}
  onChange={setValue}
  placeholder="Pick a framework"
/>

const [values, setValues] = useState<string[]>([]);

<SelectStyled
  items={items}
  value={values}
  onChange={setValues}
  multiple
  clearable
/>

<SelectStyled items={items} value={value} onChange={setValue} searchable />

<SelectStyled
  items={[]}                       // seeds + provides labels for selected values
  value={value}
  onChange={setValue}
  loadOptions={async (query) => {
    const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`);
    return res.json(); // SelectItem[]
  }}
  debounceMs={300}                 // default
  loadingText="Searching…"
  emptyText="No matches"
  errorText="Couldn't load — try again"
/>

import { useSelect } from "@mshafiqyajid/react-select";

const items = [
  { value: "react", label: "React" },
  { value: "vue",   label: "Vue" },
];
const [value, setValue] = useState("react");

const { triggerProps, listboxProps, getItemProps, isOpen } = useSelect({
  items,
  value,
  onChange: (v) => setValue(v as string),
});

return (
  <>
    <button {...triggerProps}>{value || "Select…"}</button>
    {isOpen && (
      <ul {...listboxProps} className="listbox">
        {items.map((item) => (
          <li key={item.value} {...getItemProps(item)}>{item.label}</li>
        ))}
      </ul>
    )}
  </>
);