Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Popover overview

Popover provides a ready-made trigger and anchored panel shell with outside-pointer dismissal, Escape handling, and optional focus restore. For full DOM ownership, use the separate headless popover docs.

Imports

Use the wrapper when your team wants built-in trigger markup and a minimum floating panel shell.

Wrapper imports

ts
import { TngPopoverComponent } from '@tailng-ui/components';

Usage patterns

Wrapper usage

html
<tng-popover
  triggerLabel="Project actions"
  [open]="open()"
  (openChange)="open.set($event)"
  (closed)="onClosed($event)"
>
  <p>Wrapper popover body content.</p>
</tng-popover>

Style variants

The wrapper behavior shown with local CSS or Tailwind-flavored projected content.

Wrapper popover (plain CSS)

last close reason: none

Keyboard baseline

  • Enter/Space on the built-in trigger toggles the panel.
  • Escape closes when closeOnEscape is enabled.
  • No focus trap is applied by default; Tab can move outside the panel.
  • Focus can return to the trigger when restoreFocus is enabled.