Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Top-Sliding Sheet
A top-sliding sheet with side equals top prop for notifications, alerts, and announcements sliding from top edge
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Left-Sided Sheet
A left-side sheet sliding from left edge with SheetHeader, commonly used for mobile navigation menus and hamburger patterns
React Skeleton - Simple Card with Image and Text
A simple skeleton card with rectangular image placeholder and two text line skeletons for loading content previews