---
id: Skeleton
section: components
cssPrefix: pf-v6-c-skeleton
propComponents: ['Skeleton']
---

import { Fragment } from 'react';
import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';

## Examples

### Default

```ts file="./SkeletonDefault.tsx"

```

### Percentage widths

```ts file="./SkeletonPercentageWidth.tsx"

```

### Percentage heights

```ts file="./SkeletonPercentageHeight.tsx"

```

### Text modifiers

```ts file="./SkeletonText.tsx"

```

### Shapes

```ts file="./SkeletonShapes.tsx"

```