Autocomplete

Component

About

A text input that filters and suggests matching options from a list as the user types, with support for grouping, icons, and grid layouts.

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

const frameworks = [
  "Next.js",
  "Remix",
  "Astro",
  "Nuxt.js",
  "SvelteKit",
  "SolidStart",
  "Gatsby",
  "Vite",
];

export default function AutocompleteClearable() {
  return (
    <div className="w-full max-w-70">
      <Autocomplete items={frameworks} defaultValue="Next.js" clearable icon>
        <AutocompleteInput
          placeholder="Search a framework"
          aria-label="Search a framework"
        />
        <AutocompleteContent>
          <AutocompleteEmpty>No frameworks found.</AutocompleteEmpty>
          <AutocompleteList>
            {(item: string) => (
              <AutocompleteItem key={item} value={item}>
                {item}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  );
}