ReactPopover
A non-modal panel anchored to a trigger.
Give your AI assistant this page as context.
Connect your library with MCPui/popoverUsage
Get this component from a saved library export or the connected CLI. The imports below refer to local files installed in your app.
Import styles/components.css, then styles/theme.css once. Wrap your app in ThemeScope from components/ui/utils so typography, focus and overlays share the theme. The installation guide covers runtime dependencies and React/Next.js setup.
import { Popover } from './components/ui/popover';
<Popover trigger="Set dimensions" title="Dimensions"><Input aria-label="Width" placeholder="Width"/></Popover>Design system
This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in Export.
Dependencies: Input.
Behavior and accessibility
- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.
Status: experimental during early access. Sample previews do not send emails, process payments or upload files to a service.
Source and props
This is the exported source, using the same implementation as the editor.
"use client";
import { Popover as Base } from "@base-ui/react/popover";
import type { ComponentProps, ReactNode } from "react";
import { usePortalContainer } from "./utils";
export function Popover({
trigger,
triggerRender,
title,
children,
open,
onOpenChange,
disabled,
triggerLabel,
initialFocus,
finalFocus,
side = "bottom",
align = "center",
closeLabel = "Close popover",
...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
trigger?: ReactNode;
triggerRender?: ComponentProps<typeof Base.Trigger>["render"];
title: string;
children: ReactNode;
disabled?: boolean;
triggerLabel?: string;
initialFocus?: ComponentProps<typeof Base.Popup>["initialFocus"];
finalFocus?: ComponentProps<typeof Base.Popup>["finalFocus"];
side?: ComponentProps<typeof Base.Positioner>["side"];
align?: ComponentProps<typeof Base.Positioner>["align"];
closeLabel?: string;
}) {
const container = usePortalContainer();
return (
<Base.Root {...rootProps} open={open} onOpenChange={onOpenChange}>
{(trigger != null || triggerRender != null) && (
<Base.Trigger
render={triggerRender}
className="cr-button"
data-variant="outline"
disabled={disabled}
aria-label={triggerLabel}
>
{trigger}
</Base.Trigger>
)}
<Base.Portal container={container}>
<Base.Positioner
side={side}
align={align}
sideOffset={8}
className="cr-positioner"
>
<Base.Popup
className="cr-popup cr-popover"
initialFocus={initialFocus}
finalFocus={finalFocus}
>
<Base.Title className="cr-popover-title">{title}</Base.Title>
{children}
<Base.Close aria-label={closeLabel} className="cr-popover-close">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
aria-hidden="true"
>
<path d="m6 6 12 12M18 6 6 18" />
</svg>
</Base.Close>
</Base.Popup>
</Base.Positioner>
</Base.Portal>
</Base.Root>
);
}