Components
Select
macOS 26 Pop-up Button — shows the chosen value plus an up/down double-chevron, opening a frosted menu of options.
The macOS 26 Pop-up Button: a control-surface trigger that displays the chosen
value and an up/down double-chevron, opening a frosted menu of selectable items
with a check indicator. Built on
@radix-ui/react-select.
The trigger geometry (height/radius/padding/font) is lifted verbatim from the kit
— radius matches the Button exactly (mini/small/medium quarter-height; large/xl
capsule). The menu panel reuses the frosted Popover
material.
Installation
npx shadcn add https://acrylic-ui.vercel.app/r/select.jsonUsage
"use client"import * as React from "react"import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/registry/acrylic/select"export default function SelectDemo() { return ( <div className="w-full max-w-[200px]"> <Select> <SelectTrigger className="w-full"> <SelectValue placeholder="Select a fruit…" /> </SelectTrigger> <SelectContent> <SelectItem value="apple">Apple</SelectItem> <SelectItem value="banana">Banana</SelectItem> <SelectItem value="cherry">Cherry</SelectItem> <SelectItem value="grape">Grape</SelectItem> </SelectContent> </Select> </div> )}import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/acrylic/select"
<Select>
<SelectTrigger>
<SelectValue placeholder="Select a fruit…" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
</SelectContent>
</Select>Examples
Default, grouped options with SelectLabel / SelectSeparator, and disabled.
Default
Grouped
Disabled
"use client"import * as React from "react"import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue,} from "@/registry/acrylic/select"// Default, grouped (SelectLabel + SelectSeparator), and disabled.export default function SelectShowcase() { return ( <div className="flex flex-wrap items-start gap-6"> <div className="flex flex-col gap-2"> <span className="text-xs text-muted-foreground">Default</span> <Select defaultValue="medium"> <SelectTrigger className="w-[160px]"> <SelectValue placeholder="Size…" /> </SelectTrigger> <SelectContent> <SelectItem value="mini">Mini</SelectItem> <SelectItem value="small">Small</SelectItem> <SelectItem value="medium">Medium</SelectItem> <SelectItem value="large">Large</SelectItem> <SelectItem value="xl">Extra Large</SelectItem> </SelectContent> </Select> </div> <div className="flex flex-col gap-2"> <span className="text-xs text-muted-foreground">Grouped</span> <Select> <SelectTrigger className="w-[160px]"> <SelectValue placeholder="Timezone…" /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectLabel>North America</SelectLabel> <SelectItem value="pst">Pacific (PST)</SelectItem> <SelectItem value="est">Eastern (EST)</SelectItem> </SelectGroup> <SelectSeparator /> <SelectGroup> <SelectLabel>Europe</SelectLabel> <SelectItem value="gmt">London (GMT)</SelectItem> <SelectItem value="cet">Central (CET)</SelectItem> </SelectGroup> </SelectContent> </Select> </div> <div className="flex flex-col gap-2"> <span className="text-xs text-muted-foreground">Disabled</span> <Select disabled> <SelectTrigger className="w-[160px]"> <SelectValue placeholder="Unavailable…" /> </SelectTrigger> <SelectContent> <SelectItem value="a">Option A</SelectItem> </SelectContent> </Select> </div> </div> )}Sizes
mini · small · medium (default) · large · xl — pass size to
SelectTrigger. Heights are the five macOS control sizes (16/20/24/28/36); radius
matches the Button (4/5/6/14/18).
<SelectTrigger size="large">…</SelectTrigger>Notes
- This is the macOS Pop-up Button (a value select). The related Pull-down Button is an action menu, not represented here.
- The trigger icon is the kit's up/down double-chevron (
→ lucideChevronsUpDown); the flat control fill, hairline border, and accent focus ring resolve through the acrylic theme vars so they flip light/dark. - For an editable, searchable variant use the Combobox.
- Items highlight with
bg-[var(--acr-hover)]; the menu surface is the frosted acrylic Popover panel (bg-[var(--acr-panel)]+backdrop-blur).