Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Bottom Right Position
Toast notification positioned at bottom-right corner as default conventional placement for action feedback and routine notifications
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Bottom-right is the toast default for a reason—familiar, unobtrusive, and exactly where users expect feedback. This React toast uses Sonner's position option set to bottom-right (or omits position to use default) to display notifications in the lower-right corner. Built with shadcn/ui Button and position property, bottom-right positioning follows web convention established by decades of notification patterns—perfect for action confirmations, save success messages, copy feedback, form submissions, background updates, or any standard notification where familiar conventional placement provides comfortable predictable user experience without surprising users with unexpected positions.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Bottom Center Position
Centered bottom positioning
Bottom Left Position
Bottom-left corner placement
Top Right Position
Top-right corner placement
Standard Toast
Basic toast notification
Success Toast
Success notification variant
Toast with Description
Toast with contextual details
Questions you might have
React Sonner - Bottom Center Position
Toast notification centered at bottom of viewport for balanced visibility without corner bias favoring neither side
React Sonner - Basic Promise Toast
A Sonner promise toast that automatically transitions from loading to success or error based on promise resolution