@kit-ng-ui/skeleton

Loading-state placeholder for Kit UI. Mirrors ant-design's <Skeleton> family.

Install

pnpm add @kit-ng-ui/skeleton @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/skeleton/styles' as skeleton;

Use

import {
  KitSkeletonComponent,
  KitSkeletonAvatarComponent,
  KitSkeletonButtonComponent,
  KitSkeletonInputComponent,
  KitSkeletonImageComponent,
  KitSkeletonNodeComponent,
} from '@kit-ng-ui/skeleton';

@Component({
  standalone: true,
  imports: [KitSkeletonComponent, KitSkeletonAvatarComponent, KitSkeletonButtonComponent],
  template: `
    <!-- wraps content; flips to placeholder while loading -->
    <kit-skeleton [loading]="!data()" active>
      <user-card [user]="data()" />
    </kit-skeleton>

    <!-- standalone shapes -->
    <kit-skeleton-avatar shape="square" size="large" active />
    <kit-skeleton-button size="small" shape="round" active />
  `,
})
export class Demo {}

API — <kit-skeleton>

| Input | Type | Default | Description | | ----------- | --------------------------------------------------- | ------- | ---------------------------------------------------------------------- | | loading | boolean | true | When false, projected content renders instead of the placeholder. | | active | boolean | false | Enables the shimmer animation. | | round | boolean | false | Use pill-shaped (radius-full) bars for title + paragraph. | | title | boolean \| { width } | true | Show / hide title bar; pass { width } to override. | | paragraph | boolean \| { rows, width } | true | Show / hide paragraph; pass { rows, width: string \| array }. | | avatar | boolean \| { size, shape } | false | Show avatar; pass { size, shape: 'circle' \| 'square' }. |

Sub-components

| Selector | Inputs | Notes | | ----------------------- | --------------------------------------------------- | ---------------------------------------------- | | <kit-skeleton-avatar> | size, shape, active | size: 'sm' \| 'md' \| 'lg' or px | | <kit-skeleton-button> | size, shape, block, active | shape: 'circle' \| 'square' \| 'round' \| 'default' | | <kit-skeleton-input> | size, block, active | | | <kit-skeleton-image> | active | Renders a generic image-frame icon. | | <kit-skeleton-node> | active | Project anything (icon, text); flex centered. |