SmoothUI

Searchable Dropdown

A dropdown menu with search/filter functionality and smooth animations.

Open in v0

Last updated: December 30, 2025

Select a device

Installation

pnpm dlx shadcn add @smoothui/searchable-dropdown
npx shadcn@latest add @smoothui/searchable-dropdown
yarn dlx shadcn add @smoothui/searchable-dropdown
bunx shadcn add @smoothui/searchable-dropdown

Features

  • 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:

PropertyTypeDescription
idstring | numberUnique identifier for the item
labelstringDisplay text for the item
iconReact.ReactNodeOptional icon to display before the label
descriptionstringOptional description text below the label

On this page

Created by

Improved by

Edu Calvo's avatar

Powered by

lucide.dev
motion.dev