Popover

Lightweight anchored surface for secondary actions and supporting content that should stay attached to its trigger rather than interrupting the current page flow.

AccessibleDark ModeAnimatedKeyboard Nav

Install

$npx react-principles add popover

Live Demo

Open in Storybookopen_in_new

Code Snippet

src/ui/Popover.tsx

import { Popover } from "@/ui/Popover";

<Popover side="bottom" align="start">
  <Popover.Trigger>Open details</Popover.Trigger>
  <Popover.Content>
    <p>Popover content goes here.</p>
    <Popover.Close>Close</Popover.Close>
  </Popover.Content>
</Popover>

Copy-Paste (Single File)

Popover.tsx

import { createContext, useCallback, useContext, useEffect, useRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
import { cn } from "@/lib/utils";

type PopoverSide = "top" | "bottom";
type PopoverAlign = "start" | "center" | "end";

export interface PopoverProps {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  side?: PopoverSide;
  align?: PopoverAlign;
  children: ReactNode;
  className?: string;
}

Props

Prop	Type	Default	Description
`open`	`boolean`	`—`	Controlled open state for the popover.
`defaultOpen`	`boolean`	`false`	Initial open state when used uncontrolled.
`onOpenChange`	`(open: boolean) => void`	`—`	Called when the popover opens or closes.
`side`	`"top" \| "bottom"`	`"bottom"`	Places the content above or below the trigger.
`align`	`"start" \| "center" \| "end"`	`"start"`	Aligns the content relative to the trigger width.
`className`	`string`	`—`	Additional classes applied to the root wrapper.
`Popover.Trigger`	`ButtonHTMLAttributes<HTMLButtonElement>`	`—`	Interactive element that toggles the popover.
`Popover.Content`	`HTMLAttributes<HTMLDivElement>`	`—`	Floating surface that holds the popover content.
`Popover.Close`	`ButtonHTMLAttributes<HTMLButtonElement>`	`"Close"`	Convenience action for closing the popover from within the panel.

react-principles