Components
Popover
Radix Popover as a frosted-acrylic floating panel — translucent tint + backdrop blur.
A Radix Popover restyled
as the macOS 26 frosted panel: a translucent tint with a hairline border and a soft
drop shadow over a backdrop-blur. Drop-in API-compatible with the shadcn Popover —
same primitives, only the material changes.
Installation
npx shadcn add https://acrylic-ui.vercel.app/r/popover.jsonUsage
"use client"import { Button } from "@/registry/acrylic/button"import { Input } from "@/registry/acrylic/input"import { Popover, PopoverContent, PopoverTrigger,} from "@/registry/acrylic/popover"export default function PopoverDemo() { return ( <Popover> <PopoverTrigger asChild> <Button variant="neutral">Open popover</Button> </PopoverTrigger> <PopoverContent className="w-80"> <div className="grid gap-4"> <div className="space-y-1.5"> <h4 className="text-sm font-medium leading-none">Dimensions</h4> <p className="text-sm text-muted-foreground"> Set the dimensions for the layer. </p> </div> <div className="grid gap-2"> <div className="grid grid-cols-3 items-center gap-4"> <label htmlFor="width" className="text-sm"> Width </label> <Input id="width" size="large" defaultValue="100%" className="col-span-2 h-8" /> </div> <div className="grid grid-cols-3 items-center gap-4"> <label htmlFor="maxWidth" className="text-sm"> Max. width </label> <Input id="maxWidth" size="large" defaultValue="300px" className="col-span-2 h-8" /> </div> <div className="grid grid-cols-3 items-center gap-4"> <label htmlFor="height" className="text-sm"> Height </label> <Input id="height" size="large" defaultValue="25px" className="col-span-2 h-8" /> </div> <div className="grid grid-cols-3 items-center gap-4"> <label htmlFor="maxHeight" className="text-sm"> Max. height </label> <Input id="maxHeight" size="large" defaultValue="none" className="col-span-2 h-8" /> </div> </div> </div> </PopoverContent> </Popover> )}import { Button } from "@/components/acrylic/button"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/acrylic/popover"
<Popover>
<PopoverTrigger asChild>
<Button variant="neutral">Open popover</Button>
</PopoverTrigger>
<PopoverContent className="w-80">Place content here.</PopoverContent>
</Popover>Notes
- Built on
@radix-ui/react-popover, so positioning, focus management, and keyboard dismissal match the shadcn Popover exactly — only the surface is restyled. - The content uses the canonical frosted material (translucent
--acr-paneltint,--acr-borderhairline,backdrop-blur-xl, soft shadow) with Radix enter/exit zoom + fade animations and the content transform-origin. - Default content padding is
p-4and widthw-72; both override cleanly viaclassName(tailwind-merge). The Combobox dropdown passesp-0to reuse the same surface flush for its Command list. - Exports
Popover,PopoverTrigger,PopoverContent, andPopoverAnchor.