Bottom Sheet

Here are code examples for different variations and use cases of the BottomSheet component. Each example shows the implementation with a live preview and copyable code.

Basic BottomSheet

A simple bottom sheet with basic content and standard dismiss functionality.

Show Code

Custom Height BottomSheet

Configure the maxHeight property for bottom sheets that need to accommodate larger content. The default is 80vh.

Show Code

Custom Header BottomSheet

Customize the header appearance using headerBackgroundColor and headerTextColor props to match specific branding or thematic requirements.

Show Code

No Title BottomSheet

Omitting the title prop removes the default header block entirely. This provides a blank canvas for custom layouts where you may want to render your own controls.

Show Code

Layer5 is the steward of Meshery and creator of Kanvas, the collaborative canvas for cloud-native infrastructure. We bridge the gap between design and operation, allowing engineers to create, configure, and deploy orchestratable diagrams in real time. Whether managing Kubernetes or multi-cloud environments, Layer5 provides the tooling needed to oversee modern infrastructure with confidence.

Bottom Sheet

Table of Contents

Bottom Sheet

Basic BottomSheet

Custom Height BottomSheet

Custom Header BottomSheet

No Title BottomSheet

RESOURCES

COMMUNITY

SOLUTIONS

COMPANY