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, SelectSeparator } from "../components/ui/select";
export default function SelectBorderlessDemo() {
const [value, setValue] = useState("react");
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<Select value={value} onValueChange={setValue}>
<SelectTrigger variant="borderless" placeholder="Select framework…" />
<SelectContent>
<SelectItem index={0} value="react">React</SelectItem>
<SelectItem index={1} value="vue">Vue</SelectItem>
<SelectItem index={2} value="svelte">Svelte</SelectItem>
<SelectSeparator />
<SelectItem index={3} value="solid">Solid</SelectItem>
<SelectItem index={4} value="qwik">Qwik</SelectItem>
</SelectContent>
</Select>
</div>
);
}