Skeleton

Loading skeleton component with variants, shapes, and animations for creating content placeholders during loading states

Installation

Install the Skeleton component using the nocta-ui CLI:

npx nocta-ui add skeleton

Import the component:

import { Skeleton } from '@/components/ui/skeleton';

Three size options are available: sm, md, and lg. The default size is md.

Small

Medium

Large

The Skeleton component supports different shapes: rectangle, circle, and text.

Rectangle

Circle

Text (Single Line)

Text (Multiple Lines)

For text content placeholders, you can specify multiple lines with the lines prop.

2 Lines

4 Lines

6 Lines

You can customize the width and height of skeleton elements using the width and height props.

Custom Rectangle

Custom Circle

Custom Text

Prop	Type	Default	Description
`variant`	`'default' \| 'pulse' \| 'wave'`	`'default'`	Animation variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Predefined size
`shape`	`'rectangle' \| 'circle' \| 'text'`	`'rectangle'`	Shape of the skeleton
`width`	`string \| number`	—	Custom width
`height`	`string \| number`	—	Custom height
`lines`	`number`	`1`	Number of text lines (only for text shape)
`className`	`string`	`''`	Additional CSS classes

The Skeleton component also accepts all standard HTML div attributes.