Skip to main content

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

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