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

API reference

Headless skeleton exposes one structural directive with decorative semantics and two styling state inputs: animated and rounded.

Root directive

tngSkeleton attaches to any owner-authored block element and marks it as a decorative loading placeholder.

Root usage

html
<div tngSkeleton class="skeleton-line"></div>
<div tngSkeleton [animated]="false" [rounded]="false" class="skeleton-block"></div>
InputTypeDefaultNotes
animatedbooleantrueExposes shimmer state through data-animated.
roundedbooleantrueExposes shape state through data-rounded.

State attributes

The directive only adds stable attributes to your element. That makes it easy to author one base selector and branch by state in owner CSS.

Rendered state attributes

html
<div tngSkeleton [animated]="false" [rounded]="false" class="skeleton-block"></div>
<!-- renders with data-slot="skeleton" data-animated="false" data-rounded="false" -->
AttributeValuePurpose
data-slotskeletonStable root selector for all placeholder styling.
data-animatedtrue or falseLets owners toggle shimmer motion through CSS.
data-roundedtrue or falseLets owners branch between rounded and square placeholders.

Behavior baseline

  • The primitive is decorative and always renders aria-hidden="true".
  • The primitive also sets role="presentation".
  • It does not announce loading progress or completion to assistive technology.
  • Use nearby text, a live region, or a real status component when loading state needs to be communicated semantically.