Skeleton

Import
import { Skeleton } from "reshaped";
import type { SkeletonProps } from "reshaped";
Related components
Supports multiple types of shapes

Disables animation for users with the reduced motion preference



Usage

Skeleton should be used to render content placeholders before the real data is available. When there are no size props passed to Skeleton, it mimics the line-height of the default text size:

<Skeleton />

Shapes

If you need a specific size for the placeholder, you can control it with the width and height properties. For example, you can mimic a button size to provide a hint for the user about the layout of the component. You can pass width and height as both x1 unit multipliers with number values and literal string values, like 50%.

Both of them support responsive syntax, which means you can change them based on the viewport size.

<Skeleton height={9} width="120px" />

By default, Skeleton comes with a small radius. You can change it to any radius token, completely remove it for full-width elements or make it circular to mimic the shape of components like Avatar.

<Skeleton height={15} width={15} borderRadius="circular" />

Composition

You can combine multiple Skeletons to build component layouts. However, we recommend not to implement 1:1 representation of the component loading. Instead, it should be enough to only give users a hint of what to expect.

<Card>
<View gap={3} direction="row">
<Skeleton width={20} height={20} borderRadius="medium" />
<View.Item grow>
<View gap={3}>
<Text variant="title-1">
<Skeleton width="30%" />
</Text>
<View gap={2}>
<Skeleton />
<Skeleton width="60%" />
</View>
<View.Item gapBefore={6}>
<Skeleton height={9} width={25} />
</View.Item>
</View>
</View.Item>
</View>
</Card>

Accessibility

  • For the reduced-motion preference, Skeleton has its animation disabled
Previous
Next