Command Palette
Search for a command to run...
Popover
Displays rich content in a floating overlay positioned relative to a trigger element.About Popover
Container for displaying rich content, actions, or information in a floating overlay that is positioned relative to a trigger element. Supports controlled and uncontrolled states, with automatic positioning and collision detection for optimal placement.Installation
Import the Popover component from LSD:import { Popover } from '@nipsys/lsd'
export default function MyComponent() {
return <Popover />
}Usage
The simplest form of the component with default styling.Basic
Features
Additional features and capabilities of the component.Alignment
Controlled
Multiple
Positioning
Side Offset
Composition
Popover
├── PopoverTrigger
├── PopoverContent
└── PopoverAnchor
API Reference
Radix UI Documentation
Popover wraps Radix UI primitives
Accessibility
The component follows accessibility best practices for screen readers and keyboard navigation.Keyboard Navigation
Keyboard shortcuts and navigation
• Space or Enter - Toggle popover open/closed when trigger is focused• Tab - Move focus within popover content when open• Shift + Tab - Move focus to previous element within popover• Escape - Close popover and return focus to trigger
ARIA Attributes
Proper ARIA attributes for screen readers
• role="dialog" is applied to the popover content• Follows Dialog WAI-ARIA design pattern
Focus States
Visible focus indicators for keyboard users
• Focus moves to popover content when opened• Focus returns to trigger when popover closes• Outside click and Escape close the popover