Components
Hover Card
Radix Hover Card on the frosted-acrylic material — a translucent preview panel that opens on pointer hover.
A Radix Hover Card restyled with the acrylic frosted material: a translucent, blurred panel that floats in on hover to preview the content behind a link. Drop-in API-compatible with the shadcn Hover Card.
Installation
npx shadcn add https://acrylic-ui.vercel.app/r/hover-card.jsonUsage
"use client"import { CalendarDays } from "lucide-react"import { Avatar, AvatarFallback, AvatarImage } from "@/registry/acrylic/avatar"import { Button } from "@/registry/acrylic/button"import { HoverCard, HoverCardContent, HoverCardTrigger,} from "@/registry/acrylic/hover-card"export default function HoverCardDemo() { return ( <HoverCard> <HoverCardTrigger asChild> <Button variant="ghost">@nextjs</Button> </HoverCardTrigger> <HoverCardContent className="w-80"> <div className="flex justify-between gap-4"> <Avatar> <AvatarImage src="https://github.com/vercel.png" /> <AvatarFallback>VC</AvatarFallback> </Avatar> <div className="space-y-1"> <h4 className="text-sm font-semibold">@nextjs</h4> <p className="text-sm"> The React Framework – created and maintained by @vercel. </p> <div className="text-muted-foreground flex items-center gap-2 pt-2 text-xs"> <CalendarDays className="size-4 opacity-70" /> <span>Joined December 2021</span> </div> </div> </div> </HoverCardContent> </HoverCard> )}import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/registry/acrylic/hover-card"
<HoverCard>
<HoverCardTrigger>@nextjs</HoverCardTrigger>
<HoverCardContent>
The React Framework – created and maintained by @vercel.
</HoverCardContent>
</HoverCard>Notes
- Built on
@radix-ui/react-hover-cardfor accessible pointer/focus handling — the root forwardsopenDelay/closeDelay. - Exports
HoverCard,HoverCardTrigger,HoverCardContent, mirroring shadcn's API. HoverCardContentrenders in aPortalon the frosted material (w-64,p-4,backdrop-blur-xl) and acceptsalign(default"center") andsideOffset(default4).
File Picker
A backend-agnostic filesystem browser and picker — drill into folders, search, create a folder in place, and pick a file or a directory. No component knows what a "file" physically is; every byte arrives through host callbacks.
Input
macOS 26 Text Field — 5 control sizes, solid control surface, hairline border, accent focus ring.