Skeleton

The ownable Skeleton install gives your app a local loading-placeholder wrapper with editable shimmer, radius, and sizing defaults that can evolve with each product surface.

Why own Skeleton locally

Skeleton placeholders often pick up product-specific spacing, shimmer motion, corner treatment, and loading compositions. Local ownership keeps those visual choices versioned with the screens that actually use them.

Adjust shimmer intensity, motion, and contrast to fit your brand and accessibility targets.
Author richer loading layouts for cards, forms, and media surfaces without forking library code.
Keep placeholder sizing and shape decisions close to the feature that depends on them.

What the install includes

The registry-backed skeleton install writes the primitive helper file, wrapper component, template, stylesheet, and export barrel. After install, the placeholder surface belongs to your app and can be edited like any other local source.

Ownable Install

Install Skeleton from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add skeleton

npx tailng add skeleton

Generated files

The command scaffolds local files under src/app/tailng-ui/skeleton.

src/app/tailng-ui/skeleton/tng-skeleton-primitive.ts
src/app/tailng-ui/skeleton/tng-skeleton.ts
src/app/tailng-ui/skeleton/tng-skeleton.html
src/app/tailng-ui/skeleton/tng-skeleton.css
src/app/tailng-ui/skeleton/index.ts

Import in your feature module/component

import { TngSkeleton, TngSkeletonPrimitive } from './tailng-ui/skeleton';

Usage

<section class="grid gap-3">
  <tng-skeleton width="62%" height="1.2rem"></tng-skeleton>
  <tng-skeleton width="100%" height="0.95rem"></tng-skeleton>
  <tng-skeleton width="74%" height="0.95rem"></tng-skeleton>
  <tng-skeleton width="100%" height="7rem" [rounded]="false"></tng-skeleton>
</section>