Getting StartedOwnable model, workflow, and first local install 2
LayoutInstallable layout wrappers with local source ownership 6
OverlayInstallable overlay wrappers with local source ownership 3
FeedbackInstallable feedback wrappers with local source ownership 5
FormInstallable form components 11
UtilityInstallable utility wrappers with local source ownership 6
NavigationInstallable navigation components 6
ToolingCLI and registry contracts 2
ReleasePublishing and workflow structure for the ownable surface 1

Popover

The ownable Popover install gives your app a local anchored panel wrapper with editable trigger and panel styling close to the workflow that owns the floating interaction.

Why own Popover locally

Popovers quickly become product-specific once teams add contextual actions, inspection panes, or compact review flows. Local ownership keeps trigger wording, panel layout, and behavior affordances versioned with the feature using them.

  • Adjust trigger chrome, panel density, and action layout without waiting on a package release.
  • Keep anchored-position styling and projected content coupled to the owning screen.
  • Extend the generated wrapper if your product later needs richer panel variants or extra hooks.

What the install includes

The registry-backed popover install writes the wrapper component, template, stylesheet, primitive helper file, and export barrel. After install, your app owns the generated source and can evolve the floating panel shell locally.

Ownable Install

Install Popover from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm

bash
pnpm dlx tailng add popover

Generated files

The command scaffolds local files under src/app/tailng-ui/popover.

  • src/app/tailng-ui/popover/tng-popover-primitive.ts
  • src/app/tailng-ui/popover/tng-popover.ts
  • src/app/tailng-ui/popover/tng-popover.html
  • src/app/tailng-ui/popover/tng-popover.css
  • src/app/tailng-ui/popover/index.ts

Import in your feature module/component

Imports

ts
import { TngPopover } from './tailng-ui/popover';

Usage

Template usage

html
<tng-popover triggerLabel="Project actions">
  <p>Popover body content.</p>
  <button type="button">Apply</button>
</tng-popover>