Fluid Dropdown Component

A modern and animated dropdown component with fluid transitions, built with Framer Motion.

• Smooth opening and closing animations
• Beautifully animated hover state
• Support for icons in dropdown items
• Clean and intuitive design

---

Installation

The FluidDropdown component is part of our UI library. You can import it directly from the components directory.

---

Usage

Here is how to use the fluid dropdown in your project:

React TSX
1import { FluidDropdown } from "@/components/modern-ui/fluid-dropdown"
2import { Layers, Shirt, Briefcase, Smartphone, Home } from "lucide-react"

React TSX
1const categories = [
2  { id: "all", label: "All", icon: Layers, color: "#A06CD5" },
3  { id: "lifestyle", label: "Lifestyle", icon: Shirt, color: "#FF6B6B" },
4  { id: "desk", label: "Desk", icon: Briefcase, color: "#4ECDC4" },
5  { id: "tech", label: "Tech", icon: Smartphone, color: "#45B7D1" },
6  { id: "home", label: "Home", icon: Home, color: "#F9C74F" },
7];
8
9<FluidDropdown 
10  categories={categories}
11  defaultCategoryId="all"
12  className="max-w-xs"
13/>

---

Examples

Basic Fluid Dropdown

Custom Colors Dropdown

---

API Reference

Category Object

Each category is defined by a Category object with the following properties:

FluidDropdown Props