Primitive · CLI

Combobox

Filterable select on Base UI with Mira soft-rect, popup settle, and list stagger ≤40ms.

Preview

npx shadcn@latest add @atroui/combobox

Type to filter · select

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/combobox

Source lands in your repo. Installation · Registry

Usage

Use when the user must pick from a known set and may filter by typing. Popup settles with menuPopupMotion; rows stagger ≤40ms; item highlight morphs with layoutTween.

tsx

import {
  Combobox,
  ComboboxClear,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxInputGroup,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxList,
  ComboboxTrigger,
} from "@/components/ui/combobox"

const fruits = ["Apple", "Banana", "Blueberry", "Cherry", "Mango"]

<Combobox items={fruits}>
  <ComboboxInputGroup>
    <ComboboxInput placeholder="Choose a fruit" />
    <ComboboxClear />
    <ComboboxTrigger />
  </ComboboxInputGroup>
  <ComboboxContent>
    <ComboboxEmpty>No fruits found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
          <ComboboxItemIndicator />
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Usage

Use when the user must pick from a known set and may filter by typing. Popup settles with menuPopupMotion; rows stagger ≤40ms; item highlight morphs with layoutTween.

tsx

import {
  Combobox,
  ComboboxClear,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxInputGroup,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxList,
  ComboboxTrigger,
} from "@/components/ui/combobox"

const fruits = ["Apple", "Banana", "Blueberry", "Cherry", "Mango"]

<Combobox items={fruits}>
  <ComboboxInputGroup>
    <ComboboxInput placeholder="Choose a fruit" />
    <ComboboxClear />
    <ComboboxTrigger />
  </ComboboxInputGroup>
  <ComboboxContent>
    <ComboboxEmpty>No fruits found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
          <ComboboxItemIndicator />
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

import {
  Combobox,
  ComboboxClear,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxInputGroup,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxList,
  ComboboxTrigger,
} from "@/components/ui/combobox"

const fruits = ["Apple", "Banana", "Blueberry", "Cherry", "Mango"]

<Combobox items={fruits}>
  <ComboboxInputGroup>
    <ComboboxInput placeholder="Choose a fruit" />
    <ComboboxClear />
    <ComboboxTrigger />
  </ComboboxInputGroup>
  <ComboboxContent>
    <ComboboxEmpty>No fruits found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
          <ComboboxItemIndicator />
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>