Bottom sheet

Component preview

A mobile-oriented surface attached to the bottom edge that can open to stable heights and may support dragging.

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: sheet, mobile sheet, draggable sheet

a panel that comes up from the bottom on mobile
drag this sheet higher to see more
a phone panel with a grab handle
show quick actions above the bottom edge
a map details card I can pull up
a bottom panel with half and full heights

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.

Bottom sheet

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

Your task

On mobile, open Filters, move the sheet between half and full height by drag or buttons, enable In stock, and apply it.

Edge case to verify

Reduced motion removes spring travel, and keyboard users can expand, collapse, apply the availability filter, and close without dragging.

Mission

Bottom sheet

On mobile, open Filters, move the sheet between half and full height by drag or buttons, enable In stock, and apply it.

Primary state: The temporary mobile sheet is attached to the bottom at half height, keeps the same furniture results visible behind it, and can snap to full height.

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

Showing place details over a mobile map
Offering a compact mobile action or selection surface

Avoid it when

Desktop side placement is the defining behavior
Dragging is the only way to reach content or close

Compare similar concepts

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.

Drawer

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

Drag between snap points
Touch dragging moves the sheet between stable heights while controls remain keyboard operable.
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

Sheet closed
Sheet closed
Sheet at half height
Sheet at half height
Sheet at full height
Sheet at full height

State transitions

Sheet closed → Sheet at half height
The Filters trigger opens the sheet at its initial half-height snap point.
Sheet at half height → Sheet at full height
An upward drag or the Expand button moves the sheet to its full-height snap point.
Sheet at full height → Sheet at half height
A downward drag or the Collapse button returns the sheet to half height.
Sheet at half height → Sheet closed
Apply commits the filter, or Escape discards its draft; both close the half-height sheet and restore focus to Filters.
Sheet at full height → Sheet closed
Apply commits the filter, or Escape discards its draft; both close the full-height sheet and restore 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: On mobile, open Filters, move the sheet between half and full height by drag or buttons, enable In stock, and apply it.
Primary state: The temporary mobile sheet is attached to the bottom at half height, keeps the same furniture results visible behind it, and can snap to full height.
Edge case: Reduced motion removes spring travel, and keyboard users can expand, collapse, apply the availability filter, and close without dragging.

Accessibility

Role: dialog with aria-modal=true while the sheet makes the furniture results inert
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: Focus enters the modal sheet, remains inside, and returns to the Filters opener after closing.
Dismissal: Close control, Escape, and a downward gesture past the documented threshold dismiss; accidental small drags snap back.
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 sheet title, current modal state, expanded state, and loading changes are available without relying on motion.
Keyboard: Tab reaches all controls
Buttons provide expand and collapse alternatives
Escape closes the modal sheet

Bindings

Drawer
implementationKind
specialized
nativeElement
Not applicable
ariaPattern
dialog when modal
radixPrimitive
Not applicable
shadcnRecipe
Drawer (Radix backend)
runtimeDependency
vaul@1.1.2
packageName
vaul
exportName
Drawer
exactVersion
1.1.2
status
exception
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Vaul provides drag and snap behavior for this mobile surface; it is not a generic replacement for Dialog, Drawer, or Sidebar.
Verify binding source

Sources

Vaul: Drawer Documentation
Emil Kowalski · documentation · 2026-07-16
Claim covered: Bottom sheet: documented Vaul Drawer composition, drag interaction, snap behavior, and runtime dependency.
WAI-ARIA APG: Dialog Modal Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Bottom sheet: modal dialog labeling, initial focus, focus containment, Escape dismissal, and focus return guidance.

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.