How do i use the material ui component
This is a good starting point: https://docs.plasmic.app/learn/code-components/
Been doing some research into Plasmic, it’s an amazing looking platform!
But if anyone here is looking for an OOBE with Material UI “drag and drop” UI building, Plasmic requires specifically “registering” every single MUI component you plan to use:
It’s definitely a hassle to register an entire component library. In the future we hope to re-examine what is possible here.
How are you meant to know what props, variants the lot to use for plasmic with custom components like material ui?
You specify props (variants aren’t relevant here), and you only need to specify the props that make sense for the design tool to tweak. Things like event handler props (onClick etc.) and dynamic state aren’t usually specified in Plasmic but in normal code.
The MUI docs list what props are available, or else you can also find these in the Typescript interfaces.
BTW, can I ask more about your use case / what you’re looking to build?
I’m also looking for a way to use MUI and Plasmic without having to register all components (which would make it unfeasible).
I thought there might be some importer that could interpret the MUI code and register the components automatically. Or maybe someone had already done this work and could share
Just started playing with Plasmic, it’s looking great and really fills a need that’s been empty in this space.
Has there been any updates or movements on this?
For now I can see some Ant Design 5 components installable from a plugin-kind setting.
It’s probably an evidence of its capacity of have other UI library built-in-integrated like this.
Be able to start a project with Material UI components already inserted on it would certainly bring even more value to this so much usable tool!
It would be great if plastic went through and registered UI components so that these would be part of out of the box libraries.
UX pin has done this for Material UI so you can build your app components from MUI atoms in a drag and drop interface. It’s meant to be an alternative to Figma. UX pin outputs all the react code you need. You still have to copy and paste the code into your IDE and go through the process of register your components with plastic.
The advantage here would be you can build out the larger components you need without having to register every single component which would take months.