Skeleton

Shape placeholder that animate-pulses the muted token while content loads. Size it to match the element it replaces — a skeleton of real layout, not a generic gray box.

Usage

skeleton.svelte

<script lang="ts">
	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
	import type { HTMLAttributes } from 'svelte/elements';

	let {
		ref = $bindable(null),
		class: className,
		...restProps
	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
</script>

<div
	bind:this={ref}
	data-slot="skeleton"
	aria-hidden="true"
	class={cn('animate-pulse rounded-xl bg-muted', className)}
	{...restProps}
></div>

Card layout

skeleton-card.svelte

<script lang="ts">
	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
	import type { HTMLAttributes } from 'svelte/elements';

	let {
		ref = $bindable(null),
		class: className,
		...restProps
	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
</script>

<div
	bind:this={ref}
	data-slot="skeleton"
	aria-hidden="true"
	class={cn('animate-pulse rounded-xl bg-muted', className)}
	{...restProps}
></div>

API reference

Inherits native HTMLDivElement attributes via spread. No children — sized entirely by class.

Prop	Type	Default	Description
	`string`	—	Width, height, and radius overrides. The pulse animation and muted background are built in.
	`HTMLDivElement \| null`	`null`	Two-way-bindable element reference.