ComponentReactregistry:ui16 dependencies

Dropdown

dropdown

Dropdown menu with fluid hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-select. Includes MenuItem, DropdownSearch (a search field inside the popup), and multiple selection with merged backgrounds. Radix flavor.

@fluid Registry JSON

Live

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

Docs & live playground: https://www.fluidfunctionalism.com/docs/dropdown.

Install

$

npx shadcn@latest add @fluid/dropdown

Needs @fluid in your components.json registries — switch to URL if it doesn't resolve.

Registry: @fluid
Kind: Component
Framework: React
Files: 3 · 50.8 KB
Preview: Live
License: MIT

npm dependencies

@radix-ui/react-dropdown-menu framer-motion

Registry dependencies

utils@fluid
springs@fluid
font-weight@fluid
shape-context@fluid
surface-context@fluid
surface-classes@fluid
icon-context@fluid
use-fluid-hover@fluid
use-merge-split@fluid
elevated@fluid
scroll-area@fluid
popup@fluid
size-context@fluid
tokens@fluid

@fluid

More from @fluid

Thinking Indicator

thinking-indicator

Sidebar Search Field

sidebar-search-field