Popover
Popovers reveal contextual controls or supporting details near a trigger.
Overview and decision boundary
Use Popover for contextual controls or details tied to a trigger.
Do not use Popover for destructive confirmations.
Preview
import { Popover } from '@nerio-ui/ui/client';<Popover trigger="Filters" title="View filters">...</Popover>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add popoverimport { Popover } from '@nerio-ui/ui/client';Usage
import { Popover } from '@nerio-ui/ui/client';<Popover trigger="Filters" title="View filters">...</Popover>Variants
| Variant | Purpose |
|---|---|
Default | Contextual panel near a trigger. |
Anatomy
| Slot | Purpose |
|---|---|
content | Layered panel with controls or supporting content. |
title | Optional contextual heading. |
description | Optional supporting context. |
body | Interactive or supporting content. |
States
| State | Purpose |
|---|---|
Open | Panel is visible and keyboard reachable. |
Closed | Panel is removed from the layer. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Uses the Base UI Popover primitive.
- Keep essential form submission or destructive confirmation outside transient popovers.
- Provide title or description when the content needs context.
- Supports controlled open, uncontrolled defaultOpen, onOpenChange, and a forwarded popup ref.
API
| Prop | Purpose |
|---|---|
trigger | React node or text that opens the popover. |
title / description | Optional context before the body content. |
children | Interactive or supporting content inside the popup. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | popover installs 6 source files into the configured components directory. |
Base UI | popover |
Registry dependencies | button |
Package dependencies | @base-ui/react, clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use Popover for contextual controls or details tied to a trigger.
Do / do not
Do
Use for filters, quick metadata, or lightweight editing controls.
Do not
Do not use Popover for destructive confirmations.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-popover-width-md | Public customization point for this component contract. |
--n-popover-padding | Public customization point for this component contract. |
--n-popover-gap | Public customization point for this component contract. |
--n-popover-radius | Public customization point for this component contract. |
--n-overlay-z-index | Public customization point for this component contract. |
--n-overlay-background | Public customization point for this component contract. |
--n-overlay-border | Public customization point for this component contract. |
--n-overlay-foreground | Public customization point for this component contract. |
--n-overlay-foreground-muted | Public customization point for this component contract. |
--n-overlay-control-background | Public customization point for this component contract. |
--n-overlay-control-background-hover | Public customization point for this component contract. |
--n-overlay-surface-filter | Public customization point for this component contract. |
--n-overlay-shadow | Public customization point for this component contract. |
--n-input-background-on-overlay | Public customization point for this component contract. |
--n-input-background-on-overlay-hover | Public customization point for this component contract. |
--n-input-foreground-on-overlay | Public customization point for this component contract. |
--n-input-placeholder-on-overlay | Public customization point for this component contract. |
--n-motion-overlay-enter-duration | Public customization point for this component contract. |
--n-motion-overlay-enter-easing | Public customization point for this component contract. |
--n-motion-overlay-exit-duration | Public customization point for this component contract. |
--n-motion-overlay-exit-easing | Public customization point for this component contract. |
--n-focus-ring | Public customization point for this component contract. |