Overlays & menusBrick 0.1.12

Popover

Popover presents click-open contextual content anchored to a trigger or anchor.

Live example

Built from the published package

Interactive

Choose with confidence

Know when Popover is the right part

Use it when

Use it for small interactive panels such as filters, details, and compact editing controls.

Choose another path when

Use Tooltip for short noninteractive help, HoverCard for previews, and Dialog for work that requires modal focus and an explicit task boundary.

Installation and imports

tsx

import { Popover } from "@flowstack-ui/brick/popover";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/popover.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Popover.Root>
  <Popover.Trigger>Details</Popover.Trigger>
  <Popover.Portal>
    <Popover.Content>
      <Popover.Title>Details</Popover.Title>
      <Popover.Body>Contextual content</Popover.Body>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>

Visual recipes and states

Size controls maximum inline width. Density controls internal panel rhythm; compact is intended for concise menus and utility panels. Atom owns controlled/uncontrolled state, click interaction, dismissal, focus, placement, collision handling, presence, portal, and Arrow position. The finished overlay uses a structural border, and the Arrow inherits the same border and background so it reads as one continuous surface at every supported radius.

Examples

tsx

<Popover.Content density="compact" size="lg" side="bottom">
  <Popover.Header><Popover.Title>Filters</Popover.Title></Popover.Header>
  <Popover.Body>…</Popover.Body>
  <Popover.Footer><Popover.Close>Done</Popover.Close></Popover.Footer>
  <Popover.Arrow />
</Popover.Content>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are the Popover namespace; named PopoverRoot, PopoverAnchor, PopoverTrigger, PopoverPortal, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription, PopoverBody, PopoverFooter, PopoverClose, and PopoverArrow parts; and PopoverRootProps, PopoverAnchorProps, PopoverTriggerProps, PopoverPortalProps, PopoverContentProps, PopoverHeaderProps, PopoverTitleProps, PopoverDescriptionProps, PopoverBodyProps, PopoverFooterProps, PopoverCloseProps, PopoverArrowProps, PopoverStructureProps, PopoverSize, and PopoverDensity.

Content prop	Values	Default
`size`	`sm`, `md`, `lg`	`md`
`density`	`comfortable`, `compact`	`comfortable`
`sideOffset`	`number`	`8`

Header/Body/Footer prop	Values	Default
`asChild`	`boolean`	`false`

Root always fixes Atom triggerMode to click; triggerMode, openDelay, and closeDelay are excluded. Content adds the size recipe. Other public parts inherit their Atom props. Header/Body/Footer add native attributes, asChild, and render.

Shared responsibility

Accessibility

Use Title and Description when they clarify the panel. Atom owns trigger relationships, focus behavior, outside/Escape dismissal, and portal semantics. Do not use Popover for a task that must block the rest of the page.

Responsive behavior

Content respects viewport constraints. Center-aligned content shifts into the viewport without changing its authored alignment; edge-aligned content may resolve an alternate alignment before shifting. The application owns responsive content layout; logical placement supports RTL.

Stable visual contract

Styling and tokens

Customization

Use Atom placement/state props and Brick size first, then public tokens, then public structure parts. Part className and style are escape hatches.

Tokens and CSS hooks

Stable classes and overridable data-slot values cover every styled part. Content reflects data-size and data-density. Public tokens are --brick-popover-background, --brick-popover-foreground, --brick-popover-muted-foreground, --brick-popover-border, --brick-popover-radius, --brick-popover-shadow, --brick-popover-space, --brick-popover-max-block-size, --brick-popover-max-inline-size-sm, --brick-popover-max-inline-size-md, and --brick-popover-max-inline-size-lg.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground