Side Sheet

A side sheet is a surface element that slides in from the side of the screen to provide additional content or functionality.

Overview

The purpose of side sheets is to provide users with easy access to secondary information, navigation, or actions, without the need to navigate to a different page or interrupt the main content.

Side sheets are designed to overlay a portion of the screen, expanding the available space for content or functionality while keeping the main content partially visible. They can include a close control for users to hide the side sheet as needed.

A side sheet placed at the right side of a container.

Resources

Figma Component	Stable
Figma Documentation	Planned
Web Components	Planned
Vue [Fozzie]	N/A
React [Snacks]	N/A
iOS JustUI [UI Kit]	N/A
iOS PIE [SwiftUI]	N/A
Android PIE [Compose & Views]	N/A