Popover

Advanced popover component with smart positioning, collision detection, and smooth animations for displaying rich content

Installation

Install the Popover component using the nocta-ui CLI:

npx nocta-ui add popover

Import the component:

import {
  Popover,
  PopoverTrigger,
  PopoverContent
} from '@/components/ui/popover';

The Popover component provides a floating panel that appears on demand, perfect for displaying additional information or controls.

Control the popover's open state programmatically using the open and onOpenChange props.

State: Closed

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes

Prop	Type	Default	Description
`variant`	`'default'`	`'default'`	Visual style of the trigger
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger size
`asChild`	`boolean`	`false`	Render as child element instead of button
`className`	`string`	`''`	Additional CSS classes

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Content size (padding, typography)
`className`	`string`	`''`	Additional CSS classes
`portal`	`boolean`	`true`	Render content in a portal
`fixed`	`boolean`	`false`	Use CSS `position: fixed` for the popover

The Popover component also accepts all standard HTML attributes for their respective elements.