Select

Forms 43

About

A comprehensive select component with support for single selection, icons, and animations.

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 { User } from "lucide-react";

import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";

export default function DemoOne() {
  return (
    <>
      <div className="font-medium">
        <Select>
          <SelectTrigger icon={User}>
            <SelectValue placeholder="Select a user" />
          </SelectTrigger>
          <SelectContent className="font-medium">
            <SelectItem value="john" icon={User}>
              John Doe
            </SelectItem>
            <SelectItem value="jane" icon={User}>
              Jane Smith
            </SelectItem>
            <SelectItem value="bob" icon={User}>
              Bob Johnson
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
    </>
  );
}