Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Top Right Position
Toast notification positioned at top-right corner for important updates balancing visibility with non-intrusion
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Top-right is the Goldilocks position—visible but not blocking, urgent but not annoying. This React toast uses Sonner's position option set to top-right to display notifications in the upper-right corner. Built with shadcn/ui Button and position property, top-right positioning provides high visibility near common UI controls like user menus while staying peripheral—perfect for important but non-critical notifications, user-triggered feedback, settings confirmations, upload completions, real-time updates, or any message that deserves attention without demanding center-stage interruption of user workflow.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Bottom Right Position
Default bottom-right positioning
Top Center Position
Critical centered top positioning
Top Left Position
Top-left corner placement
Standard Toast
Basic toast notification
Toast with Description
Toast with contextual details
Info Alert
Persistent info alert component