Components
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.
Loading preview...
"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>
);
}