Empty

Use the Empty component to display an empty state.

No Projects Yet

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

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

Installation

pnpm dlx cubix@latest add empty --base aria

Usage

Import

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

Example

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

Composition

Use the following composition to build an Empty state:

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

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.

<Empty className="border border-dashed">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <CloudIcon />
    </EmptyMedia>
    <EmptyTitle>Cloud Storage Empty</EmptyTitle>
    <EmptyDescription>
      Upload files to your cloud storage to access them anywhere.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline" size="sm">Upload Files</Button>
  </EmptyContent>
</Empty>

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.

<Empty className="from-muted/50 h-full bg-gradient-to-b from-30% to-background">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <BellIcon />
    </EmptyMedia>
    <EmptyTitle>No Notifications</EmptyTitle>
    <EmptyDescription>
      You're all caught up. New notifications will appear here.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline" size="sm">
      <RefreshCcwIcon />
      Refresh
    </Button>
  </EmptyContent>
</Empty>

Avatar

Use the EmptyMedia 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.

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <Avatar className="size-12">
        <AvatarImage src="..." />
        <AvatarFallback>LR</AvatarFallback>
      </Avatar>
    </EmptyMedia>
    <EmptyTitle>User Offline</EmptyTitle>
    <EmptyDescription>
      This user is currently offline.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">Leave Message</Button>
  </EmptyContent>
</Empty>

Avatar Group

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

VRLRER

No Team Members

Invite your team to collaborate on this project.

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <div className="flex -space-x-2">
        <Avatar>...</Avatar>
        <Avatar>...</Avatar>
        <Avatar>...</Avatar>
      </div>
    </EmptyMedia>
    <EmptyTitle>No Team Members</EmptyTitle>
    <EmptyDescription>
      Invite your team to collaborate on this project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">
      <PlusIcon />
      Invite Members
    </Button>
  </EmptyContent>
</Empty>

Input Group

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

<Empty>
  <EmptyHeader>
    <EmptyTitle>404 - Not Found</EmptyTitle>
    <EmptyDescription>
      The page you're looking for doesn't exist.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <InputGroup className="sm:w-3/4">
      <InputGroupInput placeholder="Try searching for pages..." />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
    </InputGroup>
  </EmptyContent>
</Empty>

API Reference

Empty

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

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

EmptyHeader

Wraps the empty media, title, and description.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

EmptyMedia

Display media such as an icon, image, or avatar.

Prop	Type	Default	Description
variant	"default" \| "icon"	"default"	Visual style for the media. Use icon for a muted rounded icon container.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

EmptyTitle

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

EmptyDescription

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

EmptyContent

Display actions such as a button, input, or link.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).