Components
Loading preview...
A fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.
@micka_design
npx shadcn@latest add https://21st.dev/r/micka_design/select"use client";
import { useState } from "react";
import { Select, SelectTrigger, SelectContent, SelectItem } from "../components/ui/select";
export default function SelectDemo() {
const [value, setValue] = useState("medium");
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<Select value={value} onValueChange={setValue}>
<SelectTrigger placeholder="Select size…" />
<SelectContent>
<SelectItem index={0} value="small">Small</SelectItem>
<SelectItem index={1} value="medium">Medium</SelectItem>
<SelectItem index={2} value="large">Large</SelectItem>
<SelectItem index={3} value="xl">Extra Large</SelectItem>
</SelectContent>
</Select>
</div>
);
}