Empty

Use the Empty component to display a empty state.

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

package examples import (

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

shadcn-templ add empty

Copy and paste the following code into your project.

components/empty/empty.templ

package empty import "github.com/axadrn/shadcn-templ/v2/utils" type Props struct {	ID         string	Class      string	Attributes templ.Attributes} type HeaderProps struct {	ID         string	Class      string	Attributes templ.Attributes} type MediaVariant string const (	MediaVariantDefault MediaVariant = "default"	MediaVariantIcon    MediaVariant = "icon") type MediaProps struct {	ID         string	Class      string	Attributes templ.Attributes	Variant    MediaVariant} type TitleProps struct {	ID         string	Class      string	Attributes templ.Attributes} type DescriptionProps struct {	ID         string	Class      string	Attributes templ.Attributes} type ContentProps struct {	ID         string	Class      string	Attributes templ.Attributes} func mediaClasses(variant MediaVariant) string {	base := "cn-empty-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0"	if variant == MediaVariantIcon {		return utils.CN(base, "cn-empty-media-icon")	}	return utils.CN(base, "cn-empty-media-default")} templ Empty(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="empty"		class={			utils.CN(				"cn-empty flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>} templ Header(props ...HeaderProps) {	{{ var p HeaderProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="empty-header"		class={ utils.CN("cn-empty-header flex max-w-sm flex-col items-center", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Media(props ...MediaProps) {	{{ var p MediaProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Variant == "" {		{{ p.Variant = MediaVariantDefault }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="empty-icon"		data-variant={ string(p.Variant) }		class={ utils.CN(mediaClasses(p.Variant), p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Title(props ...TitleProps) {	{{ var p TitleProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="empty-title"		class={ utils.CN("cn-empty-title cn-font-heading", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Description(props ...DescriptionProps) {	{{ var p DescriptionProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="empty-description"		class={			utils.CN(				"cn-empty-description text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>} templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="empty-content"		class={			utils.CN(				"cn-empty-content flex w-full max-w-sm min-w-0 flex-col items-center text-balance",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>}

Update the import paths to match your project setup.

Usage

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

@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:

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

Outline

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

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

package examples import (

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.

No Notifications

You're all caught up. New notifications will appear here.

package examples import (

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.

User Offline

This user is currently offline. You can leave a message to notify them or try again later.

package examples import (

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.

No Team Members

Invite your team to collaborate on this project.

package examples import (

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.

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

package examples import (

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`	-

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

EmptyHeader

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

Prop	Type	Default
`Class`	`string`	-

@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`	-

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

@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`	-

@empty.Title() {	No data}

EmptyDescription

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

Prop	Type	Default
`Class`	`string`	-

@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`	-

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

Dropdown Menu Field

On This Page

Installation Usage Composition Outline Background Avatar Avatar Group InputGroup API Reference Empty EmptyHeader EmptyMedia EmptyTitle EmptyDescription EmptyContent

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.