Skeleton

Used to show a placeholder while content is loading.

Component Source

View the source code for the skeleton component.

src/lib/components/ui/skeleton/skeleton.svelte

Installation

npx nnuikit add skeleton

import Skeleton from "$lib/components/ui/skeleton/skeleton.svelte";

Quick Start

<div class="flex items-center space-x-4">
  <Skeleton class="h-28 w-28 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-16 w-[250px]" />
    <Skeleton class="h-16 w-[200px]" />
  </div>
</div>

Examples

Common patterns for different content types.

Card Profile

<div class="flex flex-col space-y-3">
  <Skeleton class="h-[125px] w-full rounded-xl" />
  <div class="space-y-2">
    <Skeleton class="h-16 w-full" />
    <Skeleton class="h-16 w-[70%]" />
  </div>
</div>

Feed Item

<div class="flex items-center space-x-4 pb-4">
  <Skeleton class="h-24 w-24 rounded-full" />
  <div class="space-y-2 flex-1">
    <Skeleton class="h-24 w-[150px]" />
    <Skeleton class="h-24 w-full" />
  </div>
</div>
<Skeleton class="h-20 w-full rounded-lg" />

Subscription Form

<div class="space-y-4">
  <div class="space-y-2">
    <Skeleton class="h-24 w-[80px]" />
    <Skeleton class="h-24 w-full" />
  </div>
  <Skeleton class="h-24 w-1/3" />
</div>

Table Row

<div class="space-y-3">
    {#each Array(3) as _}
        <div class="flex items-center space-x-4">
            <Skeleton class="h-24 w-1/4" />
            <Skeleton class="h-24 w-1/4" />
            <Skeleton class="h-24 w-1/4" />
            <Skeleton class="h-24 w-1/4" />
        </div>
    {/each}
</div>

Accessibility

ARIA: aria-busy='true' indicates loading state

Animation: reduced-motion respected via prefers-reduced-motion

Semantic: decorative element, hidden from screen readers

Props

Prop	Type	Default	Description
`class`	`string`	-	Custom CSS classes to style the skeleton's shape and size.