Skeleton

Skeleton is used to display the loading state of some component.

Import

import { Skeleton } from "@recastui/react";

Usage

<div className='space-y-3'>
	<Skeleton />
	<Skeleton />
	<Skeleton />
</div>

Or to wrap another component to take the same height and width.

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

Height and Width

You can change the height and/or width of the Skeleton component by using the h and w props. The h and w props accept TailwindCSS height and width values. You can also use the full value to set the height or width to 100%. Default height is 4 and default width is full.

<div className='space-y-3'>
	<Skeleton h='32' w='32' />
	<Skeleton />
	<Skeleton />
	<Skeleton w='3/4'/>
</div>

Circle

You can set the Skeleton component to have a circular shape by using the circle prop.

<div className='space-y-3'>
	<Skeleton h='32' w='32' circle />
	<Skeleton />
	<Skeleton />
</div>

Loaded

You can set the Skeleton component to be in the loaded state by using the isLoaded prop.

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

Props