Skeleton

Previous Next

Use to show a placeholder while content is loading.

Basic
Avatar
Card
Text
Form
Table

Installation

Install the dependencies

pnpm add cn class-variance-authority

Copy the component

Copy the following files into src/lib/components/ui/skeleton.

src/lib/components/ui/skeleton/Skeleton.svelte
<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: HTMLAttributes<HTMLDivElement> = $props();
</script>
<div data-slot="skeleton" {...props} class={cn('bg-muted rounded-md animate-pulse', classProp)}>
  {@render children?.()}
</div>
src/lib/components/ui/skeleton/index.ts
export { default as Skeleton } from './Skeleton.svelte';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<Skeleton class="h-5 w-24 rounded-full" />