Skeleton

A placeholder block with a shimmer while content is loading.

When to use

Use Skeleton when you need a placeholder block with a shimmer while content is loading.

Import

TypeScript

import { Skeleton } from '@gzodo/ui'

Use Skeleton in place of text, avatars, and cards that have not loaded. Match the width and height of the content it stands in for so the page does not jump. The shimmer respects prefers-reduced-motion.

Examples

Text

A few lines of different widths read as a paragraph. Height 14–18px matches body text.

Block

A taller block stands in for a card, a chart, or a media area.

Avatar and lines

Combine a short square with text lines to reserve a person row.

Skeleton

Property

Description

Type

Default

width

CSS width.

string

'100%'

height

CSS height. Also sets min-height.

string

'16px'

className

Extra classes, for a custom radius or margin.

string

—

style

Inline style merged after width and height.

CSSProperties

—

InlineTip

Flex