Skeleton

Used to render a placeholder while the content is loading.

Usage

import { Skeleton, SkeletonCircle, SkeletonText } from "chakra-ui-solid";

<Stack gap="6" maxW="xs">
  <HStack width="full">
    <SkeletonCircle size="10" />
    <SkeletonText noOfLines={2} />
  </HStack>
  <Skeleton height="200px" />
</Stack>

Examples

Feed

Use the Skeleton component to create a feed skeleton.

Text

Use the SkeletonText component to create a skeleton for text.

With Children

Use the loading prop to show the skeleton while the content is loading.

Select

The first one uses render to put the placeholder’s styles onto the badge itself, rather than around it. That is what the React version’s asChild does, spelled as a function because Solid hands a component computed props instead of an element to clone.

Variants

Use the variant prop to change the visual style of the Skeleton.

pulse

shine

Content Loading

When loading is changed to false, the Skeleton component will fade in.

Chakra UI is cool

Start and End Color

Use the --start-color and --end-color CSS variables to change the start and end color of the skeleton.

Props

SkeletonProps
Prop	Default	Type
`loading`	`true`	`ConditionalValue<boolean>` Whether the placeholder is showing. `false` hides the children's stand-in and fades the real content in — the element stays, so the layout does not jump.
`variant`	`'pulse'`	`ConditionalValue<'pulse' \| 'shine' \| 'none' \| PresetVariant<'skeleton', 'variant'>>` How the placeholder animates — `pulse` fades a solid block, `shine` sweeps a gradient across it, and `none` holds still.

Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

SkeletonCircleProps
Prop	Default	Type
`loading`	`true`	`ConditionalValue<boolean>` Whether the placeholder is showing. `false` hides the children's stand-in and fades the real content in — the element stays, so the layout does not jump.
`size`	—	`CircleProps['size']` The diameter, taking whatever `width` takes.
`variant`	`'pulse'`	`ConditionalValue<'pulse' \| 'shine' \| 'none' \| PresetVariant<'skeleton', 'variant'>>` How the placeholder animates — `pulse` fades a solid block, `shine` sweeps a gradient across it, and `none` holds still.

SkeletonTextProps
Prop	Default	Type
`loading`	`true`	`ConditionalValue<boolean>` Whether the placeholder is showing. `false` hides the children's stand-in and fades the real content in — the element stays, so the layout does not jump.
`noOfLines`	`3`	`number` How many lines to draw. The last one is short, the way a paragraph's last line is — unless there is only one, which is drawn full width.
`rootProps`	—	`StackProps` Props for the {@link Stack} that holds the lines, rather than for the lines themselves.
`variant`	`'pulse'`	`ConditionalValue<'pulse' \| 'shine' \| 'none' \| PresetVariant<'skeleton', 'variant'>>` How the placeholder animates — `pulse` fades a solid block, `shine` sweeps a gradient across it, and `none` holds still.