Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Empty - No Messages
A React no messages empty state with MessageSquare icon and New Message action button to start conversations
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Empty inboxes need invitation—messaging without action feels incomplete. This React empty state uses shadcn/ui Empty component with MessageSquare icon from Lucide React featuring No messages yet title, conversation starter description, and New Message Button with Plus icon. Built with EmptyContent containing primary action. The no messages pattern encourages engagement—perfect for messaging apps, chat interfaces, DM inboxes, or anywhere conversation starts from empty enabling first contact.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
No Notifications
Positive empty notifications state
Single Action
Empty state with one action
No Files
Empty files with multiple actions
Button Component
New message button
Dialog Component
Compose message modal
Input Component
Message composer