Overlays & menusBrick 0.1.2

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. Atom owns controlled/uncontrolled state, click interaction, dismissal, focus, placement, collision handling, presence, portal, and Arrow position.

Examples

tsx

<Popover.Content 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, and PopoverSize.

Content prop	Values	Default
`size`	`sm`, `md`, `lg`	`md`
`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 and Atom may flip or shift it. 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. 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