Select

A high-fidelity selection component with multiple visual variants and support for glassmorphism.

Preview & Interactive Laboratory

Variants Grid

Rich Content & States

Premium Examples

Usage & Implementation

<Select>
  <SelectTrigger variant="glass" className="w-[200px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent className="glass">...</SelectContent>
</Select>
React / Tailwind

Granular Customization

1

Trigger Button

The button that opens the selection menu.

className={`SelectTrigger className='...'`}
2

Dropdown Panel

The content container for selection items.

className={`SelectContent className='glass border-none'`}
3

Variants

Standard variants like outline, glass, and destructive.

className={`variant='glass'`}

API Reference (Props)

PropTypeDefaultDescription
variant'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'glass''default'The visual style of the trigger.
disabledbooleanfalseDisables interaction with the select.