How do I install the Vibe UI Popover component?

You can install Popover into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add popover" in your terminal.

Does Vibe UI Popover support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Popover component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Popover

Popover displays interactive content overlays inside floating boxes.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add popover button

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Preset Variations

Styles & Presets

Explore the different preset variants of the Popover component, supporting Default, Glassmorphic, Neobrutalist, Neon Glow, and Cyberpunk styling configurations.

Configuration & Feedback Overlays

A collection of utility and input overlays including System Settings panels, Accent Color selectors, and Interactive Help forms.

Color Picker

E-Commerce & Action Overlays

A collection of transaction and confirmation flows including mini Shopping Carts, URL Sharing panels, and destructive Action alerts.

Props

PopoverContent

Prop	Type	Default	Description
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The visual preset style variant to apply to the floating popover container.
align	'start' \| 'center' \| 'end'	'center'	The alignment of the popover content relative to the trigger.
sideOffset	number	4	The distance in pixels from the trigger to position the popover.