Components / Display

Skeleton

A decorative placeholder block for loading layouts.

Preview

Install

Run in your project

npx @getweini/cli@latest add skeleton

Use cases

Profile loading

Reserve the expected avatar and text layout while data arrives.

List loading

Avoid layout jumps while several rows are fetched.

Usage example

Vue

<script setup lang="ts">
import Skeleton from './components/ui/skeleton/Skeleton.vue'
</script>

<template>
  <div aria-busy="true" aria-label="Loading profile">
    <Skeleton shape="circle" class="size-10" />
    <Skeleton class="mt-3 h-4 w-40" />
  </div>
</template>

More examples

Profile placeholder

Set busy state on the whole region, not on each shape.

Profile placeholder

<script setup lang="ts">
import Skeleton from './components/ui/skeleton/Skeleton.vue'
</script>

<template>
  <section aria-busy="true" aria-label="Loading profile" class="flex items-center gap-3">
    <Skeleton shape="circle" class="size-12" /><div><Skeleton class="h-4 w-36" /><Skeleton class="mt-2 h-3 w-24" /></div>
  </section>
</template>

Three pending rows

Use li so the placeholder matches the final list structure.

Three pending rows

<script setup lang="ts">
import Skeleton from './components/ui/skeleton/Skeleton.vue'
</script>

<template>
  <ul aria-busy="true" aria-label="Loading messages">
    <Skeleton v-for="row in 3" :key="row" as="li" class="my-2 h-10 w-full" />
  </ul>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Skeleton
Name	Type	Default or requirement
`as`	div \| span \| li	div
`shape`	rectangle \| rounded \| circle	rounded
`animated`	boolean	true

Skeleton is always aria-hidden. Put aria-busy, loading names, and any status text on the containing region; animation honors reduced-motion preferences.

Implementation notes

Match the approximate size of final content to reduce layout movement.
Replace the placeholder when data is ready; a skeleton should not remain beside loaded content.

Accessibility and localization

Skeleton shapes are always hidden from assistive technology; name the busy container or provide status text.