# Search Autocomplete

Global search in a SaaS with suggestions grouped by dashboards, documents, people and commands.

- id: `search-autocomplete`
- Page: https://agentic-ui-kit.com/components/search-autocomplete
- Live preview: https://agentic-ui-kit.com/live/component/search-autocomplete

## Install

```bash
agentic-ui add search-autocomplete
npx shadcn@4.17.0 add @agentic-ui/search-autocomplete
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ranked-suggestions, match-highlighting, diacritic-insensitive-matching, did-you-mean-correction, kind-grouping, local-or-async-source, debounce-and-abort, loading-state, empty-state, error-state-with-retry, initial-suggestions, keyboard-navigation, aria-combobox, live-announcements, popover-or-inline-layout, responsive
- **Intents:** navigate, explore-detail, manage-collection
- **Suits domains:** saas, ecommerce, knowledge, crm, devtools, file-storage, project-management
- **Interaction:** type-to-suggest, keyboard-navigation, select-suggestion, accept-correction, submit-query, clear, retry
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** global search in a SaaS with suggestions grouped by dashboards, documents, people and commands, e-commerce catalog search with term highlighting, SKU matching and spelling correction, knowledge base search field against a remote index with debounce and server-side «did you mean», contact or account picker in a CRM with keyboard navigation and Enter to accept
- **Avoid when:** a modal command palette with global actions and shortcuts is needed (use search-global-palette or project-management-issue-command-palette), the field must select a form value with chips or multi-selection (use form-async-combobox), results are shown on a full page with facets and pagination instead of inline suggestions
- **Preserve when adapting:** combobox-aria-model, ranking-and-highlight-logic, did-you-mean-vocabulary-correction, async-debounce-abort-contract, keyboard-and-focus-model, live-announcements
- **Replace when adapting:** suggestion-source-and-corpus, entity-kinds-icons-and-labels, navigation-on-select, copy-and-locale, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives