Empty

A placeholder for empty states. Combines an icon, title, description, and optional action to guide users when no content is available.

Default Empty State

No messages yet

When you receive messages, they will appear here.

<Empty>
  <EmptyIcon>
    <Inbox className="h-10 w-10" />
  </EmptyIcon>
  <EmptyTitle>No messages yet</EmptyTitle>
  <EmptyDescription>
    When you receive messages, they will appear here.
  </EmptyDescription>
  <EmptyAction>
    <Button>Compose Message</Button>
  </EmptyAction>
</Empty>

API Reference

Prop	Type	Default	Description
`EmptyIcon`	`React.ReactNode`	—	Container for the icon displayed above the title. Pass any Lucide icon as a child.
`EmptyTitle`	`React.ReactNode`	—	The heading text for the empty state.
`EmptyDescription`	`React.ReactNode`	—	A supporting description displayed below the title.
`EmptyAction`	`React.ReactNode`	—	Container for the call-to-action, typically a Button.