Skip to content

ComponentsSheet

Components

Sheet

Edge-anchored dialogs: full slide over 300ms on the cds ease-out, panel / sidebar / page surfaces, swipe to close.

Sides

right (default) and left: 3/4 width, max 384 from sm; top: max 60dvh; bottom: top corners 12, enters from 100% + 24px. Panel surface: surface-panel + panel-lg shadow, backdrop without blur.

side

Phone sidebar and top sheet

surface="sidebar" full screen without overlay (touch swipe towards the left edge closes it: past 1/3 of the width or above .5 px/ms); surface="page" non-modal top sheet that appears instantly.

Phone sidebar (fullScreen, swipeToClose)
Top sheet (page surface, non-modal, not animated)

Light and dark

Panel sheet surface in both modes (static preview).

light
DetailsTitle 15/20 semibold, description 13/17 muted.
Body content
dark
DetailsTitle 15/20 semibold, description 13/17 muted.
Body content