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
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy 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>