Chips

The ownable Chips install gives your app a local wrapper and editable source surface for removable tokens, selected filters, and product-specific chip treatments without losing the TailNG interaction contract.

Why own Chips locally

Chip lists tend to pick up product language, iconography, disabled rules, and analytics hooks very quickly. Local ownership keeps those decisions in the same repo and pull request as the feature that uses them.

Adjust chip copy, remove affordances, and locked states without waiting on a package release.
Keep product-specific token markup and surrounding layout close to the owning feature.
Iterate on chip sizing, visual states, and helper copy while preserving TailNG semantics.

What the install includes

The registry-backed chips install writes the local wrapper component, template, styles, and export barrel into your app so the generated source can evolve with the product UI around it.

Ownable Install

Install Chips 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 chips

npx tailng add chips

Generated files

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

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

Import in your feature module/component

import { TngChips, TngChipsPrimitive } from './tailng-ui/chips';

Usage

<tng-chips
  [values]="selectedTags()"
  (valuesChange)="selectedTags.set($event)"
  ariaLabel="Selected tags"
>
  @for (tag of selectedTags(); track tag) {
    <span tngChip [tngChipValue]="tag" [tngChipLabel]="tag">
      <span>{{ tag }}</span>
      <button tngChipRemove type="button">&times;</button>
    </span>
  }
</tng-chips>