Separating frontend components in Streamlit

Custom Components
1

Hello :wave:,

I am building a Streamlit component with multiple frontend scripts (generating buttons) and am wondering how I can separate them both in my index.tsx and in __init__.py. I’d like to pass different arguments to each subcomponent & only generate them in certain part of the app, but right now when I initialize the components in the index.tsx:

ReactDOM.render(
  <React.StrictMode>
    <FirstButton />
    <SecondButton />
  </React.StrictMode>,
  document.getElementById("root")
)

the buttons always get generated side-by-side. Does anyone know how I can separate them so that in my __init__.py I can declare two components separately, e.g.

_button1 = components.declare_component("first_button", url="http://localhost:3000/")
_button2 = components.declare_component("second_button", url="http://localhost:3000/")

Thanks a lot for any suggestions.