Drawervs.Sheet

Drawer and sheet describe the same UX pattern in conversation — a panel that slides in from a screen edge over a dimmed backdrop. In design systems they often ship as two separate patterns with different defaults and interaction details. Picking one is less about how it looks and more about which device you're designing for and how people should dismiss it.

Key differences

	Drawer	Sheet
Where it usually slides from	Bottom of the screen	Right side of the screen
Best on	Phones and tablets	Desktop and larger screens
How you close it	Swipe down, drag handle, or tap outside	Close button or tap outside
Typical use	Action menus, pickers, short forms	Detail panels, settings, navigation
Also called	Sheet, bottom sheet, slide-over panel	Drawer, side sheet, off-canvas panel

Common use cases for Drawer

A mobile-native panel with thumb-friendly dismiss:

Bottom-anchored forms — edit profile, adjust settings, pick options on small screens
Action menus and pickers — short choice lists where swipe-down close feels natural
Filters and sorting — facet controls that slide up over a list or catalog
Drag-to-dismiss flows — panels with a handle that users pull closed

Common use cases for Sheet

A side panel beside the page on larger screens:

Settings and configuration — edit preferences or account options without leaving the view
Detail panels — item metadata, order summary, or record details next to a list
Short forms — add an entry, invite a teammate, or update a single record
Secondary navigation — menu, cart, or notification list that slides in from the side

Edit on GitHub