Skeleton

A placeholder to show while content is loading.

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton";
</script>
 
<div class="flex items-center gap-4">
  <Skeleton class="size-12 rounded-full" />
  <div class="flex flex-col gap-2">
    <Skeleton class="h-4 w-40" />
    <Skeleton class="h-4 w-24" />
  </div>
</div>

Installation

npx lily-svelte@latest add skeleton

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the skeleton source from the registry into `$lib/components/ui/skeleton`.

Usage

<script lang="ts">
	import { Skeleton } from '$lib/components/ui/skeleton';
</script>
 
<div class="flex items-center gap-4">
	<Skeleton class="size-12 rounded-full" />
	<Skeleton class="h-4 w-40" />
</div>

← Sheet Slider →