Any way to insert more than one "base" component?

[cbarrerah]

Hi I am working on some UI to be inserted into the jira instance, and I have most UI in a side panel comfortably located in a collapsible panel to the right.
I want to be able to configure some parameters in a more centralized way, so I want to show a panel to render the config UI into. Is there an easy way to do so?
My initial idea was to create a div at the beggining, with a z-index lower than the UI, and trigger it's visibility by raising the Z-index of the panel when triggering the config UI, but to do so, I need to be able to render the Config UI independently of the other components already rendered by the plugin.
Does it make sense to do so? is it a bad idea? Any input is appreciated :)

[lisonge]

If you want to build a complex UI, you can use related component library of react/vue

---

and I still don't understand what you want to do, maybe you can show me your demo code and example screenshot

[cbarrerah]

I can show much of the actual code, but I'll try to make it clearer:
We have to places in the page where I want to place contents, one on the right side and another on the top beside some buttons.
The only way to define where to put in the screen my components by using the plugin is to define the locator to add my "App" component on the main.tsx file, so it places the ui in a specific place in the dom and then all the components fit inside.
ReactDOM.createRoot(container).render( <React.StrictMode> <Component /> </React.StrictMode>, );
Is it possible to have more than one "root" or to place components outside this "root" ?

[lisonge]

Is it possible to have more than one "root" or to place components outside this "root" ?

This is just a simple React problem, Of course there is no problem doing this

but I am not familiar with React, if it is Vue, I should use https://vuejs.org/guide/built-ins/teleport.html and no need to create multiple instances

[cbarrerah]

That was exactly what I was looking for! Thank you very much ^.^