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.
Learn More

Installation

npx @gnetleduck/cli add empty
npx @gnetleduck/cli add empty

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
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>
<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.

Cloud Storage Empty
Upload files to your cloud storage to access them anywhere.

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.

Avatar

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

a profile picture for wildduck2
User Offline
This user is currently offline. You can leave a message to notify them or try again later.

Avatar Group

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

a profile picture for wildduck2a profile picture for wildduck2a profile picture for wildduck2
No Team Members
Invite your team to collaborate on this project.

InputGroup

You can add an InputGroup component to the EmptyContent component.

404 - Not Found
The page you're looking for doesn't exist. Try searching for what you need below.
/
Need help? Contact support

API Reference

Empty

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

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

EmptyHeader

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

<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>
<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.

  • variant: The variant of the empty media. Use "icon" for an icon or "image" for an image.
<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>
<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>
<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>
<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

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

<EmptyTitle>No data</EmptyTitle>
<EmptyTitle>No data</EmptyTitle>

EmptyDescription

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

<EmptyDescription>You do not have any notifications.</EmptyDescription>
<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.

<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>
<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>
Dropdown MenuField