Popover

Installation#

npmpnpmyarnbun

npx sugarcoat add popover

Examples#

Default#

Default

With Arrow#

Add an arrow pointing to the trigger element.

With Arrow

Positioning#

Control popover placement relative to the trigger.

Positioning

With Title and Description#

Use semantic elements for accessible content.

Title and Description

Form Content

User Menu

Controlled

Confirmation

Anatomy#

<Popover>
  <Popover.Trigger>
    <button>Trigger</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Positioner>
      <Popover.Popup>
        <Popover.Arrow />
        <Popover.Close />
        <Popover.Title>Title</Popover.Title>
        <Popover.Description>Description</Popover.Description>
        {/* Custom content */}
      </Popover.Popup>
    </Popover.Positioner>
  </Popover.Portal>
</Popover>

Usage#

Import

import { Popover } from "@sugarcoat/ui-nxt";

Usage

<Popover>
<Popover.Trigger>
  <button>Open</button>
</Popover.Trigger>
<Popover.Portal>
  <Popover.Positioner side="bottom">
    <Popover.Popup>
      <Popover.Close />
      <Popover.Title>Title</Popover.Title>
      <Popover.Description>Content here</Popover.Description>
    </Popover.Popup>
  </Popover.Positioner>
</Popover.Portal>
</Popover>

Props#

Prop	Type	Default	Description
open	boolean	-	Controlled open state
defaultOpen	boolean	-	Initial open state (uncontrolled)
onOpenChange	(open: boolean) => void	-	Callback when open state changes
modal	boolean	false	Whether to render as a modal (traps focus)

Popover.Positioner#

Prop	Type	Default	Description
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Preferred side for the popover
align	"start" \| "center" \| "end"	"center"	Alignment along the side axis
sideOffset	number	-	Distance from the trigger

Popover.Close#

Prop	Type	Default	Description
children	ReactNode	-	Custom close button content (defaults to X icon)

Accessibility#

Built on Base UI Popover for robust accessibility
Focus is trapped within the popover when open
Dismissible with Escape key
Focus returns to trigger when closed
Title and Description are properly announced
Close button is keyboard accessible

Popover

Installation#

Examples#

Default#

With Arrow#

Positioning#

With Title and Description#

Form in Popover#

User Menu Example#

Controlled Popover#

Confirmation Popover#