Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7

Accordion overview

Accordion wrappers bring baseline item separators, trigger ergonomics, and animated panel treatment on top of the shared primitive behavior contract.

Imports

Import the wrapper surface when you want the built-in shell styles and motion defaults.

Component import

ts
import {
  TngAccordionComponent,
  TngAccordionIndicator,
  TngAccordionItemComponent,
  TngAccordionTriggerComponent,
  TngAccordionPanelComponent,
} from '@tailng-ui/components';

FAQ variants

The same wrapper behavior rendered through a local CSS shell or a Tailwind utility shell.

Plain CSS accordion

Ownership model
Copy-paste mode keeps source in your app for long-term ownership.

Accessibility baseline

  • Wrapper triggers still expose aria-expanded, aria-controls, and disabled semantics.
  • Panels expose role="region" with aria-labelledby back to the trigger.
  • Arrow keys, Home or End, Enter, and Space follow the same primitive keyboard contract underneath.