# Skeleton

A skeleton loading indicator with preset layouts. Composes `Placeholder` components to mimic content structure.

## When to Use

- Loading states for complex layouts
- Progressive content loading
- Replacing spinners with content-aware placeholders

## Properties

- **`layout`** `'page' | 'content' | 'topbar' | 'menu' | 'stats' | 'tabs' | 'table' | 'chart'` (default: `'page'`) — Preset layout pattern
- **`lines`** `number` (default: `5`) — Number of placeholder lines (for page, content, menu, tabs layouts)
- **`rows`** `number` (default: `5`) — Number of table rows (for table layout)
- **`columns`** `number` (default: `5`) — Number of columns (for table and chart layouts)
- **`tabs`** `number` (default: `3`) — Number of tabs (for tabs layout)
- **`cards`** `number` (default: `3`) — Number of stat cards (for stats layout)
- **`isStatic`** `boolean` (default: `false`) — Disable shimmer animation
- **`size`** `string` (default: `'2x'`) — Height of individual placeholder elements (from Placeholder)
- **`circle`** `boolean` — Render placeholder as a circle (1:1 aspect ratio with round radius)
- **`template`** `string` — CSS grid-template shorthand for the skeleton root grid layout
- **`areas`** `string` — CSS grid-template-areas for named grid areas in the skeleton root layout

### Base Properties

Supports [Base properties](../../BaseProperties.md).

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

```jsx
<Skeleton layout="content" lines={5} />

<Skeleton layout="page" />

<Skeleton layout="table" rows={5} columns={4} />

<Skeleton layout="chart" columns={8} />
```
