Searchable Dropdown

Component

About

A modern, animated dropdown menu with built-in search functionality. Smoothly reveals options with framer-motion, supports keyboard navigation, light/dark themes, and customizable item icons. Perfect for filters, selectors, and action menus in modern apps.

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 React from "react";
import { SearchableDropdown, SearchableItem } from "@/components/ui/searchable-dropdown";
import { Settings, Code, Palette, Mail, Bell, Shield } from "lucide-react";

export default function SearchableDemo() {
  const actionsMenuItems: SearchableItem[] = [
    {
      value: "design",
      label: "Design System",
      icon: <Palette className="h-4 w-4" />,
      onClick: () => console.log("Design clicked"),
    },
    {
      value: "development",
      label: "Development",
      icon: <Code className="h-4 w-4" />,
      onClick: () => console.log("Development clicked"),
    },
    {
      value: "notifications",
      label: "Notifications",
      icon: <Bell className="h-4 w-4" />,
      onClick: () => console.log("Notifications clicked"),
    },
    {
      value: "security",
      label: "Security & Privacy",
      icon: <Shield className="h-4 w-4" />,
      onClick: () => console.log("Security clicked"),
    },
    {
      value: "contact",
      label: "Contact Support",
      icon: <Mail className="h-4 w-4" />,
      onClick: () => console.log("Contact clicked"),
    },
  ];

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-8">
      <SearchableDropdown
        trigger={
          <div className="flex items-center gap-2">
            <Settings className="h-4 w-4" />
            <span>Quick Actions</span>
          </div>
        }
        items={actionsMenuItems}
        searchPlaceholder="Search actions..."
        position="bottom-left"
      />
    </div>
  );
}