<p>React Skeleton is a placeholder to display instead of the actual content.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { Skeleton } <span class="hljs-keyword">from</span> <span class="hljs-string">'primereact/skeleton'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>Skeleton displays a rectangle in its simplest form.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Skeleton</span> /&gt;</span>
</code></pre>
<h3 id="circle">Circle</h3>
<p>The other option is the circle by setting <strong>shape</strong> property as "circle".</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Skeleton</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"circle"</span> /&gt;</span>
</code></pre>
<h3 id="size">Size</h3>
<p>In order to customize the size, use <strong>width</strong> and <strong>height</strong> properties for rectangles and <strong>size</strong> for Circle and Square shapes.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Skeleton</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"100%"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"2rem"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Skeleton</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"circle"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"50px"</span> /&gt;</span>
</code></pre>
<h3 id="border-radius">Border Radius</h3>
<p>The default border radius of a rectangle is specified by the theme and can be overriden using the <strong>borderRadius</strong> property.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Skeleton</span> <span class="hljs-attr">borderRadius</span>=<span class="hljs-string">"16px"</span> /&gt;</span>
</code></pre>
<h3 id="animation">Animation</h3>
<p>Animation can be turned of by setting <strong>animation</strong> to "none".</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Skeleton</span> <span class="hljs-attr">animation</span>=<span class="hljs-string">"none"</span> /&gt;</span>
</code></pre>
<h3 id="theming">Theming</h3>
<p>Skeleton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primereact/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/skeleton">Skeleton</a> showcase for demos and documentation.</p>


React Skeleton is a placeholder to display instead of the actual content.

### Setup

Refer to PrimeReact [setup documentation](https://primefaces.org/primereact/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import { Skeleton } from 'primereact/skeleton';
``` 

### Getting Started

Skeleton displays a rectangle in its simplest form.

```html
<Skeleton />
```

### Circle

The other option is the circle by setting **shape** property as "circle".

```html
<Skeleton shape="circle" />
```

### Size

In order to customize the size, use **width** and **height** properties for rectangles and **size** for Circle and Square shapes.

```html
<Skeleton width="100%" height="2rem" />
<Skeleton shape="circle" size="50px" />
```

### Border Radius

The default border radius of a rectangle is specified by the theme and can be overriden using the **borderRadius** property.

```html
<Skeleton borderRadius="16px" />
```

### Animation

Animation can be turned of by setting **animation** to "none".

```html
<Skeleton animation="none" />
```

### Theming

Skeleton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primereact/showcase/#/theming) tool.

### Resources

Visit the PrimeReact [Skeleton](https://primefaces.org/primereact/showcase/#/skeleton) showcase for demos and documentation.
