Elastic Dropdown

A single elastic dropdown whose outline itself deforms open and closed via a mass-spring simulation, with full keyboard, ARIA listbox, and click-outside support.

Preview

Installation

Install the component using the CLI.

npx shadcn@latest add https://shreyashtech.me/r/elastic-dropdown.json

Usage

Import the component:

import ElasticDropdownShowcase, { ElasticDropdown } from "@/components/elastic-dropdown"

Use it in your code:

<ElasticDropdown placeholder="Project" onChange={(value) => console.log(value)} />

Props

Property	Type	Default	Description
options	ElasticDropdownOption[]	Personal / Work / Design / Development	Selectable options, each with a value, label, and optional icon.
value	string	-	Controlled selected value. Pass with onChange to control the dropdown externally.
defaultValue	string	-	Initial selected value for uncontrolled use.
onChange	function	-	Called with the newly selected option's value.
placeholder	string	"Select option"	Trigger text shown when nothing is selected.
placeholderIcon	IconComponent	FolderIcon	Icon shown next to the placeholder text.
disabled	boolean	false	Disable the trigger and prevent opening.
className	string	-	Extra classes applied to the outermost wrapper.