Shadcn.io is not affiliated with official shadcn/ui
Empty State No Messages
An empty inbox state with ghost conversation previews, unread counter, compose CTA, and keyboard shortcut hint using shadcn/ui and Tailwind CSS
Display a polished empty inbox state when users have no messages. Features ghost conversation row previews showing what the populated inbox will look like, a header with unread counter, and a compose button with keyboard shortcut hint. Built with TypeScript, shadcn/ui Button and Badge, motion/react staggered animations, and Tailwind CSS. Ideal for messaging apps, email clients, and internal communication dashboards.
Related Components
Empty State No Channels
No channels joined state
Empty State No Threads
No discussion threads state
Empty State No Announcements
No announcements posted state
Empty State No Mentions
No mentions received state
Empty State No Notifications
No notifications state
Empty State No Chat History
No chat history state
FAQ
Was this page helpful?
Sign in to leave feedback.
No Mentions
An empty mentions state with an at-sign icon, explanation of how mentions work, and a learn more CTA using shadcn/ui and Tailwind CSS
No Metrics
React empty state block for KPI metrics with placeholder values and configuration CTA, built with Next.js, shadcn/ui, Tailwind CSS, and motion animations