---
title: Skeleton
description: Use to show a placeholder while content is loading.
---

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

templ SkeletonDemo() {
	<div class="flex items-center gap-4">
		@skeleton.Skeleton(skeleton.Props{Class: "h-12 w-12 rounded-full"})
		<div class="space-y-2">
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-[250px]"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-[200px]"})
		</div>
	</div>
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add skeleton
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

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

<ComponentSource name="skeleton" title="components/skeleton/skeleton.templ" />

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

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/skeleton"
```

```templ showLineNumbers
@skeleton.Skeleton(skeleton.Props{Class: "h-[20px] w-[100px] rounded-full"})
```

## Avatar

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

templ SkeletonAvatar() {
	<div class="flex w-fit items-center gap-4">
		@skeleton.Skeleton(skeleton.Props{Class: "size-10 shrink-0 rounded-full"})
		<div class="grid gap-2">
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-[150px]"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-[100px]"})
		</div>
	</div>
}
```

## Card

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/skeleton"
)

templ SkeletonCard() {
	@card.Card(card.Props{Class: "w-full max-w-xs"}) {
		@card.Header() {
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-2/3"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-1/2"})
		}
		@card.Content() {
			@skeleton.Skeleton(skeleton.Props{Class: "aspect-video w-full"})
		}
	}
}
```

## Text

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

templ SkeletonText() {
	<div class="flex w-full max-w-xs flex-col gap-2">
		@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-full"})
		@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-full"})
		@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-3/4"})
	</div>
}
```

## Form

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

templ SkeletonForm() {
	<div class="flex w-full max-w-xs flex-col gap-7">
		<div class="flex flex-col gap-3">
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-20"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-8 w-full"})
		</div>
		<div class="flex flex-col gap-3">
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-24"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-8 w-full"})
		</div>
		@skeleton.Skeleton(skeleton.Props{Class: "h-8 w-24"})
	</div>
}
```

## Table

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

templ SkeletonTable() {
	<div class="flex w-full max-w-sm flex-col gap-2">
		for range 5 {
			<div class="flex gap-4">
				@skeleton.Skeleton(skeleton.Props{Class: "h-4 flex-1"})
				@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-24"})
				@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-20"})
			</div>
		}
	</div>
}
```

## API Reference

### Skeleton

The `Skeleton` component renders an animated placeholder block.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |