# Skeleton

A placeholder for loading content.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { Skeleton } from "coss-svelte";
</script>

<div class="flex w-full max-w-md flex-col gap-8">
	{#each [0, 1, 2] as row (row)}
		<div class="flex items-center gap-4">
			<Skeleton class="size-10 shrink-0 rounded-full" />
			<div class="grid flex-1 gap-2">
				<Skeleton class="h-4 w-full" />
				<div class="flex gap-2">
					<Skeleton class="h-4 w-2/5" />
					<Skeleton class="h-4 w-2/5" />
				</div>
			</div>
			<Skeleton class="h-8 w-24 shrink-0 rounded-lg" />
		</div>
	{/each}
</div>

```

## Anatomy

- `Skeleton`

## API Reference

### Skeleton

A placeholder for loading content.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <div> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | native |
| Category | Feedback & Status |
| Particles | 2 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/skeleton.json` for the complete local file and dependency closure.
- Skeleton is stable in the current source catalog.