Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Simple Top Drawer
A React drawer sliding down from the top with header, description, body content, and footer buttons built with shadcn/ui for notifications and quick actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Top of screen is prime real estate—use it wisely. This React drawer slides down from the top, perfect for search bars, notifications, and quick action panels. Built with shadcn/ui and Radix UI with Vaul animations—ideal for mobile-first designs, command palettes, or alerts that need immediate attention without blocking main content.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Bottom Drawer
Drawer sliding from the bottom
Simple Right Drawer
Drawer sliding from the right
Top Drawer Search Bar
Search interface with recent searches
Top Drawer Notification Banner
Announcement banner from top
Standard Dialog
Center modal alternative
Top Popover
Alternative top-anchored panel
Questions you might have
React Right Drawer Notifications
A React right drawer notifications panel with unread count badge, scrollable notification list with timestamps, and mark all as read action for activity feeds
React Top Drawer Search Bar
A React top drawer search interface with search input, recent searches section, and quick access links for file management and content discovery