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
Prop | Type | Default | Description |
---|---|---|---|
align | "start" | "center" | "end" | "center" | Alignment relative to trigger |
sideOffset | number | 4 | Distance 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