PaperSkeleton

Form-like loading placeholders with slow paper pulse.

↗ loading state, but make it editorial.

Preview

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const paperSkeletonVariants = cva(
  [

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperSkeleton/paperSkeleton.tsx⎘
Step 2.Create the barrel:
components/ui/paperSkeleton/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperSkeleton'
```

Variants

Text

Rectangle

Avatar

Props

Prop	Type	Default	Description
`variant`	`'text' \| 'rect' \| 'avatar'`	`rect`	Shape preset.

Examples

Card loading

Stack text and rectangle skeletons for content cards.

<PaperSkeleton variant="rect" />

Profile loading

Avatar + text skeleton pattern for user lists.

<PaperSkeleton variant="avatar" />