Skip to Content

Popover

A floating panel that displays contextual information or UI controls.

Usage

import { Popover } from "@rhinolabs/ui" export default function PopoverDemo() { return ( <Popover> <Popover.Trigger>Open Popover</Popover.Trigger> <Popover.Content> <p>This is the popover content.</p> </Popover.Content> </Popover> ) }

Examples

Basic Popover

A simple popover with text content.

<Popover> <Popover.Trigger asChild> <Button variant="outline">Open</Button> </Popover.Trigger> <Popover.Content> <div className="grid gap-4"> <div className="space-y-2"> <h4 className="font-medium leading-none">Dimensions</h4> <p className="text-sm text-muted-foreground"> Set the dimensions for the layer. </p> </div> <div className="grid gap-2"> <div className="grid grid-cols-3 items-center gap-4"> <label htmlFor="width">Width</label> <input id="width" defaultValue="100%" className="col-span-2" /> </div> <div className="grid grid-cols-3 items-center gap-4"> <label htmlFor="height">Height</label> <input id="height" defaultValue="25px" className="col-span-2" /> </div> </div> </div> </Popover.Content> </Popover>

With Custom Positioning

Popover with custom alignment and offset.

<Popover> <Popover.Trigger asChild> <Button>Settings</Button> </Popover.Trigger> <Popover.Content align="end" sideOffset={8}> <div className="flex flex-col space-y-2"> <h4 className="font-medium">Settings</h4> <p className="text-sm text-muted-foreground"> Manage your account settings and preferences. </p> <hr /> <Button size="sm">View Profile</Button> </div> </Popover.Content> </Popover>

Props

PopoverContent

PropTypeDefaultDescription
align"start" | "center" | "end""center"Alignment relative to trigger
sideOffsetnumber4Distance from trigger
side"top" | "right" | "bottom" | "left"-Preferred side

All components accept their respective Radix UI Popover primitive props.

Design Considerations

  • Keep content concise
  • Position content logically
  • Use appropriate triggers
  • Consider mobile interactions
  • Handle overflow properly

Accessibility

  • Manages focus states
  • Supports keyboard navigation
  • Provides ARIA attributes
  • Handles click outside
  • Supports escape key
Last updated on