iconiq.

Select

Animated single-select dropdown with staggered options, chevron rotation, and a check on the active row. Built with Framer Motion and Lucide.

Live preview

Open the hatch · Crew files in one by one · Only one gets the patch

Install

v0

Ship the registry bundle to v0 and iterate on options, icons, or motion with prompts.

Usage

Default export is select — alias it (e.g. Select) in your app. See tile 05 for the full API.

tsx
import { Orbit, Sparkles, Telescope } from "lucide-react";
import { select as Select } from "@/components/ui/select";

const options = [
  { value: "scout", label: "Scout pass", icon: <Sparkles className="size-4" /> },
  { value: "transit", label: "Transit window", icon: <Orbit className="size-4" /> },
  { value: "deep", label: "Deep field", icon: <Telescope className="size-4" /> },
];

export function MissionSelect() {
  const [value, setValue] = useState<string | undefined>("scout");
  return (
    <Select
      onChange={setValue}
      options={options}
      placeholder="Plot the trajectory…"
      value={value}
    />
  );
}

Dependencies

Export select — controlled via value / onChange.

options (required)

Array of objects with value (stable id), label (trigger and row text), and optional icon (React node, e.g. Lucide at size-4).

value (optional)

Controlled selected value string matching one option.value. Omit for uncontrolled usage; pair with onChange for two-way binding.

onChange (optional)

Called with the chosen option value when a row is picked; the menu closes after selection.

placeholder (optional)

Shown on the trigger when no value is selected. Defaults to "Select an option…".

framer-motion

Trigger tap scale, chevron rotation, dropdown scaleY/opacity, staggered list items, row hover slide, and check mark pop for the active option.

lucide-react

ChevronDown on the trigger and Check beside the selected row. Icons on options are entirely yours to pass in.

Behavior

Click outside (mousedown on document) closes the menu. Focus styles on the trigger use ring tokens; consider listbox roles for stricter a11y in production.

shadcn registry

Registry item lists framer-motion and lucide-react so the CLI installs peers with the file.

npx shadcn@latest add https://iconiqui.com/r/select.json