Shadcn.io is not affiliated with official shadcn/ui
Notification Do Not Disturb
A Do Not Disturb mode block for React and Next.js with DND toggle, schedule presets for 1 hour and until tomorrow, allowed exceptions list, and active status badge built with shadcn/ui and Tailwind CSS
Control interruptions with this Do Not Disturb mode block for React and Next.js. Features a DND master toggle with Moon icon, quick schedule presets for 1 hour, until tomorrow, and custom duration, an allowed exceptions list for urgent contacts, and an active status Badge. Built with TypeScript, shadcn/ui Switch, Button, and Badge components, Framer Motion staggered animations, and Tailwind CSS. Perfect for SaaS focus mode settings, messaging app quiet hours, and team collaboration DND preferences.
Related Components
Sound Toggle
Notification sound settings panel
Notification Preferences
Category-based notification settings
Notification Snooze
Snooze notifications with time options
System Alert
System-wide alert notification
Account Blocks
User account and settings blocks
Dashboard Blocks
Dashboard components
FAQ
Was this page helpful?
Sign in to leave feedback.
Discount Offer
A discount offer notification block for React and Next.js with tag icon, promo code display with copy button, expiry countdown, limited time badge, and claim offer CTA built with shadcn/ui and Tailwind CSS
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