Popover

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.

freenew

Basic Popover

Put the trigger button inside [popover-trigger] and the panel content as regular children. Everything is self-contained.

HTML

<ply-popover placement="bottom-start">
  <button popover-trigger ply-button>Profile</button>

  <p class="font-semibold">User Profile</p>
  <p>Manage your settings.</p>
</ply-popover>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-popover-example',
  imports: [
    PopoverComponent,
    PopoverTriggerDirective
  ],
  template: `...`
})
export class PopoverExampleComponent {}

Install

bash

npx ply-ui-cli add popover

Placement

Use the placement input on ply-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.

HTML

<ply-popover placement="top-start">
  <button popover-trigger ply-button>Trigger</button>
  <p>Panel content</p>
</ply-popover>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-popover-example',
  imports: [
    PopoverComponent,
    PopoverTriggerDirective
  ],
  template: `...`
})
export class PopoverExampleComponent {}

Install

bash

npx ply-ui-cli add popover

Rich Panel Content

Any content can go inside the panel slot — forms, lists, action menus.

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-popover-example',
  imports: [
    PopoverComponent,
    PopoverTriggerDirective
  ],
  template: `...`
})
export class PopoverExampleComponent {}

Install

bash

npx ply-ui-cli add popover

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add popover

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-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 reference for popover
API	Member	Type	Default	Description
`ply-popover`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-popover`	`minWidth`	`unknown`	`'200px'`	Minimum width of the overlay panel.
`ply-popover`	`placement`	`PopoverPlacement`	`'bottom-start'`	Preferred placement relative to the trigger. Flips when there is not enough room.
`[ply-popover-trigger]`	`ply-popover-trigger`	`PopoverComponent`	`(required)`	—
`[ply-popover-trigger]`	`placement`	`PopoverPlacement`	`'bottom-start'`	—

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).