Skip to content
Cuelark UI
OverlaysAnimated

Popover

Anchored panels that spring open, with optional crop marks.

A popover shows rich, interactive content anchored to a trigger, such as settings, pickers and small forms. It springs out of its anchor side, and with marks its crop marks close in as it opens.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/popover.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/popover.

Builds on: motion

Usage

import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

<Popover>
  <PopoverTrigger asChild><Button>Open</Button></PopoverTrigger>
  <PopoverContent marks>…</PopoverContent>
</Popover>

Motion

How it moves

Springs from its anchor side (popIn); with marks, the crop marks close in (marksIn).

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

PopoverContent

Extends Radix Popover.Content (side, align, sideOffset, collisionPadding).

PropTypeDefaultDescription
marksbooleanfalseCrop marks around the panel.

Popover · PopoverTrigger · PopoverAnchor

Accessibility

  • Focus moves into the popover and returns to the trigger on close.
  • Esc and outside clicks close it.

FAQ

Also searched as: react popover · shadcn popover · popover component · radix popover · floating panel