Empty

No messages

Your inbox is empty. New messages will appear here.

<Empty>
<EmptyHeader>
  <EmptyMedia variant="icon">
    <Inbox />
  </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

import Empty from "@/components/ui/empty/Empty.astro";
import EmptyHeader from "@/components/ui/empty/EmptyHeader.astro";
import EmptyMedia from "@/components/ui/empty/EmptyMedia.astro";
import EmptyTitle from "@/components/ui/empty/EmptyTitle.astro";
import EmptyDescription from "@/components/ui/empty/EmptyDescription.astro";
import EmptyContent from "@/components/ui/empty/EmptyContent.astro";

Usage

import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/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">
    <FolderOpen />
  </EmptyMedia>
  <EmptyTitle>No projects</EmptyTitle>
  <EmptyDescription>
    Get started by creating your first project.
  </EmptyDescription>
</EmptyHeader>
<EmptyContent>
  <Button size="sm">
    <Plus />
    New project
  </Button>
</EmptyContent>
</Empty>

With avatar

User offline

This user 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 user 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">
    <Upload />
  </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">
    <Users />
  </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