# Skeleton

> Placeholder bones — a block, one or more text lines, or a circular avatar — with a phase-synced shimmer sweep or opacity pulse, that swaps to real content once loading finishes while keeping aria-busy semantics correct throughout.

- Package: `fancy-ui-react` (React 18/19 + Tailwind CSS v4)
- Category: Feedback
- Tags: skeleton, loading, placeholder, shimmer, pulse, micro-interaction
- Types: `SkeletonProps`
- Docs: https://fancy-ui.rama.app/docs/components/skeleton
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/react/src/components/skeleton

## Import

```tsx
import { Skeleton } from 'fancy-ui-react';
```

Setup (once per project): `npm install fancy-ui-react`, then put these lines in your main CSS file (the stylesheet import goes right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-react/tailwind.css";
```

and import the component styles once in the app entry: `import "fancy-ui-react/styles.css";`. Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in React; when one differs from the Svelte name, the Svelte name follows in parentheses. `class` becomes `className`, a callback takes the name the React port declares (`onclick` becomes `onClick`), snippets become `ReactNode` props (render functions when they take arguments) and the default snippet is `children`. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/react#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"rect" \| "text" \| "circle"` | `"rect"` | Bone shape: a block, one or more text lines, or a circular avatar |
| `lines` | `number` | `1` | Number of text lines to render; only read when variant is "text". The last line renders at 60% width so a paragraph placeholder doesn't read as a perfect rectangle |
| `animation` | `"shimmer" \| "pulse" \| "none"` | `"shimmer"` | Shimmer sweep, opacity pulse, or a static muted bone (still a valid loading cue on its own) |
| `loading` | `boolean` | `true` | Whether the placeholder is currently showing. In wrapping mode (children supplied) drives the swap to real content; in standalone mode drives whether anything renders at all |
| `label` | `string` | `"Loading"` | The one screen-reader announcement. Pass "" to silence it entirely |
| `className` (Svelte `class`) | `string` | — | Additional CSS classes; also the sizing hook, since rect/text bones have no intrinsic size |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable reference to the root element; null whenever nothing is rendered |

## Node props

| Prop | Description |
| --- | --- |
| `children` | Real content to reveal once loading is false. Its mere presence (not its value) switches Skeleton from standalone to wrapping mode |

## Example

No React example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/skeleton.md.