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
Overview API Styling Examples

Collapsible overview

Collapsible provides a lightweight disclosure wrapper for progress indicators, summaries, and compact reveal panels. The component ships a baseline shell on top of the headless primitive so you can adopt it quickly and still style the projected content yourself.

Imports

Use the wrapper component when you want the built-in trigger shell and content container.

Component import

ts
import { TngCollapsibleComponent } from '@tailng-ui/components';

Progress indicator variants

The same wrapper component rendered with a plain CSS shell or Tailwind utility wrapper.

Plain CSS progress collapsible

  1. ✓ Draft
  2. 2 Review
  3. 3 Publish

Accessibility baseline

  • The wrapper uses a native button trigger with aria-expanded and aria-controls.
  • The content region is hidden when closed and stays in the correct document order when open.
  • Projected step states such as current, complete, or error remain owner-authored semantics.