Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Bottom Center Position
Toast notification centered at bottom of viewport for balanced visibility without corner bias favoring neither side
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Corners feel sided—left or right—but some messages belong to everyone. This React toast uses Sonner's position option set to bottom-center to display notifications at the bottom-center of the viewport. Built with shadcn/ui Button and position property, centered bottom positioning creates symmetrical placement that feels neutral and app-wide rather than contextual to screen edges—perfect for success confirmations, form submissions, save notifications, neutral system messages, or any feedback where centered emphasis balances importance without the critical urgency of top-center or the peripheral feel of corner positions.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Bottom Right Position
Default bottom-right positioning
Bottom Left Position
Bottom-left corner placement
Top Center Position
Critical centered top positioning
Standard Toast
Basic toast notification
Success Toast
Success notification variant
Success Alert
Persistent success alert component
Questions you might have
React Sonner - Bottom Left Position
Toast notification positioned at bottom-left corner for background updates staying out of primary interaction zones
React Sonner - Bottom Right Position
Toast notification positioned at bottom-right corner as default conventional placement for action feedback and routine notifications