Confetti

The ownable Confetti install gives your app a local celebration component with editable particle generation, motion, colors, and reduced-motion behavior.

Why own Confetti locally

Celebration effects quickly become product-specific. Local ownership keeps brand colors, launch geometry, completion behavior, and accessibility decisions close to the workflow that triggers them.

Tune particle count, timing, and origin for each success moment.
Keep reduced-motion behavior and cleanup logic visible to the owning feature.
Evolve the generated source without waiting for a package release.

What the install includes

The registry-backed install writes the component, types, particle utilities, template, stylesheet, and barrel export. The complete effect then belongs to your app.

Ownable Install

Install Confetti 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 confetti

npx tailng add confetti

Generated files

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

src/app/tailng-ui/confetti/tng-confetti.ts
src/app/tailng-ui/confetti/tng-confetti.types.ts
src/app/tailng-ui/confetti/tng-confetti.utils.ts
src/app/tailng-ui/confetti/tng-confetti.html
src/app/tailng-ui/confetti/tng-confetti.css
src/app/tailng-ui/confetti/index.ts

Import in your feature module/component

import { TngConfetti } from './tailng-ui/confetti';

Usage

<tng-confetti
  [active]="celebrating"
  origin="center"
  [pieces]="140"
  (completed)="celebrating = false"
></tng-confetti>

<button type="button" (click)="celebrating = true">Celebrate</button>