<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
pnpm dlx shadcn-svelte@latest add skeletonCopy and paste the following code into your project.
import Root from './skeleton.svelte';
export {
Root,
//
Root as Skeleton
};
<script lang="ts">
import { cn, type WithElementRef, type WithoutChildren } from '$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"
class={cn('border border-zinc-900 bg-zinc-900 animate-pulse', className)}
{...restProps}
></div>
Usage
<script lang="ts">
import { Skeleton } from '$lib/components/ui/skeleton/index.js';
</script><Skeleton class="h-[20px] w-[100px] rounded-full" />Examples
Card
<script lang="ts">
import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
<div class="flex flex-col space-y-3">
<Skeleton class="h-[125px] w-[250px] rounded-xl" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>