Aurora

Skeleton ​

Loading-state placeholder. Provides visual feedback while content is fetching and preserves the layout so the page doesn't jump when data lands.

The component is just a class-customizable pulsing block — sizes, shapes, and corner radius come from the Tailwind utility classes you pass in.

Basic ​

html
<Skeleton class="h-4" />

Common shapes ​

Aurora's Skeleton has no built-in shape variants — everything comes from utility classes.

Avatar
Button
Badge
Input
html
<Skeleton class="h-12 w-12 rounded-full" />   <!-- avatar -->
<Skeleton class="h-10 w-24 rounded-2" />      <!-- button -->
<Skeleton class="h-6 w-12 rounded-full" />    <!-- badge -->
<Skeleton class="h-10 w-32 rounded-2" />      <!-- input -->

Text lines ​

Use full-width skeletons of varying widths for paragraph placeholders so the result reads as text rather than a solid block.

html
<Skeleton class="h-4 w-full" />
<Skeleton class="h-4 w-full" />
<Skeleton class="h-4 w-2/3" />

Avatar + lines ​

html
<div class="flex items-start gap-3">
  <Skeleton class="h-10 w-10 rounded-full shrink-0" />
  <div class="flex flex-col gap-2 flex-1">
    <Skeleton class="h-4 w-1/2" />
    <Skeleton class="h-3 w-full" />
    <Skeleton class="h-3 w-4/5" />
  </div>
</div>

Card placeholder ​

html
<div class="border border-primary rounded-2 p-4 flex flex-col gap-3">
  <Skeleton class="h-32 w-full" />
  <Skeleton class="h-5 w-2/3" />
  <Skeleton class="h-3 w-full" />
  <Skeleton class="h-3 w-3/4" />
</div>

Table row ​

html
<div class="flex items-center gap-4">
  <Skeleton class="h-8 w-8 rounded-full shrink-0" />
  <Skeleton class="h-4 w-32" />
  <Skeleton class="h-4 w-24" />
  <Skeleton class="h-4 w-16 ml-auto" />
</div>

Props ​

PropTypeDefaultDescription
classstring | object | array (Vue class binding)—Merged into the base animate-pulse rounded-2 bg-disabled w-full classes via tailwind-merge. Use this to control height, width, and corner radius.

Default classes ​

Every Skeleton starts with these (override via class):

  • animate-pulse — the loading pulse animation
  • rounded-2 — default ~8px border radius; pass rounded-full for circles, rounded-1 for tighter, etc.
  • bg-disabled — neutral gray background
  • w-full — fills the parent container; override with w-* utilities for narrower shapes