Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Headless CopyButton overview

tngCopy turns any owner-authored trigger into a copy action while exposing clipboard state, success/error events, and optional announcement hooks.

Imports

Use the directive directly when you want full control of the trigger markup and styling.

Headless import

ts
import { TngCopy } from '@tailng-ui/primitives';

Quick trigger

The smallest useful setup is a native button plus tngCopy and either tngCopyText or tngCopyFrom.

Minimal copy trigger

html
<button
  type="button"
  tngCopy
  [tngCopyText]="installCommand"
  (tngCopied)="onCopied($event)"
  (tngCopyError)="onCopyError($event)"
>
  Copy install command
</button>

Style variants

The same primitive trigger rendered with owner-authored Plain CSS and Tailwind shells.

Plain CSS copy trigger

No copy action yet.

Accessibility baseline

  • Prefer a native <button> so Enter, Space, and disabled behavior stay native.
  • For non-button hosts, the directive mirrors disabled state through aria-disabled and keyboard activation handling.
  • Headless usage does not render a live region for you; if you need spoken feedback, wire tngCopyAnnounced into your own aria-live region.