---
url: /components/side-sheets/overview.md
description: >-
  Side sheets are surfaces containing supplementary content or actions to
  support tasks as part of a flow.
---

# Side sheets

Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Side sheets](/assets/8356bb92-mrogenhe-hero-1x1.B-iGX9np.webp)

* Use side sheets to provide optional content and actions without interrupting the main content
* Two variants: standard and modal
* People can navigate to another region within the sheet
* Side sheets can contain a back icon for navigation

![The 2 variants of side sheets.](/assets/29b10a3b-mgalv851-01.DhRhE7CL.webp)

1. Standard side sheet
2. Modal side sheet

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](http://goo.gle/m3-design-kit) | Available |
| Implementation | Flutter | Unavailable |
| Implementation | Jetpack Compose | Unavailable |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/SideSheet.md) | Available |
| Implementation | Web | Unavailable |

## Differences from M2

* Right-to-left (RTL) language support with left side sheet
* Color: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")
* Shape: Modal side sheets have a 16dp corner radius

![A modal side sheet showing the 16dp corner radius.](/assets/16e87756-mgalwhrt-02.CTu5mvF5.webp)

Side sheets have new color mappings to support dynamic color