Popover

Displays rich content in a portal, triggered by a button. Built on top of Radix UI Popover primitive.

Installation

npm install @darksnow-ui/popover

Peer Dependencies

npm install react react-dom

Usage

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@darksnow-ui/popover"
import { Button } from "@darksnow-ui/button"

export function PopoverExample() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <div className="space-y-2">
          <h4 className="font-medium leading-none">Dimensions</h4>
          <p className="text-sm text-theme-content-muted">
            Set the dimensions for the layer.
          </p>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Components

Popover

The root container component.

PopoverTrigger

The button that triggers the popover.

| Prop | Type | Default | Description | |---------|-----------------|---------|--------------------------|| | asChild | boolean | false | Render as child element |

PopoverContent

The content that appears in the popover.

| Prop | Type | Default | Description | |-------------|-----------------------------------------|----------|--------------------------------| | className | string | - | Additional CSS classes | | align | "start" | "center" | "end" | "center" | Alignment relative to trigger | | sideOffset | number | 4 | Distance from trigger |

PopoverAnchor

An optional anchor element for positioning.

Examples

Basic Popover

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Settings</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="space-y-2">
      <h4 className="font-medium leading-none">Settings</h4>
      <p className="text-sm text-theme-content-muted">
        Manage your account settings and preferences.
      </p>
    </div>
  </PopoverContent>
</Popover>

Form in Popover

<Popover>
  <PopoverTrigger asChild>
    <Button>Add Item</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="space-y-4">
      <div className="space-y-2">
        <h4 className="font-medium leading-none">Add new item</h4>
        <p className="text-sm text-theme-content-muted">
          Enter the details for the new item.
        </p>
      </div>
      <div className="space-y-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" placeholder="Item name" />
      </div>
      <Button>Add item</Button>
    </div>
  </PopoverContent>
</Popover>

Accessibility

• Keyboard navigation support
• Focus management
• Screen reader accessible
• Escape key closes popover
• Click outside closes popover

Styling

Uses DarkSnow UI design tokens for consistent theming.

Related Components

• Tooltip - Simple text overlays
• Dialog - Modal dialogs
• Dropdown Menu - Action menus