[question] How to use custom components in my design?

[amyfourie]

The problem in depth

I'd like to add the custom component "toolbar" in my design. I'd like to add it to a card along with the table component (similar to the mockup in the library file). When I search for it on the right hand side it doesn't appear and I can't seem to paste it into the card. Could you help?

Your environment

MUI 5.15.0

Search keywords:

[amyfourie]

The same issue but different example: I'd like to add an icon into the dialog component in the top right. How do I do this?

[adrianmanea]

Hi Amy, the reason you cannot add a Table is (probably) because the Card is still an Instance. If that's the case, there are two options here, one would be to detach the Card instance and freely add any components inside it and the second (a bit more complex) solution would be to replace the instance inside the Card with a Table.

Let me know if you need me to record a quick 1 minute demo of both solutions.

[amyfourie]

A video would be amazing if possible. I have been able to swap the instance to add a table but is it possible to add more components in there? I can only swap not add more.

[adrianmanea]

Hi Amy, yes you can add multiple components using the <Stack> component inside an instance!

[amyfourie]

amazing! thanks so much

[amyfourie]

Apologies, is it possible to add more than 5 instance slots?

[adrianmanea]

Hi Amy, yes, it's possible. When you select the 5+ variant, you'll reveal five additional hidden instances (refer to the attached screenshot).

However, I would suggest a different approach. Instead of building with <Stack>, consider defining a custom component and swapping that in (see attached).

MUI.F.Replace.Whole.Instance.mov