Skip to content
New

Popover

A floating panel anchored to a button, for a few settings or details. Glass in Kiri, hard-shadowed in Iwa.

Installation

Terminal
npx rasengan-ui add popover

Or with the shadcn CLI, from the registry:

Terminal
npx shadcn@latest add https://ui.rasengan.dev/r/base/popover.json

Usage

app/share.tsx
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";
 
export function Share() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>Share</PopoverTrigger>
      <PopoverContent className="w-72">
        <PopoverTitle>Share this page</PopoverTitle>
        <PopoverDescription>Anyone with the link can view it.</PopoverDescription>
      </PopoverContent>
    </Popover>
  );
}

Villages

A popover surface: card colours, the village's large radius and shadow, blur in Kiri.

Konoha · light
Konoha · dark
Kiri · light
Kiri · dark
Iwa · light
Iwa · dark

Accessibility

  • The popup is a dialog named by PopoverTitle and described by PopoverDescription.
  • Opening moves focus into it; Esc or a click outside closes it and returns focus to the trigger.

API reference

The parts of Base UI's Popover, styled:

PartNotes
Popoveropen, defaultOpen, onOpenChange, modal
PopoverTriggerrender to use a Button; openOnHover
PopoverContentportal and popup; side (default "bottom"), sideOffset, align
PopoverTitle, PopoverDescriptionname and describe the popup
PopoverClosea button that closes it