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

Collapsible

The ownable Collapsible install gives your app a local wrapper, editable template, and nearby style surface for disclosure-driven layout patterns while keeping the TailNG primitive contract close to the product code.

Why own Collapsible locally

Collapsible often becomes product-specific once teams add progress-step markup, custom indicators, editorial headers, or disclosure animation treatment. Local ownership keeps those decisions versioned in the same app repo as the feature that uses them.

  • Adjust trigger layout, iconography, and projected content structure without waiting on a package release.
  • Keep release-checklist, onboarding, or settings disclosure markup close to the owning feature.
  • Iterate on local shell styling while preserving the shared primitive wiring underneath.

What the install includes

The registry-backed collapsible install writes the local wrapper component, template, styles, primitive bridge file, and export barrel under your app so the generated source can evolve with the surrounding layout pattern.

Ownable Install

Install Collapsible 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 collapsible

Generated files

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

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

Import in your feature module/component

Imports

ts
import { TngCollapsible, TngCollapsiblePrimitive, TngCollapsibleTriggerPrimitive, TngCollapsibleContentPrimitive } from './tailng-ui/collapsible';

Usage

Template usage

html
<tng-collapsible
  title="Release readiness"
  [open]="releaseReadinessOpen()"
  (openChange)="releaseReadinessOpen.set($event)"
>
  <ol class="release-readiness-list">
    <li><span>1</span> Notes approved</li>
    <li><span>2</span> QA sign-off</li>
    <li><span>3</span> Publish</li>
  </ol>
</tng-collapsible>