Popover

A lightweight and customizable popover component for displaying additional content.

Usage

Import the Popover components from @bun-ui/react and use them to create a popover:

import { Popover, PopoverContent, PopoverTrigger } from "@bun-ui/react"

<Popover>
  <PopoverTrigger>
    <button>Open Popover</button>
  </PopoverTrigger>
  <PopoverContent>
    <p>This is the content of the popover.</p>
  </PopoverContent>
</Popover>

Examples

Basic Popover

Customization

The Popover component and its subcomponents can be customized using the className prop or by extending their styles with your design system. Below are the default components and their styling options:

• Popover: The root container for the popover.
• PopoverTrigger: The element that triggers the popover.
• PopoverContent: The container for the content of the popover.

Refer to the source code for more advanced usage and customization options.