Component

Skeleton

Placeholder loading elements with rectangle, circle, and text shapes. Includes a SkeletonText helper for multi-line blocks. Uses the headless @refraction-ui/skeleton core.

Shapes

Rectangle, circle, and text-line shapes.

Rectangle

Circle

Text

Compositions

Text blocks and card-style skeleton loading states.

Text Block (3 lines)

Card Skeleton

Installation

$pnpm add @refraction-ui/react-skeleton

Usage

tsx

import { Skeleton, SkeletonText } from '@refraction-ui/react-skeleton'

export function LoadingCard() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton shape="circle" width={48} height={48} />
      <SkeletonText lines={2} />
    </div>
  )
}

Props

Prop	Type	Default	Description
`shape`	`'rectangle' \| 'circle' \| 'text'`	--	Shape of the skeleton element.
`width`	`string \| number`	--	Width of the skeleton.
`height`	`string \| number`	--	Height of the skeleton.
`animate`	`boolean`	`true`	Whether to animate the pulse.
`className`	`string`	--	Additional CSS classes.