Empty

No messages

Your inbox is empty. New messages will appear here.

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <HugeIcon icon={InboxIcon} />
    </EmptyMedia>
    <EmptyTitle>No messages</EmptyTitle>
    <EmptyDescription>
      Your inbox is empty. New messages will appear here.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">Compose message</Button>
  </EmptyContent>
</Empty>

Installation

npx bearnie add empty

Usage

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

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

Examples

With icon

No projects

Get started by creating your first project.

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <HugeIcon icon={FolderOpenIcon} />
    </EmptyMedia>
    <EmptyTitle>No projects</EmptyTitle>
    <EmptyDescription>
      Get started by creating your first project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">
      <HugeIcon icon={PlusSignIcon} />
      New project
    </Button>
  </EmptyContent>
</Empty>

With avatar

User offline

This UserIcon is currently offline.

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <Avatar class="size-12">
        <AvatarImage src="/images/avatars/mike.png" alt="User" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
    </EmptyMedia>
    <EmptyTitle>User offline</EmptyTitle>
    <EmptyDescription>
      This UserIcon is currently offline.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">Send message</Button>
  </EmptyContent>
</Empty>

Multiple actions

No files

Upload files to get started.

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <HugeIcon icon={Upload01Icon} />
    </EmptyMedia>
    <EmptyTitle>No files</EmptyTitle>
    <EmptyDescription>
      Upload files to get started.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">Upload</Button>
    <Button size="sm" variant="outline">Import</Button>
  </EmptyContent>
</Empty>

Minimal

No team members

Invite your team to collaborate.

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <HugeIcon icon={UserMultiple02Icon} />
    </EmptyMedia>
    <EmptyTitle>No team members</EmptyTitle>
    <EmptyDescription>
      Invite your team to collaborate.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

Anatomy

Empty - Main container with centered flex layout
EmptyHeader - Groups the media, title, and description
EmptyMedia - Wrapper for icon, avatar, or image
EmptyTitle - Heading text
EmptyDescription - Supporting description text
EmptyContent - Action area for buttons or inputs

Props

Prop	Type	Default	Description
class	string	-	Additional CSS classes

EmptyMedia

Prop	Type	Default	Description
variant	”default” \| “icon"	"default”	Use “icon” for circular background styling
class	string	-	Additional CSS classes

EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent

Prop	Type	Default	Description
class	string	-	Additional CSS classes