Select

The Aqua popup button: glossy capsule with a gel arrow box, menu with gel highlight.

installnpx shadcn@latest add @aqua/select

Usage

Pass items to Select so the trigger can render a selected item’s label. Without it the trigger shows the raw value, because the value text is resolved from this map rather than read back out of the open menu.

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

<Select
  defaultValue="aqua"
  items={{ aqua: "Blue", graphite: "Graphite" }}
>
  <SelectTrigger>
    <SelectValue placeholder="Appearance" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="aqua">Blue</SelectItem>
    <SelectItem value="graphite">Graphite</SelectItem>
  </SelectContent>
</Select>