One grey box standing in for content that has not arrived.
Import it from rei-kit:
import { BaseSkeleton } from 'rei-kit'
Open BaseSkeleton in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseSkeleton } from 'rei-kit'
</script>
<template>
<div class="flex items-center gap-3" aria-busy="true">
<BaseSkeleton shape="circle" height="2.5rem" />
<div class="flex-1">
<BaseSkeleton shape="text" width="40%" height="0.75rem" />
<BaseSkeleton class="mt-2" shape="text" width="70%" height="0.75rem" />
</div>
</div>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
width | string | '100%' | Any CSS length: `12rem`, `60%`, `8ch`. |
height | string | '1rem' | |
shape | 'block' | 'text' | 'circle' | 'block' | `circle` makes a round one and squares the width to the height. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.