Data Display

Skeleton

A simple loading placeholder component. Dimensions and shape are controlled entirely via Tailwind utility classes such as width, height, and border-radius.

Basic Shapes

Use Tailwind classes to create text lines, circles, and rectangles.

<script lang="ts">
  import { Skeleton } from 'sv5ui';
</script>

<!-- Text line -->
<Skeleton class="h-4 w-48" />

<!-- Wider line -->
<Skeleton class="h-4 w-64" />

<!-- Circle -->
<Skeleton class="h-12 w-12 rounded-full" />

<!-- Rectangle -->
<Skeleton class="h-24 w-full rounded-lg" />

Card Skeleton

A realistic card loading placeholder with image, title, description, and action areas.

<script lang="ts">
  import { Skeleton, Card } from 'sv5ui';
</script>

<Card class="w-full max-w-sm p-4">
  <!-- Image placeholder -->
  <Skeleton class="h-40 w-full rounded-lg" />

  <!-- Title -->
  <Skeleton class="mt-4 h-5 w-3/4" />

  <!-- Description lines -->
  <Skeleton class="mt-3 h-3 w-full" />
  <Skeleton class="mt-2 h-3 w-5/6" />
  <Skeleton class="mt-2 h-3 w-2/3" />

  <!-- Button -->
  <Skeleton class="mt-4 h-9 w-24 rounded-lg" />
</Card>

List Skeleton

Simulate a list of items loading with icon and text placeholders.

<script lang="ts">
  import { Skeleton } from 'sv5ui';
</script>

<div class="w-full max-w-md space-y-4">
  {#each ['item-1', 'item-2', 'item-3'] as id (id)}
    <div class="flex items-center gap-3">
      <Skeleton class="h-10 w-10 shrink-0 rounded-lg" />
      <div class="flex-1 space-y-2">
        <Skeleton class="h-4 w-3/4" />
        <Skeleton class="h-3 w-1/2" />
      </div>
    </div>
  {/each}
</div>

Profile Skeleton

A profile loading state with avatar, name, role, and bio placeholders.

<script lang="ts">
  import { Skeleton } from 'sv5ui';
</script>

<div class="flex items-start gap-4">
  <!-- Avatar -->
  <Skeleton class="h-14 w-14 shrink-0 rounded-full" />

  <div class="flex-1 space-y-2">
    <!-- Name -->
    <Skeleton class="h-5 w-32" />
    <!-- Role -->
    <Skeleton class="h-3 w-24" />
    <!-- Bio lines -->
    <Skeleton class="mt-3 h-3 w-full" />
    <Skeleton class="h-3 w-4/5" />
  </div>
</div>

Custom Element

Use the as prop to render the skeleton as a different HTML element.

Loading user profile...

<script lang="ts">
  import { Skeleton } from 'sv5ui';
</script>

<!-- Render as a <span> instead of <div> -->
<p class="flex items-center gap-2 text-sm">
  Loading user
  <Skeleton as="span" class="inline-block h-4 w-20" />
  profile...
</p>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	The skeleton element itself — controls the animated background and base styles

Snippets

Name	Description
`children`	Custom content inside the skeleton — useful for composing complex loading states

Props

Prop	Type	Default
`as`	`string`	`'div'`
`class`	`string`	`-`
`ui`	`{ root?: string }`	`-`

Empty Timeline