# rn-skeleton
URL: /docs/native/components/skeleton

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

## Installation

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

**Dependencies:**
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)

## Usage

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

```

## 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'` |