> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Skeleton

> Skeleton.vue Component Documentation

The `Skeleton.vue` component is a reusable Vue.js component designed as a placeholder for loading content. It displays a large div with a sliding linear gradient effect, simulating the appearance of loading.

***

## Features

<CardGroup cols={2}>
  <Card title="Placeholder for Content" icon="square-1">
    Serves as a visual placeholder while content is being loaded.
  </Card>

  <Card title="Sliding Gradient Effect" icon="square-2">
    Features a linear gradient animation to indicate loading activity.
  </Card>

  <Card title="Customizable Height" icon="square-3">
    Adjust the height using CSS classes for flexible styling.
  </Card>

  <Card title="Full-Width Design" icon="square-4">
    The width is always set to 100% for responsive design.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { Skeleton } from '@robojuice/velure-ui';
```

```vue theme={null}
<Skeleton class="h-52" />
```

***

## Props

This component does not accept any props. Customization is achieved using CSS classes.

***

## Example Use Cases

### Placeholder for Content Loading

Use the `Skeleton` component as a placeholder for content that is being fetched from an API or server:

```vue theme={null}
<Skeleton class="h-64" />
```

***

## Notes

* **Height Customization**: The height of the skeleton is controlled using CSS classes. For example, use `class="h-52"` to set a height of 52 units.
* **Full-Width Design**: The skeleton's width is always 100%, making it suitable for content placeholders of any size.
* **Loading Effect**: The sliding linear gradient effect visually indicates that the content is still loading.

For further customization, refer to the component's source code.