Skeleton

Animated loading placeholders with card, list, table, and calendar presets.

iOSAndroid

Preview Skeleton on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-skeleton

Required Packages(1 package)

pnpm add react-native-reanimated

Usage

import {
  SkeletonBase, SkeletonCard, SkeletonList,
  SkeletonTable, SkeletonCalendar
} from '@/components/docyrus-native/skeleton';

<SkeletonBase width={200} height={16} />
<SkeletonCard showImage lines={3} />
<SkeletonList items={5} showAvatar showSubtitle />
<SkeletonTable rows={4} columns={3} />
<SkeletonCalendar events={2} />

API Reference

SkeletonBase

Prop	Type	Default	Description
`width`	`number \| string \| 'auto'`	`'100%'`	Element width (number for px, string for %)
`height`	`number \| string \| 'auto'`	—	Element height (falls back to size preset)
`variant`	`'default' \| 'light' \| 'dark'`	`'default'`	Background color variant
`rounded`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Border radius preset
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Height preset when height is not set
`animated`	`boolean`	`true`	Enable pulse animation
`className`	`string`	—	Additional CSS classes

SkeletonCard

Prop	Type	Default	Description
`showImage`	`boolean`	`true`	Show image placeholder
`imageHeight`	`number`	`160`	Image placeholder height
`lines`	`number`	`3`	Number of text line placeholders
`variant`	`'default' \| 'light' \| 'dark'`	`'default'`	Color variant
`className`	`string`	—	Additional CSS classes

SkeletonList

Prop	Type	Default	Description
`items`	`number`	`5`	Number of list items
`showAvatar`	`boolean`	`true`	Show avatar circle placeholder
`showSubtitle`	`boolean`	`false`	Show subtitle line
`showAction`	`boolean`	`false`	Show action button placeholder
`variant`	`'default' \| 'light' \| 'dark'`	`'default'`	Color variant
`className`	`string`	—	Additional CSS classes

SkeletonTable

Prop	Type	Default	Description
`rows`	`number`	`5`	Number of table rows
`columns`	`number`	`4`	Number of table columns
`showHeader`	`boolean`	`true`	Show header row
`variant`	`'default' \| 'light' \| 'dark'`	`'default'`	Color variant
`className`	`string`	—	Additional CSS classes

SkeletonCalendar

Prop	Type	Default	Description
`events`	`number`	`3`	Number of event placeholders
`variant`	`'default' \| 'light' \| 'dark'`	`'default'`	Color variant
`className`	`string`	—	Additional CSS classes

Components

Component	Description
`SkeletonBase`	Base animated skeleton element
`SkeletonCard`	Card loading placeholder with image and text lines
`SkeletonList`	List loading placeholder with avatar and text
`SkeletonTable`	Table loading placeholder with header and rows
`SkeletonCalendar`	Calendar loading placeholder with grid and events

Type Exports

Type	Description
`SkeletonBaseProps`	Props for SkeletonBase
`SkeletonCardProps`	Props for SkeletonCard
`SkeletonListProps`	Props for SkeletonList
`SkeletonTableProps`	Props for SkeletonTable
`SkeletonCalendarProps`	Props for SkeletonCalendar
`SkeletonVariant`	`'default' \| 'light' \| 'dark'`
`SkeletonRounded`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`
`SkeletonSize`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`

Skeleton

On this page