Browse components

Autocomplete

Autocomplete input that filters a list as you type.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/autocomplete.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/autocomplete.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/autocomplete.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/autocomplete.

Import

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

example.tsx

import {  Autocomplete,  AutocompleteClear,  AutocompleteContent,  AutocompleteEmpty,  AutocompleteIcon,  AutocompleteInput,  AutocompleteInputGroup,  AutocompleteItem,  AutocompleteList,} from "@/components/ui/autocomplete"const items = ["Apple", "Banana", "Orange"]export function Example() {  return (    <Autocomplete items={items}>      <AutocompleteInputGroup>        <AutocompleteIcon />        <AutocompleteInput placeholder="Search fruit…" />        <AutocompleteClear />      </AutocompleteInputGroup>      <AutocompleteContent>        <AutocompleteEmpty>No results</AutocompleteEmpty>        <AutocompleteList>          {(item: string) => (            <AutocompleteItem key={item} value={item}>              {item}            </AutocompleteItem>          )}        </AutocompleteList>      </AutocompleteContent>    </Autocomplete>  )}

API Reference

Autocomplete

Base UI Autocomplete root.

Prop	Type	Default
items	readonly Item[]	—