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	Stable
Figma Documentation	Stable
Web Components	Planned
Vue [Fozzie]	N/A
React [Snacks]	N/A
iOS JustUI [UI Kit]	Stable
iOS PIE [SwiftUI]	Stable
Android PIE [Compose & Views]	Beta