xAIcreator | AI content marketing agent for X

Empty State

Display friendly messages when content is unavailable or empty

Basic Usage

Simple Empty State

Icon, title, and description

Props:

{ icon: "Inbox", title: "No messages", description: "Your inbox is empty" }

No messages

Your inbox is empty. New messages will appear here.

With Action Button

Empty State with Action

Includes a call-to-action button

Props:

{ icon: "FileText", title: "No documents", description: "Get started by creating...", action: "<DesignButton>" }

No documents yet

Get started by creating your first document

Size Variants

Large Size

Suitable for full-page empty states

Props:

{ size: "large", icon: "Search", title: "No results found" }

No results found

Try adjusting your search or filter to find what you're looking for

Common Use Cases

Your cart is empty

Add items to get started

No team members

Invite people to collaborate

No events scheduled

Your calendar is clear

No bookmarks

Save items for later

Without Icon

Text Only

Empty state without icon

Props:

{ title: "No items", description: "Description text" }

No notifications

You're all caught up! Check back later for updates.

Usage Guidelines

•Use clear, action-oriented titles that explain what's missing
•Provide helpful descriptions that guide users on what to do next
•Include action buttons when users can create or add content
•Choose icons that represent the type of content that's missing
•Use size="large" for full-page empty states
•Keep descriptions concise and encouraging

Import and Usage:

import { DesignEmptyState } from "@/components/ui/design-empty-state"
import { DesignButton } from "@/components/ui/design-button"
import { Inbox, Plus } from "lucide-react"

// Basic usage
<DesignEmptyState
  icon={Inbox}
  title="No messages"
  description="Your inbox is empty"
/>

// With action button
<DesignEmptyState
  icon={Inbox}
  title="No messages"
  description="Start a conversation"
  action={
    <DesignButton variant="primary">
      <Plus />
      New Message
    </DesignButton>
  }
/>

// Large size for full-page
<DesignEmptyState
  size="large"
  icon={Inbox}
  title="No messages"
  description="Your inbox is empty"
/>

Props

Prop	Type	Default	Description
`icon`	LucideIcon	-	Icon component from lucide-react
`title`	string	required	Main heading text
`description`	string	-	Optional description text
`action`	ReactNode	-	Optional action button or element
`size`	"default" \| "large"	"default"	Size variant of the empty state
`className`	string	-	Additional CSS classes