Drawer
Opens a modal panel from a logical viewport side using the scoped overlay stack.@gemologic/sheen · overlaysPlayground
<Drawer title="Filters" trigger="Open filters" side="end"><Input label="Query" /></Drawer>Variant matrix
End-side drawer
side: start
side: end
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Drawer.tsx- Tokens
--sheen-color-bg-raised--sheen-color-bg-overlay--sheen-elevation-modal--sheen-duration-slow
Accessibility
Role: dialogKeyboard: Tab, Shift+Tab, EscapeDo
- Use logical start/end sides so the panel follows document direction.
Do not
- Do not mount a second portal or focus trap around Drawer.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
side | DrawerSide | end | Logical viewport edge from which the panel enters. |
title * | string | — | Accessible panel title. |
contentId | string | — | Optional stable content element ID. |
trigger | string | — | Visible label for the opening button. |
description | string | — | Optional explanatory text associated with the panel. |
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled initial open state. |
onOpenChange | (open: boolean) => void | — | Requests an open-state change. |
dismissible | boolean | true | Allows Escape, outside press, and the close action. |
closeLabel | string | — | Visible and accessible close label. |
initialFocus | () => HTMLElement | undefined | — | Resolves an enabled focus target inside the panel. |
returnFocus | () => HTMLElement | undefined | — | Resolves a surviving focus target after close. |
shortcutScope | string | — | Unique modal shortcut scope ID. |
class | string | — | Additional classes on panel content. |
footer | JSX.Element | — | App-owned footer actions beside close. |