ComponentsOverlays & feedback

Popover

Small interactive content anchored to a trigger: a quick form, a picker, a list. Non-modal, labelled by its title, and the base for Combobox and Date Picker.

Radix Popover components/popover.tsx, lib/floating-arrow.tsx, lib/layer.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverFooter } from "@vamos-ui/react";

<Popover>
  <PopoverTrigger asChild><Button>Add tag</Button></PopoverTrigger>
  <PopoverContent size="sm">
    <PopoverHeader title="Tag contact" />
    …
  </PopoverContent>
</Popover>

Escape closes the popover and returns focus to the trigger.

If the content has nothing interactive, use Tooltip (short label) or Hover Card (rich preview).

Content portals into the nearest ThemeScope, so it keeps a preview's or a dark section's theme.

Examples

Trigger width list

size="trigger" matches the trigger; padded={false} for edge-to-edge lists.

Schedule a post

Controlled open state, a small form and an arrow — a CMS publish box pattern.

Loading on open

Fetch in onOpenChange and show Skeleton until the data arrives.

Nested layers

A popover inside another layer is depth 2: in glass mode it turns opaque instead of adding a second blur.

API

Popover

Prop	Type	Default
`open / defaultOpen` Controlled / uncontrolled open state.	`boolean`	`—`
`onOpenChange` Called when it opens or closes.	`(open: boolean) => void`	`—`
`modal` Trap focus and block outside interaction.	`boolean`	`false`

PopoverContent

Prop	Type	Default
`size` Width: auto, 256, 320, 416 px, or the trigger width.	`"auto" \| "sm" \| "md" \| "lg" \| "trigger"`	`"md"`
`padded` Inner padding from the --gap token. false for lists.	`boolean`	`true`
`arrow` Pointer arrow towards the trigger.	`boolean`	`false`
`side` Preferred side; flips on collision (and in RTL for start/end align).	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`align` Alignment against the trigger.	`"start" \| "center" \| "end"`	`"center"`
`sideOffset` Gap to the trigger in px.	`number`	`6`
`collisionPadding` Distance kept from the viewport edge.	`number`	`12`
`onOpenAutoFocus / onCloseAutoFocus` preventDefault to control focus yourself.	`(event) => void`	`—`

PopoverHeader

Prop	Type	Default
`title` Heading; becomes the popover's accessible name (aria-labelledby).	`ReactNode`	`—`
`description` One line under the title.	`ReactNode`	`—`
`action` Trailing element, e.g. a close IconButton.	`ReactNode`	`—`

Other parts

Prop	Type	Default
`PopoverTrigger` Gets aria-expanded and aria-controls. Use asChild with a Button.	`Radix Trigger props`	`—`
`PopoverAnchor` Position against another element than the trigger.	`Radix Anchor props`	`—`
`PopoverClose` Closes the popover.	`Radix Close props`	`—`
`PopoverTitle / PopoverDescription` Use instead of PopoverHeader for custom layouts.	`HTML heading / paragraph props`	`—`
`PopoverFooter` Action row with a hairline, bleeding to the panel edge.	`HTML div props`	`—`

Placeholder Art

Pricing table