Drawer

Drawer

Component preview

A temporary panel that slides from a viewport edge, overlays the page, and closes when its focused task is finished.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: side drawer, slide-over, side sheet

a panel that slides in from the right
open filters over the current page
a temporary side panel with a dark backdrop
show cart details from the screen edge
a side window that closes with Escape
slide out settings without changing page

Try it

Edge-attached surfaces

Compare all three behaviors

Shared comparison scenario: A workspace places supporting navigation or controls along a screen edge while the main task stays in context.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Drawer

A Drawer is temporary and overlays content; a Sidebar stays in the layout, while a Bottom sheet is anchored to the bottom and supports mobile drag behavior.

Your task

Open the right-edge Filters, enable In stock, apply it, then reopen and press Escape to verify the draft is discarded and focus returns.

Edge case to verify

At 320 px every filter and action remains reachable, and Escape closes without applying a changed draft over the furniture results.

Mission

Open the right-edge Filters, enable In stock, apply it, then reopen and press Escape to verify the draft is discarded and focus returns.

Primary state: The temporary modal panel enters from the right over the furniture list, makes those results inert, and restores the Filters trigger after closing.

12 results

Office furniture

Compact desk
In stock
Adjustable chair
Made to order

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Backdrop

The layer that separates a modal surface from inactive page content.

Use it when

Editing filters without leaving results
Showing a compact cart or inspector beside current content

Avoid it when

The navigation must stay visible across pages
The task needs the full viewport or several steps

Compare similar concepts

Bottom sheet is bottom-anchored and may be draggable; Drawer uses a defined side edge, while Sidebar remains part of the persistent layout.

Bottom sheet

Sidebar remains in layout and does not trap focus; Drawer and Bottom sheet are temporary surfaces that may make the page inert.

Sidebar

Technical details

Behaviors

Enter from an edge
The temporary panel overlays the page and moves in from a defined viewport edge.
Contain focus
While modal, keyboard focus stays inside the surface until it closes.
Dismiss with Escape
Escape closes the temporary surface and returns focus to a sensible control.

States

Drawer closed
Drawer closed
Drawer open
Drawer open

State transitions

Drawer closed → Drawer open
The Filters trigger is activated and the temporary panel enters from the right edge.
Drawer open → Drawer closed
Apply, Close, or Escape dismisses the drawer and restores focus to Filters.

Test scenarios

Context: An office-furniture results page shows the same Compact desk and Adjustable chair list while people filter availability and navigate categories without leaving the results.
Mission: Open the right-edge Filters, enable In stock, apply it, then reopen and press Escape to verify the draft is discarded and focus returns.
Primary state: The temporary modal panel enters from the right over the furniture list, makes those results inert, and restores the Filters trigger after closing.
Edge case: At 320 px every filter and action remains reachable, and Escape closes without applying a changed draft over the furniture results.

Accessibility

Role: dialog with aria-modal=true for the modal specimen
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Opening places focus on the drawer heading or first useful field, contains it, and closing restores the opener.
Dismissal: The named close control and Escape always work; backdrop dismissal is disabled when it could discard changes.
Scroll: The page behind the surface stays fixed. Long content scrolls inside the panel, and touch dragging does not steal scrolling from nested content.
Announcement: The accessible title and optional description identify the drawer task as focus enters.
Keyboard: Tab remains inside while open
Escape closes without applying unintended changes
Enter activates only the focused control

Bindings

Dialog.Root
implementationKind
shadcn-radix
nativeElement
Not applicable
ariaPattern
sheet
radixPrimitive
Dialog
shadcnRecipe
Sheet
runtimeDependency
@radix-ui/react-dialog@1.1.19
packageName
@radix-ui/react-dialog
exportName
Dialog.Root
exactVersion
1.1.19
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Radix has no Drawer primitive. This binding composes Dialog as a modal side panel and keeps placement separate from modality.
Verify binding source

Sources

WAI-ARIA APG: Dialog Modal Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Drawer: modal dialog labeling, initial focus, focus containment, Escape dismissal, and focus return guidance.
shadcn/ui: Sheet
shadcn/ui · documentation · 2026-07-16
Claim covered: Drawer: documented shadcn Sheet recipe built on Radix Dialog and its side-placement composition.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.