Skip to contentWolf-Rayet

Skeleton

A skeleton acts as a placeholder for content, usually while the content loads.

#Default

Match the shape of the content that is coming.

import { Skeleton } from '@wolf-rayet/react';

<Skeleton width={240} height={20} />
<Skeleton width={320} height={16} />
<Skeleton width={180} height={16} />

#Shimmering

Use a shimmer when the wait is longer than a moment.

import { Skeleton } from '@wolf-rayet/react';

<Skeleton width={240} height={20} isShimmering />
<Skeleton width={320} height={16} isShimmering />

#Circle

Use a circle where an avatar will be.

import { Skeleton } from '@wolf-rayet/react';

<Skeleton width={32} height={32} isCircle />
<Skeleton width={40} height={40} isCircle isShimmering />