‹ components

Popover

draftv0.9.0·open in canvas

Anchored floating panel on Radix Popover — free-form content near its trigger.

Installnpx shadcn add @cids/popover
Live demo

Motion · tap to replay

honors reduced-motion

Panel fades in via the `animate-in fade-in-0` preset (150ms). No exit animation — dismissal is instant by design (same as Menu).

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Popover, Button, Switch } from "@/design-system";

<Popover trigger={<Button variant="secondary" size="sm">Filters</Button>}>
  <p className="mb-2 font-medium">Show</p>
  {/* any content — filters, mini-forms, detail cards */}
</Popover>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

**Closed** : trigger only.Escapeor re-clicking the trigger closes it.

Anchored floating panel on Radix Popover — free-form content near its trigger.

Anatomy

[ Filters ]        ← trigger (asChild — pass a focusable element)
┌────────────────┐
│ panel (w-64,   │ ← surface-bright, chip radius,
│ children)      │   raised shadow, z-raised
└────────────────┘

Props

PropTypeDefaultNotes
triggerReactNode—Rendered asChild — must be focusable.
childrenReactNode—Panel content.
align"start" "center" \"end"`"start"
side"top" "right" \"bottom" \"left"`"bottom"
classNamestring—Merged onto the panel (e.g. w-80).

Motion

Panel fades in via the animate-in fade-in-0 preset (150ms). No exit

animation — dismissal is instant by design (same as Menu).

A11y

Radix wiring: trigger gets aria-haspopup="dialog" + aria-expanded;

focus moves into the panel on open and returns to the trigger on close;

Escape dismisses. Don't put critical-path actions *only* inside a

popover — it's an enhancement surface.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.