Shadcn Listbox for React Radix UI

ListboxRoot
├── ListboxLabel
├── ListboxInput
├── ListboxItem
│   ├── ListboxItemText
│   ├── ListboxItemIndicator
│   └── ListboxItemGroup
│       └── ListboxItemGroupLabel
├── ListboxContent
└── ListboxValueText

import { createListCollection } from "@ark-ui/react/collection";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <Listbox
    className="w-full max-w-64"
    collection={collection}
    defaultValue={["br"]}
  >
    <ListboxContent>
      {collection.items.map((item) => (
        <ListboxItem item={item} key={item.value}>
          <ListboxItemText>{item.label}</ListboxItemText>
          <ListboxItemIndicator />
        </ListboxItem>
      ))}
    </ListboxContent>
  </Listbox>
);

const collection = createListCollection({
  items: [
    { label: "Brazil", value: "br" },
    { label: "Mexico", value: "mx" },
    { label: "Ireland", value: "ie" },
  ],
});