NeonKitComponents

Dropdown Components

Sleek dropdown and select components with neon effects, search functionality, and multi-select capabilities. Copy and paste into your project.

Neon Dropdowns

Electric dropdown selects with glowing neon effects in multiple vibrant colors

Select cyan option...
Select purple option...
Select chartreuse option...
Select pink option...

Advanced Dropdowns

Feature-rich dropdowns with icons, descriptions, search, and multi-select capabilities

Select with icons...
Select with descriptions...
Multi-select options...
Searchable dropdown...

Basic Dropdowns

Standard dropdown variants for everyday use with clean styling

Default dropdown...
Filled dropdown...
Ghost dropdown...
Clearable dropdown...

Status & Loading States

Dropdown states for error handling, success feedback, and loading indicators

Error state...

Please select a valid option

Success state...

Great choice!

Loading state...

Loading options...

Disabled state...

This dropdown is disabled

Dropdown Sizes

Different sizes to fit various design contexts and layouts

Small dropdown...
Default dropdown...
Large dropdown...
Extra large dropdown...

Installation

Install required dependencies:

npm install framer-motion clsx tailwind-merge lucide-react

Import the component: import { Dropdown } from "@/components/dropdown"

If you use icons, also install and import them: import { User } from "lucide-react"

Ensure the cn utility exists. See complete installation guide.