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
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
export default function SelectDemo() {
return (
<Select defaultValue="3" indicatorPosition="right">
<SelectTrigger className="w-[200px]">
<SelectValue placeholder="Select framework" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">
<span className="flex items-center gap-2">
<span className="size-1.5 rounded-full bg-violet-500"></span>
<span>In Progress</span>
</span>
</SelectItem>
<SelectItem value="2">
<span className="flex items-center gap-2">
<span className="size-1.5 rounded-full bg-green-500"></span>
<span>Completed</span>
</span>
</SelectItem>
<SelectItem value="3">
<span className="flex items-center gap-2">
<span className="size-1.5 rounded-full bg-primary"></span>
<span>Pending</span>
</span>
</SelectItem>
<SelectItem value="4">
<span className="flex items-center gap-2">
<span className="size-1.5 rounded-full bg-yellow-500"></span>
<span>Cancelled</span>
</span>
</SelectItem>
<SelectItem value="5">
<span className="flex items-center gap-2">
<span className="size-1.5 rounded-full bg-destructive"></span>
<span>Rejected</span>
</span>
</SelectItem>
</SelectContent>
</Select>
);
}
Dependencies
More by Sean Hello
View all
3D Testimonails
3.4K
Line Charts 9
656
Alert
494
Line Charts 6
392
Area Charts 1
391
Scroll Area
376
Navigation Menu
319
Area Charts 2
318
More in Forms
View all
Premium Auth
524
Contact Card
1K
Book A Demo 1
73
Login 1
53
Form
137
Card Studio
41
Modern & Stunning sign in
1.6K
SignInPage
667
