Toast

The ownable Toast install gives your app a local notification queue wrapper with editable markup, action behavior, and styling that can evolve with the feature that owns it.

Why own Toast locally

Toasts often start simple, then pick up product-specific affordances like retry actions, analytics hooks, richer message bodies, or queue rules. Local ownership keeps those changes close to the workflow that depends on them.

Adjust queue rules, close behavior, and action wiring without waiting on a package release.
Keep notification copy, telemetry, and styling decisions versioned with the owning feature.
Promote the generated wrapper into a richer local system when your product outgrows the default shell.

What the install includes

The registry-backed toast install writes the primitive helpers, wrapper component, template, stylesheet, and barrel export. After install, the queue UI and toast surface belong to your app and can be edited locally like any other source file.

Ownable Install

Install Toast 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 dlx tailng add toast

npx tailng add toast

Generated files

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

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

Import in your feature module/component

import { TngToast, TngToastViewportPrimitive, TngToastItemPrimitive } from './tailng-ui/toast';

Usage

<tng-toast #toast position="bottom-right" (dismissedWithReason)="onToastDismiss($event)"></tng-toast>

<tng-button
  tone="success"
  (click)="toast.show('Saved changes to the release checklist.', { title: 'Saved', tone: 'success' })"
>
  Show success toast
</tng-button>