Source: https://www.radix-ui.com/themes/docs/components/skeleton

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Playground Blog

Overview

Getting started Styling Layout Releases Resources

Theme

Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors

Layout

Box Flex Grid Container Section

Typography

Text Heading Blockquote Code Em Kbd Link Quote Strong

Components

Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip

Utilities

Accessible Icon Portal Reset Slot Theme Visually Hidden

Components

Skeleton

Replaces content with same shape placeholder that indicates a loading state.

View source Report an issue View in Playground

Loading

<Skeleton>Loading</Skeleton>

API Reference

---

This component is based on the span element and supports common margin props .

| Prop | Type | Default | | --- | --- | --- | | loading | boolean | true | | width | Responsive<string> | No default value | | minWidth | Responsive<string> | No default value | | maxWidth | Responsive<string> | No default value | | height | Responsive<string> | No default value | | minHeight | Responsive<string> | No default value | | maxHeight | Responsive<string> | No default value |

Examples

---

Size

Use the width and height props to manually control the size of the skeleton.

<Skeleton width="48px" height="48px" />

With children

Use the loading prop to control whether the skeleton or its children are displayed. Skeleton preserves the dimensions of children when they are hidden and disables interactive elements.

<Flex gap="4">
	<Skeleton loading={true}>
		<Switch defaultChecked />
	</Skeleton>

	<Skeleton loading={false}>
		<Switch defaultChecked />
	</Skeleton>
</Flex>

With text

When using Skeleton with text, you’d usually wrap the text node itself rather than the parent element. This ensures that the text is replaced with a placeholder of the same size:

Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet

<Container size="1">
	<Flex direction="column" gap="2">
		<Text>
			<Skeleton>Lorem ipsum dolor sit amet.</Skeleton>
		</Text>

		<Skeleton>
			<Text>Lorem ipsum dolor sit amet</Text>
		</Skeleton>
	</Flex>
</Container>

The difference is especially noticeable when wrapping longer paragraphs:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna.

<Container size="1">
	<Flex direction="column" gap="3">
		<Text>
			<Skeleton>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
				felis tellus, efficitur id convallis a, viverra eget libero. Nam magna
				erat, fringilla sed commodo sed, aliquet nec magna.
			</Skeleton>
		</Text>

		<Skeleton>
			<Text>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
				felis tellus, efficitur id convallis a, viverra eget libero. Nam magna
				erat, fringilla sed commodo sed, aliquet nec magna.
			</Text>
		</Skeleton>
	</Flex>
</Container>

PreviousSeparator

NextSlider

Edit this page on GitHub.