---
name: Skeleton
package: '@wordpress/ui'
category: '@wordpress-ui'
status: stable
canonical: 'https://system.automattic.design/components/skeleton/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-skeleton--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/ui/src/skeleton'
---

# Skeleton

A placeholder shown while content is loading.

Size and corner radius are controlled via standard `div` props such as
`style` and `className`.

```tsx
import { Skeleton } from '@wordpress/ui';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | CSS class name to apply to the element. |
| `style` | `CSSProperties` | — | CSS style to apply to the element. |
| `render` | `ComponentRenderFn<HTMLAttributesWithRef<any>> \| ReactElement<Record<string, unknown>, string \| JSXElementConstructor<any>> \| undefined` | — | Replaces the component's default HTML element using a given React element, or a function that returns a React element. |


## Examples

### Default

```tsx
const Default = () => <Skeleton
    style={{
        width: 'var(--wpds-dimension-surface-width-xs)',
        height: textLineHeight,
        borderRadius: 'var(--wpds-border-radius-md)',
    }} />;
```

### Circle

```tsx
const Circle = () => <Skeleton
    style={{
        width: 'var(--wpds-dimension-size-lg)',
        height: 'var(--wpds-dimension-size-lg)',
        borderRadius: '50%',
    }} />;
```

### Text Lines

```tsx
const TextLines = () => <div
    style={ {
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
    } }>
    <Skeleton
        style={ {
            width: '100%',
            height: textLineHeight,
            borderRadius: 'var(--wpds-border-radius-md)',
        } } />
    <Skeleton
        style={ {
            width: '100%',
            height: textLineHeight,
            borderRadius: 'var(--wpds-border-radius-md)',
        } } />
    <Skeleton
        style={ {
            width: '60%',
            height: textLineHeight,
            borderRadius: 'var(--wpds-border-radius-md)',
        } } />
</div>;
```

### Card Placeholder

```tsx
const CardPlaceholder = () => <div
    style={ {
        display: 'flex',
        gap: '1rem',
        alignItems: 'center',
        maxWidth: 320,
    } }>
    <Skeleton
        style={ {
            width: 'var(--wpds-dimension-size-lg)',
            height: 'var(--wpds-dimension-size-lg)',
            borderRadius: '50%',
        } } />
    <div
        style={ {
            display: 'flex',
            flexDirection: 'column',
            gap: '0.5rem',
            flex: 1,
        } }>
        <Skeleton
            style={ {
                width: '80%',
                height: textLineHeight,
                borderRadius: 'var(--wpds-border-radius-md)',
            } } />
        <Skeleton
            style={ {
                width: '50%',
                height: textLineHeight,
                borderRadius: 'var(--wpds-border-radius-md)',
            } } />
    </div>
</div>;
```