React Popover Component | Tailgrids Docs

React Popover components display floating content anchored to a trigger element. They are commonly used for contextual information, settings panels, and inline actions that don’t require full navigation.

This Popover component is built with React and styled using Tailwind CSS. It uses Floating UI for positioning and provides accessible focus and keyboard handling.

Installation

Usage

Import the popover components and wrap a trigger with content.

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeading,
  PopoverDescription,
  PopoverClose
} from "@/registry/core/popover";

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger>Open Popover</PopoverTrigger>

      <PopoverContent>
        <PopoverHeading>Popover Title</PopoverHeading>
        <PopoverDescription>
          This is a short description inside the popover.
        </PopoverDescription>

        <PopoverClose className="mt-4 text-sm underline">Close</PopoverClose>
      </PopoverContent>
    </Popover>
  );
}

Examples

Default

Basic popover with heading and description.

<Popover>
  <PopoverTrigger>Options</PopoverTrigger>
  <PopoverContent>
    <PopoverHeading>Settings</PopoverHeading>
    <PopoverDescription>Manage only the settings you need.</PopoverDescription>
  </PopoverContent>
</Popover>

With Close Button

Include a close action inside the popover content.

<Popover>
  <PopoverTrigger>Details</PopoverTrigger>
  <PopoverContent>
    <PopoverHeading>Profile</PopoverHeading>
    <p className="text-sm">Edit your personal information.</p>

    <PopoverClose className="mt-4 text-sm underline">Close</PopoverClose>
  </PopoverContent>
</Popover>

Controlled Open State

Control the open state using React state.

const [open, setOpen] = useState(false);

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger>Toggle</PopoverTrigger>
  <PopoverContent>
    <p>This popover is fully controlled.</p>
  </PopoverContent>
</Popover>;

Custom Placement

Change the popover position relative to the trigger.

<Popover placement="right-start">
  <PopoverTrigger>Right Popover</PopoverTrigger>
  <PopoverContent>Content positioned on the right.</PopoverContent>
</Popover>

API Reference

Prop	Type	Default	Description
`initialOpen`	`boolean`	`false`	Initial uncontrolled open state
`open`	`boolean`	–	Controlled open state
`onOpenChange`	`(open: boolean) => void`	–	Called when open state changes
`placement`	`Placement` (`@floating-ui`)	`"bottom"`	Position of popover relative to trigger
`modal`	`boolean`	`false`	Trap focus while open