Bottom Sheet

A bottom sheet is a surface attached to the bottom of the screen that displays additional information or actions while keeping the main content visible.

Overview

The purpose of bottom sheets is to provide contextual or supplementary information and actions without fully obstructing the main content or requiring a separate screen.

Reserved for mobile and responsive interfaces, they offer a convenient and space-efficient way to present additional functionality or content.

A bottom sheet placed at the bottom of a container.

Resources

Figma Component	Available
Figma Documentation	Available
Web Components	Planned
Vue [Fozzie]	N/A
React [Snacks]	N/A
iOS JustUI [UI Kit]	Available
iOS PIE [SwiftUI]	Available
Android [XML views]	Planned
Android [Jetpack compose]	Beta