Planes

Components

Controls

Animated Select

ProUnlock all 54 Pro — $99 once

A searchable, grouped select that becomes a drag-to-dismiss bottom sheet on mobile and a spring popover on desktop.

All components

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/animated-select

Unlock with Planes Pro

$99 once · 54 Pro components · lifetime updates.

I have a licenseGet Pro
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" },
  ]}
/>

Use cases

  • Native-feeling mobile select

    Below 640px it becomes a drag-to-dismiss bottom sheet instead of a cramped dropdown — resize your browser (or open on a phone) to see it morph. No separate mobile component, no extra code.

  • 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.).