No Box Component in MUI

[jmhess77]

Related page

https://mui.com/material-ui/react-box/

Kind of issue

Unclear explanations

Issue description

On the MUI.com documentation page it talks about using the "box" component however there is no "box" component included in our copy of the MUI system. I see the use of the box in the layer panel so I know it's being used throughout the library. Am I and my team missing something here?

Also, why is the box component located in the "surfaces" section of the documentation site when it's a layout component?

Context

No Box Component
We are trying to decide when to use the paper element vs. container vs box (which isn't available) vs. stack in our design specs. I have spoken with my manager and have told him the container is to be used more for the "wrapper" for our content.

However he thinks the container is to be used for anything in the UI? I look at the container as just that, something to contain the entire UI. I would use the "paper or stack" component for individual regions or sections of a UI. Is this appraoch wrong? I would appreciate any clarification that I could take back to my manager and team. And why is there no box?
Thanks

Search keywords: MUI box component

[samuelsycamore]

Hi @jmhess77, can you explain what you mean by there being no Box component? Both Material UI and MUI System provide this component:

import Box from '@mui/material/Box';
// or 
import Box from '@mui/system/Box';

What version of MUI System and/or Material UI are you using? Can you share a minimal reproduction demonstrating that you're not able to import a Box? Or do you mean something else?

I agree that some of the docs on these layout/container components could use more details about intended usage.

• Container is for a top-level layout wrapper - normally you would have one of these at most (if you choose to use it)

• Box is the most generic wrapper available - think of it as a div with extra theme-aware capabilities - this is your bread and butter for wrapping things

• Stack is a slightly more sophisticated wrapper intended to simplify the grouping and arrangement of vertical or horizontal UI elements

• Paper, as noted on its docs page, is a Material Design-specific surface (which is itself an MD concept), and if this isn't relevant to you then you probably don't need to use it:

  The Paper component is ideally suited for designs that follow Material Design's elevation system, which is meant to replicate how light casts shadows in the physical world.

I hope this helps!

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[jmhess77]

Hi Samuel,
Sorry for the lack of context. I was actually referring to the MUI X "Figma" component library. We are just trying to determine if there should be a physical "box" component in the MUI component library. (See image below as reference)

[siriwatknp]

Thanks for the info @jmhess77, the Box component is not intended to be used with Figma, it's a specific implementation based on the underlying style engine we are using which might be removed once we switched to Pigment CSS (not related to design again).

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@jmhess77 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.