---
title: Skeleton
description: A loading state skeleton for your components.
---

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

## Installation

<CodeTabs>

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

```bash
npx shadcn@latest add @coss/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 className="size-10 rounded-full" />
```

## 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 and shape via className.

## Examples

### Skeleton Only

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