Components
Popover
A floating panel anchored to a trigger.
Popover is built on the Base UI Popover primitive. It displays floating content anchored to a trigger element.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/popover.jsonUsage
"use client";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
export default function Example() {
return (
<Popover>
<PopoverTrigger render={<Button variant="outline">Open popover</Button>} />
<PopoverContent>Popover content.</PopoverContent>
</Popover>
);
}Examples
Default
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Popoverdata-slot="popover" | Popover.RootBase UI | — |
PopoverTriggerdata-slot="popover-trigger" | Popover.TriggerBase UI | — |
PopoverContentdata-slot="popover-content" | Popover.PopupBase UI |
|
PopoverHeaderdata-slot="popover-header" | <div>HTML | — |
PopoverTitledata-slot="popover-title" | Popover.TitleBase UI | — |
PopoverDescriptiondata-slot="popover-description" | Popover.DescriptionBase UI | — |
Changelog
Full Popover historyLast updated on