Skeleton

Placeholder used during loading states.

Basic

Rectangle with default width and height.

<template>
  <CSkeleton />
</template>

Shapes

<template>
  <!-- Rectangle (default) -->
  <CSkeleton />

  <!-- Rounded -->
  <CSkeleton border-radius="8px" />

  <!-- Square -->
  <CSkeleton size="3rem" />

  <!-- Circle -->
  <CSkeleton shape="circle" size="3rem" />
</template>

Animation

Wave animation is enabled by default. Set animation="none" to disable it.

<template>
  <!-- Wave (default) -->
  <CSkeleton />

  <!-- No animation -->
  <CSkeleton animation="none" />
</template>

Card

Compose multiple skeletons to represent a card loading state.

<template>
  <div class="flex gap-4 p-4 border border-surface-200 rounded-lg w-72">
    <CSkeleton shape="circle" size="3rem" class="shrink-0" />
    <div class="flex flex-col gap-2 flex-1">
      <CSkeleton width="75%" height="1rem" />
      <CSkeleton width="50%" height="1rem" />
      <CSkeleton height="0.75rem" />
      <CSkeleton height="0.75rem" />
    </div>
  </div>
</template>

API

Prop	Type	Default	Description
shape	rectangle | circle	rectangle	Shape of the skeleton
size	string	—	Sets both width and height
width	string	100%	Width of the skeleton
height	string	1rem	Height of the skeleton
borderRadius	string	—	Custom border radius
animation	wave | none	wave	Animation type