Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

Sheet

Sheet is a generic container that supports Joy UI's global variants.

Introduction

The Sheet container is a generic container. It's a sibling to the Box component, and equivalent to Material UI's Paper, with the difference being that it supports Joy UI's global variants out of the box.

Sheet
<Sheet />

Playground

Component

After installation, you can start building with this component using the following basic elements:

<span class="token keyword">import</span> Sheet <span class="token keyword">from</span> <span class="token string">'@mui/joy/Sheet'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Sheet</span></span><span class="token punctuation">></span></span>Holy sheet<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Sheet</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Basic usage

The Sheet component, in addition to the variants, also has access to the color prop, allowing you to use every palette of the theme.

Hello world!
Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.