Autocomplete

Component 4

About

A text input that suggests matching options as the user types while still accepting free-form text, useful for search fields and tag entry.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Autocomplete to your project and fits it to your theme.

Code

How Autocomplete is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
  AutocompletePortal,
  AutocompletePositioner,
  AutocompleteRoot,
} from "@/components/ui/autocomplete";

const fruits = [
  "Apple",
  "Banana",
  "Cherry",
  "Grape",
  "Mango",
  "Orange",
  "Peach",
  "Pear",
];

export default function AutocompleteDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <div className="w-full max-w-sm">
        <AutocompleteRoot items={fruits}>
          <AutocompleteInput placeholder="Search fruits..." />
          <AutocompletePortal>
            <AutocompletePositioner>
              <AutocompletePopup>
                <AutocompleteEmpty>No results found.</AutocompleteEmpty>
                <AutocompleteList>
                  {(item: string) => (
                    <AutocompleteItem key={item} value={item}>
                      {item}
                    </AutocompleteItem>
                  )}
                </AutocompleteList>
              </AutocompletePopup>
            </AutocompletePositioner>
          </AutocompletePortal>
        </AutocompleteRoot>
      </div>
    </div>
  );
}