Empty State

Data Display

Feedback

Placeholder content for empty lists, search results, and data views. Guides users with helpful messages and actions.

Preview

Standard empty state with icon, title, description, and action

No messages yet

When you receive messages, they will appear here. Start a conversation to get going.

Variants

Different empty state use cases

No results found

Try adjusting your search or filter to find what you are looking for.

No files uploaded

Upload files to get started with your project.

Props

Empty State component API reference

Prop	Type	Default	Description
`icon`	`React.ReactNode`	—	Icon to display above the title
`title*`	`string`	—	Empty state heading
`description`	`string`	—	Supporting description text
`action`	`React.ReactNode`	—	Action button or link
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { EmptyState } from '@/components/ui/empty-state'
import { Inbox, Plus } from 'lucide-react'
import { Button } from '@/components/ui/button'

<EmptyState
  icon={<Inbox className="w-6 h-6" />}
  title="No messages yet"
  description="When you receive messages, they will appear here."
  action={
    <Button variant="primary" leftIcon={<Plus className="w-4 h-4" />}>
      New Message
    </Button>
  }
/>

Features

Built-in functionality

Composable: Mix and match icon, title, description, and actions
Icon badges: Gradient background icon containers
Action support: Optional CTA buttons to guide next steps
Responsive: Adapts to container width
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

role="status" for dynamic empty statesDescriptive heading hierarchy

Keyboard Navigation

Key	Action
`Tab`	Focus action button if present
`Enter / Space`	Activate action button

Notes

Icon is decorative (aria-hidden)
Message provides context for why content is empty
Action button gives clear next step

Related Components

Skeleton Spinner Card Alert