Empty

Use the Empty component to display a empty state.

Installation

npx @hanzo/ui@latest add empty

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
  </EmptyHeader>
  <EmptyTitle>No data</EmptyTitle>
  <EmptyDescription>No data found</EmptyDescription>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

Examples

Outline

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

Component empty-outline not found in registry.

Background

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

Component empty-background not found in registry.

Avatar

Use the EmptyMedia component to display an avatar in the empty state.

Component empty-avatar not found in registry.

Avatar Group

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

Component empty-avatar-group not found in registry.

InputGroup

You can add an InputGroup component to the EmptyContent component.

Component empty-input-group not found in registry.

API Reference

Empty

The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.

Prop	Type	Default
`className`	`string`

<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

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

Prop	Type	Default
`className`	`string`

<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

Use the EmptyMedia 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`	`"default" \| "icon"`	`default`
`className`	`string`

<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>

<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

Use the EmptyTitle component to display the title of the empty state.

Prop	Type	Default
`className`	`string`

<EmptyTitle>No data</EmptyTitle>

EmptyDescription

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

Prop	Type	Default
`className`	`string`

<EmptyDescription>You do not have any notifications.</EmptyDescription>

EmptyContent

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

Prop	Type	Default
`className`	`string`

<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>

Editor Field