@usevyre/react@usevyre/vue

Skeleton

Animated loading placeholder. Use to match the shape of content before it loads — reduces perceived wait time and prevents layout shift.

Card placeholder

import { Skeleton } from "@usevyre/react";

// Avatar + text card placeholder
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
  <Skeleton variant="circle" width={40} height={40} />
  <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
    <Skeleton variant="text" width={180} />
    <Skeleton variant="text" width={120} />
  </div>
</div>

// Image placeholder
<Skeleton variant="rect" width="100%" height={120} />

<script setup>
import { Skeleton } from "@usevyre/vue";
</script>
<template>
  <div style="display:flex;gap:12px;align-items:center">
    <Skeleton variant="circle" :width="40" :height="40" />
    <div style="display:flex;flex-direction:column;gap:6px">
      <Skeleton variant="text" :width="180" />
      <Skeleton variant="text" :width="120" />
    </div>
  </div>

  <Skeleton variant="rect" width="100%" :height="120" />
</template>

Props

Prop	Type	Default	Description
`variant`	`"rect" \| "circle" \| "text"`	`"rect"`	Shape of the placeholder. Text auto-sets height for single lines.
`width`	`number \| string`	`—`	Width in px (number) or any CSS unit (string).
`height`	`number \| string`	`—`	Height in px (number) or any CSS unit (string).
`class`	`string`	`—`	Additional CSS class.

AI Context

Valid props

Prop	Values	Default
`variant`	`"rect"`\|`"circle"`\|`"text"`	`rect`

Quick examples

Avatar skeleton

<Skeleton variant="circle" width={40} height={40} />

Text line skeletons

<Skeleton variant="text" width="100%" />
<Skeleton variant="text" width="60%" />

← Sidebar Slider →