Popover v0.1.0 Overlay

Non-modal floating panel anchored to its trigger (floating-ui positioning with flip/shift).

import { Popover } from "latticeui-react";

Examples

Filter popover

Show code

<Popover.Root placement="bottom-start">
  <Popover.Trigger>Open filters</Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Filters</Popover.Title>
    <Checkbox label="Only active" defaultChecked />
    <Checkbox label="Include archived" />
    <Popover.Close />
  </Popover.Content>
</Popover.Root>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`trigger`	`button`	`[data-scope="popover"][data-part="trigger"]`
`positioner`	`div`	`[data-scope="popover"][data-part="positioner"]`
`content`	`div[role=dialog]`	`[data-scope="popover"][data-part="content"]`
`title`	`h3`	`[data-scope="popover"][data-part="title"]`
`arrow`	`div`	`[data-scope="popover"][data-part="arrow"]`
`close`	`button`	`[data-scope="popover"][data-part="close"]`

Props

Prop	Type	Default
`Root.defaultOpen`	`boolean`	—
`Root.onOpenChange`	`(open: boolean) => void`	—
`Root.placement`	`Placement (floating-ui)`	`"bottom"`

Accessibility

Roles: dialog (non-modal)

Key	Action
`Escape`	closes and refocuses trigger

Outside pointer-down closes the popover.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="popover"][data-part="content"] {
  /* your overrides */
}

State attributes: data-state=open