# Skeleton

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex items-center gap-4"> <Skeleton class="h-12 w-12 rounded-full" /> <div class="space-y-2"> <Skeleton class="h-4 w-[250px]" /> <Skeleton class="h-4 w-[200px]" /> </div> </div>
</div>

```astro
---
---

<div class="flex items-center gap-4">
  <Skeleton class="h-12 w-12 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-[250px]" />
    <Skeleton class="h-4 w-[200px]" />
  </div>
</div>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add skeleton
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add skeleton
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add skeleton
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add skeleton
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro
---
---

<Skeleton class="h-4 w-[250px]" />
```

## Examples

### Avatar

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex w-fit items-center gap-4"> <Skeleton class="size-10 shrink-0 rounded-full" /> <div class="grid gap-2"> <Skeleton class="h-4 w-[150px]" /> <Skeleton class="h-4 w-[100px]" /> </div> </div>
</div>

```astro
---
---

<div class="flex w-fit items-center gap-4">
  <Skeleton class="size-10 shrink-0 rounded-full" />
  <div class="grid gap-2">
    <Skeleton class="h-4 w-[150px]" />
    <Skeleton class="h-4 w-[100px]" />
  </div>
</div>
```

### Card

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Card class="w-full max-w-xs"> <CardHeader> <Skeleton class="h-4 w-2/3" /> <Skeleton class="h-4 w-1/2" /> </CardHeader> <CardContent> <Skeleton class="aspect-video w-full" /> </CardContent> </Card>
</div>

```astro
---
---

<Card class="w-full max-w-xs">
  <CardHeader>
    <Skeleton class="h-4 w-2/3" />
    <Skeleton class="h-4 w-1/2" />
  </CardHeader>
  <CardContent>
    <Skeleton class="aspect-video w-full" />
  </CardContent>
</Card>
```

### Text

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex w-full max-w-xs flex-col gap-2"> <Skeleton class="h-4 w-full" /> <Skeleton class="h-4 w-full" /> <Skeleton class="h-4 w-3/4" /> </div>
</div>

```astro
---
---

<div class="flex w-full max-w-xs flex-col gap-2">
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-3/4" />
</div>
```

### Form

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex w-full max-w-xs flex-col gap-7"> <div class="flex flex-col gap-3"> <Skeleton class="h-4 w-20" /> <Skeleton class="h-8 w-full" /> </div> <div class="flex flex-col gap-3"> <Skeleton class="h-4 w-24" /> <Skeleton class="h-8 w-full" /> </div> <Skeleton class="h-8 w-24" /> </div>
</div>

```astro
---
---

<div class="flex w-full max-w-xs flex-col gap-7">
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-20" />
    <Skeleton class="h-8 w-full" />
  </div>
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-8 w-full" />
  </div>
  <Skeleton class="h-8 w-24" />
</div>
```

### Table

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex w-full max-w-sm flex-col gap-2"> <div class="flex gap-4"> <Skeleton class="h-4 flex-1" /> <Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-20" /> </div> <div class="flex gap-4"> <Skeleton class="h-4 flex-1" /> <Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-20" /> </div> <div class="flex gap-4"> <Skeleton class="h-4 flex-1" /> <Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-20" /> </div> <div class="flex gap-4"> <Skeleton class="h-4 flex-1" /> <Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-20" /> </div> <div class="flex gap-4"> <Skeleton class="h-4 flex-1" /> <Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-20" /> </div> </div>
</div>

```astro
---
---

<div class="flex w-full max-w-sm flex-col gap-2">
  <div class="flex gap-4">
    <Skeleton class="h-4 flex-1" />
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-4 w-20" />
  </div>
  <div class="flex gap-4">
    <Skeleton class="h-4 flex-1" />
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-4 w-20" />
  </div>
  <div class="flex gap-4">
    <Skeleton class="h-4 flex-1" />
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-4 w-20" />
  </div>
  <div class="flex gap-4">
    <Skeleton class="h-4 flex-1" />
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-4 w-20" />
  </div>
  <div class="flex gap-4">
    <Skeleton class="h-4 flex-1" />
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-4 w-20" />
  </div>
</div>
```