Skeleton

Text skeleton

import { Skeleton } from '@eekodigital/raster';

<Skeleton variant="heading" width="60%" />
<Skeleton variant="text" />
<Skeleton variant="text" />
<Skeleton variant="text" width="75%" />

Card skeleton

Combine Skeleton with layout primitives to mock complex loading states.

<div style={{ display: 'flex', gap: '1rem' }}>
  <Skeleton variant="circular" width="3rem" height="3rem" />
  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
    <Skeleton variant="text" width="50%" />
    <Skeleton variant="text" />
    <Skeleton variant="text" width="80%" />
  </div>
</div>

Variants

text

heading

circular

rectangular

<Skeleton variant="text" />
<Skeleton variant="heading" />
<Skeleton variant="circular" width="3rem" height="3rem" />
<Skeleton variant="rectangular" width="12rem" height="4rem" />

Props

Prop	Type	Default	Description
variant	”text” | “heading” | “circular” | “rectangular"	"text”	Shape and size intent.
width	string | number	—	Override width. Defaults to 100% for text/heading.
height	string | number	—	Override height. Required for circular/rectangular.
className	string	—	Additional CSS classes.