Switch

The ownable Switch install gives your app a local wrapper, editable styling, and a nearby source surface for product-specific on/off workflows while keeping the TailNG interaction contract intact.

Why own Switch locally

Switches often pick up custom labels, helper text, feature-flag wording, or analytics hooks. Local ownership makes those product-level adjustments easy to ship without waiting on a shared package release.

Adjust track copy, helper rows, and settings-panel layout for your product flow.
Keep feature-toggle defaults and UX language inside the app repo.
Iterate on switch behavior and presentation without forking the shared package surface.

What the install includes

The registry-backed switch install writes the local wrapper component, template, styles, and export barrel under your app so the generated files can evolve with the surrounding settings UX.

Ownable Install

Install Switch 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 switch

npx tailng add switch

Generated files

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

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

Import in your feature module/component

import { TngSwitch, TngSwitchPrimitive } from './tailng-ui/switch';

Usage

<tng-switch
  [checked]="releaseReady"
  (checkedChange)="releaseReady = $event"
>
  Release ready
</tng-switch>