---
title: "Skeleton"
description: "A placeholder to show while content is loading."
canonical_url: "https://vinicunca.dev/pohon/components/skeleton"
---
# Skeleton

> A placeholder to show while content is loading.

## Usage

Use the Skeleton component as-is to display a placeholder.

```vue [SkeletonExample.vue]
<template>
  <div class="flex gap-4 items-center">
    <PSkeleton class="rounded-full size-12" />

    <div class="gap-2 grid">
      <PSkeleton class="h-4 w-[250px]" />
      <PSkeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the Skeleton component
 */
interface SkeletonProps {
  /**
   * The element or component this component should render as.
   * @default 'div'
   */
  as?: any;
  class?: any;
  ui?: { base?: any; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Skeleton component
 */
interface SkeletonSlots {
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    skeleton: {
      base: 'animate-pulse rounded-md bg-background-elevated'
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/vinicunca/pohon/commits/main/src/runtime/components/Skeleton.vue) and [theme](https://github.com/vinicunca/pohon/commits/main/src/theme/skeleton.ts).

---

- [GitHub](https://github.com/vinicunca/pohon/blob/main/src/runtime/components/Skeleton.vue)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.