Faber UI
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

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/popover.json

Usage

typescript
"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.

PartBuilt onProps
Popoverdata-slot="popover"Popover.RootBase UI—
PopoverTriggerdata-slot="popover-trigger"Popover.TriggerBase UI—
PopoverContentdata-slot="popover-content"Popover.PopupBase UI
  • align? = "center"Popover.Positioner["align"]
  • alignOffset? = 0Popover.Positioner["alignOffset"]
  • side? = "bottom"Popover.Positioner["side"]
  • sideOffset? = 4Popover.Positioner["sideOffset"]
PopoverHeaderdata-slot="popover-header"<div>HTML—
PopoverTitledata-slot="popover-title"Popover.TitleBase UI—
PopoverDescriptiondata-slot="popover-description"Popover.DescriptionBase UI—

Changelog

  1. v0.3.0Popover, DropdownMenu, ContextMenu, Menubar, Select, Combobox, HoverCard, Tooltip, Dialog and AlertDialog enter and exit with interruptible transitions on the kit easing tokens, and tw-animate-css is no longer a depen…minor
Full Popover history

Last updated on

On this page