Primitive · CLI

Autocomplete

Suggest-as-you-type with popup settle, layoutId highlight, and list stagger ≤40ms.

Preview

npx shadcn@latest add @atroui/autocomplete

Installation

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

npx shadcn@latest add @atroui/autocomplete

Source lands in your repo. Installation · Registry

Usage

Use for free-text entry with suggestions. Filters as you type; popup settle + list stagger match Combobox.

tsx

import {
  Autocomplete,
  AutocompleteClear,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteInputGroup,
  AutocompleteItem,
  AutocompleteList,
  AutocompleteTrigger,
} from "@/components/ui/autocomplete"

const tags = ["motion", "registry", "scope", "og", "host-api"]

<Autocomplete items={tags}>
  <AutocompleteInputGroup>
    <AutocompleteInput placeholder="Search tags" />
    <AutocompleteClear />
    <AutocompleteTrigger />
  </AutocompleteInputGroup>
  <AutocompleteContent>
    <AutocompleteEmpty>No tags found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => (
        <AutocompleteItem key={item} value={item}>
          {item}
        </AutocompleteItem>
      )}
    </AutocompleteList>
  </AutocompleteContent>
</Autocomplete>

Usage

Use for free-text entry with suggestions. Filters as you type; popup settle + list stagger match Combobox.

tsx

import {
  Autocomplete,
  AutocompleteClear,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteInputGroup,
  AutocompleteItem,
  AutocompleteList,
  AutocompleteTrigger,
} from "@/components/ui/autocomplete"

const tags = ["motion", "registry", "scope", "og", "host-api"]

<Autocomplete items={tags}>
  <AutocompleteInputGroup>
    <AutocompleteInput placeholder="Search tags" />
    <AutocompleteClear />
    <AutocompleteTrigger />
  </AutocompleteInputGroup>
  <AutocompleteContent>
    <AutocompleteEmpty>No tags found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => (
        <AutocompleteItem key={item} value={item}>
          {item}
        </AutocompleteItem>
      )}
    </AutocompleteList>
  </AutocompleteContent>
</Autocomplete>

import {
  Autocomplete,
  AutocompleteClear,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteInputGroup,
  AutocompleteItem,
  AutocompleteList,
  AutocompleteTrigger,
} from "@/components/ui/autocomplete"

const tags = ["motion", "registry", "scope", "og", "host-api"]

<Autocomplete items={tags}>
  <AutocompleteInputGroup>
    <AutocompleteInput placeholder="Search tags" />
    <AutocompleteClear />
    <AutocompleteTrigger />
  </AutocompleteInputGroup>
  <AutocompleteContent>
    <AutocompleteEmpty>No tags found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => (
        <AutocompleteItem key={item} value={item}>
          {item}
        </AutocompleteItem>
      )}
    </AutocompleteList>
  </AutocompleteContent>
</Autocomplete>