lensclear design system

Skeleton

Source

The loading placeholder.

Shapes

A muted block that pulses. It fills whatever Box holds it, so the Box owns the geometry: a bar, a square, a circle through overflow hidden.

<Box width={240} height={16}>
  <Skeleton style={{ flex: 1 }} />
</Box>
<Box width={40} height={40} borderRadius="full" overflow="hidden">
  <Skeleton style={{ flex: 1 }} />
</Box>

In a card

Stand in for the pieces that load, in the same layout they will take. A skeleton per text node, sized to the text it replaces.

<Card>
  <CardHeader>
    <Box width={160} height={14}><Skeleton style={{ flex: 1 }} /></Box>
    <Box width={240} height={12}><Skeleton style={{ flex: 1 }} /></Box>
  </CardHeader>
  <CardContent>
    <Box width={120} height={48}><Skeleton style={{ flex: 1 }} /></Box>
  </CardContent>
</Card>

Text has its own

For a single text node, Text loading renders the same pulse sized by a placeholder string. Reach for Skeleton when the shape is not text.

A line of copy

<Text loading placeholderText="A line of copy" />

Props

Skeleton is a div. Every div attribute passes through.

classNamestring

Appended after the skeleton's own classes. A bridge for tailwind product code.

styleCSSProperties

Merged over the pulse. The block has no size of its own, so a Box around it sets one.