Components

Skeleton

Skeletons indicate loading content using placeholder shapes. They reduce perceived wait time while data loads.

Stable

Anatomy

import {Skeleton} from '@staffbase/spark';

<Skeleton.Avatar />
<Skeleton.Text />
<Skeleton.Box />

Used to represent an avatar or profile image.

Takes a size prop which matches the sizes and default of the Avatar component.

Used to represent a line of text or multiple lines of text with the lines prop.

Used to represent content such as an image, card or input.

Tailwind classes can be used to adjust the width and height as needed.