OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Skeleton

Displays an animated placeholder in place of contents.

 <Skeleton>
  <Badge>Loading</Badge>
</Skeleton>

API Reference

Prop	Type	Default
`loading`	`boolean`	`true`
`width`	`Responsive<string>`	`—`
`minWidth`	`Responsive<string>`	`—`
`maxWidth`	`Responsive<string>`	`—`
`height`	`Responsive<string>`	`—`
`minHeight`	`Responsive<string>`	`—`
`maxHeight`	`Responsive<string>`	`—`

This component is based on the Radix Slot primitive and also supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Loading

Use the loading prop to control when the Skeleton is rendered.

 <Flex gap="3">
  <Skeleton loading={true}>
    <Button>Button</Button>
  </Skeleton>
  <Skeleton loading={false}>
    <Button>Button</Button>
  </Skeleton>
</Flex>

Empty

An empty Skeleton displays a placeholder that represents a line of text.

 <Flex direction="column" gap="3" maxWidth="300px">
  <Skeleton />
  <Skeleton />
  <Skeleton width="80%" />
</Flex>

With interactive elements

You can nest interactive elements like inputs and buttons inside Skeleton. The component automatically makes sure that they can’t be hovered, clicked, or focused.

 <Flex direction="column" gap="1" maxWidth="300px">
  <Text color="gray" size="2">
    <Skeleton>Email</Skeleton>
  </Text>
  <Skeleton>
    <TextField.Root placeholder="Your email address" />
  </Skeleton>
</Flex>