Controls

Animated Select

A searchable select with staggered option entry, spring chevron, grouped items, and a bottom-sheet on mobile — one component, every platform.

All components

Framework

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

const [framework, setFramework] = useState("");

<AnimatedSelect
  label="Framework"
  value={framework}
  onChange={setFramework}
  options={[
    { value: "next", label: "Next.js" },
    { value: "remix", label: "Remix" },
    { value: "vite", label: "Vite" },
  ]}
/>

Props

Prop	Type	Default	Description
options*	SelectOption[]	—	Array of options. Each needs value and label; icon and group are optional.
value	string	—	Currently selected value (controlled).
onChange	(value: string) => void	—	Fired when a new option is selected.
placeholder	string	"Select an option"	Trigger label when nothing is selected.
searchable	boolean	true	Shows a search input inside the dropdown for filtering.
label	string	—	Label displayed above the trigger.
disabled	boolean	false	Disables the trigger.
emptyText	string	"No results"	Message shown when the search produces no results.
maxHeight	number	280	Max height of the option list in px before scrolling.
className	string	—	Tailwind classes on the root container.

Use cases

Settings forms
Country, timezone, language, currency — any setting with many options benefits from search.
Filter dropdowns
Replace bare <select> elements in filter bars with a searchable, keyboard-navigable component.
Team / user assignment
Pick a team member from a grouped list (by department, role, etc.).
Category selectors
Product categories, tags, or any taxonomy with grouped options.