Skeleton

Display a skeleton whilst another component is loading.

Usage

First of all, you need to import the Skeleton component from the kitchn package.

import { Skeleton } from "kitchn"

Default with Set Width

Code Editor

<Skeleton width={160} />

Default with Box Height

Code Editor

<Skeleton width={160} height={42} boxHeight={42} />

Wrapping children

Code Editor

<Container gap={"small"}>
  <Container>
    <Skeleton>
      <Button>Hidden by skeleton</Button>
    </Skeleton>
  </Container>
  
  <Container>
    <Skeleton show={false}>
      <Button>Not hidden by skeleton</Button>
    </Skeleton>
  </Container>
</Container>

Wrapping children with fixed size

Code Editor

<Skeleton width={"100%"} height={100}>
  {null}
</Skeleton>

Normal

Code Editor

<Skeleton shape={"normal"} width={48} />

Round

Code Editor

<Skeleton shape={"round"} width={48} height={48} boxHeight={48} />

Square

Code Editor

<Skeleton shape={"square"} width={48} height={48} boxHeight={48} />

No animation

Code Editor

<Skeleton width={"100%"} height={100} animated={false}>
  {null}
</Skeleton>

Props

Name	Type	Default	Required	Description	Accepted values
`show`	`boolean`	`true`	-	The skeleton's appearance (if it's shown or not).	-
`width`	`number` \| `string`	-	-	The skeleton's width.	-
`height`	`number` \| `string`	-	-	The skeleton's height.	-
`boxHeight`	`number`	-	-	The skeleton's box height.	-
`animated`	`boolean`	`true`	-	The skeleton's mode (animated or not).	-
`shape`	`string`	`normal`	-	The skeleton's shape.	`normal` \| `square` \| `round`

Last updated on November 14, 2024

Select Snippet