Docs
Skeleton
Skeleton
Use to show a placeholder while content is loading.
<script lang="ts">
import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
<div class="flex items-center space-x-4">
<Skeleton class="size-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
<script lang="ts">
import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
<div class="flex items-center space-x-4">
<Skeleton class="size-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
Installation
npx shadcn-svelte@next add skeleton
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
<Skeleton class="h-[20px] w-[100px] rounded-full" />
On This Page