Skeleton

The Skeleton component is used to display a placeholder while content is loading, creating a smoother user experience by reducing layout shifts and indicating that content is being loaded.

Usage

<script>
  import { Skeleton } from "$lib/components/ui/skeleton";
</script>

<Skeleton class="h-8 w-full" />

Examples

API Reference

Skeleton Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes to style the skeleton element.
ref	HTMLDivElement	undefined	A reference to the underlying HTML element.
...rest	HTMLAttributes<HTMLDivElement>	undefined	Any additional HTML attributes to pass to the skeleton div.

Implementation

The Skeleton component is a simple div with animations applied via Tailwind CSS. Here’s how it’s implemented:

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

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

<div
	bind:this={ref}
	class={cn("bg-primary/10 animate-pulse rounded-md", className)}
	{...restProps}
></div>

The Skeleton component uses the animate-pulse utility from Tailwind CSS to create a subtle loading animation. By default, it has a rounded appearance and a semi-transparent background color that fits with the theme. You can customize the size, shape, and styling by passing additional classes to the component.