Searchable Dropdown

Component

About

A dropdown select with a built-in search input, keyboard navigation, and animated filtering of options.

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

Code

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

Usage.tsx

"use client";

import SearchableDropdown from "@/components/ui/searchable-dropdown";

const frameworks = [
  {
    id: 1,
    label: "React",
    description: "A JavaScript library for building UIs",
  },
  { id: 2, label: "Vue", description: "The progressive JavaScript framework" },
  { id: 3, label: "Angular", description: "Platform for building web apps" },
  { id: 4, label: "Svelte", description: "Cybernetically enhanced web apps" },
  { id: 5, label: "Solid", description: "Simple and performant reactivity" },
  { id: 6, label: "Qwik", description: "Framework for instant web apps" },
];

export default function SearchableDropdownDemo() {
  return (
    <div className="flex min-h-[260px] w-full items-center justify-center p-8">
      <SearchableDropdown
        className="w-72"
        items={frameworks}
        label="Select a framework"
        onChange={(item) => console.log(item)}
        placeholder="Search frameworks..."
      />
    </div>
  );
}