Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Toast with Custom Duration
Toast notification with extended 10-second duration for messages requiring more reading time or emphasis
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Four seconds is great until you need users to actually read the message. This React toast uses Sonner's duration option to keep toasts visible for 10 seconds instead of the default 4. Built with shadcn/ui Button and duration property in milliseconds, extended timing gives users time to comprehend longer messages—perfect for important announcements, multi-step instructions, error messages requiring action, critical warnings needing attention, or any notification where premature dismissal means users miss essential information.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Toast with Description
Toast with additional context text
Standard Toast
Toast with default 4-second duration
Loading Toast
Toast with indefinite loading state
Toast with Actions
Toast with action buttons to interact
Warning Alert
Persistent warning alert component
Standard Dialog
Modal for complex interactions