Skeleton

Skeleton displays a loading state of a container.

Import

import { Skeleton } from "@prismane/core";

Usage

<Skeleton w={240} h={120} />

Skeleton Variants

<>
  <Skeleton w={120} h={120} variant="circular" />
  <Skeleton w={240} h={120} variant="rounded" />
  <Skeleton w={240} h={120} variant="rectangular" />
</>

Complex Skeleton

<Flex direction="column" gap={fr(2)}>
  <Skeleton w={64} h={64} variant="circular" />
  <Skeleton w={240} h={20} variant="rounded" />
  <Skeleton w={240} h={20} variant="rounded" />
  <Skeleton w={240} h={20} variant="rounded" />
</Flex>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Skeleton

Go BackShow

Up NextSpinner