Overlays

Popover

Floating panel anchored to a trigger. Use for menus, info panels, mini-forms.

Preview

'use client';

import { Button } from '@brika/clay/components/button';
import { Input } from '@brika/clay/components/input';
import { Label } from '@brika/clay/components/label';
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@brika/clay/components/popover';
/** Filter panel inside a popover, typical pattern for inline form controls. */
export default function PopoverDefaultDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Filter results</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <PopoverHeader>
          <PopoverTitle>Filter</PopoverTitle>
          <PopoverDescription>Narrow results by date range.</PopoverDescription>
        </PopoverHeader>
        <div className="mt-3 grid gap-3">
          <div className="grid gap-1.5">
            <Label htmlFor="pop-from">From</Label>
            <Input id="pop-from" type="date" />
          </div>
          <div className="grid gap-1.5">
            <Label htmlFor="pop-to">To</Label>
            <Input id="pop-to" type="date" />
          </div>
          <Button className="w-full">Apply filter</Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}

01 Installation

Install

Pull Popover from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Popover } from "@brika/clay";

tsxGranular1 line

import { Popover } from "@brika/clay/components/popover";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxPopover.tsx40 lines

'use client';

import { Button } from '@brika/clay/components/button';
import { Input } from '@brika/clay/components/input';
import { Label } from '@brika/clay/components/label';
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@brika/clay/components/popover';
/** Filter panel inside a popover, typical pattern for inline form controls. */
export default function PopoverDefaultDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Filter results</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <PopoverHeader>
          <PopoverTitle>Filter</PopoverTitle>
          <PopoverDescription>Narrow results by date range.</PopoverDescription>
        </PopoverHeader>
        <div className="mt-3 grid gap-3">
          <div className="grid gap-1.5">
            <Label htmlFor="pop-from">From</Label>
            <Input id="pop-from" type="date" />
          </div>
          <div className="grid gap-1.5">
            <Label htmlFor="pop-to">To</Label>
            <Input id="pop-to" type="date" />
          </div>
          <Button className="w-full">Apply filter</Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}

03 Examples

Popover, every way

Align

The align prop pins the content to the start, center, or end of the trigger.

GitHub

'use client';

import { Button } from '@brika/clay/components/button';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@brika/clay/components/popover';
/** The align prop pins the content to the start, center, or end of the trigger. */
export default function PopoverAlignDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {(['start', 'center', 'end'] as const).map((align) => (
        <Popover key={align}>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm">
              {align}
            </Button>
          </PopoverTrigger>
          <PopoverContent align={align} className="w-36 text-center text-sm">
            Aligned to {align}.
          </PopoverContent>
        </Popover>
      ))}
    </div>
  );
}

Sides

The side prop controls which edge of the trigger the popover appears on.

GitHub

'use client';

import { Button } from '@brika/clay/components/button';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@brika/clay/components/popover';
/** The side prop controls which edge of the trigger the popover appears on. */
export default function PopoverSidesDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
        <Popover key={side}>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm">
              {side}
            </Button>
          </PopoverTrigger>
          <PopoverContent side={side} className="w-36 text-center text-sm">
            Placed on the {side}.
          </PopoverContent>
        </Popover>
      ))}
    </div>
  );
}

04 Accessibility

Accessibility

Focus moves into the popover when it opens, Tab navigates within it.
Escape and clicking outside close the popover and return focus to the trigger.
Use Popover over HoverCard when content must be keyboard-reachable.
The trigger carries aria-expanded and aria-controls pointing to the panel.

05 Tokens 13 theme-overridable

Theme tokens

Every CSS variable Popover reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Popover without touching component code.

Popover tokens

13 tokens

ColorFill, border, and text colors.3

--popover-surface-containercolorvar(--popover)
components.popover.surfaceContainer
Background of the popover surface.
--popover-surface-labelcolorvar(--popover-foreground)
components.popover.surfaceLabel
Default foreground color inside the popover surface.
--popover-description-colorcolorvar(--muted-foreground)
components.popover.descriptionColor
Foreground color of `<PopoverDescription>` text shown beneath the popover title.

GeometrySizes, lengths, and corner radii.4

--popover-radiusradiusvar(--radius-surface)
components.popover.radius
Popover corner radius.
--popover-padding-xsizecalc(var(--spacing) * 3)
components.popover.paddingX
Inline padding inside the popover.
--popover-padding-ysizecalc(var(--spacing) * 3)
components.popover.paddingY
Block padding inside the popover.
--popover-gapsizecalc(var(--spacing) * 2)
components.popover.gap
Gap between adjacent children inside the popover.

BorderBorder width and style.2

--popover-border-widthborder-width1px
components.popover.borderWidth
Border width on the popover. Set non-zero for outline-style variants.
--popover-border-styleborder-stylesolid
components.popover.borderStyle
Border style on the popover (`solid`, `dashed`, `double`, `none`).

ElevationDrop shadow and depth.2

--popover-shadowshadowvar(--shadow-overlay)
components.popover.shadow
Popover elevation.
--popover-backdrop-blurblur0px
components.popover.backdropBlur
Backdrop blur applied behind a translucent popover.

MotionAnimation duration and easing.2

--popover-durationdurationvar(--motion-standard-duration)
components.popover.duration
Transition duration for popover state changes.
--popover-easingeasingvar(--motion-standard-easing)
components.popover.easing
Transition easing for popover state changes.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.popover, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "popover": {
      "paddingX": "calc(var(--spacing) * 3)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-popover-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Popover. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

passthrough