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

Skeleton overview

Headless skeleton gives you the decorative loading semantics and state attributes, while the shimmer surface, shape, and layout remain fully owner-authored.

Imports

Use the primitive directive when you want to own the placeholder layout and visual treatment.

Primitive import

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

Basic composition

The primitive only adds the semantic and state attributes. You decide how many placeholder blocks to render and how they map to the loading layout.

Minimal headless markup

html
<section class="skeleton-stack">
  <div tngSkeleton class="skeleton-line skeleton-line--title"></div>
  <div tngSkeleton class="skeleton-line"></div>
  <div tngSkeleton class="skeleton-line skeleton-line--short"></div>
</section>

Style variants

Use the same primitive in a CSS-authored shimmer stack or a utility-authored Tailwind surface.

Headless skeleton stack (plain CSS)

Accessibility baseline

  • Skeleton placeholders are decorative and default to aria-hidden="true" with role="presentation".
  • Use nearby text or a live region for actual loading-status communication.
  • Disable shimmer through [animated]="false" where motion should be reduced.