Animated Select

dropdown x spring

Select dropdown with spring-animated chevron rotation. From Bundui.

selectdropdownspringbundui

Code

select-animated.tsx

"use client";
import { useState } from "react";
import { ChevronDown } from "lucide-react";

export function AnimatedSelect({ options }: { options: { value: string; label: string }[] }) {
  const [value, setValue] = useState(options[0].value);
  return (
    <div className="group relative">
      <select value={value} onChange={(e) => setValue(e.target.value)}
        className="w-48 appearance-none rounded-lg border border-border bg-surface px-4 py-2.5 pr-10 text-sm outline-none focus:border-brand/60">
        {options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      <ChevronDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground transition-transform duration-300 group-focus-within:rotate-180" />
    </div>
  );
}

Icons: npm i lucide-react

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Animated Select component and wire it to my accent.”