8.0k New

Skeleton

Previous Next

Use to show a placeholder while content is loading.

Epicenter

Local-first, open source apps

Special Sponsor 
<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
 
<div class="flex items-center gap-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 skeleton

Usage 

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
<Skeleton class="h-[20px] w-[100px] rounded-full" />

Avatar 

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
 
<div class="flex w-fit items-center gap-4">
  <Skeleton class="size-10 shrink-0 rounded-full" />
  <div class="grid gap-2">
    <Skeleton class="h-4 w-[150px]" />
    <Skeleton class="h-4 w-[100px]" />
  </div>
</div>

Card 

<script lang="ts">
  import * as Card from "$lib/components/ui/card/index.js";
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
 
<Card.Root class="w-full max-w-xs">
  <Card.Header>
    <Skeleton class="h-4 w-2/3" />
    <Skeleton class="h-4 w-1/2" />
  </Card.Header>
  <Card.Content>
    <Skeleton class="aspect-video w-full" />
  </Card.Content>
</Card.Root>

Text 

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
 
<div class="flex w-full max-w-xs flex-col gap-2">
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-3/4" />
</div>

Form 

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
 
<div class="flex w-full max-w-xs flex-col gap-7">
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-20" />
    <Skeleton class="h-8 w-full" />
  </div>
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-8 w-full" />
  </div>
  <Skeleton class="h-8 w-24" />
</div>

Table 

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
 
<div class="flex w-full max-w-sm flex-col gap-2">
  {#each { length: 5 } as _, i (i)}
    <div class="flex gap-4">
      <Skeleton class="h-4 flex-1" />
      <Skeleton class="h-4 w-24" />
      <Skeleton class="h-4 w-20" />
    </div>
  {/each}
</div>