Shadcn.io is not affiliated with official shadcn/ui
Top Left Position
Toast notification positioned at top-left corner for notifications that shouldn't obscure primary content area
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.
Top Left Position preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.