Shadcn.io is not affiliated with official shadcn/ui
Top-Sliding Sheet
A top-sliding sheet with side equals top prop for notifications, alerts, and announcements sliding from top edge
Top sheets grab attention—that dropdown notification feel. This React Sheet slides from top using side equals top prop with shadcn/ui Sheet and Radix UI Dialog primitives. The top-origin pattern mimics system notifications—perfect for announcements, alerts, banners, notification details, app updates, emergency messages, or any interface where top-down motion signals important information demanding immediate attention.
Top-Sliding Sheet preview
Installation
Related Components
Bottom-Sliding Sheet
Slides from bottom edge
Standard Sheet
Default right-side sheet
Left-Sided Sheet
Slides from left edge
Alert
Inline alert component
Toast
Toast notification
Dialog
Centered modal overlay
FAQ
Was this page helpful?
Sign in to leave feedback.