---
title: Empty
description: Use the Empty component to display a empty state.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/empty"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ EmptyDemo() {
	@empty.Empty() {
		@empty.Header() {
			@empty.Media(empty.MediaProps{Variant: empty.MediaVariantIcon}) {
				@icon.FolderCode()
			}
			@empty.Title() {
				No Projects Yet
			}
			@empty.Description() {
				You haven't created any projects yet. Get started by creating your first project.
			}
		}
		@empty.Content(empty.ContentProps{Class: "flex-row justify-center gap-2"}) {
			@button.Button() {
				Create Project
			}
			@button.Button(button.Props{Variant: button.VariantOutline}) {
				Import Project
			}
		}
		@button.Button(button.Props{
			Variant: button.VariantLink,
			Size:    button.SizeSm,
			Href:    "#",
			Class:   "text-muted-foreground",
		}) {
			Learn More
			@icon.ArrowUpRight()
		}
	}
}
```

## Installation

<CodeTabs>

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

```bash
shadcn-templ add empty
```

</TabsContent>

<TabsContent value="manual">

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

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

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

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

</Steps>

</TabsContent>

</CodeTabs>

## Usage

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

```templ
@empty.Empty() {
	@empty.Header() {
		@empty.Media(empty.MediaProps{Variant: empty.MediaVariantIcon}) {
			@icon.FolderOpen()
		}
		@empty.Title() {
			No data
		}
		@empty.Description() {
			No data found
		}
	}
	@empty.Content() {
		@button.Button() {
			Add data
		}
	}
}
```

## Composition

Use the following composition to build an `Empty` state:

```text
empty.Empty
├── empty.Header
│   ├── empty.Media
│   ├── empty.Title
│   └── empty.Description
└── empty.Content
```

## Outline

Use the `border` utility class to create an outline empty state.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/empty"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ EmptyOutline() {
	@empty.Empty(empty.Props{Class: "border border-dashed"}) {
		@empty.Header() {
			@empty.Media(empty.MediaProps{Variant: empty.MediaVariantIcon}) {
				@icon.Cloud()
			}
			@empty.Title() {
				Cloud Storage Empty
			}
			@empty.Description() {
				Upload files to your cloud storage to access them anywhere.
			}
		}
		@empty.Content() {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
				Size:    button.SizeSm,
			}) {
				Upload Files
			}
		}
	}
}
```

## Background

Use the `bg-*` and `bg-gradient-*` utilities to add a background to the empty state.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/empty"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ EmptyBackground() {
	@empty.Empty(empty.Props{Class: "h-full bg-muted/30"}) {
		@empty.Header() {
			@empty.Media(empty.MediaProps{Variant: empty.MediaVariantIcon}) {
				@icon.Bell()
			}
			@empty.Title() {
				No Notifications
			}
			@empty.Description(empty.DescriptionProps{Class: "max-w-xs text-pretty"}) {
				You're all caught up. New notifications will appear here.
			}
		}
		@empty.Content() {
			@button.Button(button.Props{Variant: button.VariantOutline}) {
				@icon.RefreshCcw()
				Refresh
			}
		}
	}
}
```

## Avatar

Use the `empty.Media` component to display an avatar in the empty state.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/avatar"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/empty"
)

templ EmptyAvatar() {
	@empty.Empty() {
		@empty.Header() {
			@empty.Media(empty.MediaProps{Variant: empty.MediaVariantDefault}) {
				@avatar.Avatar(avatar.Props{Class: "size-12"}) {
					@avatar.Image(avatar.ImageProps{
						Src:   "https://github.com/axadrn.png",
						Class: "grayscale",
					})
					@avatar.Fallback() {
						AA
					}
				}
			}
			@empty.Title() {
				User Offline
			}
			@empty.Description() {
				This user is currently offline. You can leave a message to notify them or try again later.
			}
		}
		@empty.Content() {
			@button.Button(button.Props{Size: button.SizeSm}) {
				Leave Message
			}
		}
	}
}
```

## Avatar Group

Use the `empty.Media` component to display an avatar group in the empty state.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/avatar"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/empty"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ EmptyAvatarGroup() {
	@empty.Empty() {
		@empty.Header() {
			@empty.Media() {
				@avatar.Group(avatar.GroupProps{Class: "*:data-[slot=avatar]:size-12 grayscale"}) {
					@avatar.Avatar() {
						@avatar.Image(avatar.ImageProps{
							Src: "https://github.com/axadrn.png",
							Alt: "@axadrn",
						})
						@avatar.Fallback() {
							AA
						}
					}
					@avatar.Avatar() {
						@avatar.Image(avatar.ImageProps{
							Src: "https://github.com/a-h.png",
							Alt: "@a-h",
						})
						@avatar.Fallback() {
							AH
						}
					}
					@avatar.Avatar() {
						@avatar.Image(avatar.ImageProps{
							Src: "https://github.com/joerdav.png",
							Alt: "@joerdav",
						})
						@avatar.Fallback() {
							JD
						}
					}
				}
			}
			@empty.Title() {
				No Team Members
			}
			@empty.Description() {
				Invite your team to collaborate on this project.
			}
		}
		@empty.Content() {
			@button.Button(button.Props{Size: button.SizeSm}) {
				@icon.Plus()
				Invite Members
			}
		}
	}
}
```

## InputGroup

You can add an `inputgroup.InputGroup` component to the `empty.Content` component.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/empty"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/inputgroup"
	"github.com/axadrn/shadcn-templ/v2/components/kbd"
)

templ EmptyInputGroup() {
	@empty.Empty() {
		@empty.Header() {
			@empty.Title() {
				404 - Not Found
			}
			@empty.Description() {
				The page you're looking for doesn't exist. Try searching for what you need below.
			}
		}
		@empty.Content() {
			@inputgroup.InputGroup(inputgroup.Props{Class: "sm:w-3/4"}) {
				@inputgroup.Input(inputgroup.InputProps{Placeholder: "Try searching for pages..."})
				@inputgroup.Addon() {
					@icon.Search()
				}
				@inputgroup.Addon(inputgroup.AddonProps{Align: inputgroup.AlignInlineEnd}) {
					@kbd.Kbd() {
						/
					}
				}
			}
			@empty.Description() {
				Need help? <a href="#">Contact support</a>
			}
		}
	}
}
```

## API Reference

### Empty

The main component of the empty state. Wraps the `empty.Header` and `empty.Content` components.

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

```templ
@empty.Empty() {
	@empty.Header()
	@empty.Content()
}
```

### EmptyHeader

The `empty.Header` component wraps the empty media, title, and description.

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

```templ
@empty.Header() {
	@empty.Media()
	@empty.Title()
	@empty.Description()
}
```

### EmptyMedia

Use the `empty.Media` component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

| Prop      | Type                                       | Default               |
| --------- | ------------------------------------------- | --------------------- |
| `Variant` | `MediaVariantDefault \| MediaVariantIcon` | `MediaVariantDefault` |
| `Class`   | `string`                                   | -                     |

```templ
@empty.Media(empty.MediaProps{Variant: empty.MediaVariantIcon}) {
	@icon.FolderCode()
}
```

```templ
@empty.Media() {
	@avatar.Avatar() {
		@avatar.Image(avatar.ImageProps{Src: "..."})
		@avatar.Fallback() {
			AA
		}
	}
}
```

### EmptyTitle

Use the `empty.Title` component to display the title of the empty state.

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

```templ
@empty.Title() {
	No data
}
```

### EmptyDescription

Use the `empty.Description` component to display the description of the empty state.

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

```templ
@empty.Description() {
	You do not have any notifications.
}
```

### EmptyContent

Use the `empty.Content` component to display the content of the empty state such as a button, input or a link.

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

```templ
@empty.Content() {
	@button.Button() {
		Add Project
	}
}
```