Select (Radix UI)

Forms 8

About

An animated compound select dropdown built on Radix UI primitives with trigger press feedback, chevron rotation, grouped rows, labels, scroll buttons, and smooth panel motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Select (Radix UI) to your project and fits it to your theme.

Code

How Select (Radix UI) is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/r-select";

const FRAMEWORKS = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "vite", label: "Vite" },
  { value: "nuxt", label: "Nuxt" },
];

export default function SelectDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <div className="w-full max-w-[280px]">
        <Select defaultValue="next">
          <SelectTrigger
            label="Framework"
            description="Pick the framework you want to scaffold."
          >
            <SelectValue placeholder="Select a framework">
              {(value) =>
                FRAMEWORKS.find((f) => f.value === value)?.label ??
                "Select a framework"
              }
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            {FRAMEWORKS.map((f) => (
              <SelectItem key={f.value} value={f.value}>
                {f.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}