Skeleton

Structural placeholders to reduce layout shift.
Status: Beta

Demo

Skeleton

Text and avatar placeholders

 Copy<template>
  <TxSkeleton :loading="true" :lines="3" />
  <TxSkeleton variant="circle" :width="40" :height="40" />
</template>

API (Lite)

Interaction Contract

• loading=false renders the default slot instead of the skeleton.
• lines always renders at least one item, preventing empty skeleton output.
• variant="circle" always uses a circular radius and ignores radius.

Composite Patterns

Card Placeholder

Skeletons inside cards for feeds.

 Copy<template>
  <TxCard>
    <TxSkeleton :loading="true" :lines="2" />
  </TxCard>
</template>