Mokri

Preview

Animation Variants

Pulse Animation (Default)

Wave Animation

Shimmer Animation

No Animation

Complex Layouts

Table Skeleton

Preset Examples

Text Presets

Component Presets

Installation

<> import.ts

import { Skeleton } from "@/components/ui/skeleton"

Code

<> component.tsx

import Skeleton from "@/components/ui/skeleton"

<Skeleton />

API Reference

Skeleton

Versatile skeleton loader with many variants and complex presets.

<> import.ts

import Skeleton, { SkeletonText, SkeletonAvatar, SkeletonButton, SkeletonInput, SkeletonCard, SkeletonProfile, SkeletonPost, SkeletonTable, SkeletonDashboard, SkeletonPresets } from "@/components/ui/skeleton"

Props

Prop	Type	Default	Description
`className`	`string`	`""`	Additional CSS classes
`variant`	`"default" \| "text" \| "circular" \| "rectangular" \| "card" \| "avatar" \| "button" \| "input"`	`"default"`	Visual variant
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Size preset
`width`	`string \| number`	—	Width when applicable
`height`	`string \| number`	—	Height when applicable
`animation`	`"pulse" \| "wave" \| "shimmer" \| "none"`	`"pulse"`	Loading animation
`lines`	`number`	`1`	Number of lines (text variant)
`spacing`	`"sm" \| "md" \| "lg"`	`"md"`	Line spacing (text variant)

Presets

title

Large text line

subtitle

Medium text line

paragraph

Multiple text lines

smallAvatar

Small avatar circle

mediumAvatar

Medium avatar circle

largeAvatar

Large avatar circle

smallButton

Small button block

mediumButton

Medium button block

largeButton

Large button block

smallInput

Small input block

mediumInput

Medium input block

largeInput

Large input block

smallCard

Small card block

mediumCard

Medium card block

largeCard

Large card block

pulse

Pulse animation

wave

Wave animation

shimmer

Shimmer animation

static

No animation