Select

A Radix-based dropdown select with glass-morphism styling, keyboard navigation, and animated transitions.

Preview

Installation

npx shadcn@latest add @shadszn/select

Usage

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

export default function Example() {
  return (
    <Select>
      <SelectTrigger className="w-[200px]">
        <SelectValue placeholder="Select a role" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="admin">Admin</SelectItem>
        <SelectItem value="editor">Editor</SelectItem>
        <SelectItem value="viewer">Viewer</SelectItem>
      </SelectContent>
    </Select>
  )
}

With Groups

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectLabel>Fruits</SelectLabel>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectSeparator />
    <SelectLabel>Vegetables</SelectLabel>
    <SelectItem value="carrot">Carrot</SelectItem>
  </SelectContent>
</Select>

Subcomponents

Prop	Type	Default	Description
Select	Root	---	Root component that manages the select state.
SelectTrigger	Trigger	---	The button that opens the dropdown.
SelectValue	Value	---	Displays the selected value or placeholder.
SelectContent	Content	---	The dropdown panel containing items.
SelectItem*	Item	---	An individual selectable option.
SelectLabel	Label	---	A non-selectable group heading.
SelectSeparator	Separator	---	A visual divider between groups.