Shadcn.io is not affiliated with official shadcn/ui
Notification Empty State
An empty notifications state block for React and Next.js with caught-up message, muted illustration area, settings link, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Display a polished empty state when users have no notifications with this block for React and Next.js. Features a centered InboxIcon in a muted illustration area, a friendly all-caught-up heading, a brief description, and a Button linking to notification settings. Built with TypeScript, shadcn/ui Button component, Balancer for balanced text, Framer Motion staggered entrance animations, and Tailwind CSS. Perfect for SaaS dashboards, notification centers, and inbox-zero celebration moments.
Related Components
Mark All Read
Bulk mark-as-read action for inbox zero
Inbox Panel
Full notification inbox with tab filtering
Loading Skeleton
Notification list loading skeleton
Preference Panel
Notification preference settings
CTA Blocks
Call-to-action blocks
Hero Blocks
Landing page hero sections
FAQ
Was this page helpful?
Sign in to leave feedback.
Email Preview
An email notification preview block for React and Next.js with unread indicators, sender info, subject lines, message snippets, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Error Log
An error log notification block for React and Next.js with severity indicators, error count badge, monospace stack traces, expandable error details, and view logs CTA built with shadcn/ui and Tailwind CSS