A rich content bubble anchored to a trigger. The panel is a CDK overlay on the viewport, so it stays next to the button even inside overflow-hidden cards. Place your trigger inside the [popover-trigger] attribute slot and your panel content as default children.
Put the trigger button inside [popover-trigger] and the panel content as regular children. Everything is self-contained.
Use the placement input on base-popover. The panel auto-flips when it would go off-screen. Supported: bottom-start (default), bottom-end, bottom, top-start, top-end, top, left, right.
Any content can go inside the panel slot — forms, lists, action menus.
Run the following command to add this component to your project:
npx base-ui-cli add popover
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add popover
// Paths are relative to aliases.components (default: src/app/components)
import { PopoverTriggerDirective } from './popover/popover-trigger.directive';
import { PopoverComponent } from './popover/popover.component';
@Component({
selector: 'app-your-component',
imports: [
PopoverComponent,
PopoverTriggerDirective
],
template: `...`
})
export class YourComponent {} API for popover — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-popover | class | string | '' | Extra host classes merged via `cn()`. |
base-popover | minWidth | unknown | '200px' | Minimum width of the overlay panel. |
base-popover | placement | PopoverPlacement | 'bottom-start' | Preferred placement relative to the trigger. Flips when there is not enough room. |
[base-popover-trigger] | base-popover-trigger | PopoverComponent | (required) | — |
[base-popover-trigger] | placement | PopoverPlacement | 'bottom-start' | — |
Content