Components
Loading preview...
A select menu for choosing a single option from a list, built on Base UI.
npx shadcn@latest add https://21st.dev/r/extend-hq/select"use client";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
export default function Default() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="w-[360px] space-y-3">
<label className="text-sm font-medium text-foreground">Choose a fruit</label>
<Select>
<SelectTrigger className="w-full" size="lg">
<SelectValue placeholder="Pick one" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</div>
</div>
);
}