Accordion

The ownable Accordion install gives your app a local wrapper, editable template, and nearby style surface for multi-section disclosure patterns while keeping the TailNG primitive interaction contract close to the feature that owns it.

Why own Accordion locally

Accordion often becomes product-specific once teams add editorial headers, section badges, help copy, or feature-specific panel layouts. Local ownership keeps those decisions versioned beside the product code that depends on them.

Adjust trigger layout, icons, and panel structure without waiting on a package release.
Keep FAQ, settings, and documentation section 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 accordion 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 disclosure pattern.

Ownable Install

Install Accordion 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 accordion

npx tailng add accordion

Generated files

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

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

Import in your feature module/component

import { TngAccordion, TngAccordionPrimitive } from './tailng-ui/accordion';

Usage

<tng-accordion ariaLabel="Security FAQ" [defaultValue]="'keys'">
  <tng-accordion-item value="keys">
    <tng-accordion-trigger>API keys</tng-accordion-trigger>
    <tng-accordion-panel>
      Rotate workspace keys, review scopes, and audit recent access.
    </tng-accordion-panel>
  </tng-accordion-item>
  <tng-accordion-item value="sessions">
    <tng-accordion-trigger>Active sessions</tng-accordion-trigger>
    <tng-accordion-panel>
      Manage device trust, revoke tokens, and review session history.
    </tng-accordion-panel>
  </tng-accordion-item>
</tng-accordion>