---
title: Skeleton
description: A placeholder shape shown while content is loading.
---

## Preview

<ComponentPreview name="p-skeleton-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx @olyx/cli@latest add skeleton
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="skeleton" title="components/ui/skeleton.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { Skeleton } from "@/components/ui/skeleton"
```

```tsx
<Skeleton style={{ width: 160, height: 16 }} />
```

## API Reference

This is a custom component, not a Base UI wrapper.

### Skeleton

A simple div with animated pulse effect for loading states. Apply sizing via inline styles or className.

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `rounded` | `boolean` | `false` |

## Examples

### Lines Only

<ComponentPreview name="p-skeleton-2" />