Searchable Dropdown
A dropdown menu with search/filter functionality and smooth animations.
Installation
pnpm dlx shadcn add @smoothui/searchable-dropdownnpx shadcn@latest add @smoothui/searchable-dropdownyarn dlx shadcn add @smoothui/searchable-dropdownbunx shadcn add @smoothui/searchable-dropdownFeatures
- Real-time search filtering with smooth transitions
- Support for item descriptions and icons
- Keyboard navigation (Escape to close)
- Animated clear button for search input
- Staggered animation for filtered results
- Empty state message when no results found
- Click outside to close
- Fully accessible and customizable
Props
Prop
Type
Item Props
Each item in the dropdown can have the following properties:
| Property | Type | Description |
|---|---|---|
id | string | number | Unique identifier for the item |
label | string | Display text for the item |
icon | React.ReactNode | Optional icon to display before the label |
description | string | Optional description text below the label |