Park UI Logo
GitHub
Components
Skeleton

Skeleton

Display a placeholder while content is loading.

Usage

import { Circle, HStack, Stack } from 'styled-system/jsx'
import { Skeleton } from '~/components/ui'

export const Demo = () => {
  return (
    <HStack width="full" gap="4">
      <Skeleton borderRadius="full">
        <Circle size="20" />
      </Skeleton>
      <Stack gap="3.5" width="full">
        <Skeleton h="4" />
        <Skeleton h="4" width="80%" />
        <Skeleton h="4" width="60%" />
      </Stack>
    </HStack>
  )
}

Examples

You can use it as a standalone component or wrap it around other components.

contents wrapped
won't be visible
<Skeleton>
  <div>contents wrapped</div>
  <div>won't be visible</div>
</Skeleton>

Skipping the animation

You can prevent the Skeleton from rendering using the isLoaded prop.

https://park-ui.com
<Skeleton isLoaded>
  <span>https://park-ui.com</span>
</Skeleton>

Installation

npx @park-ui/cli components add skeleton