Autocomplete

Component

About

A text input that filters and suggests options from a list as the user types, with keyboard navigation, grouping, and an optional dropdown trigger and clear button.

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 {
  Autocomplete,
  AutocompleteInput,
  AutocompletePopup,
  AutocompleteEmpty,
  AutocompleteList,
  AutocompleteItem,
} from "@/components/ui/autocomplete";

const tags = [
  "feature",
  "fix",
  "bug",
  "docs",
  "internal",
  "mobile",
  "component: accordion",
  "component: autocomplete",
  "component: avatar",
  "component: checkbox",
  "component: combobox",
  "component: dialog",
  "component: menu",
  "component: select",
  "component: tooltip",
];

export default function AutocompleteDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-1">
      <label
        className="text-sm font-medium text-foreground"
        htmlFor="autocomplete-demo-input"
      >
        Search tags
      </label>
      <Autocomplete items={tags}>
        <AutocompleteInput
          id="autocomplete-demo-input"
          placeholder="e.g. feature"
        />
        <AutocompletePopup>
          <AutocompleteEmpty>No tags found.</AutocompleteEmpty>
          <AutocompleteList>
            {(tag: string) => (
              <AutocompleteItem key={tag} value={tag}>
                {tag}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompletePopup>
      </Autocomplete>
    </div>
  );
}