Skeleton

Skeleton loaders provide a placeholder preview of content while data is being loaded. They reduce perceived wait time and improve the user experience during loading states. Use them as the @placeholder for deferred charts and tables — see the @defer cookbook.

free@defer

Playground

variant

count

animated

HTML

<ply-skeleton variant="text" [count]="3">Skeleton</ply-skeleton>

Variants

Use variant to control the shape of the skeleton. Options are text, circular, rectangular, card, and table-row.

Text

Circular

Rectangular

Card

Table Row

HTML

<ply-skeleton variant="text" [count]="3"></ply-skeleton>
<ply-skeleton variant="circular" width="64px" height="64px"></ply-skeleton>
<ply-skeleton variant="card" [count]="2"></ply-skeleton>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add skeleton
// Paths are relative to aliases.components (default: src/app/components)
import { SkeletonComponent } from './skeleton/skeleton.component';

@Component({
  selector: 'app-skeleton-example',
  imports: [
    SkeletonComponent
  ],
  template: `...`
})
export class SkeletonExampleComponent {}

Install

bash

npx ply-ui-cli add skeleton

Without animation

Set [animated]="false" to disable the pulse animation.

HTML

<ply-skeleton variant="text" [count]="3" [animated]="false"></ply-skeleton>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add skeleton
// Paths are relative to aliases.components (default: src/app/components)
import { SkeletonComponent } from './skeleton/skeleton.component';

@Component({
  selector: 'app-skeleton-example',
  imports: [
    SkeletonComponent
  ],
  template: `...`
})
export class SkeletonExampleComponent {}

Install

bash

npx ply-ui-cli add skeleton

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add skeleton

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add skeleton
// Paths are relative to aliases.components (default: src/app/components)
import { SkeletonComponent } from './skeleton/skeleton.component';

@Component({
  selector: 'app-your-component',
  imports: [
    SkeletonComponent
  ],
  template: `...`
})
export class YourComponent {}

API for skeleton — generated from JSDoc in the library source.

API reference for skeleton
API	Member	Type	Default	Description
`ply-skeleton`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-skeleton`	`variant`	`SkeletonVariant`	`'text'`	—
`ply-skeleton`	`count`	`number`	`1`	—
`ply-skeleton`	`width`	`string \| undefined`	`undefined`	—
`ply-skeleton`	`height`	`string \| undefined`	`undefined`	—
`ply-skeleton`	`animated`	`boolean`	`true`	—

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).