About
Displays a list of options for the user to pick from—triggered by a button.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Select to your project and fits it to your theme.
Code
How Select is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
'use client';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
export default function SelectDemo() {
return (
<div className="flex flex-col gap-6">
<Select>
<SelectTrigger size="sm" className="w-[200px]">
<SelectValue placeholder="Small" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="cherry">Cherry</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
<SelectItem value="grape">Grape</SelectItem>
</SelectContent>
</Select>
<Select>
<SelectTrigger className="w-[200px]">
<SelectValue placeholder="Medium" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="cherry">Cherry</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
<SelectItem value="grape">Grape</SelectItem>
</SelectContent>
</Select>
<Select>
<SelectTrigger size="lg" className="w-[200px]">
<SelectValue placeholder="Large" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="cherry">Cherry</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
<SelectItem value="grape">Grape</SelectItem>
</SelectContent>
</Select>
</div>
);
}
Dependencies
More by Sean Hello
View all
3D Testimonails
3.3K
Line Charts 9
637
Alert
492
Area Charts 1
385
Line Charts 6
384
Scroll Area
376
Area Charts 2
317
Navigation Menu
305
More in Forms
View all
Premium Auth
500
Login 1
52
Book A Demo 3
83
Authentication Card
47
Contact Card
1K
Login Card
32
Book A Demo 1
69
Login 2
7
