Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Top Left Position
Toast notification positioned at top-left corner for notifications that shouldn't obscure primary content area
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Bottom-right is conventional until it blocks your button—try top-left instead. This React toast uses Sonner's position option set to top-left to display notifications in the upper-left corner. Built with shadcn/ui Button and position property, top-left positioning keeps toasts away from main content areas and action buttons typically positioned at bottom-right—perfect for non-urgent notifications, background updates, supplementary information, design tool alerts, or any interface where bottom-right positioning would obscure critical interactive elements or compete with primary user focus in the lower viewport.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Bottom Right Position
Default bottom-right toast placement
Top Center Position
Centered top toast positioning
Top Right Position
Top-right corner toast placement
Standard Toast
Basic toast with default positioning
Info Alert
Persistent alert component
Toast with Description
Toast with title and description
Questions you might have
React Sonner - Non-Dismissible Toast
A Sonner toast that cannot be dismissed by clicking the X button, requiring users to wait for auto-dismiss or interact with action buttons
React Sonner - Top Center Position
Toast notification centered at top of viewport for high-visibility urgent alerts demanding immediate attention