diff --git a/.coveragerc b/.coveragerc
index afd851874..8c3df0fa4 100644
--- a/.coveragerc
+++ b/.coveragerc
@@ -5,7 +5,7 @@ branch = true
 [report]
 show_missing = true
 # TODO bump back to 79
-fail_under = 70
+fail_under = 69
 precision = 2
 
 # Regexes for lines to exclude from consideration
@@ -28,4 +28,4 @@ exclude_also =
 ignore_errors = True
 
 [html]
-directory = coverage_html_report
\ No newline at end of file
+directory = coverage_html_report
diff --git a/.github/workflows/check_generated_pyi.yml b/.github/workflows/check_generated_pyi.yml
index 0d283c8b0..9fa8ea1fc 100644
--- a/.github/workflows/check_generated_pyi.yml
+++ b/.github/workflows/check_generated_pyi.yml
@@ -2,14 +2,14 @@ name: check-generated-pyi
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     # We don't just trigger on pyi_generator.py and the components dir, because
     # there are other things that can change the generator output
     # e.g. black version, reflex.Component, reflex.Var.
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 
diff --git a/.github/workflows/integration_app_harness.yml b/.github/workflows/integration_app_harness.yml
index 25ef6a155..4b76a0515 100644
--- a/.github/workflows/integration_app_harness.yml
+++ b/.github/workflows/integration_app_harness.yml
@@ -2,11 +2,11 @@ name: integration-app-harness
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 
diff --git a/.github/workflows/integration_tests.yml b/.github/workflows/integration_tests.yml
index 0e4e627e5..5a460cd39 100644
--- a/.github/workflows/integration_tests.yml
+++ b/.github/workflows/integration_tests.yml
@@ -2,11 +2,11 @@ name: integration-tests
 
 on:
   push:
-    branches: [ main ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ main ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 
@@ -125,7 +125,7 @@ jobs:
         uses: actions/checkout@v4
         with:
           repository: reflex-dev/reflex-web
-          ref: main
+          ref: reflex-0.4.0
           path: reflex-web
 
       - name: Install Requirements for reflex-web
diff --git a/.github/workflows/integration_tests_wsl.yml b/.github/workflows/integration_tests_wsl.yml
index be035ebba..bf51748a4 100644
--- a/.github/workflows/integration_tests_wsl.yml
+++ b/.github/workflows/integration_tests_wsl.yml
@@ -2,11 +2,11 @@ name: integration-tests-wsl
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ main ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 
diff --git a/.github/workflows/pre-commit.yml b/.github/workflows/pre-commit.yml
index 612092652..c035b4f1d 100644
--- a/.github/workflows/pre-commit.yml
+++ b/.github/workflows/pre-commit.yml
@@ -2,12 +2,12 @@ name: pre-commit
 
 on:
   pull_request:
-    branches: [main]
+    branches: [ "main", "reflex-0.4.0" ]
   push:
     # Note even though this job is called "pre-commit" and runs "pre-commit", this job will run
     # also POST-commit on main also!  In case there are mishandled merge conflicts / bad auto-resolves
     # when merging into main branch.
-    branches: [main]
+    branches: [ "main", "reflex-0.4.0" ]
 
 jobs:
   pre-commit:
diff --git a/.github/workflows/reflex_init_in_docker_test.yml b/.github/workflows/reflex_init_in_docker_test.yml
index a60c278a9..0e458f233 100644
--- a/.github/workflows/reflex_init_in_docker_test.yml
+++ b/.github/workflows/reflex_init_in_docker_test.yml
@@ -2,12 +2,11 @@ name: reflex-init-in-docker-test
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches:
-      - main
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 
diff --git a/.github/workflows/unit_tests.yml b/.github/workflows/unit_tests.yml
index 0f8110295..865bfe630 100644
--- a/.github/workflows/unit_tests.yml
+++ b/.github/workflows/unit_tests.yml
@@ -2,11 +2,11 @@ name: unit-tests
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 
diff --git a/README.md b/README.md
index 2bba09313..46b01da47 100644
--- a/README.md
+++ b/README.md
@@ -72,10 +72,12 @@ Here is the complete code to create this. This is all done in one Python file!
 import reflex as rx
 import openai
 
-openai.api_key = "YOUR_API_KEY"
+openai_client = openai.OpenAI()
+
 
 class State(rx.State):
     """The app state."""
+
     prompt = ""
     image_url = ""
     processing = False
@@ -88,41 +90,40 @@ class State(rx.State):
 
         self.processing, self.complete = True, False
         yield
-        response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
-        self.image_url = response["data"][0]["url"]
+        response = openai_client.images.generate(
+            prompt=self.prompt, n=1, size="1024x1024"
+        )
+        self.image_url = response.data[0].url
         self.processing, self.complete = False, True
-        
 
 def index():
     return rx.center(
         rx.vstack(
-            rx.heading("DALL·E"),
-            rx.input(placeholder="Enter a prompt", on_blur=State.set_prompt),
-            rx.button(
-                "Generate Image",
-                on_click=State.get_image,
-                is_loading=State.processing,
-                width="100%",
+            rx.heading("DALL-E", font_size="1.5em"),
+            rx.input(
+                placeholder="Enter a prompt..",
+                on_blur=State.set_prompt,
+                width="25em",
             ),
+            rx.button("Generate Image", on_click=State.get_image, width="25em"),
             rx.cond(
-                State.complete,
-                     rx.image(
-                         src=State.image_url,
-                         height="25em",
-                         width="25em",
-                    )
+                State.processing,
+                rx.chakra.circular_progress(is_indeterminate=True),
+                rx.cond(
+                    State.complete,
+                    rx.image(src=State.image_url, width="20em"),
+                ),
             ),
-            padding="2em",
-            shadow="lg",
-            border_radius="lg",
+            align="center",
         ),
         width="100%",
         height="100vh",
     )
 
+
 # Add state and page to the app.
 app = rx.App()
-app.add_page(index, title="reflex:DALL·E")
+app.add_page(index, title="Reflex:DALL-E")
 ```
 
 ## Let's break this down.
@@ -156,6 +157,7 @@ class State(rx.State):
     image_url = ""
     processing = False
     complete = False
+
 ```
 
 The state defines all the variables (called vars) in an app that can change and the functions that change them.
@@ -172,8 +174,10 @@ def get_image(self):
 
     self.processing, self.complete = True, False
     yield
-    response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
-    self.image_url = response["data"][0]["url"]
+    response = openai_client.images.generate(
+        prompt=self.prompt, n=1, size="1024x1024"
+    )
+    self.image_url = response.data[0].url
     self.processing, self.complete = False, True
 ```
 
diff --git a/integration/benchmarks/test_compile_benchmark.py b/integration/benchmarks/test_compile_benchmark.py
index 82162de00..85815bae0 100644
--- a/integration/benchmarks/test_compile_benchmark.py
+++ b/integration/benchmarks/test_compile_benchmark.py
@@ -43,7 +43,7 @@ def sample_small_page() -> rx.Component:
     """
     return rx.vstack(
         *[rx.button(State.count, font_size="2em") for i in range(100)],
-        spacing="1em",
+        gap="1em",
     )
 
 
@@ -62,7 +62,7 @@ def sample_large_page() -> rx.Component:
             )
             for i in range(100)
         ],
-        spacing="1em",
+        gap="1em",
     )
 
 
diff --git a/integration/test_background_task.py b/integration/test_background_task.py
index 799d68c2f..619efa6cf 100644
--- a/integration/test_background_task.py
+++ b/integration/test_background_task.py
@@ -59,11 +59,11 @@ def BackgroundTask():
 
     def index() -> rx.Component:
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 id="token", value=State.router.session.client_token, is_read_only=True
             ),
             rx.heading(State.counter, id="counter"),
-            rx.input(
+            rx.chakra.input(
                 id="iterations",
                 placeholder="Iterations",
                 value=State.iterations.to_string(),  # type: ignore
diff --git a/integration/test_call_script.py b/integration/test_call_script.py
index cb9a61494..3aea81e10 100644
--- a/integration/test_call_script.py
+++ b/integration/test_call_script.py
@@ -142,17 +142,17 @@ def CallScript():
     @app.add_page
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=CallScriptState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.input(
+            rx.chakra.input(
                 value=CallScriptState.inline_counter.to(str),  # type: ignore
                 id="inline_counter",
                 is_read_only=True,
             ),
-            rx.input(
+            rx.chakra.input(
                 value=CallScriptState.external_counter.to(str),  # type: ignore
                 id="external_counter",
                 is_read_only=True,
diff --git a/integration/test_client_storage.py b/integration/test_client_storage.py
index df9574a30..9f883c2e7 100644
--- a/integration/test_client_storage.py
+++ b/integration/test_client_storage.py
@@ -55,18 +55,18 @@ def ClientSide():
 
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 value=ClientSideState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.input(
+            rx.chakra.input(
                 placeholder="state var",
                 value=ClientSideState.state_var,
                 on_change=ClientSideState.set_state_var,  # type: ignore
                 id="state_var",
             ),
-            rx.input(
+            rx.chakra.input(
                 placeholder="input value",
                 value=ClientSideState.input_value,
                 on_change=ClientSideState.set_input_value,  # type: ignore
diff --git a/integration/test_dynamic_routes.py b/integration/test_dynamic_routes.py
index 7cb64754f..9fa597d2b 100644
--- a/integration/test_dynamic_routes.py
+++ b/integration/test_dynamic_routes.py
@@ -35,13 +35,15 @@ def DynamicRoute():
 
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 value=DynamicState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.input(value=DynamicState.page_id, is_read_only=True, id="page_id"),
-            rx.input(
+            rx.chakra.input(
+                value=DynamicState.page_id, is_read_only=True, id="page_id"
+            ),
+            rx.chakra.input(
                 value=DynamicState.router.page.raw_path,
                 is_read_only=True,
                 id="raw_path",
@@ -52,8 +54,8 @@ def DynamicRoute():
                 "next", href="/page/" + DynamicState.next_page, id="link_page_next"  # type: ignore
             ),
             rx.link("missing", href="/missing", id="link_missing"),
-            rx.list(
-                rx.foreach(DynamicState.order, lambda i: rx.list_item(rx.text(i))),  # type: ignore
+            rx.chakra.list(
+                rx.foreach(DynamicState.order, lambda i: rx.chakra.list_item(rx.text(i))),  # type: ignore
             ),
         )
 
diff --git a/integration/test_event_actions.py b/integration/test_event_actions.py
index 89c8ece22..05e333f3c 100644
--- a/integration/test_event_actions.py
+++ b/integration/test_event_actions.py
@@ -42,7 +42,7 @@ def TestEventAction():
 
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=EventActionState.router.session.client_token,
                 is_read_only=True,
                 id="token",
@@ -121,10 +121,10 @@ def TestEventAction():
                     "custom-prevent-default"
                 ).prevent_default,
             ),
-            rx.list(
+            rx.chakra.list(
                 rx.foreach(
                     EventActionState.order,  # type: ignore
-                    rx.list_item,
+                    rx.chakra.list_item,
                 ),
             ),
             on_click=EventActionState.on_click("outer"),  # type: ignore
diff --git a/integration/test_event_chain.py b/integration/test_event_chain.py
index ec3f125b4..587e0f63d 100644
--- a/integration/test_event_chain.py
+++ b/integration/test_event_chain.py
@@ -124,7 +124,7 @@ def EventChain():
 
     app = rx.App(state=rx.State)
 
-    token_input = rx.input(
+    token_input = rx.chakra.input(
         value=State.router.session.client_token, is_read_only=True, id="token"
     )
 
@@ -132,7 +132,9 @@ def EventChain():
     def index():
         return rx.fragment(
             token_input,
-            rx.input(value=State.interim_value, is_read_only=True, id="interim_value"),
+            rx.chakra.input(
+                value=State.interim_value, is_read_only=True, id="interim_value"
+            ),
             rx.button(
                 "Return Event",
                 id="return_event",
diff --git a/integration/test_form_submit.py b/integration/test_form_submit.py
index b64846c1b..655630478 100644
--- a/integration/test_form_submit.py
+++ b/integration/test_form_submit.py
@@ -27,28 +27,28 @@ def FormSubmit():
     @app.add_page
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.form(
+            rx.form.root(
                 rx.vstack(
-                    rx.input(id="name_input"),
-                    rx.hstack(rx.pin_input(length=4, id="pin_input")),
-                    rx.number_input(id="number_input"),
+                    rx.chakra.input(id="name_input"),
+                    rx.hstack(rx.chakra.pin_input(length=4, id="pin_input")),
+                    rx.chakra.number_input(id="number_input"),
                     rx.checkbox(id="bool_input"),
                     rx.switch(id="bool_input2"),
                     rx.checkbox(id="bool_input3"),
                     rx.switch(id="bool_input4"),
-                    rx.slider(id="slider_input"),
-                    rx.range_slider(id="range_input"),
-                    rx.radio_group(["option1", "option2"], id="radio_input"),
-                    rx.radio_group(FormState.var_options, id="radio_input_var"),
-                    rx.select(["option1", "option2"], id="select_input"),
-                    rx.select(FormState.var_options, id="select_input_var"),
+                    rx.slider(id="slider_input", default_value=[50], width="100%"),
+                    rx.chakra.range_slider(id="range_input"),
+                    rx.radio(["option1", "option2"], id="radio_input"),
+                    rx.radio(FormState.var_options, id="radio_input_var"),
+                    rx.chakra.select(["option1", "option2"], id="select_input"),
+                    rx.chakra.select(FormState.var_options, id="select_input_var"),
                     rx.text_area(id="text_area_input"),
-                    rx.input(
+                    rx.chakra.input(
                         id="debounce_input",
                         debounce_timeout=0,
                         on_change=rx.console_log,
@@ -80,37 +80,41 @@ def FormSubmitName():
     @app.add_page
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.form(
+            rx.form.root(
                 rx.vstack(
-                    rx.input(name="name_input"),
-                    rx.hstack(rx.pin_input(length=4, name="pin_input")),
-                    rx.number_input(name="number_input"),
+                    rx.chakra.input(name="name_input"),
+                    rx.hstack(rx.chakra.pin_input(length=4, name="pin_input")),
+                    rx.chakra.number_input(name="number_input"),
                     rx.checkbox(name="bool_input"),
                     rx.switch(name="bool_input2"),
                     rx.checkbox(name="bool_input3"),
                     rx.switch(name="bool_input4"),
-                    rx.slider(name="slider_input"),
-                    rx.range_slider(name="range_input"),
-                    rx.radio_group(FormState.options, name="radio_input"),
-                    rx.select(FormState.options, name="select_input"),
+                    rx.slider(name="slider_input", default_value=[50], width="100%"),
+                    rx.chakra.range_slider(name="range_input"),
+                    rx.radio(FormState.options, name="radio_input"),
+                    rx.select(
+                        FormState.options,
+                        name="select_input",
+                        default_value=FormState.options[0],
+                    ),
                     rx.text_area(name="text_area_input"),
-                    rx.input_group(
-                        rx.input_left_element(rx.icon(tag="chevron_right")),
-                        rx.input(
+                    rx.chakra.input_group(
+                        rx.chakra.input_left_element(rx.icon(tag="chevron_right")),
+                        rx.chakra.input(
                             name="debounce_input",
                             debounce_timeout=0,
                             on_change=rx.console_log,
                         ),
-                        rx.input_right_element(rx.icon(tag="chevron_left")),
+                        rx.chakra.input_right_element(rx.icon(tag="chevron_left")),
                     ),
-                    rx.button_group(
+                    rx.chakra.button_group(
                         rx.button("Submit", type_="submit"),
-                        rx.icon_button(FormState.val, icon=rx.icon(tag="add")),
+                        rx.icon_button(FormState.val, icon=rx.icon(tag="plus")),
                         variant="outline",
                         is_attached=True,
                     ),
@@ -194,16 +198,16 @@ async def test_submit(driver, form_submit: AppHarness):
     for _ in range(3):
         buttons[1].click()
 
-    checkbox_input = driver.find_element(By.CLASS_NAME, "chakra-checkbox__control")
+    checkbox_input = driver.find_element(By.XPATH, "//button[@role='checkbox']")
     checkbox_input.click()
 
-    switch_input = driver.find_element(By.CLASS_NAME, "chakra-switch__track")
+    switch_input = driver.find_element(By.XPATH, "//button[@role='switch']")
     switch_input.click()
 
-    radio_buttons = driver.find_elements(By.CLASS_NAME, "chakra-radio__control")
+    radio_buttons = driver.find_elements(By.XPATH, "//button[@role='radio']")
     radio_buttons[1].click()
 
-    textarea_input = driver.find_element(By.CLASS_NAME, "chakra-textarea")
+    textarea_input = driver.find_element(By.TAG_NAME, "textarea")
     textarea_input.send_keys("Some", Keys.ENTER, "Text")
 
     debounce_input = driver.find_element(by, "debounce_input")
@@ -213,7 +217,7 @@ async def test_submit(driver, form_submit: AppHarness):
 
     prev_url = driver.current_url
 
-    submit_input = driver.find_element(By.CLASS_NAME, "chakra-button")
+    submit_input = driver.find_element(By.CLASS_NAME, "rt-Button")
     submit_input.click()
 
     async def get_form_data():
diff --git a/integration/test_input.py b/integration/test_input.py
index 111124349..cbb12de24 100644
--- a/integration/test_input.py
+++ b/integration/test_input.py
@@ -21,16 +21,16 @@ def FullyControlledInput():
     @app.add_page
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 value=State.router.session.client_token, is_read_only=True, id="token"
             ),
-            rx.input(
+            rx.chakra.input(
                 id="debounce_input_input",
                 on_change=State.set_text,  # type: ignore
                 value=State.text,
             ),
-            rx.input(value=State.text, id="value_input", is_read_only=True),
-            rx.input(on_change=State.set_text, id="on_change_input"),  # type: ignore
+            rx.chakra.input(value=State.text, id="value_input", is_read_only=True),
+            rx.chakra.input(on_change=State.set_text, id="on_change_input"),  # type: ignore
             rx.el.input(
                 value=State.text,
                 id="plain_value_input",
diff --git a/integration/test_login_flow.py b/integration/test_login_flow.py
index a4272fe39..209459322 100644
--- a/integration/test_login_flow.py
+++ b/integration/test_login_flow.py
@@ -28,7 +28,7 @@ def LoginSample():
             yield rx.redirect("/")
 
     def index():
-        return rx.Cond.create(
+        return rx.cond(
             State.is_hydrated & State.auth_token,  # type: ignore
             rx.vstack(
                 rx.heading(State.auth_token, id="auth-token"),
diff --git a/integration/test_server_side_event.py b/integration/test_server_side_event.py
index b8e8d21c0..f461131a0 100644
--- a/integration/test_server_side_event.py
+++ b/integration/test_server_side_event.py
@@ -38,12 +38,12 @@ def ServerSideEvent():
     @app.add_page
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 id="token", value=SSState.router.session.client_token, is_read_only=True
             ),
-            rx.input(default_value="a", id="a"),
-            rx.input(default_value="b", id="b"),
-            rx.input(default_value="c", id="c"),
+            rx.chakra.input(default_value="a", id="a"),
+            rx.chakra.input(default_value="b", id="b"),
+            rx.chakra.input(default_value="c", id="c"),
             rx.button(
                 "Clear Immediate",
                 id="clear_immediate",
diff --git a/integration/test_state_inheritance.py b/integration/test_state_inheritance.py
index 476efa466..addc0c654 100644
--- a/integration/test_state_inheritance.py
+++ b/integration/test_state_inheritance.py
@@ -90,7 +90,7 @@ def StateInheritance():
 
     def index() -> rx.Component:
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 id="token", value=Base1.router.session.client_token, is_read_only=True
             ),
             # Base 1
diff --git a/integration/test_table.py b/integration/test_table.py
index 560d70b94..0a6153c2b 100644
--- a/integration/test_table.py
+++ b/integration/test_table.py
@@ -31,13 +31,13 @@ def Table():
     @app.add_page
     def index():
         return rx.center(
-            rx.input(
+            rx.chakra.input(
                 id="token",
                 value=TableState.router.session.client_token,
                 is_read_only=True,
             ),
-            rx.table_container(
-                rx.table(
+            rx.chakra.table_container(
+                rx.chakra.table(
                     headers=TableState.headers,
                     rows=TableState.rows,
                     footers=TableState.footers,
@@ -52,36 +52,36 @@ def Table():
     @app.add_page
     def another():
         return rx.center(
-            rx.table_container(
-                rx.table(  # type: ignore
-                    rx.thead(  # type: ignore
-                        rx.tr(  # type: ignore
-                            rx.th("Name"),
-                            rx.th("Age"),
-                            rx.th("Location"),
+            rx.chakra.table_container(
+                rx.chakra.table(  # type: ignore
+                    rx.chakra.thead(  # type: ignore
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.th("Name"),
+                            rx.chakra.th("Age"),
+                            rx.chakra.th("Location"),
                         )
                     ),
-                    rx.tbody(  # type: ignore
-                        rx.tr(  # type: ignore
-                            rx.td("John"),
-                            rx.td(30),
-                            rx.td("New York"),
+                    rx.chakra.tbody(  # type: ignore
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.td("John"),
+                            rx.chakra.td(30),
+                            rx.chakra.td("New York"),
                         ),
-                        rx.tr(  # type: ignore
-                            rx.td("Jane"),
-                            rx.td(31),
-                            rx.td("San Francisco"),
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.td("Jane"),
+                            rx.chakra.td(31),
+                            rx.chakra.td("San Francisco"),
                         ),
-                        rx.tr(  # type: ignore
-                            rx.td("Joe"),
-                            rx.td(32),
-                            rx.td("Los Angeles"),
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.td("Joe"),
+                            rx.chakra.td(32),
+                            rx.chakra.td("Los Angeles"),
                         ),
                     ),
-                    rx.tfoot(  # type: ignore
-                        rx.tr(rx.td("footer1"), rx.td("footer2"), rx.td("footer3"))  # type: ignore
+                    rx.chakra.tfoot(  # type: ignore
+                        rx.chakra.tr(rx.chakra.td("footer1"), rx.chakra.td("footer2"), rx.chakra.td("footer3"))  # type: ignore
                     ),
-                    rx.table_caption("random caption"),
+                    rx.chakra.table_caption("random caption"),
                     variant="striped",
                     color_scheme="teal",
                 )
diff --git a/integration/test_tailwind.py b/integration/test_tailwind.py
index 71079fc0e..d5fe764d1 100644
--- a/integration/test_tailwind.py
+++ b/integration/test_tailwind.py
@@ -30,7 +30,7 @@ def TailwindApp(
 
     def index():
         return rx.el.div(
-            rx.text(paragraph_text, class_name=paragraph_class_name),
+            rx.chakra.text(paragraph_text, class_name=paragraph_class_name),
             rx.el.p(paragraph_text, class_name=paragraph_class_name),
             rdxt.text(paragraph_text, as_="p", class_name=paragraph_class_name),
             id="p-content",
diff --git a/integration/test_upload.py b/integration/test_upload.py
index c832f5acf..f498c6dd4 100644
--- a/integration/test_upload.py
+++ b/integration/test_upload.py
@@ -41,7 +41,7 @@ def UploadFile():
 
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=UploadState.router.session.client_token,
                 is_read_only=True,
                 id="token",
@@ -61,7 +61,7 @@ def UploadFile():
             rx.box(
                 rx.foreach(
                     rx.selected_files,
-                    lambda f: rx.text(f),
+                    lambda f: rx.text(f, as_="p"),
                 ),
                 id="selected_files",
             ),
@@ -91,7 +91,7 @@ def UploadFile():
             rx.box(
                 rx.foreach(
                     rx.selected_files("secondary"),
-                    lambda f: rx.text(f),
+                    lambda f: rx.text(f, as_="p"),
                 ),
                 id="selected_files_secondary",
             ),
diff --git a/integration/test_var_operations.py b/integration/test_var_operations.py
index 4c56c01f5..f0f53ab83 100644
--- a/integration/test_var_operations.py
+++ b/integration/test_var_operations.py
@@ -532,7 +532,7 @@ def VarOperations():
                 VarOperationState.html_str,
                 id="html_str",
             ),
-            rx.highlight(
+            rx.chakra.highlight(
                 "second",
                 query=[VarOperationState.str_var2],
             ),
@@ -542,14 +542,15 @@ def VarOperations():
             rx.text(rx.Var.range(0, 3).join(","), id="list_join_range4"),
             rx.box(
                 rx.foreach(
-                    rx.Var.range(0, 2), lambda x: rx.text(VarOperationState.list1[x])
+                    rx.Var.range(0, 2),
+                    lambda x: rx.text(VarOperationState.list1[x], as_="p"),
                 ),
                 id="foreach_list_arg",
             ),
             rx.box(
                 rx.foreach(
                     rx.Var.range(0, 2),
-                    lambda x, ix: rx.text(VarOperationState.list1[ix]),
+                    lambda x, ix: rx.text(VarOperationState.list1[ix], as_="p"),
                 ),
                 id="foreach_list_ix",
             ),
@@ -558,7 +559,7 @@ def VarOperations():
                     rx.Var.create_safe(list(range(0, 3))).to(list[int]),
                     lambda x: rx.foreach(
                         rx.Var.range(x),
-                        lambda y: rx.text(VarOperationState.list1[y]),
+                        lambda y: rx.text(VarOperationState.list1[y], as_="p"),
                     ),
                 ),
                 id="foreach_list_nested",
diff --git a/pyproject.toml b/pyproject.toml
index 58586e160..f3a4c8bed 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.3.10"
+version = "0.4.0"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [
diff --git a/reflex/.templates/apps/blank/code/blank.py b/reflex/.templates/apps/blank/code/blank.py
index 2d1f1b257..4a1751996 100644
--- a/reflex/.templates/apps/blank/code/blank.py
+++ b/reflex/.templates/apps/blank/code/blank.py
@@ -1,4 +1,5 @@
 """Welcome to Reflex! This file outlines the steps to create a basic app."""
+
 from rxconfig import config
 
 import reflex as rx
@@ -10,35 +11,25 @@ filename = f"{config.app_name}/{config.app_name}.py"
 class State(rx.State):
     """The app state."""
 
-    pass
-
 
 def index() -> rx.Component:
-    return rx.fragment(
-        rx.color_mode_button(rx.color_mode_icon(), float="right"),
+    return rx.center(
+        rx.theme_panel(),
         rx.vstack(
-            rx.heading("Welcome to Reflex!", font_size="2em"),
-            rx.box("Get started by editing ", rx.code(filename, font_size="1em")),
-            rx.link(
+            rx.heading("Welcome to Reflex!", size="9"),
+            rx.text("Get started by editing ", rx.code(filename)),
+            rx.button(
                 "Check out our docs!",
-                href=docs_url,
-                border="0.1em solid",
-                padding="0.5em",
-                border_radius="0.5em",
-                _hover={
-                    "color": rx.color_mode_cond(
-                        light="rgb(107,99,246)",
-                        dark="rgb(179, 175, 255)",
-                    )
-                },
+                on_click=lambda: rx.redirect(docs_url),
+                size="4",
             ),
-            spacing="1.5em",
+            align="center",
+            spacing="7",
             font_size="2em",
-            padding_top="10%",
         ),
+        height="100vh",
     )
 
 
-# Create app instance and add index page.
 app = rx.App()
 app.add_page(index)
diff --git a/reflex/.templates/apps/demo/code/demo.py b/reflex/.templates/apps/demo/code/demo.py
index b502b2816..7031f09d0 100644
--- a/reflex/.templates/apps/demo/code/demo.py
+++ b/reflex/.templates/apps/demo/code/demo.py
@@ -25,23 +25,27 @@ def template(main_content: Callable[[], rx.Component]) -> rx.Component:
     Returns:
         rx.Component: The template for each page of the app.
     """
-    menu_button = rx.box(
-        rx.menu(
-            rx.menu_button(
-                rx.icon(
+    menu_button = rx.chakra.box(
+        rx.chakra.menu(
+            rx.chakra.menu_button(
+                rx.chakra.icon(
                     tag="hamburger",
                     size="4em",
                     color=text_color,
                 ),
             ),
-            rx.menu_list(
-                rx.menu_item(rx.link("Home", href="/", width="100%")),
-                rx.menu_divider(),
-                rx.menu_item(
-                    rx.link("About", href="https://github.com/reflex-dev", width="100%")
+            rx.chakra.menu_list(
+                rx.chakra.menu_item(rx.chakra.link("Home", href="/", width="100%")),
+                rx.chakra.menu_divider(),
+                rx.chakra.menu_item(
+                    rx.chakra.link(
+                        "About", href="https://github.com/reflex-dev", width="100%"
+                    )
                 ),
-                rx.menu_item(
-                    rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%")
+                rx.chakra.menu_item(
+                    rx.chakra.link(
+                        "Contact", href="mailto:founders@=reflex.dev", width="100%"
+                    )
                 ),
             ),
         ),
@@ -51,10 +55,10 @@ def template(main_content: Callable[[], rx.Component]) -> rx.Component:
         z_index="500",
     )
 
-    return rx.hstack(
+    return rx.chakra.hstack(
         sidebar(),
         main_content(),
-        rx.spacer(),
+        rx.chakra.spacer(),
         menu_button,
         align_items="flex-start",
         transition="left 0.5s, width 0.5s",
diff --git a/reflex/.templates/apps/demo/code/pages/chatapp.py b/reflex/.templates/apps/demo/code/pages/chatapp.py
index 5f06cc15d..acd11a599 100644
--- a/reflex/.templates/apps/demo/code/pages/chatapp.py
+++ b/reflex/.templates/apps/demo/code/pages/chatapp.py
@@ -13,8 +13,8 @@ def chatapp_page() -> rx.Component:
     Returns:
         The UI for the main app.
     """
-    return rx.box(
-        rx.vstack(
+    return rx.chakra.box(
+        rx.chakra.vstack(
             navbar(),
             chat.chat(),
             chat.action_bar(),
diff --git a/reflex/.templates/apps/demo/code/pages/datatable.py b/reflex/.templates/apps/demo/code/pages/datatable.py
index 64bdea0eb..2a7e79c93 100644
--- a/reflex/.templates/apps/demo/code/pages/datatable.py
+++ b/reflex/.templates/apps/demo/code/pages/datatable.py
@@ -129,10 +129,10 @@ class DataTableState(State):
     ]
 
 
-code_show = """rx.hstack(
-    rx.divider(orientation="vertical", height="100vh", border="solid black 1px"),
-    rx.vstack(
-        rx.box(
+code_show = """rx.chakra.hstack(
+    rx.chakra.divider(orientation="vertical", height="100vh", border="solid black 1px"),
+    rx.chakra.vstack(
+        rx.chakra.box(
             rx.data_editor(
                 columns=DataTableState.cols,
                 data=DataTableState.data,
@@ -147,7 +147,7 @@ code_show = """rx.hstack(
                 height="80vh",
             ),
         ),
-        rx.spacer(),
+        rx.chakra.spacer(),
         height="100vh",
         spacing="25",
     ),
@@ -270,15 +270,15 @@ def datatable_page() -> rx.Component:
     Returns:
         rx.Component: The UI for the settings page.
     """
-    return rx.box(
-        rx.vstack(
-            rx.heading(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.heading(
                 "Data Table Demo",
                 font_size="3em",
             ),
-            rx.hstack(
-                rx.vstack(
-                    rx.box(
+            rx.chakra.hstack(
+                rx.chakra.vstack(
+                    rx.chakra.box(
                         rx.data_editor(
                             columns=DataTableState.cols,
                             data=DataTableState.data,
@@ -292,20 +292,20 @@ def datatable_page() -> rx.Component:
                             width="80vw",
                         ),
                     ),
-                    rx.spacer(),
+                    rx.chakra.spacer(),
                     spacing="25",
                 ),
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("Data", style=tab_style),
-                    rx.tab("State", style=tab_style),
-                    rx.tab("Styling", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("Data", style=tab_style),
+                    rx.chakra.tab("State", style=tab_style),
+                    rx.chakra.tab("Styling", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             code_show,
                             language="python",
@@ -315,7 +315,7 @@ def datatable_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             data_show,
                             language="python",
@@ -325,7 +325,7 @@ def datatable_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             state_show,
                             language="python",
@@ -335,7 +335,7 @@ def datatable_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             darkTheme_show,
                             language="python",
diff --git a/reflex/.templates/apps/demo/code/pages/forms.py b/reflex/.templates/apps/demo/code/pages/forms.py
index 904f003cd..38efc3e0f 100644
--- a/reflex/.templates/apps/demo/code/pages/forms.py
+++ b/reflex/.templates/apps/demo/code/pages/forms.py
@@ -4,21 +4,21 @@ import reflex as rx
 from ..states.form_state import FormState, UploadState
 from ..styles import *
 
-forms_1_code = """rx.vstack(
-    rx.form(
-        rx.vstack(
-            rx.input(
+forms_1_code = """rx.chakra.vstack(
+    rx.chakra.form(
+        rx.chakra.vstack(
+            rx.chakra.input(
                 placeholder="First Name",
                 id="first_name",
             ),
-            rx.input(
+            rx.chakra.input(
                 placeholder="Last Name", id="last_name"
             ),
-            rx.hstack(
-                rx.checkbox("Checked", id="check"),
-                rx.switch("Switched", id="switch"),
+            rx.chakra.hstack(
+                rx.chakra.checkbox("Checked", id="check"),
+                rx.chakra.switch("Switched", id="switch"),
             ),
-            rx.button("Submit", 
+            rx.chakra.button("Submit", 
                        type_="submit", 
                        bg="#ecfdf5",
                        color="#047857",
@@ -27,9 +27,9 @@ forms_1_code = """rx.vstack(
         ),
         on_submit=FormState.handle_submit,
     ),
-    rx.divider(),
-    rx.heading("Results"),
-    rx.text(FormState.form_data.to_string()),
+    rx.chakra.divider(),
+    rx.chakra.heading("Results"),
+    rx.chakra.text(FormState.form_data.to_string()),
     width="100%",
 )"""
 
@@ -44,35 +44,35 @@ forms_1_state = """class FormState(rx.State):
         self.form_data = form_data"""
 
 
-forms_2_code = """rx.vstack(
+forms_2_code = """rx.chakra.vstack(
     rx.upload(
-        rx.vstack(
-            rx.button(
+        rx.chakra.vstack(
+            rx.chakra.button(
                 "Select File",
                 color=color,
                 bg="white",
                 border=f"1px solid {color}",
             ),
-            rx.text(
+            rx.chakra.text(
                 "Drag and drop files here or click to select files"
             ),
         ),
         border=f"1px dotted {color}",
         padding="5em",
     ),
-    rx.hstack(rx.foreach(rx.selected_files, rx.text)),
-    rx.button(
+    rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
+    rx.chakra.button(
         "Upload",
         on_click=lambda: UploadState.handle_upload(
             rx.upload_files()
         ),
     ),
-    rx.button(
+    rx.chakra.button(
         "Clear",
         on_click=rx.clear_selected_files,
     ),
     rx.foreach(
-        UploadState.img, lambda img: rx.image(src=img, width="20%", height="auto",)
+        UploadState.img, lambda img: rx.chakra.image(src=img, width="20%", height="auto",)
     ),
     padding="5em",
     width="100%",
@@ -109,25 +109,25 @@ def forms_page() -> rx.Component:
     Returns:
         rx.Component: The UI for the settings page.
     """
-    return rx.box(
-        rx.vstack(
-            rx.heading(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.heading(
                 "Forms Demo",
                 font_size="3em",
             ),
-            rx.vstack(
-                rx.form(
-                    rx.vstack(
-                        rx.input(
+            rx.chakra.vstack(
+                rx.chakra.form(
+                    rx.chakra.vstack(
+                        rx.chakra.input(
                             placeholder="First Name",
                             id="first_name",
                         ),
-                        rx.input(placeholder="Last Name", id="last_name"),
-                        rx.hstack(
-                            rx.checkbox("Checked", id="check"),
-                            rx.switch("Switched", id="switch"),
+                        rx.chakra.input(placeholder="Last Name", id="last_name"),
+                        rx.chakra.hstack(
+                            rx.chakra.checkbox("Checked", id="check"),
+                            rx.chakra.switch("Switched", id="switch"),
                         ),
-                        rx.button(
+                        rx.chakra.button(
                             "Submit",
                             type_="submit",
                             bg="#ecfdf5",
@@ -137,19 +137,19 @@ def forms_page() -> rx.Component:
                     ),
                     on_submit=FormState.handle_submit,
                 ),
-                rx.divider(),
-                rx.heading("Results"),
-                rx.text(FormState.form_data.to_string()),
+                rx.chakra.divider(),
+                rx.chakra.heading("Results"),
+                rx.chakra.text(FormState.form_data.to_string()),
                 width="100%",
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("State", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("State", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             forms_1_code,
                             language="python",
@@ -159,7 +159,7 @@ def forms_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             forms_1_state,
                             language="python",
@@ -177,34 +177,36 @@ def forms_page() -> rx.Component:
                 width="100%",
                 padding_top=".5em",
             ),
-            rx.heading("Upload Example", font_size="3em"),
-            rx.text("Try uploading some images and see how they look."),
-            rx.vstack(
+            rx.chakra.heading("Upload Example", font_size="3em"),
+            rx.chakra.text("Try uploading some images and see how they look."),
+            rx.chakra.vstack(
                 rx.upload(
-                    rx.vstack(
-                        rx.button(
+                    rx.chakra.vstack(
+                        rx.chakra.button(
                             "Select File",
                             color=color,
                             bg="white",
                             border=f"1px solid {color}",
                         ),
-                        rx.text("Drag and drop files here or click to select files"),
+                        rx.chakra.text(
+                            "Drag and drop files here or click to select files"
+                        ),
                     ),
                     border=f"1px dotted {color}",
                     padding="5em",
                 ),
-                rx.hstack(rx.foreach(rx.selected_files, rx.text)),
-                rx.button(
+                rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
+                rx.chakra.button(
                     "Upload",
                     on_click=lambda: UploadState.handle_upload(rx.upload_files()),
                 ),
-                rx.button(
+                rx.chakra.button(
                     "Clear",
                     on_click=rx.clear_selected_files,
                 ),
                 rx.foreach(
                     UploadState.img,
-                    lambda img: rx.image(
+                    lambda img: rx.chakra.image(
                         src=img,
                         width="20%",
                         height="auto",
@@ -213,14 +215,14 @@ def forms_page() -> rx.Component:
                 padding="5em",
                 width="100%",
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("State", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("State", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             forms_2_code,
                             language="python",
@@ -230,7 +232,7 @@ def forms_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             forms_2_state,
                             language="python",
diff --git a/reflex/.templates/apps/demo/code/pages/graphing.py b/reflex/.templates/apps/demo/code/pages/graphing.py
index 0accf81a0..3eeef92c1 100644
--- a/reflex/.templates/apps/demo/code/pages/graphing.py
+++ b/reflex/.templates/apps/demo/code/pages/graphing.py
@@ -56,19 +56,19 @@ graph_2_code = """rx.recharts.pie_chart(
     ),
     rx.recharts.graphing_tooltip(),
 ),
-rx.vstack(
+rx.chakra.vstack(
     rx.foreach(
         PieChartState.resource_types,
-        lambda type_, i: rx.hstack(
-            rx.button(
+        lambda type_, i: rx.chakra.hstack(
+            rx.chakra.button(
                 "-",
                 on_click=PieChartState.decrement(type_),
             ),
-            rx.text(
+            rx.chakra.text(
                 type_,
                 PieChartState.resources[i]["count"],
             ),
-            rx.button(
+            rx.chakra.button(
                 "+",
                 on_click=PieChartState.increment(type_),
             ),
@@ -111,17 +111,17 @@ def graphing_page() -> rx.Component:
     Returns:
         rx.Component: The UI for the dashboard page.
     """
-    return rx.box(
-        rx.vstack(
-            rx.heading(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.heading(
                 "Graphing Demo",
                 font_size="3em",
             ),
-            rx.heading(
+            rx.chakra.heading(
                 "Composed Chart",
                 font_size="2em",
             ),
-            rx.stack(
+            rx.chakra.stack(
                 rx.recharts.composed_chart(
                     rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
                     rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
@@ -136,14 +136,14 @@ def graphing_page() -> rx.Component:
                 width="100%",
                 height="20em",
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("Data", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("Data", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             graph_1_code,
                             language="python",
@@ -153,7 +153,7 @@ def graphing_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             data_1_show,
                             language="python",
@@ -171,8 +171,8 @@ def graphing_page() -> rx.Component:
                 width="100%",
                 padding_top=".5em",
             ),
-            rx.heading("Interactive Example", font_size="2em"),
-            rx.hstack(
+            rx.chakra.heading("Interactive Example", font_size="2em"),
+            rx.chakra.hstack(
                 rx.recharts.pie_chart(
                     rx.recharts.pie(
                         data=PieChartState.resources,
@@ -187,19 +187,19 @@ def graphing_page() -> rx.Component:
                     ),
                     rx.recharts.graphing_tooltip(),
                 ),
-                rx.vstack(
+                rx.chakra.vstack(
                     rx.foreach(
                         PieChartState.resource_types,
-                        lambda type_, i: rx.hstack(
-                            rx.button(
+                        lambda type_, i: rx.chakra.hstack(
+                            rx.chakra.button(
                                 "-",
                                 on_click=PieChartState.decrement(type_),
                             ),
-                            rx.text(
+                            rx.chakra.text(
                                 type_,
                                 PieChartState.resources[i]["count"],
                             ),
-                            rx.button(
+                            rx.chakra.button(
                                 "+",
                                 on_click=PieChartState.increment(type_),
                             ),
@@ -209,14 +209,14 @@ def graphing_page() -> rx.Component:
                 width="100%",
                 height="15em",
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("State", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("State", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             graph_2_code,
                             language="python",
@@ -226,7 +226,7 @@ def graphing_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             graph_2_state,
                             language="python",
diff --git a/reflex/.templates/apps/demo/code/pages/home.py b/reflex/.templates/apps/demo/code/pages/home.py
index 3b94dfe0a..d1a667783 100644
--- a/reflex/.templates/apps/demo/code/pages/home.py
+++ b/reflex/.templates/apps/demo/code/pages/home.py
@@ -10,39 +10,39 @@ def home_page() -> rx.Component:
     Returns:
         rx.Component: The UI for the home page.
     """
-    return rx.box(
-        rx.vstack(
-            rx.heading(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.heading(
                 "Welcome to Reflex! 👋",
                 font_size="3em",
             ),
-            rx.text(
+            rx.chakra.text(
                 "Reflex is an open-source app framework built specifically to allow you to build web apps in pure python. 👈 Select a demo from the sidebar to see some examples of what Reflex can do!",
             ),
-            rx.heading(
+            rx.chakra.heading(
                 "Things to check out:",
                 font_size="2em",
             ),
-            rx.unordered_list(
-                rx.list_item(
+            rx.chakra.unordered_list(
+                rx.chakra.list_item(
                     "Take a look at ",
-                    rx.link(
+                    rx.chakra.link(
                         "reflex.dev",
                         href="https://reflex.dev",
                         color="rgb(107,99,246)",
                     ),
                 ),
-                rx.list_item(
+                rx.chakra.list_item(
                     "Check out our ",
-                    rx.link(
+                    rx.chakra.link(
                         "docs",
                         href="https://reflex.dev/docs/getting-started/introduction/",
                         color="rgb(107,99,246)",
                     ),
                 ),
-                rx.list_item(
+                rx.chakra.list_item(
                     "Ask a question in our ",
-                    rx.link(
+                    rx.chakra.link(
                         "community",
                         href="https://discord.gg/T5WSbC2YtQ",
                         color="rgb(107,99,246)",
diff --git a/reflex/.templates/apps/demo/code/sidebar.py b/reflex/.templates/apps/demo/code/sidebar.py
index 343da6e27..5f634402f 100644
--- a/reflex/.templates/apps/demo/code/sidebar.py
+++ b/reflex/.templates/apps/demo/code/sidebar.py
@@ -12,15 +12,15 @@ def sidebar_header() -> rx.Component:
     Returns:
         rx.Component: The sidebar header component.
     """
-    return rx.hstack(
-        rx.image(
+    return rx.chakra.hstack(
+        rx.chakra.image(
             src="/icon.svg",
             height="2em",
         ),
-        rx.spacer(),
-        rx.link(
-            rx.center(
-                rx.image(
+        rx.chakra.spacer(),
+        rx.chakra.link(
+            rx.chakra.center(
+                rx.chakra.image(
                     src="/github.svg",
                     height="3em",
                     padding="0.5em",
@@ -46,10 +46,10 @@ def sidebar_footer() -> rx.Component:
     Returns:
         rx.Component: The sidebar footer component.
     """
-    return rx.hstack(
-        rx.link(
-            rx.center(
-                rx.image(
+    return rx.chakra.hstack(
+        rx.chakra.link(
+            rx.chakra.center(
+                rx.chakra.image(
                     src="/paneleft.svg",
                     height="2em",
                     padding="0.5em",
@@ -65,15 +65,15 @@ def sidebar_footer() -> rx.Component:
             left=rx.cond(State.sidebar_displayed, "0px", "20.5em"),
             **overlapping_button_style,
         ),
-        rx.spacer(),
-        rx.link(
-            rx.text(
+        rx.chakra.spacer(),
+        rx.chakra.link(
+            rx.chakra.text(
                 "Docs",
             ),
             href="https://reflex.dev/docs/getting-started/introduction/",
         ),
-        rx.link(
-            rx.text(
+        rx.chakra.link(
+            rx.chakra.text(
                 "Blog",
             ),
             href="https://reflex.dev/blog/",
@@ -95,14 +95,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
     Returns:
         rx.Component: The sidebar item component.
     """
-    return rx.link(
-        rx.hstack(
-            rx.image(
+    return rx.chakra.link(
+        rx.chakra.hstack(
+            rx.chakra.image(
                 src=icon,
                 height="2.5em",
                 padding="0.5em",
             ),
-            rx.text(
+            rx.chakra.text(
                 text,
             ),
             bg=rx.cond(
@@ -131,10 +131,10 @@ def sidebar() -> rx.Component:
     Returns:
         rx.Component: The sidebar component.
     """
-    return rx.box(
-        rx.vstack(
+    return rx.chakra.box(
+        rx.chakra.vstack(
             sidebar_header(),
-            rx.vstack(
+            rx.chakra.vstack(
                 sidebar_item(
                     "Welcome",
                     "/github.svg",
@@ -165,7 +165,7 @@ def sidebar() -> rx.Component:
                 align_items="flex-start",
                 padding="1em",
             ),
-            rx.spacer(),
+            rx.chakra.spacer(),
             sidebar_footer(),
             height="100dvh",
         ),
diff --git a/reflex/.templates/apps/demo/code/styles.py b/reflex/.templates/apps/demo/code/styles.py
index 934821ad6..e31913194 100644
--- a/reflex/.templates/apps/demo/code/styles.py
+++ b/reflex/.templates/apps/demo/code/styles.py
@@ -46,12 +46,12 @@ overlapping_button_style = {
 }
 
 base_style = {
-    rx.MenuButton: {
+    rx.chakra.MenuButton: {
         "width": "3em",
         "height": "3em",
         **overlapping_button_style,
     },
-    rx.MenuItem: hover_accent_bg,
+    rx.chakra.MenuItem: hover_accent_bg,
 }
 
 tab_style = {
diff --git a/reflex/.templates/apps/demo/code/webui/components/chat.py b/reflex/.templates/apps/demo/code/webui/components/chat.py
index 9ac6ddf9e..fd9b6ba98 100644
--- a/reflex/.templates/apps/demo/code/webui/components/chat.py
+++ b/reflex/.templates/apps/demo/code/webui/components/chat.py
@@ -14,9 +14,9 @@ def message(qa: QA) -> rx.Component:
     Returns:
         A component displaying the question/answer pair.
     """
-    return rx.box(
-        rx.box(
-            rx.text(
+    return rx.chakra.box(
+        rx.chakra.box(
+            rx.chakra.text(
                 qa.question,
                 bg=styles.border_color,
                 shadow=styles.shadow_light,
@@ -25,8 +25,8 @@ def message(qa: QA) -> rx.Component:
             text_align="right",
             margin_top="1em",
         ),
-        rx.box(
-            rx.text(
+        rx.chakra.box(
+            rx.chakra.text(
                 qa.answer,
                 bg=styles.accent_color,
                 shadow=styles.shadow_light,
@@ -45,8 +45,8 @@ def chat() -> rx.Component:
     Returns:
         A component displaying all the messages in a single conversation.
     """
-    return rx.vstack(
-        rx.box(rx.foreach(State.chats[State.current_chat], message)),
+    return rx.chakra.vstack(
+        rx.chakra.box(rx.foreach(State.chats[State.current_chat], message)),
         py="8",
         flex="1",
         width="100%",
@@ -55,7 +55,7 @@ def chat() -> rx.Component:
         align_self="center",
         overflow="hidden",
         padding_bottom="5em",
-        **styles.base_style[rx.Vstack],
+        **styles.base_style[rx.chakra.Vstack],
     )
 
 
@@ -65,12 +65,12 @@ def action_bar() -> rx.Component:
     Returns:
         The action bar to send a new message.
     """
-    return rx.box(
-        rx.vstack(
-            rx.form(
-                rx.form_control(
-                    rx.hstack(
-                        rx.input(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.form(
+                rx.chakra.form_control(
+                    rx.chakra.hstack(
+                        rx.chakra.input(
                             placeholder="Type something...",
                             value=State.question,
                             on_change=State.set_question,
@@ -78,24 +78,24 @@ def action_bar() -> rx.Component:
                             _hover={"border_color": styles.accent_color},
                             style=styles.input_style,
                         ),
-                        rx.button(
+                        rx.chakra.button(
                             rx.cond(
                                 State.processing,
                                 loading_icon(height="1em"),
-                                rx.text("Send"),
+                                rx.chakra.text("Send"),
                             ),
                             type_="submit",
                             _hover={"bg": styles.accent_color},
                             style=styles.input_style,
                         ),
-                        **styles.base_style[rx.Hstack],
+                        **styles.base_style[rx.chakra.Hstack],
                     ),
                     is_disabled=State.processing,
                 ),
                 on_submit=State.process_question,
                 width="100%",
             ),
-            rx.text(
+            rx.chakra.text(
                 "ReflexGPT may return factually incorrect or misleading responses. Use discretion.",
                 font_size="xs",
                 color="#fff6",
@@ -104,7 +104,7 @@ def action_bar() -> rx.Component:
             width="100%",
             max_w="3xl",
             mx="auto",
-            **styles.base_style[rx.Vstack],
+            **styles.base_style[rx.chakra.Vstack],
         ),
         position="sticky",
         bottom="0",
diff --git a/reflex/.templates/apps/demo/code/webui/components/modal.py b/reflex/.templates/apps/demo/code/webui/components/modal.py
index ce51b9b6b..c76b8dffd 100644
--- a/reflex/.templates/apps/demo/code/webui/components/modal.py
+++ b/reflex/.templates/apps/demo/code/webui/components/modal.py
@@ -9,13 +9,13 @@ def modal() -> rx.Component:
     Returns:
         The modal component.
     """
-    return rx.modal(
-        rx.modal_overlay(
-            rx.modal_content(
-                rx.modal_header(
-                    rx.hstack(
-                        rx.text("Create new chat"),
-                        rx.icon(
+    return rx.chakra.modal(
+        rx.chakra.modal_overlay(
+            rx.chakra.modal_content(
+                rx.chakra.modal_header(
+                    rx.chakra.hstack(
+                        rx.chakra.text("Create new chat"),
+                        rx.chakra.icon(
                             tag="close",
                             font_size="sm",
                             on_click=State.toggle_modal,
@@ -27,8 +27,8 @@ def modal() -> rx.Component:
                         justify_content="space-between",
                     )
                 ),
-                rx.modal_body(
-                    rx.input(
+                rx.chakra.modal_body(
+                    rx.chakra.input(
                         placeholder="Type something...",
                         on_blur=State.set_new_chat_name,
                         bg="#222",
@@ -36,8 +36,8 @@ def modal() -> rx.Component:
                         _placeholder={"color": "#fffa"},
                     ),
                 ),
-                rx.modal_footer(
-                    rx.button(
+                rx.chakra.modal_footer(
+                    rx.chakra.button(
                         "Create",
                         bg="#5535d4",
                         box_shadow="md",
diff --git a/reflex/.templates/apps/demo/code/webui/components/navbar.py b/reflex/.templates/apps/demo/code/webui/components/navbar.py
index 35c3e2522..e836f29ec 100644
--- a/reflex/.templates/apps/demo/code/webui/components/navbar.py
+++ b/reflex/.templates/apps/demo/code/webui/components/navbar.py
@@ -5,18 +5,18 @@ from ...webui.state import State
 
 
 def navbar():
-    return rx.box(
-        rx.hstack(
-            rx.hstack(
-                rx.icon(
+    return rx.chakra.box(
+        rx.chakra.hstack(
+            rx.chakra.hstack(
+                rx.chakra.icon(
                     tag="hamburger",
                     mr=4,
                     on_click=State.toggle_drawer,
                     cursor="pointer",
                 ),
-                rx.link(
-                    rx.box(
-                        rx.image(src="favicon.ico", width=30, height="auto"),
+                rx.chakra.link(
+                    rx.chakra.box(
+                        rx.chakra.image(src="favicon.ico", width=30, height="auto"),
                         p="1",
                         border_radius="6",
                         bg="#F0F0F0",
@@ -24,17 +24,19 @@ def navbar():
                     ),
                     href="/",
                 ),
-                rx.breadcrumb(
-                    rx.breadcrumb_item(
-                        rx.heading("ReflexGPT", size="sm"),
+                rx.chakra.breadcrumb(
+                    rx.chakra.breadcrumb_item(
+                        rx.chakra.heading("ReflexGPT", size="sm"),
                     ),
-                    rx.breadcrumb_item(
-                        rx.text(State.current_chat, size="sm", font_weight="normal"),
+                    rx.chakra.breadcrumb_item(
+                        rx.chakra.text(
+                            State.current_chat, size="sm", font_weight="normal"
+                        ),
                     ),
                 ),
             ),
-            rx.hstack(
-                rx.button(
+            rx.chakra.hstack(
+                rx.chakra.button(
                     "+ New chat",
                     bg=styles.accent_color,
                     px="4",
@@ -42,15 +44,15 @@ def navbar():
                     h="auto",
                     on_click=State.toggle_modal,
                 ),
-                rx.menu(
-                    rx.menu_button(
-                        rx.avatar(name="User", size="md"),
-                        rx.box(),
+                rx.chakra.menu(
+                    rx.chakra.menu_button(
+                        rx.chakra.avatar(name="User", size="md"),
+                        rx.chakra.box(),
                     ),
-                    rx.menu_list(
-                        rx.menu_item("Help"),
-                        rx.menu_divider(),
-                        rx.menu_item("Settings"),
+                    rx.chakra.menu_list(
+                        rx.chakra.menu_item("Help"),
+                        rx.chakra.menu_divider(),
+                        rx.chakra.menu_item("Settings"),
                     ),
                 ),
                 spacing="8",
diff --git a/reflex/.templates/apps/demo/code/webui/components/sidebar.py b/reflex/.templates/apps/demo/code/webui/components/sidebar.py
index 91b7acd8d..b4ffdd41f 100644
--- a/reflex/.templates/apps/demo/code/webui/components/sidebar.py
+++ b/reflex/.templates/apps/demo/code/webui/components/sidebar.py
@@ -13,16 +13,16 @@ def sidebar_chat(chat: str) -> rx.Component:
     Returns:
         The sidebar chat item.
     """
-    return rx.hstack(
-        rx.box(
+    return rx.chakra.hstack(
+        rx.chakra.box(
             chat,
             on_click=lambda: State.set_chat(chat),
             style=styles.sidebar_style,
             color=styles.icon_color,
             flex="1",
         ),
-        rx.box(
-            rx.icon(
+        rx.chakra.box(
+            rx.chakra.icon(
                 tag="delete",
                 style=styles.icon_style,
                 on_click=State.delete_chat,
@@ -40,21 +40,21 @@ def sidebar() -> rx.Component:
     Returns:
         The sidebar component.
     """
-    return rx.drawer(
-        rx.drawer_overlay(
-            rx.drawer_content(
-                rx.drawer_header(
-                    rx.hstack(
-                        rx.text("Chats"),
-                        rx.icon(
+    return rx.chakra.drawer(
+        rx.chakra.drawer_overlay(
+            rx.chakra.drawer_content(
+                rx.chakra.drawer_header(
+                    rx.chakra.hstack(
+                        rx.chakra.text("Chats"),
+                        rx.chakra.icon(
                             tag="close",
                             on_click=State.toggle_drawer,
                             style=styles.icon_style,
                         ),
                     )
                 ),
-                rx.drawer_body(
-                    rx.vstack(
+                rx.chakra.drawer_body(
+                    rx.chakra.vstack(
                         rx.foreach(State.chat_titles, lambda chat: sidebar_chat(chat)),
                         align_items="stretch",
                     )
diff --git a/reflex/.templates/apps/demo/code/webui/styles.py b/reflex/.templates/apps/demo/code/webui/styles.py
index 7abc579fb..62212ac1a 100644
--- a/reflex/.templates/apps/demo/code/webui/styles.py
+++ b/reflex/.templates/apps/demo/code/webui/styles.py
@@ -45,43 +45,43 @@ sidebar_style = dict(
 )
 
 base_style = {
-    rx.Avatar: {
+    rx.chakra.Avatar: {
         "shadow": shadow,
         "color": text_light_color,
         # "bg": border_color,
     },
-    rx.Button: {
+    rx.chakra.Button: {
         "shadow": shadow,
         "color": text_light_color,
         "_hover": {
             "bg": accent_dark,
         },
     },
-    rx.Menu: {
+    rx.chakra.Menu: {
         "bg": bg_dark_color,
         "border": f"red",
     },
-    rx.MenuList: {
+    rx.chakra.MenuList: {
         "bg": bg_dark_color,
         "border": f"1.5px solid {bg_medium_color}",
     },
-    rx.MenuDivider: {
+    rx.chakra.MenuDivider: {
         "border": f"1px solid {bg_medium_color}",
     },
-    rx.MenuItem: {
+    rx.chakra.MenuItem: {
         "bg": bg_dark_color,
         "color": text_light_color,
     },
-    rx.DrawerContent: {
+    rx.chakra.DrawerContent: {
         "bg": bg_dark_color,
         "color": text_light_color,
         "opacity": "0.9",
     },
-    rx.Hstack: {
+    rx.chakra.Hstack: {
         "align_items": "center",
         "justify_content": "space-between",
     },
-    rx.Vstack: {
+    rx.chakra.Vstack: {
         "align_items": "stretch",
         "justify_content": "space-between",
     },
diff --git a/reflex/.templates/apps/sidebar/code/components/sidebar.py b/reflex/.templates/apps/sidebar/code/components/sidebar.py
index 26f2362e0..8e3d2f736 100644
--- a/reflex/.templates/apps/sidebar/code/components/sidebar.py
+++ b/reflex/.templates/apps/sidebar/code/components/sidebar.py
@@ -11,17 +11,17 @@ def sidebar_header() -> rx.Component:
     Returns:
         The sidebar header component.
     """
-    return rx.hstack(
+    return rx.chakra.hstack(
         # The logo.
-        rx.image(
+        rx.chakra.image(
             src="/icon.svg",
             height="2em",
         ),
-        rx.spacer(),
+        rx.chakra.spacer(),
         # Link to Reflex GitHub repo.
-        rx.link(
-            rx.center(
-                rx.image(
+        rx.chakra.link(
+            rx.chakra.center(
+                rx.chakra.image(
                     src="/github.svg",
                     height="3em",
                     padding="0.5em",
@@ -47,14 +47,14 @@ def sidebar_footer() -> rx.Component:
     Returns:
         The sidebar footer component.
     """
-    return rx.hstack(
-        rx.spacer(),
-        rx.link(
-            rx.text("Docs"),
+    return rx.chakra.hstack(
+        rx.chakra.spacer(),
+        rx.chakra.link(
+            rx.chakra.text("Docs"),
             href="https://reflex.dev/docs/getting-started/introduction/",
         ),
-        rx.link(
-            rx.text("Blog"),
+        rx.chakra.link(
+            rx.chakra.text("Blog"),
             href="https://reflex.dev/blog/",
         ),
         width="100%",
@@ -79,14 +79,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
         (rx.State.router.page.path == "/") & text == "Home"
     )
 
-    return rx.link(
-        rx.hstack(
-            rx.image(
+    return rx.chakra.link(
+        rx.chakra.hstack(
+            rx.chakra.image(
                 src=icon,
                 height="2.5em",
                 padding="0.5em",
             ),
-            rx.text(
+            rx.chakra.text(
                 text,
             ),
             bg=rx.cond(
@@ -118,10 +118,10 @@ def sidebar() -> rx.Component:
     # Get all the decorated pages and add them to the sidebar.
     from reflex.page import get_decorated_pages
 
-    return rx.box(
-        rx.vstack(
+    return rx.chakra.box(
+        rx.chakra.vstack(
             sidebar_header(),
-            rx.vstack(
+            rx.chakra.vstack(
                 *[
                     sidebar_item(
                         text=page.get("title", page["route"].strip("/").capitalize()),
@@ -135,7 +135,7 @@ def sidebar() -> rx.Component:
                 align_items="flex-start",
                 padding="1em",
             ),
-            rx.spacer(),
+            rx.chakra.spacer(),
             sidebar_footer(),
             height="100dvh",
         ),
diff --git a/reflex/.templates/apps/sidebar/code/pages/dashboard.py b/reflex/.templates/apps/sidebar/code/pages/dashboard.py
index e0a895009..bfe29615c 100644
--- a/reflex/.templates/apps/sidebar/code/pages/dashboard.py
+++ b/reflex/.templates/apps/sidebar/code/pages/dashboard.py
@@ -11,11 +11,11 @@ def dashboard() -> rx.Component:
     Returns:
         The UI for the dashboard page.
     """
-    return rx.vstack(
-        rx.heading("Dashboard", font_size="3em"),
-        rx.text("Welcome to Reflex!"),
-        rx.text(
+    return rx.chakra.vstack(
+        rx.chakra.heading("Dashboard", font_size="3em"),
+        rx.chakra.text("Welcome to Reflex!"),
+        rx.chakra.text(
             "You can edit this page in ",
-            rx.code("{your_app}/pages/dashboard.py"),
+            rx.chakra.code("{your_app}/pages/dashboard.py"),
         ),
     )
diff --git a/reflex/.templates/apps/sidebar/code/pages/settings.py b/reflex/.templates/apps/sidebar/code/pages/settings.py
index 7bee3bf86..94b89d691 100644
--- a/reflex/.templates/apps/sidebar/code/pages/settings.py
+++ b/reflex/.templates/apps/sidebar/code/pages/settings.py
@@ -12,11 +12,11 @@ def settings() -> rx.Component:
     Returns:
         The UI for the settings page.
     """
-    return rx.vstack(
-        rx.heading("Settings", font_size="3em"),
-        rx.text("Welcome to Reflex!"),
-        rx.text(
+    return rx.chakra.vstack(
+        rx.chakra.heading("Settings", font_size="3em"),
+        rx.chakra.text("Welcome to Reflex!"),
+        rx.chakra.text(
             "You can edit this page in ",
-            rx.code("{your_app}/pages/settings.py"),
+            rx.chakra.code("{your_app}/pages/settings.py"),
         ),
     )
diff --git a/reflex/.templates/apps/sidebar/code/styles.py b/reflex/.templates/apps/sidebar/code/styles.py
index ca94b8dfd..d11a1e580 100644
--- a/reflex/.templates/apps/sidebar/code/styles.py
+++ b/reflex/.templates/apps/sidebar/code/styles.py
@@ -36,17 +36,17 @@ overlapping_button_style = {
 }
 
 base_style = {
-    rx.MenuButton: {
+    rx.chakra.MenuButton: {
         "width": "3em",
         "height": "3em",
         **overlapping_button_style,
     },
-    rx.MenuItem: hover_accent_bg,
+    rx.chakra.MenuItem: hover_accent_bg,
 }
 
 markdown_style = {
-    "code": lambda text: rx.code(text, color="#1F1944", bg="#EAE4FD"),
-    "a": lambda text, **props: rx.link(
+    "code": lambda text: rx.chakra.code(text, color="#1F1944", bg="#EAE4FD"),
+    "a": lambda text, **props: rx.chakra.link(
         text,
         **props,
         font_weight="bold",
diff --git a/reflex/.templates/apps/sidebar/code/templates/template.py b/reflex/.templates/apps/sidebar/code/templates/template.py
index 4664b6035..1ba46d309 100644
--- a/reflex/.templates/apps/sidebar/code/templates/template.py
+++ b/reflex/.templates/apps/sidebar/code/templates/template.py
@@ -25,19 +25,19 @@ def menu_button() -> rx.Component:
     """
     from reflex.page import get_decorated_pages
 
-    return rx.box(
-        rx.menu(
-            rx.menu_button(
-                rx.icon(
+    return rx.chakra.box(
+        rx.chakra.menu(
+            rx.chakra.menu_button(
+                rx.chakra.icon(
                     tag="hamburger",
                     size="4em",
                     color=styles.text_color,
                 ),
             ),
-            rx.menu_list(
+            rx.chakra.menu_list(
                 *[
-                    rx.menu_item(
-                        rx.link(
+                    rx.chakra.menu_item(
+                        rx.chakra.link(
                             page["title"],
                             href=page["route"],
                             width="100%",
@@ -45,12 +45,16 @@ def menu_button() -> rx.Component:
                     )
                     for page in get_decorated_pages()
                 ],
-                rx.menu_divider(),
-                rx.menu_item(
-                    rx.link("About", href="https://github.com/reflex-dev", width="100%")
+                rx.chakra.menu_divider(),
+                rx.chakra.menu_item(
+                    rx.chakra.link(
+                        "About", href="https://github.com/reflex-dev", width="100%"
+                    )
                 ),
-                rx.menu_item(
-                    rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%")
+                rx.chakra.menu_item(
+                    rx.chakra.link(
+                        "Contact", href="mailto:founders@=reflex.dev", width="100%"
+                    )
                 ),
             ),
         ),
@@ -107,10 +111,10 @@ def template(
             on_load=on_load,
         )
         def templated_page():
-            return rx.hstack(
+            return rx.chakra.hstack(
                 sidebar(),
-                rx.box(
-                    rx.box(
+                rx.chakra.box(
+                    rx.chakra.box(
                         page_content(),
                         **styles.template_content_style,
                     ),
diff --git a/reflex/.templates/web/utils/state.js b/reflex/.templates/web/utils/state.js
index b61d1da67..0fe7648ba 100644
--- a/reflex/.templates/web/utils/state.js
+++ b/reflex/.templates/web/utils/state.js
@@ -599,7 +599,12 @@ export const getRefValue = (ref) => {
     return;
   }
   if (ref.current.type == "checkbox") {
-    return ref.current.checked;
+    return ref.current.checked;  // chakra
+  } else if (ref.current.className.includes("rt-CheckboxButton") || ref.current.className.includes("rt-SwitchButton")) {
+    return ref.current.ariaChecked == "true";  // radix
+  } else if (ref.current.className.includes("rt-SliderRoot")) {
+    // find the actual slider
+    return ref.current.querySelector(".rt-SliderThumb").ariaValueNow;
   } else {
     //querySelector(":checked") is needed to get value from radio_group
     return ref.current.value || (ref.current.querySelector(':checked') && ref.current.querySelector(':checked').value);
diff --git a/reflex/__init__.py b/reflex/__init__.py
index 0fb530e90..276c05b99 100644
--- a/reflex/__init__.py
+++ b/reflex/__init__.py
@@ -4,6 +4,7 @@ Anything imported here will be available in the default Reflex import as `rx.*`.
 To signal to typecheckers that something should be reexported,
 we use the Flask "import name as name" syntax.
 """
+
 from __future__ import annotations
 
 import importlib
@@ -14,235 +15,99 @@ from reflex.utils import console
 from reflex.utils.format import to_snake_case
 
 _ALL_COMPONENTS = [
-    "Accordion",
-    "AccordionButton",
-    "AccordionIcon",
-    "AccordionItem",
-    "AccordionPanel",
-    "Alert",
-    "AlertDescription",
-    "AlertDialog",
-    "AlertDialogBody",
-    "AlertDialogContent",
-    "AlertDialogFooter",
-    "AlertDialogHeader",
-    "AlertDialogOverlay",
-    "AlertIcon",
-    "AlertTitle",
-    "AspectRatio",
-    "Audio",
-    "Avatar",
-    "AvatarBadge",
-    "AvatarGroup",
-    "Badge",
-    "Box",
-    "Breadcrumb",
-    "BreadcrumbItem",
-    "BreadcrumbLink",
-    "BreadcrumbSeparator",
-    "Button",
-    "ButtonGroup",
-    "Card",
-    "CardBody",
-    "CardFooter",
-    "CardHeader",
-    "Center",
-    "Checkbox",
-    "CheckboxGroup",
-    "CircularProgress",
-    "CircularProgressLabel",
-    "Circle",
-    "Code",
-    "CodeBlock",
-    "Collapse",
-    "ColorModeButton",
-    "ColorModeIcon",
-    "ColorModeSwitch",
-    "Component",
-    "Cond",
-    "ConnectionBanner",
-    "ConnectionModal",
-    "Container",
-    "DataTable",
-    "DataEditor",
-    "DataEditorTheme",
-    "DatePicker",
-    "DateTimePicker",
-    "DebounceInput",
-    "Divider",
-    "Drawer",
-    "DrawerBody",
-    "DrawerCloseButton",
-    "DrawerContent",
-    "DrawerFooter",
-    "DrawerHeader",
-    "DrawerOverlay",
-    "Editable",
-    "EditableInput",
-    "EditablePreview",
-    "EditableTextarea",
-    "Editor",
-    "Email",
-    "Fade",
-    "Flex",
-    "Foreach",
-    "Form",
-    "FormControl",
-    "FormErrorMessage",
-    "FormHelperText",
-    "FormLabel",
-    "Fragment",
-    "Grid",
-    "GridItem",
-    "Heading",
-    "Highlight",
-    "Hstack",
-    "Html",
-    "Icon",
-    "IconButton",
-    "Image",
-    "Input",
-    "InputGroup",
-    "InputLeftAddon",
-    "InputLeftElement",
-    "InputRightAddon",
-    "InputRightElement",
-    "Kbd",
-    "Link",
-    "LinkBox",
-    "LinkOverlay",
-    "List",
-    "ListItem",
-    "Markdown",
-    "Match",
-    "Menu",
-    "MenuButton",
-    "MenuDivider",
-    "MenuGroup",
-    "MenuItem",
-    "MenuItemOption",
-    "MenuList",
-    "MenuOptionGroup",
-    "Modal",
-    "ModalBody",
-    "ModalCloseButton",
-    "ModalContent",
-    "ModalFooter",
-    "ModalHeader",
-    "ModalOverlay",
-    "Moment",
-    "MultiSelect",
-    "MultiSelectOption",
-    "NextLink",
-    "NumberDecrementStepper",
-    "NumberIncrementStepper",
-    "NumberInput",
-    "NumberInputField",
-    "NumberInputStepper",
-    "Option",
-    "OrderedList",
-    "Password",
-    "PinInput",
-    "PinInputField",
-    "Plotly",
-    "Popover",
-    "PopoverAnchor",
-    "PopoverArrow",
-    "PopoverBody",
-    "PopoverCloseButton",
-    "PopoverContent",
-    "PopoverFooter",
-    "PopoverHeader",
-    "PopoverTrigger",
-    "Progress",
-    "Radio",
-    "RadioGroup",
-    "RangeSlider",
-    "RangeSliderFilledTrack",
-    "RangeSliderThumb",
-    "RangeSliderTrack",
-    "ResponsiveGrid",
-    "ScaleFade",
-    "Script",
-    "Select",
-    "Skeleton",
-    "SkeletonCircle",
-    "SkeletonText",
-    "Slide",
-    "SlideFade",
-    "Slider",
-    "SliderFilledTrack",
-    "SliderMark",
-    "SliderThumb",
-    "SliderTrack",
-    "Spacer",
-    "Span",
-    "Spinner",
-    "Square",
-    "Stack",
-    "Stat",
-    "StatArrow",
-    "StatGroup",
-    "StatHelpText",
-    "StatLabel",
-    "StatNumber",
-    "Step",
-    "StepDescription",
-    "StepIcon",
-    "StepIndicator",
-    "StepNumber",
-    "StepSeparator",
-    "StepStatus",
-    "StepTitle",
-    "Stepper",
-    "Switch",
-    "Tab",
-    "TabList",
-    "TabPanel",
-    "TabPanels",
-    "Table",
-    "TableCaption",
-    "TableContainer",
-    "Tabs",
-    "Tag",
-    "TagCloseButton",
-    "TagLabel",
-    "TagLeftIcon",
-    "TagRightIcon",
-    "Tbody",
-    "Td",
-    "Text",
-    "TextArea",
-    "Tfoot",
-    "Th",
-    "Thead",
-    "TimePicker",
-    "Tooltip",
-    "Tr",
-    "UnorderedList",
-    "Upload",
-    "Video",
-    "VisuallyHidden",
-    "Vstack",
-    "Wrap",
-    "WrapItem",
-]
-
-_ALL_COMPONENTS += [to_snake_case(component) for component in _ALL_COMPONENTS]
-_ALL_COMPONENTS += [
-    "cancel_upload",
-    "components",
+    # Core
+    "color",
+    "cond",
+    "foreach",
+    "html",
+    "match",
     "color_mode_cond",
+    "connection_banner",
+    "connection_modal",
+    "debounce_input",
+    # Base
+    "fragment",
+    "Fragment",
+    "image",
+    "script",
+    # Responsive
     "desktop_only",
-    "mobile_only",
-    "tablet_only",
     "mobile_and_tablet",
+    "mobile_only",
     "tablet_and_desktop",
-    "selected_files",
+    "tablet_only",
+    # Upload
+    "cancel_upload",
     "clear_selected_files",
+    "get_upload_dir",
+    "get_upload_url",
+    "selected_files",
+    "upload",
+    # Radix
+    "accordion",
+    "alert_dialog",
+    "aspect_ratio",
+    "avatar",
+    "badge",
+    "blockquote",
+    "box",
+    "button",
+    "callout",
+    "card",
+    "center",
+    "checkbox",
+    "code",
+    "container",
+    "context_menu",
+    "dialog",
+    "divider",
+    "drawer",
+    "flex",
+    "form",
+    "grid",
+    "heading",
+    "hover_card",
+    "hstack",
+    "icon_button",
+    "inset",
+    "input",
+    "link",
+    "menu",
+    "popover",
+    "progress",
+    "radio",
+    "scroll_area",
+    "section",
+    "select",
+    "slider",
+    "spacer",
+    "stack",
+    "switch",
+    "table",
+    "tabs",
+    "text",
+    "text_area",
+    "theme",
+    "theme_panel",
+    "tooltip",
+    "vstack",
+    # Other
+    "code_block",
+    "data_editor",
+    "data_editor_theme",
+    "data_table",
+    "plotly",
+    "audio",
+    "video",
+    "editor",
     "EditorButtonList",
     "EditorOptions",
-    "NoSSRComponent",
+    "icon",
+    "markdown",
+    "list_item",
+    "unordered_list",
+    "ordered_list",
+    "moment",
 ]
 
 _MAPPING = {
@@ -251,12 +116,13 @@ _MAPPING = {
     "reflex.base": ["base", "Base"],
     "reflex.compiler": ["compiler"],
     "reflex.compiler.utils": ["get_asset_path"],
-    "reflex.components": _ALL_COMPONENTS + ["chakra", "next"],
-    "reflex.components.component": ["memo"],
-    "reflex.components.core": ["color"],
+    "reflex.components": _ALL_COMPONENTS,
+    "reflex.components.component": ["Component", "NoSSRComponent", "memo"],
+    "reflex.components.chakra": ["chakra"],
     "reflex.components.el": ["el"],
     "reflex.components.lucide": ["lucide"],
-    "reflex.components.radix": ["radix"],
+    "reflex.components.next": ["next"],
+    "reflex.components.radix": ["radix", "color_mode"],
     "reflex.components.recharts": ["recharts"],
     "reflex.components.moment.moment": ["MomentDelta"],
     "reflex.config": ["config", "Config", "DBConfig"],
@@ -285,7 +151,7 @@ _MAPPING = {
     "reflex.page": ["page"],
     "reflex.route": ["route"],
     "reflex.state": ["state", "var", "Cookie", "LocalStorage", "State"],
-    "reflex.style": ["style", "color_mode", "toggle_color_mode"],
+    "reflex.style": ["style", "toggle_color_mode"],
     "reflex.testing": ["testing"],
     "reflex.utils": ["utils"],
     "reflex.vars": ["vars", "cached_var", "Var"],
diff --git a/reflex/__init__.pyi b/reflex/__init__.pyi
index a259161c8..65e8f36fe 100644
--- a/reflex/__init__.pyi
+++ b/reflex/__init__.pyi
@@ -7,450 +7,102 @@ from reflex import base as base
 from reflex.base import Base as Base
 from reflex import compiler as compiler
 from reflex.compiler.utils import get_asset_path as get_asset_path
-from reflex.components import Accordion as Accordion
-from reflex.components import AccordionButton as AccordionButton
-from reflex.components import AccordionIcon as AccordionIcon
-from reflex.components import AccordionItem as AccordionItem
-from reflex.components import AccordionPanel as AccordionPanel
-from reflex.components import Alert as Alert
-from reflex.components import AlertDescription as AlertDescription
-from reflex.components import AlertDialog as AlertDialog
-from reflex.components import AlertDialogBody as AlertDialogBody
-from reflex.components import AlertDialogContent as AlertDialogContent
-from reflex.components import AlertDialogFooter as AlertDialogFooter
-from reflex.components import AlertDialogHeader as AlertDialogHeader
-from reflex.components import AlertDialogOverlay as AlertDialogOverlay
-from reflex.components import AlertIcon as AlertIcon
-from reflex.components import AlertTitle as AlertTitle
-from reflex.components import AspectRatio as AspectRatio
-from reflex.components import Audio as Audio
-from reflex.components import Avatar as Avatar
-from reflex.components import AvatarBadge as AvatarBadge
-from reflex.components import AvatarGroup as AvatarGroup
-from reflex.components import Badge as Badge
-from reflex.components import Box as Box
-from reflex.components import Breadcrumb as Breadcrumb
-from reflex.components import BreadcrumbItem as BreadcrumbItem
-from reflex.components import BreadcrumbLink as BreadcrumbLink
-from reflex.components import BreadcrumbSeparator as BreadcrumbSeparator
-from reflex.components import Button as Button
-from reflex.components import ButtonGroup as ButtonGroup
-from reflex.components import Card as Card
-from reflex.components import CardBody as CardBody
-from reflex.components import CardFooter as CardFooter
-from reflex.components import CardHeader as CardHeader
-from reflex.components import Center as Center
-from reflex.components import Checkbox as Checkbox
-from reflex.components import CheckboxGroup as CheckboxGroup
-from reflex.components import CircularProgress as CircularProgress
-from reflex.components import CircularProgressLabel as CircularProgressLabel
-from reflex.components import Circle as Circle
-from reflex.components import Code as Code
-from reflex.components import CodeBlock as CodeBlock
-from reflex.components import Collapse as Collapse
-from reflex.components import ColorModeButton as ColorModeButton
-from reflex.components import ColorModeIcon as ColorModeIcon
-from reflex.components import ColorModeSwitch as ColorModeSwitch
-from reflex.components import Component as Component
-from reflex.components import Cond as Cond
-from reflex.components import ConnectionBanner as ConnectionBanner
-from reflex.components import ConnectionModal as ConnectionModal
-from reflex.components import Container as Container
-from reflex.components import DataTable as DataTable
-from reflex.components import DataEditor as DataEditor
-from reflex.components import DataEditorTheme as DataEditorTheme
-from reflex.components import DatePicker as DatePicker
-from reflex.components import DateTimePicker as DateTimePicker
-from reflex.components import DebounceInput as DebounceInput
-from reflex.components import Divider as Divider
-from reflex.components import Drawer as Drawer
-from reflex.components import DrawerBody as DrawerBody
-from reflex.components import DrawerCloseButton as DrawerCloseButton
-from reflex.components import DrawerContent as DrawerContent
-from reflex.components import DrawerFooter as DrawerFooter
-from reflex.components import DrawerHeader as DrawerHeader
-from reflex.components import DrawerOverlay as DrawerOverlay
-from reflex.components import Editable as Editable
-from reflex.components import EditableInput as EditableInput
-from reflex.components import EditablePreview as EditablePreview
-from reflex.components import EditableTextarea as EditableTextarea
-from reflex.components import Editor as Editor
-from reflex.components import Email as Email
-from reflex.components import Fade as Fade
-from reflex.components import Flex as Flex
-from reflex.components import Foreach as Foreach
-from reflex.components import Form as Form
-from reflex.components import FormControl as FormControl
-from reflex.components import FormErrorMessage as FormErrorMessage
-from reflex.components import FormHelperText as FormHelperText
-from reflex.components import FormLabel as FormLabel
-from reflex.components import Fragment as Fragment
-from reflex.components import Grid as Grid
-from reflex.components import GridItem as GridItem
-from reflex.components import Heading as Heading
-from reflex.components import Highlight as Highlight
-from reflex.components import Hstack as Hstack
-from reflex.components import Html as Html
-from reflex.components import Icon as Icon
-from reflex.components import IconButton as IconButton
-from reflex.components import Image as Image
-from reflex.components import Input as Input
-from reflex.components import InputGroup as InputGroup
-from reflex.components import InputLeftAddon as InputLeftAddon
-from reflex.components import InputLeftElement as InputLeftElement
-from reflex.components import InputRightAddon as InputRightAddon
-from reflex.components import InputRightElement as InputRightElement
-from reflex.components import Kbd as Kbd
-from reflex.components import Link as Link
-from reflex.components import LinkBox as LinkBox
-from reflex.components import LinkOverlay as LinkOverlay
-from reflex.components import List as List
-from reflex.components import ListItem as ListItem
-from reflex.components import Markdown as Markdown
-from reflex.components import Match as Match
-from reflex.components import Menu as Menu
-from reflex.components import MenuButton as MenuButton
-from reflex.components import MenuDivider as MenuDivider
-from reflex.components import MenuGroup as MenuGroup
-from reflex.components import MenuItem as MenuItem
-from reflex.components import MenuItemOption as MenuItemOption
-from reflex.components import MenuList as MenuList
-from reflex.components import MenuOptionGroup as MenuOptionGroup
-from reflex.components import Modal as Modal
-from reflex.components import ModalBody as ModalBody
-from reflex.components import ModalCloseButton as ModalCloseButton
-from reflex.components import ModalContent as ModalContent
-from reflex.components import ModalFooter as ModalFooter
-from reflex.components import ModalHeader as ModalHeader
-from reflex.components import ModalOverlay as ModalOverlay
-from reflex.components import Moment as Moment
-from reflex.components import MultiSelect as MultiSelect
-from reflex.components import MultiSelectOption as MultiSelectOption
-from reflex.components import NextLink as NextLink
-from reflex.components import NumberDecrementStepper as NumberDecrementStepper
-from reflex.components import NumberIncrementStepper as NumberIncrementStepper
-from reflex.components import NumberInput as NumberInput
-from reflex.components import NumberInputField as NumberInputField
-from reflex.components import NumberInputStepper as NumberInputStepper
-from reflex.components import Option as Option
-from reflex.components import OrderedList as OrderedList
-from reflex.components import Password as Password
-from reflex.components import PinInput as PinInput
-from reflex.components import PinInputField as PinInputField
-from reflex.components import Plotly as Plotly
-from reflex.components import Popover as Popover
-from reflex.components import PopoverAnchor as PopoverAnchor
-from reflex.components import PopoverArrow as PopoverArrow
-from reflex.components import PopoverBody as PopoverBody
-from reflex.components import PopoverCloseButton as PopoverCloseButton
-from reflex.components import PopoverContent as PopoverContent
-from reflex.components import PopoverFooter as PopoverFooter
-from reflex.components import PopoverHeader as PopoverHeader
-from reflex.components import PopoverTrigger as PopoverTrigger
-from reflex.components import Progress as Progress
-from reflex.components import Radio as Radio
-from reflex.components import RadioGroup as RadioGroup
-from reflex.components import RangeSlider as RangeSlider
-from reflex.components import RangeSliderFilledTrack as RangeSliderFilledTrack
-from reflex.components import RangeSliderThumb as RangeSliderThumb
-from reflex.components import RangeSliderTrack as RangeSliderTrack
-from reflex.components import ResponsiveGrid as ResponsiveGrid
-from reflex.components import ScaleFade as ScaleFade
-from reflex.components import Script as Script
-from reflex.components import Select as Select
-from reflex.components import Skeleton as Skeleton
-from reflex.components import SkeletonCircle as SkeletonCircle
-from reflex.components import SkeletonText as SkeletonText
-from reflex.components import Slide as Slide
-from reflex.components import SlideFade as SlideFade
-from reflex.components import Slider as Slider
-from reflex.components import SliderFilledTrack as SliderFilledTrack
-from reflex.components import SliderMark as SliderMark
-from reflex.components import SliderThumb as SliderThumb
-from reflex.components import SliderTrack as SliderTrack
-from reflex.components import Spacer as Spacer
-from reflex.components import Span as Span
-from reflex.components import Spinner as Spinner
-from reflex.components import Square as Square
-from reflex.components import Stack as Stack
-from reflex.components import Stat as Stat
-from reflex.components import StatArrow as StatArrow
-from reflex.components import StatGroup as StatGroup
-from reflex.components import StatHelpText as StatHelpText
-from reflex.components import StatLabel as StatLabel
-from reflex.components import StatNumber as StatNumber
-from reflex.components import Step as Step
-from reflex.components import StepDescription as StepDescription
-from reflex.components import StepIcon as StepIcon
-from reflex.components import StepIndicator as StepIndicator
-from reflex.components import StepNumber as StepNumber
-from reflex.components import StepSeparator as StepSeparator
-from reflex.components import StepStatus as StepStatus
-from reflex.components import StepTitle as StepTitle
-from reflex.components import Stepper as Stepper
-from reflex.components import Switch as Switch
-from reflex.components import Tab as Tab
-from reflex.components import TabList as TabList
-from reflex.components import TabPanel as TabPanel
-from reflex.components import TabPanels as TabPanels
-from reflex.components import Table as Table
-from reflex.components import TableCaption as TableCaption
-from reflex.components import TableContainer as TableContainer
-from reflex.components import Tabs as Tabs
-from reflex.components import Tag as Tag
-from reflex.components import TagCloseButton as TagCloseButton
-from reflex.components import TagLabel as TagLabel
-from reflex.components import TagLeftIcon as TagLeftIcon
-from reflex.components import TagRightIcon as TagRightIcon
-from reflex.components import Tbody as Tbody
-from reflex.components import Td as Td
-from reflex.components import Text as Text
-from reflex.components import TextArea as TextArea
-from reflex.components import Tfoot as Tfoot
-from reflex.components import Th as Th
-from reflex.components import Thead as Thead
-from reflex.components import TimePicker as TimePicker
-from reflex.components import Tooltip as Tooltip
-from reflex.components import Tr as Tr
-from reflex.components import UnorderedList as UnorderedList
-from reflex.components import Upload as Upload
-from reflex.components import Video as Video
-from reflex.components import VisuallyHidden as VisuallyHidden
-from reflex.components import Vstack as Vstack
-from reflex.components import Wrap as Wrap
-from reflex.components import WrapItem as WrapItem
-from reflex.components import accordion as accordion
-from reflex.components import accordion_button as accordion_button
-from reflex.components import accordion_icon as accordion_icon
-from reflex.components import accordion_item as accordion_item
-from reflex.components import accordion_panel as accordion_panel
-from reflex.components import alert as alert
-from reflex.components import alert_description as alert_description
-from reflex.components import alert_dialog as alert_dialog
-from reflex.components import alert_dialog_body as alert_dialog_body
-from reflex.components import alert_dialog_content as alert_dialog_content
-from reflex.components import alert_dialog_footer as alert_dialog_footer
-from reflex.components import alert_dialog_header as alert_dialog_header
-from reflex.components import alert_dialog_overlay as alert_dialog_overlay
-from reflex.components import alert_icon as alert_icon
-from reflex.components import alert_title as alert_title
-from reflex.components import aspect_ratio as aspect_ratio
-from reflex.components import audio as audio
-from reflex.components import avatar as avatar
-from reflex.components import avatar_badge as avatar_badge
-from reflex.components import avatar_group as avatar_group
-from reflex.components import badge as badge
-from reflex.components import box as box
-from reflex.components import breadcrumb as breadcrumb
-from reflex.components import breadcrumb_item as breadcrumb_item
-from reflex.components import breadcrumb_link as breadcrumb_link
-from reflex.components import breadcrumb_separator as breadcrumb_separator
-from reflex.components import button as button
-from reflex.components import button_group as button_group
-from reflex.components import card as card
-from reflex.components import card_body as card_body
-from reflex.components import card_footer as card_footer
-from reflex.components import card_header as card_header
-from reflex.components import center as center
-from reflex.components import checkbox as checkbox
-from reflex.components import checkbox_group as checkbox_group
-from reflex.components import circular_progress as circular_progress
-from reflex.components import circular_progress_label as circular_progress_label
-from reflex.components import circle as circle
-from reflex.components import code as code
-from reflex.components import code_block as code_block
-from reflex.components import collapse as collapse
-from reflex.components import color_mode_button as color_mode_button
-from reflex.components import color_mode_icon as color_mode_icon
-from reflex.components import color_mode_switch as color_mode_switch
-from reflex.components import component as component
+from reflex.components import color as color
 from reflex.components import cond as cond
+from reflex.components import foreach as foreach
+from reflex.components import html as html
+from reflex.components import match as match
+from reflex.components import color_mode_cond as color_mode_cond
 from reflex.components import connection_banner as connection_banner
 from reflex.components import connection_modal as connection_modal
-from reflex.components import container as container
-from reflex.components import data_table as data_table
-from reflex.components import data_editor as data_editor
-from reflex.components import data_editor_theme as data_editor_theme
-from reflex.components import date_picker as date_picker
-from reflex.components import date_time_picker as date_time_picker
 from reflex.components import debounce_input as debounce_input
+from reflex.components import fragment as fragment
+from reflex.components import Fragment as Fragment
+from reflex.components import image as image
+from reflex.components import script as script
+from reflex.components import desktop_only as desktop_only
+from reflex.components import mobile_and_tablet as mobile_and_tablet
+from reflex.components import mobile_only as mobile_only
+from reflex.components import tablet_and_desktop as tablet_and_desktop
+from reflex.components import tablet_only as tablet_only
+from reflex.components import cancel_upload as cancel_upload
+from reflex.components import clear_selected_files as clear_selected_files
+from reflex.components import get_upload_dir as get_upload_dir
+from reflex.components import get_upload_url as get_upload_url
+from reflex.components import selected_files as selected_files
+from reflex.components import upload as upload
+from reflex.components import accordion as accordion
+from reflex.components import alert_dialog as alert_dialog
+from reflex.components import aspect_ratio as aspect_ratio
+from reflex.components import avatar as avatar
+from reflex.components import badge as badge
+from reflex.components import blockquote as blockquote
+from reflex.components import box as box
+from reflex.components import button as button
+from reflex.components import callout as callout
+from reflex.components import card as card
+from reflex.components import center as center
+from reflex.components import checkbox as checkbox
+from reflex.components import code as code
+from reflex.components import container as container
+from reflex.components import context_menu as context_menu
+from reflex.components import dialog as dialog
 from reflex.components import divider as divider
 from reflex.components import drawer as drawer
-from reflex.components import drawer_body as drawer_body
-from reflex.components import drawer_close_button as drawer_close_button
-from reflex.components import drawer_content as drawer_content
-from reflex.components import drawer_footer as drawer_footer
-from reflex.components import drawer_header as drawer_header
-from reflex.components import drawer_overlay as drawer_overlay
-from reflex.components import editable as editable
-from reflex.components import editable_input as editable_input
-from reflex.components import editable_preview as editable_preview
-from reflex.components import editable_textarea as editable_textarea
-from reflex.components import editor as editor
-from reflex.components import email as email
-from reflex.components import fade as fade
 from reflex.components import flex as flex
-from reflex.components import foreach as foreach
 from reflex.components import form as form
-from reflex.components import form_control as form_control
-from reflex.components import form_error_message as form_error_message
-from reflex.components import form_helper_text as form_helper_text
-from reflex.components import form_label as form_label
-from reflex.components import fragment as fragment
 from reflex.components import grid as grid
-from reflex.components import grid_item as grid_item
 from reflex.components import heading as heading
-from reflex.components import highlight as highlight
+from reflex.components import hover_card as hover_card
 from reflex.components import hstack as hstack
-from reflex.components import html as html
-from reflex.components import icon as icon
 from reflex.components import icon_button as icon_button
-from reflex.components import image as image
+from reflex.components import inset as inset
 from reflex.components import input as input
-from reflex.components import input_group as input_group
-from reflex.components import input_left_addon as input_left_addon
-from reflex.components import input_left_element as input_left_element
-from reflex.components import input_right_addon as input_right_addon
-from reflex.components import input_right_element as input_right_element
-from reflex.components import kbd as kbd
 from reflex.components import link as link
-from reflex.components import link_box as link_box
-from reflex.components import link_overlay as link_overlay
-from reflex.components import list as list
-from reflex.components import list_item as list_item
-from reflex.components import markdown as markdown
-from reflex.components import match as match
 from reflex.components import menu as menu
-from reflex.components import menu_button as menu_button
-from reflex.components import menu_divider as menu_divider
-from reflex.components import menu_group as menu_group
-from reflex.components import menu_item as menu_item
-from reflex.components import menu_item_option as menu_item_option
-from reflex.components import menu_list as menu_list
-from reflex.components import menu_option_group as menu_option_group
-from reflex.components import modal as modal
-from reflex.components import modal_body as modal_body
-from reflex.components import modal_close_button as modal_close_button
-from reflex.components import modal_content as modal_content
-from reflex.components import modal_footer as modal_footer
-from reflex.components import modal_header as modal_header
-from reflex.components import modal_overlay as modal_overlay
-from reflex.components import moment as moment
-from reflex.components import multi_select as multi_select
-from reflex.components import multi_select_option as multi_select_option
-from reflex.components import next_link as next_link
-from reflex.components import number_decrement_stepper as number_decrement_stepper
-from reflex.components import number_increment_stepper as number_increment_stepper
-from reflex.components import number_input as number_input
-from reflex.components import number_input_field as number_input_field
-from reflex.components import number_input_stepper as number_input_stepper
-from reflex.components import option as option
-from reflex.components import ordered_list as ordered_list
-from reflex.components import password as password
-from reflex.components import pin_input as pin_input
-from reflex.components import pin_input_field as pin_input_field
-from reflex.components import plotly as plotly
 from reflex.components import popover as popover
-from reflex.components import popover_anchor as popover_anchor
-from reflex.components import popover_arrow as popover_arrow
-from reflex.components import popover_body as popover_body
-from reflex.components import popover_close_button as popover_close_button
-from reflex.components import popover_content as popover_content
-from reflex.components import popover_footer as popover_footer
-from reflex.components import popover_header as popover_header
-from reflex.components import popover_trigger as popover_trigger
 from reflex.components import progress as progress
 from reflex.components import radio as radio
-from reflex.components import radio_group as radio_group
-from reflex.components import range_slider as range_slider
-from reflex.components import range_slider_filled_track as range_slider_filled_track
-from reflex.components import range_slider_thumb as range_slider_thumb
-from reflex.components import range_slider_track as range_slider_track
-from reflex.components import responsive_grid as responsive_grid
-from reflex.components import scale_fade as scale_fade
-from reflex.components import script as script
+from reflex.components import scroll_area as scroll_area
+from reflex.components import section as section
 from reflex.components import select as select
-from reflex.components import skeleton as skeleton
-from reflex.components import skeleton_circle as skeleton_circle
-from reflex.components import skeleton_text as skeleton_text
-from reflex.components import slide as slide
-from reflex.components import slide_fade as slide_fade
 from reflex.components import slider as slider
-from reflex.components import slider_filled_track as slider_filled_track
-from reflex.components import slider_mark as slider_mark
-from reflex.components import slider_thumb as slider_thumb
-from reflex.components import slider_track as slider_track
 from reflex.components import spacer as spacer
-from reflex.components import span as span
-from reflex.components import spinner as spinner
-from reflex.components import square as square
 from reflex.components import stack as stack
-from reflex.components import stat as stat
-from reflex.components import stat_arrow as stat_arrow
-from reflex.components import stat_group as stat_group
-from reflex.components import stat_help_text as stat_help_text
-from reflex.components import stat_label as stat_label
-from reflex.components import stat_number as stat_number
-from reflex.components import step as step
-from reflex.components import step_description as step_description
-from reflex.components import step_icon as step_icon
-from reflex.components import step_indicator as step_indicator
-from reflex.components import step_number as step_number
-from reflex.components import step_separator as step_separator
-from reflex.components import step_status as step_status
-from reflex.components import step_title as step_title
-from reflex.components import stepper as stepper
 from reflex.components import switch as switch
-from reflex.components import tab as tab
-from reflex.components import tab_list as tab_list
-from reflex.components import tab_panel as tab_panel
-from reflex.components import tab_panels as tab_panels
 from reflex.components import table as table
-from reflex.components import table_caption as table_caption
-from reflex.components import table_container as table_container
 from reflex.components import tabs as tabs
-from reflex.components import tag as tag
-from reflex.components import tag_close_button as tag_close_button
-from reflex.components import tag_label as tag_label
-from reflex.components import tag_left_icon as tag_left_icon
-from reflex.components import tag_right_icon as tag_right_icon
-from reflex.components import tbody as tbody
-from reflex.components import td as td
 from reflex.components import text as text
 from reflex.components import text_area as text_area
-from reflex.components import tfoot as tfoot
-from reflex.components import th as th
-from reflex.components import thead as thead
-from reflex.components import time_picker as time_picker
+from reflex.components import theme as theme
+from reflex.components import theme_panel as theme_panel
 from reflex.components import tooltip as tooltip
-from reflex.components import tr as tr
-from reflex.components import unordered_list as unordered_list
-from reflex.components import upload as upload
-from reflex.components import video as video
-from reflex.components import visually_hidden as visually_hidden
 from reflex.components import vstack as vstack
-from reflex.components import wrap as wrap
-from reflex.components import wrap_item as wrap_item
-from reflex.components import cancel_upload as cancel_upload
-from reflex import components as components
-from reflex.components import color_mode_cond as color_mode_cond
-from reflex.components import desktop_only as desktop_only
-from reflex.components import mobile_only as mobile_only
-from reflex.components import tablet_only as tablet_only
-from reflex.components import mobile_and_tablet as mobile_and_tablet
-from reflex.components import tablet_and_desktop as tablet_and_desktop
-from reflex.components import selected_files as selected_files
-from reflex.components import clear_selected_files as clear_selected_files
+from reflex.components import code_block as code_block
+from reflex.components import data_editor as data_editor
+from reflex.components import data_editor_theme as data_editor_theme
+from reflex.components import data_table as data_table
+from reflex.components import plotly as plotly
+from reflex.components import audio as audio
+from reflex.components import video as video
+from reflex.components import editor as editor
 from reflex.components import EditorButtonList as EditorButtonList
 from reflex.components import EditorOptions as EditorOptions
-from reflex.components import NoSSRComponent as NoSSRComponent
-from reflex.components import chakra as chakra
-from reflex.components import next as next
+from reflex.components import icon as icon
+from reflex.components import markdown as markdown
+from reflex.components import list_item as list_item
+from reflex.components import unordered_list as unordered_list
+from reflex.components import ordered_list as ordered_list
+from reflex.components import moment as moment
+from reflex.components.component import Component as Component
+from reflex.components.component import NoSSRComponent as NoSSRComponent
 from reflex.components.component import memo as memo
-from reflex.components.core import color as color
+from reflex.components import chakra as chakra
 from reflex.components import el as el
 from reflex.components import lucide as lucide
+from reflex.components import next as next
 from reflex.components import radix as radix
+from reflex.components.radix import color_mode as color_mode
 from reflex.components import recharts as recharts
 from reflex.components.moment.moment import MomentDelta as MomentDelta
 from reflex import config as config
@@ -488,7 +140,6 @@ from reflex.state import Cookie as Cookie
 from reflex.state import LocalStorage as LocalStorage
 from reflex.state import State as State
 from reflex import style as style
-from reflex.style import color_mode as color_mode
 from reflex.style import toggle_color_mode as toggle_color_mode
 from reflex import testing as testing
 from reflex import utils as utils
diff --git a/reflex/app.py b/reflex/app.py
index 33d773a6f..40c63372f 100644
--- a/reflex/app.py
+++ b/reflex/app.py
@@ -39,7 +39,11 @@ from reflex.compiler import utils as compiler_utils
 from reflex.components import connection_modal
 from reflex.components.base.app_wrap import AppWrap
 from reflex.components.base.fragment import Fragment
-from reflex.components.component import Component, ComponentStyle
+from reflex.components.component import (
+    Component,
+    ComponentStyle,
+    evaluate_style_namespaces,
+)
 from reflex.components.core.client_side_routing import (
     Default404Page,
     wait_for_client_redirect,
@@ -682,10 +686,7 @@ class App(Base):
         # Store the compile results.
         compile_results = []
 
-        # Compile the pages in parallel.
-        custom_components = set()
-        # TODO Anecdotally, processes=2 works 10% faster (cpu_count=12)
-        all_imports = {}
+        # Add the app wrappers.
         app_wrappers: Dict[tuple[int, str], Component] = {
             # Default app wrap component renders {children}
             (0, "AppWrap"): AppWrap.create()
@@ -694,6 +695,14 @@ class App(Base):
             # If a theme component was provided, wrap the app with it
             app_wrappers[(20, "Theme")] = self.theme
 
+        # Fix up the style.
+        self.style = evaluate_style_namespaces(self.style)
+
+        # Track imports and custom components found.
+        all_imports = {}
+        custom_components = set()
+
+        # Compile the pages in parallel.
         with progress, concurrent.futures.ThreadPoolExecutor() as thread_pool:
             fixed_pages = 7
             task = progress.add_task("Compiling:", total=len(self.pages) + fixed_pages)
diff --git a/reflex/components/__init__.py b/reflex/components/__init__.py
index 8dbf5c406..f136b2420 100644
--- a/reflex/components/__init__.py
+++ b/reflex/components/__init__.py
@@ -1,16 +1,20 @@
 """Import all the components."""
 from __future__ import annotations
 
+from . import lucide
 from .base import Fragment, Script, fragment, script
-from .chakra import *
 from .component import Component
 from .component import NoSSRComponent as NoSSRComponent
 from .core import *
 from .datadisplay import *
+from .el import img as image
 from .gridjs import *
 from .markdown import *
 from .moment import *
 from .next import NextLink, next_link
 from .plotly import *
+from .radix import *
 from .react_player import *
 from .suneditor import *
+
+icon = lucide.icon
diff --git a/reflex/components/base/app_wrap.pyi b/reflex/components/base/app_wrap.pyi
index 1bd4c764e..63302bcc9 100644
--- a/reflex/components/base/app_wrap.pyi
+++ b/reflex/components/base/app_wrap.pyi
@@ -22,7 +22,6 @@ class AppWrap(Fragment):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
diff --git a/reflex/components/base/body.pyi b/reflex/components/base/body.pyi
index 218351a99..7ba105a0d 100644
--- a/reflex/components/base/body.pyi
+++ b/reflex/components/base/body.pyi
@@ -20,7 +20,6 @@ class Body(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class Body(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/base/document.pyi b/reflex/components/base/document.pyi
index 0a2c4eda8..746a2f18b 100644
--- a/reflex/components/base/document.pyi
+++ b/reflex/components/base/document.pyi
@@ -20,7 +20,6 @@ class NextDocumentLib(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class NextDocumentLib(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -101,7 +99,6 @@ class Html(NextDocumentLib):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -159,7 +156,6 @@ class Html(NextDocumentLib):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -182,7 +178,6 @@ class DocumentHead(NextDocumentLib):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -240,7 +235,6 @@ class DocumentHead(NextDocumentLib):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -263,7 +257,6 @@ class Main(NextDocumentLib):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -321,7 +314,6 @@ class Main(NextDocumentLib):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -344,7 +336,6 @@ class NextScript(NextDocumentLib):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -402,7 +393,6 @@ class NextScript(NextDocumentLib):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/base/fragment.pyi b/reflex/components/base/fragment.pyi
index 963675c0d..83014e20a 100644
--- a/reflex/components/base/fragment.pyi
+++ b/reflex/components/base/fragment.pyi
@@ -20,7 +20,6 @@ class Fragment(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class Fragment(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/base/head.pyi b/reflex/components/base/head.pyi
index be8c61e13..dd975844e 100644
--- a/reflex/components/base/head.pyi
+++ b/reflex/components/base/head.pyi
@@ -20,7 +20,6 @@ class NextHeadLib(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class NextHeadLib(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -101,7 +99,6 @@ class Head(NextHeadLib, MemoizationLeaf):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -159,7 +156,6 @@ class Head(NextHeadLib, MemoizationLeaf):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/base/link.pyi b/reflex/components/base/link.pyi
index 166f42c33..a7754ae9a 100644
--- a/reflex/components/base/link.pyi
+++ b/reflex/components/base/link.pyi
@@ -23,7 +23,6 @@ class RawLink(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -83,7 +82,6 @@ class RawLink(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -113,7 +111,6 @@ class ScriptTag(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -178,7 +175,6 @@ class ScriptTag(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/base/meta.pyi b/reflex/components/base/meta.pyi
index 9a44dff50..61f3e344a 100644
--- a/reflex/components/base/meta.pyi
+++ b/reflex/components/base/meta.pyi
@@ -23,7 +23,6 @@ class Title(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -81,7 +80,6 @@ class Title(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -109,7 +107,6 @@ class Meta(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -172,7 +169,6 @@ class Meta(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -200,7 +196,6 @@ class Description(Meta):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -263,7 +258,6 @@ class Description(Meta):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -291,7 +285,6 @@ class Image(Meta):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -354,7 +347,6 @@ class Image(Meta):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/base/script.pyi b/reflex/components/base/script.pyi
index e27fcff86..3a1e6f582 100644
--- a/reflex/components/base/script.pyi
+++ b/reflex/components/base/script.pyi
@@ -24,7 +24,6 @@ class Script(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -103,7 +102,6 @@ class Script(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/__init__.py b/reflex/components/chakra/__init__.py
index 697126854..ea0976f8c 100644
--- a/reflex/components/chakra/__init__.py
+++ b/reflex/components/chakra/__init__.py
@@ -49,7 +49,6 @@ circle = Circle.create
 circular_progress = CircularProgress.create
 circular_progress_label = CircularProgressLabel.create
 code = Code.create
-code_block = CodeBlock.create
 collapse = Collapse.create
 color_mode_button = ColorModeButton.create
 color_mode_icon = ColorModeIcon.create
@@ -83,7 +82,6 @@ grid_item = GridItem.create
 heading = Heading.create
 highlight = Highlight.create
 hstack = Hstack.create
-html = Html.create
 icon = Icon.create
 icon_button = IconButton.create
 image = Image.create
diff --git a/reflex/components/chakra/base.pyi b/reflex/components/chakra/base.pyi
index 44a1fd4a1..a21cd2951 100644
--- a/reflex/components/chakra/base.pyi
+++ b/reflex/components/chakra/base.pyi
@@ -24,7 +24,6 @@ class ChakraComponent(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -82,7 +81,6 @@ class ChakraComponent(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -106,7 +104,6 @@ class ChakraProvider(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -175,7 +172,6 @@ class ChakraColorModeProvider(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -233,7 +229,6 @@ class ChakraColorModeProvider(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/datadisplay/__init__.py b/reflex/components/chakra/datadisplay/__init__.py
index 64d0d370d..b20d17248 100644
--- a/reflex/components/chakra/datadisplay/__init__.py
+++ b/reflex/components/chakra/datadisplay/__init__.py
@@ -1,9 +1,7 @@
 """Data display components."""
 
 from .badge import Badge
-from .code import Code, CodeBlock
-from .code import LiteralCodeBlockTheme as LiteralCodeBlockTheme
-from .code import LiteralCodeLanguage as LiteralCodeLanguage
+from .code import Code
 from .divider import Divider
 from .keyboard_key import KeyboardKey as Kbd
 from .list import List, ListItem, OrderedList, UnorderedList
diff --git a/reflex/components/chakra/datadisplay/badge.pyi b/reflex/components/chakra/datadisplay/badge.pyi
index 0913d741a..8480b89de 100644
--- a/reflex/components/chakra/datadisplay/badge.pyi
+++ b/reflex/components/chakra/datadisplay/badge.pyi
@@ -28,7 +28,6 @@ class Badge(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -88,7 +87,6 @@ class Badge(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/datadisplay/code.py b/reflex/components/chakra/datadisplay/code.py
index 9bec7271f..fe1016b7a 100644
--- a/reflex/components/chakra/datadisplay/code.py
+++ b/reflex/components/chakra/datadisplay/code.py
@@ -1,518 +1,7 @@
 """A code component."""
-import re
-from typing import Dict, Literal, Optional, Union
-
 from reflex.components.chakra import (
     ChakraComponent,
 )
-from reflex.components.chakra.forms import Button, color_mode_cond
-from reflex.components.chakra.layout import Box
-from reflex.components.chakra.media import Icon
-from reflex.components.component import Component
-from reflex.event import set_clipboard
-from reflex.style import Style
-from reflex.utils import format, imports
-from reflex.utils.imports import ImportVar
-from reflex.vars import Var
-
-LiteralCodeBlockTheme = Literal[
-    "a11y-dark",
-    "atom-dark",
-    "cb",
-    "coldark-cold",
-    "coldark-dark",
-    "coy",
-    "coy-without-shadows",
-    "darcula",
-    "dark",
-    "dracula",
-    "duotone-dark",
-    "duotone-earth",
-    "duotone-forest",
-    "duotone-light",
-    "duotone-sea",
-    "duotone-space",
-    "funky",
-    "ghcolors",
-    "gruvbox-dark",
-    "gruvbox-light",
-    "holi-theme",
-    "hopscotch",
-    "light",  # not present in react-syntax-highlighter styles
-    "lucario",
-    "material-dark",
-    "material-light",
-    "material-oceanic",
-    "night-owl",
-    "nord",
-    "okaidia",
-    "one-dark",
-    "one-light",
-    "pojoaque",
-    "prism",
-    "shades-of-purple",
-    "solarized-dark-atom",
-    "solarizedlight",
-    "synthwave84",
-    "tomorrow",
-    "twilight",
-    "vs",
-    "vs-dark",
-    "vsc-dark-plus",
-    "xonokai",
-    "z-touch",
-]
-
-
-LiteralCodeLanguage = Literal[
-    "abap",
-    "abnf",
-    "actionscript",
-    "ada",
-    "agda",
-    "al",
-    "antlr4",
-    "apacheconf",
-    "apex",
-    "apl",
-    "applescript",
-    "aql",
-    "arduino",
-    "arff",
-    "asciidoc",
-    "asm6502",
-    "asmatmel",
-    "aspnet",
-    "autohotkey",
-    "autoit",
-    "avisynth",
-    "avro-idl",
-    "bash",
-    "basic",
-    "batch",
-    "bbcode",
-    "bicep",
-    "birb",
-    "bison",
-    "bnf",
-    "brainfuck",
-    "brightscript",
-    "bro",
-    "bsl",
-    "c",
-    "cfscript",
-    "chaiscript",
-    "cil",
-    "clike",
-    "clojure",
-    "cmake",
-    "cobol",
-    "coffeescript",
-    "concurnas",
-    "coq",
-    "core",
-    "cpp",
-    "crystal",
-    "csharp",
-    "cshtml",
-    "csp",
-    "css",
-    "css-extras",
-    "csv",
-    "cypher",
-    "d",
-    "dart",
-    "dataweave",
-    "dax",
-    "dhall",
-    "diff",
-    "django",
-    "dns-zone-file",
-    "docker",
-    "dot",
-    "ebnf",
-    "editorconfig",
-    "eiffel",
-    "ejs",
-    "elixir",
-    "elm",
-    "erb",
-    "erlang",
-    "etlua",
-    "excel-formula",
-    "factor",
-    "false",
-    "firestore-security-rules",
-    "flow",
-    "fortran",
-    "fsharp",
-    "ftl",
-    "gap",
-    "gcode",
-    "gdscript",
-    "gedcom",
-    "gherkin",
-    "git",
-    "glsl",
-    "gml",
-    "gn",
-    "go",
-    "go-module",
-    "graphql",
-    "groovy",
-    "haml",
-    "handlebars",
-    "haskell",
-    "haxe",
-    "hcl",
-    "hlsl",
-    "hoon",
-    "hpkp",
-    "hsts",
-    "http",
-    "ichigojam",
-    "icon",
-    "icu-message-format",
-    "idris",
-    "iecst",
-    "ignore",
-    "index",
-    "inform7",
-    "ini",
-    "io",
-    "j",
-    "java",
-    "javadoc",
-    "javadoclike",
-    "javascript",
-    "javastacktrace",
-    "jexl",
-    "jolie",
-    "jq",
-    "js-extras",
-    "js-templates",
-    "jsdoc",
-    "json",
-    "json5",
-    "jsonp",
-    "jsstacktrace",
-    "jsx",
-    "julia",
-    "keepalived",
-    "keyman",
-    "kotlin",
-    "kumir",
-    "kusto",
-    "latex",
-    "latte",
-    "less",
-    "lilypond",
-    "liquid",
-    "lisp",
-    "livescript",
-    "llvm",
-    "log",
-    "lolcode",
-    "lua",
-    "magma",
-    "makefile",
-    "markdown",
-    "markup",
-    "markup-templating",
-    "matlab",
-    "maxscript",
-    "mel",
-    "mermaid",
-    "mizar",
-    "mongodb",
-    "monkey",
-    "moonscript",
-    "n1ql",
-    "n4js",
-    "nand2tetris-hdl",
-    "naniscript",
-    "nasm",
-    "neon",
-    "nevod",
-    "nginx",
-    "nim",
-    "nix",
-    "nsis",
-    "objectivec",
-    "ocaml",
-    "opencl",
-    "openqasm",
-    "oz",
-    "parigp",
-    "parser",
-    "pascal",
-    "pascaligo",
-    "pcaxis",
-    "peoplecode",
-    "perl",
-    "php",
-    "php-extras",
-    "phpdoc",
-    "plsql",
-    "powerquery",
-    "powershell",
-    "processing",
-    "prolog",
-    "promql",
-    "properties",
-    "protobuf",
-    "psl",
-    "pug",
-    "puppet",
-    "pure",
-    "purebasic",
-    "purescript",
-    "python",
-    "q",
-    "qml",
-    "qore",
-    "qsharp",
-    "r",
-    "racket",
-    "reason",
-    "regex",
-    "rego",
-    "renpy",
-    "rest",
-    "rip",
-    "roboconf",
-    "robotframework",
-    "ruby",
-    "rust",
-    "sas",
-    "sass",
-    "scala",
-    "scheme",
-    "scss",
-    "shell-session",
-    "smali",
-    "smalltalk",
-    "smarty",
-    "sml",
-    "solidity",
-    "solution-file",
-    "soy",
-    "sparql",
-    "splunk-spl",
-    "sqf",
-    "sql",
-    "squirrel",
-    "stan",
-    "stylus",
-    "swift",
-    "systemd",
-    "t4-cs",
-    "t4-templating",
-    "t4-vb",
-    "tap",
-    "tcl",
-    "textile",
-    "toml",
-    "tremor",
-    "tsx",
-    "tt2",
-    "turtle",
-    "twig",
-    "typescript",
-    "typoscript",
-    "unrealscript",
-    "uorazor",
-    "uri",
-    "v",
-    "vala",
-    "vbnet",
-    "velocity",
-    "verilog",
-    "vhdl",
-    "vim",
-    "visual-basic",
-    "warpscript",
-    "wasm",
-    "web-idl",
-    "wiki",
-    "wolfram",
-    "wren",
-    "xeora",
-    "xml-doc",
-    "xojo",
-    "xquery",
-    "yaml",
-    "yang",
-    "zig",
-]
-
-
-class CodeBlock(Component):
-    """A code block."""
-
-    library = "react-syntax-highlighter@15.5.0"
-
-    tag = "PrismAsyncLight"
-
-    alias = "SyntaxHighlighter"
-
-    # The theme to use ("light" or "dark").
-    theme: Var[LiteralCodeBlockTheme] = "one-light"  # type: ignore
-
-    # The language to use.
-    language: Var[LiteralCodeLanguage] = "python"  # type: ignore
-
-    # The code to display.
-    code: Var[str]
-
-    # If this is enabled line numbers will be shown next to the code block.
-    show_line_numbers: Var[bool]
-
-    # The starting line number to use.
-    starting_line_number: Var[int]
-
-    # Whether to wrap long lines.
-    wrap_long_lines: Var[bool]
-
-    # A custom style for the code block.
-    custom_style: Dict[str, str] = {}
-
-    # Props passed down to the code tag.
-    code_tag_props: Var[Dict[str, str]]
-
-    def _get_imports(self) -> imports.ImportDict:
-        merged_imports = super()._get_imports()
-        # Get all themes from a cond literal
-        themes = re.findall(r"`(.*?)`", self.theme._var_name)
-        if not themes:
-            themes = [self.theme._var_name]
-        merged_imports = imports.merge_imports(
-            merged_imports,
-            {
-                f"react-syntax-highlighter/dist/cjs/styles/prism/{theme}": {
-                    ImportVar(
-                        tag=format.to_camel_case(theme),
-                        is_default=True,
-                        install=False,
-                    )
-                }
-                for theme in themes
-            },
-        )
-        if (
-            self.language is not None
-            and self.language._var_name in LiteralCodeLanguage.__args__  # type: ignore
-        ):
-            merged_imports = imports.merge_imports(
-                merged_imports,
-                {
-                    f"react-syntax-highlighter/dist/cjs/languages/prism/{self.language._var_name}": {
-                        ImportVar(
-                            tag=format.to_camel_case(self.language._var_name),
-                            is_default=True,
-                            install=False,
-                        )
-                    }
-                },
-            )
-        return merged_imports
-
-    def _get_custom_code(self) -> Optional[str]:
-        if (
-            self.language is not None
-            and self.language._var_name in LiteralCodeLanguage.__args__  # type: ignore
-        ):
-            return f"{self.alias}.registerLanguage('{self.language._var_name}', {format.to_camel_case(self.language._var_name)})"
-
-    @classmethod
-    def create(
-        cls,
-        *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[bool, Component]] = None,
-        **props,
-    ):
-        """Create a text component.
-
-        Args:
-            *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
-            **props: The props to pass to the component.
-
-        Returns:
-            The text component.
-        """
-        # This component handles style in a special prop.
-        custom_style = props.pop("custom_style", {})
-
-        if "theme" not in props:
-            # Default color scheme responds to global color mode.
-            props["theme"] = color_mode_cond(light="one-light", dark="one-dark")
-
-        # react-syntax-highlighter doesnt have an explicit "light" or "dark" theme so we use one-light and one-dark
-        # themes respectively to ensure code compatibility.
-        if "theme" in props and not isinstance(props["theme"], Var):
-            props["theme"] = (
-                "one-light"
-                if props["theme"] == "light"
-                else "one-dark"
-                if props["theme"] == "dark"
-                else props["theme"]
-            )
-
-        if can_copy:
-            code = children[0]
-            copy_button = (  # type: ignore
-                copy_button
-                if copy_button is not None
-                else Button.create(
-                    Icon.create(tag="copy"),
-                    on_click=set_clipboard(code),
-                    style=Style({"position": "absolute", "top": "0.5em", "right": "0"}),
-                )
-            )
-            custom_style.update({"padding": "1em 3.2em 1em 1em"})
-        else:
-            copy_button = None
-
-        # Transfer style props to the custom style prop.
-        for key, value in props.items():
-            if key not in cls.get_fields():
-                custom_style[key] = value
-
-        # Carry the children (code) via props
-        if children:
-            props["code"] = children[0]
-            if not isinstance(props["code"], Var):
-                props["code"] = Var.create(props["code"], _var_is_string=True)
-
-        # Create the component.
-        code_block = super().create(
-            **props,
-            custom_style=Style(custom_style),
-        )
-
-        if copy_button:
-            return Box.create(code_block, copy_button, position="relative")
-        else:
-            return code_block
-
-    def _add_style(self, style):
-        self.custom_style.update(style)  # type: ignore
-
-    def _render(self):
-        out = super()._render()
-        predicate, qmark, value = self.theme._var_name.partition("?")
-        out.add_props(
-            style=Var.create(
-                format.to_camel_case(f"{predicate}{qmark}{value.replace('`', '')}"),
-                _var_is_local=False,
-            )
-        ).remove_props("theme", "code")
-        if self.code is not None:
-            out.special_props.add(Var.create_safe(f"children={str(self.code)}"))
-        return out
 
 
 class Code(ChakraComponent):
diff --git a/reflex/components/chakra/datadisplay/code.pyi b/reflex/components/chakra/datadisplay/code.pyi
index 0c13fe0e9..8702c162e 100644
--- a/reflex/components/chakra/datadisplay/code.pyi
+++ b/reflex/components/chakra/datadisplay/code.pyi
@@ -7,1111 +7,7 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-import re
-from typing import Dict, Literal, Optional, Union
 from reflex.components.chakra import ChakraComponent
-from reflex.components.chakra.forms import Button, color_mode_cond
-from reflex.components.chakra.layout import Box
-from reflex.components.chakra.media import Icon
-from reflex.components.component import Component
-from reflex.event import set_clipboard
-from reflex.style import Style
-from reflex.utils import format, imports
-from reflex.utils.imports import ImportVar
-from reflex.vars import Var
-
-LiteralCodeBlockTheme = Literal[
-    "a11y-dark",
-    "atom-dark",
-    "cb",
-    "coldark-cold",
-    "coldark-dark",
-    "coy",
-    "coy-without-shadows",
-    "darcula",
-    "dark",
-    "dracula",
-    "duotone-dark",
-    "duotone-earth",
-    "duotone-forest",
-    "duotone-light",
-    "duotone-sea",
-    "duotone-space",
-    "funky",
-    "ghcolors",
-    "gruvbox-dark",
-    "gruvbox-light",
-    "holi-theme",
-    "hopscotch",
-    "light",
-    "lucario",
-    "material-dark",
-    "material-light",
-    "material-oceanic",
-    "night-owl",
-    "nord",
-    "okaidia",
-    "one-dark",
-    "one-light",
-    "pojoaque",
-    "prism",
-    "shades-of-purple",
-    "solarized-dark-atom",
-    "solarizedlight",
-    "synthwave84",
-    "tomorrow",
-    "twilight",
-    "vs",
-    "vs-dark",
-    "vsc-dark-plus",
-    "xonokai",
-    "z-touch",
-]
-LiteralCodeLanguage = Literal[
-    "abap",
-    "abnf",
-    "actionscript",
-    "ada",
-    "agda",
-    "al",
-    "antlr4",
-    "apacheconf",
-    "apex",
-    "apl",
-    "applescript",
-    "aql",
-    "arduino",
-    "arff",
-    "asciidoc",
-    "asm6502",
-    "asmatmel",
-    "aspnet",
-    "autohotkey",
-    "autoit",
-    "avisynth",
-    "avro-idl",
-    "bash",
-    "basic",
-    "batch",
-    "bbcode",
-    "bicep",
-    "birb",
-    "bison",
-    "bnf",
-    "brainfuck",
-    "brightscript",
-    "bro",
-    "bsl",
-    "c",
-    "cfscript",
-    "chaiscript",
-    "cil",
-    "clike",
-    "clojure",
-    "cmake",
-    "cobol",
-    "coffeescript",
-    "concurnas",
-    "coq",
-    "core",
-    "cpp",
-    "crystal",
-    "csharp",
-    "cshtml",
-    "csp",
-    "css",
-    "css-extras",
-    "csv",
-    "cypher",
-    "d",
-    "dart",
-    "dataweave",
-    "dax",
-    "dhall",
-    "diff",
-    "django",
-    "dns-zone-file",
-    "docker",
-    "dot",
-    "ebnf",
-    "editorconfig",
-    "eiffel",
-    "ejs",
-    "elixir",
-    "elm",
-    "erb",
-    "erlang",
-    "etlua",
-    "excel-formula",
-    "factor",
-    "false",
-    "firestore-security-rules",
-    "flow",
-    "fortran",
-    "fsharp",
-    "ftl",
-    "gap",
-    "gcode",
-    "gdscript",
-    "gedcom",
-    "gherkin",
-    "git",
-    "glsl",
-    "gml",
-    "gn",
-    "go",
-    "go-module",
-    "graphql",
-    "groovy",
-    "haml",
-    "handlebars",
-    "haskell",
-    "haxe",
-    "hcl",
-    "hlsl",
-    "hoon",
-    "hpkp",
-    "hsts",
-    "http",
-    "ichigojam",
-    "icon",
-    "icu-message-format",
-    "idris",
-    "iecst",
-    "ignore",
-    "index",
-    "inform7",
-    "ini",
-    "io",
-    "j",
-    "java",
-    "javadoc",
-    "javadoclike",
-    "javascript",
-    "javastacktrace",
-    "jexl",
-    "jolie",
-    "jq",
-    "js-extras",
-    "js-templates",
-    "jsdoc",
-    "json",
-    "json5",
-    "jsonp",
-    "jsstacktrace",
-    "jsx",
-    "julia",
-    "keepalived",
-    "keyman",
-    "kotlin",
-    "kumir",
-    "kusto",
-    "latex",
-    "latte",
-    "less",
-    "lilypond",
-    "liquid",
-    "lisp",
-    "livescript",
-    "llvm",
-    "log",
-    "lolcode",
-    "lua",
-    "magma",
-    "makefile",
-    "markdown",
-    "markup",
-    "markup-templating",
-    "matlab",
-    "maxscript",
-    "mel",
-    "mermaid",
-    "mizar",
-    "mongodb",
-    "monkey",
-    "moonscript",
-    "n1ql",
-    "n4js",
-    "nand2tetris-hdl",
-    "naniscript",
-    "nasm",
-    "neon",
-    "nevod",
-    "nginx",
-    "nim",
-    "nix",
-    "nsis",
-    "objectivec",
-    "ocaml",
-    "opencl",
-    "openqasm",
-    "oz",
-    "parigp",
-    "parser",
-    "pascal",
-    "pascaligo",
-    "pcaxis",
-    "peoplecode",
-    "perl",
-    "php",
-    "php-extras",
-    "phpdoc",
-    "plsql",
-    "powerquery",
-    "powershell",
-    "processing",
-    "prolog",
-    "promql",
-    "properties",
-    "protobuf",
-    "psl",
-    "pug",
-    "puppet",
-    "pure",
-    "purebasic",
-    "purescript",
-    "python",
-    "q",
-    "qml",
-    "qore",
-    "qsharp",
-    "r",
-    "racket",
-    "reason",
-    "regex",
-    "rego",
-    "renpy",
-    "rest",
-    "rip",
-    "roboconf",
-    "robotframework",
-    "ruby",
-    "rust",
-    "sas",
-    "sass",
-    "scala",
-    "scheme",
-    "scss",
-    "shell-session",
-    "smali",
-    "smalltalk",
-    "smarty",
-    "sml",
-    "solidity",
-    "solution-file",
-    "soy",
-    "sparql",
-    "splunk-spl",
-    "sqf",
-    "sql",
-    "squirrel",
-    "stan",
-    "stylus",
-    "swift",
-    "systemd",
-    "t4-cs",
-    "t4-templating",
-    "t4-vb",
-    "tap",
-    "tcl",
-    "textile",
-    "toml",
-    "tremor",
-    "tsx",
-    "tt2",
-    "turtle",
-    "twig",
-    "typescript",
-    "typoscript",
-    "unrealscript",
-    "uorazor",
-    "uri",
-    "v",
-    "vala",
-    "vbnet",
-    "velocity",
-    "verilog",
-    "vhdl",
-    "vim",
-    "visual-basic",
-    "warpscript",
-    "wasm",
-    "web-idl",
-    "wiki",
-    "wolfram",
-    "wren",
-    "xeora",
-    "xml-doc",
-    "xojo",
-    "xquery",
-    "yaml",
-    "yang",
-    "zig",
-]
-
-class CodeBlock(Component):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[bool, Component]] = None,
-        theme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "a11y-dark",
-                        "atom-dark",
-                        "cb",
-                        "coldark-cold",
-                        "coldark-dark",
-                        "coy",
-                        "coy-without-shadows",
-                        "darcula",
-                        "dark",
-                        "dracula",
-                        "duotone-dark",
-                        "duotone-earth",
-                        "duotone-forest",
-                        "duotone-light",
-                        "duotone-sea",
-                        "duotone-space",
-                        "funky",
-                        "ghcolors",
-                        "gruvbox-dark",
-                        "gruvbox-light",
-                        "holi-theme",
-                        "hopscotch",
-                        "light",
-                        "lucario",
-                        "material-dark",
-                        "material-light",
-                        "material-oceanic",
-                        "night-owl",
-                        "nord",
-                        "okaidia",
-                        "one-dark",
-                        "one-light",
-                        "pojoaque",
-                        "prism",
-                        "shades-of-purple",
-                        "solarized-dark-atom",
-                        "solarizedlight",
-                        "synthwave84",
-                        "tomorrow",
-                        "twilight",
-                        "vs",
-                        "vs-dark",
-                        "vsc-dark-plus",
-                        "xonokai",
-                        "z-touch",
-                    ]
-                ],
-                Literal[
-                    "a11y-dark",
-                    "atom-dark",
-                    "cb",
-                    "coldark-cold",
-                    "coldark-dark",
-                    "coy",
-                    "coy-without-shadows",
-                    "darcula",
-                    "dark",
-                    "dracula",
-                    "duotone-dark",
-                    "duotone-earth",
-                    "duotone-forest",
-                    "duotone-light",
-                    "duotone-sea",
-                    "duotone-space",
-                    "funky",
-                    "ghcolors",
-                    "gruvbox-dark",
-                    "gruvbox-light",
-                    "holi-theme",
-                    "hopscotch",
-                    "light",
-                    "lucario",
-                    "material-dark",
-                    "material-light",
-                    "material-oceanic",
-                    "night-owl",
-                    "nord",
-                    "okaidia",
-                    "one-dark",
-                    "one-light",
-                    "pojoaque",
-                    "prism",
-                    "shades-of-purple",
-                    "solarized-dark-atom",
-                    "solarizedlight",
-                    "synthwave84",
-                    "tomorrow",
-                    "twilight",
-                    "vs",
-                    "vs-dark",
-                    "vsc-dark-plus",
-                    "xonokai",
-                    "z-touch",
-                ],
-            ]
-        ] = None,
-        language: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "abap",
-                        "abnf",
-                        "actionscript",
-                        "ada",
-                        "agda",
-                        "al",
-                        "antlr4",
-                        "apacheconf",
-                        "apex",
-                        "apl",
-                        "applescript",
-                        "aql",
-                        "arduino",
-                        "arff",
-                        "asciidoc",
-                        "asm6502",
-                        "asmatmel",
-                        "aspnet",
-                        "autohotkey",
-                        "autoit",
-                        "avisynth",
-                        "avro-idl",
-                        "bash",
-                        "basic",
-                        "batch",
-                        "bbcode",
-                        "bicep",
-                        "birb",
-                        "bison",
-                        "bnf",
-                        "brainfuck",
-                        "brightscript",
-                        "bro",
-                        "bsl",
-                        "c",
-                        "cfscript",
-                        "chaiscript",
-                        "cil",
-                        "clike",
-                        "clojure",
-                        "cmake",
-                        "cobol",
-                        "coffeescript",
-                        "concurnas",
-                        "coq",
-                        "core",
-                        "cpp",
-                        "crystal",
-                        "csharp",
-                        "cshtml",
-                        "csp",
-                        "css",
-                        "css-extras",
-                        "csv",
-                        "cypher",
-                        "d",
-                        "dart",
-                        "dataweave",
-                        "dax",
-                        "dhall",
-                        "diff",
-                        "django",
-                        "dns-zone-file",
-                        "docker",
-                        "dot",
-                        "ebnf",
-                        "editorconfig",
-                        "eiffel",
-                        "ejs",
-                        "elixir",
-                        "elm",
-                        "erb",
-                        "erlang",
-                        "etlua",
-                        "excel-formula",
-                        "factor",
-                        "false",
-                        "firestore-security-rules",
-                        "flow",
-                        "fortran",
-                        "fsharp",
-                        "ftl",
-                        "gap",
-                        "gcode",
-                        "gdscript",
-                        "gedcom",
-                        "gherkin",
-                        "git",
-                        "glsl",
-                        "gml",
-                        "gn",
-                        "go",
-                        "go-module",
-                        "graphql",
-                        "groovy",
-                        "haml",
-                        "handlebars",
-                        "haskell",
-                        "haxe",
-                        "hcl",
-                        "hlsl",
-                        "hoon",
-                        "hpkp",
-                        "hsts",
-                        "http",
-                        "ichigojam",
-                        "icon",
-                        "icu-message-format",
-                        "idris",
-                        "iecst",
-                        "ignore",
-                        "index",
-                        "inform7",
-                        "ini",
-                        "io",
-                        "j",
-                        "java",
-                        "javadoc",
-                        "javadoclike",
-                        "javascript",
-                        "javastacktrace",
-                        "jexl",
-                        "jolie",
-                        "jq",
-                        "js-extras",
-                        "js-templates",
-                        "jsdoc",
-                        "json",
-                        "json5",
-                        "jsonp",
-                        "jsstacktrace",
-                        "jsx",
-                        "julia",
-                        "keepalived",
-                        "keyman",
-                        "kotlin",
-                        "kumir",
-                        "kusto",
-                        "latex",
-                        "latte",
-                        "less",
-                        "lilypond",
-                        "liquid",
-                        "lisp",
-                        "livescript",
-                        "llvm",
-                        "log",
-                        "lolcode",
-                        "lua",
-                        "magma",
-                        "makefile",
-                        "markdown",
-                        "markup",
-                        "markup-templating",
-                        "matlab",
-                        "maxscript",
-                        "mel",
-                        "mermaid",
-                        "mizar",
-                        "mongodb",
-                        "monkey",
-                        "moonscript",
-                        "n1ql",
-                        "n4js",
-                        "nand2tetris-hdl",
-                        "naniscript",
-                        "nasm",
-                        "neon",
-                        "nevod",
-                        "nginx",
-                        "nim",
-                        "nix",
-                        "nsis",
-                        "objectivec",
-                        "ocaml",
-                        "opencl",
-                        "openqasm",
-                        "oz",
-                        "parigp",
-                        "parser",
-                        "pascal",
-                        "pascaligo",
-                        "pcaxis",
-                        "peoplecode",
-                        "perl",
-                        "php",
-                        "php-extras",
-                        "phpdoc",
-                        "plsql",
-                        "powerquery",
-                        "powershell",
-                        "processing",
-                        "prolog",
-                        "promql",
-                        "properties",
-                        "protobuf",
-                        "psl",
-                        "pug",
-                        "puppet",
-                        "pure",
-                        "purebasic",
-                        "purescript",
-                        "python",
-                        "q",
-                        "qml",
-                        "qore",
-                        "qsharp",
-                        "r",
-                        "racket",
-                        "reason",
-                        "regex",
-                        "rego",
-                        "renpy",
-                        "rest",
-                        "rip",
-                        "roboconf",
-                        "robotframework",
-                        "ruby",
-                        "rust",
-                        "sas",
-                        "sass",
-                        "scala",
-                        "scheme",
-                        "scss",
-                        "shell-session",
-                        "smali",
-                        "smalltalk",
-                        "smarty",
-                        "sml",
-                        "solidity",
-                        "solution-file",
-                        "soy",
-                        "sparql",
-                        "splunk-spl",
-                        "sqf",
-                        "sql",
-                        "squirrel",
-                        "stan",
-                        "stylus",
-                        "swift",
-                        "systemd",
-                        "t4-cs",
-                        "t4-templating",
-                        "t4-vb",
-                        "tap",
-                        "tcl",
-                        "textile",
-                        "toml",
-                        "tremor",
-                        "tsx",
-                        "tt2",
-                        "turtle",
-                        "twig",
-                        "typescript",
-                        "typoscript",
-                        "unrealscript",
-                        "uorazor",
-                        "uri",
-                        "v",
-                        "vala",
-                        "vbnet",
-                        "velocity",
-                        "verilog",
-                        "vhdl",
-                        "vim",
-                        "visual-basic",
-                        "warpscript",
-                        "wasm",
-                        "web-idl",
-                        "wiki",
-                        "wolfram",
-                        "wren",
-                        "xeora",
-                        "xml-doc",
-                        "xojo",
-                        "xquery",
-                        "yaml",
-                        "yang",
-                        "zig",
-                    ]
-                ],
-                Literal[
-                    "abap",
-                    "abnf",
-                    "actionscript",
-                    "ada",
-                    "agda",
-                    "al",
-                    "antlr4",
-                    "apacheconf",
-                    "apex",
-                    "apl",
-                    "applescript",
-                    "aql",
-                    "arduino",
-                    "arff",
-                    "asciidoc",
-                    "asm6502",
-                    "asmatmel",
-                    "aspnet",
-                    "autohotkey",
-                    "autoit",
-                    "avisynth",
-                    "avro-idl",
-                    "bash",
-                    "basic",
-                    "batch",
-                    "bbcode",
-                    "bicep",
-                    "birb",
-                    "bison",
-                    "bnf",
-                    "brainfuck",
-                    "brightscript",
-                    "bro",
-                    "bsl",
-                    "c",
-                    "cfscript",
-                    "chaiscript",
-                    "cil",
-                    "clike",
-                    "clojure",
-                    "cmake",
-                    "cobol",
-                    "coffeescript",
-                    "concurnas",
-                    "coq",
-                    "core",
-                    "cpp",
-                    "crystal",
-                    "csharp",
-                    "cshtml",
-                    "csp",
-                    "css",
-                    "css-extras",
-                    "csv",
-                    "cypher",
-                    "d",
-                    "dart",
-                    "dataweave",
-                    "dax",
-                    "dhall",
-                    "diff",
-                    "django",
-                    "dns-zone-file",
-                    "docker",
-                    "dot",
-                    "ebnf",
-                    "editorconfig",
-                    "eiffel",
-                    "ejs",
-                    "elixir",
-                    "elm",
-                    "erb",
-                    "erlang",
-                    "etlua",
-                    "excel-formula",
-                    "factor",
-                    "false",
-                    "firestore-security-rules",
-                    "flow",
-                    "fortran",
-                    "fsharp",
-                    "ftl",
-                    "gap",
-                    "gcode",
-                    "gdscript",
-                    "gedcom",
-                    "gherkin",
-                    "git",
-                    "glsl",
-                    "gml",
-                    "gn",
-                    "go",
-                    "go-module",
-                    "graphql",
-                    "groovy",
-                    "haml",
-                    "handlebars",
-                    "haskell",
-                    "haxe",
-                    "hcl",
-                    "hlsl",
-                    "hoon",
-                    "hpkp",
-                    "hsts",
-                    "http",
-                    "ichigojam",
-                    "icon",
-                    "icu-message-format",
-                    "idris",
-                    "iecst",
-                    "ignore",
-                    "index",
-                    "inform7",
-                    "ini",
-                    "io",
-                    "j",
-                    "java",
-                    "javadoc",
-                    "javadoclike",
-                    "javascript",
-                    "javastacktrace",
-                    "jexl",
-                    "jolie",
-                    "jq",
-                    "js-extras",
-                    "js-templates",
-                    "jsdoc",
-                    "json",
-                    "json5",
-                    "jsonp",
-                    "jsstacktrace",
-                    "jsx",
-                    "julia",
-                    "keepalived",
-                    "keyman",
-                    "kotlin",
-                    "kumir",
-                    "kusto",
-                    "latex",
-                    "latte",
-                    "less",
-                    "lilypond",
-                    "liquid",
-                    "lisp",
-                    "livescript",
-                    "llvm",
-                    "log",
-                    "lolcode",
-                    "lua",
-                    "magma",
-                    "makefile",
-                    "markdown",
-                    "markup",
-                    "markup-templating",
-                    "matlab",
-                    "maxscript",
-                    "mel",
-                    "mermaid",
-                    "mizar",
-                    "mongodb",
-                    "monkey",
-                    "moonscript",
-                    "n1ql",
-                    "n4js",
-                    "nand2tetris-hdl",
-                    "naniscript",
-                    "nasm",
-                    "neon",
-                    "nevod",
-                    "nginx",
-                    "nim",
-                    "nix",
-                    "nsis",
-                    "objectivec",
-                    "ocaml",
-                    "opencl",
-                    "openqasm",
-                    "oz",
-                    "parigp",
-                    "parser",
-                    "pascal",
-                    "pascaligo",
-                    "pcaxis",
-                    "peoplecode",
-                    "perl",
-                    "php",
-                    "php-extras",
-                    "phpdoc",
-                    "plsql",
-                    "powerquery",
-                    "powershell",
-                    "processing",
-                    "prolog",
-                    "promql",
-                    "properties",
-                    "protobuf",
-                    "psl",
-                    "pug",
-                    "puppet",
-                    "pure",
-                    "purebasic",
-                    "purescript",
-                    "python",
-                    "q",
-                    "qml",
-                    "qore",
-                    "qsharp",
-                    "r",
-                    "racket",
-                    "reason",
-                    "regex",
-                    "rego",
-                    "renpy",
-                    "rest",
-                    "rip",
-                    "roboconf",
-                    "robotframework",
-                    "ruby",
-                    "rust",
-                    "sas",
-                    "sass",
-                    "scala",
-                    "scheme",
-                    "scss",
-                    "shell-session",
-                    "smali",
-                    "smalltalk",
-                    "smarty",
-                    "sml",
-                    "solidity",
-                    "solution-file",
-                    "soy",
-                    "sparql",
-                    "splunk-spl",
-                    "sqf",
-                    "sql",
-                    "squirrel",
-                    "stan",
-                    "stylus",
-                    "swift",
-                    "systemd",
-                    "t4-cs",
-                    "t4-templating",
-                    "t4-vb",
-                    "tap",
-                    "tcl",
-                    "textile",
-                    "toml",
-                    "tremor",
-                    "tsx",
-                    "tt2",
-                    "turtle",
-                    "twig",
-                    "typescript",
-                    "typoscript",
-                    "unrealscript",
-                    "uorazor",
-                    "uri",
-                    "v",
-                    "vala",
-                    "vbnet",
-                    "velocity",
-                    "verilog",
-                    "vhdl",
-                    "vim",
-                    "visual-basic",
-                    "warpscript",
-                    "wasm",
-                    "web-idl",
-                    "wiki",
-                    "wolfram",
-                    "wren",
-                    "xeora",
-                    "xml-doc",
-                    "xojo",
-                    "xquery",
-                    "yaml",
-                    "yang",
-                    "zig",
-                ],
-            ]
-        ] = None,
-        code: Optional[Union[Var[str], str]] = None,
-        show_line_numbers: Optional[Union[Var[bool], bool]] = None,
-        starting_line_number: Optional[Union[Var[int], int]] = None,
-        wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
-        custom_style: Optional[Dict[str, str]] = None,
-        code_tag_props: Optional[Union[Var[Dict[str, str]], Dict[str, str]]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_double_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_focus: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_down: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_scroll: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        **props
-    ) -> "CodeBlock":
-        """Create a text component.
-
-        Args:
-            *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
-            theme: The theme to use ("light" or "dark").
-            language: The language to use.
-            code: The code to display.
-            show_line_numbers: If this is enabled line numbers will be shown next to the code block.
-            starting_line_number: The starting line number to use.
-            wrap_long_lines: Whether to wrap long lines.
-            custom_style: A custom style for the code block.
-            code_tag_props: Props passed down to the code tag.
-            style: The style of the component.
-            key: A unique key for the component.
-            id: The id for the component.
-            class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
-            custom_attrs: custom attribute
-            **props: The props to pass to the component.
-
-        Returns:
-            The text component.
-        """
-        ...
 
 class Code(ChakraComponent):
     @overload
@@ -1124,7 +20,6 @@ class Code(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1182,7 +77,6 @@ class Code(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/datadisplay/divider.pyi b/reflex/components/chakra/datadisplay/divider.pyi
index dc61c0d02..174234e5a 100644
--- a/reflex/components/chakra/datadisplay/divider.pyi
+++ b/reflex/components/chakra/datadisplay/divider.pyi
@@ -33,7 +33,6 @@ class Divider(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -93,7 +92,6 @@ class Divider(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/datadisplay/keyboard_key.pyi b/reflex/components/chakra/datadisplay/keyboard_key.pyi
index 4a2831af7..a3e7dcff0 100644
--- a/reflex/components/chakra/datadisplay/keyboard_key.pyi
+++ b/reflex/components/chakra/datadisplay/keyboard_key.pyi
@@ -20,7 +20,6 @@ class KeyboardKey(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class KeyboardKey(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/datadisplay/list.pyi b/reflex/components/chakra/datadisplay/list.pyi
index 2c034413d..a246c3f02 100644
--- a/reflex/components/chakra/datadisplay/list.pyi
+++ b/reflex/components/chakra/datadisplay/list.pyi
@@ -27,7 +27,6 @@ class List(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -89,7 +88,6 @@ class List(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -109,7 +107,6 @@ class ListItem(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -167,7 +164,6 @@ class ListItem(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -194,7 +190,6 @@ class OrderedList(List):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -256,7 +251,6 @@ class OrderedList(List):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -280,7 +274,6 @@ class UnorderedList(List):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -342,7 +335,6 @@ class UnorderedList(List):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/chakra/datadisplay/stat.pyi b/reflex/components/chakra/datadisplay/stat.pyi
index 978c5d124..09b123fac 100644
--- a/reflex/components/chakra/datadisplay/stat.pyi
+++ b/reflex/components/chakra/datadisplay/stat.pyi
@@ -26,7 +26,6 @@ class Stat(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -88,7 +87,6 @@ class Stat(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -108,7 +106,6 @@ class StatLabel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -166,7 +163,6 @@ class StatLabel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -189,7 +185,6 @@ class StatNumber(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -247,7 +242,6 @@ class StatNumber(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -270,7 +264,6 @@ class StatHelpText(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -328,7 +321,6 @@ class StatHelpText(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -352,7 +344,6 @@ class StatArrow(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -411,7 +402,6 @@ class StatArrow(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -434,7 +424,6 @@ class StatGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -492,7 +481,6 @@ class StatGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/datadisplay/table.pyi b/reflex/components/chakra/datadisplay/table.pyi
index bd0d840d8..bd9774b7e 100644
--- a/reflex/components/chakra/datadisplay/table.pyi
+++ b/reflex/components/chakra/datadisplay/table.pyi
@@ -33,7 +33,6 @@ class Table(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -99,7 +98,6 @@ class Table(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -120,7 +118,6 @@ class Thead(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -179,7 +176,6 @@ class Thead(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -203,7 +199,6 @@ class Tbody(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -262,7 +257,6 @@ class Tbody(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -285,7 +279,6 @@ class Tfoot(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -344,7 +337,6 @@ class Tfoot(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -368,7 +360,6 @@ class Tr(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -428,7 +419,6 @@ class Tr(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -449,7 +439,6 @@ class Th(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -508,7 +497,6 @@ class Th(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -532,7 +520,6 @@ class Td(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -591,7 +578,6 @@ class Td(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -615,7 +601,6 @@ class TableCaption(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -674,7 +659,6 @@ class TableCaption(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -697,7 +681,6 @@ class TableContainer(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -755,7 +738,6 @@ class TableContainer(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/datadisplay/tag.pyi b/reflex/components/chakra/datadisplay/tag.pyi
index e0026982f..3f4171958 100644
--- a/reflex/components/chakra/datadisplay/tag.pyi
+++ b/reflex/components/chakra/datadisplay/tag.pyi
@@ -28,7 +28,6 @@ class TagLabel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -86,7 +85,6 @@ class TagLabel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -109,7 +107,6 @@ class TagLeftIcon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -167,7 +164,6 @@ class TagLeftIcon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -190,7 +186,6 @@ class TagRightIcon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -248,7 +243,6 @@ class TagRightIcon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -271,7 +265,6 @@ class TagCloseButton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -329,7 +322,6 @@ class TagCloseButton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -394,7 +386,6 @@ class Tag(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
diff --git a/reflex/components/chakra/disclosure/accordion.pyi b/reflex/components/chakra/disclosure/accordion.pyi
index b62942800..c18f02a15 100644
--- a/reflex/components/chakra/disclosure/accordion.pyi
+++ b/reflex/components/chakra/disclosure/accordion.pyi
@@ -34,7 +34,6 @@ class Accordion(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -99,7 +98,6 @@ class Accordion(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -122,7 +120,6 @@ class AccordionItem(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -183,7 +180,6 @@ class AccordionItem(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -206,7 +202,6 @@ class AccordionButton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -264,7 +259,6 @@ class AccordionButton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -287,7 +281,6 @@ class AccordionPanel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -345,7 +338,6 @@ class AccordionPanel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -368,7 +360,6 @@ class AccordionIcon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -426,7 +417,6 @@ class AccordionIcon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/disclosure/tabs.pyi b/reflex/components/chakra/disclosure/tabs.pyi
index 4f526098d..097185aa3 100644
--- a/reflex/components/chakra/disclosure/tabs.pyi
+++ b/reflex/components/chakra/disclosure/tabs.pyi
@@ -112,7 +112,6 @@ class Tabs(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -181,7 +180,6 @@ class Tabs(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -205,7 +203,6 @@ class Tab(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -267,7 +264,6 @@ class Tab(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -290,7 +286,6 @@ class TabList(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -348,7 +343,6 @@ class TabList(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -371,7 +365,6 @@ class TabPanels(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -429,7 +422,6 @@ class TabPanels(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -452,7 +444,6 @@ class TabPanel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -510,7 +501,6 @@ class TabPanel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/disclosure/transition.pyi b/reflex/components/chakra/disclosure/transition.pyi
index 8f46a6a3d..52092e502 100644
--- a/reflex/components/chakra/disclosure/transition.pyi
+++ b/reflex/components/chakra/disclosure/transition.pyi
@@ -24,7 +24,6 @@ class Transition(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -84,7 +83,6 @@ class Transition(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -109,7 +107,6 @@ class Fade(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -169,7 +166,6 @@ class Fade(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -196,7 +192,6 @@ class ScaleFade(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -258,7 +253,6 @@ class ScaleFade(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -284,7 +278,6 @@ class Slide(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -345,7 +338,6 @@ class Slide(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -373,7 +365,6 @@ class SlideFade(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -436,7 +427,6 @@ class SlideFade(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -464,7 +454,6 @@ class Collapse(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -527,7 +516,6 @@ class Collapse(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/disclosure/visuallyhidden.pyi b/reflex/components/chakra/disclosure/visuallyhidden.pyi
index 181cc0262..b8717da83 100644
--- a/reflex/components/chakra/disclosure/visuallyhidden.pyi
+++ b/reflex/components/chakra/disclosure/visuallyhidden.pyi
@@ -20,7 +20,6 @@ class VisuallyHidden(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class VisuallyHidden(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/feedback/alert.pyi b/reflex/components/chakra/feedback/alert.pyi
index 769241125..aae57c1f7 100644
--- a/reflex/components/chakra/feedback/alert.pyi
+++ b/reflex/components/chakra/feedback/alert.pyi
@@ -37,7 +37,6 @@ class Alert(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -100,7 +99,6 @@ class Alert(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -120,7 +118,6 @@ class AlertIcon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -178,7 +175,6 @@ class AlertIcon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -201,7 +197,6 @@ class AlertTitle(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -259,7 +254,6 @@ class AlertTitle(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -282,7 +276,6 @@ class AlertDescription(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -340,7 +333,6 @@ class AlertDescription(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/feedback/circularprogress.pyi b/reflex/components/chakra/feedback/circularprogress.pyi
index d033946fa..4f1582041 100644
--- a/reflex/components/chakra/feedback/circularprogress.pyi
+++ b/reflex/components/chakra/feedback/circularprogress.pyi
@@ -34,7 +34,6 @@ class CircularProgress(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -103,7 +102,6 @@ class CircularProgress(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: the props of the component.
 
@@ -123,7 +121,6 @@ class CircularProgressLabel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -181,7 +178,6 @@ class CircularProgressLabel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/feedback/progress.pyi b/reflex/components/chakra/feedback/progress.pyi
index 4d9a1e714..c6c7b1aa4 100644
--- a/reflex/components/chakra/feedback/progress.pyi
+++ b/reflex/components/chakra/feedback/progress.pyi
@@ -29,7 +29,6 @@ class Progress(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -94,7 +93,6 @@ class Progress(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/feedback/skeleton.pyi b/reflex/components/chakra/feedback/skeleton.pyi
index 4cc33fff9..a393e5899 100644
--- a/reflex/components/chakra/feedback/skeleton.pyi
+++ b/reflex/components/chakra/feedback/skeleton.pyi
@@ -26,7 +26,6 @@ class Skeleton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -89,7 +88,6 @@ class Skeleton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -117,7 +115,6 @@ class SkeletonCircle(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -180,7 +177,6 @@ class SkeletonCircle(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -209,7 +205,6 @@ class SkeletonText(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -273,7 +268,6 @@ class SkeletonText(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/feedback/spinner.pyi b/reflex/components/chakra/feedback/spinner.pyi
index 5e2a195ba..6bd414911 100644
--- a/reflex/components/chakra/feedback/spinner.pyi
+++ b/reflex/components/chakra/feedback/spinner.pyi
@@ -31,7 +31,6 @@ class Spinner(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -94,7 +93,6 @@ class Spinner(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/__init__.py b/reflex/components/chakra/forms/__init__.py
index 56bf5b195..7bf225e35 100644
--- a/reflex/components/chakra/forms/__init__.py
+++ b/reflex/components/chakra/forms/__init__.py
@@ -7,7 +7,6 @@ from .colormodeswitch import (
     ColorModeIcon,
     ColorModeScript,
     ColorModeSwitch,
-    color_mode_cond,
 )
 from .date_picker import DatePicker
 from .date_time_picker import DateTimePicker
@@ -47,8 +46,4 @@ from .switch import Switch
 from .textarea import TextArea
 from .time_picker import TimePicker
 
-helpers = [
-    "color_mode_cond",
-]
-
-__all__ = [f for f in dir() if f[0].isupper()] + helpers  # type: ignore
+__all__ = [f for f in dir() if f[0].isupper()]  # type: ignore
diff --git a/reflex/components/chakra/forms/button.pyi b/reflex/components/chakra/forms/button.pyi
index 62023db77..47f2f9222 100644
--- a/reflex/components/chakra/forms/button.pyi
+++ b/reflex/components/chakra/forms/button.pyi
@@ -96,7 +96,6 @@ class Button(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -166,7 +165,6 @@ class Button(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -201,7 +199,6 @@ class ButtonGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -264,7 +261,6 @@ class ButtonGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/checkbox.pyi b/reflex/components/chakra/forms/checkbox.pyi
index 867bf8aab..024066d01 100644
--- a/reflex/components/chakra/forms/checkbox.pyi
+++ b/reflex/components/chakra/forms/checkbox.pyi
@@ -85,7 +85,6 @@ class Checkbox(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -158,7 +157,6 @@ class Checkbox(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -185,7 +183,6 @@ class CheckboxGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -247,7 +244,6 @@ class CheckboxGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/colormodeswitch.py b/reflex/components/chakra/forms/colormodeswitch.py
index 10de7a5a2..b88e5895b 100644
--- a/reflex/components/chakra/forms/colormodeswitch.py
+++ b/reflex/components/chakra/forms/colormodeswitch.py
@@ -16,40 +16,19 @@ rx.text(
 """
 from __future__ import annotations
 
-from typing import Any
-
 from reflex.components.chakra import ChakraComponent
 from reflex.components.chakra.media.icon import Icon
-from reflex.components.component import BaseComponent, Component
-from reflex.components.core.cond import Cond, cond
-from reflex.style import color_mode, toggle_color_mode
-from reflex.vars import Var
+from reflex.components.component import BaseComponent
+from reflex.components.core.cond import Cond, color_mode_cond
+from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
 
 from .button import Button
 from .switch import Switch
 
-DEFAULT_COLOR_MODE: str = "light"
 DEFAULT_LIGHT_ICON: Icon = Icon.create(tag="sun")
 DEFAULT_DARK_ICON: Icon = Icon.create(tag="moon")
 
 
-def color_mode_cond(light: Any, dark: Any = None) -> Var | Component:
-    """Create a component or Prop based on color_mode.
-
-    Args:
-        light: The component or prop to render if color_mode is default
-        dark: The component or prop to render if color_mode is non-default
-
-    Returns:
-        The conditional component or prop.
-    """
-    return cond(
-        color_mode == DEFAULT_COLOR_MODE,
-        light,
-        dark,
-    )
-
-
 class ColorModeIcon(Cond):
     """Displays the current color mode as an icon."""
 
@@ -90,7 +69,7 @@ class ColorModeSwitch(Switch):
         """
         return Switch.create(
             *children,
-            is_checked=color_mode != DEFAULT_COLOR_MODE,
+            is_checked=color_mode != LIGHT_COLOR_MODE,
             on_change=toggle_color_mode,
             **props,
         )
@@ -121,4 +100,4 @@ class ColorModeScript(ChakraComponent):
     """Chakra color mode script."""
 
     tag = "ColorModeScript"
-    initialColorMode = "light"
+    initialColorMode = LIGHT_COLOR_MODE
diff --git a/reflex/components/chakra/forms/colormodeswitch.pyi b/reflex/components/chakra/forms/colormodeswitch.pyi
index 77fcff291..ea273cc1f 100644
--- a/reflex/components/chakra/forms/colormodeswitch.pyi
+++ b/reflex/components/chakra/forms/colormodeswitch.pyi
@@ -7,22 +7,17 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Any
 from reflex.components.chakra import ChakraComponent
 from reflex.components.chakra.media.icon import Icon
-from reflex.components.component import BaseComponent, Component
-from reflex.components.core.cond import Cond, cond
-from reflex.style import color_mode, toggle_color_mode
-from reflex.vars import Var
+from reflex.components.component import BaseComponent
+from reflex.components.core.cond import Cond, color_mode_cond
+from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
 from .button import Button
 from .switch import Switch
 
-DEFAULT_COLOR_MODE: str
 DEFAULT_LIGHT_ICON: Icon
 DEFAULT_DARK_ICON: Icon
 
-def color_mode_cond(light: Any, dark: Any = None) -> Var | Component: ...
-
 class ColorModeIcon(Cond):
     @overload
     @classmethod
@@ -37,7 +32,6 @@ class ColorModeIcon(Cond):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -166,7 +160,6 @@ class ColorModeSwitch(Switch):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -238,7 +231,6 @@ class ColorModeSwitch(Switch):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 
@@ -326,7 +318,6 @@ class ColorModeButton(Button):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -396,7 +387,6 @@ class ColorModeButton(Button):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 
@@ -416,7 +406,6 @@ class ColorModeScript(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -474,7 +463,6 @@ class ColorModeScript(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/date_picker.pyi b/reflex/components/chakra/forms/date_picker.pyi
index c5d0f153e..e59fa43d4 100644
--- a/reflex/components/chakra/forms/date_picker.pyi
+++ b/reflex/components/chakra/forms/date_picker.pyi
@@ -41,7 +41,6 @@ class DatePicker(Input):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -121,7 +120,6 @@ class DatePicker(Input):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/chakra/forms/date_time_picker.pyi b/reflex/components/chakra/forms/date_time_picker.pyi
index 330739121..f205749c0 100644
--- a/reflex/components/chakra/forms/date_time_picker.pyi
+++ b/reflex/components/chakra/forms/date_time_picker.pyi
@@ -41,7 +41,6 @@ class DateTimePicker(Input):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -121,7 +120,6 @@ class DateTimePicker(Input):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/chakra/forms/editable.pyi b/reflex/components/chakra/forms/editable.pyi
index de7dfe4cb..26bb23e5b 100644
--- a/reflex/components/chakra/forms/editable.pyi
+++ b/reflex/components/chakra/forms/editable.pyi
@@ -32,7 +32,6 @@ class Editable(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -110,7 +109,6 @@ class Editable(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -133,7 +131,6 @@ class EditableInput(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -191,7 +188,6 @@ class EditableInput(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -214,7 +210,6 @@ class EditableTextarea(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -272,7 +267,6 @@ class EditableTextarea(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -295,7 +289,6 @@ class EditablePreview(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -353,7 +346,6 @@ class EditablePreview(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/email.pyi b/reflex/components/chakra/forms/email.pyi
index 5763c1c7b..51f90957d 100644
--- a/reflex/components/chakra/forms/email.pyi
+++ b/reflex/components/chakra/forms/email.pyi
@@ -41,7 +41,6 @@ class Email(Input):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -121,7 +120,6 @@ class Email(Input):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/chakra/forms/form.pyi b/reflex/components/chakra/forms/form.pyi
index 0a291ebf1..fd915a736 100644
--- a/reflex/components/chakra/forms/form.pyi
+++ b/reflex/components/chakra/forms/form.pyi
@@ -38,7 +38,6 @@ class Form(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -102,7 +101,6 @@ class Form(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the form.
 
@@ -131,7 +129,6 @@ class FormControl(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -197,7 +194,6 @@ class FormControl(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the form control.
 
@@ -220,7 +216,6 @@ class FormHelperText(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -278,7 +273,6 @@ class FormHelperText(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -302,7 +296,6 @@ class FormLabel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -361,7 +354,6 @@ class FormLabel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -384,7 +376,6 @@ class FormErrorMessage(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -442,7 +433,6 @@ class FormErrorMessage(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/iconbutton.pyi b/reflex/components/chakra/forms/iconbutton.pyi
index 6da52491d..245f7b2f0 100644
--- a/reflex/components/chakra/forms/iconbutton.pyi
+++ b/reflex/components/chakra/forms/iconbutton.pyi
@@ -33,7 +33,6 @@ class IconButton(Text):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -101,7 +100,6 @@ class IconButton(Text):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/input.py b/reflex/components/chakra/forms/input.py
index 363878f62..4512a4f48 100644
--- a/reflex/components/chakra/forms/input.py
+++ b/reflex/components/chakra/forms/input.py
@@ -30,7 +30,7 @@ class Input(ChakraComponent):
     placeholder: Var[str]
 
     # The type of input.
-    type_: Var[LiteralInputType] = "text"  # type: ignore
+    type_: Var[LiteralInputType]
 
     # The border color when the input is invalid.
     error_border_color: Var[str]
diff --git a/reflex/components/chakra/forms/input.pyi b/reflex/components/chakra/forms/input.pyi
index afd36c736..3c7ee8826 100644
--- a/reflex/components/chakra/forms/input.pyi
+++ b/reflex/components/chakra/forms/input.pyi
@@ -105,7 +105,6 @@ class Input(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -185,7 +184,6 @@ class Input(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -205,7 +203,6 @@ class InputGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -263,7 +260,6 @@ class InputGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -286,7 +282,6 @@ class InputLeftAddon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -344,7 +339,6 @@ class InputLeftAddon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -367,7 +361,6 @@ class InputRightAddon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -425,7 +418,6 @@ class InputRightAddon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -448,7 +440,6 @@ class InputLeftElement(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -506,7 +497,6 @@ class InputLeftElement(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -529,7 +519,6 @@ class InputRightElement(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -587,7 +576,6 @@ class InputRightElement(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/numberinput.pyi b/reflex/components/chakra/forms/numberinput.pyi
index 6f094a0f0..017040989 100644
--- a/reflex/components/chakra/forms/numberinput.pyi
+++ b/reflex/components/chakra/forms/numberinput.pyi
@@ -55,7 +55,6 @@ class NumberInput(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -136,7 +135,6 @@ class NumberInput(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -156,7 +154,6 @@ class NumberInputField(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -214,7 +211,6 @@ class NumberInputField(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -237,7 +233,6 @@ class NumberInputStepper(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -295,7 +290,6 @@ class NumberInputStepper(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -318,7 +312,6 @@ class NumberIncrementStepper(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -376,7 +369,6 @@ class NumberIncrementStepper(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -399,7 +391,6 @@ class NumberDecrementStepper(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -457,7 +448,6 @@ class NumberDecrementStepper(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/password.pyi b/reflex/components/chakra/forms/password.pyi
index ec30a0d38..c9a4ec026 100644
--- a/reflex/components/chakra/forms/password.pyi
+++ b/reflex/components/chakra/forms/password.pyi
@@ -41,7 +41,6 @@ class Password(Input):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -121,7 +120,6 @@ class Password(Input):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/chakra/forms/pininput.pyi b/reflex/components/chakra/forms/pininput.pyi
index 841370871..f255b7db1 100644
--- a/reflex/components/chakra/forms/pininput.pyi
+++ b/reflex/components/chakra/forms/pininput.pyi
@@ -49,7 +49,6 @@ class PinInput(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -131,7 +130,6 @@ class PinInput(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -156,7 +154,6 @@ class PinInputField(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -216,7 +213,6 @@ class PinInputField(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/radio.pyi b/reflex/components/chakra/forms/radio.pyi
index 81485ee13..d48cb6c33 100644
--- a/reflex/components/chakra/forms/radio.pyi
+++ b/reflex/components/chakra/forms/radio.pyi
@@ -31,7 +31,6 @@ class RadioGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -95,7 +94,6 @@ class RadioGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -126,7 +124,6 @@ class Radio(Text):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -197,7 +194,6 @@ class Radio(Text):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/rangeslider.pyi b/reflex/components/chakra/forms/rangeslider.pyi
index 63d4a9bf0..cb76cfbe8 100644
--- a/reflex/components/chakra/forms/rangeslider.pyi
+++ b/reflex/components/chakra/forms/rangeslider.pyi
@@ -40,7 +40,6 @@ class RangeSlider(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -120,7 +119,6 @@ class RangeSlider(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -140,7 +138,6 @@ class RangeSliderTrack(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -198,7 +195,6 @@ class RangeSliderTrack(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -221,7 +217,6 @@ class RangeSliderFilledTrack(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -279,7 +274,6 @@ class RangeSliderFilledTrack(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -304,7 +298,6 @@ class RangeSliderThumb(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -363,7 +356,6 @@ class RangeSliderThumb(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/select.pyi b/reflex/components/chakra/forms/select.pyi
index eae35ab04..a443896e4 100644
--- a/reflex/components/chakra/forms/select.pyi
+++ b/reflex/components/chakra/forms/select.pyi
@@ -44,7 +44,6 @@ class Select(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -119,7 +118,6 @@ class Select(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -142,7 +140,6 @@ class Option(Text):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -204,7 +201,6 @@ class Option(Text):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/slider.pyi b/reflex/components/chakra/forms/slider.pyi
index 9db6c6cf0..5bc500930 100644
--- a/reflex/components/chakra/forms/slider.pyi
+++ b/reflex/components/chakra/forms/slider.pyi
@@ -52,7 +52,6 @@ class Slider(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -139,7 +138,6 @@ class Slider(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -159,7 +157,6 @@ class SliderTrack(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -217,7 +214,6 @@ class SliderTrack(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -240,7 +236,6 @@ class SliderFilledTrack(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -298,7 +293,6 @@ class SliderFilledTrack(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -322,7 +316,6 @@ class SliderThumb(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -381,7 +374,6 @@ class SliderThumb(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -404,7 +396,6 @@ class SliderMark(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -462,7 +453,6 @@ class SliderMark(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/switch.pyi b/reflex/components/chakra/forms/switch.pyi
index e5376bec4..1af43b2f1 100644
--- a/reflex/components/chakra/forms/switch.pyi
+++ b/reflex/components/chakra/forms/switch.pyi
@@ -82,7 +82,6 @@ class Switch(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -154,7 +153,6 @@ class Switch(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/forms/textarea.pyi b/reflex/components/chakra/forms/textarea.pyi
index 87b867be9..48358e2ad 100644
--- a/reflex/components/chakra/forms/textarea.pyi
+++ b/reflex/components/chakra/forms/textarea.pyi
@@ -42,7 +42,6 @@ class TextArea(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -120,7 +119,6 @@ class TextArea(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/chakra/forms/time_picker.pyi b/reflex/components/chakra/forms/time_picker.pyi
index 172f8406d..ac833e37b 100644
--- a/reflex/components/chakra/forms/time_picker.pyi
+++ b/reflex/components/chakra/forms/time_picker.pyi
@@ -41,7 +41,6 @@ class TimePicker(Input):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -121,7 +120,6 @@ class TimePicker(Input):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/chakra/layout/__init__.py b/reflex/components/chakra/layout/__init__.py
index 1f49d98ea..13c28fdd4 100644
--- a/reflex/components/chakra/layout/__init__.py
+++ b/reflex/components/chakra/layout/__init__.py
@@ -7,7 +7,6 @@ from .center import Center, Circle, Square
 from .container import Container
 from .flex import Flex
 from .grid import Grid, GridItem, ResponsiveGrid
-from .html import Html
 from .spacer import Spacer
 from .stack import Hstack, Stack, Vstack
 from .wrap import Wrap, WrapItem
diff --git a/reflex/components/chakra/layout/aspect_ratio.pyi b/reflex/components/chakra/layout/aspect_ratio.pyi
index 59ec83f9b..1cd574abc 100644
--- a/reflex/components/chakra/layout/aspect_ratio.pyi
+++ b/reflex/components/chakra/layout/aspect_ratio.pyi
@@ -22,7 +22,6 @@ class AspectRatio(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -81,7 +80,6 @@ class AspectRatio(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/layout/box.pyi b/reflex/components/chakra/layout/box.pyi
index 832b2d803..ba1f769b8 100644
--- a/reflex/components/chakra/layout/box.pyi
+++ b/reflex/components/chakra/layout/box.pyi
@@ -25,7 +25,6 @@ class Box(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -86,7 +85,6 @@ class Box(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/layout/card.pyi b/reflex/components/chakra/layout/card.pyi
index 8c09b0095..6ec404acd 100644
--- a/reflex/components/chakra/layout/card.pyi
+++ b/reflex/components/chakra/layout/card.pyi
@@ -28,7 +28,6 @@ class CardHeader(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -86,7 +85,6 @@ class CardHeader(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -109,7 +107,6 @@ class CardBody(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -167,7 +164,6 @@ class CardBody(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -190,7 +186,6 @@ class CardFooter(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -248,7 +243,6 @@ class CardFooter(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -333,7 +327,6 @@ class Card(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
diff --git a/reflex/components/chakra/layout/center.pyi b/reflex/components/chakra/layout/center.pyi
index 690be5b73..98fbbb84b 100644
--- a/reflex/components/chakra/layout/center.pyi
+++ b/reflex/components/chakra/layout/center.pyi
@@ -20,7 +20,6 @@ class Center(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class Center(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -101,7 +99,6 @@ class Square(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -159,7 +156,6 @@ class Square(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -182,7 +178,6 @@ class Circle(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -240,7 +235,6 @@ class Circle(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/layout/container.pyi b/reflex/components/chakra/layout/container.pyi
index ed0b08966..22594f4af 100644
--- a/reflex/components/chakra/layout/container.pyi
+++ b/reflex/components/chakra/layout/container.pyi
@@ -22,7 +22,6 @@ class Container(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -81,7 +80,6 @@ class Container(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/layout/flex.pyi b/reflex/components/chakra/layout/flex.pyi
index 19614eae2..dbb3b36dc 100644
--- a/reflex/components/chakra/layout/flex.pyi
+++ b/reflex/components/chakra/layout/flex.pyi
@@ -31,7 +31,6 @@ class Flex(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -96,7 +95,6 @@ class Flex(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/layout/grid.pyi b/reflex/components/chakra/layout/grid.pyi
index 1be11985c..7195a1579 100644
--- a/reflex/components/chakra/layout/grid.pyi
+++ b/reflex/components/chakra/layout/grid.pyi
@@ -29,7 +29,6 @@ class Grid(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -94,7 +93,6 @@ class Grid(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -124,7 +122,6 @@ class GridItem(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -189,7 +186,6 @@ class GridItem(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -225,7 +221,6 @@ class ResponsiveGrid(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -296,7 +291,6 @@ class ResponsiveGrid(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/layout/spacer.pyi b/reflex/components/chakra/layout/spacer.pyi
index 2797311e2..6a793ce19 100644
--- a/reflex/components/chakra/layout/spacer.pyi
+++ b/reflex/components/chakra/layout/spacer.pyi
@@ -20,7 +20,6 @@ class Spacer(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class Spacer(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/layout/stack.pyi b/reflex/components/chakra/layout/stack.pyi
index af39a2773..28d110979 100644
--- a/reflex/components/chakra/layout/stack.pyi
+++ b/reflex/components/chakra/layout/stack.pyi
@@ -35,7 +35,6 @@ class Stack(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -101,7 +100,6 @@ class Stack(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -137,7 +135,6 @@ class Hstack(Stack):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -203,7 +200,6 @@ class Hstack(Stack):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -239,7 +235,6 @@ class Vstack(Stack):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -305,7 +300,6 @@ class Vstack(Stack):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/layout/wrap.pyi b/reflex/components/chakra/layout/wrap.pyi
index 895a35f1a..ba54d9431 100644
--- a/reflex/components/chakra/layout/wrap.pyi
+++ b/reflex/components/chakra/layout/wrap.pyi
@@ -30,7 +30,6 @@ class Wrap(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -96,7 +95,6 @@ class Wrap(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -116,7 +114,6 @@ class WrapItem(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -174,7 +171,6 @@ class WrapItem(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/media/avatar.pyi b/reflex/components/chakra/media/avatar.pyi
index 1b313ecd6..69b017801 100644
--- a/reflex/components/chakra/media/avatar.pyi
+++ b/reflex/components/chakra/media/avatar.pyi
@@ -36,7 +36,6 @@ class Avatar(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -105,7 +104,6 @@ class Avatar(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -128,7 +126,6 @@ class AvatarBadge(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -186,7 +183,6 @@ class AvatarBadge(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -211,7 +207,6 @@ class AvatarGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -271,7 +266,6 @@ class AvatarGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/media/icon.pyi b/reflex/components/chakra/media/icon.pyi
index f856a2f40..987722c01 100644
--- a/reflex/components/chakra/media/icon.pyi
+++ b/reflex/components/chakra/media/icon.pyi
@@ -22,7 +22,6 @@ class ChakraIconComponent(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -80,7 +79,6 @@ class ChakraIconComponent(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -103,7 +101,6 @@ class Icon(ChakraIconComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -163,7 +160,6 @@ class Icon(ChakraIconComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The keyword arguments
 
diff --git a/reflex/components/chakra/media/image.pyi b/reflex/components/chakra/media/image.pyi
index 6804f974b..e20e3a871 100644
--- a/reflex/components/chakra/media/image.pyi
+++ b/reflex/components/chakra/media/image.pyi
@@ -37,7 +37,6 @@ class Image(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -112,7 +111,6 @@ class Image(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the image.
 
diff --git a/reflex/components/chakra/navigation/breadcrumb.pyi b/reflex/components/chakra/navigation/breadcrumb.pyi
index 6d10aae15..e7993cd52 100644
--- a/reflex/components/chakra/navigation/breadcrumb.pyi
+++ b/reflex/components/chakra/navigation/breadcrumb.pyi
@@ -27,7 +27,6 @@ class Breadcrumb(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -90,7 +89,6 @@ class Breadcrumb(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -116,7 +114,6 @@ class BreadcrumbItem(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -180,7 +177,6 @@ class BreadcrumbItem(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -200,7 +196,6 @@ class BreadcrumbSeparator(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -258,7 +253,6 @@ class BreadcrumbSeparator(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -287,7 +281,6 @@ class BreadcrumbLink(Link):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -351,7 +344,6 @@ class BreadcrumbLink(Link):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/navigation/link.pyi b/reflex/components/chakra/navigation/link.pyi
index 190fb7b09..a5b3db0e0 100644
--- a/reflex/components/chakra/navigation/link.pyi
+++ b/reflex/components/chakra/navigation/link.pyi
@@ -31,7 +31,6 @@ class Link(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -94,7 +93,6 @@ class Link(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/navigation/linkoverlay.pyi b/reflex/components/chakra/navigation/linkoverlay.pyi
index 9fcc7cc83..7daaf1924 100644
--- a/reflex/components/chakra/navigation/linkoverlay.pyi
+++ b/reflex/components/chakra/navigation/linkoverlay.pyi
@@ -23,7 +23,6 @@ class LinkOverlay(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -83,7 +82,6 @@ class LinkOverlay(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -106,7 +104,6 @@ class LinkBox(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -164,7 +161,6 @@ class LinkBox(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/navigation/stepper.pyi b/reflex/components/chakra/navigation/stepper.pyi
index 6bdb20843..a4020d1cf 100644
--- a/reflex/components/chakra/navigation/stepper.pyi
+++ b/reflex/components/chakra/navigation/stepper.pyi
@@ -80,7 +80,6 @@ class Stepper(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -144,7 +143,6 @@ class Stepper(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -164,7 +162,6 @@ class Step(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -222,7 +219,6 @@ class Step(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -245,7 +241,6 @@ class StepDescription(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -303,7 +298,6 @@ class StepDescription(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -326,7 +320,6 @@ class StepIcon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -384,7 +377,6 @@ class StepIcon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -407,7 +399,6 @@ class StepIndicator(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -465,7 +456,6 @@ class StepIndicator(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -488,7 +478,6 @@ class StepNumber(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -546,7 +535,6 @@ class StepNumber(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -569,7 +557,6 @@ class StepSeparator(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -627,7 +614,6 @@ class StepSeparator(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -653,7 +639,6 @@ class StepStatus(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -712,7 +697,6 @@ class StepStatus(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -735,7 +719,6 @@ class StepTitle(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -793,7 +776,6 @@ class StepTitle(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/overlay/alertdialog.pyi b/reflex/components/chakra/overlay/alertdialog.pyi
index ce508361f..01fd6240e 100644
--- a/reflex/components/chakra/overlay/alertdialog.pyi
+++ b/reflex/components/chakra/overlay/alertdialog.pyi
@@ -62,7 +62,6 @@ class AlertDialog(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -149,7 +148,6 @@ class AlertDialog(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the alert dialog component.
 
@@ -172,7 +170,6 @@ class AlertDialogBody(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -230,7 +227,6 @@ class AlertDialogBody(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -253,7 +249,6 @@ class AlertDialogHeader(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -311,7 +306,6 @@ class AlertDialogHeader(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -334,7 +328,6 @@ class AlertDialogFooter(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -392,7 +385,6 @@ class AlertDialogFooter(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -415,7 +407,6 @@ class AlertDialogContent(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -473,7 +464,6 @@ class AlertDialogContent(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -496,7 +486,6 @@ class AlertDialogOverlay(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -554,7 +543,6 @@ class AlertDialogOverlay(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -577,7 +565,6 @@ class AlertDialogCloseButton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -635,7 +622,6 @@ class AlertDialogCloseButton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/overlay/drawer.pyi b/reflex/components/chakra/overlay/drawer.pyi
index 189378795..be6c3830b 100644
--- a/reflex/components/chakra/overlay/drawer.pyi
+++ b/reflex/components/chakra/overlay/drawer.pyi
@@ -101,7 +101,6 @@ class Drawer(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -191,7 +190,6 @@ class Drawer(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the drawer component.
 
@@ -214,7 +212,6 @@ class DrawerBody(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -272,7 +269,6 @@ class DrawerBody(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -295,7 +291,6 @@ class DrawerHeader(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -353,7 +348,6 @@ class DrawerHeader(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -376,7 +370,6 @@ class DrawerFooter(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -434,7 +427,6 @@ class DrawerFooter(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -457,7 +449,6 @@ class DrawerOverlay(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -515,7 +506,6 @@ class DrawerOverlay(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -538,7 +528,6 @@ class DrawerContent(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -596,7 +585,6 @@ class DrawerContent(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -619,7 +607,6 @@ class DrawerCloseButton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -677,7 +664,6 @@ class DrawerCloseButton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/overlay/menu.pyi b/reflex/components/chakra/overlay/menu.pyi
index 660838313..3450cfde9 100644
--- a/reflex/components/chakra/overlay/menu.pyi
+++ b/reflex/components/chakra/overlay/menu.pyi
@@ -52,7 +52,6 @@ class Menu(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -134,7 +133,6 @@ class Menu(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -156,7 +154,6 @@ class MenuButton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -216,7 +213,6 @@ class MenuButton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -240,7 +236,6 @@ class MenuList(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -299,7 +294,6 @@ class MenuList(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -324,7 +318,6 @@ class MenuItem(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -387,7 +380,6 @@ class MenuItem(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -420,7 +412,6 @@ class MenuItemOption(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -486,7 +477,6 @@ class MenuItemOption(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -509,7 +499,6 @@ class MenuGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -567,7 +556,6 @@ class MenuGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -594,7 +582,6 @@ class MenuOptionGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -654,7 +641,6 @@ class MenuOptionGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -677,7 +663,6 @@ class MenuDivider(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -735,7 +720,6 @@ class MenuDivider(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/overlay/modal.pyi b/reflex/components/chakra/overlay/modal.pyi
index 9b3d2826e..5550f6d42 100644
--- a/reflex/components/chakra/overlay/modal.pyi
+++ b/reflex/components/chakra/overlay/modal.pyi
@@ -49,7 +49,6 @@ class Modal(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -136,7 +135,6 @@ class Modal(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -159,7 +157,6 @@ class ModalOverlay(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -217,7 +214,6 @@ class ModalOverlay(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -240,7 +236,6 @@ class ModalHeader(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -298,7 +293,6 @@ class ModalHeader(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -321,7 +315,6 @@ class ModalFooter(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -379,7 +372,6 @@ class ModalFooter(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -402,7 +394,6 @@ class ModalContent(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -460,7 +451,6 @@ class ModalContent(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -483,7 +473,6 @@ class ModalBody(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -541,7 +530,6 @@ class ModalBody(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -564,7 +552,6 @@ class ModalCloseButton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -622,7 +609,6 @@ class ModalCloseButton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/overlay/popover.pyi b/reflex/components/chakra/overlay/popover.pyi
index d502f29bb..2f39860d3 100644
--- a/reflex/components/chakra/overlay/popover.pyi
+++ b/reflex/components/chakra/overlay/popover.pyi
@@ -58,7 +58,6 @@ class Popover(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -147,7 +146,6 @@ class Popover(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -167,7 +165,6 @@ class PopoverContent(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -225,7 +222,6 @@ class PopoverContent(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -248,7 +244,6 @@ class PopoverHeader(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -306,7 +301,6 @@ class PopoverHeader(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -329,7 +323,6 @@ class PopoverFooter(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -387,7 +380,6 @@ class PopoverFooter(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -410,7 +402,6 @@ class PopoverBody(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -468,7 +459,6 @@ class PopoverBody(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -491,7 +481,6 @@ class PopoverArrow(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -549,7 +538,6 @@ class PopoverArrow(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -572,7 +560,6 @@ class PopoverCloseButton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -630,7 +617,6 @@ class PopoverCloseButton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -653,7 +639,6 @@ class PopoverAnchor(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -711,7 +696,6 @@ class PopoverAnchor(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -734,7 +718,6 @@ class PopoverTrigger(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -792,7 +775,6 @@ class PopoverTrigger(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/overlay/tooltip.pyi b/reflex/components/chakra/overlay/tooltip.pyi
index 492e1c41c..e7aad7f50 100644
--- a/reflex/components/chakra/overlay/tooltip.pyi
+++ b/reflex/components/chakra/overlay/tooltip.pyi
@@ -42,7 +42,6 @@ class Tooltip(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -123,7 +122,6 @@ class Tooltip(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/typography/heading.pyi b/reflex/components/chakra/typography/heading.pyi
index 2aef0a631..e6cfa6b11 100644
--- a/reflex/components/chakra/typography/heading.pyi
+++ b/reflex/components/chakra/typography/heading.pyi
@@ -28,7 +28,6 @@ class Heading(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -88,7 +87,6 @@ class Heading(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/typography/highlight.pyi b/reflex/components/chakra/typography/highlight.pyi
index 91b194554..0d935a7e8 100644
--- a/reflex/components/chakra/typography/highlight.pyi
+++ b/reflex/components/chakra/typography/highlight.pyi
@@ -25,7 +25,6 @@ class Highlight(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -85,7 +84,6 @@ class Highlight(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/typography/span.pyi b/reflex/components/chakra/typography/span.pyi
index 84c39bcbd..5cb16e319 100644
--- a/reflex/components/chakra/typography/span.pyi
+++ b/reflex/components/chakra/typography/span.pyi
@@ -22,7 +22,6 @@ class Span(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -81,7 +80,6 @@ class Span(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/chakra/typography/text.pyi b/reflex/components/chakra/typography/text.pyi
index 6fb06ada7..ca81acc24 100644
--- a/reflex/components/chakra/typography/text.pyi
+++ b/reflex/components/chakra/typography/text.pyi
@@ -23,7 +23,6 @@ class Text(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -83,7 +82,6 @@ class Text(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/component.py b/reflex/components/component.py
index 0d619a8cf..ffee162fa 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -7,6 +7,7 @@ import typing
 from abc import ABC, abstractmethod
 from functools import lru_cache, wraps
 from hashlib import md5
+from types import SimpleNamespace
 from typing import (
     Any,
     Callable,
@@ -114,8 +115,38 @@ class BaseComponent(Base, ABC):
         """
 
 
+class ComponentNamespace(SimpleNamespace):
+    """A namespace to manage components with subcomponents."""
+
+    def __hash__(self) -> int:
+        """Get the hash of the namespace.
+
+
+        Returns:
+            The hash of the namespace.
+        """
+        return hash(self.__class__.__name__)
+
+
+def evaluate_style_namespaces(style: ComponentStyle) -> dict:
+    """Evaluate namespaces in the style.
+
+    Args:
+        style: The style to evaluate.
+
+    Returns:
+        The evaluated style.
+    """
+    return {
+        k.__call__ if isinstance(k, ComponentNamespace) else k: v
+        for k, v in style.items()
+    }
+
+
 # Map from component to styling.
-ComponentStyle = Dict[Union[str, Type[BaseComponent], Callable], Any]
+ComponentStyle = Dict[
+    Union[str, Type[BaseComponent], Callable, ComponentNamespace], Any
+]
 ComponentChild = Union[types.PrimitiveType, Var, BaseComponent]
 
 
@@ -190,6 +221,14 @@ class Component(BaseComponent, ABC):
                 field.required = False
                 field.default = Var.create(field.default)
 
+        # Ensure renamed props from parent classes are applied to the subclass.
+        if cls._rename_props:
+            inherited_rename_props = {}
+            for parent in reversed(cls.mro()):
+                if issubclass(parent, Component) and parent._rename_props:
+                    inherited_rename_props.update(parent._rename_props)
+            cls._rename_props = inherited_rename_props
+
     def __init__(self, *args, **kwargs):
         """Initialize the component.
 
@@ -559,6 +598,21 @@ class Component(BaseComponent, ABC):
         # Import here to avoid circular imports.
         from reflex.components.base.bare import Bare
 
+        # Translate deprecated props to new names.
+        new_prop_names = [
+            prop for prop in cls.get_props() if prop in ["type", "min", "max"]
+        ]
+        for prop in new_prop_names:
+            under_prop = f"{prop}_"
+            if under_prop in props:
+                console.deprecate(
+                    f"Underscore suffix for prop `{under_prop}`",
+                    reason=f"for consistency. Use `{prop}` instead.",
+                    deprecation_version="0.4.0",
+                    removal_version="0.5.0",
+                )
+                props[prop] = props.pop(under_prop)
+
         # Validate all the children.
         for child in children:
             # Make sure the child is a valid type.
@@ -659,7 +713,7 @@ class Component(BaseComponent, ABC):
         for ix, prop in enumerate(rendered_dict["props"]):
             for old_prop, new_prop in self._rename_props.items():
                 if prop.startswith(old_prop):
-                    rendered_dict["props"][ix] = prop.replace(old_prop, new_prop)
+                    rendered_dict["props"][ix] = prop.replace(old_prop, new_prop, 1)
 
     def _validate_component_children(self, children: List[Component]):
         """Validate the children components.
@@ -668,20 +722,43 @@ class Component(BaseComponent, ABC):
             children: The children of the component.
 
         """
-        skip_parentable = all(child._valid_parents == [] for child in children)
-        if not self._invalid_children and not self._valid_children and skip_parentable:
+        no_valid_parents_defined = all(child._valid_parents == [] for child in children)
+        if (
+            not self._invalid_children
+            and not self._valid_children
+            and no_valid_parents_defined
+        ):
             return
 
         comp_name = type(self).__name__
+        allowed_components = ["Fragment", "Foreach", "Cond", "Match"]
 
-        def validate_invalid_child(child_name):
-            if child_name in self._invalid_children:
+        def validate_child(child):
+            child_name = type(child).__name__
+
+            # Iterate through the immediate children of fragment
+            if child_name == "Fragment":
+                for c in child.children:
+                    validate_child(c)
+
+            if child_name == "Cond":
+                validate_child(child.comp1)
+                validate_child(child.comp2)
+
+            if child_name == "Match":
+                for cases in child.match_cases:
+                    validate_child(cases[-1])
+                validate_child(child.default)
+
+            if self._invalid_children and child_name in self._invalid_children:
                 raise ValueError(
                     f"The component `{comp_name}` cannot have `{child_name}` as a child component"
                 )
 
-        def validate_valid_child(child_name):
-            if child_name not in self._valid_children:
+            if self._valid_children and child_name not in [
+                *self._valid_children,
+                *allowed_components,
+            ]:
                 valid_child_list = ", ".join(
                     [f"`{v_child}`" for v_child in self._valid_children]
                 )
@@ -689,26 +766,19 @@ class Component(BaseComponent, ABC):
                     f"The component `{comp_name}` only allows the components: {valid_child_list} as children. Got `{child_name}` instead."
                 )
 
-        def validate_vaild_parent(child_name, valid_parents):
-            if comp_name not in valid_parents:
+            if child._valid_parents and comp_name not in [
+                *child._valid_parents,
+                *allowed_components,
+            ]:
                 valid_parent_list = ", ".join(
-                    [f"`{v_parent}`" for v_parent in valid_parents]
+                    [f"`{v_parent}`" for v_parent in child._valid_parents]
                 )
                 raise ValueError(
                     f"The component `{child_name}` can only be a child of the components: {valid_parent_list}. Got `{comp_name}` instead."
                 )
 
         for child in children:
-            name = type(child).__name__
-
-            if self._invalid_children:
-                validate_invalid_child(name)
-
-            if self._valid_children:
-                validate_valid_child(name)
-
-            if child._valid_parents:
-                validate_vaild_parent(name, child._valid_parents)
+            validate_child(child)
 
     @staticmethod
     def _get_vars_from_event_triggers(
diff --git a/reflex/components/core/__init__.py b/reflex/components/core/__init__.py
index 54acefb55..11c554bfd 100644
--- a/reflex/components/core/__init__.py
+++ b/reflex/components/core/__init__.py
@@ -3,9 +3,10 @@
 from . import layout as layout
 from .banner import ConnectionBanner, ConnectionModal
 from .colors import color
-from .cond import Cond, cond
+from .cond import Cond, color_mode_cond, cond
 from .debounce import DebounceInput
 from .foreach import Foreach
+from .html import Html
 from .match import Match
 from .responsive import (
     desktop_only,
@@ -27,5 +28,6 @@ connection_banner = ConnectionBanner.create
 connection_modal = ConnectionModal.create
 debounce_input = DebounceInput.create
 foreach = Foreach.create
+html = Html.create
 match = Match.create
 upload = Upload.create
diff --git a/reflex/components/core/banner.py b/reflex/components/core/banner.py
index c0e13820e..182d6a5e5 100644
--- a/reflex/components/core/banner.py
+++ b/reflex/components/core/banner.py
@@ -1,14 +1,19 @@
 """Banner components."""
+
 from __future__ import annotations
 
 from typing import Optional
 
 from reflex.components.base.bare import Bare
-from reflex.components.chakra.layout import Box
-from reflex.components.chakra.overlay.modal import Modal
-from reflex.components.chakra.typography import Text
 from reflex.components.component import Component
 from reflex.components.core.cond import cond
+from reflex.components.radix.themes.components.dialog import (
+    DialogContent,
+    DialogRoot,
+    DialogTitle,
+)
+from reflex.components.radix.themes.layout import Box
+from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import Dirs, Hooks, Imports
 from reflex.utils import imports
 from reflex.vars import Var, VarData
@@ -105,9 +110,11 @@ class ConnectionModal(Component):
             comp = Text.create(*default_connection_error())
         return cond(
             has_connection_error,
-            Modal.create(
-                header="Connection Error",
-                body=comp,
-                is_open=has_connection_error,
+            DialogRoot.create(
+                DialogContent.create(
+                    DialogTitle.create("Connection Error"),
+                    comp,
+                ),
+                open=has_connection_error,
             ),
         )
diff --git a/reflex/components/core/banner.pyi b/reflex/components/core/banner.pyi
index 00f9a5121..f7c7b2577 100644
--- a/reflex/components/core/banner.pyi
+++ b/reflex/components/core/banner.pyi
@@ -9,11 +9,15 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Optional
 from reflex.components.base.bare import Bare
-from reflex.components.chakra.layout import Box
-from reflex.components.chakra.overlay.modal import Modal
-from reflex.components.chakra.typography import Text
 from reflex.components.component import Component
 from reflex.components.core.cond import cond
+from reflex.components.radix.themes.components.dialog import (
+    DialogContent,
+    DialogRoot,
+    DialogTitle,
+)
+from reflex.components.radix.themes.layout import Box
+from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import Dirs, Hooks, Imports
 from reflex.utils import imports
 from reflex.vars import Var, VarData
@@ -34,7 +38,6 @@ class WebsocketTargetURL(Bare):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -103,7 +106,6 @@ class ConnectionBanner(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -173,7 +175,6 @@ class ConnectionModal(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
diff --git a/reflex/components/core/client_side_routing.pyi b/reflex/components/core/client_side_routing.pyi
index 4b90e79c4..53bf90043 100644
--- a/reflex/components/core/client_side_routing.pyi
+++ b/reflex/components/core/client_side_routing.pyi
@@ -26,7 +26,6 @@ class ClientSideRouting(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -84,7 +83,6 @@ class ClientSideRouting(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -110,7 +108,6 @@ class Default404Page(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -168,7 +165,6 @@ class Default404Page(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/core/cond.py b/reflex/components/core/cond.py
index 76e6c56c1..12a617cbb 100644
--- a/reflex/components/core/cond.py
+++ b/reflex/components/core/cond.py
@@ -8,6 +8,7 @@ from reflex.components.component import BaseComponent, Component, MemoizationLea
 from reflex.components.tags import CondTag, Tag
 from reflex.constants import Dirs
 from reflex.constants.colors import Color
+from reflex.style import LIGHT_COLOR_MODE, color_mode
 from reflex.utils import format, imports
 from reflex.vars import BaseVar, Var, VarData
 
@@ -192,3 +193,20 @@ def cond(condition: Any, c1: Any, c2: Any = None):
         _var_full_name_needs_state_prefix=False,
         merge_var_data=VarData.merge(*var_datas),
     )
+
+
+def color_mode_cond(light: Any, dark: Any = None) -> Var | Component:
+    """Create a component or Prop based on color_mode.
+
+    Args:
+        light: The component or prop to render if color_mode is default
+        dark: The component or prop to render if color_mode is non-default
+
+    Returns:
+        The conditional component or prop.
+    """
+    return cond(
+        color_mode == LIGHT_COLOR_MODE,
+        light,
+        dark,
+    )
diff --git a/reflex/components/core/debounce.pyi b/reflex/components/core/debounce.pyi
index db9a3e8b0..a37d6c1ae 100644
--- a/reflex/components/core/debounce.pyi
+++ b/reflex/components/core/debounce.pyi
@@ -32,7 +32,6 @@ class DebounceInput(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
diff --git a/reflex/components/chakra/layout/html.py b/reflex/components/core/html.py
similarity index 92%
rename from reflex/components/chakra/layout/html.py
rename to reflex/components/core/html.py
index 1069bc7e5..987d216a3 100644
--- a/reflex/components/chakra/layout/html.py
+++ b/reflex/components/core/html.py
@@ -1,11 +1,11 @@
 """A html component."""
 from typing import Dict
 
-from reflex.components.chakra.layout.box import Box
+from reflex.components.el.elements.typography import Div
 from reflex.vars import Var
 
 
-class Html(Box):
+class Html(Div):
     """Render the html.
 
     Returns:
diff --git a/reflex/components/core/html.pyi b/reflex/components/core/html.pyi
new file mode 100644
index 000000000..e5246380c
--- /dev/null
+++ b/reflex/components/core/html.pyi
@@ -0,0 +1,151 @@
+"""Stub file for reflex/components/core/html.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Dict
+from reflex.components.el.elements.typography import Div
+from reflex.vars import Var
+
+class Html(Div):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        dangerouslySetInnerHTML: Optional[
+            Union[Var[Dict[str, str]], Dict[str, str]]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Html":
+        """Create a html component.
+
+        Args:
+            *children: The children of the component.
+            dangerouslySetInnerHTML: The HTML to render.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props to pass to the component.
+
+        Returns:
+            The html component.
+
+        Raises:
+            ValueError: If children are not provided or more than one child is provided.
+        """
+        ...
diff --git a/reflex/components/core/match.py b/reflex/components/core/match.py
index 2b966497b..f1f4a2096 100644
--- a/reflex/components/core/match.py
+++ b/reflex/components/core/match.py
@@ -1,4 +1,5 @@
 """rx.match."""
+
 import textwrap
 from typing import Any, Dict, List, Optional, Tuple, Union
 
diff --git a/reflex/components/core/upload.pyi b/reflex/components/core/upload.pyi
index 5509d832e..828976d72 100644
--- a/reflex/components/core/upload.pyi
+++ b/reflex/components/core/upload.pyi
@@ -46,7 +46,6 @@ class UploadFilesProvider(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -104,7 +103,6 @@ class UploadFilesProvider(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -140,7 +138,6 @@ class Upload(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -210,7 +207,6 @@ class Upload(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/datadisplay/__init__.py b/reflex/components/datadisplay/__init__.py
index 0ef1619d1..ba40d9f59 100644
--- a/reflex/components/datadisplay/__init__.py
+++ b/reflex/components/datadisplay/__init__.py
@@ -1,6 +1,10 @@
 """Data grid components."""
 
+from .code import CodeBlock
+from .code import LiteralCodeBlockTheme as LiteralCodeBlockTheme
+from .code import LiteralCodeLanguage as LiteralCodeLanguage
 from .dataeditor import DataEditor, DataEditorTheme
 
+code_block = CodeBlock.create
 data_editor = DataEditor.create
 data_editor_theme = DataEditorTheme
diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
new file mode 100644
index 000000000..0ac0d4d27
--- /dev/null
+++ b/reflex/components/datadisplay/code.py
@@ -0,0 +1,513 @@
+"""A code component."""
+import re
+from typing import Dict, Literal, Optional, Union
+
+from reflex.components.chakra.forms import Button
+from reflex.components.chakra.layout import Box
+from reflex.components.chakra.media import Icon
+from reflex.components.component import Component
+from reflex.components.core.cond import color_mode_cond
+from reflex.event import set_clipboard
+from reflex.style import Style
+from reflex.utils import format, imports
+from reflex.utils.imports import ImportVar
+from reflex.vars import Var
+
+LiteralCodeBlockTheme = Literal[
+    "a11y-dark",
+    "atom-dark",
+    "cb",
+    "coldark-cold",
+    "coldark-dark",
+    "coy",
+    "coy-without-shadows",
+    "darcula",
+    "dark",
+    "dracula",
+    "duotone-dark",
+    "duotone-earth",
+    "duotone-forest",
+    "duotone-light",
+    "duotone-sea",
+    "duotone-space",
+    "funky",
+    "ghcolors",
+    "gruvbox-dark",
+    "gruvbox-light",
+    "holi-theme",
+    "hopscotch",
+    "light",  # not present in react-syntax-highlighter styles
+    "lucario",
+    "material-dark",
+    "material-light",
+    "material-oceanic",
+    "night-owl",
+    "nord",
+    "okaidia",
+    "one-dark",
+    "one-light",
+    "pojoaque",
+    "prism",
+    "shades-of-purple",
+    "solarized-dark-atom",
+    "solarizedlight",
+    "synthwave84",
+    "tomorrow",
+    "twilight",
+    "vs",
+    "vs-dark",
+    "vsc-dark-plus",
+    "xonokai",
+    "z-touch",
+]
+
+
+LiteralCodeLanguage = Literal[
+    "abap",
+    "abnf",
+    "actionscript",
+    "ada",
+    "agda",
+    "al",
+    "antlr4",
+    "apacheconf",
+    "apex",
+    "apl",
+    "applescript",
+    "aql",
+    "arduino",
+    "arff",
+    "asciidoc",
+    "asm6502",
+    "asmatmel",
+    "aspnet",
+    "autohotkey",
+    "autoit",
+    "avisynth",
+    "avro-idl",
+    "bash",
+    "basic",
+    "batch",
+    "bbcode",
+    "bicep",
+    "birb",
+    "bison",
+    "bnf",
+    "brainfuck",
+    "brightscript",
+    "bro",
+    "bsl",
+    "c",
+    "cfscript",
+    "chaiscript",
+    "cil",
+    "clike",
+    "clojure",
+    "cmake",
+    "cobol",
+    "coffeescript",
+    "concurnas",
+    "coq",
+    "core",
+    "cpp",
+    "crystal",
+    "csharp",
+    "cshtml",
+    "csp",
+    "css",
+    "css-extras",
+    "csv",
+    "cypher",
+    "d",
+    "dart",
+    "dataweave",
+    "dax",
+    "dhall",
+    "diff",
+    "django",
+    "dns-zone-file",
+    "docker",
+    "dot",
+    "ebnf",
+    "editorconfig",
+    "eiffel",
+    "ejs",
+    "elixir",
+    "elm",
+    "erb",
+    "erlang",
+    "etlua",
+    "excel-formula",
+    "factor",
+    "false",
+    "firestore-security-rules",
+    "flow",
+    "fortran",
+    "fsharp",
+    "ftl",
+    "gap",
+    "gcode",
+    "gdscript",
+    "gedcom",
+    "gherkin",
+    "git",
+    "glsl",
+    "gml",
+    "gn",
+    "go",
+    "go-module",
+    "graphql",
+    "groovy",
+    "haml",
+    "handlebars",
+    "haskell",
+    "haxe",
+    "hcl",
+    "hlsl",
+    "hoon",
+    "hpkp",
+    "hsts",
+    "http",
+    "ichigojam",
+    "icon",
+    "icu-message-format",
+    "idris",
+    "iecst",
+    "ignore",
+    "index",
+    "inform7",
+    "ini",
+    "io",
+    "j",
+    "java",
+    "javadoc",
+    "javadoclike",
+    "javascript",
+    "javastacktrace",
+    "jexl",
+    "jolie",
+    "jq",
+    "js-extras",
+    "js-templates",
+    "jsdoc",
+    "json",
+    "json5",
+    "jsonp",
+    "jsstacktrace",
+    "jsx",
+    "julia",
+    "keepalived",
+    "keyman",
+    "kotlin",
+    "kumir",
+    "kusto",
+    "latex",
+    "latte",
+    "less",
+    "lilypond",
+    "liquid",
+    "lisp",
+    "livescript",
+    "llvm",
+    "log",
+    "lolcode",
+    "lua",
+    "magma",
+    "makefile",
+    "markdown",
+    "markup",
+    "markup-templating",
+    "matlab",
+    "maxscript",
+    "mel",
+    "mermaid",
+    "mizar",
+    "mongodb",
+    "monkey",
+    "moonscript",
+    "n1ql",
+    "n4js",
+    "nand2tetris-hdl",
+    "naniscript",
+    "nasm",
+    "neon",
+    "nevod",
+    "nginx",
+    "nim",
+    "nix",
+    "nsis",
+    "objectivec",
+    "ocaml",
+    "opencl",
+    "openqasm",
+    "oz",
+    "parigp",
+    "parser",
+    "pascal",
+    "pascaligo",
+    "pcaxis",
+    "peoplecode",
+    "perl",
+    "php",
+    "php-extras",
+    "phpdoc",
+    "plsql",
+    "powerquery",
+    "powershell",
+    "processing",
+    "prolog",
+    "promql",
+    "properties",
+    "protobuf",
+    "psl",
+    "pug",
+    "puppet",
+    "pure",
+    "purebasic",
+    "purescript",
+    "python",
+    "q",
+    "qml",
+    "qore",
+    "qsharp",
+    "r",
+    "racket",
+    "reason",
+    "regex",
+    "rego",
+    "renpy",
+    "rest",
+    "rip",
+    "roboconf",
+    "robotframework",
+    "ruby",
+    "rust",
+    "sas",
+    "sass",
+    "scala",
+    "scheme",
+    "scss",
+    "shell-session",
+    "smali",
+    "smalltalk",
+    "smarty",
+    "sml",
+    "solidity",
+    "solution-file",
+    "soy",
+    "sparql",
+    "splunk-spl",
+    "sqf",
+    "sql",
+    "squirrel",
+    "stan",
+    "stylus",
+    "swift",
+    "systemd",
+    "t4-cs",
+    "t4-templating",
+    "t4-vb",
+    "tap",
+    "tcl",
+    "textile",
+    "toml",
+    "tremor",
+    "tsx",
+    "tt2",
+    "turtle",
+    "twig",
+    "typescript",
+    "typoscript",
+    "unrealscript",
+    "uorazor",
+    "uri",
+    "v",
+    "vala",
+    "vbnet",
+    "velocity",
+    "verilog",
+    "vhdl",
+    "vim",
+    "visual-basic",
+    "warpscript",
+    "wasm",
+    "web-idl",
+    "wiki",
+    "wolfram",
+    "wren",
+    "xeora",
+    "xml-doc",
+    "xojo",
+    "xquery",
+    "yaml",
+    "yang",
+    "zig",
+]
+
+
+class CodeBlock(Component):
+    """A code block."""
+
+    library = "react-syntax-highlighter@15.5.0"
+
+    tag = "PrismAsyncLight"
+
+    alias = "SyntaxHighlighter"
+
+    # The theme to use ("light" or "dark").
+    theme: Var[LiteralCodeBlockTheme] = "one-light"  # type: ignore
+
+    # The language to use.
+    language: Var[LiteralCodeLanguage] = "python"  # type: ignore
+
+    # The code to display.
+    code: Var[str]
+
+    # If this is enabled line numbers will be shown next to the code block.
+    show_line_numbers: Var[bool]
+
+    # The starting line number to use.
+    starting_line_number: Var[int]
+
+    # Whether to wrap long lines.
+    wrap_long_lines: Var[bool]
+
+    # A custom style for the code block.
+    custom_style: Dict[str, str] = {}
+
+    # Props passed down to the code tag.
+    code_tag_props: Var[Dict[str, str]]
+
+    def _get_imports(self) -> imports.ImportDict:
+        merged_imports = super()._get_imports()
+        # Get all themes from a cond literal
+        themes = re.findall(r"`(.*?)`", self.theme._var_name)
+        if not themes:
+            themes = [self.theme._var_name]
+        merged_imports = imports.merge_imports(
+            merged_imports,
+            {
+                f"react-syntax-highlighter/dist/cjs/styles/prism/{theme}": {
+                    ImportVar(
+                        tag=format.to_camel_case(theme),
+                        is_default=True,
+                        install=False,
+                    )
+                }
+                for theme in themes
+            },
+        )
+        if (
+            self.language is not None
+            and self.language._var_name in LiteralCodeLanguage.__args__  # type: ignore
+        ):
+            merged_imports = imports.merge_imports(
+                merged_imports,
+                {
+                    f"react-syntax-highlighter/dist/cjs/languages/prism/{self.language._var_name}": {
+                        ImportVar(
+                            tag=format.to_camel_case(self.language._var_name),
+                            is_default=True,
+                            install=False,
+                        )
+                    }
+                },
+            )
+        return merged_imports
+
+    def _get_custom_code(self) -> Optional[str]:
+        if (
+            self.language is not None
+            and self.language._var_name in LiteralCodeLanguage.__args__  # type: ignore
+        ):
+            return f"{self.alias}.registerLanguage('{self.language._var_name}', {format.to_camel_case(self.language._var_name)})"
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        can_copy: Optional[bool] = False,
+        copy_button: Optional[Union[bool, Component]] = None,
+        **props,
+    ):
+        """Create a text component.
+
+        Args:
+            *children: The children of the component.
+            can_copy: Whether a copy button should appears.
+            copy_button: A custom copy button to override the default one.
+            **props: The props to pass to the component.
+
+        Returns:
+            The text component.
+        """
+        # This component handles style in a special prop.
+        custom_style = props.pop("custom_style", {})
+
+        if "theme" not in props:
+            # Default color scheme responds to global color mode.
+            props["theme"] = color_mode_cond(light="one-light", dark="one-dark")
+
+        # react-syntax-highlighter doesnt have an explicit "light" or "dark" theme so we use one-light and one-dark
+        # themes respectively to ensure code compatibility.
+        if "theme" in props and not isinstance(props["theme"], Var):
+            props["theme"] = (
+                "one-light"
+                if props["theme"] == "light"
+                else "one-dark"
+                if props["theme"] == "dark"
+                else props["theme"]
+            )
+
+        if can_copy:
+            code = children[0]
+            copy_button = (  # type: ignore
+                copy_button
+                if copy_button is not None
+                else Button.create(
+                    Icon.create(tag="copy"),
+                    on_click=set_clipboard(code),
+                    style=Style({"position": "absolute", "top": "0.5em", "right": "0"}),
+                )
+            )
+            custom_style.update({"padding": "1em 3.2em 1em 1em"})
+        else:
+            copy_button = None
+
+        # Transfer style props to the custom style prop.
+        for key, value in props.items():
+            if key not in cls.get_fields():
+                custom_style[key] = value
+
+        # Carry the children (code) via props
+        if children:
+            props["code"] = children[0]
+            if not isinstance(props["code"], Var):
+                props["code"] = Var.create(props["code"], _var_is_string=True)
+
+        # Create the component.
+        code_block = super().create(
+            **props,
+            custom_style=Style(custom_style),
+        )
+
+        if copy_button:
+            return Box.create(code_block, copy_button, position="relative")
+        else:
+            return code_block
+
+    def _add_style(self, style):
+        self.custom_style.update(style)  # type: ignore
+
+    def _render(self):
+        out = super()._render()
+        predicate, qmark, value = self.theme._var_name.partition("?")
+        out.add_props(
+            style=Var.create(
+                format.to_camel_case(f"{predicate}{qmark}{value.replace('`', '')}"),
+                _var_is_local=False,
+            )
+        ).remove_props("theme", "code")
+        if self.code is not None:
+            out.special_props.add(Var.create_safe(f"children={str(self.code)}"))
+        return out
diff --git a/reflex/components/datadisplay/code.pyi b/reflex/components/datadisplay/code.pyi
new file mode 100644
index 000000000..99b40c55e
--- /dev/null
+++ b/reflex/components/datadisplay/code.pyi
@@ -0,0 +1,1112 @@
+"""Stub file for reflex/components/datadisplay/code.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+import re
+from typing import Dict, Literal, Optional, Union
+from reflex.components.chakra.forms import Button
+from reflex.components.chakra.layout import Box
+from reflex.components.chakra.media import Icon
+from reflex.components.component import Component
+from reflex.components.core.cond import color_mode_cond
+from reflex.event import set_clipboard
+from reflex.style import Style
+from reflex.utils import format, imports
+from reflex.utils.imports import ImportVar
+from reflex.vars import Var
+
+LiteralCodeBlockTheme = Literal[
+    "a11y-dark",
+    "atom-dark",
+    "cb",
+    "coldark-cold",
+    "coldark-dark",
+    "coy",
+    "coy-without-shadows",
+    "darcula",
+    "dark",
+    "dracula",
+    "duotone-dark",
+    "duotone-earth",
+    "duotone-forest",
+    "duotone-light",
+    "duotone-sea",
+    "duotone-space",
+    "funky",
+    "ghcolors",
+    "gruvbox-dark",
+    "gruvbox-light",
+    "holi-theme",
+    "hopscotch",
+    "light",
+    "lucario",
+    "material-dark",
+    "material-light",
+    "material-oceanic",
+    "night-owl",
+    "nord",
+    "okaidia",
+    "one-dark",
+    "one-light",
+    "pojoaque",
+    "prism",
+    "shades-of-purple",
+    "solarized-dark-atom",
+    "solarizedlight",
+    "synthwave84",
+    "tomorrow",
+    "twilight",
+    "vs",
+    "vs-dark",
+    "vsc-dark-plus",
+    "xonokai",
+    "z-touch",
+]
+LiteralCodeLanguage = Literal[
+    "abap",
+    "abnf",
+    "actionscript",
+    "ada",
+    "agda",
+    "al",
+    "antlr4",
+    "apacheconf",
+    "apex",
+    "apl",
+    "applescript",
+    "aql",
+    "arduino",
+    "arff",
+    "asciidoc",
+    "asm6502",
+    "asmatmel",
+    "aspnet",
+    "autohotkey",
+    "autoit",
+    "avisynth",
+    "avro-idl",
+    "bash",
+    "basic",
+    "batch",
+    "bbcode",
+    "bicep",
+    "birb",
+    "bison",
+    "bnf",
+    "brainfuck",
+    "brightscript",
+    "bro",
+    "bsl",
+    "c",
+    "cfscript",
+    "chaiscript",
+    "cil",
+    "clike",
+    "clojure",
+    "cmake",
+    "cobol",
+    "coffeescript",
+    "concurnas",
+    "coq",
+    "core",
+    "cpp",
+    "crystal",
+    "csharp",
+    "cshtml",
+    "csp",
+    "css",
+    "css-extras",
+    "csv",
+    "cypher",
+    "d",
+    "dart",
+    "dataweave",
+    "dax",
+    "dhall",
+    "diff",
+    "django",
+    "dns-zone-file",
+    "docker",
+    "dot",
+    "ebnf",
+    "editorconfig",
+    "eiffel",
+    "ejs",
+    "elixir",
+    "elm",
+    "erb",
+    "erlang",
+    "etlua",
+    "excel-formula",
+    "factor",
+    "false",
+    "firestore-security-rules",
+    "flow",
+    "fortran",
+    "fsharp",
+    "ftl",
+    "gap",
+    "gcode",
+    "gdscript",
+    "gedcom",
+    "gherkin",
+    "git",
+    "glsl",
+    "gml",
+    "gn",
+    "go",
+    "go-module",
+    "graphql",
+    "groovy",
+    "haml",
+    "handlebars",
+    "haskell",
+    "haxe",
+    "hcl",
+    "hlsl",
+    "hoon",
+    "hpkp",
+    "hsts",
+    "http",
+    "ichigojam",
+    "icon",
+    "icu-message-format",
+    "idris",
+    "iecst",
+    "ignore",
+    "index",
+    "inform7",
+    "ini",
+    "io",
+    "j",
+    "java",
+    "javadoc",
+    "javadoclike",
+    "javascript",
+    "javastacktrace",
+    "jexl",
+    "jolie",
+    "jq",
+    "js-extras",
+    "js-templates",
+    "jsdoc",
+    "json",
+    "json5",
+    "jsonp",
+    "jsstacktrace",
+    "jsx",
+    "julia",
+    "keepalived",
+    "keyman",
+    "kotlin",
+    "kumir",
+    "kusto",
+    "latex",
+    "latte",
+    "less",
+    "lilypond",
+    "liquid",
+    "lisp",
+    "livescript",
+    "llvm",
+    "log",
+    "lolcode",
+    "lua",
+    "magma",
+    "makefile",
+    "markdown",
+    "markup",
+    "markup-templating",
+    "matlab",
+    "maxscript",
+    "mel",
+    "mermaid",
+    "mizar",
+    "mongodb",
+    "monkey",
+    "moonscript",
+    "n1ql",
+    "n4js",
+    "nand2tetris-hdl",
+    "naniscript",
+    "nasm",
+    "neon",
+    "nevod",
+    "nginx",
+    "nim",
+    "nix",
+    "nsis",
+    "objectivec",
+    "ocaml",
+    "opencl",
+    "openqasm",
+    "oz",
+    "parigp",
+    "parser",
+    "pascal",
+    "pascaligo",
+    "pcaxis",
+    "peoplecode",
+    "perl",
+    "php",
+    "php-extras",
+    "phpdoc",
+    "plsql",
+    "powerquery",
+    "powershell",
+    "processing",
+    "prolog",
+    "promql",
+    "properties",
+    "protobuf",
+    "psl",
+    "pug",
+    "puppet",
+    "pure",
+    "purebasic",
+    "purescript",
+    "python",
+    "q",
+    "qml",
+    "qore",
+    "qsharp",
+    "r",
+    "racket",
+    "reason",
+    "regex",
+    "rego",
+    "renpy",
+    "rest",
+    "rip",
+    "roboconf",
+    "robotframework",
+    "ruby",
+    "rust",
+    "sas",
+    "sass",
+    "scala",
+    "scheme",
+    "scss",
+    "shell-session",
+    "smali",
+    "smalltalk",
+    "smarty",
+    "sml",
+    "solidity",
+    "solution-file",
+    "soy",
+    "sparql",
+    "splunk-spl",
+    "sqf",
+    "sql",
+    "squirrel",
+    "stan",
+    "stylus",
+    "swift",
+    "systemd",
+    "t4-cs",
+    "t4-templating",
+    "t4-vb",
+    "tap",
+    "tcl",
+    "textile",
+    "toml",
+    "tremor",
+    "tsx",
+    "tt2",
+    "turtle",
+    "twig",
+    "typescript",
+    "typoscript",
+    "unrealscript",
+    "uorazor",
+    "uri",
+    "v",
+    "vala",
+    "vbnet",
+    "velocity",
+    "verilog",
+    "vhdl",
+    "vim",
+    "visual-basic",
+    "warpscript",
+    "wasm",
+    "web-idl",
+    "wiki",
+    "wolfram",
+    "wren",
+    "xeora",
+    "xml-doc",
+    "xojo",
+    "xquery",
+    "yaml",
+    "yang",
+    "zig",
+]
+
+class CodeBlock(Component):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        can_copy: Optional[bool] = False,
+        copy_button: Optional[Union[bool, Component]] = None,
+        theme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "a11y-dark",
+                        "atom-dark",
+                        "cb",
+                        "coldark-cold",
+                        "coldark-dark",
+                        "coy",
+                        "coy-without-shadows",
+                        "darcula",
+                        "dark",
+                        "dracula",
+                        "duotone-dark",
+                        "duotone-earth",
+                        "duotone-forest",
+                        "duotone-light",
+                        "duotone-sea",
+                        "duotone-space",
+                        "funky",
+                        "ghcolors",
+                        "gruvbox-dark",
+                        "gruvbox-light",
+                        "holi-theme",
+                        "hopscotch",
+                        "light",
+                        "lucario",
+                        "material-dark",
+                        "material-light",
+                        "material-oceanic",
+                        "night-owl",
+                        "nord",
+                        "okaidia",
+                        "one-dark",
+                        "one-light",
+                        "pojoaque",
+                        "prism",
+                        "shades-of-purple",
+                        "solarized-dark-atom",
+                        "solarizedlight",
+                        "synthwave84",
+                        "tomorrow",
+                        "twilight",
+                        "vs",
+                        "vs-dark",
+                        "vsc-dark-plus",
+                        "xonokai",
+                        "z-touch",
+                    ]
+                ],
+                Literal[
+                    "a11y-dark",
+                    "atom-dark",
+                    "cb",
+                    "coldark-cold",
+                    "coldark-dark",
+                    "coy",
+                    "coy-without-shadows",
+                    "darcula",
+                    "dark",
+                    "dracula",
+                    "duotone-dark",
+                    "duotone-earth",
+                    "duotone-forest",
+                    "duotone-light",
+                    "duotone-sea",
+                    "duotone-space",
+                    "funky",
+                    "ghcolors",
+                    "gruvbox-dark",
+                    "gruvbox-light",
+                    "holi-theme",
+                    "hopscotch",
+                    "light",
+                    "lucario",
+                    "material-dark",
+                    "material-light",
+                    "material-oceanic",
+                    "night-owl",
+                    "nord",
+                    "okaidia",
+                    "one-dark",
+                    "one-light",
+                    "pojoaque",
+                    "prism",
+                    "shades-of-purple",
+                    "solarized-dark-atom",
+                    "solarizedlight",
+                    "synthwave84",
+                    "tomorrow",
+                    "twilight",
+                    "vs",
+                    "vs-dark",
+                    "vsc-dark-plus",
+                    "xonokai",
+                    "z-touch",
+                ],
+            ]
+        ] = None,
+        language: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "abap",
+                        "abnf",
+                        "actionscript",
+                        "ada",
+                        "agda",
+                        "al",
+                        "antlr4",
+                        "apacheconf",
+                        "apex",
+                        "apl",
+                        "applescript",
+                        "aql",
+                        "arduino",
+                        "arff",
+                        "asciidoc",
+                        "asm6502",
+                        "asmatmel",
+                        "aspnet",
+                        "autohotkey",
+                        "autoit",
+                        "avisynth",
+                        "avro-idl",
+                        "bash",
+                        "basic",
+                        "batch",
+                        "bbcode",
+                        "bicep",
+                        "birb",
+                        "bison",
+                        "bnf",
+                        "brainfuck",
+                        "brightscript",
+                        "bro",
+                        "bsl",
+                        "c",
+                        "cfscript",
+                        "chaiscript",
+                        "cil",
+                        "clike",
+                        "clojure",
+                        "cmake",
+                        "cobol",
+                        "coffeescript",
+                        "concurnas",
+                        "coq",
+                        "core",
+                        "cpp",
+                        "crystal",
+                        "csharp",
+                        "cshtml",
+                        "csp",
+                        "css",
+                        "css-extras",
+                        "csv",
+                        "cypher",
+                        "d",
+                        "dart",
+                        "dataweave",
+                        "dax",
+                        "dhall",
+                        "diff",
+                        "django",
+                        "dns-zone-file",
+                        "docker",
+                        "dot",
+                        "ebnf",
+                        "editorconfig",
+                        "eiffel",
+                        "ejs",
+                        "elixir",
+                        "elm",
+                        "erb",
+                        "erlang",
+                        "etlua",
+                        "excel-formula",
+                        "factor",
+                        "false",
+                        "firestore-security-rules",
+                        "flow",
+                        "fortran",
+                        "fsharp",
+                        "ftl",
+                        "gap",
+                        "gcode",
+                        "gdscript",
+                        "gedcom",
+                        "gherkin",
+                        "git",
+                        "glsl",
+                        "gml",
+                        "gn",
+                        "go",
+                        "go-module",
+                        "graphql",
+                        "groovy",
+                        "haml",
+                        "handlebars",
+                        "haskell",
+                        "haxe",
+                        "hcl",
+                        "hlsl",
+                        "hoon",
+                        "hpkp",
+                        "hsts",
+                        "http",
+                        "ichigojam",
+                        "icon",
+                        "icu-message-format",
+                        "idris",
+                        "iecst",
+                        "ignore",
+                        "index",
+                        "inform7",
+                        "ini",
+                        "io",
+                        "j",
+                        "java",
+                        "javadoc",
+                        "javadoclike",
+                        "javascript",
+                        "javastacktrace",
+                        "jexl",
+                        "jolie",
+                        "jq",
+                        "js-extras",
+                        "js-templates",
+                        "jsdoc",
+                        "json",
+                        "json5",
+                        "jsonp",
+                        "jsstacktrace",
+                        "jsx",
+                        "julia",
+                        "keepalived",
+                        "keyman",
+                        "kotlin",
+                        "kumir",
+                        "kusto",
+                        "latex",
+                        "latte",
+                        "less",
+                        "lilypond",
+                        "liquid",
+                        "lisp",
+                        "livescript",
+                        "llvm",
+                        "log",
+                        "lolcode",
+                        "lua",
+                        "magma",
+                        "makefile",
+                        "markdown",
+                        "markup",
+                        "markup-templating",
+                        "matlab",
+                        "maxscript",
+                        "mel",
+                        "mermaid",
+                        "mizar",
+                        "mongodb",
+                        "monkey",
+                        "moonscript",
+                        "n1ql",
+                        "n4js",
+                        "nand2tetris-hdl",
+                        "naniscript",
+                        "nasm",
+                        "neon",
+                        "nevod",
+                        "nginx",
+                        "nim",
+                        "nix",
+                        "nsis",
+                        "objectivec",
+                        "ocaml",
+                        "opencl",
+                        "openqasm",
+                        "oz",
+                        "parigp",
+                        "parser",
+                        "pascal",
+                        "pascaligo",
+                        "pcaxis",
+                        "peoplecode",
+                        "perl",
+                        "php",
+                        "php-extras",
+                        "phpdoc",
+                        "plsql",
+                        "powerquery",
+                        "powershell",
+                        "processing",
+                        "prolog",
+                        "promql",
+                        "properties",
+                        "protobuf",
+                        "psl",
+                        "pug",
+                        "puppet",
+                        "pure",
+                        "purebasic",
+                        "purescript",
+                        "python",
+                        "q",
+                        "qml",
+                        "qore",
+                        "qsharp",
+                        "r",
+                        "racket",
+                        "reason",
+                        "regex",
+                        "rego",
+                        "renpy",
+                        "rest",
+                        "rip",
+                        "roboconf",
+                        "robotframework",
+                        "ruby",
+                        "rust",
+                        "sas",
+                        "sass",
+                        "scala",
+                        "scheme",
+                        "scss",
+                        "shell-session",
+                        "smali",
+                        "smalltalk",
+                        "smarty",
+                        "sml",
+                        "solidity",
+                        "solution-file",
+                        "soy",
+                        "sparql",
+                        "splunk-spl",
+                        "sqf",
+                        "sql",
+                        "squirrel",
+                        "stan",
+                        "stylus",
+                        "swift",
+                        "systemd",
+                        "t4-cs",
+                        "t4-templating",
+                        "t4-vb",
+                        "tap",
+                        "tcl",
+                        "textile",
+                        "toml",
+                        "tremor",
+                        "tsx",
+                        "tt2",
+                        "turtle",
+                        "twig",
+                        "typescript",
+                        "typoscript",
+                        "unrealscript",
+                        "uorazor",
+                        "uri",
+                        "v",
+                        "vala",
+                        "vbnet",
+                        "velocity",
+                        "verilog",
+                        "vhdl",
+                        "vim",
+                        "visual-basic",
+                        "warpscript",
+                        "wasm",
+                        "web-idl",
+                        "wiki",
+                        "wolfram",
+                        "wren",
+                        "xeora",
+                        "xml-doc",
+                        "xojo",
+                        "xquery",
+                        "yaml",
+                        "yang",
+                        "zig",
+                    ]
+                ],
+                Literal[
+                    "abap",
+                    "abnf",
+                    "actionscript",
+                    "ada",
+                    "agda",
+                    "al",
+                    "antlr4",
+                    "apacheconf",
+                    "apex",
+                    "apl",
+                    "applescript",
+                    "aql",
+                    "arduino",
+                    "arff",
+                    "asciidoc",
+                    "asm6502",
+                    "asmatmel",
+                    "aspnet",
+                    "autohotkey",
+                    "autoit",
+                    "avisynth",
+                    "avro-idl",
+                    "bash",
+                    "basic",
+                    "batch",
+                    "bbcode",
+                    "bicep",
+                    "birb",
+                    "bison",
+                    "bnf",
+                    "brainfuck",
+                    "brightscript",
+                    "bro",
+                    "bsl",
+                    "c",
+                    "cfscript",
+                    "chaiscript",
+                    "cil",
+                    "clike",
+                    "clojure",
+                    "cmake",
+                    "cobol",
+                    "coffeescript",
+                    "concurnas",
+                    "coq",
+                    "core",
+                    "cpp",
+                    "crystal",
+                    "csharp",
+                    "cshtml",
+                    "csp",
+                    "css",
+                    "css-extras",
+                    "csv",
+                    "cypher",
+                    "d",
+                    "dart",
+                    "dataweave",
+                    "dax",
+                    "dhall",
+                    "diff",
+                    "django",
+                    "dns-zone-file",
+                    "docker",
+                    "dot",
+                    "ebnf",
+                    "editorconfig",
+                    "eiffel",
+                    "ejs",
+                    "elixir",
+                    "elm",
+                    "erb",
+                    "erlang",
+                    "etlua",
+                    "excel-formula",
+                    "factor",
+                    "false",
+                    "firestore-security-rules",
+                    "flow",
+                    "fortran",
+                    "fsharp",
+                    "ftl",
+                    "gap",
+                    "gcode",
+                    "gdscript",
+                    "gedcom",
+                    "gherkin",
+                    "git",
+                    "glsl",
+                    "gml",
+                    "gn",
+                    "go",
+                    "go-module",
+                    "graphql",
+                    "groovy",
+                    "haml",
+                    "handlebars",
+                    "haskell",
+                    "haxe",
+                    "hcl",
+                    "hlsl",
+                    "hoon",
+                    "hpkp",
+                    "hsts",
+                    "http",
+                    "ichigojam",
+                    "icon",
+                    "icu-message-format",
+                    "idris",
+                    "iecst",
+                    "ignore",
+                    "index",
+                    "inform7",
+                    "ini",
+                    "io",
+                    "j",
+                    "java",
+                    "javadoc",
+                    "javadoclike",
+                    "javascript",
+                    "javastacktrace",
+                    "jexl",
+                    "jolie",
+                    "jq",
+                    "js-extras",
+                    "js-templates",
+                    "jsdoc",
+                    "json",
+                    "json5",
+                    "jsonp",
+                    "jsstacktrace",
+                    "jsx",
+                    "julia",
+                    "keepalived",
+                    "keyman",
+                    "kotlin",
+                    "kumir",
+                    "kusto",
+                    "latex",
+                    "latte",
+                    "less",
+                    "lilypond",
+                    "liquid",
+                    "lisp",
+                    "livescript",
+                    "llvm",
+                    "log",
+                    "lolcode",
+                    "lua",
+                    "magma",
+                    "makefile",
+                    "markdown",
+                    "markup",
+                    "markup-templating",
+                    "matlab",
+                    "maxscript",
+                    "mel",
+                    "mermaid",
+                    "mizar",
+                    "mongodb",
+                    "monkey",
+                    "moonscript",
+                    "n1ql",
+                    "n4js",
+                    "nand2tetris-hdl",
+                    "naniscript",
+                    "nasm",
+                    "neon",
+                    "nevod",
+                    "nginx",
+                    "nim",
+                    "nix",
+                    "nsis",
+                    "objectivec",
+                    "ocaml",
+                    "opencl",
+                    "openqasm",
+                    "oz",
+                    "parigp",
+                    "parser",
+                    "pascal",
+                    "pascaligo",
+                    "pcaxis",
+                    "peoplecode",
+                    "perl",
+                    "php",
+                    "php-extras",
+                    "phpdoc",
+                    "plsql",
+                    "powerquery",
+                    "powershell",
+                    "processing",
+                    "prolog",
+                    "promql",
+                    "properties",
+                    "protobuf",
+                    "psl",
+                    "pug",
+                    "puppet",
+                    "pure",
+                    "purebasic",
+                    "purescript",
+                    "python",
+                    "q",
+                    "qml",
+                    "qore",
+                    "qsharp",
+                    "r",
+                    "racket",
+                    "reason",
+                    "regex",
+                    "rego",
+                    "renpy",
+                    "rest",
+                    "rip",
+                    "roboconf",
+                    "robotframework",
+                    "ruby",
+                    "rust",
+                    "sas",
+                    "sass",
+                    "scala",
+                    "scheme",
+                    "scss",
+                    "shell-session",
+                    "smali",
+                    "smalltalk",
+                    "smarty",
+                    "sml",
+                    "solidity",
+                    "solution-file",
+                    "soy",
+                    "sparql",
+                    "splunk-spl",
+                    "sqf",
+                    "sql",
+                    "squirrel",
+                    "stan",
+                    "stylus",
+                    "swift",
+                    "systemd",
+                    "t4-cs",
+                    "t4-templating",
+                    "t4-vb",
+                    "tap",
+                    "tcl",
+                    "textile",
+                    "toml",
+                    "tremor",
+                    "tsx",
+                    "tt2",
+                    "turtle",
+                    "twig",
+                    "typescript",
+                    "typoscript",
+                    "unrealscript",
+                    "uorazor",
+                    "uri",
+                    "v",
+                    "vala",
+                    "vbnet",
+                    "velocity",
+                    "verilog",
+                    "vhdl",
+                    "vim",
+                    "visual-basic",
+                    "warpscript",
+                    "wasm",
+                    "web-idl",
+                    "wiki",
+                    "wolfram",
+                    "wren",
+                    "xeora",
+                    "xml-doc",
+                    "xojo",
+                    "xquery",
+                    "yaml",
+                    "yang",
+                    "zig",
+                ],
+            ]
+        ] = None,
+        code: Optional[Union[Var[str], str]] = None,
+        show_line_numbers: Optional[Union[Var[bool], bool]] = None,
+        starting_line_number: Optional[Union[Var[int], int]] = None,
+        wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
+        custom_style: Optional[Dict[str, str]] = None,
+        code_tag_props: Optional[Union[Var[Dict[str, str]], Dict[str, str]]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "CodeBlock":
+        """Create a text component.
+
+        Args:
+            *children: The children of the component.
+            can_copy: Whether a copy button should appears.
+            copy_button: A custom copy button to override the default one.
+            theme: The theme to use ("light" or "dark").
+            language: The language to use.
+            code: The code to display.
+            show_line_numbers: If this is enabled line numbers will be shown next to the code block.
+            starting_line_number: The starting line number to use.
+            wrap_long_lines: Whether to wrap long lines.
+            custom_style: A custom style for the code block.
+            code_tag_props: Props passed down to the code tag.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props to pass to the component.
+
+        Returns:
+            The text component.
+        """
+        ...
diff --git a/reflex/components/datadisplay/dataeditor.pyi b/reflex/components/datadisplay/dataeditor.pyi
index 8e7d00827..fcc299926 100644
--- a/reflex/components/datadisplay/dataeditor.pyi
+++ b/reflex/components/datadisplay/dataeditor.pyi
@@ -134,7 +134,6 @@ class DataEditor(NoSSRComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_cell_activated: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -224,7 +223,6 @@ class DataEditor(NoSSRComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the data editor.
 
diff --git a/reflex/components/el/element.pyi b/reflex/components/el/element.pyi
index 818fc5061..5b488d919 100644
--- a/reflex/components/el/element.pyi
+++ b/reflex/components/el/element.pyi
@@ -20,7 +20,6 @@ class Element(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class Element(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/base.py b/reflex/components/el/elements/base.py
index 207f98007..fd2dc8cbb 100644
--- a/reflex/components/el/elements/base.py
+++ b/reflex/components/el/elements/base.py
@@ -55,6 +55,3 @@ class BaseHTML(Element):
 
     # Defines a tooltip for the element.
     title: Var[Union[str, int, bool]]
-
-    # Specifies whether the content of an element should be translated or not.
-    translate: Var[Union[str, int, bool]]
diff --git a/reflex/components/el/elements/base.pyi b/reflex/components/el/elements/base.pyi
index 6920c274d..5b58c88d6 100644
--- a/reflex/components/el/elements/base.pyi
+++ b/reflex/components/el/elements/base.pyi
@@ -57,15 +57,11 @@ class BaseHTML(Element):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -134,13 +130,11 @@ class BaseHTML(Element):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/forms.py b/reflex/components/el/elements/forms.py
index 8be9a5c89..141181732 100644
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@@ -149,9 +149,6 @@ class Input(BaseHTML):
     # Specifies where to display the response after submitting the form (for type="submit" buttons)
     form_target: Var[Union[str, int, bool]]
 
-    # The height of the input (only for type="image")
-    height: Var[Union[str, int, bool]]
-
     # References a datalist for suggested options
     list: Var[Union[str, int, bool]]
 
@@ -203,9 +200,6 @@ class Input(BaseHTML):
     # Value of the input
     value: Var[Union[str, int, bool]]
 
-    # The width of the input (only for type="image")
-    width: Var[Union[str, int, bool]]
-
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.
 
diff --git a/reflex/components/el/elements/forms.pyi b/reflex/components/el/elements/forms.pyi
index 054c3b7e9..dd681a35a 100644
--- a/reflex/components/el/elements/forms.pyi
+++ b/reflex/components/el/elements/forms.pyi
@@ -84,15 +84,11 @@ class Button(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -172,13 +168,11 @@ class Button(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -236,15 +230,11 @@ class Datalist(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -313,13 +303,11 @@ class Datalist(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -347,7 +335,6 @@ class Fieldset(Element):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -408,7 +395,6 @@ class Fieldset(Element):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -491,15 +477,11 @@ class Form(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -577,13 +559,11 @@ class Form(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -640,9 +620,6 @@ class Input(BaseHTML):
         form_target: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         list: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         max: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         max_length: Optional[
@@ -678,9 +655,6 @@ class Input(BaseHTML):
         value: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -721,15 +695,11 @@ class Input(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -805,7 +775,6 @@ class Input(BaseHTML):
             form_method: HTTP method to use for sending form data (for type="submit" buttons)
             form_no_validate: Bypasses form validation when submitting (for type="submit" buttons)
             form_target: Specifies where to display the response after submitting the form (for type="submit" buttons)
-            height: The height of the input (only for type="image")
             list: References a datalist for suggested options
             max: Specifies the maximum value for the input
             max_length: Specifies the maximum number of characters allowed in the input
@@ -823,7 +792,6 @@ class Input(BaseHTML):
             type: Specifies the type of input
             use_map: Name of the image map used with the input
             value: Value of the input
-            width: The width of the input (only for type="image")
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -840,13 +808,11 @@ class Input(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -908,15 +874,11 @@ class Label(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -987,13 +949,11 @@ class Label(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1051,15 +1011,11 @@ class Legend(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1128,13 +1084,11 @@ class Legend(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1203,15 +1157,11 @@ class Meter(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1287,13 +1237,11 @@ class Meter(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1357,15 +1305,11 @@ class Optgroup(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1436,13 +1380,11 @@ class Optgroup(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1512,15 +1454,11 @@ class Option(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1593,13 +1531,11 @@ class Option(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1662,15 +1598,11 @@ class Output(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1742,13 +1674,11 @@ class Output(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1811,15 +1741,11 @@ class Progress(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1891,13 +1817,11 @@ class Progress(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1974,15 +1898,11 @@ class Select(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2062,13 +1982,11 @@ class Select(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2162,15 +2080,11 @@ class Textarea(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2263,13 +2177,11 @@ class Textarea(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/inline.pyi b/reflex/components/el/elements/inline.pyi
index 598d3cd93..971ec8d68 100644
--- a/reflex/components/el/elements/inline.pyi
+++ b/reflex/components/el/elements/inline.pyi
@@ -78,15 +78,11 @@ class A(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -164,13 +160,11 @@ class A(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -228,15 +222,11 @@ class Abbr(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -305,13 +295,11 @@ class Abbr(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -369,15 +357,11 @@ class B(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -446,13 +430,11 @@ class B(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -510,15 +492,11 @@ class Bdi(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -587,13 +565,11 @@ class Bdi(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -651,15 +627,11 @@ class Bdo(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -728,13 +700,11 @@ class Bdo(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -792,15 +762,11 @@ class Br(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -869,13 +835,11 @@ class Br(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -933,15 +897,11 @@ class Cite(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1010,13 +970,11 @@ class Cite(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1074,15 +1032,11 @@ class Code(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1151,13 +1105,11 @@ class Code(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1218,15 +1170,11 @@ class Data(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1296,13 +1244,11 @@ class Data(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1360,15 +1306,11 @@ class Dfn(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1437,13 +1379,11 @@ class Dfn(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1501,15 +1441,11 @@ class Em(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1578,13 +1514,11 @@ class Em(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1642,15 +1576,11 @@ class I(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1719,13 +1649,11 @@ class I(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1783,15 +1711,11 @@ class Kbd(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1860,13 +1784,11 @@ class Kbd(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1924,15 +1846,11 @@ class Mark(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2001,13 +1919,11 @@ class Mark(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2066,15 +1982,11 @@ class Q(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2144,13 +2056,11 @@ class Q(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2208,15 +2118,11 @@ class Rp(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2285,13 +2191,11 @@ class Rp(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2349,15 +2253,11 @@ class Rt(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2426,13 +2326,11 @@ class Rt(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2490,15 +2388,11 @@ class Ruby(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2567,13 +2461,11 @@ class Ruby(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2631,15 +2523,11 @@ class S(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2708,13 +2596,11 @@ class S(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2772,15 +2658,11 @@ class Samp(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2849,13 +2731,11 @@ class Samp(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2913,15 +2793,11 @@ class Small(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2990,13 +2866,11 @@ class Small(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -3054,15 +2928,11 @@ class Span(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -3131,13 +3001,11 @@ class Span(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -3195,15 +3063,11 @@ class Strong(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -3272,13 +3136,11 @@ class Strong(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -3336,15 +3198,11 @@ class Sub(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -3413,13 +3271,11 @@ class Sub(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -3477,15 +3333,11 @@ class Sup(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -3554,13 +3406,11 @@ class Sup(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -3621,15 +3471,11 @@ class Time(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -3699,13 +3545,11 @@ class Time(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -3763,15 +3607,11 @@ class U(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -3840,13 +3680,11 @@ class U(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -3904,15 +3742,11 @@ class Wbr(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -3981,13 +3815,11 @@ class Wbr(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/media.py b/reflex/components/el/elements/media.py
index c39401a88..2865ca66a 100644
--- a/reflex/components/el/elements/media.py
+++ b/reflex/components/el/elements/media.py
@@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Any, Union
 
 from reflex.vars import Var as Var
 
@@ -86,18 +86,12 @@ class Img(BaseHTML):
     # Alternative text for the image
     alt: Var[Union[str, int, bool]]
 
-    # Border width around the image
-    border: Var[Union[str, int, bool]]
-
     # Configures the CORS requests for the image
     cross_origin: Var[Union[str, int, bool]]
 
     # How the image should be decoded
     decoding: Var[Union[str, int, bool]]
 
-    # The intrinsic height of the image
-    height: Var[Union[str, int, bool]]
-
     # Specifies an intrinsic size for the image
     intrinsicsize: Var[Union[str, int, bool]]
 
@@ -114,7 +108,7 @@ class Img(BaseHTML):
     sizes: Var[Union[str, int, bool]]
 
     # URL of the image to display
-    src: Var[Union[str, int, bool]]
+    src: Var[Any]
 
     # A set of source sizes and URLs for responsive images
     src_set: Var[Union[str, int, bool]]
@@ -122,9 +116,6 @@ class Img(BaseHTML):
     # The name of the map to use with the image
     use_map: Var[Union[str, int, bool]]
 
-    # The intrinsic width of the image
-    width: Var[Union[str, int, bool]]
-
 
 class Map(BaseHTML):
     """Display the map element."""
@@ -173,9 +164,6 @@ class Video(BaseHTML):
     # Configures the CORS requests for the video
     cross_origin: Var[Union[str, int, bool]]
 
-    # The intrinsic height of the video
-    height: Var[Union[str, int, bool]]
-
     # Specifies that the video will loop
     loop: Var[Union[str, int, bool]]
 
@@ -194,27 +182,18 @@ class Video(BaseHTML):
     # URL of the video to play
     src: Var[Union[str, int, bool]]
 
-    # The intrinsic width of the video
-    width: Var[Union[str, int, bool]]
-
 
 class Embed(BaseHTML):
     """Display the embed element."""
 
     tag = "embed"
 
-    # The intrinsic height of the embedded content
-    height: Var[Union[str, int, bool]]
-
     # URL of the embedded content
     src: Var[Union[str, int, bool]]
 
     # Media type of the embedded content
     type: Var[Union[str, int, bool]]
 
-    # The intrinsic width of the embedded content
-    width: Var[Union[str, int, bool]]
-
 
 class Iframe(BaseHTML):
     """Display the iframe element."""
@@ -230,9 +209,6 @@ class Iframe(BaseHTML):
     # Content Security Policy to apply to the iframe's content
     csp: Var[Union[str, int, bool]]
 
-    # The height of the iframe
-    height: Var[Union[str, int, bool]]
-
     # Specifies the loading behavior of the iframe
     loading: Var[Union[str, int, bool]]
 
@@ -251,27 +227,18 @@ class Iframe(BaseHTML):
     # HTML content to embed directly within the iframe
     src_doc: Var[Union[str, int, bool]]
 
-    # The width of the iframe
-    width: Var[Union[str, int, bool]]
-
 
 class Object(BaseHTML):
     """Display the object element."""
 
     tag = "object"
 
-    # Border width around the object
-    border: Var[Union[str, int, bool]]
-
     # URL of the data to be used by the object
     data: Var[Union[str, int, bool]]
 
     # Associates the object with a form element
     form: Var[Union[str, int, bool]]
 
-    # The intrinsic height of the object
-    height: Var[Union[str, int, bool]]
-
     # Name of the object, used for scripting or as a target for forms and links
     name: Var[Union[str, int, bool]]
 
@@ -281,9 +248,6 @@ class Object(BaseHTML):
     # Name of an image map to use with the object
     use_map: Var[Union[str, int, bool]]
 
-    # The intrinsic width of the object
-    width: Var[Union[str, int, bool]]
-
 
 class Picture(BaseHTML):
     """Display the picture element."""
@@ -325,12 +289,6 @@ class Svg(BaseHTML):
 
     tag = "svg"
 
-    # Specifies the width of the element
-    width: Var[Union[str, int, bool]]
-
-    # Specifies the height of the element
-    height: Var[Union[str, int, bool]]
-
 
 class Path(BaseHTML):
     """Display the path element."""
diff --git a/reflex/components/el/elements/media.pyi b/reflex/components/el/elements/media.pyi
index 13be5187d..6003986bd 100644
--- a/reflex/components/el/elements/media.pyi
+++ b/reflex/components/el/elements/media.pyi
@@ -7,7 +7,7 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Union
+from typing import Any, Union
 from reflex.vars import Var as Var
 from .base import BaseHTML
 
@@ -82,15 +82,11 @@ class Area(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -170,13 +166,11 @@ class Area(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -254,15 +248,11 @@ class Audio(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -339,13 +329,11 @@ class Audio(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -367,18 +355,12 @@ class Img(BaseHTML):
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
         alt: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        border: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         cross_origin: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
         decoding: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         intrinsicsize: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -394,16 +376,13 @@ class Img(BaseHTML):
         sizes: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        src: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        src: Optional[Union[Var[Any], Any]] = None,
         src_set: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
         use_map: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -444,15 +423,11 @@ class Img(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -507,10 +482,8 @@ class Img(BaseHTML):
             *children: The children of the component.
             align: Image alignment with respect to its surrounding elements
             alt: Alternative text for the image
-            border: Border width around the image
             cross_origin: Configures the CORS requests for the image
             decoding: How the image should be decoded
-            height: The intrinsic height of the image
             intrinsicsize: Specifies an intrinsic size for the image
             ismap: Whether the image is a server-side image map
             loading: Specifies the loading behavior of the image
@@ -519,7 +492,6 @@ class Img(BaseHTML):
             src: URL of the image to display
             src_set: A set of source sizes and URLs for responsive images
             use_map: The name of the map to use with the image
-            width: The intrinsic width of the image
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -536,13 +508,11 @@ class Img(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -601,15 +571,11 @@ class Map(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -679,13 +645,11 @@ class Map(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -754,15 +718,11 @@ class Track(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -836,13 +796,11 @@ class Track(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -872,9 +830,6 @@ class Video(BaseHTML):
         cross_origin: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         loop: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         muted: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
@@ -889,9 +844,6 @@ class Video(BaseHTML):
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
         src: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -932,15 +884,11 @@ class Video(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -997,14 +945,12 @@ class Video(BaseHTML):
             buffered: Represents the time range of the buffered media
             controls: Displays the standard video controls
             cross_origin: Configures the CORS requests for the video
-            height: The intrinsic height of the video
             loop: Specifies that the video will loop
             muted: Indicates whether the video is muted by default
             plays_inline: Indicates that the video should play 'inline', inside its element's playback area
             poster: URL of an image to show while the video is downloading, or until the user hits the play button
             preload: Specifies how the video file should be preloaded
             src: URL of the video to play
-            width: The intrinsic width of the video
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -1021,13 +967,11 @@ class Video(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1045,14 +989,8 @@ class Embed(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         src: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -1093,15 +1031,11 @@ class Embed(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1154,10 +1088,8 @@ class Embed(BaseHTML):
 
         Args:
             *children: The children of the component.
-            height: The intrinsic height of the embedded content
             src: URL of the embedded content
             type: Media type of the embedded content
-            width: The intrinsic width of the embedded content
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -1174,13 +1106,11 @@ class Embed(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1205,9 +1135,6 @@ class Iframe(BaseHTML):
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
         csp: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         loading: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -1222,9 +1149,6 @@ class Iframe(BaseHTML):
         src_doc: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -1265,15 +1189,11 @@ class Iframe(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1329,14 +1249,12 @@ class Iframe(BaseHTML):
             align: Alignment of the iframe within the page or surrounding elements
             allow: Permissions policy for the iframe
             csp: Content Security Policy to apply to the iframe's content
-            height: The height of the iframe
             loading: Specifies the loading behavior of the iframe
             name: Name of the iframe, used as a target for hyperlinks and forms
             referrer_policy: Referrer policy for the iframe
             sandbox: Security restrictions for the content in the iframe
             src: URL of the document to display in the iframe
             src_doc: HTML content to embed directly within the iframe
-            width: The width of the iframe
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -1353,13 +1271,11 @@ class Iframe(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1377,22 +1293,13 @@ class Object(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        border: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         data: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         form: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         name: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         use_map: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -1433,15 +1340,11 @@ class Object(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1494,14 +1397,11 @@ class Object(BaseHTML):
 
         Args:
             *children: The children of the component.
-            border: Border width around the object
             data: URL of the data to be used by the object
             form: Associates the object with a form element
-            height: The intrinsic height of the object
             name: Name of the object, used for scripting or as a target for forms and links
             type: Media type of the data specified in the data attribute
             use_map: Name of an image map to use with the object
-            width: The intrinsic width of the object
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -1518,13 +1418,11 @@ class Object(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1582,15 +1480,11 @@ class Picture(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1659,13 +1553,11 @@ class Picture(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1723,15 +1615,11 @@ class Portal(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1800,13 +1688,11 @@ class Portal(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1875,15 +1761,11 @@ class Source(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1957,13 +1839,11 @@ class Source(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1981,12 +1861,6 @@ class Svg(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -2027,15 +1901,11 @@ class Svg(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2088,8 +1958,6 @@ class Svg(BaseHTML):
 
         Args:
             *children: The children of the component.
-            width: Specifies the width of the element
-            height: Specifies the height of the element
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -2106,13 +1974,11 @@ class Svg(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2171,15 +2037,11 @@ class Path(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2249,13 +2111,11 @@ class Path(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/metadata.pyi b/reflex/components/el/elements/metadata.pyi
index 0b8c11898..8dd05ff96 100644
--- a/reflex/components/el/elements/metadata.pyi
+++ b/reflex/components/el/elements/metadata.pyi
@@ -62,15 +62,11 @@ class Base(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -139,13 +135,11 @@ class Base(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -203,15 +197,11 @@ class Head(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -280,13 +270,11 @@ class Head(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -365,15 +353,11 @@ class Link(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -442,13 +426,11 @@ class Link(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -516,15 +498,11 @@ class Meta(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -593,13 +571,11 @@ class Meta(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -622,7 +598,6 @@ class Title(Element):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -680,7 +655,6 @@ class Title(Element):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/other.pyi b/reflex/components/el/elements/other.pyi
index 4f3dc0337..1d939d5c2 100644
--- a/reflex/components/el/elements/other.pyi
+++ b/reflex/components/el/elements/other.pyi
@@ -58,15 +58,11 @@ class Details(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -136,13 +132,11 @@ class Details(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -201,15 +195,11 @@ class Dialog(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -279,13 +269,11 @@ class Dialog(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -343,15 +331,11 @@ class Summary(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -420,13 +404,11 @@ class Summary(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -484,15 +466,11 @@ class Slot(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -561,13 +539,11 @@ class Slot(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -625,15 +601,11 @@ class Template(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -702,13 +674,11 @@ class Template(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -766,15 +736,11 @@ class Math(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -843,13 +809,11 @@ class Math(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -910,15 +874,11 @@ class Html(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -988,13 +948,11 @@ class Html(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/scripts.py b/reflex/components/el/elements/scripts.py
index 0eefa43ab..a37a32494 100644
--- a/reflex/components/el/elements/scripts.py
+++ b/reflex/components/el/elements/scripts.py
@@ -11,12 +11,6 @@ class Canvas(BaseHTML):
 
     tag = "canvas"
 
-    # The height of the canvas in CSS pixels
-    height: Var[Union[str, int, bool]]
-
-    # The width of the canvas in CSS pixels
-    width: Var[Union[str, int, bool]]
-
 
 class Noscript(BaseHTML):
     """Display the noscript element."""
diff --git a/reflex/components/el/elements/scripts.pyi b/reflex/components/el/elements/scripts.pyi
index 9c5a0233b..ca2ec9fc6 100644
--- a/reflex/components/el/elements/scripts.pyi
+++ b/reflex/components/el/elements/scripts.pyi
@@ -17,12 +17,6 @@ class Canvas(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -63,15 +57,11 @@ class Canvas(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -124,8 +114,6 @@ class Canvas(BaseHTML):
 
         Args:
             *children: The children of the component.
-            height: The height of the canvas in CSS pixels
-            width: The width of the canvas in CSS pixels
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -142,13 +130,11 @@ class Canvas(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -206,15 +192,11 @@ class Noscript(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -283,13 +265,11 @@ class Noscript(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -370,15 +350,11 @@ class Script(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -456,13 +432,11 @@ class Script(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/sectioning.py b/reflex/components/el/elements/sectioning.py
index 140a661bb..ce3549573 100644
--- a/reflex/components/el/elements/sectioning.py
+++ b/reflex/components/el/elements/sectioning.py
@@ -1,5 +1,4 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
 
 from reflex.vars import Var as Var
 
@@ -11,9 +10,6 @@ class Body(BaseHTML):  # noqa: E742
 
     tag = "body"
 
-    bgcolor: Var[Union[str, int, bool]]
-    background: Var[Union[str, int, bool]]
-
 
 class Address(BaseHTML):  # noqa: E742
     """Display the address element."""
diff --git a/reflex/components/el/elements/sectioning.pyi b/reflex/components/el/elements/sectioning.pyi
index ad9b4afee..8233d45d3 100644
--- a/reflex/components/el/elements/sectioning.pyi
+++ b/reflex/components/el/elements/sectioning.pyi
@@ -7,7 +7,6 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Union
 from reflex.vars import Var as Var
 from .base import BaseHTML
 
@@ -17,12 +16,6 @@ class Body(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        background: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -63,15 +56,11 @@ class Body(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -140,13 +129,11 @@ class Body(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -204,15 +191,11 @@ class Address(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -281,13 +264,11 @@ class Address(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -345,15 +326,11 @@ class Article(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -422,13 +399,11 @@ class Article(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -486,15 +461,11 @@ class Aside(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -563,13 +534,11 @@ class Aside(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -627,15 +596,11 @@ class Footer(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -704,13 +669,11 @@ class Footer(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -768,15 +731,11 @@ class Header(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -845,13 +804,11 @@ class Header(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -909,15 +866,11 @@ class H1(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -986,13 +939,11 @@ class H1(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1050,15 +1001,11 @@ class H2(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1127,13 +1074,11 @@ class H2(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1191,15 +1136,11 @@ class H3(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1268,13 +1209,11 @@ class H3(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1332,15 +1271,11 @@ class H4(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1409,13 +1344,11 @@ class H4(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1473,15 +1406,11 @@ class H5(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1550,13 +1479,11 @@ class H5(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1614,15 +1541,11 @@ class H6(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1691,13 +1614,11 @@ class H6(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1755,15 +1676,11 @@ class Main(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1832,13 +1749,11 @@ class Main(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1896,15 +1811,11 @@ class Nav(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1973,13 +1884,11 @@ class Nav(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2037,15 +1946,11 @@ class Section(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2114,13 +2019,11 @@ class Section(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/tables.py b/reflex/components/el/elements/tables.py
index 49fbb6452..1277e1bea 100644
--- a/reflex/components/el/elements/tables.py
+++ b/reflex/components/el/elements/tables.py
@@ -23,9 +23,6 @@ class Col(BaseHTML):
     # Alignment of the content within the column
     align: Var[Union[str, int, bool]]
 
-    # Background color of the column
-    bgcolor: Var[Union[str, int, bool]]
-
     # Number of columns the col element spans
     span: Var[Union[str, int, bool]]
 
@@ -38,9 +35,6 @@ class Colgroup(BaseHTML):
     # Alignment of the content within the column group
     align: Var[Union[str, int, bool]]
 
-    # Background color of the column group
-    bgcolor: Var[Union[str, int, bool]]
-
     # Number of columns the colgroup element spans
     span: Var[Union[str, int, bool]]
 
@@ -53,15 +47,6 @@ class Table(BaseHTML):
     # Alignment of the table
     align: Var[Union[str, int, bool]]
 
-    # Background image for the table
-    background: Var[Union[str, int, bool]]
-
-    # Background color of the table
-    bgcolor: Var[Union[str, int, bool]]
-
-    # Specifies the width of the border around the table
-    border: Var[Union[str, int, bool]]
-
     # Provides a summary of the table's purpose and structure
     summary: Var[Union[str, int, bool]]
 
@@ -74,9 +59,6 @@ class Tbody(BaseHTML):
     # Alignment of the content within the table body
     align: Var[Union[str, int, bool]]
 
-    # Background color of the table body
-    bgcolor: Var[Union[str, int, bool]]
-
 
 class Td(BaseHTML):
     """Display the td element."""
@@ -86,12 +68,6 @@ class Td(BaseHTML):
     # Alignment of the content within the table cell
     align: Var[Union[str, int, bool]]
 
-    # Background image for the table cell
-    background: Var[Union[str, int, bool]]
-
-    # Background color of the table cell
-    bgcolor: Var[Union[str, int, bool]]
-
     # Number of columns a cell should span
     col_span: Var[Union[str, int, bool]]
 
@@ -110,9 +86,6 @@ class Tfoot(BaseHTML):
     # Alignment of the content within the table footer
     align: Var[Union[str, int, bool]]
 
-    # Background color of the table footer
-    bgcolor: Var[Union[str, int, bool]]
-
 
 class Th(BaseHTML):
     """Display the th element."""
@@ -122,12 +95,6 @@ class Th(BaseHTML):
     # Alignment of the content within the table header cell
     align: Var[Union[str, int, bool]]
 
-    # Background image for the table header cell
-    background: Var[Union[str, int, bool]]
-
-    # Background color of the table header cell
-    bgcolor: Var[Union[str, int, bool]]
-
     # Number of columns a header cell should span
     col_span: Var[Union[str, int, bool]]
 
@@ -157,6 +124,3 @@ class Tr(BaseHTML):
 
     # Alignment of the content within the table row
     align: Var[Union[str, int, bool]]
-
-    # Background color of the table row
-    bgcolor: Var[Union[str, int, bool]]
diff --git a/reflex/components/el/elements/tables.pyi b/reflex/components/el/elements/tables.pyi
index d07b77978..3d1ac50a3 100644
--- a/reflex/components/el/elements/tables.pyi
+++ b/reflex/components/el/elements/tables.pyi
@@ -60,15 +60,11 @@ class Caption(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -138,13 +134,11 @@ class Caption(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -165,9 +159,6 @@ class Col(BaseHTML):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         span: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
@@ -209,15 +200,11 @@ class Col(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -271,7 +258,6 @@ class Col(BaseHTML):
         Args:
             *children: The children of the component.
             align: Alignment of the content within the column
-            bgcolor: Background color of the column
             span: Number of columns the col element spans
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -289,13 +275,11 @@ class Col(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -316,9 +300,6 @@ class Colgroup(BaseHTML):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         span: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
@@ -360,15 +341,11 @@ class Colgroup(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -422,7 +399,6 @@ class Colgroup(BaseHTML):
         Args:
             *children: The children of the component.
             align: Alignment of the content within the column group
-            bgcolor: Background color of the column group
             span: Number of columns the colgroup element spans
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -440,13 +416,11 @@ class Colgroup(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -467,15 +441,6 @@ class Table(BaseHTML):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        background: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        border: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         summary: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -519,15 +484,11 @@ class Table(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -581,9 +542,6 @@ class Table(BaseHTML):
         Args:
             *children: The children of the component.
             align: Alignment of the table
-            background: Background image for the table
-            bgcolor: Background color of the table
-            border: Specifies the width of the border around the table
             summary: Provides a summary of the table's purpose and structure
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -601,13 +559,11 @@ class Table(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -628,9 +584,6 @@ class Tbody(BaseHTML):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -671,15 +624,11 @@ class Tbody(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -733,7 +682,6 @@ class Tbody(BaseHTML):
         Args:
             *children: The children of the component.
             align: Alignment of the content within the table body
-            bgcolor: Background color of the table body
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -750,13 +698,11 @@ class Tbody(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -777,12 +723,6 @@ class Td(BaseHTML):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        background: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         col_span: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -832,15 +772,11 @@ class Td(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -894,8 +830,6 @@ class Td(BaseHTML):
         Args:
             *children: The children of the component.
             align: Alignment of the content within the table cell
-            background: Background image for the table cell
-            bgcolor: Background color of the table cell
             col_span: Number of columns a cell should span
             headers: IDs of the headers associated with this cell
             row_span: Number of rows a cell should span
@@ -915,13 +849,11 @@ class Td(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -942,9 +874,6 @@ class Tfoot(BaseHTML):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -985,15 +914,11 @@ class Tfoot(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1047,7 +972,6 @@ class Tfoot(BaseHTML):
         Args:
             *children: The children of the component.
             align: Alignment of the content within the table footer
-            bgcolor: Background color of the table footer
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -1064,13 +988,11 @@ class Tfoot(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1091,12 +1013,6 @@ class Th(BaseHTML):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        background: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         col_span: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -1149,15 +1065,11 @@ class Th(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1211,8 +1123,6 @@ class Th(BaseHTML):
         Args:
             *children: The children of the component.
             align: Alignment of the content within the table header cell
-            background: Background image for the table header cell
-            bgcolor: Background color of the table header cell
             col_span: Number of columns a header cell should span
             headers: IDs of the headers associated with this header cell
             row_span: Number of rows a header cell should span
@@ -1233,13 +1143,11 @@ class Th(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1300,15 +1208,11 @@ class Thead(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1378,13 +1282,11 @@ class Thead(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1405,9 +1307,6 @@ class Tr(BaseHTML):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -1448,15 +1347,11 @@ class Tr(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1510,7 +1405,6 @@ class Tr(BaseHTML):
         Args:
             *children: The children of the component.
             align: Alignment of the content within the table row
-            bgcolor: Background color of the table row
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -1527,13 +1421,11 @@ class Tr(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/el/elements/typography.py b/reflex/components/el/elements/typography.py
index 01684951c..f8e3769fa 100644
--- a/reflex/components/el/elements/typography.py
+++ b/reflex/components/el/elements/typography.py
@@ -53,9 +53,6 @@ class Hr(BaseHTML):
     # Used to specify the alignment of text content of The Element. this attribute is used in all elements.
     align: Var[Union[str, int, bool]]
 
-    # Used to specify the color of a Horizontal rule.
-    color: Var[Union[str, int, bool]]
-
 
 class Li(BaseHTML):
     """Display the li element."""
diff --git a/reflex/components/el/elements/typography.pyi b/reflex/components/el/elements/typography.pyi
index 08f5c9b32..bb70908af 100644
--- a/reflex/components/el/elements/typography.pyi
+++ b/reflex/components/el/elements/typography.pyi
@@ -58,15 +58,11 @@ class Blockquote(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -136,13 +132,11 @@ class Blockquote(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -200,15 +194,11 @@ class Dd(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -277,13 +267,11 @@ class Dd(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -341,15 +329,11 @@ class Div(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -418,13 +402,11 @@ class Div(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -482,15 +464,11 @@ class Dl(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -559,13 +537,11 @@ class Dl(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -623,15 +599,11 @@ class Dt(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -700,13 +672,11 @@ class Dt(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -764,15 +734,11 @@ class Figcaption(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -841,13 +807,11 @@ class Figcaption(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -868,9 +832,6 @@ class Hr(BaseHTML):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        color: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -911,15 +872,11 @@ class Hr(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -973,7 +930,6 @@ class Hr(BaseHTML):
         Args:
             *children: The children of the component.
             align: Used to specify the alignment of text content of The Element. this attribute is used in all elements.
-            color: Used to specify the color of a Horizontal rule.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -990,13 +946,11 @@ class Hr(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1054,15 +1008,11 @@ class Li(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1131,13 +1081,11 @@ class Li(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1196,15 +1144,11 @@ class Menu(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1274,13 +1218,11 @@ class Menu(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1345,15 +1287,11 @@ class Ol(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1425,13 +1363,11 @@ class Ol(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1489,15 +1425,11 @@ class P(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1566,13 +1498,11 @@ class P(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1630,15 +1560,11 @@ class Pre(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1707,13 +1633,11 @@ class Pre(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1771,15 +1695,11 @@ class Ul(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1848,13 +1768,11 @@ class Ul(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1916,15 +1834,11 @@ class Ins(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1995,13 +1909,11 @@ class Ins(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -2063,15 +1975,11 @@ class Del(BaseHTML):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -2142,13 +2050,11 @@ class Del(BaseHTML):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/gridjs/datatable.pyi b/reflex/components/gridjs/datatable.pyi
index 9ad0d03d2..691c3d4bd 100644
--- a/reflex/components/gridjs/datatable.pyi
+++ b/reflex/components/gridjs/datatable.pyi
@@ -25,7 +25,6 @@ class Gridjs(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -83,7 +82,6 @@ class Gridjs(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -112,7 +110,6 @@ class DataTable(Gridjs):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -176,7 +173,6 @@ class DataTable(Gridjs):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 
diff --git a/reflex/components/lucide/icon.pyi b/reflex/components/lucide/icon.pyi
index cdca826cd..26eabb48b 100644
--- a/reflex/components/lucide/icon.pyi
+++ b/reflex/components/lucide/icon.pyi
@@ -23,7 +23,6 @@ class LucideIconComponent(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -81,7 +80,6 @@ class LucideIconComponent(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -105,7 +103,6 @@ class Icon(LucideIconComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -166,7 +163,6 @@ class Icon(LucideIconComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The keyword arguments
 
diff --git a/reflex/components/markdown/markdown.py b/reflex/components/markdown/markdown.py
index 1c2b7746c..62a35e74e 100644
--- a/reflex/components/markdown/markdown.py
+++ b/reflex/components/markdown/markdown.py
@@ -50,7 +50,8 @@ def get_base_component_map() -> dict[str, Callable]:
     Returns:
         The base component map.
     """
-    from reflex.components.chakra.datadisplay.code import Code, CodeBlock
+    from reflex.components.chakra.datadisplay.code import Code
+    from reflex.components.datadisplay.code import CodeBlock
 
     return {
         "h1": lambda value: Heading.create(
@@ -164,7 +165,8 @@ class Markdown(Component):
 
     def _get_imports(self) -> imports.ImportDict:
         # Import here to avoid circular imports.
-        from reflex.components.chakra.datadisplay.code import Code, CodeBlock
+        from reflex.components.chakra.datadisplay.code import Code
+        from reflex.components.datadisplay.code import CodeBlock
 
         imports = super()._get_imports()
 
diff --git a/reflex/components/markdown/markdown.pyi b/reflex/components/markdown/markdown.pyi
index 27c9789ac..1322e7622 100644
--- a/reflex/components/markdown/markdown.pyi
+++ b/reflex/components/markdown/markdown.pyi
@@ -55,7 +55,6 @@ class Markdown(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -116,7 +115,6 @@ class Markdown(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/moment/moment.pyi b/reflex/components/moment/moment.pyi
index bd5392f7e..6eb780cda 100644
--- a/reflex/components/moment/moment.pyi
+++ b/reflex/components/moment/moment.pyi
@@ -56,7 +56,6 @@ class Moment(NoSSRComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -137,7 +136,6 @@ class Moment(NoSSRComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
diff --git a/reflex/components/next/base.pyi b/reflex/components/next/base.pyi
index f940aaca1..57fab6a9a 100644
--- a/reflex/components/next/base.pyi
+++ b/reflex/components/next/base.pyi
@@ -22,7 +22,6 @@ class NextComponent(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -80,7 +79,6 @@ class NextComponent(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/next/image.pyi b/reflex/components/next/image.pyi
index 3eba50fba..a8f7d8379 100644
--- a/reflex/components/next/image.pyi
+++ b/reflex/components/next/image.pyi
@@ -38,7 +38,6 @@ class Image(NextComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -114,7 +113,6 @@ class Image(NextComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props:The props of the component.
 
diff --git a/reflex/components/next/link.pyi b/reflex/components/next/link.pyi
index 57e42d550..3d8809968 100644
--- a/reflex/components/next/link.pyi
+++ b/reflex/components/next/link.pyi
@@ -23,7 +23,6 @@ class NextLink(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -83,7 +82,6 @@ class NextLink(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/next/video.pyi b/reflex/components/next/video.pyi
index 25cd027d6..cee5c4c9d 100644
--- a/reflex/components/next/video.pyi
+++ b/reflex/components/next/video.pyi
@@ -25,7 +25,6 @@ class Video(NextComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -84,7 +83,6 @@ class Video(NextComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/plotly/plotly.pyi b/reflex/components/plotly/plotly.pyi
index d237f1c12..2a0653aeb 100644
--- a/reflex/components/plotly/plotly.pyi
+++ b/reflex/components/plotly/plotly.pyi
@@ -27,7 +27,6 @@ class PlotlyLib(NoSSRComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -85,7 +84,6 @@ class PlotlyLib(NoSSRComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -113,7 +111,6 @@ class Plotly(PlotlyLib):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -176,7 +173,6 @@ class Plotly(PlotlyLib):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/radix/__init__.py b/reflex/components/radix/__init__.py
index ee7c2ec7a..08d1dcfef 100644
--- a/reflex/components/radix/__init__.py
+++ b/reflex/components/radix/__init__.py
@@ -1,3 +1,4 @@
 """Namespace for components provided by @radix-ui packages."""
 
-from . import primitives, themes
+from .primitives import *
+from .themes import *
diff --git a/reflex/components/radix/primitives/__init__.py b/reflex/components/radix/primitives/__init__.py
index 3cde1978b..23070044e 100644
--- a/reflex/components/radix/primitives/__init__.py
+++ b/reflex/components/radix/primitives/__init__.py
@@ -1,37 +1,7 @@
 """Radix primitive components (https://www.radix-ui.com/primitives)."""
 
-from .accordion import (
-    AccordionContent,
-    AccordionHeader,
-    AccordionRoot,
-    AccordionTrigger,
-    accordion_item,
-)
-from .drawer import (
-    drawer_close,
-    drawer_content,
-    drawer_description,
-    drawer_overlay,
-    drawer_portal,
-    drawer_root,
-    drawer_title,
-    drawer_trigger,
-)
-from .form import (
-    form_control,
-    form_field,
-    form_label,
-    form_message,
-    form_root,
-    form_submit,
-    form_validity_state,
-)
+from .accordion import accordion
+from .drawer import drawer
+from .form import form
 from .progress import progress
 from .slider import slider
-
-# accordion
-accordion = AccordionRoot.create
-accordion_root = AccordionRoot.create
-accordion_header = AccordionHeader.create
-accordion_trigger = AccordionTrigger.create
-accordion_content = AccordionContent.create
diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
index 29083bbd2..cf5e630ab 100644
--- a/reflex/components/radix/primitives/accordion.py
+++ b/reflex/components/radix/primitives/accordion.py
@@ -2,19 +2,20 @@
 
 from __future__ import annotations
 
-from typing import Any, Dict, List, Literal
+from typing import Any, Dict, List, Literal, Optional, Union
 
-from reflex.components.component import Component
-from reflex.components.core import cond, match
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.match import Match
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.primitives.base import RadixPrimitiveComponent
+from reflex.components.radix.themes.base import LiteralAccentColor
 from reflex.style import (
     Style,
     convert_dict_to_style_and_format_emotion,
     format_as_emotion,
 )
 from reflex.utils import imports
-from reflex.vars import BaseVar, Var, VarData
+from reflex.vars import BaseVar, Var, VarData, get_unique_variable_name
 
 LiteralAccordionType = Literal["single", "multiple"]
 LiteralAccordionDir = Literal["ltr", "rtl"]
@@ -35,16 +36,14 @@ def get_theme_accordion_root(variant: Var[str], color_scheme: Var[str]) -> BaseV
     Returns:
         The theme for the accordion root component.
     """
-    return match(  # type: ignore
+    return Match.create(  # type: ignore
         variant,
         (
             "soft",
             convert_dict_to_style_and_format_emotion(
                 {
                     "border_radius": "6px",
-                    "background_color": cond(
-                        color_scheme == "primary", "var(--accent-3)", "var(--slate-3)"
-                    ),
+                    "background_color": f"var(--{color_scheme}-3)",
                     "box_shadow": "0 2px 10px var(--black-a1)",
                 }
             ),
@@ -54,11 +53,7 @@ def get_theme_accordion_root(variant: Var[str], color_scheme: Var[str]) -> BaseV
             convert_dict_to_style_and_format_emotion(
                 {
                     "border_radius": "6px",
-                    "border": cond(
-                        color_scheme == "primary",
-                        "1px solid var(--accent-6)",
-                        "1px solid var(--slate-6)",
-                    ),
+                    "border": f"1px solid var(--{color_scheme}-6)",
                     "box_shadow": "0 2px 10px var(--black-a1)",
                 }
             ),
@@ -68,14 +63,8 @@ def get_theme_accordion_root(variant: Var[str], color_scheme: Var[str]) -> BaseV
             convert_dict_to_style_and_format_emotion(
                 {
                     "border_radius": "6px",
-                    "border": cond(
-                        color_scheme == "primary",
-                        "1px solid var(--accent-6)",
-                        "1px solid var(--slate-6)",
-                    ),
-                    "background_color": cond(
-                        color_scheme == "primary", "var(--accent-3)", "var(--slate-3)"
-                    ),
+                    "border": f"1px solid var(--{color_scheme}-6)",
+                    "background_color": f"var(--{color_scheme}-3)",
                     "box_shadow": "0 2px 10px var(--black-a1)",
                 }
             ),
@@ -93,12 +82,10 @@ def get_theme_accordion_root(variant: Var[str], color_scheme: Var[str]) -> BaseV
         convert_dict_to_style_and_format_emotion(
             {
                 "border_radius": "6px",
-                "background_color": cond(
-                    color_scheme == "primary", "var(--accent-9)", "var(--slate-9)"
-                ),
+                "background_color": f"var(--{color_scheme}-9)",
                 "box_shadow": "0 2px 10px var(--black-a4)",
             }
-        )
+        ),
         # defaults to classic
     )
 
@@ -152,30 +139,18 @@ def get_theme_accordion_trigger(variant: str | Var, color_scheme: str | Var) ->
     Returns:
         The theme for the accordion trigger component.
     """
-    return match(  # type: ignore
+    return Match.create(  # type: ignore
         variant,
         (
             "soft",
             convert_dict_to_style_and_format_emotion(
                 {
-                    "color": cond(
-                        color_scheme == "primary",
-                        "var(--accent-11)",
-                        "var(--slate-11)",
-                    ),
+                    "color": f"var(--{color_scheme}-11)",
                     "&:hover": {
-                        "background_color": cond(
-                            color_scheme == "primary",
-                            "var(--accent-4)",
-                            "var(--slate-4)",
-                        ),
+                        "background_color": f"var(--{color_scheme}-4)",
                     },
                     "& > .AccordionChevron": {
-                        "color": cond(
-                            color_scheme == "primary",
-                            "var(--accent-11)",
-                            "var(--slate-11)",
-                        ),
+                        "color": f"var(--{color_scheme}-11)",
                         "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
                     },
                     "&[data-state='open'] > .AccordionChevron": {
@@ -200,24 +175,12 @@ def get_theme_accordion_trigger(variant: str | Var, color_scheme: str | Var) ->
             "ghost",
             convert_dict_to_style_and_format_emotion(
                 {
-                    "color": cond(
-                        color_scheme == "primary",
-                        "var(--accent-11)",
-                        "var(--slate-11)",
-                    ),
+                    "color": f"var(--{color_scheme}-11)",
                     "&:hover": {
-                        "background_color": cond(
-                            color_scheme == "primary",
-                            "var(--accent-4)",
-                            "var(--slate-4)",
-                        ),
+                        "background_color": f"var(--{color_scheme}-4)",
                     },
                     "& > .AccordionChevron": {
-                        "color": cond(
-                            color_scheme == "primary",
-                            "var(--accent-11)",
-                            "var(--slate-11)",
-                        ),
+                        "color": f"var(--{color_scheme}-11)",
                         "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
                     },
                     "&[data-state='open'] > .AccordionChevron": {
@@ -239,27 +202,13 @@ def get_theme_accordion_trigger(variant: str | Var, color_scheme: str | Var) ->
         # defaults to classic
         convert_dict_to_style_and_format_emotion(
             {
-                "color": cond(
-                    color_scheme == "primary",
-                    "var(--accent-9-contrast)",
-                    "var(--slate-9-contrast)",
-                ),
-                "box_shadow": cond(
-                    color_scheme == "primary",
-                    "0 1px 0 var(--accent-6)",
-                    "0 1px 0 var(--slate-11)",
-                ),
+                "color": f"var(--{color_scheme}-9-contrast)",
+                "box_shadow": f"var(--{color_scheme}-11)",
                 "&:hover": {
-                    "background_color": cond(
-                        color_scheme == "primary", "var(--accent-10)", "var(--slate-10)"
-                    ),
+                    "background_color": f"var(--{color_scheme}-10)",
                 },
                 "& > .AccordionChevron": {
-                    "color": cond(
-                        color_scheme == "primary",
-                        "var(--accent-9-contrast)",
-                        "var(--slate-9-contrast)",
-                    ),
+                    "color": f"var(--{color_scheme}-9-contrast)",
                     "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
                 },
                 "&[data-state='open'] > .AccordionChevron": {
@@ -290,7 +239,7 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) ->
     Returns:
         The theme for the accordion content component.
     """
-    return match(  # type: ignore
+    return Match.create(  # type: ignore
         variant,
         (
             "outline",
@@ -299,11 +248,7 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) ->
                 {
                     "overflow": "hidden",
                     "font_size": "10px",
-                    "color": cond(
-                        color_scheme == "primary",
-                        "var(--accent-11)",
-                        "var(--slate-11)",
-                    ),
+                    "color": f"var(--{color_scheme}-11)",
                     "padding": "15px, 20px",
                     "&[data-state='open']": {
                         "animation": Var.create(
@@ -324,33 +269,15 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) ->
             {
                 "overflow": "hidden",
                 "font_size": "10px",
-                "color": match(
+                "color": Match.create(
                     variant,
-                    (
-                        "classic",
-                        cond(
-                            color_scheme == "primary",
-                            "var(--accent-9-contrast)",
-                            "var(--slate-9-contrast)",
-                        ),
-                    ),
-                    cond(
-                        color_scheme == "primary", "var(--accent-11)", "var(--slate-11)"
-                    ),
+                    ("classic", f"var(--{color_scheme}-9-contrast)"),
+                    f"var(--{color_scheme}-11)",
                 ),
-                "background_color": match(
+                "background_color": Match.create(
                     variant,
-                    (
-                        "classic",
-                        cond(
-                            color_scheme == "primary",
-                            "var(--accent-9)",
-                            "var(--slate-9)",
-                        ),
-                    ),
-                    cond(
-                        color_scheme == "primary", "var(--accent-3)", "var(--slate-3)"
-                    ),
+                    ("classic", f"var(--{color_scheme}-9)"),
+                    f"var(--{color_scheme}-3)",
                 ),
                 "padding": "15px, 20px",
                 "&[data-state='open']": {
@@ -384,13 +311,13 @@ class AccordionRoot(AccordionComponent):
     alias = "RadixAccordionRoot"
 
     # The type of accordion (single or multiple).
-    type_: Var[LiteralAccordionType]
+    type: Var[LiteralAccordionType]
 
     # The value of the item to expand.
-    value: Var[str]
+    value: Var[Optional[Union[str, List[str]]]]
 
     # The default value of the item to expand.
-    default_value: Var[str]
+    default_value: Var[Optional[Union[str, List[str]]]]
 
     # Whether or not the accordion is collapsible.
     collapsible: Var[bool]
@@ -408,10 +335,10 @@ class AccordionRoot(AccordionComponent):
     variant: Var[LiteralAccordionRootVariant] = "classic"  # type: ignore
 
     # The color scheme of the accordion.
-    color_scheme: Var[LiteralAccordionRootColorScheme] = "primary"  # type: ignore
+    color_scheme: Var[LiteralAccentColor]  # type: ignore
 
     # dynamic themes of the accordion generated at compile time.
-    _dynamic_themes: Var[dict]
+    _dynamic_themes: Var[dict] = Var.create({})  # type: ignore
 
     # The var_data associated with the component.
     _var_data: VarData = VarData()  # type: ignore
@@ -431,11 +358,11 @@ class AccordionRoot(AccordionComponent):
         """
         comp = super().create(*children, **props)
 
-        if not comp.color_scheme._var_state:  # type: ignore
+        if comp.color_scheme is not None and not comp.color_scheme._var_state:  # type: ignore
             # mark the vars of color string literals as strings so they can be formatted properly when performing a var operation.
             comp.color_scheme._var_is_string = True  # type: ignore
 
-        if not comp.variant._var_state:  # type: ignore
+        if comp.variant is not None and not comp.variant._var_state:  # type: ignore
             # mark the vars of variant string literals as strings so they are formatted properly in the match condition.
             comp.variant._var_is_string = True  # type: ignore
 
@@ -450,21 +377,39 @@ class AccordionRoot(AccordionComponent):
         return {"css": self._dynamic_themes._merge(format_as_emotion(self.style))}  # type: ignore
 
     def _apply_theme(self, theme: Component):
+        global_color_scheme = getattr(theme, "accent_color", None)
+
+        if global_color_scheme is None and self.color_scheme is None:
+            raise ValueError(
+                "`color_scheme` cannot be None. Either set the `color_scheme` prop on the accordion "
+                "component or set the `accent_color` prop in your global theme."
+            )
+
+        # prepare the color_scheme var to be used in an f-string(strip off the wrapping curly brace)
+        color_scheme = Var.create(
+            self.color_scheme if self.color_scheme is not None else global_color_scheme
+        )._replace(  # type: ignore
+            _var_is_string=False
+        )
+
         accordion_theme_root = get_theme_accordion_root(
-            variant=self.variant, color_scheme=self.color_scheme
+            variant=self.variant, color_scheme=color_scheme
         )
         accordion_theme_content = get_theme_accordion_content(
-            variant=self.variant, color_scheme=self.color_scheme
+            variant=self.variant, color_scheme=color_scheme
         )
         accordion_theme_trigger = get_theme_accordion_trigger(
-            variant=self.variant, color_scheme=self.color_scheme
+            variant=self.variant, color_scheme=color_scheme
         )
 
         # extract var_data from dynamic themes.
-        self._var_data = self._var_data.merge(  # type: ignore
-            accordion_theme_trigger._var_data,
-            accordion_theme_content._var_data,
-            accordion_theme_root._var_data,
+        self._var_data = (
+            self._var_data.merge(  # type: ignore
+                accordion_theme_trigger._var_data,
+                accordion_theme_content._var_data,
+                accordion_theme_root._var_data,
+            )
+            or self._var_data
         )
 
         self._dynamic_themes = Var.create(  # type: ignore
@@ -481,7 +426,11 @@ class AccordionRoot(AccordionComponent):
         )
 
     def _get_imports(self):
-        return imports.merge_imports(super()._get_imports(), self._var_data.imports)
+        return imports.merge_imports(
+            super()._get_imports(),
+            self._var_data.imports if self._var_data else {},
+            {"@emotion/react": [imports.ImportVar(tag="keyframes")]},
+        )
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -494,6 +443,26 @@ class AccordionRoot(AccordionComponent):
             "on_value_change": lambda e0: [e0],
         }
 
+    def _get_custom_code(self) -> str:
+        return """
+const slideDown = keyframes`
+from {
+  height: 0;
+}
+to {
+  height: var(--radix-accordion-content-height);
+}
+`
+const slideUp = keyframes`
+from {
+  height: var(--radix-accordion-content-height);
+}
+to {
+  height: 0;
+}
+`
+"""
+
 
 class AccordionItem(AccordionComponent):
     """An accordion component."""
@@ -523,6 +492,46 @@ class AccordionItem(AccordionComponent):
             }
         )
 
+    @classmethod
+    def create(
+        cls,
+        *children,
+        header: Optional[Component | Var] = None,
+        content: Optional[Component | Var] = None,
+        **props,
+    ) -> Component:
+        """Create an accordion item.
+
+        Args:
+            header: The header of the accordion item.
+            content: The content of the accordion item.
+            *children: The list of children to use if header and content are not provided.
+            **props: Additional properties to apply to the accordion item.
+
+        Returns:
+            The accordion item.
+        """
+        # The item requires a value to toggle (use a random unique name if not provided).
+        value = props.pop("value", get_unique_variable_name())
+
+        if "AccordionItem" not in (
+            cls_name := props.pop("class_name", "AccordionItem")
+        ):
+            cls_name = f"{cls_name} AccordionItem"
+
+        if (header is not None) and (content is not None):
+            children = [
+                AccordionHeader.create(
+                    AccordionTrigger.create(
+                        header,
+                        AccordionIcon.create(),
+                    ),
+                ),
+                AccordionContent.create(content),
+            ]
+
+        return super().create(*children, value=value, **props, class_name=cls_name)
+
 
 class AccordionHeader(AccordionComponent):
     """An accordion component."""
@@ -531,12 +540,26 @@ class AccordionHeader(AccordionComponent):
 
     alias = "RadixAccordionHeader"
 
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Accordion header component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Accordion header Component.
+        """
+        if "AccordionHeader" not in (
+            cls_name := props.pop("class_name", "AccordionHeader")
+        ):
+            cls_name = f"{cls_name} AccordionHeader"
+
+        return super().create(*children, class_name=cls_name, **props)
+
     def _apply_theme(self, theme: Component):
-        self.style = Style(
-            {
-                **self.style,
-            }
-        )
+        self.style = Style({**self.style})
 
 
 class AccordionTrigger(AccordionComponent):
@@ -546,12 +569,48 @@ class AccordionTrigger(AccordionComponent):
 
     alias = "RadixAccordionTrigger"
 
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Accordion trigger component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Accordion trigger Component.
+        """
+        if "AccordionTrigger" not in (
+            cls_name := props.pop("class_name", "AccordionTrigger")
+        ):
+            cls_name = f"{cls_name} AccordionTrigger"
+
+        return super().create(*children, class_name=cls_name, **props)
+
     def _apply_theme(self, theme: Component):
-        self.style = Style(
-            {
-                **self.style,
-            }
-        )
+        self.style = Style({**self.style})
+
+
+class AccordionIcon(Icon):
+    """An accordion icon component."""
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Accordion icon component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Accordion icon Component.
+        """
+        if "AccordionChevron" not in (
+            cls_name := props.pop("class_name", "AccordionChevron")
+        ):
+            cls_name = f"{cls_name} AccordionChevron"
+
+        return super().create(tag="chevron_down", class_name=cls_name, **props)
 
 
 class AccordionContent(AccordionComponent):
@@ -561,70 +620,43 @@ class AccordionContent(AccordionComponent):
 
     alias = "RadixAccordionContent"
 
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Accordion content component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Accordion content Component.
+        """
+        if "AccordionContent" not in (
+            cls_name := props.pop("class_name", "AccordionContent")
+        ):
+            cls_name = f"{cls_name} AccordionContent"
+
+        return super().create(*children, class_name=cls_name, **props)
+
     def _apply_theme(self, theme: Component):
-        self.style = Style(
-            {
-                **self.style,
-            }
-        )
+        self.style = Style({**self.style})
 
-    def _get_imports(self):
-        return {
-            **super()._get_imports(),
-            "@emotion/react": [imports.ImportVar(tag="keyframes")],
-        }
-
-    def _get_custom_code(self) -> str:
-        return """
-const slideDown = keyframes`
-from {
-  height: 0;
-}
-to {
-  height: var(--radix-accordion-content-height);
-}
-`
-const slideUp = keyframes`
-from {
-  height: var(--radix-accordion-content-height);
-}
-to {
-  height: 0;
-}
-`
-"""
+    # def _get_imports(self):
+    #     return {
+    #         **super()._get_imports(),
+    #         "@emotion/react": [imports.ImportVar(tag="keyframes")],
+    #     }
 
 
-def accordion_item(header: Component, content: Component, **props) -> Component:
-    """Create an accordion item.
+class Accordion(ComponentNamespace):
+    """Accordion component."""
 
-    Args:
-        header: The header of the accordion item.
-        content: The content of the accordion item.
-        **props: Additional properties to apply to the accordion item.
+    content = staticmethod(AccordionContent.create)
+    header = staticmethod(AccordionHeader.create)
+    item = staticmethod(AccordionItem.create)
+    icon = staticmethod(AccordionIcon.create)
+    root = staticmethod(AccordionRoot.create)
+    trigger = staticmethod(AccordionTrigger.create)
 
-    Returns:
-        The accordion item.
-    """
-    # The item requires a value to toggle (use the header as the default value).
-    value = props.pop("value", str(header))
 
-    return AccordionItem.create(
-        AccordionHeader.create(
-            AccordionTrigger.create(
-                header,
-                Icon.create(
-                    tag="chevron_down",
-                    class_name="AccordionChevron",
-                ),
-                class_name="AccordionTrigger",
-            ),
-        ),
-        AccordionContent.create(
-            content,
-            class_name="AccordionContent",
-        ),
-        value=value,
-        **props,
-        class_name="AccordionItem",
-    )
+accordion = Accordion()
diff --git a/reflex/components/radix/primitives/accordion.pyi b/reflex/components/radix/primitives/accordion.pyi
index 1a440af58..457e53ee0 100644
--- a/reflex/components/radix/primitives/accordion.pyi
+++ b/reflex/components/radix/primitives/accordion.pyi
@@ -7,18 +7,19 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Any, Dict, List, Literal
-from reflex.components.component import Component
-from reflex.components.core import cond, match
+from typing import Any, Dict, List, Literal, Optional, Union
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.match import Match
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.primitives.base import RadixPrimitiveComponent
+from reflex.components.radix.themes.base import LiteralAccentColor
 from reflex.style import (
     Style,
     convert_dict_to_style_and_format_emotion,
     format_as_emotion,
 )
 from reflex.utils import imports
-from reflex.vars import BaseVar, Var, VarData
+from reflex.vars import BaseVar, Var, VarData, get_unique_variable_name
 
 LiteralAccordionType = Literal["single", "multiple"]
 LiteralAccordionDir = Literal["ltr", "rtl"]
@@ -49,7 +50,6 @@ class AccordionComponent(RadixPrimitiveComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -108,7 +108,6 @@ class AccordionComponent(RadixPrimitiveComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -126,11 +125,15 @@ class AccordionRoot(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
-        type_: Optional[
+        type: Optional[
             Union[Var[Literal["single", "multiple"]], Literal["single", "multiple"]]
         ] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
+        value: Optional[
+            Union[Var[Union[str, List[str]]], Union[str, List[str]]]
+        ] = None,
+        default_value: Optional[
+            Union[Var[Union[str, List[str]]], Union[str, List[str]]]
+        ] = None,
         collapsible: Optional[Union[Var[bool], bool]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
         dir: Optional[Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]] = None,
@@ -147,7 +150,66 @@ class AccordionRoot(AccordionComponent):
             ]
         ] = None,
         color_scheme: Optional[
-            Union[Var[Literal["primary", "accent"]], Literal["primary", "accent"]]
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
         ] = None,
         _dynamic_themes: Optional[Union[Var[dict], dict]] = None,
         _var_data: Optional[VarData] = None,
@@ -157,7 +219,6 @@ class AccordionRoot(AccordionComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -213,7 +274,7 @@ class AccordionRoot(AccordionComponent):
 
         Args:
             *children: The children of the component.
-            type_: The type of accordion (single or multiple).
+            type: The type of accordion (single or multiple).
             value: The value of the item to expand.
             default_value: The default value of the item to expand.
             collapsible: Whether or not the accordion is collapsible.
@@ -230,7 +291,6 @@ class AccordionRoot(AccordionComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -246,6 +306,8 @@ class AccordionItem(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
+        header: Optional[Component | Var] = None,
+        content: Optional[Component | Var] = None,
         value: Optional[Union[Var[str], str]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
@@ -254,7 +316,6 @@ class AccordionItem(AccordionComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -303,10 +364,12 @@ class AccordionItem(AccordionComponent):
         ] = None,
         **props
     ) -> "AccordionItem":
-        """Create the component.
+        """Create an accordion item.
 
         Args:
-            *children: The children of the component.
+            header: The header of the accordion item.
+            content: The content of the accordion item.
+            *children: The list of children to use if header and content are not provided.
             value: A unique identifier for the item.
             disabled: When true, prevents the user from interacting with the item.
             as_child: Change the default rendered element for the one passed as a child.
@@ -315,15 +378,11 @@ class AccordionItem(AccordionComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: Additional properties to apply to the accordion item.
 
         Returns:
-            The component.
-
-        Raises:
-            TypeError: If an invalid child is passed.
+            The accordion item.
         """
         ...
 
@@ -339,7 +398,6 @@ class AccordionHeader(AccordionComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -388,7 +446,7 @@ class AccordionHeader(AccordionComponent):
         ] = None,
         **props
     ) -> "AccordionHeader":
-        """Create the component.
+        """Create the Accordion header component.
 
         Args:
             *children: The children of the component.
@@ -398,15 +456,11 @@ class AccordionHeader(AccordionComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The properties of the component.
 
         Returns:
-            The component.
-
-        Raises:
-            TypeError: If an invalid child is passed.
+            The Accordion header Component.
         """
         ...
 
@@ -422,7 +476,6 @@ class AccordionTrigger(AccordionComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -471,7 +524,7 @@ class AccordionTrigger(AccordionComponent):
         ] = None,
         **props
     ) -> "AccordionTrigger":
-        """Create the component.
+        """Create the Accordion trigger component.
 
         Args:
             *children: The children of the component.
@@ -481,15 +534,89 @@ class AccordionTrigger(AccordionComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The properties of the component.
 
         Returns:
-            The component.
+            The Accordion trigger Component.
+        """
+        ...
 
-        Raises:
-            TypeError: If an invalid child is passed.
+class AccordionIcon(Icon):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[int], int]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "AccordionIcon":
+        """Create the Accordion icon component.
+
+        Args:
+            *children: The children of the component.
+            size: The size of the icon in pixels.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The Accordion icon Component.
         """
         ...
 
@@ -505,7 +632,6 @@ class AccordionContent(AccordionComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -554,7 +680,7 @@ class AccordionContent(AccordionComponent):
         ] = None,
         **props
     ) -> "AccordionContent":
-        """Create the component.
+        """Create the Accordion content component.
 
         Args:
             *children: The children of the component.
@@ -564,16 +690,20 @@ class AccordionContent(AccordionComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The properties of the component.
 
         Returns:
-            The component.
-
-        Raises:
-            TypeError: If an invalid child is passed.
+            The Accordion content Component.
         """
         ...
 
-def accordion_item(header: Component, content: Component, **props) -> Component: ...
+class Accordion(ComponentNamespace):
+    content = staticmethod(AccordionContent.create)
+    header = staticmethod(AccordionHeader.create)
+    item = staticmethod(AccordionItem.create)
+    icon = staticmethod(AccordionIcon.create)
+    root = staticmethod(AccordionRoot.create)
+    trigger = staticmethod(AccordionTrigger.create)
+
+accordion = Accordion()
diff --git a/reflex/components/radix/primitives/base.pyi b/reflex/components/radix/primitives/base.pyi
index e1e2e5711..f31a66252 100644
--- a/reflex/components/radix/primitives/base.pyi
+++ b/reflex/components/radix/primitives/base.pyi
@@ -25,7 +25,6 @@ class RadixPrimitiveComponent(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -84,7 +83,6 @@ class RadixPrimitiveComponent(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -108,7 +106,6 @@ class RadixPrimitiveComponentWithClassName(RadixPrimitiveComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -167,7 +164,6 @@ class RadixPrimitiveComponentWithClassName(RadixPrimitiveComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/radix/primitives/drawer.py b/reflex/components/radix/primitives/drawer.py
index 6b310a25f..76fc5ab2f 100644
--- a/reflex/components/radix/primitives/drawer.py
+++ b/reflex/components/radix/primitives/drawer.py
@@ -5,12 +5,14 @@ from __future__ import annotations
 
 from typing import Any, Dict, List, Literal, Optional, Union
 
-from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
+from reflex.components.component import ComponentNamespace
+from reflex.components.radix.primitives.base import RadixPrimitiveComponent
+from reflex.components.radix.themes.base import Theme
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
 
-class DrawerComponent(RadixPrimitiveComponentWithClassName):
+class DrawerComponent(RadixPrimitiveComponent):
     """A Drawer component."""
 
     library = "vaul"
@@ -31,38 +33,33 @@ class DrawerRoot(DrawerComponent):
 
     tag = "Drawer.Root"
 
+    alias = "Vaul" + tag
+
     # Whether the drawer is open or not.
     open: Var[bool]
 
-    # Enable background scaling,
-    # it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
+    # Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
     should_scale_background: Var[bool]
 
     # Number between 0 and 1 that determines when the drawer should be closed.
     close_threshold: Var[float]
 
-    # Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible.
-    # Also Accept px values, which doesn't take screen height into account.
+    # Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
     snap_points: Optional[List[Union[str, float]]]
 
-    # Index of a snapPoint from which the overlay fade should be applied.
-    # Defaults to the last snap point.
-    # TODO: will it accept -1 then?
+    # Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
     fade_from_index: Var[int]
 
     # Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
     scroll_lock_timeout: Var[int]
 
-    # When `False`, it allows to interact with elements outside of the drawer without closing it.
-    # Defaults to `True`.
+    # When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
     modal: Var[bool]
 
     # Direction of the drawer. Defaults to `"bottom"`
     direction: Var[LiteralDirectionType]
 
-    # When `True`, it prevents scroll restoration
-    # when the drawer is closed after a navigation happens inside of it.
-    # Defaults to `True`.
+    # When `True`, it prevents scroll restoration. Defaults to `True`.
     preventScrollRestoration: Var[bool]
 
     def get_event_triggers(self) -> Dict[str, Any]:
@@ -82,7 +79,10 @@ class DrawerTrigger(DrawerComponent):
 
     tag = "Drawer.Trigger"
 
-    as_child: Var[bool]
+    alias = "Vaul" + tag
+
+    # Defaults to true, if the first child acts as the trigger.
+    as_child: Var[bool] = True  # type: ignore
 
 
 class DrawerPortal(DrawerComponent):
@@ -90,6 +90,8 @@ class DrawerPortal(DrawerComponent):
 
     tag = "Drawer.Portal"
 
+    alias = "Vaul" + tag
+
 
 # Based on https://www.radix-ui.com/primitives/docs/components/dialog#content
 class DrawerContent(DrawerComponent):
@@ -97,6 +99,8 @@ class DrawerContent(DrawerComponent):
 
     tag = "Drawer.Content"
 
+    alias = "Vaul" + tag
+
     # Style set partially based on the source code at https://ui.shadcn.com/docs/components/drawer
     def _get_style(self) -> dict:
         """Get the style for the component.
@@ -115,12 +119,7 @@ class DrawerContent(DrawerComponent):
         }
         style = self.style or {}
         base_style.update(style)
-        self.style.update(
-            {
-                "css": base_style,
-            }
-        )
-        return self.style
+        return {"css": base_style}
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -139,12 +138,33 @@ class DrawerContent(DrawerComponent):
             EventTriggers.ON_INTERACT_OUTSIDE: lambda e0: [e0.target.value],
         }
 
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a Drawer Content.
+         We wrap the Drawer content in an `rx.theme` to make radix themes definitions available to
+         rendered div in the DOM. This is because Vaul Drawer injects the Drawer overlay content in a sibling
+         div to the root div rendered by radix which contains styling definitions. Wrapping in `rx.theme`
+         makes the styling available to the overlay.
+
+        Args:
+            *children: The list of children to use.
+            **props: Additional properties to apply to the drawer content.
+
+        Returns:
+                 The drawer content.
+        """
+        comp = super().create(*children, **props)
+
+        return Theme.create(comp)
+
 
 class DrawerOverlay(DrawerComponent):
     """A layer that covers the inert portion of the view when the dialog is open."""
 
     tag = "Drawer.Overlay"
 
+    alias = "Vaul" + tag
+
     # Style set based on the source code at https://ui.shadcn.com/docs/components/drawer
     def _get_style(self) -> dict:
         """Get the style for the component.
@@ -159,16 +179,11 @@ class DrawerOverlay(DrawerComponent):
             "bottom": "0",
             "top": "0",
             "z_index": 50,
-            "background": "rgba(0, 0, 0, 0.8)",
+            "background": "rgba(0, 0, 0, 0.5)",
         }
         style = self.style or {}
         base_style.update(style)
-        self.style.update(
-            {
-                "css": base_style,
-            }
-        )
-        return self.style
+        return {"css": base_style}
 
 
 class DrawerClose(DrawerComponent):
@@ -176,12 +191,16 @@ class DrawerClose(DrawerComponent):
 
     tag = "Drawer.Close"
 
+    alias = "Vaul" + tag
+
 
 class DrawerTitle(DrawerComponent):
     """A title for the drawer."""
 
     tag = "Drawer.Title"
 
+    alias = "Vaul" + tag
+
     # Style set based on the source code at https://ui.shadcn.com/docs/components/drawer
     def _get_style(self) -> dict:
         """Get the style for the component.
@@ -197,12 +216,7 @@ class DrawerTitle(DrawerComponent):
         }
         style = self.style or {}
         base_style.update(style)
-        self.style.update(
-            {
-                "css": base_style,
-            }
-        )
-        return self.style
+        return {"css": base_style}
 
 
 class DrawerDescription(DrawerComponent):
@@ -210,6 +224,8 @@ class DrawerDescription(DrawerComponent):
 
     tag = "Drawer.Description"
 
+    alias = "Vaul" + tag
+
     # Style set based on the source code at https://ui.shadcn.com/docs/components/drawer
     def _get_style(self) -> dict:
         """Get the style for the component.
@@ -222,19 +238,20 @@ class DrawerDescription(DrawerComponent):
         }
         style = self.style or {}
         base_style.update(style)
-        self.style.update(
-            {
-                "css": base_style,
-            }
-        )
-        return self.style
+        return {"css": base_style}
 
 
-drawer_root = DrawerRoot.create
-drawer_trigger = DrawerTrigger.create
-drawer_portal = DrawerPortal.create
-drawer_content = DrawerContent.create
-drawer_overlay = DrawerOverlay.create
-drawer_close = DrawerClose.create
-drawer_title = DrawerTitle.create
-drawer_description = DrawerDescription.create
+class Drawer(ComponentNamespace):
+    """A namespace for Drawer components."""
+
+    root = __call__ = staticmethod(DrawerRoot.create)
+    trigger = staticmethod(DrawerTrigger.create)
+    portal = staticmethod(DrawerPortal.create)
+    content = staticmethod(DrawerContent.create)
+    overlay = staticmethod(DrawerOverlay.create)
+    close = staticmethod(DrawerClose.create)
+    title = staticmethod(DrawerTitle.create)
+    description = staticmethod(DrawerDescription.create)
+
+
+drawer = Drawer()
diff --git a/reflex/components/radix/primitives/drawer.pyi b/reflex/components/radix/primitives/drawer.pyi
index 20b3b36ed..ac58d9a7e 100644
--- a/reflex/components/radix/primitives/drawer.pyi
+++ b/reflex/components/radix/primitives/drawer.pyi
@@ -8,11 +8,13 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, List, Literal, Optional, Union
-from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
+from reflex.components.component import ComponentNamespace
+from reflex.components.radix.primitives.base import RadixPrimitiveComponent
+from reflex.components.radix.themes.base import Theme
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-class DrawerComponent(RadixPrimitiveComponentWithClassName):
+class DrawerComponent(RadixPrimitiveComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -24,7 +26,6 @@ class DrawerComponent(RadixPrimitiveComponentWithClassName):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -83,7 +84,6 @@ class DrawerComponent(RadixPrimitiveComponentWithClassName):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -124,7 +124,6 @@ class DrawerRoot(DrawerComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -181,21 +180,20 @@ class DrawerRoot(DrawerComponent):
         Args:
             *children: The children of the component.
             open: Whether the drawer is open or not.
-            should_scale_background: Enable background scaling,  it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
+            should_scale_background: Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
             close_threshold: Number between 0 and 1 that determines when the drawer should be closed.
-            snap_points: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible.  Also Accept px values, which doesn't take screen height into account.
-            fade_from_index: Index of a snapPoint from which the overlay fade should be applied.  Defaults to the last snap point.  TODO: will it accept -1 then?
+            snap_points: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
+            fade_from_index: Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
             scroll_lock_timeout: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
-            modal: When `False`, it allows to interact with elements outside of the drawer without closing it.  Defaults to `True`.
+            modal: When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
             direction: Direction of the drawer. Defaults to `"bottom"`
-            preventScrollRestoration: When `True`, it prevents scroll restoration  when the drawer is closed after a navigation happens inside of it.  Defaults to `True`.
+            preventScrollRestoration: When `True`, it prevents scroll restoration. Defaults to `True`.
             as_child: Change the default rendered element for the one passed as a child.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -219,7 +217,6 @@ class DrawerTrigger(DrawerComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -278,7 +275,6 @@ class DrawerTrigger(DrawerComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -302,7 +298,6 @@ class DrawerPortal(DrawerComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -361,7 +356,6 @@ class DrawerPortal(DrawerComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -386,7 +380,6 @@ class DrawerContent(DrawerComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -450,25 +443,25 @@ class DrawerContent(DrawerComponent):
         ] = None,
         **props
     ) -> "DrawerContent":
-        """Create the component.
+        """Create a Drawer Content.
+         We wrap the Drawer content in an `rx.theme` to make radix themes definitions available to
+         rendered div in the DOM. This is because Vaul Drawer injects the Drawer overlay content in a sibling
+         div to the root div rendered by radix which contains styling definitions. Wrapping in `rx.theme`
+         makes the styling available to the overlay.
 
         Args:
-            *children: The children of the component.
+            *children: The list of children to use.
             as_child: Change the default rendered element for the one passed as a child.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: Additional properties to apply to the drawer content.
 
         Returns:
-            The component.
-
-        Raises:
-            TypeError: If an invalid child is passed.
+                 The drawer content.
         """
         ...
 
@@ -484,7 +477,6 @@ class DrawerOverlay(DrawerComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -543,7 +535,6 @@ class DrawerOverlay(DrawerComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -567,7 +558,6 @@ class DrawerClose(DrawerComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -626,7 +616,6 @@ class DrawerClose(DrawerComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -650,7 +639,6 @@ class DrawerTitle(DrawerComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -709,7 +697,6 @@ class DrawerTitle(DrawerComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -733,7 +720,6 @@ class DrawerDescription(DrawerComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -792,7 +778,6 @@ class DrawerDescription(DrawerComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -804,11 +789,118 @@ class DrawerDescription(DrawerComponent):
         """
         ...
 
-drawer_root = DrawerRoot.create
-drawer_trigger = DrawerTrigger.create
-drawer_portal = DrawerPortal.create
-drawer_content = DrawerContent.create
-drawer_overlay = DrawerOverlay.create
-drawer_close = DrawerClose.create
-drawer_title = DrawerTitle.create
-drawer_description = DrawerDescription.create
+class Drawer(ComponentNamespace):
+    root = staticmethod(DrawerRoot.create)
+    trigger = staticmethod(DrawerTrigger.create)
+    portal = staticmethod(DrawerPortal.create)
+    content = staticmethod(DrawerContent.create)
+    overlay = staticmethod(DrawerOverlay.create)
+    close = staticmethod(DrawerClose.create)
+    title = staticmethod(DrawerTitle.create)
+    description = staticmethod(DrawerDescription.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        open: Optional[Union[Var[bool], bool]] = None,
+        should_scale_background: Optional[Union[Var[bool], bool]] = None,
+        close_threshold: Optional[Union[Var[float], float]] = None,
+        snap_points: Optional[List[Union[str, float]]] = None,
+        fade_from_index: Optional[Union[Var[int], int]] = None,
+        scroll_lock_timeout: Optional[Union[Var[int], int]] = None,
+        modal: Optional[Union[Var[bool], bool]] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["top", "bottom", "left", "right"]],
+                Literal["top", "bottom", "left", "right"],
+            ]
+        ] = None,
+        preventScrollRestoration: Optional[Union[Var[bool], bool]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DrawerRoot":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            open: Whether the drawer is open or not.
+            should_scale_background: Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
+            close_threshold: Number between 0 and 1 that determines when the drawer should be closed.
+            snap_points: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
+            fade_from_index: Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
+            scroll_lock_timeout: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
+            modal: When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
+            direction: Direction of the drawer. Defaults to `"bottom"`
+            preventScrollRestoration: When `True`, it prevents scroll restoration. Defaults to `True`.
+            as_child: Change the default rendered element for the one passed as a child.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+drawer = Drawer()
diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py
index 31939fa06..d6b57799a 100644
--- a/reflex/components/radix/primitives/form.py
+++ b/reflex/components/radix/primitives/form.py
@@ -7,8 +7,8 @@ from typing import Any, Dict, Iterator, Literal
 
 from jinja2 import Environment
 
-from reflex.components.component import Component
-from reflex.components.radix.themes.components.textfield import TextFieldInput
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.radix.themes.components.text_field import TextFieldInput
 from reflex.components.tags.tag import Tag
 from reflex.constants.base import Dirs
 from reflex.constants.event import EventTriggers
@@ -289,14 +289,24 @@ class FormSubmit(FormComponent):
     alias = "RadixFormSubmit"
 
 
-# High Level API
-Form = FormRoot
+# This class is created mainly for reflex-web docs.
+class Form(FormRoot):
+    """The Form component."""
 
-form_root = FormRoot.create
-form_field = FormField.create
-form_label = FormLabel.create
-form_control = FormControl.create
-form_message = FormMessage.create
-form_validity_state = FormValidityState.create
-form_submit = FormSubmit.create
-form = Form.create
+    pass
+
+
+class FormNamespace(ComponentNamespace):
+    """Form components."""
+
+    root = staticmethod(FormRoot.create)
+    control = staticmethod(FormControl.create)
+    field = staticmethod(FormField.create)
+    label = staticmethod(FormLabel.create)
+    message = staticmethod(FormMessage.create)
+    submit = staticmethod(FormSubmit.create)
+    validity_state = staticmethod(FormValidityState.create)
+    __call__ = staticmethod(Form.create)
+
+
+form = FormNamespace()
diff --git a/reflex/components/radix/primitives/form.pyi b/reflex/components/radix/primitives/form.pyi
index 11f7bf058..e80b4214c 100644
--- a/reflex/components/radix/primitives/form.pyi
+++ b/reflex/components/radix/primitives/form.pyi
@@ -10,8 +10,8 @@ from reflex.style import Style
 from hashlib import md5
 from typing import Any, Dict, Iterator, Literal
 from jinja2 import Environment
-from reflex.components.component import Component
-from reflex.components.radix.themes.components.textfield import TextFieldInput
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.radix.themes.components.text_field import TextFieldInput
 from reflex.components.tags.tag import Tag
 from reflex.constants.base import Dirs
 from reflex.constants.event import EventTriggers
@@ -38,7 +38,6 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -97,7 +96,6 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -124,7 +122,6 @@ class FormRoot(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -191,7 +188,6 @@ class FormRoot(FormComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the form.
 
@@ -214,7 +210,6 @@ class FormField(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -275,7 +270,6 @@ class FormField(FormComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -299,7 +293,6 @@ class FormLabel(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -358,7 +351,6 @@ class FormLabel(FormComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -382,7 +374,6 @@ class FormControl(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -441,7 +432,6 @@ class FormControl(FormComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the form.
 
@@ -511,7 +501,6 @@ class FormMessage(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -573,7 +562,6 @@ class FormMessage(FormComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -597,7 +585,6 @@ class FormValidityState(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -656,7 +643,6 @@ class FormValidityState(FormComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -680,7 +666,6 @@ class FormSubmit(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -739,7 +724,6 @@ class FormSubmit(FormComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -751,12 +735,188 @@ class FormSubmit(FormComponent):
         """
         ...
 
-Form = FormRoot
-form_root = FormRoot.create
-form_field = FormField.create
-form_label = FormLabel.create
-form_control = FormControl.create
-form_message = FormMessage.create
-form_validity_state = FormValidityState.create
-form_submit = FormSubmit.create
-form = Form.create
+class Form(FormRoot):
+    pass
+
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        reset_on_submit: Optional[Union[Var[bool], bool]] = None,
+        handle_submit_unique_name: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_clear_server_errors: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_submit: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Form":
+        """Create a form component.
+
+        Args:
+            *children: The children of the form.
+            reset_on_submit: If true, the form will be cleared after submit.
+            handle_submit_unique_name: The name used to make this form's submit handler function unique.
+            as_child: Change the default rendered element for the one passed as a child.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the form.
+
+        Returns:
+            The form component.
+        """
+        ...
+
+class FormNamespace(ComponentNamespace):
+    root = staticmethod(FormRoot.create)
+    control = staticmethod(FormControl.create)
+    field = staticmethod(FormField.create)
+    label = staticmethod(FormLabel.create)
+    message = staticmethod(FormMessage.create)
+    submit = staticmethod(FormSubmit.create)
+    validity_state = staticmethod(FormValidityState.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        reset_on_submit: Optional[Union[Var[bool], bool]] = None,
+        handle_submit_unique_name: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_clear_server_errors: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_submit: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Form":
+        """Create a form component.
+
+        Args:
+            *children: The children of the form.
+            reset_on_submit: If true, the form will be cleared after submit.
+            handle_submit_unique_name: The name used to make this form's submit handler function unique.
+            as_child: Change the default rendered element for the one passed as a child.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the form.
+
+        Returns:
+            The form component.
+        """
+        ...
+
+form = FormNamespace()
diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py
index d130883b2..1b03a8d98 100644
--- a/reflex/components/radix/primitives/progress.py
+++ b/reflex/components/radix/primitives/progress.py
@@ -4,7 +4,8 @@ from __future__ import annotations
 
 from typing import Optional
 
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
 from reflex.style import Style
 from reflex.vars import Var
@@ -33,10 +34,11 @@ class ProgressRoot(ProgressComponent):
             {
                 "position": "relative",
                 "overflow": "hidden",
-                "background": "black",
+                "background": "var(--gray-a3)",
                 "border_radius": "99999px",
-                "width": "300px",
-                "height": "25px",
+                "width": "100%",
+                "height": "20px",
+                "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
                 **self.style,
             }
         )
@@ -52,35 +54,51 @@ class ProgressIndicator(ProgressComponent):
     # The current progress value.
     value: Var[Optional[int]]
 
+    # The maximum progress value.
+    max: Var[Optional[int]]
+
     def _apply_theme(self, theme: Component):
         self.style = Style(
             {
-                "background-color": "white",
+                "background-color": "var(--accent-9)",
                 "width": "100%",
                 "height": "100%",
-                "transition": f"transform 660ms linear",
+                f"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
                 "&[data_state='loading']": {
-                    "transition": f"transform 660ms linear",
+                    "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
                 },
-                "transform": f"translateX(-{100 - self.value}%)",  # type: ignore
+                "transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))",  # type: ignore
+                "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
             }
         )
 
 
-progress_root = ProgressRoot.create
-progress_indicator = ProgressIndicator.create
+class Progress(ComponentNamespace):
+    """High level API for progress bar."""
+
+    root = staticmethod(ProgressRoot.create)
+    indicator = staticmethod(ProgressIndicator.create)
+
+    @staticmethod
+    def __call__(width: Optional[str] = "100%", **props) -> Component:
+        """High level API for progress bar.
+
+        Args:
+            width: The width of the progerss bar
+            **props: The props of the progress bar
+
+        Returns:
+            The progress bar.
+        """
+        style = props.setdefault("style", {})
+        style.update({"width": width})
+
+        return ProgressRoot.create(
+            ProgressIndicator.create(
+                value=props.get("value"), max=props.get("max", 100)
+            ),
+            **props,
+        )
 
 
-def progress(**props):
-    """High level API for progress bar.
-
-    Args:
-        **props: The props of the progress bar
-
-    Returns:
-        The progress bar.
-    """
-    return progress_root(
-        progress_indicator(value=props.get("value")),
-        **props,
-    )
+progress = Progress()
diff --git a/reflex/components/radix/primitives/progress.pyi b/reflex/components/radix/primitives/progress.pyi
index 27b3a7df4..61b8d5edd 100644
--- a/reflex/components/radix/primitives/progress.pyi
+++ b/reflex/components/radix/primitives/progress.pyi
@@ -8,7 +8,8 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Optional
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
 from reflex.style import Style
 from reflex.vars import Var
@@ -25,7 +26,6 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -84,7 +84,6 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -110,7 +109,6 @@ class ProgressRoot(ProgressComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -171,7 +169,6 @@ class ProgressRoot(ProgressComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -190,13 +187,13 @@ class ProgressIndicator(ProgressComponent):
         cls,
         *children,
         value: Optional[Union[Var[Optional[int]], Optional[int]]] = None,
+        max: Optional[Union[Var[Optional[int]], Optional[int]]] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -250,13 +247,13 @@ class ProgressIndicator(ProgressComponent):
         Args:
             *children: The children of the component.
             value: The current progress value.
+            max: The maximum progress value.
             as_child: Change the default rendered element for the one passed as a child.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -268,7 +265,11 @@ class ProgressIndicator(ProgressComponent):
         """
         ...
 
-progress_root = ProgressRoot.create
-progress_indicator = ProgressIndicator.create
+class Progress(ComponentNamespace):
+    root = staticmethod(ProgressRoot.create)
+    indicator = staticmethod(ProgressIndicator.create)
 
-def progress(**props): ...
+    @staticmethod
+    def __call__(width: Optional[str] = "100%", **props) -> Component: ...
+
+progress = Progress()
diff --git a/reflex/components/radix/primitives/slider.py b/reflex/components/radix/primitives/slider.py
index 384b58f90..94560c3f0 100644
--- a/reflex/components/radix/primitives/slider.py
+++ b/reflex/components/radix/primitives/slider.py
@@ -4,7 +4,7 @@ from __future__ import annotations
 
 from typing import Any, Dict, List, Literal
 
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
 from reflex.style import Style
 from reflex.vars import Var
@@ -148,34 +148,38 @@ class SliderThumb(SliderComponent):
         )
 
 
-slider_root = SliderRoot.create
-slider_track = SliderTrack.create
-slider_range = SliderRange.create
-slider_thumb = SliderThumb.create
+class Slider(ComponentNamespace):
+    """High level API for slider."""
+
+    root = staticmethod(SliderRoot.create)
+    track = staticmethod(SliderTrack.create)
+    range = staticmethod(SliderRange.create)
+    thumb = staticmethod(SliderThumb.create)
+
+    @staticmethod
+    def __call__(**props) -> Component:
+        """High level API for slider.
+
+        Args:
+            **props: The props of the slider.
+
+        Returns:
+            A slider component.
+        """
+        track = SliderTrack.create(SliderRange.create())
+        # if default_value is not set, the thumbs will not render properly but the slider will still work
+        if "default_value" in props:
+            children = [
+                track,
+                *[SliderThumb.create() for _ in props.get("default_value", [])],
+            ]
+        else:
+            children = [
+                track,
+                #     Foreach.create(props.get("value"), lambda e: SliderThumb.create()),  # foreach doesn't render Thumbs properly
+            ]
+
+        return SliderRoot.create(*children, **props)
 
 
-def slider(
-    **props,
-) -> Component:
-    """High level API for slider.
-
-    Args:
-        **props: The props of the slider.
-
-    Returns:
-        A slider component.
-    """
-    track = SliderTrack.create(SliderRange.create())
-    # if default_value is not set, the thumbs will not render properly but the slider will still work
-    if "default_value" in props:
-        children = [
-            track,
-            *[SliderThumb.create() for _ in props.get("default_value", [])],
-        ]
-    else:
-        children = [
-            track,
-            #     Foreach.create(props.get("value"), lambda e: SliderThumb.create()),  # foreach doesn't render Thumbs properly
-        ]
-
-    return slider_root(*children, **props)
+slider = Slider()
diff --git a/reflex/components/radix/primitives/slider.pyi b/reflex/components/radix/primitives/slider.pyi
index 3c72de21d..62940118f 100644
--- a/reflex/components/radix/primitives/slider.pyi
+++ b/reflex/components/radix/primitives/slider.pyi
@@ -8,7 +8,7 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, List, Literal
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
 from reflex.style import Style
 from reflex.vars import Var
@@ -28,7 +28,6 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -87,7 +86,6 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -128,7 +126,6 @@ class SliderRoot(SliderComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -193,7 +190,6 @@ class SliderRoot(SliderComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -217,7 +213,6 @@ class SliderTrack(SliderComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -276,7 +271,6 @@ class SliderTrack(SliderComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -300,7 +294,6 @@ class SliderRange(SliderComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -359,7 +352,6 @@ class SliderRange(SliderComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -383,7 +375,6 @@ class SliderThumb(SliderComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -442,7 +433,6 @@ class SliderThumb(SliderComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -454,9 +444,13 @@ class SliderThumb(SliderComponent):
         """
         ...
 
-slider_root = SliderRoot.create
-slider_track = SliderTrack.create
-slider_range = SliderRange.create
-slider_thumb = SliderThumb.create
+class Slider(ComponentNamespace):
+    root = staticmethod(SliderRoot.create)
+    track = staticmethod(SliderTrack.create)
+    range = staticmethod(SliderRange.create)
+    thumb = staticmethod(SliderThumb.create)
 
-def slider(**props) -> Component: ...
+    @staticmethod
+    def __call__(**props) -> Component: ...
+
+slider = Slider()
diff --git a/reflex/components/radix/themes/__init__.py b/reflex/components/radix/themes/__init__.py
index 7ecdfb749..e1d39fb52 100644
--- a/reflex/components/radix/themes/__init__.py
+++ b/reflex/components/radix/themes/__init__.py
@@ -1,8 +1,7 @@
 """Namespace for components provided by the @radix-ui/themes library."""
-from .base import Theme, ThemePanel
+from .base import theme as theme
+from .base import theme_panel as theme_panel
+from .color_mode import color_mode_var_and_namespace as color_mode
 from .components import *
 from .layout import *
 from .typography import *
-
-theme = Theme.create
-theme_panel = ThemePanel.create
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index 4c4d5c85d..2b4af6f83 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Literal
+from typing import Any, Dict, Literal
 
 from reflex.components import Component
 from reflex.components.tags import Tag
@@ -11,7 +11,7 @@ from reflex.vars import Var
 
 LiteralAlign = Literal["start", "center", "end", "baseline", "stretch"]
 LiteralJustify = Literal["start", "center", "end", "between"]
-LiteralSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
+LiteralSpacing = Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
 LiteralVariant = Literal["classic", "solid", "soft", "surface", "outline", "ghost"]
 LiteralAppearance = Literal["inherit", "light", "dark"]
 LiteralGrayColor = Literal["gray", "mauve", "slate", "sage", "olive", "sand", "auto"]
@@ -52,25 +52,25 @@ class CommonMarginProps(Component):
     """Many radix-themes elements accept shorthand margin props."""
 
     # Margin: "0" - "9"
-    m: Var[LiteralSize]
+    m: Var[LiteralSpacing]
 
     # Margin horizontal: "0" - "9"
-    mx: Var[LiteralSize]
+    mx: Var[LiteralSpacing]
 
     # Margin vertical: "0" - "9"
-    my: Var[LiteralSize]
+    my: Var[LiteralSpacing]
 
     # Margin top: "0" - "9"
-    mt: Var[LiteralSize]
+    mt: Var[LiteralSpacing]
 
     # Margin right: "0" - "9"
-    mr: Var[LiteralSize]
+    mr: Var[LiteralSpacing]
 
     # Margin bottom: "0" - "9"
-    mb: Var[LiteralSize]
+    mb: Var[LiteralSpacing]
 
     # Margin left: "0" - "9"
-    ml: Var[LiteralSize]
+    ml: Var[LiteralSpacing]
 
 
 class RadixThemesComponent(Component):
@@ -78,12 +78,13 @@ class RadixThemesComponent(Component):
 
     library = "@radix-ui/themes@^2.0.0"
 
+    # "Fake" prop color_scheme is used to avoid shadowing CSS prop "color".
+    _rename_props: Dict[str, str] = {"colorScheme": "color"}
+
     @classmethod
     def create(
         cls,
         *children,
-        color: Var[str] = None,  # type: ignore
-        color_scheme: Var[LiteralAccentColor] = None,  # type: ignore
         **props,
     ) -> Component:
         """Create a new component instance.
@@ -93,19 +94,11 @@ class RadixThemesComponent(Component):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             **props: Component properties.
 
         Returns:
             A new component instance.
         """
-        if color is not None:
-            style = props.get("style", {})
-            style["color"] = color
-            props["style"] = style
-        if color_scheme is not None:
-            props["color"] = color_scheme
         component = super().create(*children, **props)
         if component.library is None:
             component.library = RadixThemesComponent.__fields__["library"].default
@@ -114,21 +107,6 @@ class RadixThemesComponent(Component):
         )
         return component
 
-    @classmethod
-    def get_fields(cls) -> dict[str, Any]:
-        """Get the pydantic fields for the component.
-
-        Returns:
-            Mapping of field name to ModelField instance.
-        """
-        fields = super().get_fields()
-        if "color_scheme" in fields:
-            # Treat "color" as a direct prop, so the translation of reflex "color_scheme"
-            # to "color" does not put the "color_scheme" value into the "style" prop.
-            fields["color"] = fields.pop("color_scheme")
-            fields["color"].required = False
-        return fields
-
     @staticmethod
     def _get_app_wrap_components() -> dict[tuple[int, str], Component]:
         return {
@@ -169,6 +147,24 @@ class Theme(RadixThemesComponent):
     # Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%". Defaults to "100%"
     scaling: Var[LiteralScaling]
 
+    @classmethod
+    def create(
+        cls, *children, color_mode: LiteralAppearance | None = None, **props
+    ) -> Component:
+        """Create a new Radix Theme specification.
+
+        Args:
+            *children: Child components.
+            color_mode: map to appearance prop.
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        if color_mode is not None:
+            props["appearance"] = color_mode
+        return super().create(*children, **props)
+
     def _get_imports(self) -> imports.ImportDict:
         return imports.merge_imports(
             super()._get_imports(),
@@ -211,3 +207,7 @@ class RadixThemesColorModeProvider(Component):
     library = "/components/reflex/radix_themes_color_mode_provider.js"
     tag = "RadixThemesColorModeProvider"
     is_default = True
+
+
+theme = Theme.create
+theme_panel = ThemePanel.create
diff --git a/reflex/components/radix/themes/base.pyi b/reflex/components/radix/themes/base.pyi
index fd6652500..0ae5812e5 100644
--- a/reflex/components/radix/themes/base.pyi
+++ b/reflex/components/radix/themes/base.pyi
@@ -7,7 +7,7 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Any, Literal
+from typing import Any, Dict, Literal
 from reflex.components import Component
 from reflex.components.tags import Tag
 from reflex.utils import imports
@@ -15,7 +15,7 @@ from reflex.vars import Var
 
 LiteralAlign = Literal["start", "center", "end", "baseline", "stretch"]
 LiteralJustify = Literal["start", "center", "end", "between"]
-LiteralSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
+LiteralSpacing = Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
 LiteralVariant = Literal["classic", "solid", "soft", "surface", "outline", "ghost"]
 LiteralAppearance = Literal["inherit", "light", "dark"]
 LiteralGrayColor = Literal["gray", "mauve", "slate", "sage", "olive", "sand", "auto"]
@@ -59,44 +59,44 @@ class CommonMarginProps(Component):
         *children,
         m: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         mx: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         my: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         mt: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         mr: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         mb: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         ml: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         style: Optional[Style] = None,
@@ -104,7 +104,6 @@ class CommonMarginProps(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -169,7 +168,6 @@ class CommonMarginProps(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -187,75 +185,11 @@ class RadixThemesComponent(Component):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -311,14 +245,11 @@ class RadixThemesComponent(Component):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -326,8 +257,6 @@ class RadixThemesComponent(Component):
             A new component instance.
         """
         ...
-    @classmethod
-    def get_fields(cls) -> dict[str, Any]: ...
 
 class Theme(RadixThemesComponent):
     @overload
@@ -335,69 +264,7 @@ class Theme(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
+        color_mode: Optional[LiteralAppearance | None] = None,
         has_background: Optional[Union[Var[bool], bool]] = None,
         appearance: Optional[
             Union[
@@ -493,7 +360,6 @@ class Theme(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -542,15 +408,11 @@ class Theme(RadixThemesComponent):
         ] = None,
         **props
     ) -> "Theme":
-        """Create a new component instance.
-
-        Will prepend "RadixThemes" to the component tag to avoid conflicts with
-        other UI libraries for common names, like Text and Button.
+        """Create a new Radix Theme specification.
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
+            color_mode: map to appearance prop.
             has_background: Whether to apply the themes background color to the theme node. Defaults to True.
             appearance: Override light or dark mode theme: "inherit" | "light" | "dark". Defaults to "inherit".
             accent_color: The color used for default buttons, typography, backgrounds, etc
@@ -563,7 +425,6 @@ class Theme(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -578,76 +439,12 @@ class ThemePanel(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         default_open: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -703,15 +500,12 @@ class ThemePanel(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             default_open: Whether the panel is open. Defaults to False.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -731,7 +525,6 @@ class RadixThemesColorModeProvider(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -789,7 +582,6 @@ class RadixThemesColorModeProvider(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -800,3 +592,6 @@ class RadixThemesColorModeProvider(Component):
             TypeError: If an invalid child is passed.
         """
         ...
+
+theme = Theme.create
+theme_panel = ThemePanel.create
diff --git a/reflex/components/radix/themes/color_mode.py b/reflex/components/radix/themes/color_mode.py
new file mode 100644
index 000000000..b6b739870
--- /dev/null
+++ b/reflex/components/radix/themes/color_mode.py
@@ -0,0 +1,109 @@
+"""A switch component for toggling color_mode.
+
+To style components based on color mode, use style props with `color_mode_cond`:
+
+```
+rx.text(
+    "Hover over me",
+    _hover={
+        "background": rx.color_mode_cond(
+            light="var(--accent-2)",
+            dark="var(--accent-4)",
+        ),
+    },
+)
+```
+"""
+from __future__ import annotations
+
+import dataclasses
+
+from reflex.components.component import BaseComponent
+from reflex.components.core.cond import Cond, color_mode_cond
+from reflex.components.lucide.icon import Icon
+from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
+from reflex.vars import BaseVar
+
+from .components.button import Button
+from .components.switch import Switch
+
+DEFAULT_LIGHT_ICON: Icon = Icon.create(tag="sun")
+DEFAULT_DARK_ICON: Icon = Icon.create(tag="moon")
+
+
+class ColorModeIcon(Cond):
+    """Displays the current color mode as an icon."""
+
+    @classmethod
+    def create(
+        cls,
+        light_component: BaseComponent | None = None,
+        dark_component: BaseComponent | None = None,
+    ):
+        """Create an icon component based on color_mode.
+
+        Args:
+            light_component: the component to display when color mode is default
+            dark_component: the component to display when color mode is dark (non-default)
+
+        Returns:
+            The conditionally rendered component
+        """
+        return color_mode_cond(
+            light=light_component or DEFAULT_LIGHT_ICON,
+            dark=dark_component or DEFAULT_DARK_ICON,
+        )
+
+
+class ColorModeSwitch(Switch):
+    """Switch for toggling light / dark mode via toggle_color_mode."""
+
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a switch component bound to color_mode.
+
+        Args:
+            *children: The children of the component.
+            **props: The props to pass to the component.
+
+        Returns:
+            The switch component.
+        """
+        return Switch.create(
+            *children,
+            is_checked=color_mode != LIGHT_COLOR_MODE,
+            on_change=toggle_color_mode,
+            **props,
+        )
+
+
+class ColorModeButton(Button):
+    """Button for toggling chakra light / dark mode via toggle_color_mode."""
+
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a button component that calls toggle_color_mode on click.
+
+        Args:
+            *children: The children of the component.
+            **props: The props to pass to the component.
+
+        Returns:
+            The button component.
+        """
+        return Button.create(
+            *children,
+            on_click=toggle_color_mode,
+            **props,
+        )
+
+
+class ColorModeNamespace(BaseVar):
+    """Namespace for color mode components."""
+
+    icon = staticmethod(ColorModeIcon.create)
+    switch = staticmethod(ColorModeSwitch.create)
+    button = staticmethod(ColorModeButton.create)
+
+
+color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode))
diff --git a/reflex/components/radix/themes/color_mode.pyi b/reflex/components/radix/themes/color_mode.pyi
new file mode 100644
index 000000000..e8db4bb77
--- /dev/null
+++ b/reflex/components/radix/themes/color_mode.pyi
@@ -0,0 +1,528 @@
+"""Stub file for reflex/components/radix/themes/color_mode.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+import dataclasses
+from reflex.components.component import BaseComponent
+from reflex.components.core.cond import Cond, color_mode_cond
+from reflex.components.lucide.icon import Icon
+from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
+from reflex.vars import BaseVar
+from .components.button import Button
+from .components.switch import Switch
+
+DEFAULT_LIGHT_ICON: Icon
+DEFAULT_DARK_ICON: Icon
+
+class ColorModeIcon(Cond):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        cond: Optional[Union[Var[Any], Any]] = None,
+        comp1: Optional[BaseComponent] = None,
+        comp2: Optional[BaseComponent] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ColorModeIcon":
+        """Create an icon component based on color_mode.
+
+        Args:
+            light_component: the component to display when color mode is default
+            dark_component: the component to display when color mode is dark (non-default)
+
+        Returns:
+            The conditionally rendered component
+        """
+        ...
+
+class ColorModeSwitch(Switch):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        default_checked: Optional[Union[Var[bool], bool]] = None,
+        checked: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "full"]], Literal["none", "small", "full"]
+            ]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ColorModeSwitch":
+        """Create a switch component bound to color_mode.
+
+        Args:
+            *children: The children of the component.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            default_checked: Whether the switch is checked by default
+            checked: Whether the switch is checked
+            disabled: If true, prevent the user from interacting with the switch
+            required: If true, the user must interact with the switch to submit the form
+            name: The name of the switch (when submitting a form)
+            value: The value associated with the "on" position
+            size: Switch size "1" - "4"
+            variant: Variant of switch: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for switch
+            high_contrast: Whether to render the switch with higher contrast color against background
+            radius: Override theme radius for switch: "none" | "small" | "full"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props to pass to the component.
+
+        Returns:
+            The switch component.
+        """
+        ...
+
+class ColorModeButton(Button):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
+                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        auto_focus: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        form: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        form_action: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_enc_type: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_method: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_no_validate: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_target: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        name: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        value: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ColorModeButton":
+        """Create a button component that calls toggle_color_mode on click.
+
+        Args:
+            *children: The children of the component.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            size: Button size "1" - "4"
+            variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
+            color_scheme: Override theme color for button
+            high_contrast: Whether to render the button with higher contrast color against background
+            radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
+            auto_focus: Automatically focuses the button when the page loads
+            disabled: Disables the button
+            form: Associates the button with a form (by id)
+            form_action: URL to send the form data to (for type="submit" buttons)
+            form_enc_type: How the form data should be encoded when submitting to the server (for type="submit" buttons)
+            form_method: HTTP method to use for sending form data (for type="submit" buttons)
+            form_no_validate: Bypasses form validation when submitting (for type="submit" buttons)
+            form_target: Specifies where to display the response after submitting the form (for type="submit" buttons)
+            name: Name of the button, used when sending form data
+            type: Type of the button (submit, reset, or button)
+            value: Value of the button, used when sending form data
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props to pass to the component.
+
+        Returns:
+            The button component.
+        """
+        ...
+
+class ColorModeNamespace(BaseVar):
+    icon = staticmethod(ColorModeIcon.create)
+    switch = staticmethod(ColorModeSwitch.create)
+    button = staticmethod(ColorModeButton.create)
+
+color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode))
diff --git a/reflex/components/radix/themes/components/__init__.py b/reflex/components/radix/themes/components/__init__.py
index 12b1105eb..55f7e02ae 100644
--- a/reflex/components/radix/themes/components/__init__.py
+++ b/reflex/components/radix/themes/components/__init__.py
@@ -1,216 +1,66 @@
 """Radix themes components."""
 
-from .alertdialog import (
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogRoot,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-)
-from .aspectratio import AspectRatio
-from .avatar import Avatar
-from .badge import Badge
-from .button import Button
-from .callout import Callout, CalloutIcon, CalloutRoot, CalloutText
-from .card import Card
-from .checkbox import Checkbox, HighLevelCheckbox
-from .contextmenu import (
-    ContextMenuContent,
-    ContextMenuItem,
-    ContextMenuRoot,
-    ContextMenuSeparator,
-    ContextMenuSub,
-    ContextMenuSubContent,
-    ContextMenuSubTrigger,
-    ContextMenuTrigger,
-)
-from .dialog import (
-    DialogClose,
-    DialogContent,
-    DialogDescription,
-    DialogRoot,
-    DialogTitle,
-    DialogTrigger,
-)
-from .dropdownmenu import (
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuRoot,
-    DropdownMenuSeparator,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
-    DropdownMenuTrigger,
-)
-from .hovercard import HoverCardContent, HoverCardRoot, HoverCardTrigger
-from .iconbutton import IconButton
-from .icons import Icon
-from .inset import Inset
-from .popover import PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger
-from .radiogroup import HighLevelRadioGroup, RadioGroupItem, RadioGroupRoot
-from .scrollarea import ScrollArea
-from .select import (
-    HighLevelSelect,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectLabel,
-    SelectRoot,
-    SelectSeparator,
-    SelectTrigger,
-)
-from .separator import Separator
-from .slider import Slider
-from .switch import Switch
-from .table import (
-    TableBody,
-    TableCell,
-    TableColumnHeaderCell,
-    TableHeader,
-    TableRoot,
-    TableRow,
-    TableRowHeaderCell,
-)
-from .tabs import TabsContent, TabsList, TabsRoot, TabsTrigger
-from .textarea import TextArea
-from .textfield import Input, TextFieldInput, TextFieldRoot, TextFieldSlot
-from .tooltip import Tooltip
+from .alert_dialog import alert_dialog as alert_dialog
+from .aspect_ratio import aspect_ratio as aspect_ratio
+from .avatar import avatar as avatar
+from .badge import badge as badge
+from .button import button as button
+from .callout import callout as callout
+from .card import card as card
+from .checkbox import checkbox as checkbox
+from .context_menu import context_menu as context_menu
+from .dialog import dialog as dialog
+from .dropdown_menu import dropdown_menu as dropdown_menu
+from .dropdown_menu import menu as menu
+from .hover_card import hover_card as hover_card
+from .icon_button import icon_button as icon_button
+from .inset import inset as inset
+from .popover import popover as popover
+from .radio_group import radio as radio
+from .radio_group import radio_group as radio_group
+from .scroll_area import scroll_area as scroll_area
+from .select import select as select
+from .separator import divider as divider
+from .separator import separator as separator
+from .slider import slider as slider
+from .switch import switch as switch
+from .table import table as table
+from .tabs import tabs as tabs
+from .text_area import text_area as text_area
+from .text_field import text_field as text_field
+from .tooltip import tooltip as tooltip
 
-# Alert Dialog
-alertdialog_root = AlertDialogRoot.create
-alertdialog_trigger = AlertDialogTrigger.create
-alertdialog_content = AlertDialogContent.create
-alertdialog_title = AlertDialogTitle.create
-alertdialog_description = AlertDialogDescription.create
-alertdialog_action = AlertDialogAction.create
-alertdialog_cancel = AlertDialogCancel.create
+input = text_field
 
-# Aspect Ratio
-aspect_ratio = AspectRatio.create
-
-# Avatar
-avatar = Avatar.create
-
-# Badge
-badge = Badge.create
-
-# Button
-button = Button.create
-
-# Callout
-callout_root = CalloutRoot.create
-callout_icon = CalloutIcon.create
-callout_text = CalloutText.create
-callout = Callout.create
-
-# Card
-card = Card.create
-
-# Checkbox
-checkbox = Checkbox.create
-checkbox_hl = HighLevelCheckbox.create
-
-# Context Menu
-contextmenu_root = ContextMenuRoot.create
-contextmenu_sub = ContextMenuSub.create
-contextmenu_trigger = ContextMenuTrigger.create
-contextmenu_content = ContextMenuContent.create
-contextmenu_sub_content = ContextMenuSubContent.create
-contextmenu_sub_trigger = ContextMenuSubTrigger.create
-contextmenu_item = ContextMenuItem.create
-contextmenu_separator = ContextMenuSeparator.create
-
-
-# Dialog
-dialog_root = DialogRoot.create
-dialog_trigger = DialogTrigger.create
-dialog_content = DialogContent.create
-dialog_title = DialogTitle.create
-dialog_description = DialogDescription.create
-dialog_close = DialogClose.create
-
-# Dropdown Menu
-dropdownmenu_root = DropdownMenuRoot.create
-dropdownmenu_trigger = DropdownMenuTrigger.create
-dropdownmenu_content = DropdownMenuContent.create
-dropdownmenu_sub = DropdownMenuSub.create
-dropdownmenu_sub_content = DropdownMenuSubContent.create
-dropdownmenu_sub_trigger = DropdownMenuSubTrigger.create
-dropdownmenu_item = DropdownMenuItem.create
-dropdownmenu_separator = DropdownMenuSeparator.create
-
-# Hover Card
-hovercard_root = HoverCardRoot.create
-hovercard_trigger = HoverCardTrigger.create
-hovercard_content = HoverCardContent.create
-
-# Icon
-icon = Icon.create
-
-# Icon Button
-icon_button = IconButton.create
-
-# Inset
-inset = Inset.create
-
-# Popover
-popover_root = PopoverRoot.create
-popover_trigger = PopoverTrigger.create
-popover_content = PopoverContent.create
-popover_close = PopoverClose.create
-
-# Radio Group
-radio_group_root = RadioGroupRoot.create
-radio_group_item = RadioGroupItem.create
-radio_group = HighLevelRadioGroup.create
-
-# Scroll Area
-scroll_area = ScrollArea.create
-
-# Select
-select_root = SelectRoot.create
-select_trigger = SelectTrigger.create
-select_content = SelectContent.create
-select_item = SelectItem.create
-select_separator = SelectSeparator.create
-select_group = SelectGroup.create
-select_label = SelectLabel.create
-select = HighLevelSelect.create
-
-# Separator
-separator = Separator.create
-
-# Slider
-slider = Slider.create
-
-# Switch
-switch = Switch.create
-
-# Table
-table_root = TableRoot.create
-table_header = TableHeader.create
-table_body = TableBody.create
-table_row = TableRow.create
-table_cell = TableCell.create
-table_column_header_cell = TableColumnHeaderCell.create
-table_row_header_cell = TableRowHeaderCell.create
-
-# Tabs
-tabs_root = TabsRoot.create
-tabs_list = TabsList.create
-tabs_trigger = TabsTrigger.create
-tabs_content = TabsContent.create
-
-# Text Area
-textarea = TextArea.create
-
-# Text Field
-textfield_root = TextFieldRoot.create
-textfield_input = TextFieldInput.create
-textfield_slot = TextFieldSlot.create
-input = Input.create
-
-# Tooltip
-tooltip = Tooltip.create
+__all__ = [
+    "alert_dialog",
+    "aspect_ratio",
+    "avatar",
+    "badge",
+    "button",
+    "callout",
+    "card",
+    "checkbox",
+    "context_menu",
+    "dialog",
+    "divider",
+    "dropdown_menu",
+    "hover_card",
+    "icon_button",
+    "input",
+    "inset",
+    "menu",
+    "popover",
+    "radio",
+    "radio_group",
+    "scroll_area",
+    "select",
+    "separator",
+    "slider",
+    "switch",
+    "table",
+    "tabs",
+    "text_area",
+    "text_field",
+    "tooltip",
+]
diff --git a/reflex/components/radix/themes/components/alertdialog.py b/reflex/components/radix/themes/components/alert_dialog.py
similarity index 82%
rename from reflex/components/radix/themes/components/alertdialog.py
rename to reflex/components/radix/themes/components/alert_dialog.py
index 884638091..81b8bb0af 100644
--- a/reflex/components/radix/themes/components/alertdialog.py
+++ b/reflex/components/radix/themes/components/alert_dialog.py
@@ -2,6 +2,7 @@
 from typing import Any, Dict, Literal
 
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -92,3 +93,18 @@ class AlertDialogCancel(RadixThemesComponent):
     """
 
     tag = "AlertDialog.Cancel"
+
+
+class AlertDialog(ComponentNamespace):
+    """AlertDialog components namespace."""
+
+    root = staticmethod(AlertDialogRoot.create)
+    trigger = staticmethod(AlertDialogTrigger.create)
+    content = staticmethod(AlertDialogContent.create)
+    title = staticmethod(AlertDialogTitle.create)
+    description = staticmethod(AlertDialogDescription.create)
+    action = staticmethod(AlertDialogAction.create)
+    cancel = staticmethod(AlertDialogCancel.create)
+
+
+alert_dialog = AlertDialog()
diff --git a/reflex/components/radix/themes/components/alert_dialog.pyi b/reflex/components/radix/themes/components/alert_dialog.pyi
new file mode 100644
index 000000000..5ad8e5436
--- /dev/null
+++ b/reflex/components/radix/themes/components/alert_dialog.pyi
@@ -0,0 +1,659 @@
+"""Stub file for reflex/components/radix/themes/components/alert_dialog.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Any, Dict, Literal
+from reflex import el
+from reflex.components.component import ComponentNamespace
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+from ..base import RadixThemesComponent
+
+LiteralContentSize = Literal["1", "2", "3", "4"]
+
+class AlertDialogRoot(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        open: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "AlertDialogRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            open: The controlled open state of the dialog.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class AlertDialogTrigger(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "AlertDialogTrigger":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class AlertDialogContent(el.Div, RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+        ] = None,
+        force_mount: Optional[Union[Var[bool], bool]] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_close_auto_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_escape_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_auto_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "AlertDialogContent":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            size: The size of the content.
+            force_mount: Whether to force mount the content on open.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class AlertDialogTitle(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "AlertDialogTitle":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class AlertDialogDescription(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "AlertDialogDescription":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class AlertDialogAction(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "AlertDialogAction":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class AlertDialogCancel(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "AlertDialogCancel":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class AlertDialog(ComponentNamespace):
+    root = staticmethod(AlertDialogRoot.create)
+    trigger = staticmethod(AlertDialogTrigger.create)
+    content = staticmethod(AlertDialogContent.create)
+    title = staticmethod(AlertDialogTitle.create)
+    description = staticmethod(AlertDialogDescription.create)
+    action = staticmethod(AlertDialogAction.create)
+    cancel = staticmethod(AlertDialogCancel.create)
+
+alert_dialog = AlertDialog()
diff --git a/reflex/components/radix/themes/components/alertdialog.pyi b/reflex/components/radix/themes/components/alertdialog.pyi
index 30c328067..ffa4be175 100644
--- a/reflex/components/radix/themes/components/alertdialog.pyi
+++ b/reflex/components/radix/themes/components/alertdialog.pyi
@@ -7,6 +7,7 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
+from types import SimpleNamespace
 from typing import Any, Dict, Literal
 from reflex import el
 from reflex.constants import EventTriggers
@@ -427,9 +428,6 @@ class AlertDialogContent(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -520,7 +518,6 @@ class AlertDialogContent(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1118,3 +1115,14 @@ class AlertDialogCancel(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class AlertDialog(SimpleNamespace):
+    root = staticmethod(AlertDialogRoot.create)
+    trigger = staticmethod(AlertDialogTrigger.create)
+    content = staticmethod(AlertDialogContent.create)
+    title = staticmethod(AlertDialogTitle.create)
+    description = staticmethod(AlertDialogDescription.create)
+    action = staticmethod(AlertDialogAction.create)
+    cancel = staticmethod(AlertDialogCancel.create)
+
+alert_dialog = AlertDialog()
diff --git a/reflex/components/radix/themes/components/aspectratio.py b/reflex/components/radix/themes/components/aspect_ratio.py
similarity index 91%
rename from reflex/components/radix/themes/components/aspectratio.py
rename to reflex/components/radix/themes/components/aspect_ratio.py
index 556666605..1b6847a18 100644
--- a/reflex/components/radix/themes/components/aspectratio.py
+++ b/reflex/components/radix/themes/components/aspect_ratio.py
@@ -13,3 +13,6 @@ class AspectRatio(RadixThemesComponent):
 
     # The ratio of the width to the height of the element
     ratio: Var[Union[float, int]]
+
+
+aspect_ratio = AspectRatio.create
diff --git a/reflex/components/chakra/layout/html.pyi b/reflex/components/radix/themes/components/aspect_ratio.pyi
similarity index 72%
rename from reflex/components/chakra/layout/html.pyi
rename to reflex/components/radix/themes/components/aspect_ratio.pyi
index ba5016307..d75105149 100644
--- a/reflex/components/chakra/layout/html.pyi
+++ b/reflex/components/radix/themes/components/aspect_ratio.pyi
@@ -1,4 +1,4 @@
-"""Stub file for reflex/components/chakra/layout/html.py"""
+"""Stub file for reflex/components/radix/themes/components/aspect_ratio.py"""
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
@@ -7,28 +7,22 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Dict
-from reflex.components.chakra.layout.box import Box
+from typing import Union
 from reflex.vars import Var
+from ..base import RadixThemesComponent
 
-class Html(Box):
+class AspectRatio(RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
-        dangerouslySetInnerHTML: Optional[
-            Union[Var[Dict[str, str]], Dict[str, str]]
-        ] = None,
-        element: Optional[Union[Var[str], str]] = None,
-        src: Optional[Union[Var[str], str]] = None,
-        alt: Optional[Union[Var[str], str]] = None,
+        ratio: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -76,28 +70,26 @@ class Html(Box):
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
         **props
-    ) -> "Html":
-        """Create a html component.
+    ) -> "AspectRatio":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
 
         Args:
-            *children: The children of the component.
-            dangerouslySetInnerHTML: The HTML to render.
-            element: The type element to render. You can specify an image, video, or any other HTML element such as iframe.
-            src: The source of the content.
-            alt: The alt text of the content.
+            *children: Child components.
+            ratio: The ratio of the width to the height of the element
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
-            **props: The props to pass to the component.
+            **props: Component properties.
 
         Returns:
-            The html component.
-
-        Raises:
-            ValueError: If children are not provided or more than one child is provided.
+            A new component instance.
         """
         ...
+
+aspect_ratio = AspectRatio.create
diff --git a/reflex/components/radix/themes/components/aspectratio.pyi b/reflex/components/radix/themes/components/aspectratio.pyi
index 043163274..f27b9fa0a 100644
--- a/reflex/components/radix/themes/components/aspectratio.pyi
+++ b/reflex/components/radix/themes/components/aspectratio.pyi
@@ -158,3 +158,5 @@ class AspectRatio(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+aspect_ratio = AspectRatio.create
diff --git a/reflex/components/radix/themes/components/avatar.py b/reflex/components/radix/themes/components/avatar.py
index 35664f4c6..0b64831c3 100644
--- a/reflex/components/radix/themes/components/avatar.py
+++ b/reflex/components/radix/themes/components/avatar.py
@@ -1,4 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Literal
 
 from reflex.vars import Var
@@ -6,10 +7,11 @@ from reflex.vars import Var
 from ..base import (
     LiteralAccentColor,
     LiteralRadius,
-    LiteralSize,
     RadixThemesComponent,
 )
 
+LiteralSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
+
 
 class Avatar(RadixThemesComponent):
     """An image element with a fallback for representing the user."""
@@ -36,3 +38,6 @@ class Avatar(RadixThemesComponent):
 
     # The rendered fallback text
     fallback: Var[str]
+
+
+avatar = Avatar.create
diff --git a/reflex/components/radix/themes/components/avatar.pyi b/reflex/components/radix/themes/components/avatar.pyi
index 037b78941..8a61a64a2 100644
--- a/reflex/components/radix/themes/components/avatar.pyi
+++ b/reflex/components/radix/themes/components/avatar.pyi
@@ -9,7 +9,9 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
 from reflex.vars import Var
-from ..base import LiteralAccentColor, LiteralRadius, LiteralSize, RadixThemesComponent
+from ..base import LiteralAccentColor, LiteralRadius, RadixThemesComponent
+
+LiteralSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
 
 class Avatar(RadixThemesComponent):
     @overload
@@ -17,7 +19,15 @@ class Avatar(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        variant: Optional[
+            Union[Var[Literal["solid", "soft"]], Literal["solid", "soft"]]
+        ] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -80,15 +90,6 @@ class Avatar(RadixThemesComponent):
                 ],
             ]
         ] = None,
-        variant: Optional[
-            Union[Var[Literal["solid", "soft"]], Literal["solid", "soft"]]
-        ] = None,
-        size: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         radius: Optional[
             Union[
@@ -103,7 +104,6 @@ class Avatar(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -159,10 +159,9 @@ class Avatar(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             variant: The variant of the avatar
             size: The size of the avatar: "1" - "9"
+            color_scheme: Color theme of the avatar
             high_contrast: Whether to render the avatar with higher contrast color against background
             radius: Override theme radius for avatar: "none" | "small" | "medium" | "large" | "full"
             src: The src of the avatar image
@@ -172,7 +171,6 @@ class Avatar(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -180,3 +178,5 @@ class Avatar(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+avatar = Avatar.create
diff --git a/reflex/components/radix/themes/components/badge.py b/reflex/components/radix/themes/components/badge.py
index 98145c3d0..f279ee0cf 100644
--- a/reflex/components/radix/themes/components/badge.py
+++ b/reflex/components/radix/themes/components/badge.py
@@ -30,3 +30,6 @@ class Badge(el.Span, RadixThemesComponent):
 
     # Override theme radius for badge: "none" | "small" | "medium" | "large" | "full"
     radius: Var[LiteralRadius]
+
+
+badge = Badge.create
diff --git a/reflex/components/radix/themes/components/badge.pyi b/reflex/components/radix/themes/components/badge.pyi
index 24a2c25ff..e4e4bdf64 100644
--- a/reflex/components/radix/themes/components/badge.pyi
+++ b/reflex/components/radix/themes/components/badge.pyi
@@ -18,7 +18,13 @@ class Badge(el.Span, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["solid", "soft", "surface", "outline"]],
+                Literal["solid", "soft", "surface", "outline"],
+            ]
+        ] = None,
+        size: Optional[Union[Var[Literal["1", "2"]], Literal["1", "2"]]] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -81,13 +87,6 @@ class Badge(el.Span, RadixThemesComponent):
                 ],
             ]
         ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["solid", "soft", "surface", "outline"]],
-                Literal["solid", "soft", "surface", "outline"],
-            ]
-        ] = None,
-        size: Optional[Union[Var[Literal["1", "2"]], Literal["1", "2"]]] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         radius: Optional[
             Union[
@@ -135,15 +134,11 @@ class Badge(el.Span, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -199,10 +194,9 @@ class Badge(el.Span, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             variant: The variant of the badge
             size: The size of the badge
+            color_scheme: Color theme of the badge
             high_contrast: Whether to render the badge with higher contrast color against background
             radius: Override theme radius for badge: "none" | "small" | "medium" | "large" | "full"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
@@ -221,13 +215,11 @@ class Badge(el.Span, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -235,3 +227,5 @@ class Badge(el.Span, RadixThemesComponent):
             A new component instance.
         """
         ...
+
+badge = Badge.create
diff --git a/reflex/components/radix/themes/components/button.py b/reflex/components/radix/themes/components/button.py
index 4e17ee2d7..a9d681f8e 100644
--- a/reflex/components/radix/themes/components/button.py
+++ b/reflex/components/radix/themes/components/button.py
@@ -36,3 +36,6 @@ class Button(el.Button, RadixThemesComponent):
 
     # Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
     radius: Var[LiteralRadius]
+
+
+button = Button.create
diff --git a/reflex/components/radix/themes/components/button.pyi b/reflex/components/radix/themes/components/button.pyi
index f3bd86cfb..e2ec05ded 100644
--- a/reflex/components/radix/themes/components/button.pyi
+++ b/reflex/components/radix/themes/components/button.pyi
@@ -25,7 +25,16 @@ class Button(el.Button, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
+                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -88,16 +97,6 @@ class Button(el.Button, RadixThemesComponent):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[
-            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
-        ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
-                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         radius: Optional[
             Union[
@@ -170,15 +169,11 @@ class Button(el.Button, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -234,11 +229,10 @@ class Button(el.Button, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             size: Button size "1" - "4"
             variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
+            color_scheme: Override theme color for button
             high_contrast: Whether to render the button with higher contrast color against background
             radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
             auto_focus: Automatically focuses the button when the page loads
@@ -268,13 +262,11 @@ class Button(el.Button, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -282,3 +274,5 @@ class Button(el.Button, RadixThemesComponent):
             A new component instance.
         """
         ...
+
+button = Button.create
diff --git a/reflex/components/radix/themes/components/callout.py b/reflex/components/radix/themes/components/callout.py
index 884f55905..5eaf1cac0 100644
--- a/reflex/components/radix/themes/components/callout.py
+++ b/reflex/components/radix/themes/components/callout.py
@@ -1,10 +1,11 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Literal, Union
 
 import reflex as rx
 from reflex import el
-from reflex.components.component import Component
-from reflex.components.radix.themes.components.icons import Icon
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.lucide.icon import Icon
 from reflex.vars import Var
 
 from ..base import (
@@ -16,7 +17,7 @@ CalloutVariant = Literal["soft", "surface", "outline"]
 
 
 class CalloutRoot(el.Div, RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Groups Icon and Text parts of a Callout."""
 
     tag = "Callout.Root"
 
@@ -37,19 +38,19 @@ class CalloutRoot(el.Div, RadixThemesComponent):
 
 
 class CalloutIcon(el.Div, RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Provides width and height for the icon associated with the callout."""
 
     tag = "Callout.Icon"
 
 
 class CalloutText(el.P, RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Renders the callout text. This component is based on the p element."""
 
     tag = "Callout.Text"
 
 
 class Callout(CalloutRoot):
-    """High level wrapper for the Callout component."""
+    """A short message to attract user's attention."""
 
     # The text of the callout.
     text: Var[str]
@@ -69,9 +70,23 @@ class Callout(CalloutRoot):
             The callout component.
         """
         return CalloutRoot.create(
-            CalloutIcon.create(Icon.create(tag=props["icon"]))
-            if "icon" in props
-            else rx.fragment(),
+            (
+                CalloutIcon.create(Icon.create(tag=props["icon"]))
+                if "icon" in props
+                else rx.fragment()
+            ),
             CalloutText.create(text),
             **props,
         )
+
+
+class CalloutNamespace(ComponentNamespace):
+    """Callout components namespace."""
+
+    root = staticmethod(CalloutRoot.create)
+    icon = staticmethod(CalloutIcon.create)
+    text = staticmethod(CalloutText.create)
+    __call__ = staticmethod(Callout.create)
+
+
+callout = CalloutNamespace()
diff --git a/reflex/components/radix/themes/components/callout.pyi b/reflex/components/radix/themes/components/callout.pyi
index 632c57b97..c96c59b64 100644
--- a/reflex/components/radix/themes/components/callout.pyi
+++ b/reflex/components/radix/themes/components/callout.pyi
@@ -10,8 +10,8 @@ from reflex.style import Style
 from typing import Literal, Union
 import reflex as rx
 from reflex import el
-from reflex.components.component import Component
-from reflex.components.radix.themes.components.icons import Icon
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.lucide.icon import Icon
 from reflex.vars import Var
 from ..base import LiteralAccentColor, RadixThemesComponent
 
@@ -23,7 +23,16 @@ class CalloutRoot(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["soft", "surface", "outline"]],
+                Literal["soft", "surface", "outline"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -86,16 +95,6 @@ class CalloutRoot(el.Div, RadixThemesComponent):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[
-            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
-        ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["soft", "surface", "outline"]],
-                Literal["soft", "surface", "outline"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
@@ -137,15 +136,11 @@ class CalloutRoot(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -201,11 +196,10 @@ class CalloutRoot(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             size: Size "1" - "3"
             variant: Variant of button: "soft" | "surface" | "outline"
+            color_scheme: Override theme color for button
             high_contrast: Whether to render the button with higher contrast color against background
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -223,13 +217,11 @@ class CalloutRoot(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -244,69 +236,6 @@ class CalloutIcon(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -347,15 +276,11 @@ class CalloutIcon(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -411,8 +336,6 @@ class CalloutIcon(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -429,13 +352,11 @@ class CalloutIcon(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -450,69 +371,6 @@ class CalloutText(el.P, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -553,15 +411,11 @@ class CalloutText(el.P, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -617,8 +471,6 @@ class CalloutText(el.P, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -635,13 +487,11 @@ class CalloutText(el.P, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -771,15 +621,11 @@ class Callout(CalloutRoot):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -855,13 +701,11 @@ class Callout(CalloutRoot):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -869,3 +713,221 @@ class Callout(CalloutRoot):
             The callout component.
         """
         ...
+
+class CalloutNamespace(ComponentNamespace):
+    root = staticmethod(CalloutRoot.create)
+    icon = staticmethod(CalloutIcon.create)
+    text = staticmethod(CalloutText.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        text: Optional[Union[Var[str], str]] = None,
+        icon: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["soft", "surface", "outline"]],
+                Literal["soft", "surface", "outline"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Callout":
+        """Create a callout component.
+
+        Args:
+            text: The text of the callout.
+            text: The text of the callout.
+            icon: The icon of the callout.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            size: Size "1" - "3"
+            variant: Variant of button: "soft" | "surface" | "outline"
+            color_scheme: Override theme color for button
+            high_contrast: Whether to render the button with higher contrast color against background
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The callout component.
+        """
+        ...
+
+callout = CalloutNamespace()
diff --git a/reflex/components/radix/themes/components/card.py b/reflex/components/radix/themes/components/card.py
index 068004b3a..ab4cf2b88 100644
--- a/reflex/components/radix/themes/components/card.py
+++ b/reflex/components/radix/themes/components/card.py
@@ -22,3 +22,6 @@ class Card(el.Div, RadixThemesComponent):
 
     # Variant of Card: "solid" | "soft" | "outline" | "ghost"
     variant: Var[Literal["surface", "classic", "ghost"]]
+
+
+card = Card.create
diff --git a/reflex/components/radix/themes/components/card.pyi b/reflex/components/radix/themes/components/card.pyi
index 9cf35f953..3a0b2ce63 100644
--- a/reflex/components/radix/themes/components/card.pyi
+++ b/reflex/components/radix/themes/components/card.pyi
@@ -18,69 +18,6 @@ class Card(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         size: Optional[
             Union[
@@ -133,15 +70,11 @@ class Card(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -197,8 +130,6 @@ class Card(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             size: Card size: "1" - "5"
             variant: Variant of Card: "solid" | "soft" | "outline" | "ghost"
@@ -218,13 +149,11 @@ class Card(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -232,3 +161,5 @@ class Card(el.Div, RadixThemesComponent):
             A new component instance.
         """
         ...
+
+card = Card.create
diff --git a/reflex/components/radix/themes/components/checkbox.py b/reflex/components/radix/themes/components/checkbox.py
index af776fdd7..250a1da4c 100644
--- a/reflex/components/radix/themes/components/checkbox.py
+++ b/reflex/components/radix/themes/components/checkbox.py
@@ -1,7 +1,8 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Any, Dict, Literal
 
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.themes.layout.flex import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import EventTriggers
@@ -9,32 +10,32 @@ from reflex.vars import Var
 
 from ..base import (
     LiteralAccentColor,
-    LiteralSize,
-    LiteralVariant,
+    LiteralSpacing,
     RadixThemesComponent,
 )
 
 LiteralCheckboxSize = Literal["1", "2", "3"]
+LiteralCheckboxVariant = Literal["classic", "surface", "soft"]
 
 
 class Checkbox(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Selects a single value, typically for submission in a form."""
 
     tag = "Checkbox"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
 
-    # Button size "1" - "3"
+    # Checkbox size "1" - "3"
     size: Var[LiteralCheckboxSize]
 
-    # Variant of button: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[LiteralVariant]
+    # Variant of checkbox: "classic" | "surface" | "soft"
+    variant: Var[LiteralCheckboxVariant]
 
-    # Override theme color for button
+    # Override theme color for checkbox
     color_scheme: Var[LiteralAccentColor]
 
-    # Whether to render the button with higher contrast color against background
+    # Whether to render the checkbox with higher contrast color against background
     high_contrast: Var[bool]
 
     # Whether the checkbox is checked by default
@@ -70,18 +71,64 @@ class Checkbox(RadixThemesComponent):
         }
 
 
-class HighLevelCheckbox(Checkbox):
+class HighLevelCheckbox(RadixThemesComponent):
     """A checkbox component with a label."""
 
+    tag = "Checkbox"
+
     # The text label for the checkbox.
     text: Var[str]
 
     # The gap between the checkbox and the label.
-    gap: Var[LiteralSize]
+    spacing: Var[LiteralSpacing]
 
-    # The size of the checkbox.
+    # The size of the checkbox "1" - "3".
     size: Var[LiteralCheckboxSize]
 
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    # Variant of checkbox: "classic" | "surface" | "soft"
+    variant: Var[LiteralCheckboxVariant]
+
+    # Override theme color for checkbox
+    color_scheme: Var[LiteralAccentColor]
+
+    # Whether to render the checkbox with higher contrast color against background
+    high_contrast: Var[bool]
+
+    # Whether the checkbox is checked by default
+    default_checked: Var[bool]
+
+    # Whether the checkbox is checked
+    checked: Var[bool]
+
+    # Whether the checkbox is disabled
+    disabled: Var[bool]
+
+    # Whether the checkbox is required
+    required: Var[bool]
+
+    # The name of the checkbox control when submitting the form.
+    name: Var[str]
+
+    # The value of the checkbox control when submitting the form.
+    value: Var[str]
+
+    # Props to rename
+    _rename_props = {"onChange": "onCheckedChange"}
+
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the events triggers signatures for the component.
+
+        Returns:
+            The signatures of the event triggers.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_CHANGE: lambda e0: [e0],
+        }
+
     @classmethod
     def create(cls, text: Var[str] = Var.create_safe(""), **props) -> Component:
         """Create a checkbox with a label.
@@ -93,8 +140,11 @@ class HighLevelCheckbox(Checkbox):
         Returns:
             The checkbox component with a label.
         """
-        gap = props.pop("gap", "2")
+        spacing = props.pop("spacing", "2")
         size = props.pop("size", "2")
+        flex_props = {}
+        if "gap" in props:
+            flex_props["gap"] = props.pop("gap", None)
 
         return Text.create(
             Flex.create(
@@ -103,8 +153,18 @@ class HighLevelCheckbox(Checkbox):
                     **props,
                 ),
                 text,
-                gap=gap,
+                spacing=spacing,
+                **flex_props,
             ),
             as_="label",
             size=size,
         )
+
+
+class CheckboxNamespace(ComponentNamespace):
+    """Checkbox components namespace."""
+
+    __call__ = staticmethod(HighLevelCheckbox.create)
+
+
+checkbox = CheckboxNamespace()
diff --git a/reflex/components/radix/themes/components/checkbox.pyi b/reflex/components/radix/themes/components/checkbox.pyi
index ed94c3776..fe0c4d998 100644
--- a/reflex/components/radix/themes/components/checkbox.pyi
+++ b/reflex/components/radix/themes/components/checkbox.pyi
@@ -8,14 +8,15 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, Literal
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.themes.layout.flex import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import EventTriggers
 from reflex.vars import Var
-from ..base import LiteralAccentColor, LiteralSize, LiteralVariant, RadixThemesComponent
+from ..base import LiteralAccentColor, LiteralSpacing, RadixThemesComponent
 
 LiteralCheckboxSize = Literal["1", "2", "3"]
+LiteralCheckboxVariant = Literal["classic", "surface", "soft"]
 
 class Checkbox(RadixThemesComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
@@ -24,7 +25,16 @@ class Checkbox(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -87,16 +97,6 @@ class Checkbox(RadixThemesComponent):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[
-            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
-        ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
-                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         default_checked: Optional[Union[Var[bool], bool]] = None,
         checked: Optional[Union[Var[bool], bool]] = None,
@@ -109,7 +109,6 @@ class Checkbox(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -168,24 +167,22 @@ class Checkbox(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            size: Button size "1" - "3"
-            variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
-            high_contrast: Whether to render the button with higher contrast color against background
+            size: Checkbox size "1" - "3"
+            variant: Variant of checkbox: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for checkbox
+            high_contrast: Whether to render the checkbox with higher contrast color against background
             default_checked: Whether the checkbox is checked by default
             checked: Whether the checkbox is checked
             disabled: Whether the checkbox is disabled
             required: Whether the checkbox is required
             name: The name of the checkbox control when submitting the form.
             value: The value of the checkbox control when submitting the form.
-            style: Props to rename  The style of the component.
+            style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -194,17 +191,18 @@ class Checkbox(RadixThemesComponent):
         """
         ...
 
-class HighLevelCheckbox(Checkbox):
+class HighLevelCheckbox(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
         text: Optional[Union[Var[str], str]] = None,
-        gap: Optional[
+        spacing: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         size: Optional[
@@ -213,8 +211,8 @@ class HighLevelCheckbox(Checkbox):
         as_child: Optional[Union[Var[bool], bool]] = None,
         variant: Optional[
             Union[
-                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
-                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
             ]
         ] = None,
         color_scheme: Optional[
@@ -291,7 +289,6 @@ class HighLevelCheckbox(Checkbox):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -348,24 +345,23 @@ class HighLevelCheckbox(Checkbox):
         Args:
             text: The text of the label.
             text: The text label for the checkbox.
-            gap: The gap between the checkbox and the label.
-            size: Button size "1" - "3"
+            spacing: The gap between the checkbox and the label.
+            size: The size of the checkbox "1" - "3".
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
-            color_scheme: Override theme color for button
-            high_contrast: Whether to render the button with higher contrast color against background
+            variant: Variant of checkbox: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for checkbox
+            high_contrast: Whether to render the checkbox with higher contrast color against background
             default_checked: Whether the checkbox is checked by default
             checked: Whether the checkbox is checked
             disabled: Whether the checkbox is disabled
             required: Whether the checkbox is required
             name: The name of the checkbox control when submitting the form.
             value: The value of the checkbox control when submitting the form.
-            style: Props to rename  The style of the component.
+            style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Additional properties to apply to the checkbox item.
 
@@ -373,3 +369,181 @@ class HighLevelCheckbox(Checkbox):
             The checkbox component with a label.
         """
         ...
+
+class CheckboxNamespace(ComponentNamespace):
+    @staticmethod
+    def __call__(
+        *children,
+        text: Optional[Union[Var[str], str]] = None,
+        spacing: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        default_checked: Optional[Union[Var[bool], bool]] = None,
+        checked: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HighLevelCheckbox":
+        """Create a checkbox with a label.
+
+        Args:
+            text: The text of the label.
+            text: The text label for the checkbox.
+            spacing: The gap between the checkbox and the label.
+            size: The size of the checkbox "1" - "3".
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            variant: Variant of checkbox: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for checkbox
+            high_contrast: Whether to render the checkbox with higher contrast color against background
+            default_checked: Whether the checkbox is checked by default
+            checked: Whether the checkbox is checked
+            disabled: Whether the checkbox is disabled
+            required: Whether the checkbox is required
+            name: The name of the checkbox control when submitting the form.
+            value: The value of the checkbox control when submitting the form.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Additional properties to apply to the checkbox item.
+
+        Returns:
+            The checkbox component with a label.
+        """
+        ...
+
+checkbox = CheckboxNamespace()
diff --git a/reflex/components/radix/themes/components/contextmenu.py b/reflex/components/radix/themes/components/context_menu.py
similarity index 76%
rename from reflex/components/radix/themes/components/contextmenu.py
rename to reflex/components/radix/themes/components/context_menu.py
index 09f90dabe..7631d7970 100644
--- a/reflex/components/radix/themes/components/contextmenu.py
+++ b/reflex/components/radix/themes/components/context_menu.py
@@ -1,6 +1,7 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import Any, Dict, List, Literal
 
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -11,7 +12,7 @@ from ..base import (
 
 
 class ContextMenuRoot(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Menu representing a set of actions, displayed at the origin of a pointer right-click or long-press."""
 
     tag = "ContextMenu.Root"
 
@@ -33,7 +34,7 @@ class ContextMenuRoot(RadixThemesComponent):
 
 
 class ContextMenuTrigger(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Wraps the element that will open the context menu."""
 
     tag = "ContextMenu.Trigger"
 
@@ -46,7 +47,7 @@ class ContextMenuTrigger(RadixThemesComponent):
 
 
 class ContextMenuContent(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """The component that pops out when the context menu is open."""
 
     tag = "ContextMenu.Content"
 
@@ -85,13 +86,13 @@ class ContextMenuContent(RadixThemesComponent):
 
 
 class ContextMenuSub(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Contains all the parts of a submenu."""
 
     tag = "ContextMenu.Sub"
 
 
 class ContextMenuSubTrigger(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """An item that opens a submenu."""
 
     tag = "ContextMenu.SubTrigger"
 
@@ -102,7 +103,7 @@ class ContextMenuSubTrigger(RadixThemesComponent):
 
 
 class ContextMenuSubContent(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """The component that pops out when a submenu is open."""
 
     tag = "ContextMenu.SubContent"
 
@@ -127,7 +128,7 @@ class ContextMenuSubContent(RadixThemesComponent):
 
 
 class ContextMenuItem(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """The component that contains the context menu items."""
 
     tag = "ContextMenu.Item"
 
@@ -141,6 +142,22 @@ class ContextMenuItem(RadixThemesComponent):
 
 
 class ContextMenuSeparator(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Separates items in a context menu."""
 
     tag = "ContextMenu.Separator"
+
+
+class ContextMenu(ComponentNamespace):
+    """Menu representing a set of actions, displayed at the origin of a pointer right-click or long-press."""
+
+    root = staticmethod(ContextMenuRoot.create)
+    trigger = staticmethod(ContextMenuTrigger.create)
+    content = staticmethod(ContextMenuContent.create)
+    sub = staticmethod(ContextMenuSub.create)
+    sub_trigger = staticmethod(ContextMenuSubTrigger.create)
+    sub_content = staticmethod(ContextMenuSubContent.create)
+    item = staticmethod(ContextMenuItem.create)
+    separator = staticmethod(ContextMenuSeparator.create)
+
+
+context_menu = ContextMenu()
diff --git a/reflex/components/radix/themes/components/context_menu.pyi b/reflex/components/radix/themes/components/context_menu.pyi
new file mode 100644
index 000000000..0f8a0b771
--- /dev/null
+++ b/reflex/components/radix/themes/components/context_menu.pyi
@@ -0,0 +1,839 @@
+"""Stub file for reflex/components/radix/themes/components/context_menu.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Any, Dict, List, Literal
+from reflex.components.component import ComponentNamespace
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+from ..base import LiteralAccentColor, RadixThemesComponent
+
+class ContextMenuRoot(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        modal: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ContextMenuRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            modal: The modality of the context menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuTrigger(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ContextMenuTrigger":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            disabled: Whether the trigger is disabled
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuContent(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[Literal["1", "2"]], Literal["1", "2"]]] = None,
+        variant: Optional[
+            Union[Var[Literal["solid", "soft"]], Literal["solid", "soft"]]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        align_offset: Optional[Union[Var[int], int]] = None,
+        avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_close_auto_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_escape_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_interact_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_pointer_down_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ContextMenuContent":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            size: Button size "1" - "4"
+            variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
+            color_scheme: Override theme color for button
+            high_contrast: Whether to render the button with higher contrast color against background
+            align_offset: The vertical distance in pixels from the anchor.
+            avoid_collisions: When true, overrides the side and aligns preferences to prevent collisions with boundary edges.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuSub(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ContextMenuSub":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuSubTrigger(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ContextMenuSubTrigger":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            disabled: Whether the trigger is disabled
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuSubContent(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        loop: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_escape_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_interact_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_pointer_down_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ContextMenuSubContent":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            loop: When true, keyboard navigation will loop from last item to first, and vice versa.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuItem(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        shortcut: Optional[Union[Var[str], str]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ContextMenuItem":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            color_scheme: Override theme color for button
+            shortcut: Shortcut to render a menu item as a link
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuSeparator(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ContextMenuSeparator":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenu(ComponentNamespace):
+    root = staticmethod(ContextMenuRoot.create)
+    trigger = staticmethod(ContextMenuTrigger.create)
+    content = staticmethod(ContextMenuContent.create)
+    sub = staticmethod(ContextMenuSub.create)
+    sub_trigger = staticmethod(ContextMenuSubTrigger.create)
+    sub_content = staticmethod(ContextMenuSubContent.create)
+    item = staticmethod(ContextMenuItem.create)
+    separator = staticmethod(ContextMenuSeparator.create)
+
+context_menu = ContextMenu()
diff --git a/reflex/components/radix/themes/components/contextmenu.pyi b/reflex/components/radix/themes/components/contextmenu.pyi
index 42365f39b..25e52fb12 100644
--- a/reflex/components/radix/themes/components/contextmenu.pyi
+++ b/reflex/components/radix/themes/components/contextmenu.pyi
@@ -7,6 +7,7 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
+from types import SimpleNamespace
 from typing import Any, Dict, List, Literal
 from reflex.constants import EventTriggers
 from reflex.vars import Var
@@ -1234,3 +1235,15 @@ class ContextMenuSeparator(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class ContextMenu(SimpleNamespace):
+    root = staticmethod(ContextMenuRoot.create)
+    trigger = staticmethod(ContextMenuTrigger.create)
+    content = staticmethod(ContextMenuContent.create)
+    sub = staticmethod(ContextMenuSub.create)
+    sub_trigger = staticmethod(ContextMenuSubTrigger.create)
+    sub_content = staticmethod(ContextMenuSubContent.create)
+    item = staticmethod(ContextMenuItem.create)
+    separator = staticmethod(ContextMenuSeparator.create)
+
+context_menu = ContextMenu()
diff --git a/reflex/components/radix/themes/components/dialog.py b/reflex/components/radix/themes/components/dialog.py
index ee18ee5c7..ebc80b5a3 100644
--- a/reflex/components/radix/themes/components/dialog.py
+++ b/reflex/components/radix/themes/components/dialog.py
@@ -1,7 +1,9 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Any, Dict, Literal
 
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -11,7 +13,7 @@ from ..base import (
 
 
 class DialogRoot(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Root component for Dialog."""
 
     tag = "Dialog.Root"
 
@@ -31,19 +33,19 @@ class DialogRoot(RadixThemesComponent):
 
 
 class DialogTrigger(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Trigger an action or event, to open a Dialog modal."""
 
     tag = "Dialog.Trigger"
 
 
 class DialogTitle(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Title component to display inside a Dialog modal."""
 
     tag = "Dialog.Title"
 
 
 class DialogContent(el.Div, RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Content component to display inside a Dialog modal."""
 
     tag = "Dialog.Content"
 
@@ -67,12 +69,26 @@ class DialogContent(el.Div, RadixThemesComponent):
 
 
 class DialogDescription(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Description component to display inside a Dialog modal."""
 
     tag = "Dialog.Description"
 
 
 class DialogClose(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Close button component to close an open Dialog modal."""
 
     tag = "Dialog.Close"
+
+
+class Dialog(ComponentNamespace):
+    """Dialog components namespace."""
+
+    root = __call__ = staticmethod(DialogRoot.create)
+    trigger = staticmethod(DialogTrigger.create)
+    title = staticmethod(DialogTitle.create)
+    content = staticmethod(DialogContent.create)
+    description = staticmethod(DialogDescription.create)
+    close = staticmethod(DialogClose.create)
+
+
+dialog = Dialog()
diff --git a/reflex/components/radix/themes/components/dialog.pyi b/reflex/components/radix/themes/components/dialog.pyi
index 132c3770c..426b553a8 100644
--- a/reflex/components/radix/themes/components/dialog.pyi
+++ b/reflex/components/radix/themes/components/dialog.pyi
@@ -9,6 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, Literal
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import RadixThemesComponent
@@ -20,76 +21,12 @@ class DialogRoot(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         open: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -148,15 +85,12 @@ class DialogRoot(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             open: The controlled open state of the dialog.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -171,75 +105,11 @@ class DialogTrigger(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -295,14 +165,11 @@ class DialogTrigger(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -317,75 +184,11 @@ class DialogTitle(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -441,14 +244,11 @@ class DialogTitle(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -464,69 +264,6 @@ class DialogContent(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         size: Optional[
             Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
         ] = None,
@@ -570,15 +307,11 @@ class DialogContent(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -649,8 +382,6 @@ class DialogContent(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             size: DialogContent size "1" - "4"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -668,13 +399,11 @@ class DialogContent(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -689,75 +418,11 @@ class DialogDescription(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -813,14 +478,11 @@ class DialogDescription(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -835,75 +497,11 @@ class DialogClose(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -959,14 +557,11 @@ class DialogClose(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -974,3 +569,94 @@ class DialogClose(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class Dialog(ComponentNamespace):
+    root = staticmethod(DialogRoot.create)
+    trigger = staticmethod(DialogTrigger.create)
+    title = staticmethod(DialogTitle.create)
+    content = staticmethod(DialogContent.create)
+    description = staticmethod(DialogDescription.create)
+    close = staticmethod(DialogClose.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        open: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DialogRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            open: The controlled open state of the dialog.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+dialog = Dialog()
diff --git a/reflex/components/radix/themes/components/dropdownmenu.py b/reflex/components/radix/themes/components/dropdown_menu.py
similarity index 94%
rename from reflex/components/radix/themes/components/dropdownmenu.py
rename to reflex/components/radix/themes/components/dropdown_menu.py
index dfb56c359..013684975 100644
--- a/reflex/components/radix/themes/components/dropdownmenu.py
+++ b/reflex/components/radix/themes/components/dropdown_menu.py
@@ -1,6 +1,7 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import Any, Dict, List, Literal, Union
 
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -140,7 +141,7 @@ class DropdownMenuContent(RadixThemesComponent):
 
 
 class DropdownMenuSubTrigger(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """An item that opens a submenu."""
 
     tag = "DropdownMenu.SubTrigger"
 
@@ -184,18 +185,6 @@ class DropdownMenuSubContent(RadixThemesComponent):
 
     tag = "DropdownMenu.SubContent"
 
-    # Dropdown Menu Sub Content size "1" - "2"
-    size: Var[LiteralSizeType]
-
-    # Variant of Dropdown Menu Sub Content: "solid" | "soft"
-    variant: Var[LiteralVariantType]
-
-    # Override theme color for Dropdown Menu Sub Content
-    color_scheme: Var[LiteralAccentColor]
-
-    # Whether to render the component with higher contrast color against background
-    high_contrast: Var[bool]
-
     # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
     as_child: Var[bool]
 
@@ -281,3 +270,19 @@ class DropdownMenuSeparator(RadixThemesComponent):
     """Dropdown Menu Separator Component. Used to visually separate items in the dropdown menu."""
 
     tag = "DropdownMenu.Separator"
+
+
+class DropdownMenu(ComponentNamespace):
+    """DropdownMenu components namespace."""
+
+    root = staticmethod(DropdownMenuRoot.create)
+    trigger = staticmethod(DropdownMenuTrigger.create)
+    content = staticmethod(DropdownMenuContent.create)
+    sub_trigger = staticmethod(DropdownMenuSubTrigger.create)
+    sub = staticmethod(DropdownMenuSub.create)
+    sub_content = staticmethod(DropdownMenuSubContent.create)
+    item = staticmethod(DropdownMenuItem.create)
+    separator = staticmethod(DropdownMenuSeparator.create)
+
+
+menu = dropdown_menu = DropdownMenu()
diff --git a/reflex/components/radix/themes/components/dropdown_menu.pyi b/reflex/components/radix/themes/components/dropdown_menu.pyi
new file mode 100644
index 000000000..0ece0d499
--- /dev/null
+++ b/reflex/components/radix/themes/components/dropdown_menu.pyi
@@ -0,0 +1,940 @@
+"""Stub file for reflex/components/radix/themes/components/dropdown_menu.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Any, Dict, List, Literal, Union
+from reflex.components.component import ComponentNamespace
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+from ..base import LiteralAccentColor, RadixThemesComponent
+
+LiteralDirType = Literal["ltr", "rtl"]
+LiteralSizeType = Literal["1", "2"]
+LiteralVariantType = Literal["solid", "soft"]
+LiteralSideType = Literal["top", "right", "bottom", "left"]
+LiteralAlignType = Literal["start", "center", "end"]
+LiteralStickyType = Literal["partial", "always"]
+
+class DropdownMenuRoot(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        default_open: Optional[Union[Var[bool], bool]] = None,
+        open: Optional[Union[Var[bool], bool]] = None,
+        modal: Optional[Union[Var[bool], bool]] = None,
+        dir: Optional[Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DropdownMenuRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            default_open: The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
+            open: The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
+            modal: The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers. Defaults to True.
+            dir: The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class DropdownMenuTrigger(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DropdownMenuTrigger":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class DropdownMenuContent(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[Literal["1", "2"]], Literal["1", "2"]]] = None,
+        variant: Optional[
+            Union[Var[Literal["solid", "soft"]], Literal["solid", "soft"]]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        loop: Optional[Union[Var[bool], bool]] = None,
+        force_mount: Optional[Union[Var[bool], bool]] = None,
+        side: Optional[
+            Union[
+                Var[Literal["top", "right", "bottom", "left"]],
+                Literal["top", "right", "bottom", "left"],
+            ]
+        ] = None,
+        side_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
+        align: Optional[
+            Union[
+                Var[Literal["start", "center", "end"]],
+                Literal["start", "center", "end"],
+            ]
+        ] = None,
+        align_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
+        avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        collision_padding: Optional[
+            Union[
+                Var[Union[float, int, Dict[str, Union[float, int]]]],
+                Union[float, int, Dict[str, Union[float, int]]],
+            ]
+        ] = None,
+        arrow_padding: Optional[
+            Union[Var[Union[float, int]], Union[float, int]]
+        ] = None,
+        sticky: Optional[
+            Union[Var[Literal["partial", "always"]], Literal["partial", "always"]]
+        ] = None,
+        hide_when_detached: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_close_auto_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_escape_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_interact_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_pointer_down_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DropdownMenuContent":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            size: Dropdown Menu Content size "1" - "2"
+            variant: Variant of Dropdown Menu Content: "solid" | "soft"
+            color_scheme: Override theme color for Dropdown Menu Content
+            high_contrast: Renders the Dropdown Menu Content in higher contrast
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            loop: When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
+            force_mount: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+            side: The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
+            side_offset: The distance in pixels from the trigger. Defaults to 0.
+            align: The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
+            align_offset: An offset in pixels from the "start" or "end" alignment options.
+            avoid_collisions: When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
+            collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+            arrow_padding: The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
+            sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+            hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class DropdownMenuSubTrigger(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        text_value: Optional[Union[Var[str], str]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DropdownMenuSubTrigger":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            disabled: When true, prevents the user from interacting with the item.
+            text_value: Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class DropdownMenuSub(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        open: Optional[Union[Var[bool], bool]] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DropdownMenuSub":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            open: The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
+            default_open: The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class DropdownMenuSubContent(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        loop: Optional[Union[Var[bool], bool]] = None,
+        force_mount: Optional[Union[Var[bool], bool]] = None,
+        side_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
+        align_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
+        avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        collision_padding: Optional[
+            Union[
+                Var[Union[float, int, Dict[str, Union[float, int]]]],
+                Union[float, int, Dict[str, Union[float, int]]],
+            ]
+        ] = None,
+        arrow_padding: Optional[
+            Union[Var[Union[float, int]], Union[float, int]]
+        ] = None,
+        sticky: Optional[
+            Union[Var[Literal["partial", "always"]], Literal["partial", "always"]]
+        ] = None,
+        hide_when_detached: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_escape_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_interact_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_pointer_down_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DropdownMenuSubContent":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            loop: When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
+            force_mount: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+            side_offset: The distance in pixels from the trigger. Defaults to 0.
+            align_offset: An offset in pixels from the "start" or "end" alignment options.
+            avoid_collisions: When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
+            collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+            arrow_padding: The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
+            sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+            hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class DropdownMenuItem(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        shortcut: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        text_value: Optional[Union[Var[str], str]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_select: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DropdownMenuItem":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            color_scheme: Override theme color for Dropdown Menu Item
+            shortcut: Shortcut to render a menu item as a link
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            disabled: When true, prevents the user from interacting with the item.
+            text_value: Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class DropdownMenuSeparator(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "DropdownMenuSeparator":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class DropdownMenu(ComponentNamespace):
+    root = staticmethod(DropdownMenuRoot.create)
+    trigger = staticmethod(DropdownMenuTrigger.create)
+    content = staticmethod(DropdownMenuContent.create)
+    sub_trigger = staticmethod(DropdownMenuSubTrigger.create)
+    sub = staticmethod(DropdownMenuSub.create)
+    sub_content = staticmethod(DropdownMenuSubContent.create)
+    item = staticmethod(DropdownMenuItem.create)
+    separator = staticmethod(DropdownMenuSeparator.create)
+
+menu = dropdown_menu = DropdownMenu()
diff --git a/reflex/components/radix/themes/components/dropdownmenu.pyi b/reflex/components/radix/themes/components/dropdownmenu.pyi
index 9fdee9eb6..8c3d55aaa 100644
--- a/reflex/components/radix/themes/components/dropdownmenu.pyi
+++ b/reflex/components/radix/themes/components/dropdownmenu.pyi
@@ -7,6 +7,7 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
+from types import SimpleNamespace
 from typing import Any, Dict, List, Literal, Union
 from reflex.constants import EventTriggers
 from reflex.vars import Var
@@ -914,11 +915,6 @@ class DropdownMenuSubContent(RadixThemesComponent):
                 ],
             ]
         ] = None,
-        size: Optional[Union[Var[Literal["1", "2"]], Literal["1", "2"]]] = None,
-        variant: Optional[
-            Union[Var[Literal["solid", "soft"]], Literal["solid", "soft"]]
-        ] = None,
-        high_contrast: Optional[Union[Var[bool], bool]] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         loop: Optional[Union[Var[bool], bool]] = None,
         force_mount: Optional[Union[Var[bool], bool]] = None,
@@ -1013,9 +1009,6 @@ class DropdownMenuSubContent(RadixThemesComponent):
             *children: Child components.
             color: map to CSS default color property.
             color_scheme: map to radix color property.
-            size: Dropdown Menu Sub Content size "1" - "2"
-            variant: Variant of Dropdown Menu Sub Content: "solid" | "soft"
-            high_contrast: Whether to render the component with higher contrast color against background
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
             loop: When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
             force_mount: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
@@ -1343,3 +1336,15 @@ class DropdownMenuSeparator(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class DropdownMenu(SimpleNamespace):
+    root = staticmethod(DropdownMenuRoot.create)
+    trigger = staticmethod(DropdownMenuTrigger.create)
+    content = staticmethod(DropdownMenuContent.create)
+    sub_trigger = staticmethod(DropdownMenuSubTrigger.create)
+    sub = staticmethod(DropdownMenuSub.create)
+    sub_content = staticmethod(DropdownMenuSubContent.create)
+    item = staticmethod(DropdownMenuItem.create)
+    separator = staticmethod(DropdownMenuSeparator.create)
+
+dropdown_menu = DropdownMenu()
diff --git a/reflex/components/radix/themes/components/hovercard.py b/reflex/components/radix/themes/components/hover_card.py
similarity index 77%
rename from reflex/components/radix/themes/components/hovercard.py
rename to reflex/components/radix/themes/components/hover_card.py
index 04d579749..aee639302 100644
--- a/reflex/components/radix/themes/components/hovercard.py
+++ b/reflex/components/radix/themes/components/hover_card.py
@@ -2,6 +2,7 @@
 from typing import Any, Dict, Literal
 
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -11,7 +12,7 @@ from ..base import (
 
 
 class HoverCardRoot(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """For sighted users to preview content available behind a link."""
 
     tag = "HoverCard.Root"
 
@@ -40,13 +41,13 @@ class HoverCardRoot(RadixThemesComponent):
 
 
 class HoverCardTrigger(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Wraps the link that will open the hover card."""
 
     tag = "HoverCard.Trigger"
 
 
 class HoverCardContent(el.Div, RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Contains the content of the open hover card."""
 
     tag = "HoverCard.Content"
 
@@ -61,3 +62,14 @@ class HoverCardContent(el.Div, RadixThemesComponent):
 
     # Whether or not the hover card should avoid collisions with its trigger.
     avoid_collisions: Var[bool]
+
+
+class HoverCard(ComponentNamespace):
+    """For sighted users to preview content available behind a link."""
+
+    root = __call__ = staticmethod(HoverCardRoot.create)
+    trigger = staticmethod(HoverCardTrigger.create)
+    content = staticmethod(HoverCardContent.create)
+
+
+hover_card = HoverCard()
diff --git a/reflex/components/radix/themes/components/hover_card.pyi b/reflex/components/radix/themes/components/hover_card.pyi
new file mode 100644
index 000000000..b67efe97e
--- /dev/null
+++ b/reflex/components/radix/themes/components/hover_card.pyi
@@ -0,0 +1,432 @@
+"""Stub file for reflex/components/radix/themes/components/hover_card.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Any, Dict, Literal
+from reflex import el
+from reflex.components.component import ComponentNamespace
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+from ..base import RadixThemesComponent
+
+class HoverCardRoot(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        default_open: Optional[Union[Var[bool], bool]] = None,
+        open: Optional[Union[Var[bool], bool]] = None,
+        open_delay: Optional[Union[Var[int], int]] = None,
+        close_delay: Optional[Union[Var[int], int]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HoverCardRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            default_open: The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.
+            open: The controlled open state of the hover card. Must be used in conjunction with onOpenChange.
+            open_delay: The duration from when the mouse enters the trigger until the hover card opens.
+            close_delay: The duration from when the mouse leaves the trigger until the hover card closes.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class HoverCardTrigger(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HoverCardTrigger":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class HoverCardContent(el.Div, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        side: Optional[
+            Union[
+                Var[Literal["top", "right", "bottom", "left"]],
+                Literal["top", "right", "bottom", "left"],
+            ]
+        ] = None,
+        side_offset: Optional[Union[Var[int], int]] = None,
+        align: Optional[
+            Union[
+                Var[Literal["start", "center", "end"]],
+                Literal["start", "center", "end"],
+            ]
+        ] = None,
+        avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HoverCardContent":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            side: The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+            side_offset: The distance in pixels from the trigger.
+            align: The preferred alignment against the trigger. May change when collisions occur.
+            avoid_collisions: Whether or not the hover card should avoid collisions with its trigger.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class HoverCard(ComponentNamespace):
+    root = staticmethod(HoverCardRoot.create)
+    trigger = staticmethod(HoverCardTrigger.create)
+    content = staticmethod(HoverCardContent.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        default_open: Optional[Union[Var[bool], bool]] = None,
+        open: Optional[Union[Var[bool], bool]] = None,
+        open_delay: Optional[Union[Var[int], int]] = None,
+        close_delay: Optional[Union[Var[int], int]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HoverCardRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            default_open: The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.
+            open: The controlled open state of the hover card. Must be used in conjunction with onOpenChange.
+            open_delay: The duration from when the mouse enters the trigger until the hover card opens.
+            close_delay: The duration from when the mouse leaves the trigger until the hover card closes.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+hover_card = HoverCard()
diff --git a/reflex/components/radix/themes/components/hovercard.pyi b/reflex/components/radix/themes/components/hovercard.pyi
index 270d44b1e..5ef0fc92b 100644
--- a/reflex/components/radix/themes/components/hovercard.pyi
+++ b/reflex/components/radix/themes/components/hovercard.pyi
@@ -7,6 +7,7 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
+from types import SimpleNamespace
 from typing import Any, Dict, Literal
 from reflex import el
 from reflex.constants import EventTriggers
@@ -440,9 +441,6 @@ class HoverCardContent(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -526,7 +524,6 @@ class HoverCardContent(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -540,3 +537,164 @@ class HoverCardContent(el.Div, RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class HoverCard(SimpleNamespace):
+    root = staticmethod(HoverCardRoot.create)
+    trigger = staticmethod(HoverCardTrigger.create)
+    content = staticmethod(HoverCardContent.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        color: Optional[Union[Var[str], str]] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
+        open: Optional[Union[Var[bool], bool]] = None,
+        open_delay: Optional[Union[Var[int], int]] = None,
+        close_delay: Optional[Union[Var[int], int]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HoverCardRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            color: map to CSS default color property.
+            color_scheme: map to radix color property.
+            default_open: The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.
+            open: The controlled open state of the hover card. Must be used in conjunction with onOpenChange.
+            open_delay: The duration from when the mouse enters the trigger until the hover card opens.
+            close_delay: The duration from when the mouse leaves the trigger until the hover card closes.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            _rename_props: props to change the name of
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+hover_card = HoverCard()
diff --git a/reflex/components/radix/themes/components/iconbutton.py b/reflex/components/radix/themes/components/icon_button.py
similarity index 92%
rename from reflex/components/radix/themes/components/iconbutton.py
rename to reflex/components/radix/themes/components/icon_button.py
index 9f5932075..47dc1be86 100644
--- a/reflex/components/radix/themes/components/iconbutton.py
+++ b/reflex/components/radix/themes/components/icon_button.py
@@ -4,7 +4,7 @@ from typing import Literal
 
 from reflex import el
 from reflex.components.component import Component
-from reflex.components.core import match
+from reflex.components.core.match import Match
 from reflex.components.lucide import Icon
 from reflex.style import Style
 from reflex.vars import Var
@@ -20,7 +20,7 @@ LiteralButtonSize = Literal["1", "2", "3", "4"]
 
 
 class IconButton(el.Button, RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """A button designed specifically for usage with a single icon."""
 
     tag = "IconButton"
 
@@ -77,7 +77,7 @@ class IconButton(el.Button, RadixThemesComponent):
                 }
                 children[0].size = RADIX_TO_LUCIDE_SIZE[props["size"]]
             else:
-                children[0].size = match(
+                children[0].size = Match.create(
                     props["size"],
                     ("1", "12px"),
                     ("2", "24px"),
@@ -89,3 +89,6 @@ class IconButton(el.Button, RadixThemesComponent):
 
     def _apply_theme(self, theme: Component):
         self.style = Style({"padding": "6px", **self.style})
+
+
+icon_button = IconButton.create
diff --git a/reflex/components/radix/themes/components/icon_button.pyi b/reflex/components/radix/themes/components/icon_button.pyi
new file mode 100644
index 000000000..7abd29682
--- /dev/null
+++ b/reflex/components/radix/themes/components/icon_button.pyi
@@ -0,0 +1,282 @@
+"""Stub file for reflex/components/radix/themes/components/icon_button.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Literal
+from reflex import el
+from reflex.components.component import Component
+from reflex.components.core.match import Match
+from reflex.components.lucide import Icon
+from reflex.style import Style
+from reflex.vars import Var
+from ..base import (
+    LiteralAccentColor,
+    LiteralRadius,
+    LiteralVariant,
+    RadixThemesComponent,
+)
+
+LiteralButtonSize = Literal["1", "2", "3", "4"]
+
+class IconButton(el.Button, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
+                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        auto_focus: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        form: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        form_action: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_enc_type: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_method: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_no_validate: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_target: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        name: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        value: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "IconButton":
+        """Create a IconButton component.
+
+        Args:
+            *children: The children of the component.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            size: Button size "1" - "4"
+            variant: Variant of button: "classic" | "solid" | "soft" | "surface" | "outline" | "ghost"
+            color_scheme: Override theme color for button
+            high_contrast: Whether to render the button with higher contrast color against background
+            radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
+            auto_focus: Automatically focuses the button when the page loads
+            disabled: Disables the button
+            form: Associates the button with a form (by id)
+            form_action: URL to send the form data to (for type="submit" buttons)
+            form_enc_type: How the form data should be encoded when submitting to the server (for type="submit" buttons)
+            form_method: HTTP method to use for sending form data (for type="submit" buttons)
+            form_no_validate: Bypasses form validation when submitting (for type="submit" buttons)
+            form_target: Specifies where to display the response after submitting the form (for type="submit" buttons)
+            name: Name of the button, used when sending form data
+            type: Type of the button (submit, reset, or button)
+            value: Value of the button, used when sending form data
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Raises:
+            ValueError: If no children are passed.
+
+        Returns:
+            The IconButton component.
+        """
+        ...
+
+icon_button = IconButton.create
diff --git a/reflex/components/radix/themes/components/iconbutton.pyi b/reflex/components/radix/themes/components/iconbutton.pyi
index df943b805..85fd73da1 100644
--- a/reflex/components/radix/themes/components/iconbutton.pyi
+++ b/reflex/components/radix/themes/components/iconbutton.pyi
@@ -10,7 +10,7 @@ from reflex.style import Style
 from typing import Literal
 from reflex import el
 from reflex.components.component import Component
-from reflex.components.core import match
+from reflex.components.core.match import Match
 from reflex.components.lucide import Icon
 from reflex.style import Style
 from reflex.vars import Var
@@ -173,9 +173,6 @@ class IconButton(el.Button, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -267,7 +264,6 @@ class IconButton(el.Button, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -284,3 +280,5 @@ class IconButton(el.Button, RadixThemesComponent):
             The IconButton component.
         """
         ...
+
+icon_button = IconButton.create
diff --git a/reflex/components/radix/themes/components/icons.py b/reflex/components/radix/themes/components/icons.py
deleted file mode 100644
index b2e5dee97..000000000
--- a/reflex/components/radix/themes/components/icons.py
+++ /dev/null
@@ -1,401 +0,0 @@
-"""Radix Icons."""
-
-
-from typing import List
-
-from reflex.components.component import Component
-from reflex.utils import format
-
-
-class RadixIconComponent(Component):
-    """A component used as basis for Radix icons."""
-
-    library = "@radix-ui/react-icons@^1.3.0"
-
-
-class Icon(RadixIconComponent):
-    """An image Icon."""
-
-    tag = "None"
-
-    @classmethod
-    def create(cls, *children, **props) -> Component:
-        """Initialize the Icon component.
-
-        Run some additional checks on Icon component.
-
-        Args:
-            *children: The positional arguments
-            **props: The keyword arguments
-
-        Raises:
-            AttributeError: The errors tied to bad usage of the Icon component.
-            ValueError: If the icon tag is invalid.
-
-        Returns:
-            The created component.
-        """
-        if children:
-            raise AttributeError(
-                f"Passing children to Icon component is not allowed: remove positional arguments {children} to fix"
-            )
-        if "tag" not in props.keys():
-            raise AttributeError("Missing 'tag' keyword-argument for Icon")
-        if type(props["tag"]) != str or props["tag"].lower() not in ICON_LIST:
-            raise ValueError(
-                f"Invalid icon tag: {props['tag']}. Please use one of the following: {sorted(ICON_LIST)}"
-            )
-        props["tag"] = format.to_title_case(props["tag"]) + "Icon"
-        props["alias"] = f"RadixThemes{props['tag']}"
-        return super().create(*children, **props)
-
-
-ICON_ABSTRACT: List[str] = [
-    "hamburger_menu",
-    "cross_1",
-    "dots_vertical",
-    "dots_horizontal",
-    "plus",
-    "minus",
-    "check",
-    "cross_2",
-    "check_circled",
-    "cross_circled",
-    "plus_circled",
-    "minus_circled",
-    "question_mark",
-    "question_mark_circled",
-    "info_circled",
-    "accessibility",
-    "exclamation_triangle",
-    "share_1",
-    "share_2",
-    "external_link",
-    "open_in_new_window",
-    "enter",
-    "exit",
-    "download",
-    "upload",
-    "reset",
-    "reload",
-    "update",
-    "enter_full_screen",
-    "exit_full_screen",
-    "drag_handle_vertical",
-    "drag_handle_horizontal",
-    "drag_handle_dots_1",
-    "drag_handle_dots_2",
-    "dot",
-    "dot_filled",
-    "commit",
-    "slash",
-    "circle",
-    "circle_backslash",
-    "half_1",
-    "half_2",
-    "view_none",
-    "view_horizontal",
-    "view_vertical",
-    "view_grid",
-    "copy",
-    "square",
-]
-ICON_ALIGNS: List[str] = [
-    "align_top",
-    "align_center_vertically",
-    "align_bottom",
-    "stretch_vertically",
-    "align_left",
-    "align_center_horizontally",
-    "align_right",
-    "stretch_horizontally",
-    "space_between_horizontally",
-    "space_evenly_horizontally",
-    "space_between_vertically",
-    "space_evenly_vertically",
-    "pin_left",
-    "pin_right",
-    "pin_top",
-    "pin_bottom",
-]
-ICON_ARROWS: List[str] = [
-    "arrow_left",
-    "arrow_right",
-    "arrow_up",
-    "arrow_down",
-    "arrow_top_left",
-    "arrow_top_right",
-    "arrow_bottom_left",
-    "arrow_bottom_right",
-    "chevron_left",
-    "chevron_right",
-    "chevron_up",
-    "chevron_down",
-    "double_arrow_down",
-    "double_arrow_right",
-    "double_arrow_left",
-    "double_arrow_up",
-    "thick_arrow_up",
-    "thick_arrow_down",
-    "thick_arrow_right",
-    "thick_arrow_left",
-    "triangle_right",
-    "triangle_left",
-    "triangle_down",
-    "triangle_up",
-    "caret_down",
-    "caret_up",
-    "caret_left",
-    "caret_right",
-    "caret_sort",
-    "width",
-    "height",
-    "size",
-    "move",
-    "all_sides",
-]
-ICON_BORDERS: List[str] = [
-    "border_all",
-    "border_split",
-    "border_none",
-    "border_left",
-    "border_right",
-    "border_top",
-    "border_bottom",
-    "border_width",
-    "corners",
-    "corner_top_left",
-    "corner_top_right",
-    "corner_bottom_right",
-    "corner_bottom_left",
-    "border_style",
-    "border_solid",
-    "border_dashed",
-    "border_dotted",
-]
-ICON_COMPONENTS: List[str] = [
-    "box",
-    "aspect_ratio",
-    "container",
-    "section",
-    "layout",
-    "grid",
-    "table",
-    "image",
-    "switch",
-    "checkbox",
-    "radiobutton",
-    "avatar",
-    "button",
-    "badge",
-    "input",
-    "slider",
-    "quote",
-    "code",
-    "list_bullet",
-    "dropdown_menu",
-    "video",
-    "pie_chart",
-    "calendar",
-    "dashboard",
-    "activity_log",
-    "bar_chart",
-    "divider_horizontal",
-    "divider_vertical",
-]
-ICON_DESIGN: List[str] = [
-    "frame",
-    "crop",
-    "layers",
-    "stack",
-    "tokens",
-    "component_1",
-    "component_2",
-    "component_instance",
-    "component_none",
-    "component_boolean",
-    "component_placeholder",
-    "opacity",
-    "blending_mode",
-    "mask_on",
-    "mask_off",
-    "color_wheel",
-    "shadow",
-    "shadow_none",
-    "shadow_inner",
-    "shadow_outer",
-    "value",
-    "value_none",
-    "zoom_in",
-    "zoom_out",
-    "transparency_grid",
-    "group",
-    "dimensions",
-    "rotate_counter_clockwise",
-    "columns",
-    "rows",
-    "transform",
-    "box_model",
-    "padding",
-    "margin",
-    "angle",
-    "cursor_arrow",
-    "cursor_text",
-    "column_spacing",
-    "row_spacing",
-]
-ICON_LOGOS: List[str] = [
-    "modulz_logo",
-    "stitches_logo",
-    "figma_logo",
-    "framer_logo",
-    "sketch_logo",
-    "twitter_logo",
-    "icon_jar_logo",
-    "git_hub_logo",
-    "code_sandbox_logo",
-    "notion_logo",
-    "discord_logo",
-    "instagram_logo",
-    "linked_in_logo",
-]
-ICON_MUSIC: List[str] = [
-    "play",
-    "resume",
-    "pause",
-    "stop",
-    "track_previous",
-    "track_next",
-    "loop",
-    "shuffle",
-    "speaker_loud",
-    "speaker_moderate",
-    "speaker_quiet",
-    "speaker_off",
-]
-ICON_OBJECTS: List[str] = [
-    "magnifying_glass",
-    "gear",
-    "bell",
-    "home",
-    "lock_closed",
-    "lock_open_1",
-    "lock_open_2",
-    "backpack",
-    "camera",
-    "paper_plane",
-    "rocket",
-    "envelope_closed",
-    "envelope_open",
-    "chat_bubble",
-    "link_1",
-    "link_2",
-    "link_break_1",
-    "link_break_2",
-    "link_none_1",
-    "link_none_2",
-    "trash",
-    "pencil_1",
-    "pencil_2",
-    "bookmark",
-    "bookmark_filled",
-    "drawing_pin",
-    "drawing_pin_filled",
-    "sewing_pin",
-    "sewing_pin_filled",
-    "cube",
-    "archive",
-    "crumpled_paper",
-    "mix",
-    "mixer_horizontal",
-    "mixer_vertical",
-    "file",
-    "file_minus",
-    "file_plus",
-    "file_text",
-    "reader",
-    "card_stack",
-    "card_stack_plus",
-    "card_stack_minus",
-    "id_card",
-    "crosshair_1",
-    "crosshair_2",
-    "target",
-    "globe",
-    "disc",
-    "sun",
-    "moon",
-    "clock",
-    "timer",
-    "counter_clockwise_clock",
-    "countdown_timer",
-    "stopwatch",
-    "lap_timer",
-    "lightning_bolt",
-    "magic_wand",
-    "face",
-    "person",
-    "eye_open",
-    "eye_none",
-    "eye_closed",
-    "hand",
-    "ruler_horizontal",
-    "ruler_square",
-    "clipboard",
-    "clipboard_copy",
-    "desktop",
-    "laptop",
-    "mobile",
-    "keyboard",
-    "star",
-    "star_filled",
-    "heart",
-    "heart_filled",
-    "scissors",
-    "hobby_knife",
-    "eraser",
-    "cookie",
-]
-ICON_TYPOGRAPHY: List[str] = [
-    "font_style",
-    "font_italic",
-    "font_roman",
-    "font_bold",
-    "letter_case_lowercase",
-    "letter_case_capitalize",
-    "letter_case_uppercase",
-    "letter_case_toggle",
-    "letter_spacing",
-    "align_baseline",
-    "font_size",
-    "font_family",
-    "heading",
-    "text",
-    "text_none",
-    "line_height",
-    "underline",
-    "strikethrough",
-    "overline",
-    "pilcrow",
-    "text_align_left",
-    "text_align_center",
-    "text_align_right",
-    "text_align_justify",
-    "text_align_top",
-    "text_align_middle",
-    "text_align_bottom",
-    "dash",
-]
-
-ICON_LIST: List[str] = [
-    *ICON_ABSTRACT,
-    *ICON_ALIGNS,
-    *ICON_ARROWS,
-    *ICON_BORDERS,
-    *ICON_COMPONENTS,
-    *ICON_DESIGN,
-    *ICON_LOGOS,
-    *ICON_MUSIC,
-    *ICON_OBJECTS,
-    *ICON_TYPOGRAPHY,
-]
diff --git a/reflex/components/radix/themes/components/icons.pyi b/reflex/components/radix/themes/components/icons.pyi
deleted file mode 100644
index c7213c5e5..000000000
--- a/reflex/components/radix/themes/components/icons.pyi
+++ /dev/null
@@ -1,189 +0,0 @@
-"""Stub file for reflex/components/radix/themes/components/icons.py"""
-# ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
-# ------------------------------------------------------
-
-from typing import Any, Dict, Literal, Optional, Union, overload
-from reflex.vars import Var, BaseVar, ComputedVar
-from reflex.event import EventChain, EventHandler, EventSpec
-from reflex.style import Style
-from typing import List
-from reflex.components.component import Component
-from reflex.utils import format
-
-class RadixIconComponent(Component):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_double_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_focus: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_down: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_scroll: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        **props
-    ) -> "RadixIconComponent":
-        """Create the component.
-
-        Args:
-            *children: The children of the component.
-            style: The style of the component.
-            key: A unique key for the component.
-            id: The id for the component.
-            class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
-            custom_attrs: custom attribute
-            **props: The props of the component.
-
-        Returns:
-            The component.
-
-        Raises:
-            TypeError: If an invalid child is passed.
-        """
-        ...
-
-class Icon(RadixIconComponent):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_double_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_focus: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_down: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_scroll: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        **props
-    ) -> "Icon":
-        """Initialize the Icon component.
-
-        Run some additional checks on Icon component.
-
-        Args:
-            *children: The positional arguments
-            style: The style of the component.
-            key: A unique key for the component.
-            id: The id for the component.
-            class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
-            custom_attrs: custom attribute
-            **props: The keyword arguments
-
-        Raises:
-            AttributeError: The errors tied to bad usage of the Icon component.
-            ValueError: If the icon tag is invalid.
-
-        Returns:
-            The created component.
-        """
-        ...
-
-ICON_ABSTRACT: List[str]
-ICON_ALIGNS: List[str]
-ICON_ARROWS: List[str]
-ICON_BORDERS: List[str]
-ICON_COMPONENTS: List[str]
-ICON_DESIGN: List[str]
-ICON_LOGOS: List[str]
-ICON_MUSIC: List[str]
-ICON_OBJECTS: List[str]
-ICON_TYPOGRAPHY: List[str]
-ICON_LIST: List[str]
diff --git a/reflex/components/radix/themes/components/inset.py b/reflex/components/radix/themes/components/inset.py
index 572609bd1..fcdafc6a0 100644
--- a/reflex/components/radix/themes/components/inset.py
+++ b/reflex/components/radix/themes/components/inset.py
@@ -12,7 +12,7 @@ LiteralButtonSize = Literal["1", "2", "3", "4"]
 
 
 class Inset(el.Div, RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Applies a negative margin to allow content to bleed into the surrounding container."""
 
     tag = "Inset"
 
@@ -42,3 +42,6 @@ class Inset(el.Div, RadixThemesComponent):
 
     # Padding on the left
     pl: Var[Union[int, str]]
+
+
+inset = Inset.create
diff --git a/reflex/components/radix/themes/components/inset.pyi b/reflex/components/radix/themes/components/inset.pyi
index c3f44ebe2..f4b1bc41f 100644
--- a/reflex/components/radix/themes/components/inset.pyi
+++ b/reflex/components/radix/themes/components/inset.pyi
@@ -20,69 +20,6 @@ class Inset(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         side: Optional[
             Union[
                 Var[Literal["x", "y", "top", "bottom", "right", "left"]],
@@ -142,15 +79,11 @@ class Inset(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -206,8 +139,6 @@ class Inset(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             side: The side
             clip: How to clip the element's content: "border-box" | "padding-box"
             p: Padding
@@ -233,13 +164,11 @@ class Inset(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -247,3 +176,5 @@ class Inset(el.Div, RadixThemesComponent):
             A new component instance.
         """
         ...
+
+inset = Inset.create
diff --git a/reflex/components/radix/themes/components/popover.py b/reflex/components/radix/themes/components/popover.py
index da6e97462..97250fc0e 100644
--- a/reflex/components/radix/themes/components/popover.py
+++ b/reflex/components/radix/themes/components/popover.py
@@ -2,6 +2,7 @@
 from typing import Any, Dict, Literal
 
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -11,7 +12,7 @@ from ..base import (
 
 
 class PopoverRoot(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Floating element for displaying rich content, triggered by a button."""
 
     tag = "Popover.Root"
 
@@ -34,13 +35,13 @@ class PopoverRoot(RadixThemesComponent):
 
 
 class PopoverTrigger(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Wraps the control that will open the popover."""
 
     tag = "Popover.Trigger"
 
 
 class PopoverContent(el.Div, RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Contains content to be rendered in the open popover."""
 
     tag = "Popover.Content"
 
@@ -80,6 +81,18 @@ class PopoverContent(el.Div, RadixThemesComponent):
 
 
 class PopoverClose(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Wraps the control that will close the popover."""
 
     tag = "Popover.Close"
+
+
+class Popover(ComponentNamespace):
+    """Floating element for displaying rich content, triggered by a button."""
+
+    root = staticmethod(PopoverRoot.create)
+    trigger = staticmethod(PopoverTrigger.create)
+    content = staticmethod(PopoverContent.create)
+    close = staticmethod(PopoverClose.create)
+
+
+popover = Popover()
diff --git a/reflex/components/radix/themes/components/popover.pyi b/reflex/components/radix/themes/components/popover.pyi
index 3d99b97df..d60597785 100644
--- a/reflex/components/radix/themes/components/popover.pyi
+++ b/reflex/components/radix/themes/components/popover.pyi
@@ -9,6 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, Literal
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import RadixThemesComponent
@@ -20,69 +21,6 @@ class PopoverRoot(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         open: Optional[Union[Var[bool], bool]] = None,
         modal: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
@@ -90,7 +28,6 @@ class PopoverRoot(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -149,8 +86,6 @@ class PopoverRoot(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             open: The controlled open state of the popover.
             modal: The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
             style: The style of the component.
@@ -158,7 +93,6 @@ class PopoverRoot(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -173,75 +107,11 @@ class PopoverTrigger(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -297,14 +167,11 @@ class PopoverTrigger(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -320,69 +187,6 @@ class PopoverContent(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         size: Optional[
             Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
         ] = None,
@@ -441,15 +245,11 @@ class PopoverContent(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -523,8 +323,6 @@ class PopoverContent(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             size: Size of the button: "1" | "2" | "3" | "4"
             side: The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
             side_offset: The distance in pixels from the anchor.
@@ -547,13 +345,11 @@ class PopoverContent(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -568,75 +364,11 @@ class PopoverClose(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -692,14 +424,11 @@ class PopoverClose(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -707,3 +436,11 @@ class PopoverClose(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class Popover(ComponentNamespace):
+    root = staticmethod(PopoverRoot.create)
+    trigger = staticmethod(PopoverTrigger.create)
+    content = staticmethod(PopoverContent.create)
+    close = staticmethod(PopoverClose.create)
+
+popover = Popover()
diff --git a/reflex/components/radix/themes/components/radiogroup.py b/reflex/components/radix/themes/components/radio_group.py
similarity index 90%
rename from reflex/components/radix/themes/components/radiogroup.py
rename to reflex/components/radix/themes/components/radio_group.py
index 8de4a4431..7ff901f37 100644
--- a/reflex/components/radix/themes/components/radiogroup.py
+++ b/reflex/components/radix/themes/components/radio_group.py
@@ -1,8 +1,9 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Any, Dict, List, Literal, Optional, Union
 
 import reflex as rx
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.themes.layout.flex import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import EventTriggers
@@ -10,7 +11,7 @@ from reflex.vars import Var
 
 from ..base import (
     LiteralAccentColor,
-    LiteralSize,
+    LiteralSpacing,
     RadixThemesComponent,
 )
 
@@ -86,10 +87,10 @@ class HighLevelRadioGroup(RadixThemesComponent):
     items: Var[List[str]]
 
     # The direction of the radio group.
-    direction: Var[LiteralFlexDirection] = Var.create_safe("column")
+    direction: Var[LiteralFlexDirection]
 
     # The gap between the items of the radio group.
-    gap: Var[LiteralSize] = Var.create_safe("2")
+    spacing: Var[LiteralSpacing] = Var.create_safe("2")
 
     # The size of the radio group.
     size: Var[Literal["1", "2", "3"]] = Var.create_safe("2")
@@ -137,7 +138,7 @@ class HighLevelRadioGroup(RadixThemesComponent):
             The created radio group component.
         """
         direction = props.pop("direction", "column")
-        gap = props.pop("gap", "2")
+        spacing = props.pop("spacing", "2")
         size = props.pop("size", "2")
         default_value = props.pop("default_value", "")
 
@@ -166,7 +167,7 @@ class HighLevelRadioGroup(RadixThemesComponent):
                 Flex.create(
                     RadioGroupItem.create(value=item_value),
                     item_value,
-                    gap="2",
+                    spacing="2",
                 ),
                 size=size,
                 as_="label",
@@ -179,9 +180,20 @@ class HighLevelRadioGroup(RadixThemesComponent):
             Flex.create(
                 *children,
                 direction=direction,
-                gap=gap,
+                spacing=spacing,
             ),
             size=size,
             default_value=default_value,
             **props,
         )
+
+
+class RadioGroup(ComponentNamespace):
+    """RadioGroup components namespace."""
+
+    root = staticmethod(RadioGroupRoot.create)
+    item = staticmethod(RadioGroupItem.create)
+    __call__ = staticmethod(HighLevelRadioGroup.create)
+
+
+radio = radio_group = RadioGroup()
diff --git a/reflex/components/radix/themes/components/radio_group.pyi b/reflex/components/radix/themes/components/radio_group.pyi
new file mode 100644
index 000000000..0fec881ba
--- /dev/null
+++ b/reflex/components/radix/themes/components/radio_group.pyi
@@ -0,0 +1,632 @@
+"""Stub file for reflex/components/radix/themes/components/radio_group.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Any, Dict, List, Literal, Optional, Union
+import reflex as rx
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.radix.themes.layout.flex import Flex
+from reflex.components.radix.themes.typography.text import Text
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+from ..base import LiteralAccentColor, LiteralSpacing, RadixThemesComponent
+
+LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
+
+class RadioGroupRoot(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "RadioGroupRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            size: The size of the radio group: "1" | "2" | "3"
+            variant: The variant of the radio group
+            color_scheme: The color of the radio group
+            high_contrast: Whether to render the radio group with higher contrast color against background
+            value: The controlled value of the radio item to check. Should be used in conjunction with on_change.
+            default_value: The initial value of checked radio item. Should be used in conjunction with on_change.
+            disabled: Whether the radio group is disabled
+            name: The name of the group. Submitted with its owning form as part of a name/value pair.
+            required: Whether the radio group is required
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class RadioGroupItem(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "RadioGroupItem":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            value: The value of the radio item to check. Should be used in conjunction with on_change.
+            disabled: When true, prevents the user from interacting with the radio item.
+            required: When true, indicates that the user must check the radio item before the owning form can be submitted.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class HighLevelRadioGroup(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        items: Optional[Union[Var[List[str]], List[str]]] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
+                Literal["row", "column", "row-reverse", "column-reverse"],
+            ]
+        ] = None,
+        spacing: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HighLevelRadioGroup":
+        """Create a radio group component.
+
+        Args:
+            items: The items of the radio group.
+            items: The items of the radio group.
+            direction: The direction of the radio group.
+            spacing: The gap between the items of the radio group.
+            size: The size of the radio group.
+            variant: The variant of the radio group
+            color_scheme: The color of the radio group
+            high_contrast: Whether to render the radio group with higher contrast color against background
+            value: The controlled value of the radio item to check. Should be used in conjunction with on_change.
+            default_value: The initial value of checked radio item. Should be used in conjunction with on_change.
+            disabled: Whether the radio group is disabled
+            name: The name of the group. Submitted with its owning form as part of a name/value pair.
+            required: Whether the radio group is required
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Additional properties to apply to the accordion item.
+
+        Returns:
+            The created radio group component.
+        """
+        ...
+
+class RadioGroup(ComponentNamespace):
+    root = staticmethod(RadioGroupRoot.create)
+    item = staticmethod(RadioGroupItem.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        items: Optional[Union[Var[List[str]], List[str]]] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
+                Literal["row", "column", "row-reverse", "column-reverse"],
+            ]
+        ] = None,
+        spacing: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HighLevelRadioGroup":
+        """Create a radio group component.
+
+        Args:
+            items: The items of the radio group.
+            items: The items of the radio group.
+            direction: The direction of the radio group.
+            spacing: The gap between the items of the radio group.
+            size: The size of the radio group.
+            variant: The variant of the radio group
+            color_scheme: The color of the radio group
+            high_contrast: Whether to render the radio group with higher contrast color against background
+            value: The controlled value of the radio item to check. Should be used in conjunction with on_change.
+            default_value: The initial value of checked radio item. Should be used in conjunction with on_change.
+            disabled: Whether the radio group is disabled
+            name: The name of the group. Submitted with its owning form as part of a name/value pair.
+            required: Whether the radio group is required
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Additional properties to apply to the accordion item.
+
+        Returns:
+            The created radio group component.
+        """
+        ...
+
+radio = radio_group = RadioGroup()
diff --git a/reflex/components/radix/themes/components/radiogroup.pyi b/reflex/components/radix/themes/components/radiogroup.pyi
index a0d3ffd91..6540428fc 100644
--- a/reflex/components/radix/themes/components/radiogroup.pyi
+++ b/reflex/components/radix/themes/components/radiogroup.pyi
@@ -1,4 +1,5 @@
 """Stub file for reflex/components/radix/themes/components/radiogroup.py"""
+
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
@@ -7,6 +8,7 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
+from types import SimpleNamespace
 from typing import Any, Dict, List, Literal, Optional, Union
 import reflex as rx
 from reflex.components.component import Component
@@ -14,7 +16,7 @@ from reflex.components.radix.themes.layout.flex import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import EventTriggers
 from reflex.vars import Var
-from ..base import LiteralAccentColor, LiteralSize, RadixThemesComponent
+from ..base import LiteralAccentColor, LiteralSpacing, RadixThemesComponent
 
 LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
 
@@ -108,7 +110,6 @@ class RadioGroupRoot(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -182,7 +183,6 @@ class RadioGroupRoot(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -268,7 +268,6 @@ class RadioGroupItem(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -334,7 +333,6 @@ class RadioGroupItem(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -356,7 +354,7 @@ class HighLevelRadioGroup(RadixThemesComponent):
                 Literal["row", "column", "row-reverse", "column-reverse"],
             ]
         ] = None,
-        gap: Optional[
+        spacing: Optional[
             Union[
                 Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
                 Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
@@ -444,7 +442,6 @@ class HighLevelRadioGroup(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -499,7 +496,7 @@ class HighLevelRadioGroup(RadixThemesComponent):
             items: The items of the radio group.
             items: The items of the radio group.
             direction: The direction of the radio group.
-            gap: The gap between the items of the radio group.
+            spacing: The gap between the items of the radio group.
             size: The size of the radio group.
             variant: The variant of the radio group
             color_scheme: The color of the radio group
@@ -514,7 +511,6 @@ class HighLevelRadioGroup(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Additional properties to apply to the accordion item.
 
@@ -522,3 +518,184 @@ class HighLevelRadioGroup(RadixThemesComponent):
             The created radio group component.
         """
         ...
+
+class RadioGroup(SimpleNamespace):
+    root = staticmethod(RadioGroupRoot.create)
+    item = staticmethod(RadioGroupItem.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        items: Optional[Union[Var[List[str]], List[str]]] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
+                Literal["row", "column", "row-reverse", "column-reverse"],
+            ]
+        ] = None,
+        spacing: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HighLevelRadioGroup":
+        """Create a radio group component.
+
+        Args:
+            items: The items of the radio group.
+            items: The items of the radio group.
+            direction: The direction of the radio group.
+            spacing: The gap between the items of the radio group.
+            size: The size of the radio group.
+            variant: The variant of the radio group
+            color_scheme: The color of the radio group
+            high_contrast: Whether to render the radio group with higher contrast color against background
+            value: The controlled value of the radio item to check. Should be used in conjunction with on_change.
+            default_value: The initial value of checked radio item. Should be used in conjunction with on_change.
+            disabled: Whether the radio group is disabled
+            name: The name of the group. Submitted with its owning form as part of a name/value pair.
+            required: Whether the radio group is required
+            style: Props to rename  The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Additional properties to apply to the accordion item.
+
+        Returns:
+            The created radio group component.
+        """
+        ...
+
+radio_group = RadioGroup()
diff --git a/reflex/components/radix/themes/components/scrollarea.py b/reflex/components/radix/themes/components/scroll_area.py
similarity index 78%
rename from reflex/components/radix/themes/components/scrollarea.py
rename to reflex/components/radix/themes/components/scroll_area.py
index 77fa190ee..b7b79286b 100644
--- a/reflex/components/radix/themes/components/scrollarea.py
+++ b/reflex/components/radix/themes/components/scroll_area.py
@@ -4,7 +4,6 @@ from typing import Literal
 from reflex.vars import Var
 
 from ..base import (
-    LiteralRadius,
     RadixThemesComponent,
 )
 
@@ -14,17 +13,14 @@ class ScrollArea(RadixThemesComponent):
 
     tag = "ScrollArea"
 
-    # The size of the radio group: "1" | "2" | "3"
-    size: Var[Literal[1, 2, 3]]
-
-    # The radius of the radio group
-    radius: Var[LiteralRadius]
-
     # The alignment of the scroll area
     scrollbars: Var[Literal["vertical", "horizontal", "both"]]
 
     # Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. "auto" | "always" | "scroll" | "hover"
-    type_: Var[Literal["auto", "always", "scroll", "hover"]]
+    type: Var[Literal["auto", "always", "scroll", "hover"]]
 
     # If type is set to either "scroll" or "hover", this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.
     scroll_hide_delay: Var[int]
+
+
+scroll_area = ScrollArea.create
diff --git a/reflex/components/radix/themes/components/scroll_area.pyi b/reflex/components/radix/themes/components/scroll_area.pyi
new file mode 100644
index 000000000..676cc41ae
--- /dev/null
+++ b/reflex/components/radix/themes/components/scroll_area.pyi
@@ -0,0 +1,109 @@
+"""Stub file for reflex/components/radix/themes/components/scroll_area.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Literal
+from reflex.vars import Var
+from ..base import RadixThemesComponent
+
+class ScrollArea(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        scrollbars: Optional[
+            Union[
+                Var[Literal["vertical", "horizontal", "both"]],
+                Literal["vertical", "horizontal", "both"],
+            ]
+        ] = None,
+        type: Optional[
+            Union[
+                Var[Literal["auto", "always", "scroll", "hover"]],
+                Literal["auto", "always", "scroll", "hover"],
+            ]
+        ] = None,
+        scroll_hide_delay: Optional[Union[Var[int], int]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ScrollArea":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            scrollbars: The alignment of the scroll area
+            type: Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. "auto" | "always" | "scroll" | "hover"
+            scroll_hide_delay: If type is set to either "scroll" or "hover", this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+scroll_area = ScrollArea.create
diff --git a/reflex/components/radix/themes/components/scrollarea.pyi b/reflex/components/radix/themes/components/scrollarea.pyi
index d2fe5e141..029b0d6b1 100644
--- a/reflex/components/radix/themes/components/scrollarea.pyi
+++ b/reflex/components/radix/themes/components/scrollarea.pyi
@@ -9,7 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
 from reflex.vars import Var
-from ..base import LiteralRadius, RadixThemesComponent
+from ..base import RadixThemesComponent
 
 class ScrollArea(RadixThemesComponent):
     @overload
@@ -80,13 +80,6 @@ class ScrollArea(RadixThemesComponent):
                 ],
             ]
         ] = None,
-        size: Optional[Union[Var[Literal[1, 2, 3]], Literal[1, 2, 3]]] = None,
-        radius: Optional[
-            Union[
-                Var[Literal["none", "small", "medium", "large", "full"]],
-                Literal["none", "small", "medium", "large", "full"],
-            ]
-        ] = None,
         scrollbars: Optional[
             Union[
                 Var[Literal["vertical", "horizontal", "both"]],
@@ -163,8 +156,6 @@ class ScrollArea(RadixThemesComponent):
             *children: Child components.
             color: map to CSS default color property.
             color_scheme: map to radix color property.
-            size: The size of the radio group: "1" | "2" | "3"
-            radius: The radius of the radio group
             scrollbars: The alignment of the scroll area
             type_: Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. "auto" | "always" | "scroll" | "hover"
             scroll_hide_delay: If type is set to either "scroll" or "hover", this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.
@@ -181,3 +172,5 @@ class ScrollArea(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+scroll_area = ScrollArea.create
diff --git a/reflex/components/radix/themes/components/select.py b/reflex/components/radix/themes/components/select.py
index eab11dff3..9331f0b3e 100644
--- a/reflex/components/radix/themes/components/select.py
+++ b/reflex/components/radix/themes/components/select.py
@@ -2,7 +2,7 @@
 from typing import Any, Dict, List, Literal, Union
 
 import reflex as rx
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -12,8 +12,6 @@ from ..base import (
     RadixThemesComponent,
 )
 
-LiteralButtonSize = Literal[1, 2, 3, 4]
-
 
 class SelectRoot(RadixThemesComponent):
     """Displays a list of options for the user to pick from, triggered by a button."""
@@ -235,3 +233,19 @@ class HighLevelSelect(SelectRoot):
             ),
             **props,
         )
+
+
+class Select(ComponentNamespace):
+    """Select components namespace."""
+
+    root = staticmethod(SelectRoot.create)
+    trigger = staticmethod(SelectTrigger.create)
+    content = staticmethod(SelectContent.create)
+    group = staticmethod(SelectGroup.create)
+    item = staticmethod(SelectItem.create)
+    separator = staticmethod(SelectSeparator.create)
+    label = staticmethod(SelectLabel.create)
+    __call__ = staticmethod(HighLevelSelect.create)
+
+
+select = Select()
diff --git a/reflex/components/radix/themes/components/select.pyi b/reflex/components/radix/themes/components/select.pyi
index 57aa6d373..f0a002b77 100644
--- a/reflex/components/radix/themes/components/select.pyi
+++ b/reflex/components/radix/themes/components/select.pyi
@@ -9,13 +9,11 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, List, Literal, Union
 import reflex as rx
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import LiteralAccentColor, LiteralRadius, RadixThemesComponent
 
-LiteralButtonSize = Literal[1, 2, 3, 4]
-
 class SelectRoot(RadixThemesComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
@@ -23,69 +21,6 @@ class SelectRoot(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         size: Optional[
             Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
         ] = None,
@@ -101,7 +36,6 @@ class SelectRoot(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -163,8 +97,6 @@ class SelectRoot(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             size: The size of the select: "1" | "2" | "3"
             default_value: The value of the select when initially rendered. Use when you do not need to control the state of the select.
             value: The controlled value of the select. Should be used in conjunction with on_change.
@@ -173,12 +105,11 @@ class SelectRoot(RadixThemesComponent):
             name: The name of the select control when submitting the form.
             disabled: When True, prevents the user from interacting with select.
             required: When True, indicates that the user must select a value before the owning form can be submitted.
-            style: Props to rename  The style of the component.
+            style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -193,7 +124,12 @@ class SelectTrigger(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft", "ghost"]],
+                Literal["classic", "surface", "soft", "ghost"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -256,12 +192,6 @@ class SelectTrigger(RadixThemesComponent):
                 ],
             ]
         ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["classic", "surface", "soft", "ghost"]],
-                Literal["classic", "surface", "soft", "ghost"],
-            ]
-        ] = None,
         radius: Optional[
             Union[
                 Var[Literal["none", "small", "medium", "large", "full"]],
@@ -274,7 +204,6 @@ class SelectTrigger(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -330,9 +259,8 @@ class SelectTrigger(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             variant: Variant of the select trigger
+            color_scheme: The color of the select trigger
             radius: The radius of the select trigger
             placeholder: The placeholder of the select trigger
             style: The style of the component.
@@ -340,7 +268,6 @@ class SelectTrigger(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -356,7 +283,9 @@ class SelectContent(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        variant: Optional[
+            Union[Var[Literal["solid", "soft"]], Literal["solid", "soft"]]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -419,9 +348,6 @@ class SelectContent(RadixThemesComponent):
                 ],
             ]
         ] = None,
-        variant: Optional[
-            Union[Var[Literal["solid", "soft"]], Literal["solid", "soft"]]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         position: Optional[
             Union[
@@ -448,7 +374,6 @@ class SelectContent(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -513,9 +438,8 @@ class SelectContent(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             variant: The variant of the select content
+            color_scheme: The color of the select content
             high_contrast: Whether to render the select content with higher contrast color against background
             position: The positioning mode to use, item-aligned is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item. popper positions content in the same way as our other primitives, for example Popover or DropdownMenu.
             side: The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. Only available when position is set to popper.
@@ -527,7 +451,6 @@ class SelectContent(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -542,75 +465,11 @@ class SelectGroup(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -666,14 +525,11 @@ class SelectGroup(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -688,69 +544,6 @@ class SelectItem(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         value: Optional[Union[Var[str], str]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
@@ -758,7 +551,6 @@ class SelectItem(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -814,8 +606,6 @@ class SelectItem(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             value: The value given as data when submitting a form with a name.
             disabled: Whether the select item is disabled
             style: The style of the component.
@@ -823,7 +613,6 @@ class SelectItem(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -838,75 +627,11 @@ class SelectLabel(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -962,14 +687,11 @@ class SelectLabel(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -984,75 +706,11 @@ class SelectSeparator(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1108,14 +766,11 @@ class SelectSeparator(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -1224,7 +879,6 @@ class HighLevelSelect(SelectRoot):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1299,12 +953,11 @@ class HighLevelSelect(SelectRoot):
             name: The name of the select control when submitting the form.
             disabled: When True, prevents the user from interacting with select.
             required: When True, indicates that the user must select a value before the owning form can be submitted.
-            style: Props to rename  The style of the component.
+            style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Additional properties to apply to the select component.
 
@@ -1312,3 +965,198 @@ class HighLevelSelect(SelectRoot):
             The select component.
         """
         ...
+
+class Select(ComponentNamespace):
+    root = staticmethod(SelectRoot.create)
+    trigger = staticmethod(SelectTrigger.create)
+    content = staticmethod(SelectContent.create)
+    group = staticmethod(SelectGroup.create)
+    item = staticmethod(SelectItem.create)
+    separator = staticmethod(SelectSeparator.create)
+    label = staticmethod(SelectLabel.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        items: Optional[Union[Var[List[str]], List[str]]] = None,
+        placeholder: Optional[Union[Var[str], str]] = None,
+        label: Optional[Union[Var[str], str]] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft", "ghost"]],
+                Literal["classic", "surface", "soft", "ghost"],
+            ]
+        ] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        width: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
+        open: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HighLevelSelect":
+        """Create a select component.
+
+        Args:
+            items: The items of the select.
+            items: The items of the select.
+            placeholder: The placeholder of the select.
+            label: The label of the select.
+            color_scheme: The color of the select.
+            high_contrast: Whether to render the select with higher contrast color against background.
+            variant: The variant of the select.
+            radius: The radius of the select.
+            width: The width of the select.
+            size: The size of the select: "1" | "2" | "3"
+            default_value: The value of the select when initially rendered. Use when you do not need to control the state of the select.
+            value: The controlled value of the select. Should be used in conjunction with on_change.
+            default_open: The open state of the select when it is initially rendered. Use when you do not need to control its open state.
+            open: The controlled open state of the select. Must be used in conjunction with on_open_change.
+            name: The name of the select control when submitting the form.
+            disabled: When True, prevents the user from interacting with select.
+            required: When True, indicates that the user must select a value before the owning form can be submitted.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Additional properties to apply to the select component.
+
+        Returns:
+            The select component.
+        """
+        ...
+
+select = Select()
diff --git a/reflex/components/radix/themes/components/separator.py b/reflex/components/radix/themes/components/separator.py
index 80d369f04..92d2e8b85 100644
--- a/reflex/components/radix/themes/components/separator.py
+++ b/reflex/components/radix/themes/components/separator.py
@@ -12,7 +12,7 @@ LiteralSeperatorSize = Literal["1", "2", "3", "4"]
 
 
 class Separator(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Visually or semantically separates content."""
 
     tag = "Separator"
 
@@ -27,3 +27,7 @@ class Separator(RadixThemesComponent):
 
     # When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.
     decorative: Var[bool]
+
+
+# Alias to divider.
+divider = separator = Separator.create
diff --git a/reflex/components/radix/themes/components/separator.pyi b/reflex/components/radix/themes/components/separator.pyi
index 53540bd4d..be46643c1 100644
--- a/reflex/components/radix/themes/components/separator.pyi
+++ b/reflex/components/radix/themes/components/separator.pyi
@@ -19,7 +19,9 @@ class Separator(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -82,9 +84,6 @@ class Separator(RadixThemesComponent):
                 ],
             ]
         ] = None,
-        size: Optional[
-            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
-        ] = None,
         orientation: Optional[
             Union[
                 Var[Literal["horizontal", "vertical"]],
@@ -97,7 +96,6 @@ class Separator(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -153,9 +151,8 @@ class Separator(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             size: The size of the select: "1" | "2" | "3" | "4"
+            color_scheme: The color of the select
             orientation: The orientation of the separator.
             decorative: When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.
             style: The style of the component.
@@ -163,7 +160,6 @@ class Separator(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -171,3 +167,5 @@ class Separator(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+divider = separator = Separator.create
diff --git a/reflex/components/radix/themes/components/slider.py b/reflex/components/radix/themes/components/slider.py
index bed3d14b6..6d8bd90f1 100644
--- a/reflex/components/radix/themes/components/slider.py
+++ b/reflex/components/radix/themes/components/slider.py
@@ -12,7 +12,7 @@ from ..base import (
 
 
 class Slider(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Provides user selection from a range of values."""
 
     tag = "Slider"
 
@@ -106,3 +106,6 @@ class Slider(RadixThemesComponent):
             }
         )
         return super().create(*children, default_value=default_value, **props)
+
+
+slider = Slider.create
diff --git a/reflex/components/radix/themes/components/slider.pyi b/reflex/components/radix/themes/components/slider.pyi
index 63dfa3cd8..1c1935f60 100644
--- a/reflex/components/radix/themes/components/slider.pyi
+++ b/reflex/components/radix/themes/components/slider.pyi
@@ -124,7 +124,6 @@ class Slider(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -198,12 +197,11 @@ class Slider(RadixThemesComponent):
             step: The step value of the slider.
             disabled: Whether the slider is disabled
             orientation: The orientation of the slider.
-            style: Props to rename  The style of the component.
+            style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -211,3 +209,5 @@ class Slider(RadixThemesComponent):
             The component.
         """
         ...
+
+slider = Slider.create
diff --git a/reflex/components/radix/themes/components/switch.py b/reflex/components/radix/themes/components/switch.py
index ea3308819..14ac152b2 100644
--- a/reflex/components/radix/themes/components/switch.py
+++ b/reflex/components/radix/themes/components/switch.py
@@ -66,3 +66,6 @@ class Switch(RadixThemesComponent):
             **super().get_event_triggers(),
             EventTriggers.ON_CHANGE: lambda checked: [checked],
         }
+
+
+switch = Switch.create
diff --git a/reflex/components/radix/themes/components/switch.pyi b/reflex/components/radix/themes/components/switch.pyi
index 4696c63ba..cf2bf5ea8 100644
--- a/reflex/components/radix/themes/components/switch.pyi
+++ b/reflex/components/radix/themes/components/switch.pyi
@@ -21,7 +21,22 @@ class Switch(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        default_checked: Optional[Union[Var[bool], bool]] = None,
+        checked: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -84,22 +99,6 @@ class Switch(RadixThemesComponent):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        default_checked: Optional[Union[Var[bool], bool]] = None,
-        checked: Optional[Union[Var[bool], bool]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        required: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        size: Optional[
-            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
-        ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["classic", "surface", "soft"]],
-                Literal["classic", "surface", "soft"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         radius: Optional[
             Union[
@@ -111,7 +110,6 @@ class Switch(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -170,8 +168,6 @@ class Switch(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             default_checked: Whether the switch is checked by default
             checked: Whether the switch is checked
@@ -181,14 +177,14 @@ class Switch(RadixThemesComponent):
             value: The value associated with the "on" position
             size: Switch size "1" - "4"
             variant: Variant of switch: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for switch
             high_contrast: Whether to render the switch with higher contrast color against background
             radius: Override theme radius for switch: "none" | "small" | "full"
-            style: Props to rename  The style of the component.
+            style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -196,3 +192,5 @@ class Switch(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+switch = Switch.create
diff --git a/reflex/components/radix/themes/components/table.py b/reflex/components/radix/themes/components/table.py
index e627ebc14..a2b3bada3 100644
--- a/reflex/components/radix/themes/components/table.py
+++ b/reflex/components/radix/themes/components/table.py
@@ -1,7 +1,8 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import List, Literal, Union
+from typing import List, Literal
 
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.vars import Var
 
 from ..base import (
@@ -50,9 +51,6 @@ class TableColumnHeaderCell(el.Th, RadixThemesComponent):
     # The justification of the column
     justify: Var[Literal["start", "center", "end"]]
 
-    # width of the column
-    width: Var[Union[str, int]]
-
     _invalid_children: List[str] = [
         "TableBody",
         "TableHeader",
@@ -86,9 +84,6 @@ class TableCell(el.Td, RadixThemesComponent):
     # The justification of the column
     justify: Var[Literal["start", "center", "end"]]
 
-    # width of the column
-    width: Var[Union[str, int]]
-
     _invalid_children: List[str] = [
         "TableBody",
         "TableHeader",
@@ -106,9 +101,6 @@ class TableRowHeaderCell(el.Th, RadixThemesComponent):
     # The justification of the column
     justify: Var[Literal["start", "center", "end"]]
 
-    # width of the column
-    width: Var[Union[str, int]]
-
     _invalid_children: List[str] = [
         "TableBody",
         "TableHeader",
@@ -117,3 +109,18 @@ class TableRowHeaderCell(el.Th, RadixThemesComponent):
         "TableColumnHeaderCell",
         "TableRowHeaderCell",
     ]
+
+
+class Table(ComponentNamespace):
+    """Table components namespace."""
+
+    root = staticmethod(TableRoot.create)
+    header = staticmethod(TableHeader.create)
+    body = staticmethod(TableBody.create)
+    row = staticmethod(TableRow.create)
+    cell = staticmethod(TableCell.create)
+    column_header_cell = staticmethod(TableColumnHeaderCell.create)
+    row_header_cell = staticmethod(TableRowHeaderCell.create)
+
+
+table = Table()
diff --git a/reflex/components/radix/themes/components/table.pyi b/reflex/components/radix/themes/components/table.pyi
index 2a8df22da..5220601ce 100644
--- a/reflex/components/radix/themes/components/table.pyi
+++ b/reflex/components/radix/themes/components/table.pyi
@@ -7,8 +7,9 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import List, Literal, Union
+from typing import List, Literal
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.vars import Var
 from ..base import RadixThemesComponent
 
@@ -18,69 +19,6 @@ class TableRoot(el.Table, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         size: Optional[
             Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
         ] = None,
@@ -90,15 +28,6 @@ class TableRoot(el.Table, RadixThemesComponent):
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        background: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        border: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         summary: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -142,15 +71,11 @@ class TableRoot(el.Table, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -206,14 +131,9 @@ class TableRoot(el.Table, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             size: The size of the table: "1" | "2" | "3"
             variant: The variant of the table
             align: Alignment of the table
-            background: Background image for the table
-            bgcolor: Background color of the table
-            border: Specifies the width of the border around the table
             summary: Provides a summary of the table's purpose and structure
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -231,13 +151,11 @@ class TableRoot(el.Table, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -252,69 +170,6 @@ class TableHeader(el.Thead, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -358,15 +213,11 @@ class TableHeader(el.Thead, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -422,8 +273,6 @@ class TableHeader(el.Thead, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             align: Alignment of the content within the table header
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -441,13 +290,11 @@ class TableHeader(el.Thead, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -462,78 +309,12 @@ class TableRow(el.Tr, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         align: Optional[
             Union[
                 Var[Literal["start", "center", "end", "baseline"]],
                 Literal["start", "center", "end", "baseline"],
             ]
         ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -574,15 +355,11 @@ class TableRow(el.Tr, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -638,10 +415,7 @@ class TableRow(el.Tr, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             align: Alignment of the content within the table row
-            bgcolor: Background color of the table row
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -658,13 +432,11 @@ class TableRow(el.Tr, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -679,85 +451,15 @@ class TableColumnHeaderCell(el.Th, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         justify: Optional[
             Union[
                 Var[Literal["start", "center", "end"]],
                 Literal["start", "center", "end"],
             ]
         ] = None,
-        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        background: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         col_span: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -810,15 +512,11 @@ class TableColumnHeaderCell(el.Th, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -874,13 +572,8 @@ class TableColumnHeaderCell(el.Th, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             justify: The justification of the column
-            width: width of the column
             align: Alignment of the content within the table header cell
-            background: Background image for the table header cell
-            bgcolor: Background color of the table header cell
             col_span: Number of columns a header cell should span
             headers: IDs of the headers associated with this header cell
             row_span: Number of rows a header cell should span
@@ -901,13 +594,11 @@ class TableColumnHeaderCell(el.Th, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -922,75 +613,9 @@ class TableBody(el.Tbody, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -1031,15 +656,11 @@ class TableBody(el.Tbody, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1095,10 +716,7 @@ class TableBody(el.Tbody, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             align: Alignment of the content within the table body
-            bgcolor: Background color of the table body
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -1115,13 +733,11 @@ class TableBody(el.Tbody, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -1136,85 +752,15 @@ class TableCell(el.Td, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         justify: Optional[
             Union[
                 Var[Literal["start", "center", "end"]],
                 Literal["start", "center", "end"],
             ]
         ] = None,
-        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        background: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         col_span: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -1264,15 +810,11 @@ class TableCell(el.Td, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1328,13 +870,8 @@ class TableCell(el.Td, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             justify: The justification of the column
-            width: width of the column
             align: Alignment of the content within the table cell
-            background: Background image for the table cell
-            bgcolor: Background color of the table cell
             col_span: Number of columns a cell should span
             headers: IDs of the headers associated with this cell
             row_span: Number of rows a cell should span
@@ -1354,13 +891,11 @@ class TableCell(el.Td, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -1375,85 +910,15 @@ class TableRowHeaderCell(el.Th, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         justify: Optional[
             Union[
                 Var[Literal["start", "center", "end"]],
                 Literal["start", "center", "end"],
             ]
         ] = None,
-        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         align: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        background: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        bgcolor: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         col_span: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -1506,15 +971,11 @@ class TableRowHeaderCell(el.Th, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1570,13 +1031,8 @@ class TableRowHeaderCell(el.Th, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             justify: The justification of the column
-            width: width of the column
             align: Alignment of the content within the table header cell
-            background: Background image for the table header cell
-            bgcolor: Background color of the table header cell
             col_span: Number of columns a header cell should span
             headers: IDs of the headers associated with this header cell
             row_span: Number of rows a header cell should span
@@ -1597,13 +1053,11 @@ class TableRowHeaderCell(el.Th, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -1611,3 +1065,14 @@ class TableRowHeaderCell(el.Th, RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class Table(ComponentNamespace):
+    root = staticmethod(TableRoot.create)
+    header = staticmethod(TableHeader.create)
+    body = staticmethod(TableBody.create)
+    row = staticmethod(TableRow.create)
+    cell = staticmethod(TableCell.create)
+    column_header_cell = staticmethod(TableColumnHeaderCell.create)
+    row_header_cell = staticmethod(TableRowHeaderCell.create)
+
+table = Table()
diff --git a/reflex/components/radix/themes/components/tabs.py b/reflex/components/radix/themes/components/tabs.py
index 78b0c9315..b0a169741 100644
--- a/reflex/components/radix/themes/components/tabs.py
+++ b/reflex/components/radix/themes/components/tabs.py
@@ -1,6 +1,7 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import Any, Dict, List, Literal
 
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -10,7 +11,7 @@ from ..base import (
 
 
 class TabsRoot(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Set of content sections to be displayed one at a time."""
 
     tag = "Tabs.Root"
 
@@ -39,7 +40,7 @@ class TabsRoot(RadixThemesComponent):
 
 
 class TabsList(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Contains the triggers that sit alongside the active content."""
 
     tag = "Tabs.List"
 
@@ -48,7 +49,7 @@ class TabsList(RadixThemesComponent):
 
 
 class TabsTrigger(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """The button that activates its associated content."""
 
     tag = "Tabs.Trigger"
 
@@ -62,9 +63,21 @@ class TabsTrigger(RadixThemesComponent):
 
 
 class TabsContent(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Contains the content associated with each trigger."""
 
     tag = "Tabs.Content"
 
     # The value of the tab. Must be unique for each tab.
     value: Var[str]
+
+
+class Tabs(ComponentNamespace):
+    """Set of content sections to be displayed one at a time."""
+
+    root = __call__ = staticmethod(TabsRoot.create)
+    list = staticmethod(TabsList.create)
+    trigger = staticmethod(TabsTrigger.create)
+    content = staticmethod(TabsContent.create)
+
+
+tabs = Tabs()
diff --git a/reflex/components/radix/themes/components/tabs.pyi b/reflex/components/radix/themes/components/tabs.pyi
index bf51d5675..87b8df31d 100644
--- a/reflex/components/radix/themes/components/tabs.pyi
+++ b/reflex/components/radix/themes/components/tabs.pyi
@@ -8,6 +8,7 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, List, Literal
+from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import RadixThemesComponent
@@ -19,69 +20,6 @@ class TabsRoot(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         default_value: Optional[Union[Var[str], str]] = None,
         value: Optional[Union[Var[str], str]] = None,
         orientation: Optional[
@@ -95,7 +33,6 @@ class TabsRoot(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -154,17 +91,14 @@ class TabsRoot(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             default_value: The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.
             value: The controlled value of the tab that should be active. Use when you need to control the state of the tabs.
             orientation: The orientation of the tabs.
-            style: Props to rename  The style of the component.
+            style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -179,76 +113,12 @@ class TabsList(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         size: Optional[Union[Var[Literal["1", "2"]], Literal["1", "2"]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -304,15 +174,12 @@ class TabsList(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             size: Tabs size "1" - "2"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -327,69 +194,6 @@ class TabsTrigger(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         value: Optional[Union[Var[str], str]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
@@ -397,7 +201,6 @@ class TabsTrigger(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -453,8 +256,6 @@ class TabsTrigger(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             value: The value of the tab. Must be unique for each tab.
             disabled: Whether the tab is disabled
             style: The style of the component.
@@ -462,7 +263,6 @@ class TabsTrigger(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -477,76 +277,12 @@ class TabsContent(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         value: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -602,15 +338,12 @@ class TabsContent(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             value: The value of the tab. Must be unique for each tab.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -618,3 +351,101 @@ class TabsContent(RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class Tabs(ComponentNamespace):
+    root = staticmethod(TabsRoot.create)
+    list = staticmethod(TabsList.create)
+    trigger = staticmethod(TabsTrigger.create)
+    content = staticmethod(TabsContent.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        default_value: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        orientation: Optional[
+            Union[
+                Var[Literal["horizontal", "vertical"]],
+                Literal["horizontal", "vertical"],
+            ]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "TabsRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            default_value: The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.
+            value: The controlled value of the tab that should be active. Use when you need to control the state of the tabs.
+            orientation: The orientation of the tabs.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+tabs = Tabs()
diff --git a/reflex/components/radix/themes/components/textarea.py b/reflex/components/radix/themes/components/text_area.py
similarity index 99%
rename from reflex/components/radix/themes/components/textarea.py
rename to reflex/components/radix/themes/components/text_area.py
index db8d08dbc..2eec48631 100644
--- a/reflex/components/radix/themes/components/textarea.py
+++ b/reflex/components/radix/themes/components/text_area.py
@@ -101,3 +101,6 @@ class TextArea(RadixThemesComponent, el.Textarea):
             EventTriggers.ON_KEY_DOWN: lambda e0: [e0.key],
             EventTriggers.ON_KEY_UP: lambda e0: [e0.key],
         }
+
+
+text_area = TextArea.create
diff --git a/reflex/components/radix/themes/components/textarea.pyi b/reflex/components/radix/themes/components/text_area.pyi
similarity index 96%
rename from reflex/components/radix/themes/components/textarea.pyi
rename to reflex/components/radix/themes/components/text_area.pyi
index 105cf49af..3ac4d2daf 100644
--- a/reflex/components/radix/themes/components/textarea.pyi
+++ b/reflex/components/radix/themes/components/text_area.pyi
@@ -1,4 +1,4 @@
-"""Stub file for reflex/components/radix/themes/components/textarea.py"""
+"""Stub file for reflex/components/radix/themes/components/text_area.py"""
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
@@ -149,15 +149,11 @@ class TextArea(RadixThemesComponent, el.Textarea):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -253,13 +249,11 @@ class TextArea(RadixThemesComponent, el.Textarea):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -268,3 +262,5 @@ class TextArea(RadixThemesComponent, el.Textarea):
         """
         ...
     def get_event_triggers(self) -> Dict[str, Any]: ...
+
+text_area = TextArea.create
diff --git a/reflex/components/radix/themes/components/textfield.py b/reflex/components/radix/themes/components/text_field.py
similarity index 82%
rename from reflex/components/radix/themes/components/textfield.py
rename to reflex/components/radix/themes/components/text_field.py
index e65589081..74b88fd27 100644
--- a/reflex/components/radix/themes/components/textfield.py
+++ b/reflex/components/radix/themes/components/text_field.py
@@ -1,11 +1,10 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Any, Dict, Literal
 
-import reflex as rx
 from reflex.components import el
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.debounce import DebounceInput
-from reflex.components.radix.themes.components.icons import Icon
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -86,9 +85,6 @@ class TextFieldSlot(RadixThemesComponent):
 class Input(RadixThemesComponent):
     """High level wrapper for the Input component."""
 
-    # The icon to render before the input.
-    icon: Var[str]
-
     # Text field size "1" - "3"
     size: Var[LiteralTextFieldSize]
 
@@ -122,9 +118,15 @@ class Input(RadixThemesComponent):
     # Placeholder text in the input
     placeholder: Var[str]
 
+    # Indicates whether the input is read-only
+    read_only: Var[bool]
+
     # Indicates that the input is required
     required: Var[bool]
 
+    # Specifies the type of input
+    type: Var[str]
+
     # Value of the input
     value: Var[str]
 
@@ -138,34 +140,7 @@ class Input(RadixThemesComponent):
         Returns:
             The component.
         """
-        input_props = {
-            prop: props.pop(prop)
-            for prop in [
-                "auto_complete",
-                "default_value",
-                "disabled",
-                "max_length",
-                "min_length",
-                "name",
-                "placeholder",
-                "required",
-                "value",
-                "on_change",
-                "on_focus",
-                "on_blur",
-                "on_key_down",
-                "on_key_up",
-            ]
-            if prop in props
-        }
-
-        icon = props.pop("icon", None)
-
-        return TextFieldRoot.create(
-            TextFieldSlot.create(Icon.create(tag=icon)) if icon else rx.fragment(),
-            TextFieldInput.create(**input_props),
-            **props,
-        )
+        return TextFieldInput.create(**props)
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.
@@ -181,3 +156,15 @@ class Input(RadixThemesComponent):
             EventTriggers.ON_KEY_DOWN: lambda e0: [e0.key],
             EventTriggers.ON_KEY_UP: lambda e0: [e0.key],
         }
+
+
+class TextField(ComponentNamespace):
+    """TextField components namespace."""
+
+    root = staticmethod(TextFieldRoot.create)
+    input = staticmethod(TextFieldInput.create)
+    slot = staticmethod(TextFieldSlot.create)
+    __call__ = staticmethod(Input.create)
+
+
+text_field = TextField()
diff --git a/reflex/components/radix/themes/components/text_field.pyi b/reflex/components/radix/themes/components/text_field.pyi
new file mode 100644
index 000000000..24239f93d
--- /dev/null
+++ b/reflex/components/radix/themes/components/text_field.pyi
@@ -0,0 +1,1079 @@
+"""Stub file for reflex/components/radix/themes/components/text_field.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Any, Dict, Literal
+from reflex.components import el
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.debounce import DebounceInput
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+from ..base import LiteralAccentColor, LiteralRadius, RadixThemesComponent
+
+LiteralTextFieldSize = Literal["1", "2", "3"]
+LiteralTextFieldVariant = Literal["classic", "surface", "soft"]
+
+class TextFieldRoot(el.Div, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "TextFieldRoot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            size: Text field size "1" - "3"
+            variant: Variant of text field: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for text field
+            radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class TextFieldInput(el.Input, TextFieldRoot):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        accept: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        alt: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        auto_complete: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_focus: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        capture: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        checked: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dirname: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        disabled: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        form_action: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_enc_type: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_method: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_no_validate: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_target: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        list: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        max: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        max_length: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        min_length: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        min: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        multiple: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        name: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        pattern: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        placeholder: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        read_only: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        required: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        size: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        src: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        step: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        use_map: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        value: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "TextFieldInput":
+        """Create an Input component.
+
+        Args:
+            *children: The children of the component.
+            accept: Accepted types of files when the input is file type
+            alt: Alternate text for input type="image"
+            auto_complete: Whether the input should have autocomplete enabled
+            auto_focus: Automatically focuses the input when the page loads
+            capture: Captures media from the user (camera or microphone)
+            checked: Indicates whether the input is checked (for checkboxes and radio buttons)
+            dirname: Name part of the input to submit in 'dir' and 'name' pair when form is submitted
+            disabled: Disables the input
+            form: Associates the input with a form (by id)
+            form_action: URL to send the form data to (for type="submit" buttons)
+            form_enc_type: How the form data should be encoded when submitting to the server (for type="submit" buttons)
+            form_method: HTTP method to use for sending form data (for type="submit" buttons)
+            form_no_validate: Bypasses form validation when submitting (for type="submit" buttons)
+            form_target: Specifies where to display the response after submitting the form (for type="submit" buttons)
+            list: References a datalist for suggested options
+            max: Specifies the maximum value for the input
+            max_length: Specifies the maximum number of characters allowed in the input
+            min_length: Specifies the minimum number of characters required in the input
+            min: Specifies the minimum value for the input
+            multiple: Indicates whether multiple values can be entered in an input of the type email or file
+            name: Name of the input, used when sending form data
+            pattern: Regex pattern the input's value must match to be valid
+            placeholder: Placeholder text in the input
+            read_only: Indicates whether the input is read-only
+            required: Indicates that the input is required
+            size: Text field size "1" - "3"
+            src: URL for image inputs
+            step: Specifies the legal number intervals for an input
+            type: Specifies the type of input
+            use_map: Name of the image map used with the input
+            value: Value of the input
+            variant: Variant of text field: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for text field
+            radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+
+class TextFieldSlot(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "TextFieldSlot":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            color_scheme: Override theme color for text field slot
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Input(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        auto_complete: Optional[Union[Var[bool], bool]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        max_length: Optional[Union[Var[str], str]] = None,
+        min_length: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        placeholder: Optional[Union[Var[str], str]] = None,
+        read_only: Optional[Union[Var[bool], bool]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        type: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Input":
+        """Create an Input component.
+
+        Args:
+            size: Text field size "1" - "3"
+            variant: Variant of text field: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for text field
+            radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
+            auto_complete: Whether the input should have autocomplete enabled
+            default_value: The value of the input when initially rendered.
+            disabled: Disables the input
+            max_length: Specifies the maximum number of characters allowed in the input
+            min_length: Specifies the minimum number of characters required in the input
+            name: Name of the input, used when sending form data
+            placeholder: Placeholder text in the input
+            read_only: Indicates whether the input is read-only
+            required: Indicates that the input is required
+            type: Specifies the type of input
+            value: Value of the input
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+
+class TextField(ComponentNamespace):
+    root = staticmethod(TextFieldRoot.create)
+    input = staticmethod(TextFieldInput.create)
+    slot = staticmethod(TextFieldSlot.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        auto_complete: Optional[Union[Var[bool], bool]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        max_length: Optional[Union[Var[str], str]] = None,
+        min_length: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        placeholder: Optional[Union[Var[str], str]] = None,
+        read_only: Optional[Union[Var[bool], bool]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        type: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Input":
+        """Create an Input component.
+
+        Args:
+            size: Text field size "1" - "3"
+            variant: Variant of text field: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for text field
+            radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
+            auto_complete: Whether the input should have autocomplete enabled
+            default_value: The value of the input when initially rendered.
+            disabled: Disables the input
+            max_length: Specifies the maximum number of characters allowed in the input
+            min_length: Specifies the minimum number of characters required in the input
+            name: Name of the input, used when sending form data
+            placeholder: Placeholder text in the input
+            read_only: Indicates whether the input is read-only
+            required: Indicates that the input is required
+            type: Specifies the type of input
+            value: Value of the input
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
+text_field = TextField()
diff --git a/reflex/components/radix/themes/components/textfield.pyi b/reflex/components/radix/themes/components/textfield.pyi
index 706eec41b..a4df9f670 100644
--- a/reflex/components/radix/themes/components/textfield.pyi
+++ b/reflex/components/radix/themes/components/textfield.pyi
@@ -7,12 +7,13 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
+from types import SimpleNamespace
 from typing import Any, Dict, Literal
 import reflex as rx
 from reflex.components import el
 from reflex.components.component import Component
 from reflex.components.core.debounce import DebounceInput
-from reflex.components.radix.themes.components.icons import Icon
+from reflex.components.lucide.icon import Icon
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import LiteralAccentColor, LiteralRadius, RadixThemesComponent
@@ -144,9 +145,6 @@ class TextFieldRoot(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -229,7 +227,6 @@ class TextFieldRoot(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -288,9 +285,6 @@ class TextFieldInput(el.Input, TextFieldRoot):
         form_target: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         list: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         max: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         max_length: Optional[
@@ -326,9 +320,6 @@ class TextFieldInput(el.Input, TextFieldRoot):
         value: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         variant: Optional[
             Union[
                 Var[Literal["classic", "surface", "soft"]],
@@ -443,9 +434,6 @@ class TextFieldInput(el.Input, TextFieldRoot):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -527,7 +515,6 @@ class TextFieldInput(el.Input, TextFieldRoot):
             form_method: HTTP method to use for sending form data (for type="submit" buttons)
             form_no_validate: Bypasses form validation when submitting (for type="submit" buttons)
             form_target: Specifies where to display the response after submitting the form (for type="submit" buttons)
-            height: The height of the input (only for type="image")
             list: References a datalist for suggested options
             max: Specifies the maximum value for the input
             max_length: Specifies the maximum number of characters allowed in the input
@@ -545,7 +532,6 @@ class TextFieldInput(el.Input, TextFieldRoot):
             type: Specifies the type of input
             use_map: Name of the image map used with the input
             value: Value of the input
-            width: The width of the input (only for type="image")
             variant: Variant of text field: "classic" | "surface" | "soft"
             color_scheme: Override theme color for text field
             radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
@@ -565,7 +551,6 @@ class TextFieldInput(el.Input, TextFieldRoot):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -914,3 +899,194 @@ class Input(RadixThemesComponent):
         """
         ...
     def get_event_triggers(self) -> Dict[str, Any]: ...
+
+class TextField(SimpleNamespace):
+    root = staticmethod(TextFieldRoot.create)
+    input = staticmethod(TextFieldInput.create)
+    slot = staticmethod(TextFieldSlot.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        icon: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        auto_complete: Optional[Union[Var[bool], bool]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        max_length: Optional[Union[Var[str], str]] = None,
+        min_length: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        placeholder: Optional[Union[Var[str], str]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Input":
+        """Create an Input component.
+
+        Args:
+            icon: The icon to render before the input.
+            size: Text field size "1" - "3"
+            variant: Variant of text field: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for text field
+            radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
+            auto_complete: Whether the input should have autocomplete enabled
+            default_value: The value of the input when initially rendered.
+            disabled: Disables the input
+            max_length: Specifies the maximum number of characters allowed in the input
+            min_length: Specifies the minimum number of characters required in the input
+            name: Name of the input, used when sending form data
+            placeholder: Placeholder text in the input
+            required: Indicates that the input is required
+            value: Value of the input
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            _rename_props: props to change the name of
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
+text_field = TextField()
diff --git a/reflex/components/radix/themes/components/tooltip.py b/reflex/components/radix/themes/components/tooltip.py
index 74b9bef94..29bac80d0 100644
--- a/reflex/components/radix/themes/components/tooltip.py
+++ b/reflex/components/radix/themes/components/tooltip.py
@@ -114,3 +114,6 @@ class Tooltip(RadixThemesComponent):
             props[format.to_kebab_case(ARIA_LABEL_KEY)] = props.pop(ARIA_LABEL_KEY)
 
         return super().create(*children, **props)
+
+
+tooltip = Tooltip.create
diff --git a/reflex/components/radix/themes/components/tooltip.pyi b/reflex/components/radix/themes/components/tooltip.pyi
index 543e4eb25..531569ae2 100644
--- a/reflex/components/radix/themes/components/tooltip.pyi
+++ b/reflex/components/radix/themes/components/tooltip.pyi
@@ -67,7 +67,6 @@ class Tooltip(RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -152,7 +151,6 @@ class Tooltip(RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The keyword arguments
 
@@ -160,3 +158,5 @@ class Tooltip(RadixThemesComponent):
             The created component.
         """
         ...
+
+tooltip = Tooltip.create
diff --git a/reflex/components/radix/themes/layout/__init__.py b/reflex/components/radix/themes/layout/__init__.py
index 78e7a828f..ccc0b6f4c 100644
--- a/reflex/components/radix/themes/layout/__init__.py
+++ b/reflex/components/radix/themes/layout/__init__.py
@@ -5,9 +5,10 @@ from .center import Center
 from .container import Container
 from .flex import Flex
 from .grid import Grid
+from .list import ListItem, OrderedList, UnorderedList
 from .section import Section
 from .spacer import Spacer
-from .stack import HStack, VStack
+from .stack import HStack, Stack, VStack
 
 box = Box.create
 center = Center.create
@@ -16,5 +17,25 @@ flex = Flex.create
 grid = Grid.create
 section = Section.create
 spacer = Spacer.create
+stack = Stack.create
 hstack = HStack.create
 vstack = VStack.create
+list_item = ListItem.create
+ordered_list = OrderedList.create
+unordered_list = UnorderedList.create
+
+__all__ = [
+    "box",
+    "center",
+    "container",
+    "flex",
+    "grid",
+    "section",
+    "spacer",
+    "stack",
+    "hstack",
+    "vstack",
+    "list_item",
+    "ordered_list",
+    "unordered_list",
+]
diff --git a/reflex/components/radix/themes/layout/base.py b/reflex/components/radix/themes/layout/base.py
index cd02a5465..f18ed34a8 100644
--- a/reflex/components/radix/themes/layout/base.py
+++ b/reflex/components/radix/themes/layout/base.py
@@ -1,4 +1,5 @@
 """Declarative layout and common spacing props."""
+
 from __future__ import annotations
 
 from typing import Literal
@@ -7,7 +8,7 @@ from reflex.vars import Var
 
 from ..base import (
     CommonMarginProps,
-    LiteralSize,
+    LiteralSpacing,
     RadixThemesComponent,
 )
 
@@ -21,25 +22,25 @@ class LayoutComponent(CommonMarginProps, RadixThemesComponent):
     """
 
     # Padding: "0" - "9"
-    p: Var[LiteralSize]
+    p: Var[LiteralSpacing]
 
     # Padding horizontal: "0" - "9"
-    px: Var[LiteralSize]
+    px: Var[LiteralSpacing]
 
     # Padding vertical: "0" - "9"
-    py: Var[LiteralSize]
+    py: Var[LiteralSpacing]
 
     # Padding top: "0" - "9"
-    pt: Var[LiteralSize]
+    pt: Var[LiteralSpacing]
 
     # Padding right: "0" - "9"
-    pr: Var[LiteralSize]
+    pr: Var[LiteralSpacing]
 
     # Padding bottom: "0" - "9"
-    pb: Var[LiteralSize]
+    pb: Var[LiteralSpacing]
 
     # Padding left: "0" - "9"
-    pl: Var[LiteralSize]
+    pl: Var[LiteralSpacing]
 
     # Whether the element will take up the smallest possible space: "0" | "1"
     shrink: Var[LiteralBoolNumber]
diff --git a/reflex/components/radix/themes/layout/base.pyi b/reflex/components/radix/themes/layout/base.pyi
index a085807c9..11f1d1412 100644
--- a/reflex/components/radix/themes/layout/base.pyi
+++ b/reflex/components/radix/themes/layout/base.pyi
@@ -9,7 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
 from reflex.vars import Var
-from ..base import CommonMarginProps, LiteralSize, RadixThemesComponent
+from ..base import CommonMarginProps, LiteralSpacing, RadixThemesComponent
 
 LiteralBoolNumber = Literal["0", "1"]
 
@@ -19,153 +19,90 @@ class LayoutComponent(CommonMarginProps, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         p: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         px: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         py: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         pt: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         pr: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         pb: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         pl: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
         grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
         m: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         mx: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         my: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         mt: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         mr: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         mb: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         ml: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         style: Optional[Style] = None,
@@ -173,7 +110,6 @@ class LayoutComponent(CommonMarginProps, RadixThemesComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -229,8 +165,6 @@ class LayoutComponent(CommonMarginProps, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             p: Padding: "0" - "9"
             px: Padding horizontal: "0" - "9"
             py: Padding vertical: "0" - "9"
@@ -252,7 +186,6 @@ class LayoutComponent(CommonMarginProps, RadixThemesComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/layout/box.pyi b/reflex/components/radix/themes/layout/box.pyi
index f27ade65d..65c2e81a8 100644
--- a/reflex/components/radix/themes/layout/box.pyi
+++ b/reflex/components/radix/themes/layout/box.pyi
@@ -16,69 +16,6 @@ class Box(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -119,15 +56,11 @@ class Box(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -183,8 +116,6 @@ class Box(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -201,13 +132,11 @@ class Box(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/layout/center.py b/reflex/components/radix/themes/layout/center.py
index 1d3502980..b6a8faa8e 100644
--- a/reflex/components/radix/themes/layout/center.py
+++ b/reflex/components/radix/themes/layout/center.py
@@ -1,4 +1,5 @@
 """A center component."""
+
 from __future__ import annotations
 
 from reflex.components.component import Component
diff --git a/reflex/components/radix/themes/layout/center.pyi b/reflex/components/radix/themes/layout/center.pyi
index 9bbea0f1d..726a66f0a 100644
--- a/reflex/components/radix/themes/layout/center.pyi
+++ b/reflex/components/radix/themes/layout/center.pyi
@@ -16,76 +16,7 @@ class Center(Flex):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
-        display: Optional[
-            Union[
-                Var[Literal["none", "inline-flex", "flex"]],
-                Literal["none", "inline-flex", "flex"],
-            ]
-        ] = None,
         direction: Optional[
             Union[
                 Var[Literal["row", "column", "row-reverse", "column-reverse"]],
@@ -110,10 +41,10 @@ class Center(Flex):
                 Literal["nowrap", "wrap", "wrap-reverse"],
             ]
         ] = None,
-        gap: Optional[
+        spacing: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         access_key: Optional[
@@ -156,15 +87,11 @@ class Center(Flex):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -220,15 +147,12 @@ class Center(Flex):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            display: How to display the element: "none" | "inline-flex" | "flex"
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            gap: Gap between children: "0" - "9"
+            spacing: Gap between children: "0" - "9"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -245,13 +169,11 @@ class Center(Flex):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/layout/container.pyi b/reflex/components/radix/themes/layout/container.pyi
index 177cb8954..b45bfdae6 100644
--- a/reflex/components/radix/themes/layout/container.pyi
+++ b/reflex/components/radix/themes/layout/container.pyi
@@ -20,69 +20,6 @@ class Container(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         size: Optional[
             Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
         ] = None,
@@ -126,15 +63,11 @@ class Container(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -190,8 +123,6 @@ class Container(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             size: The size of the container: "1" - "4" (default "4")
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -209,13 +140,11 @@ class Container(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/layout/flex.py b/reflex/components/radix/themes/layout/flex.py
index 39dfdea41..ef7aed16c 100644
--- a/reflex/components/radix/themes/layout/flex.py
+++ b/reflex/components/radix/themes/layout/flex.py
@@ -1,7 +1,8 @@
 """Declarative layout and common spacing props."""
+
 from __future__ import annotations
 
-from typing import Literal
+from typing import Dict, Literal
 
 from reflex import el
 from reflex.vars import Var
@@ -9,12 +10,11 @@ from reflex.vars import Var
 from ..base import (
     LiteralAlign,
     LiteralJustify,
-    LiteralSize,
+    LiteralSpacing,
     RadixThemesComponent,
 )
 
 LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
-LiteralFlexDisplay = Literal["none", "inline-flex", "flex"]
 LiteralFlexWrap = Literal["nowrap", "wrap", "wrap-reverse"]
 
 
@@ -26,9 +26,6 @@ class Flex(el.Div, RadixThemesComponent):
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
 
-    # How to display the element: "none" | "inline-flex" | "flex"
-    display: Var[LiteralFlexDisplay]
-
     # How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
     direction: Var[LiteralFlexDirection]
 
@@ -42,4 +39,7 @@ class Flex(el.Div, RadixThemesComponent):
     wrap: Var[LiteralFlexWrap]
 
     # Gap between children: "0" - "9"
-    gap: Var[LiteralSize]
+    spacing: Var[LiteralSpacing]
+
+    # Reflex maps the "spacing" prop to "gap" prop.
+    _rename_props: Dict[str, str] = {"spacing": "gap"}
diff --git a/reflex/components/radix/themes/layout/flex.pyi b/reflex/components/radix/themes/layout/flex.pyi
index 5f1c8c2db..fe8c6d6b2 100644
--- a/reflex/components/radix/themes/layout/flex.pyi
+++ b/reflex/components/radix/themes/layout/flex.pyi
@@ -7,13 +7,12 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Literal
+from typing import Dict, Literal
 from reflex import el
 from reflex.vars import Var
-from ..base import LiteralAlign, LiteralJustify, LiteralSize, RadixThemesComponent
+from ..base import LiteralAlign, LiteralJustify, LiteralSpacing, RadixThemesComponent
 
 LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
-LiteralFlexDisplay = Literal["none", "inline-flex", "flex"]
 LiteralFlexWrap = Literal["nowrap", "wrap", "wrap-reverse"]
 
 class Flex(el.Div, RadixThemesComponent):
@@ -22,76 +21,7 @@ class Flex(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
-        display: Optional[
-            Union[
-                Var[Literal["none", "inline-flex", "flex"]],
-                Literal["none", "inline-flex", "flex"],
-            ]
-        ] = None,
         direction: Optional[
             Union[
                 Var[Literal["row", "column", "row-reverse", "column-reverse"]],
@@ -116,10 +46,10 @@ class Flex(el.Div, RadixThemesComponent):
                 Literal["nowrap", "wrap", "wrap-reverse"],
             ]
         ] = None,
-        gap: Optional[
+        spacing: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         access_key: Optional[
@@ -162,15 +92,11 @@ class Flex(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -226,15 +152,12 @@ class Flex(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            display: How to display the element: "none" | "inline-flex" | "flex"
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            gap: Gap between children: "0" - "9"
+            spacing: Gap between children: "0" - "9"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -251,13 +174,11 @@ class Flex(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/layout/grid.py b/reflex/components/radix/themes/layout/grid.py
index f9c9bd6c8..565703643 100644
--- a/reflex/components/radix/themes/layout/grid.py
+++ b/reflex/components/radix/themes/layout/grid.py
@@ -1,7 +1,8 @@
 """Declarative layout and common spacing props."""
+
 from __future__ import annotations
 
-from typing import Literal
+from typing import Dict, Literal
 
 from reflex import el
 from reflex.vars import Var
@@ -9,11 +10,10 @@ from reflex.vars import Var
 from ..base import (
     LiteralAlign,
     LiteralJustify,
-    LiteralSize,
+    LiteralSpacing,
     RadixThemesComponent,
 )
 
-LiteralGridDisplay = Literal["none", "inline-grid", "grid"]
 LiteralGridFlow = Literal["row", "column", "dense", "row-dense", "column-dense"]
 
 
@@ -25,9 +25,6 @@ class Grid(el.Div, RadixThemesComponent):
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
 
-    # How to display the element: "none" | "inline-grid" | "grid"
-    display: Var[LiteralGridDisplay]
-
     # Number of columns
     columns: Var[str]
 
@@ -44,10 +41,17 @@ class Grid(el.Div, RadixThemesComponent):
     justify: Var[LiteralJustify]
 
     # Gap between children: "0" - "9"
-    gap: Var[LiteralSize]
+    spacing: Var[LiteralSpacing]
 
     # Gap between children horizontal: "0" - "9"
-    gap_x: Var[LiteralSize]
+    spacing_x: Var[LiteralSpacing]
 
     # Gap between children vertical: "0" - "9"
-    gap_x: Var[LiteralSize]
+    spacing_y: Var[LiteralSpacing]
+
+    # Reflex maps the "spacing" prop to "gap" prop.
+    _rename_props: Dict[str, str] = {
+        "spacing": "gap",
+        "spacing_x": "gap_x",
+        "spacing_y": "gap_y",
+    }
diff --git a/reflex/components/radix/themes/layout/grid.pyi b/reflex/components/radix/themes/layout/grid.pyi
index 4ae5cc601..e6107f7de 100644
--- a/reflex/components/radix/themes/layout/grid.pyi
+++ b/reflex/components/radix/themes/layout/grid.pyi
@@ -7,12 +7,11 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Literal
+from typing import Dict, Literal
 from reflex import el
 from reflex.vars import Var
-from ..base import LiteralAlign, LiteralJustify, LiteralSize, RadixThemesComponent
+from ..base import LiteralAlign, LiteralJustify, LiteralSpacing, RadixThemesComponent
 
-LiteralGridDisplay = Literal["none", "inline-grid", "grid"]
 LiteralGridFlow = Literal["row", "column", "dense", "row-dense", "column-dense"]
 
 class Grid(el.Div, RadixThemesComponent):
@@ -21,76 +20,7 @@ class Grid(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
-        display: Optional[
-            Union[
-                Var[Literal["none", "inline-grid", "grid"]],
-                Literal["none", "inline-grid", "grid"],
-            ]
-        ] = None,
         columns: Optional[Union[Var[str], str]] = None,
         rows: Optional[Union[Var[str], str]] = None,
         flow: Optional[
@@ -111,16 +41,22 @@ class Grid(el.Div, RadixThemesComponent):
                 Literal["start", "center", "end", "between"],
             ]
         ] = None,
-        gap: Optional[
+        spacing: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
-        gap_x: Optional[
+        spacing_x: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        spacing_y: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         access_key: Optional[
@@ -163,15 +99,11 @@ class Grid(el.Div, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -227,17 +159,15 @@ class Grid(el.Div, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            display: How to display the element: "none" | "inline-grid" | "grid"
             columns: Number of columns
             rows: Number of rows
             flow: How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
-            gap: Gap between children: "0" - "9"
-            gap_x: Gap between children vertical: "0" - "9"
+            spacing: Gap between children: "0" - "9"
+            spacing_x: Gap between children horizontal: "0" - "9"
+            spacing_y: Gap between children vertical: "0" - "9"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -254,13 +184,11 @@ class Grid(el.Div, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/layout/list.py b/reflex/components/radix/themes/layout/list.py
new file mode 100644
index 000000000..8d458910b
--- /dev/null
+++ b/reflex/components/radix/themes/layout/list.py
@@ -0,0 +1,149 @@
+"""List components."""
+
+from typing import Iterable, Literal, Optional, Union
+
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.foreach import Foreach
+from reflex.components.el.elements.typography import Li
+from reflex.style import Style
+from reflex.vars import Var
+
+from .base import LayoutComponent
+from .flex import Flex
+
+LiteralListStyleTypeUnordered = Literal[
+    "none",
+    "disc",
+    "circle",
+    "square",
+]
+
+LiteralListStyleTypeOrdered = Literal[
+    "none",
+    "decimal",
+    "decimal-leading-zero",
+    "lower-roman",
+    "upper-roman",
+    "lower-greek",
+    "lower-latin",
+    "upper-latin",
+    "armenian",
+    "georgian",
+    "lower-alpha",
+    "upper-alpha",
+    "hiragana",
+    "katakana",
+]
+
+
+class BaseList(Flex, LayoutComponent):
+    """Base class for ordered and unordered lists."""
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        items: Optional[Union[Var[Iterable], Iterable]] = None,
+        list_style_type: str = "",
+        **props,
+    ):
+        """Create a list component.
+
+        Args:
+            *children: The children of the component.
+            items: A list of items to add to the list.
+            list_style_type: The style of the list.
+            **props: The properties of the component.
+
+        Returns:
+            The list component.
+        """
+        if not children and items is not None:
+            if isinstance(items, Var):
+                children = [Foreach.create(items, ListItem.create)]
+            else:
+                children = [ListItem.create(item) for item in items]
+        props["list_style_type"] = list_style_type
+        props["direction"] = "column"
+        style = props.setdefault("style", {})
+        style["list_style_position"] = "outside"
+        if "gap" in props:
+            style["gap"] = props["gap"]
+        return super().create(*children, **props)
+
+    def _apply_theme(self, theme: Component):
+        self.style = Style(
+            {
+                "direction": "column",
+                "list_style_position": "outside",
+                **self.style,
+            }
+        )
+
+
+class UnorderedList(BaseList):
+    """Display an unordered list."""
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        items: Optional[Var[Iterable]] = None,
+        list_style_type: LiteralListStyleTypeUnordered = "disc",
+        **props,
+    ):
+        """Create a unordered list component.
+
+        Args:
+            *children: The children of the component.
+            items: A list of items to add to the list.
+            list_style_type: The style of the list.
+            **props: The properties of the component.
+
+        Returns:
+            The list component.
+        """
+        return super().create(
+            *children, items=items, list_style_type=list_style_type, **props
+        )
+
+
+class OrderedList(BaseList):
+    """Display an ordered list."""
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        items: Optional[Var[Iterable]] = None,
+        list_style_type: LiteralListStyleTypeOrdered = "decimal",
+        **props,
+    ):
+        """Create an ordered list component.
+
+        Args:
+            *children: The children of the component.
+            items: A list of items to add to the list.
+            list_style_type: The style of the list.
+            **props: The properties of the component.
+
+        Returns:
+            The list component.
+        """
+        return super().create(
+            *children, items=items, list_style_type=list_style_type, **props
+        )
+
+
+class ListItem(Li):
+    """Display an item of an ordered or unordered list."""
+
+    ...
+
+
+class List(ComponentNamespace):
+    """List components."""
+
+    item = ListItem.create
+    ordered = OrderedList.create
+    unordered = UnorderedList.create
diff --git a/reflex/components/radix/themes/layout/list.pyi b/reflex/components/radix/themes/layout/list.pyi
new file mode 100644
index 000000000..4ee3f65dd
--- /dev/null
+++ b/reflex/components/radix/themes/layout/list.pyi
@@ -0,0 +1,1019 @@
+"""Stub file for reflex/components/radix/themes/layout/list.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Iterable, Literal, Optional, Union
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.foreach import Foreach
+from reflex.components.el.elements.typography import Li
+from reflex.style import Style
+from reflex.vars import Var
+from .base import LayoutComponent
+from .flex import Flex
+
+LiteralListStyleTypeUnordered = Literal["none", "disc", "circle", "square"]
+LiteralListStyleTypeOrdered = Literal[
+    "none",
+    "decimal",
+    "decimal-leading-zero",
+    "lower-roman",
+    "upper-roman",
+    "lower-greek",
+    "lower-latin",
+    "upper-latin",
+    "armenian",
+    "georgian",
+    "lower-alpha",
+    "upper-alpha",
+    "hiragana",
+    "katakana",
+]
+
+class BaseList(Flex, LayoutComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        items: Optional[Union[Union[Var[Iterable], Iterable], Iterable]] = None,
+        list_style_type: Optional[str] = "",
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
+                Literal["row", "column", "row-reverse", "column-reverse"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "baseline", "stretch"]],
+                Literal["start", "center", "end", "baseline", "stretch"],
+            ]
+        ] = None,
+        justify: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "between"]],
+                Literal["start", "center", "end", "between"],
+            ]
+        ] = None,
+        wrap: Optional[
+            Union[
+                Var[Literal["nowrap", "wrap", "wrap-reverse"]],
+                Literal["nowrap", "wrap", "wrap-reverse"],
+            ]
+        ] = None,
+        spacing: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        p: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        px: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        py: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pl: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+        grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseList":
+        """Create a list component.
+
+        Args:
+            *children: The children of the component.
+            items: A list of items to add to the list.
+            list_style_type: The style of the list.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
+            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
+            wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
+            spacing: Gap between children: "0" - "9"
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            p: Padding: "0" - "9"
+            px: Padding horizontal: "0" - "9"
+            py: Padding vertical: "0" - "9"
+            pt: Padding top: "0" - "9"
+            pr: Padding right: "0" - "9"
+            pb: Padding bottom: "0" - "9"
+            pl: Padding left: "0" - "9"
+            shrink: Whether the element will take up the smallest possible space: "0" | "1"
+            grow: Whether the element will take up the largest possible space: "0" | "1"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The list component.
+        """
+        ...
+
+class UnorderedList(BaseList):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        items: Optional[Union[Var[Iterable], Iterable]] = None,
+        list_style_type: Optional[Literal["none", "disc", "circle", "square"]] = "disc",
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
+                Literal["row", "column", "row-reverse", "column-reverse"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "baseline", "stretch"]],
+                Literal["start", "center", "end", "baseline", "stretch"],
+            ]
+        ] = None,
+        justify: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "between"]],
+                Literal["start", "center", "end", "between"],
+            ]
+        ] = None,
+        wrap: Optional[
+            Union[
+                Var[Literal["nowrap", "wrap", "wrap-reverse"]],
+                Literal["nowrap", "wrap", "wrap-reverse"],
+            ]
+        ] = None,
+        spacing: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        p: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        px: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        py: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pl: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+        grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "UnorderedList":
+        """Create a unordered list component.
+
+        Args:
+            *children: The children of the component.
+            items: A list of items to add to the list.
+            list_style_type: The style of the list.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
+            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
+            wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
+            spacing: Gap between children: "0" - "9"
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            p: Padding: "0" - "9"
+            px: Padding horizontal: "0" - "9"
+            py: Padding vertical: "0" - "9"
+            pt: Padding top: "0" - "9"
+            pr: Padding right: "0" - "9"
+            pb: Padding bottom: "0" - "9"
+            pl: Padding left: "0" - "9"
+            shrink: Whether the element will take up the smallest possible space: "0" | "1"
+            grow: Whether the element will take up the largest possible space: "0" | "1"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The list component.
+        """
+        ...
+
+class OrderedList(BaseList):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        items: Optional[Union[Var[Iterable], Iterable]] = None,
+        list_style_type: Optional[
+            Literal[
+                "none",
+                "decimal",
+                "decimal-leading-zero",
+                "lower-roman",
+                "upper-roman",
+                "lower-greek",
+                "lower-latin",
+                "upper-latin",
+                "armenian",
+                "georgian",
+                "lower-alpha",
+                "upper-alpha",
+                "hiragana",
+                "katakana",
+            ]
+        ] = "decimal",
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
+                Literal["row", "column", "row-reverse", "column-reverse"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "baseline", "stretch"]],
+                Literal["start", "center", "end", "baseline", "stretch"],
+            ]
+        ] = None,
+        justify: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "between"]],
+                Literal["start", "center", "end", "between"],
+            ]
+        ] = None,
+        wrap: Optional[
+            Union[
+                Var[Literal["nowrap", "wrap", "wrap-reverse"]],
+                Literal["nowrap", "wrap", "wrap-reverse"],
+            ]
+        ] = None,
+        spacing: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        p: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        px: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        py: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pl: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+        grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "OrderedList":
+        """Create an ordered list component.
+
+        Args:
+            *children: The children of the component.
+            items: A list of items to add to the list.
+            list_style_type: The style of the list.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
+            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
+            wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
+            spacing: Gap between children: "0" - "9"
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            p: Padding: "0" - "9"
+            px: Padding horizontal: "0" - "9"
+            py: Padding vertical: "0" - "9"
+            pt: Padding top: "0" - "9"
+            pr: Padding right: "0" - "9"
+            pb: Padding bottom: "0" - "9"
+            pl: Padding left: "0" - "9"
+            shrink: Whether the element will take up the smallest possible space: "0" | "1"
+            grow: Whether the element will take up the largest possible space: "0" | "1"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The list component.
+        """
+        ...
+
+class ListItem(Li):
+    ...
+
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ListItem":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class List(ComponentNamespace):
+    item = ListItem.create
+    ordered = OrderedList.create
+    unordered = UnorderedList.create
diff --git a/reflex/components/radix/themes/layout/section.pyi b/reflex/components/radix/themes/layout/section.pyi
index 8a02ad758..0236fda64 100644
--- a/reflex/components/radix/themes/layout/section.pyi
+++ b/reflex/components/radix/themes/layout/section.pyi
@@ -20,69 +20,6 @@ class Section(el.Section, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         size: Optional[
             Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
         ] = None,
@@ -126,15 +63,11 @@ class Section(el.Section, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -190,8 +123,6 @@ class Section(el.Section, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             size: The size of the section: "1" - "3" (default "3")
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -209,13 +140,11 @@ class Section(el.Section, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/layout/spacer.py b/reflex/components/radix/themes/layout/spacer.py
index ea7a7307d..33a790216 100644
--- a/reflex/components/radix/themes/layout/spacer.py
+++ b/reflex/components/radix/themes/layout/spacer.py
@@ -1,4 +1,5 @@
 """A spacer component."""
+
 from __future__ import annotations
 
 from reflex.components.component import Component
diff --git a/reflex/components/radix/themes/layout/spacer.pyi b/reflex/components/radix/themes/layout/spacer.pyi
index 7738f4f91..7d0a49d61 100644
--- a/reflex/components/radix/themes/layout/spacer.pyi
+++ b/reflex/components/radix/themes/layout/spacer.pyi
@@ -16,76 +16,7 @@ class Spacer(Flex):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        color_scheme: Optional[
-            Union[
-                Var[
-                    Literal[
-                        "tomato",
-                        "red",
-                        "ruby",
-                        "crimson",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "violet",
-                        "iris",
-                        "indigo",
-                        "blue",
-                        "cyan",
-                        "teal",
-                        "jade",
-                        "green",
-                        "grass",
-                        "brown",
-                        "orange",
-                        "sky",
-                        "mint",
-                        "lime",
-                        "yellow",
-                        "amber",
-                        "gold",
-                        "bronze",
-                        "gray",
-                    ]
-                ],
-                Literal[
-                    "tomato",
-                    "red",
-                    "ruby",
-                    "crimson",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "violet",
-                    "iris",
-                    "indigo",
-                    "blue",
-                    "cyan",
-                    "teal",
-                    "jade",
-                    "green",
-                    "grass",
-                    "brown",
-                    "orange",
-                    "sky",
-                    "mint",
-                    "lime",
-                    "yellow",
-                    "amber",
-                    "gold",
-                    "bronze",
-                    "gray",
-                ],
-            ]
-        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
-        display: Optional[
-            Union[
-                Var[Literal["none", "inline-flex", "flex"]],
-                Literal["none", "inline-flex", "flex"],
-            ]
-        ] = None,
         direction: Optional[
             Union[
                 Var[Literal["row", "column", "row-reverse", "column-reverse"]],
@@ -110,10 +41,10 @@ class Spacer(Flex):
                 Literal["nowrap", "wrap", "wrap-reverse"],
             ]
         ] = None,
-        gap: Optional[
+        spacing: Optional[
             Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
             ]
         ] = None,
         access_key: Optional[
@@ -156,15 +87,11 @@ class Spacer(Flex):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -220,15 +147,12 @@ class Spacer(Flex):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            display: How to display the element: "none" | "inline-flex" | "flex"
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            gap: Gap between children: "0" - "9"
+            spacing: Gap between children: "0" - "9"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -245,13 +169,11 @@ class Spacer(Flex):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/layout/stack.py b/reflex/components/radix/themes/layout/stack.py
index 02d550c63..de711afc6 100644
--- a/reflex/components/radix/themes/layout/stack.py
+++ b/reflex/components/radix/themes/layout/stack.py
@@ -1,15 +1,12 @@
 """Stack components."""
-from __future__ import annotations
 
-from typing import Literal, Optional
+from __future__ import annotations
 
 from reflex.components.component import Component
 
+from ..base import LiteralAlign, LiteralSpacing
 from .flex import Flex
 
-LiteralJustify = Literal["start", "center", "end"]
-LiteralAlign = Literal["start", "center", "end", "stretch"]
-
 
 class Stack(Flex):
     """A stack component."""
@@ -18,32 +15,27 @@ class Stack(Flex):
     def create(
         cls,
         *children,
-        justify: Optional[LiteralJustify] = "start",
-        align: Optional[LiteralAlign] = "center",
-        spacing: Optional[str] = "0.5rem",
+        spacing: LiteralSpacing = "2",
+        align: LiteralAlign = "start",
         **props,
     ) -> Component:
         """Create a new instance of the component.
 
         Args:
             *children: The children of the stack.
-            justify: The justify of the stack elements.
-            align: The alignment of the stack elements.
             spacing: The spacing between each stack item.
+            align: The alignment of the stack items.
             **props: The properties of the stack.
 
         Returns:
             The stack component.
         """
-        style = props.setdefault("style", {})
-        style.update(
-            {
-                "alignItems": align,
-                "justifyContent": justify,
-                "gap": spacing,
-            }
+        return super().create(
+            *children,
+            spacing=spacing,
+            align=align,
+            **props,
         )
-        return super().create(*children, **props)
 
 
 class VStack(Stack):
diff --git a/reflex/components/radix/themes/layout/stack.pyi b/reflex/components/radix/themes/layout/stack.pyi
index c354db1a1..928e0bb2b 100644
--- a/reflex/components/radix/themes/layout/stack.pyi
+++ b/reflex/components/radix/themes/layout/stack.pyi
@@ -7,47 +7,37 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Literal, Optional
 from reflex.components.component import Component
+from ..base import LiteralAlign, LiteralSpacing
 from .flex import Flex
 
-LiteralJustify = Literal["start", "center", "end"]
-LiteralAlign = Literal["start", "center", "end", "stretch"]
-
 class Stack(Flex):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
-        justify: Optional[LiteralJustify] = "start",
-        align: Optional[LiteralAlign] = "center",
-        spacing: Optional[str] = "0.5rem",
+        spacing: Optional[LiteralSpacing] = "2",
+        align: Optional[LiteralAlign] = "start",
         as_child: Optional[Union[Var[bool], bool]] = None,
-        display: Optional[
-            Union[
-                Var[Literal["none", "inline-flex", "flex"]],
-                Literal["none", "inline-flex", "flex"],
-            ]
-        ] = None,
         direction: Optional[
             Union[
                 Var[Literal["row", "column", "row-reverse", "column-reverse"]],
                 Literal["row", "column", "row-reverse", "column-reverse"],
             ]
         ] = None,
+        justify: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "between"]],
+                Literal["start", "center", "end", "between"],
+            ]
+        ] = None,
         wrap: Optional[
             Union[
                 Var[Literal["nowrap", "wrap", "wrap-reverse"]],
                 Literal["nowrap", "wrap", "wrap-reverse"],
             ]
         ] = None,
-        gap: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -88,15 +78,11 @@ class Stack(Flex):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -149,14 +135,12 @@ class Stack(Flex):
 
         Args:
             *children: The children of the stack.
-            justify: The justify of the stack elements.
-            align: The alignment of the stack elements.
             spacing: The spacing between each stack item.
+            align: The alignment of the stack items.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            display: How to display the element: "none" | "inline-flex" | "flex"
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            gap: Gap between children: "0" - "9"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -173,13 +157,11 @@ class Stack(Flex):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the stack.
 
@@ -194,34 +176,27 @@ class VStack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        justify: Optional[LiteralJustify] = "start",
-        align: Optional[LiteralAlign] = "center",
-        spacing: Optional[str] = "0.5rem",
+        spacing: Optional[LiteralSpacing] = "2",
+        align: Optional[LiteralAlign] = "start",
         as_child: Optional[Union[Var[bool], bool]] = None,
-        display: Optional[
-            Union[
-                Var[Literal["none", "inline-flex", "flex"]],
-                Literal["none", "inline-flex", "flex"],
-            ]
-        ] = None,
         direction: Optional[
             Union[
                 Var[Literal["row", "column", "row-reverse", "column-reverse"]],
                 Literal["row", "column", "row-reverse", "column-reverse"],
             ]
         ] = None,
+        justify: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "between"]],
+                Literal["start", "center", "end", "between"],
+            ]
+        ] = None,
         wrap: Optional[
             Union[
                 Var[Literal["nowrap", "wrap", "wrap-reverse"]],
                 Literal["nowrap", "wrap", "wrap-reverse"],
             ]
         ] = None,
-        gap: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -262,15 +237,11 @@ class VStack(Stack):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -323,14 +294,12 @@ class VStack(Stack):
 
         Args:
             *children: The children of the stack.
-            justify: The justify of the stack elements.
-            align: The alignment of the stack elements.
             spacing: The spacing between each stack item.
+            align: The alignment of the stack items.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            display: How to display the element: "none" | "inline-flex" | "flex"
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            gap: Gap between children: "0" - "9"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -347,13 +316,11 @@ class VStack(Stack):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the stack.
 
@@ -368,34 +335,27 @@ class HStack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        justify: Optional[LiteralJustify] = "start",
-        align: Optional[LiteralAlign] = "center",
-        spacing: Optional[str] = "0.5rem",
+        spacing: Optional[LiteralSpacing] = "2",
+        align: Optional[LiteralAlign] = "start",
         as_child: Optional[Union[Var[bool], bool]] = None,
-        display: Optional[
-            Union[
-                Var[Literal["none", "inline-flex", "flex"]],
-                Literal["none", "inline-flex", "flex"],
-            ]
-        ] = None,
         direction: Optional[
             Union[
                 Var[Literal["row", "column", "row-reverse", "column-reverse"]],
                 Literal["row", "column", "row-reverse", "column-reverse"],
             ]
         ] = None,
+        justify: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "between"]],
+                Literal["start", "center", "end", "between"],
+            ]
+        ] = None,
         wrap: Optional[
             Union[
                 Var[Literal["nowrap", "wrap", "wrap-reverse"]],
                 Literal["nowrap", "wrap", "wrap-reverse"],
             ]
         ] = None,
-        gap: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -436,15 +396,11 @@ class HStack(Stack):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -497,14 +453,12 @@ class HStack(Stack):
 
         Args:
             *children: The children of the stack.
-            justify: The justify of the stack elements.
-            align: The alignment of the stack elements.
             spacing: The spacing between each stack item.
+            align: The alignment of the stack items.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            display: How to display the element: "none" | "inline-flex" | "flex"
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            gap: Gap between children: "0" - "9"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -521,13 +475,11 @@ class HStack(Stack):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the stack.
 
diff --git a/reflex/components/radix/themes/typography.py b/reflex/components/radix/themes/typography.py
deleted file mode 100644
index f275fd2bb..000000000
--- a/reflex/components/radix/themes/typography.py
+++ /dev/null
@@ -1,140 +0,0 @@
-"""Components for rendering text.
-
-https://www.radix-ui.com/themes/docs/theme/typography
-"""
-from __future__ import annotations
-
-from typing import Literal
-
-from reflex.vars import Var
-
-from .base import (
-    LiteralAccentColor,
-    LiteralVariant,
-    RadixThemesComponent,
-)
-
-LiteralTextWeight = Literal["light", "regular", "medium", "bold"]
-LiteralTextAlign = Literal["left", "center", "right"]
-LiteralTextSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
-LiteralTextTrim = Literal["normal", "start", "end", "both"]
-
-
-class Text(RadixThemesComponent):
-    """A foundational text primitive based on the <span> element."""
-
-    tag = "Text"
-
-    # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
-
-    # Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
-    as_: Var[str]
-
-    # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
-
-    # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[LiteralTextWeight]
-
-    # Alignment of text in element: "left" | "center" | "right"
-    align: Var[LiteralTextAlign]
-
-    # Removes the leading trim space: "normal" | "start" | "end" | "both"
-    trim: Var[LiteralTextTrim]
-
-    # Overrides the accent color inherited from the Theme.
-    color_scheme: Var[LiteralAccentColor]
-
-    # Whether to render the text with higher contrast color
-    high_contrast: Var[bool]
-
-
-class Heading(Text):
-    """A semantic heading element."""
-
-    tag = "Heading"
-
-
-class Blockquote(RadixThemesComponent):
-    """A block level extended quotation."""
-
-    tag = "Blockquote"
-
-    # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
-
-    # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[LiteralTextWeight]
-
-    # Overrides the accent color inherited from the Theme.
-    color_scheme: Var[LiteralAccentColor]
-
-    # Whether to render the text with higher contrast color
-    high_contrast: Var[bool]
-
-
-class Code(Blockquote):
-    """Marks text to signify a short fragment of computer code."""
-
-    tag = "Code"
-
-    # The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[LiteralVariant]
-
-
-class Em(RadixThemesComponent):
-    """Marks text to stress emphasis."""
-
-    tag = "Em"
-
-
-class Kbd(RadixThemesComponent):
-    """Represents keyboard input or a hotkey."""
-
-    tag = "Kbd"
-
-    # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
-
-
-LiteralLinkUnderline = Literal["auto", "hover", "always"]
-
-
-class Link(RadixThemesComponent):
-    """A semantic element for navigation between pages."""
-
-    tag = "Link"
-
-    # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
-
-    # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
-
-    # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[LiteralTextWeight]
-
-    # Removes the leading trim space: "normal" | "start" | "end" | "both"
-    trim: Var[LiteralTextTrim]
-
-    # Sets the visibility of the underline affordance: "auto" | "hover" | "always"
-    underline: Var[LiteralLinkUnderline]
-
-    # Overrides the accent color inherited from the Theme.
-    color_scheme: Var[LiteralAccentColor]
-
-    # Whether to render the text with higher contrast color
-    high_contrast: Var[bool]
-
-
-class Quote(RadixThemesComponent):
-    """A short inline quotation."""
-
-    tag = "Quote"
-
-
-class Strong(RadixThemesComponent):
-    """Marks text to signify strong importance."""
-
-    tag = "Strong"
diff --git a/reflex/components/radix/themes/typography/__init__.py b/reflex/components/radix/themes/typography/__init__.py
index 1d47a44fa..a14e21007 100644
--- a/reflex/components/radix/themes/typography/__init__.py
+++ b/reflex/components/radix/themes/typography/__init__.py
@@ -2,20 +2,19 @@
 
 from .blockquote import Blockquote
 from .code import Code
-from .em import Em
 from .heading import Heading
-from .kbd import Kbd
 from .link import Link
-from .quote import Quote
-from .strong import Strong
-from .text import Text
+from .text import text
 
 blockquote = Blockquote.create
 code = Code.create
-em = Em.create
 heading = Heading.create
-kbd = Kbd.create
 link = Link.create
-quote = Quote.create
-strong = Strong.create
-text = Text.create
+
+__all__ = [
+    "blockquote",
+    "code",
+    "heading",
+    "link",
+    "text",
+]
diff --git a/reflex/components/radix/themes/typography/blockquote.pyi b/reflex/components/radix/themes/typography/blockquote.pyi
index c6c9d499a..435d76409 100644
--- a/reflex/components/radix/themes/typography/blockquote.pyi
+++ b/reflex/components/radix/themes/typography/blockquote.pyi
@@ -18,7 +18,18 @@ class Blockquote(el.Blockquote, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -81,18 +92,6 @@ class Blockquote(el.Blockquote, RadixThemesComponent):
                 ],
             ]
         ] = None,
-        size: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        weight: Optional[
-            Union[
-                Var[Literal["light", "regular", "medium", "bold"]],
-                Literal["light", "regular", "medium", "bold"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         cite: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         access_key: Optional[
@@ -135,15 +134,11 @@ class Blockquote(el.Blockquote, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -199,10 +194,9 @@ class Blockquote(el.Blockquote, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             size: Text size: "1" - "9"
             weight: Thickness of text: "light" | "regular" | "medium" | "bold"
+            color_scheme: Overrides the accent color inherited from the Theme.
             high_contrast: Whether to render the text with higher contrast color
             cite: Define the title of a work.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
@@ -221,13 +215,11 @@ class Blockquote(el.Blockquote, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/typography/code.pyi b/reflex/components/radix/themes/typography/code.pyi
index 5f22ba3ac..41fd781c0 100644
--- a/reflex/components/radix/themes/typography/code.pyi
+++ b/reflex/components/radix/themes/typography/code.pyi
@@ -18,7 +18,24 @@ class Code(el.Code, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
+                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
+            ]
+        ] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -81,24 +98,6 @@ class Code(el.Code, RadixThemesComponent):
                 ],
             ]
         ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
-                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
-            ]
-        ] = None,
-        size: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        weight: Optional[
-            Union[
-                Var[Literal["light", "regular", "medium", "bold"]],
-                Literal["light", "regular", "medium", "bold"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
@@ -140,15 +139,11 @@ class Code(el.Code, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -204,11 +199,10 @@ class Code(el.Code, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             variant: The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
             size: Text size: "1" - "9"
             weight: Thickness of text: "light" | "regular" | "medium" | "bold"
+            color_scheme: Overrides the accent color inherited from the Theme.
             high_contrast: Whether to render the text with higher contrast color
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -226,13 +220,11 @@ class Code(el.Code, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/typography/em.py b/reflex/components/radix/themes/typography/em.py
deleted file mode 100644
index eb7e3e6ce..000000000
--- a/reflex/components/radix/themes/typography/em.py
+++ /dev/null
@@ -1,17 +0,0 @@
-"""Components for rendering heading.
-
-https://www.radix-ui.com/themes/docs/theme/typography
-"""
-from __future__ import annotations
-
-from reflex import el
-
-from ..base import (
-    RadixThemesComponent,
-)
-
-
-class Em(el.Em, RadixThemesComponent):
-    """Marks text to stress emphasis."""
-
-    tag = "Em"
diff --git a/reflex/components/radix/themes/typography/em.pyi b/reflex/components/radix/themes/typography/em.pyi
index 556aa92c0..039665aeb 100644
--- a/reflex/components/radix/themes/typography/em.pyi
+++ b/reflex/components/radix/themes/typography/em.pyi
@@ -119,9 +119,6 @@ class Em(el.Em, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -201,7 +198,6 @@ class Em(el.Em, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
diff --git a/reflex/components/radix/themes/typography/heading.pyi b/reflex/components/radix/themes/typography/heading.pyi
index 0c1e81fa9..87e0c295a 100644
--- a/reflex/components/radix/themes/typography/heading.pyi
+++ b/reflex/components/radix/themes/typography/heading.pyi
@@ -18,7 +18,32 @@ class Heading(el.H1, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        as_: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["left", "center", "right"]],
+                Literal["left", "center", "right"],
+            ]
+        ] = None,
+        trim: Optional[
+            Union[
+                Var[Literal["normal", "start", "end", "both"]],
+                Literal["normal", "start", "end", "both"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -81,32 +106,6 @@ class Heading(el.H1, RadixThemesComponent):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        as_: Optional[Union[Var[str], str]] = None,
-        size: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        weight: Optional[
-            Union[
-                Var[Literal["light", "regular", "medium", "bold"]],
-                Literal["light", "regular", "medium", "bold"],
-            ]
-        ] = None,
-        align: Optional[
-            Union[
-                Var[Literal["left", "center", "right"]],
-                Literal["left", "center", "right"],
-            ]
-        ] = None,
-        trim: Optional[
-            Union[
-                Var[Literal["normal", "start", "end", "both"]],
-                Literal["normal", "start", "end", "both"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
@@ -148,15 +147,11 @@ class Heading(el.H1, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -212,14 +207,13 @@ class Heading(el.H1, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
             size: Text size: "1" - "9"
             weight: Thickness of text: "light" | "regular" | "medium" | "bold"
             align: Alignment of text in element: "left" | "center" | "right"
             trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
+            color_scheme: Overrides the accent color inherited from the Theme.
             high_contrast: Whether to render the text with higher contrast color
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -237,13 +231,11 @@ class Heading(el.H1, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
diff --git a/reflex/components/radix/themes/typography/kbd.py b/reflex/components/radix/themes/typography/kbd.py
deleted file mode 100644
index b8c28010c..000000000
--- a/reflex/components/radix/themes/typography/kbd.py
+++ /dev/null
@@ -1,24 +0,0 @@
-"""Components for rendering heading.
-
-https://www.radix-ui.com/themes/docs/theme/typography
-"""
-from __future__ import annotations
-
-from reflex import el
-from reflex.vars import Var
-
-from ..base import (
-    RadixThemesComponent,
-)
-from .base import (
-    LiteralTextSize,
-)
-
-
-class Kbd(el.Kbd, RadixThemesComponent):
-    """Represents keyboard input or a hotkey."""
-
-    tag = "Kbd"
-
-    # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
diff --git a/reflex/components/radix/themes/typography/kbd.pyi b/reflex/components/radix/themes/typography/kbd.pyi
index 4d2bf3bd3..4b70c24a4 100644
--- a/reflex/components/radix/themes/typography/kbd.pyi
+++ b/reflex/components/radix/themes/typography/kbd.pyi
@@ -127,9 +127,6 @@ class Kbd(el.Kbd, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -210,7 +207,6 @@ class Kbd(el.Kbd, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
diff --git a/reflex/components/radix/themes/typography/link.pyi b/reflex/components/radix/themes/typography/link.pyi
index bf3c62e2f..ee0bc844c 100644
--- a/reflex/components/radix/themes/typography/link.pyi
+++ b/reflex/components/radix/themes/typography/link.pyi
@@ -174,15 +174,11 @@ class Link(RadixThemesComponent, A):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -267,13 +263,11 @@ class Link(RadixThemesComponent, A):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/radix/themes/typography/quote.py b/reflex/components/radix/themes/typography/quote.py
deleted file mode 100644
index 6c590bf76..000000000
--- a/reflex/components/radix/themes/typography/quote.py
+++ /dev/null
@@ -1,17 +0,0 @@
-"""Components for rendering heading.
-
-https://www.radix-ui.com/themes/docs/theme/typography
-"""
-from __future__ import annotations
-
-from reflex import el
-
-from ..base import (
-    RadixThemesComponent,
-)
-
-
-class Quote(el.Q, RadixThemesComponent):
-    """A short inline quotation."""
-
-    tag = "Quote"
diff --git a/reflex/components/radix/themes/typography/quote.pyi b/reflex/components/radix/themes/typography/quote.pyi
index aa8e7794e..0608fb8b6 100644
--- a/reflex/components/radix/themes/typography/quote.pyi
+++ b/reflex/components/radix/themes/typography/quote.pyi
@@ -120,9 +120,6 @@ class Quote(el.Q, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -203,7 +200,6 @@ class Quote(el.Q, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
diff --git a/reflex/components/radix/themes/typography/strong.py b/reflex/components/radix/themes/typography/strong.py
deleted file mode 100644
index bb74b7b44..000000000
--- a/reflex/components/radix/themes/typography/strong.py
+++ /dev/null
@@ -1,17 +0,0 @@
-"""Components for rendering heading.
-
-https://www.radix-ui.com/themes/docs/theme/typography
-"""
-from __future__ import annotations
-
-from reflex import el
-
-from ..base import (
-    RadixThemesComponent,
-)
-
-
-class Strong(el.Strong, RadixThemesComponent):
-    """Marks text to signify strong importance."""
-
-    tag = "Strong"
diff --git a/reflex/components/radix/themes/typography/strong.pyi b/reflex/components/radix/themes/typography/strong.pyi
index 5a911cd69..df81f7d41 100644
--- a/reflex/components/radix/themes/typography/strong.pyi
+++ b/reflex/components/radix/themes/typography/strong.pyi
@@ -119,9 +119,6 @@ class Strong(el.Strong, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -201,7 +198,6 @@ class Strong(el.Strong, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
diff --git a/reflex/components/radix/themes/typography/text.py b/reflex/components/radix/themes/typography/text.py
index 4ed426d15..96512fe58 100644
--- a/reflex/components/radix/themes/typography/text.py
+++ b/reflex/components/radix/themes/typography/text.py
@@ -2,11 +2,13 @@
 
 https://www.radix-ui.com/themes/docs/theme/typography
 """
+
 from __future__ import annotations
 
 from typing import Literal
 
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.vars import Var
 
 from ..base import (
@@ -20,7 +22,26 @@ from .base import (
     LiteralTextWeight,
 )
 
-LiteralType = Literal["p", "label", "div", "span"]
+LiteralType = Literal[
+    "p",
+    "label",
+    "div",
+    "span",
+    "b",
+    "i",
+    "u",
+    "abbr",
+    "cite",
+    "del",
+    "em",
+    "ins",
+    "kbd",
+    "mark",
+    "s",
+    "samp",
+    "sub",
+    "sup",
+]
 
 
 class Text(el.Span, RadixThemesComponent):
@@ -51,3 +72,50 @@ class Text(el.Span, RadixThemesComponent):
 
     # Whether to render the text with higher contrast color
     high_contrast: Var[bool]
+
+
+class Span(Text):
+    """A variant of text rendering as <span> element."""
+
+    as_: Var[LiteralType] = "span"  # type: ignore
+
+
+class Em(el.Em, RadixThemesComponent):
+    """Marks text to stress emphasis."""
+
+    tag = "Em"
+
+
+class Kbd(el.Kbd, RadixThemesComponent):
+    """Represents keyboard input or a hotkey."""
+
+    tag = "Kbd"
+
+    # Text size: "1" - "9"
+    size: Var[LiteralTextSize]
+
+
+class Quote(el.Q, RadixThemesComponent):
+    """A short inline quotation."""
+
+    tag = "Quote"
+
+
+class Strong(el.Strong, RadixThemesComponent):
+    """Marks text to signify strong importance."""
+
+    tag = "Strong"
+
+
+class TextNamespace(ComponentNamespace):
+    """Checkbox components namespace."""
+
+    __call__ = staticmethod(Text.create)
+    em = staticmethod(Em.create)
+    kbd = staticmethod(Kbd.create)
+    quote = staticmethod(Quote.create)
+    strong = staticmethod(Strong.create)
+    span = staticmethod(Span.create)
+
+
+text = TextNamespace()
diff --git a/reflex/components/radix/themes/typography/text.pyi b/reflex/components/radix/themes/typography/text.pyi
index fa5aa6f07..054b331d9 100644
--- a/reflex/components/radix/themes/typography/text.pyi
+++ b/reflex/components/radix/themes/typography/text.pyi
@@ -9,11 +9,31 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
 from reflex import el
+from reflex.components.component import ComponentNamespace
 from reflex.vars import Var
 from ..base import LiteralAccentColor, RadixThemesComponent
 from .base import LiteralTextAlign, LiteralTextSize, LiteralTextTrim, LiteralTextWeight
 
-LiteralType = Literal["p", "label", "div", "span"]
+LiteralType = Literal[
+    "p",
+    "label",
+    "div",
+    "span",
+    "b",
+    "i",
+    "u",
+    "abbr",
+    "cite",
+    "del",
+    "em",
+    "ins",
+    "kbd",
+    "mark",
+    "s",
+    "samp",
+    "sub",
+    "sup",
+]
 
 class Text(el.Span, RadixThemesComponent):
     @overload
@@ -21,7 +41,77 @@ class Text(el.Span, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        as_: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "p",
+                        "label",
+                        "div",
+                        "span",
+                        "b",
+                        "i",
+                        "u",
+                        "abbr",
+                        "cite",
+                        "del",
+                        "em",
+                        "ins",
+                        "kbd",
+                        "mark",
+                        "s",
+                        "samp",
+                        "sub",
+                        "sup",
+                    ]
+                ],
+                Literal[
+                    "p",
+                    "label",
+                    "div",
+                    "span",
+                    "b",
+                    "i",
+                    "u",
+                    "abbr",
+                    "cite",
+                    "del",
+                    "em",
+                    "ins",
+                    "kbd",
+                    "mark",
+                    "s",
+                    "samp",
+                    "sub",
+                    "sup",
+                ],
+            ]
+        ] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["left", "center", "right"]],
+                Literal["left", "center", "right"],
+            ]
+        ] = None,
+        trim: Optional[
+            Union[
+                Var[Literal["normal", "start", "end", "both"]],
+                Literal["normal", "start", "end", "both"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -84,37 +174,6 @@ class Text(el.Span, RadixThemesComponent):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        as_: Optional[
-            Union[
-                Var[Literal["p", "label", "div", "span"]],
-                Literal["p", "label", "div", "span"],
-            ]
-        ] = None,
-        size: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        weight: Optional[
-            Union[
-                Var[Literal["light", "regular", "medium", "bold"]],
-                Literal["light", "regular", "medium", "bold"],
-            ]
-        ] = None,
-        align: Optional[
-            Union[
-                Var[Literal["left", "center", "right"]],
-                Literal["left", "center", "right"],
-            ]
-        ] = None,
-        trim: Optional[
-            Union[
-                Var[Literal["normal", "start", "end", "both"]],
-                Literal["normal", "start", "end", "both"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
@@ -156,15 +215,11 @@ class Text(el.Span, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -220,14 +275,13 @@ class Text(el.Span, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
             size: Text size: "1" - "9"
             weight: Thickness of text: "light" | "regular" | "medium" | "bold"
             align: Alignment of text in element: "left" | "center" | "right"
             trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
+            color_scheme: Overrides the accent color inherited from the Theme.
             high_contrast: Whether to render the text with higher contrast color
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -245,13 +299,11 @@ class Text(el.Span, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Component properties.
 
@@ -259,3 +311,1112 @@ class Text(el.Span, RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class Span(Text):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "p",
+                        "label",
+                        "div",
+                        "span",
+                        "b",
+                        "i",
+                        "u",
+                        "abbr",
+                        "cite",
+                        "del",
+                        "em",
+                        "ins",
+                        "kbd",
+                        "mark",
+                        "s",
+                        "samp",
+                        "sub",
+                        "sup",
+                    ]
+                ],
+                Literal[
+                    "p",
+                    "label",
+                    "div",
+                    "span",
+                    "b",
+                    "i",
+                    "u",
+                    "abbr",
+                    "cite",
+                    "del",
+                    "em",
+                    "ins",
+                    "kbd",
+                    "mark",
+                    "s",
+                    "samp",
+                    "sub",
+                    "sup",
+                ],
+            ]
+        ] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["left", "center", "right"]],
+                Literal["left", "center", "right"],
+            ]
+        ] = None,
+        trim: Optional[
+            Union[
+                Var[Literal["normal", "start", "end", "both"]],
+                Literal["normal", "start", "end", "both"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Span":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
+            size: Text size: "1" - "9"
+            weight: Thickness of text: "light" | "regular" | "medium" | "bold"
+            align: Alignment of text in element: "left" | "center" | "right"
+            trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
+            color_scheme: Overrides the accent color inherited from the Theme.
+            high_contrast: Whether to render the text with higher contrast color
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Em(el.Em, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Em":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Kbd(el.Kbd, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Kbd":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            size: Text size: "1" - "9"
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Quote(el.Q, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        cite: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Quote":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            cite: Specifies the source URL of the quote.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Strong(el.Strong, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Strong":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class TextNamespace(ComponentNamespace):
+    em = staticmethod(Em.create)
+    kbd = staticmethod(Kbd.create)
+    quote = staticmethod(Quote.create)
+    strong = staticmethod(Strong.create)
+    span = staticmethod(Span.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        as_: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "p",
+                        "label",
+                        "div",
+                        "span",
+                        "b",
+                        "i",
+                        "u",
+                        "abbr",
+                        "cite",
+                        "del",
+                        "em",
+                        "ins",
+                        "kbd",
+                        "mark",
+                        "s",
+                        "samp",
+                        "sub",
+                        "sup",
+                    ]
+                ],
+                Literal[
+                    "p",
+                    "label",
+                    "div",
+                    "span",
+                    "b",
+                    "i",
+                    "u",
+                    "abbr",
+                    "cite",
+                    "del",
+                    "em",
+                    "ins",
+                    "kbd",
+                    "mark",
+                    "s",
+                    "samp",
+                    "sub",
+                    "sup",
+                ],
+            ]
+        ] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["left", "center", "right"]],
+                Literal["left", "center", "right"],
+            ]
+        ] = None,
+        trim: Optional[
+            Union[
+                Var[Literal["normal", "start", "end", "both"]],
+                Literal["normal", "start", "end", "both"],
+            ]
+        ] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Text":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
+            size: Text size: "1" - "9"
+            weight: Thickness of text: "light" | "regular" | "medium" | "bold"
+            align: Alignment of text in element: "left" | "center" | "right"
+            trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
+            color_scheme: Overrides the accent color inherited from the Theme.
+            high_contrast: Whether to render the text with higher contrast color
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+text = TextNamespace()
diff --git a/reflex/components/react_player/audio.pyi b/reflex/components/react_player/audio.pyi
index 061c9c29e..d45dbcdaf 100644
--- a/reflex/components/react_player/audio.pyi
+++ b/reflex/components/react_player/audio.pyi
@@ -31,7 +31,6 @@ class Audio(ReactPlayer):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -98,7 +97,6 @@ class Audio(ReactPlayer):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/react_player/react_player.pyi b/reflex/components/react_player/react_player.pyi
index 539adc7d6..49ab91ab1 100644
--- a/reflex/components/react_player/react_player.pyi
+++ b/reflex/components/react_player/react_player.pyi
@@ -30,7 +30,6 @@ class ReactPlayer(NoSSRComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -97,7 +96,6 @@ class ReactPlayer(NoSSRComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/react_player/video.pyi b/reflex/components/react_player/video.pyi
index 93627287c..a3c447cb0 100644
--- a/reflex/components/react_player/video.pyi
+++ b/reflex/components/react_player/video.pyi
@@ -31,7 +31,6 @@ class Video(ReactPlayer):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -98,7 +97,6 @@ class Video(ReactPlayer):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index bf5259651..3af7849a2 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -95,7 +95,6 @@ class Axis(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -140,7 +139,6 @@ class Axis(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -220,7 +218,6 @@ class XAxis(Axis):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -265,7 +262,6 @@ class XAxis(Axis):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -345,7 +341,6 @@ class YAxis(Axis):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -390,7 +385,6 @@ class YAxis(Axis):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -457,7 +451,6 @@ class ZAxis(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -520,7 +513,6 @@ class ZAxis(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -555,7 +547,6 @@ class Brush(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_change: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -582,7 +573,6 @@ class Brush(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -615,7 +605,6 @@ class Cartesian(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -650,7 +639,6 @@ class Cartesian(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -729,7 +717,6 @@ class Area(Cartesian):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -772,7 +759,6 @@ class Area(Cartesian):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -812,7 +798,6 @@ class Bar(Cartesian):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -855,7 +840,6 @@ class Bar(Cartesian):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -934,7 +918,6 @@ class Line(Cartesian):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -977,7 +960,6 @@ class Line(Cartesian):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1035,7 +1017,6 @@ class Scatter(Cartesian):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1077,7 +1058,6 @@ class Scatter(Cartesian):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1118,7 +1098,6 @@ class Funnel(Cartesian):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1157,7 +1136,6 @@ class Funnel(Cartesian):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1187,7 +1165,6 @@ class ErrorBar(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1250,7 +1227,6 @@ class ErrorBar(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1284,7 +1260,6 @@ class Reference(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1348,7 +1323,6 @@ class Reference(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1383,7 +1357,6 @@ class ReferenceLine(Reference):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1448,7 +1421,6 @@ class ReferenceLine(Reference):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1483,7 +1455,6 @@ class ReferenceDot(Reference):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1520,7 +1491,6 @@ class ReferenceDot(Reference):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1559,7 +1529,6 @@ class ReferenceArea(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1628,7 +1597,6 @@ class ReferenceArea(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1655,7 +1623,6 @@ class Grid(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1717,7 +1684,6 @@ class Grid(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1749,7 +1715,6 @@ class CartesianGrid(Grid):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1816,7 +1781,6 @@ class CartesianGrid(Grid):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -1862,7 +1826,6 @@ class CartesianAxis(Grid):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -1933,7 +1896,6 @@ class CartesianAxis(Grid):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index 4c401901f..2d133cba7 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -53,7 +53,6 @@ class ChartBase(RechartsCharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -86,7 +85,6 @@ class ChartBase(RechartsCharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
@@ -132,7 +130,6 @@ class AreaChart(ChartBase):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -166,7 +163,6 @@ class AreaChart(ChartBase):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
@@ -211,7 +207,6 @@ class BarChart(ChartBase):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -249,7 +244,6 @@ class BarChart(ChartBase):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
@@ -289,7 +283,6 @@ class LineChart(ChartBase):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -322,7 +315,6 @@ class LineChart(ChartBase):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
@@ -372,7 +364,6 @@ class ComposedChart(ChartBase):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -410,7 +401,6 @@ class ComposedChart(ChartBase):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
@@ -451,7 +441,6 @@ class PieChart(ChartBase):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -481,7 +470,6 @@ class PieChart(ChartBase):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
@@ -528,7 +516,6 @@ class RadarChart(ChartBase):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -567,7 +554,6 @@ class RadarChart(ChartBase):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
@@ -617,7 +603,6 @@ class RadialBarChart(ChartBase):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -659,7 +644,6 @@ class RadialBarChart(ChartBase):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
@@ -700,7 +684,6 @@ class ScatterChart(ChartBase):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -739,7 +722,6 @@ class ScatterChart(ChartBase):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
@@ -773,7 +755,6 @@ class FunnelChart(RechartsCharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -806,7 +787,6 @@ class FunnelChart(RechartsCharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -840,7 +820,6 @@ class Treemap(RechartsCharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -907,7 +886,6 @@ class Treemap(RechartsCharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the chart component.
 
diff --git a/reflex/components/recharts/general.pyi b/reflex/components/recharts/general.pyi
index 43eb3c1fa..8b5cb5c62 100644
--- a/reflex/components/recharts/general.pyi
+++ b/reflex/components/recharts/general.pyi
@@ -37,7 +37,6 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -101,7 +100,6 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -176,7 +174,6 @@ class Legend(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -217,7 +214,6 @@ class Legend(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -248,7 +244,6 @@ class GraphingTooltip(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -314,7 +309,6 @@ class GraphingTooltip(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -386,7 +380,6 @@ class Label(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -448,7 +441,6 @@ class Label(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -521,7 +513,6 @@ class LabelList(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -584,7 +575,6 @@ class LabelList(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/recharts/polar.pyi b/reflex/components/recharts/polar.pyi
index d19a39f77..8270f1cde 100644
--- a/reflex/components/recharts/polar.pyi
+++ b/reflex/components/recharts/polar.pyi
@@ -46,7 +46,6 @@ class Pie(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -93,7 +92,6 @@ class Pie(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -132,7 +130,6 @@ class Radar(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -201,7 +198,6 @@ class Radar(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -230,7 +226,6 @@ class RadialBar(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -266,7 +261,6 @@ class RadialBar(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -305,7 +299,6 @@ class PolarAngleAxis(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -347,7 +340,6 @@ class PolarAngleAxis(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -379,7 +371,6 @@ class PolarGrid(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -444,7 +435,6 @@ class PolarGrid(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -522,7 +512,6 @@ class PolarRadiusAxis(Recharts):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -564,7 +553,6 @@ class PolarRadiusAxis(Recharts):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/recharts/recharts.pyi b/reflex/components/recharts/recharts.pyi
index 787095e82..1eb3a2203 100644
--- a/reflex/components/recharts/recharts.pyi
+++ b/reflex/components/recharts/recharts.pyi
@@ -21,7 +21,6 @@ class Recharts(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -79,7 +78,6 @@ class Recharts(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -102,7 +100,6 @@ class RechartsCharts(NoSSRComponent, MemoizationLeaf):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -160,7 +157,6 @@ class RechartsCharts(NoSSRComponent, MemoizationLeaf):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
diff --git a/reflex/components/suneditor/editor.pyi b/reflex/components/suneditor/editor.pyi
index 92c4b5e2b..867274434 100644
--- a/reflex/components/suneditor/editor.pyi
+++ b/reflex/components/suneditor/editor.pyi
@@ -126,7 +126,6 @@ class Editor(NoSSRComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -227,7 +226,6 @@ class Editor(NoSSRComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: Any properties to be passed to the Editor
 
diff --git a/reflex/components/tags/tag.py b/reflex/components/tags/tag.py
index 6bb53a428..27b5dc7c1 100644
--- a/reflex/components/tags/tag.py
+++ b/reflex/components/tags/tag.py
@@ -62,11 +62,15 @@ class Tag(Base):
         Returns:
             The tag with the props added.
         """
+        from reflex.components.core.colors import Color
+
         self.props.update(
             {
                 format.to_camel_case(name, allow_hyphens=True): prop
                 if types._isinstance(prop, Union[EventChain, dict])
-                else Var.create(prop)
+                else Var.create(
+                    prop, _var_is_string=isinstance(prop, Color)
+                )  # rx.color is always a string
                 for name, prop in kwargs.items()
                 if self.is_valid_prop(prop)
             }
diff --git a/reflex/reflex.py b/reflex/reflex.py
index 1426d33a6..38dc4c865 100644
--- a/reflex/reflex.py
+++ b/reflex/reflex.py
@@ -84,6 +84,10 @@ def _init(
 
     prerequisites.ensure_reflex_installation_id()
 
+    # When upgrading to 0.4, show migration instructions.
+    if prerequisites.should_show_rx_chakra_migration_instructions():
+        prerequisites.show_rx_chakra_migration_instructions()
+
     # Set up the app directory, only if the config doesn't exist.
     if not os.path.exists(constants.Config.FILE):
         if template is None:
@@ -100,9 +104,6 @@ def _init(
     # Migrate Pynecone projects to Reflex.
     prerequisites.migrate_to_reflex()
 
-    if prerequisites.should_show_rx_chakra_migration_instructions():
-        prerequisites.show_rx_chakra_migration_instructions()
-
     # Initialize the .gitignore.
     prerequisites.initialize_gitignore()
 
diff --git a/reflex/style.py b/reflex/style.py
index 692965c8a..3b916da43 100644
--- a/reflex/style.py
+++ b/reflex/style.py
@@ -12,6 +12,9 @@ from reflex.vars import BaseVar, Var, VarData
 
 VarData.update_forward_refs()  # Ensure all type definitions are resolved
 
+LIGHT_COLOR_MODE: str = "light"
+DARK_COLOR_MODE: str = "dark"
+
 # Reference the global ColorModeContext
 color_mode_var_data = VarData(  # type: ignore
     imports={
@@ -38,12 +41,12 @@ toggle_color_mode = BaseVar(
 breakpoints = ["0", "30em", "48em", "62em", "80em", "96em"]
 
 STYLE_PROP_SHORTHAND_MAPPING = {
-    "paddingX": ("padding-inline-start", "padding-inline-end"),
-    "paddingY": ("padding-top", "padding-bottom"),
-    "marginX": ("margin-inline-start", "margin-inline-end"),
-    "marginY": ("margin-top", "margin-bottom"),
+    "paddingX": ("paddingInlineStart", "paddingInlineEnd"),
+    "paddingY": ("paddingTop", "paddingBottom"),
+    "marginX": ("marginInlineStart", "marginInlineEnd"),
+    "marginY": ("marginTop", "marginBottom"),
     "bg": ("background",),
-    "bgColor": ("background-color",),
+    "bgColor": ("backgroundColor",),
 }
 
 
diff --git a/reflex/utils/format.py b/reflex/utils/format.py
index 9c67f1fc0..53b55d0eb 100644
--- a/reflex/utils/format.py
+++ b/reflex/utils/format.py
@@ -52,6 +52,10 @@ def get_close_char(open: str, close: str | None = None) -> str:
 def is_wrapped(text: str, open: str, close: str | None = None) -> bool:
     """Check if the given text is wrapped in the given open and close characters.
 
+    "(a) + (b)" --> False
+    "((abc))"   --> True
+    "(abc)"     --> True
+
     Args:
         text: The text to check.
         open: The open character.
@@ -61,7 +65,18 @@ def is_wrapped(text: str, open: str, close: str | None = None) -> bool:
         Whether the text is wrapped.
     """
     close = get_close_char(open, close)
-    return text.startswith(open) and text.endswith(close)
+    if not (text.startswith(open) and text.endswith(close)):
+        return False
+
+    depth = 0
+    for ch in text[:-1]:
+        if ch == open:
+            depth += 1
+        if ch == close:
+            depth -= 1
+        if depth == 0:  # it shouldn't close before the end
+            return False
+    return True
 
 
 def wrap(
@@ -173,6 +188,35 @@ def to_kebab_case(text: str) -> str:
     return to_snake_case(text).replace("_", "-")
 
 
+def _escape_js_string(string: str) -> str:
+    """Escape the string for use as a JS string literal.
+
+    Args:
+        string: The string to escape.
+
+    Returns:
+        The escaped string.
+    """
+    # Escape backticks.
+    string = string.replace(r"\`", "`")
+    string = string.replace("`", r"\`")
+    return string
+
+
+def _wrap_js_string(string: str) -> str:
+    """Wrap string so it looks like {`string`}.
+
+    Args:
+        string: The string to wrap.
+
+    Returns:
+        The wrapped string.
+    """
+    string = wrap(string, "`")
+    string = wrap(string, "{")
+    return string
+
+
 def format_string(string: str) -> str:
     """Format the given string as a JS string literal..
 
@@ -182,15 +226,33 @@ def format_string(string: str) -> str:
     Returns:
         The formatted string.
     """
-    # Escape backticks.
-    string = string.replace(r"\`", "`")
-    string = string.replace("`", r"\`")
+    return _wrap_js_string(_escape_js_string(string))
 
-    # Wrap the string so it looks like {`string`}.
-    string = wrap(string, "`")
-    string = wrap(string, "{")
 
-    return string
+def format_f_string_prop(prop: BaseVar) -> str:
+    """Format the string in a given prop as an f-string.
+
+    Args:
+        prop: The prop to format.
+
+    Returns:
+        The formatted string.
+    """
+    s = prop._var_full_name
+    var_data = prop._var_data
+    interps = var_data.interpolations if var_data else []
+    parts: List[str] = []
+
+    if interps:
+        for i, (start, end) in enumerate(interps):
+            prev_end = interps[i - 1][1] if i > 0 else 0
+            parts.append(_escape_js_string(s[prev_end:start]))
+            parts.append(s[start:end])
+        parts.append(_escape_js_string(s[interps[-1][1] :]))
+    else:
+        parts.append(_escape_js_string(s))
+
+    return _wrap_js_string("".join(parts))
 
 
 def format_var(var: Var) -> str:
@@ -330,7 +392,9 @@ def format_prop(
         if isinstance(prop, Var):
             if not prop._var_is_local or prop._var_is_string:
                 return str(prop)
-            if types._issubclass(prop._var_type, str):
+            if isinstance(prop, BaseVar) and types._issubclass(prop._var_type, str):
+                if prop._var_data and prop._var_data.interpolations:
+                    return format_f_string_prop(prop)
                 return format_string(prop._var_full_name)
             prop = prop._var_full_name
 
diff --git a/reflex/utils/prerequisites.py b/reflex/utils/prerequisites.py
index 909b31035..f4dd5146d 100644
--- a/reflex/utils/prerequisites.py
+++ b/reflex/utils/prerequisites.py
@@ -949,8 +949,15 @@ def should_show_rx_chakra_migration_instructions() -> bool:
     if os.getenv("REFLEX_PROMPT_MIGRATE_TO_RX_CHAKRA") == "yes":
         return True
 
-    with open(constants.Dirs.REFLEX_JSON, "r") as f:
-        data = json.load(f)
+    if not Path(constants.Config.FILE).exists():
+        # They are running reflex init for the first time.
+        return False
+
+    existing_init_reflex_version = None
+    reflex_json = Path(constants.Dirs.REFLEX_JSON)
+    if reflex_json.exists():
+        with reflex_json.open("r") as f:
+            data = json.load(f)
         existing_init_reflex_version = data.get("version", None)
 
     if existing_init_reflex_version is None:
@@ -975,7 +982,9 @@ def show_rx_chakra_migration_instructions():
         "[bold]Run `reflex script keep-chakra` to automatically update your app."
     )
     console.log("")
-    console.log("For more details, please see https://TODO")  # TODO add link to docs
+    console.log(
+        "For more details, please see https://reflex.dev/blog/2024-02-16-reflex-v0.4.0"
+    )
 
 
 def migrate_to_rx_chakra():
@@ -998,23 +1007,22 @@ def migrate_to_rx_chakra():
 
 
 def _get_rx_chakra_component_to_migrate() -> set[str]:
-    from reflex.components import ChakraComponent
+    from reflex.components.chakra import ChakraComponent
 
     rx_chakra_names = set(dir(reflex.chakra))
 
     names_to_migrate = set()
+
+    # whitelist names will always be rewritten as rx.chakra.<x>
     whitelist = {
-        "CodeBlock",
         "ColorModeIcon",
         "MultiSelect",
         "MultiSelectOption",
-        "base",
-        "code_block",
-        "color_mode_cond",
         "color_mode_icon",
         "multi_select",
         "multi_select_option",
     }
+
     for rx_chakra_name in sorted(rx_chakra_names):
         if rx_chakra_name.startswith("_"):
             continue
@@ -1032,12 +1040,8 @@ def _get_rx_chakra_component_to_migrate() -> set[str]:
                 rx_chakra_object, ChakraComponent
             ):
                 names_to_migrate.add(rx_chakra_name)
-                pass
-            else:
-                # For the given rx.chakra.<x>, does rx.<x> exist?
-                # And of these, should we include in migration?
-                if hasattr(reflex, rx_chakra_name) and rx_chakra_name in whitelist:
-                    names_to_migrate.add(rx_chakra_name)
+            elif rx_chakra_name in whitelist:
+                names_to_migrate.add(rx_chakra_name)
 
         except Exception:
             raise
diff --git a/reflex/vars.py b/reflex/vars.py
index 98118b1d1..83cdbcc7e 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -31,8 +31,6 @@ from typing import (
     get_type_hints,
 )
 
-import pydantic
-
 from reflex import constants
 from reflex.base import Base
 from reflex.utils import console, format, imports, serializers, types
@@ -122,6 +120,11 @@ class VarData(Base):
     # Hooks that need to be present in the component to render this var
     hooks: Set[str] = set()
 
+    # Positions of interpolated strings. This is used by the decoder to figure
+    # out where the interpolations are and only escape the non-interpolated
+    # segments.
+    interpolations: List[Tuple[int, int]] = []
+
     @classmethod
     def merge(cls, *others: VarData | None) -> VarData | None:
         """Merge multiple var data objects.
@@ -135,17 +138,21 @@ class VarData(Base):
         state = ""
         _imports = {}
         hooks = set()
+        interpolations = []
         for var_data in others:
             if var_data is None:
                 continue
             state = state or var_data.state
             _imports = imports.merge_imports(_imports, var_data.imports)
             hooks.update(var_data.hooks)
+            interpolations += var_data.interpolations
+
         return (
             cls(
                 state=state,
                 imports=_imports,
                 hooks=hooks,
+                interpolations=interpolations,
             )
             or None
         )
@@ -156,7 +163,7 @@ class VarData(Base):
         Returns:
             True if any field is set to a non-default value.
         """
-        return bool(self.state or self.imports or self.hooks)
+        return bool(self.state or self.imports or self.hooks or self.interpolations)
 
     def __eq__(self, other: Any) -> bool:
         """Check if two var data objects are equal.
@@ -169,6 +176,9 @@ class VarData(Base):
         """
         if not isinstance(other, VarData):
             return False
+
+        # Don't compare interpolations - that's added in by the decoder, and
+        # not part of the vardata itself.
         return (
             self.state == other.state
             and self.hooks == other.hooks
@@ -184,6 +194,7 @@ class VarData(Base):
         """
         return {
             "state": self.state,
+            "interpolations": list(self.interpolations),
             "imports": {
                 lib: [import_var.dict() for import_var in import_vars]
                 for lib, import_vars in self.imports.items()
@@ -202,10 +213,18 @@ def _encode_var(value: Var) -> str:
         The encoded var.
     """
     if value._var_data:
+        from reflex.utils.serializers import serialize
+
+        final_value = str(value)
+        data = value._var_data.dict()
+        data["string_length"] = len(final_value)
+        data_json = value._var_data.__config__.json_dumps(data, default=serialize)
+
         return (
-            f"{constants.REFLEX_VAR_OPENING_TAG}{value._var_data.json()}{constants.REFLEX_VAR_CLOSING_TAG}"
-            + str(value)
+            f"{constants.REFLEX_VAR_OPENING_TAG}{data_json}{constants.REFLEX_VAR_CLOSING_TAG}"
+            + final_value
         )
+
     return str(value)
 
 
@@ -220,21 +239,40 @@ def _decode_var(value: str) -> tuple[VarData | None, str]:
     """
     var_datas = []
     if isinstance(value, str):
-        # Extract the state name from a formatted var
-        while m := re.match(
-            pattern=rf"(.*){constants.REFLEX_VAR_OPENING_TAG}(.*){constants.REFLEX_VAR_CLOSING_TAG}(.*)",
-            string=value,
-            flags=re.DOTALL,  # Ensure . matches newline characters.
-        ):
-            value = m.group(1) + m.group(3)
+        offset = 0
+
+        # Initialize some methods for reading json.
+        var_data_config = VarData().__config__
+
+        def json_loads(s):
             try:
-                var_datas.append(VarData.parse_raw(m.group(2)))
-            except pydantic.ValidationError:
-                # If the VarData is invalid, it was probably json-encoded twice...
-                var_datas.append(VarData.parse_raw(json.loads(f'"{m.group(2)}"')))
-    if var_datas:
-        return VarData.merge(*var_datas), value
-    return None, value
+                return var_data_config.json_loads(s)
+            except json.decoder.JSONDecodeError:
+                return var_data_config.json_loads(var_data_config.json_loads(f'"{s}"'))
+
+        # Compile regex for finding reflex var tags.
+        pattern_re = rf"{constants.REFLEX_VAR_OPENING_TAG}(.*?){constants.REFLEX_VAR_CLOSING_TAG}"
+        pattern = re.compile(pattern_re, flags=re.DOTALL)
+
+        # Find all tags.
+        while m := pattern.search(value):
+            start, end = m.span()
+            value = value[:start] + value[end:]
+
+            # Read the JSON, pull out the string length, parse the rest as VarData.
+            data = json_loads(m.group(1))
+            string_length = data.pop("string_length", None)
+            var_data = VarData.parse_obj(data)
+
+            # Use string length to compute positions of interpolations.
+            if string_length is not None:
+                realstart = start + offset
+                var_data.interpolations = [(realstart, realstart + string_length)]
+
+            var_datas.append(var_data)
+            offset += end - start
+
+    return VarData.merge(*var_datas) if var_datas else None, value
 
 
 def _extract_var_data(value: Iterable) -> list[VarData | None]:
@@ -736,6 +774,9 @@ class Var:
             left_operand_full_name = get_operand_full_name(left_operand)
             right_operand_full_name = get_operand_full_name(right_operand)
 
+            left_operand_full_name = format.wrap(left_operand_full_name, "(")
+            right_operand_full_name = format.wrap(right_operand_full_name, "(")
+
             # apply function to operands
             if fn is not None:
                 if invoke_fn:
diff --git a/reflex/vars.pyi b/reflex/vars.pyi
index fc5d7e100..80f4ad25f 100644
--- a/reflex/vars.pyi
+++ b/reflex/vars.pyi
@@ -1,4 +1,5 @@
 """ Generated with stubgen from mypy, then manually edited, do not regen."""
+from __future__ import annotations
 
 from dataclasses import dataclass
 from _typeshed import Incomplete
@@ -17,6 +18,7 @@ from typing import (
     List,
     Optional,
     Set,
+    Tuple,
     Type,
     Union,
     overload,
@@ -34,6 +36,7 @@ class VarData(Base):
     state: str
     imports: dict[str, set[ImportVar]]
     hooks: set[str]
+    interpolations: List[Tuple[int, int]]
     @classmethod
     def merge(cls, *others: VarData | None) -> VarData | None: ...
 
diff --git a/scripts/pyi_generator.py b/scripts/pyi_generator.py
index 8caf91060..2e8936d13 100644
--- a/scripts/pyi_generator.py
+++ b/scripts/pyi_generator.py
@@ -13,7 +13,7 @@ import typing
 from inspect import getfullargspec
 from multiprocessing import Pool, cpu_count
 from pathlib import Path
-from types import ModuleType
+from types import ModuleType, SimpleNamespace
 from typing import Any, Callable, Iterable, Type, get_args
 
 import black
@@ -54,6 +54,7 @@ EXCLUDED_PROPS = [
     "special_props",
     "_invalid_children",
     "_memoization_mode",
+    "_rename_props",
     "_valid_children",
     "_valid_parents",
 ]
@@ -406,7 +407,7 @@ def _get_parent_imports(func):
 
 def _generate_component_create_functiondef(
     node: ast.FunctionDef | None,
-    clz: type[Component],
+    clz: type[Component] | type[SimpleNamespace],
     type_hint_globals: dict[str, Any],
 ) -> ast.FunctionDef:
     """Generate the create function definition for a Component.
@@ -418,7 +419,13 @@ def _generate_component_create_functiondef(
 
     Returns:
         The create functiondef node for the ast.
+
+    Raises:
+        TypeError: If clz is not a subclass of Component.
     """
+    if not issubclass(clz, Component):
+        raise TypeError(f"clz must be a subclass of Component, not {clz!r}")
+
     # add the imports needed by get_type_hint later
     type_hint_globals.update(
         {name: getattr(typing, name) for name in DEFAULT_TYPING_IMPORTS}
@@ -487,10 +494,55 @@ def _generate_component_create_functiondef(
     return definition
 
 
+def _generate_namespace_call_functiondef(
+    clz_name: str,
+    classes: dict[str, type[Component] | type[SimpleNamespace]],
+    type_hint_globals: dict[str, Any],
+) -> ast.FunctionDef | None:
+    """Generate the __call__ function definition for a SimpleNamespace.
+
+    Args:
+        clz_name: The name of the SimpleNamespace class to generate the __call__ functiondef for.
+        classes: Map name to actual class definition.
+        type_hint_globals: The globals to use to resolving a type hint str.
+
+    Returns:
+        The create functiondef node for the ast.
+    """
+    # add the imports needed by get_type_hint later
+    type_hint_globals.update(
+        {name: getattr(typing, name) for name in DEFAULT_TYPING_IMPORTS}
+    )
+
+    clz = classes[clz_name]
+
+    # Determine which class is wrapped by the namespace __call__ method
+    component_clz = clz.__call__.__self__
+
+    # Only generate for create functions
+    if clz.__call__.__func__.__name__ != "create":
+        return None
+
+    definition = _generate_component_create_functiondef(
+        node=None,
+        clz=component_clz,  # type: ignore
+        type_hint_globals=type_hint_globals,
+    )
+    definition.name = "__call__"
+
+    # Turn the definition into a staticmethod
+    del definition.args.args[0]  # remove `cls` arg
+    definition.decorator_list = [ast.Name(id="staticmethod")]
+
+    return definition
+
+
 class StubGenerator(ast.NodeTransformer):
     """A node transformer that will generate the stubs for a given module."""
 
-    def __init__(self, module: ModuleType, classes: dict[str, Type[Component]]):
+    def __init__(
+        self, module: ModuleType, classes: dict[str, Type[Component | SimpleNamespace]]
+    ):
         """Initialize the stub generator.
 
         Args:
@@ -531,6 +583,18 @@ class StubGenerator(ast.NodeTransformer):
             node.body.pop(0)
         return node
 
+    def _current_class_is_component(self) -> bool:
+        """Check if the current class is a Component.
+
+        Returns:
+            Whether the current class is a Component.
+        """
+        return (
+            self.current_class is not None
+            and self.current_class in self.classes
+            and issubclass(self.classes[self.current_class], Component)
+        )
+
     def visit_Module(self, node: ast.Module) -> ast.Module:
         """Visit a Module node and remove docstring from body.
 
@@ -594,6 +658,27 @@ class StubGenerator(ast.NodeTransformer):
         exec("\n".join(self.import_statements), self.type_hint_globals)
         self.current_class = node.name
         self._remove_docstring(node)
+
+        # Define `__call__` as a real function so the docstring appears in the stub.
+        call_definition = None
+        for child in node.body[:]:
+            found_call = False
+            if isinstance(child, ast.Assign):
+                for target in child.targets[:]:
+                    if isinstance(target, ast.Name) and target.id == "__call__":
+                        child.targets.remove(target)
+                        found_call = True
+                if not found_call:
+                    continue
+                if not child.targets[:]:
+                    node.body.remove(child)
+                call_definition = _generate_namespace_call_functiondef(
+                    self.current_class,
+                    self.classes,
+                    type_hint_globals=self.type_hint_globals,
+                )
+                break
+
         self.generic_visit(node)  # Visit child nodes.
 
         if (
@@ -601,7 +686,7 @@ class StubGenerator(ast.NodeTransformer):
                 isinstance(child, ast.FunctionDef) and child.name == "create"
                 for child in node.body
             )
-            and self.current_class in self.classes
+            and self._current_class_is_component()
         ):
             # Add a new .create FunctionDef since one does not exist.
             node.body.append(
@@ -611,6 +696,8 @@ class StubGenerator(ast.NodeTransformer):
                     type_hint_globals=self.type_hint_globals,
                 )
             )
+        if call_definition is not None:
+            node.body.append(call_definition)
         if not node.body:
             # We should never return an empty body.
             node.body.append(ast.Expr(value=ast.Ellipsis()))
@@ -637,11 +724,12 @@ class StubGenerator(ast.NodeTransformer):
                 node, self.classes[self.current_class], self.type_hint_globals
             )
         else:
-            if node.name.startswith("_"):
+            if node.name.startswith("_") and node.name != "__call__":
                 return None  # remove private methods
 
-            # Blank out the function body for public functions.
-            node.body = [ast.Expr(value=ast.Ellipsis())]
+            if node.body[-1] != ast.Expr(value=ast.Ellipsis()):
+                # Blank out the function body for public functions.
+                node.body = [ast.Expr(value=ast.Ellipsis())]
         return node
 
     def visit_Assign(self, node: ast.Assign) -> ast.Assign | None:
@@ -660,9 +748,11 @@ class StubGenerator(ast.NodeTransformer):
             and node.value.id == "Any"
         ):
             return node
-        if self.current_class in self.classes:
+
+        if self._current_class_is_component():
             # Remove annotated assignments in Component classes (props)
             return None
+
         return node
 
     def visit_AnnAssign(self, node: ast.AnnAssign) -> ast.AnnAssign | None:
@@ -744,7 +834,7 @@ class PyiGenerator:
             name: obj
             for name, obj in vars(module).items()
             if inspect.isclass(obj)
-            and issubclass(obj, Component)
+            and (issubclass(obj, Component) or issubclass(obj, SimpleNamespace))
             and obj != Component
             and inspect.getmodule(obj) == module
         }
@@ -825,7 +915,11 @@ if __name__ == "__main__":
     logging.basicConfig(level=logging.DEBUG)
     logging.getLogger("blib2to3.pgen2.driver").setLevel(logging.INFO)
 
-    targets = sys.argv[1:] if len(sys.argv) > 1 else ["reflex/components"]
+    targets = (
+        [arg for arg in sys.argv[1:] if not arg.startswith("tests")]
+        if len(sys.argv) > 1
+        else ["reflex/components"]
+    )
     logger.info(f"Running .pyi generator for {targets}")
 
     changed_files = _get_changed_files()
diff --git a/tests/components/datadisplay/test_code.py b/tests/components/datadisplay/test_code.py
index 1557cef84..64452e90c 100644
--- a/tests/components/datadisplay/test_code.py
+++ b/tests/components/datadisplay/test_code.py
@@ -1,6 +1,6 @@
 import pytest
 
-from reflex.components.chakra.datadisplay.code import CodeBlock
+from reflex.components.datadisplay.code import CodeBlock
 
 
 @pytest.mark.parametrize(
diff --git a/tests/components/forms/test_debounce.py b/tests/components/forms/test_debounce.py
index d893ba02c..a63604ca8 100644
--- a/tests/components/forms/test_debounce.py
+++ b/tests/components/forms/test_debounce.py
@@ -44,7 +44,7 @@ class S(BaseState):
 def test_render_child_props():
     """DebounceInput should render props from child component."""
     tag = rx.debounce_input(
-        rx.input(
+        rx.chakra.input(
             foo="bar",
             baz="quuc",
             value="real",
@@ -72,7 +72,7 @@ def test_render_child_props_recursive():
         rx.debounce_input(
             rx.debounce_input(
                 rx.debounce_input(
-                    rx.input(
+                    rx.chakra.input(
                         foo="bar",
                         baz="quuc",
                         value="real",
@@ -104,7 +104,7 @@ def test_render_child_props_recursive():
 
 def test_full_control_implicit_debounce():
     """DebounceInput is used when value and on_change are used together."""
-    tag = rx.input(
+    tag = rx.chakra.input(
         value=S.value,
         on_change=S.on_change,
     )._render()
diff --git a/tests/components/forms/test_uploads.py b/tests/components/forms/test_uploads.py
index c3ca14cfb..5bf212219 100644
--- a/tests/components/forms/test_uploads.py
+++ b/tests/components/forms/test_uploads.py
@@ -72,10 +72,10 @@ def test_upload_component_render(upload_component):
     assert input["name"] == "Input"
     assert input["props"] == ["type={`file`}", "{...getInputProps()}"]
 
-    assert button["name"] == "Button"
+    assert button["name"] == "RadixThemesButton"
     assert button["children"][0]["contents"] == "{`select file`}"
 
-    assert text["name"] == "Text"
+    assert text["name"] == "RadixThemesText"
     assert (
         text["children"][0]["contents"]
         == "{`Drag and drop files here or click to select files`}"
diff --git a/tests/components/layout/test_cond.py b/tests/components/layout/test_cond.py
index d60d65085..56a3e156d 100644
--- a/tests/components/layout/test_cond.py
+++ b/tests/components/layout/test_cond.py
@@ -27,6 +27,12 @@ def cond_state(request):
     return CondState
 
 
+def test_f_string_cond_interpolation():
+    # make sure backticks inside interpolation don't get escaped
+    var = Var.create(f"x {cond(True, 'a', 'b')}")
+    assert str(var) == "x ${isTrue(true) ? `a` : `b`}"
+
+
 @pytest.mark.parametrize(
     "cond_state",
     [
diff --git a/tests/components/layout/test_match.py b/tests/components/layout/test_match.py
index 233e9c643..ad9e7cb4e 100644
--- a/tests/components/layout/test_match.py
+++ b/tests/components/layout/test_match.py
@@ -43,7 +43,7 @@ def test_match_components():
     assert match_cases[0][0]._var_name == "1"
     assert match_cases[0][0]._var_type == int
     first_return_value_render = match_cases[0][1].render()
-    assert first_return_value_render["name"] == "Text"
+    assert first_return_value_render["name"] == "RadixThemesText"
     assert first_return_value_render["children"][0]["contents"] == "{`first value`}"
 
     assert match_cases[1][0]._var_name == "2"
@@ -51,36 +51,36 @@ def test_match_components():
     assert match_cases[1][1]._var_name == "3"
     assert match_cases[1][1]._var_type == int
     second_return_value_render = match_cases[1][2].render()
-    assert second_return_value_render["name"] == "Text"
+    assert second_return_value_render["name"] == "RadixThemesText"
     assert second_return_value_render["children"][0]["contents"] == "{`second value`}"
 
     assert match_cases[2][0]._var_name == "[1, 2]"
     assert match_cases[2][0]._var_type == list
     third_return_value_render = match_cases[2][1].render()
-    assert third_return_value_render["name"] == "Text"
+    assert third_return_value_render["name"] == "RadixThemesText"
     assert third_return_value_render["children"][0]["contents"] == "{`third value`}"
 
     assert match_cases[3][0]._var_name == "random"
     assert match_cases[3][0]._var_type == str
     fourth_return_value_render = match_cases[3][1].render()
-    assert fourth_return_value_render["name"] == "Text"
+    assert fourth_return_value_render["name"] == "RadixThemesText"
     assert fourth_return_value_render["children"][0]["contents"] == "{`fourth value`}"
 
     assert match_cases[4][0]._var_name == '{"foo": "bar"}'
     assert match_cases[4][0]._var_type == dict
     fifth_return_value_render = match_cases[4][1].render()
-    assert fifth_return_value_render["name"] == "Text"
+    assert fifth_return_value_render["name"] == "RadixThemesText"
     assert fifth_return_value_render["children"][0]["contents"] == "{`fifth value`}"
 
-    assert match_cases[5][0]._var_name == "(match_state.num + 1)"
+    assert match_cases[5][0]._var_name == "((match_state.num) + (1))"
     assert match_cases[5][0]._var_type == int
     fifth_return_value_render = match_cases[5][1].render()
-    assert fifth_return_value_render["name"] == "Text"
+    assert fifth_return_value_render["name"] == "RadixThemesText"
     assert fifth_return_value_render["children"][0]["contents"] == "{`sixth value`}"
 
     default = match_child["default"].render()
 
-    assert default["name"] == "Text"
+    assert default["name"] == "RadixThemesText"
     assert default["children"][0]["contents"] == "{`default value`}"
 
 
@@ -102,7 +102,7 @@ def test_match_components():
             "(() => { switch (JSON.stringify(match_state.value)) {case JSON.stringify(1):  return (`first`);  break;case JSON.stringify(2): case JSON.stringify(3):  return "
             "(`second value`);  break;case JSON.stringify([1, 2]):  return (`third-value`);  break;case JSON.stringify(`random`):  "
             'return (`fourth_value`);  break;case JSON.stringify({"foo": "bar"}):  return (`fifth value`);  '
-            "break;case JSON.stringify((match_state.num + 1)):  return (`sixth value`);  break;case JSON.stringify(`${match_state.value} - string`):  "
+            "break;case JSON.stringify(((match_state.num) + (1))):  return (`sixth value`);  break;case JSON.stringify(`${match_state.value} - string`):  "
             "return (match_state.string);  break;case JSON.stringify(match_state.string):  return (`${match_state.value} - string`);  break;default:  "
             "return (`default value`);  break;};})()",
         ),
@@ -121,7 +121,7 @@ def test_match_components():
             "(() => { switch (JSON.stringify(match_state.value)) {case JSON.stringify(1):  return (`first`);  break;case JSON.stringify(2): case JSON.stringify(3):  return "
             "(`second value`);  break;case JSON.stringify([1, 2]):  return (`third-value`);  break;case JSON.stringify(`random`):  "
             'return (`fourth_value`);  break;case JSON.stringify({"foo": "bar"}):  return (`fifth value`);  '
-            "break;case JSON.stringify((match_state.num + 1)):  return (`sixth value`);  break;case JSON.stringify(`${match_state.value} - string`):  "
+            "break;case JSON.stringify(((match_state.num) + (1))):  return (`sixth value`);  break;case JSON.stringify(`${match_state.value} - string`):  "
             "return (match_state.string);  break;case JSON.stringify(match_state.string):  return (`${match_state.value} - string`);  break;default:  "
             "return (match_state.string);  break;};})()",
         ),
@@ -143,6 +143,8 @@ def test_match_on_component_without_default():
     """Test that matching cases with return values as components returns a Fragment
     as the default case if not provided.
     """
+    from reflex.components.base.fragment import Fragment
+
     match_case_tuples = (
         (1, rx.text("first value")),
         (2, 3, rx.text("second value")),
@@ -151,7 +153,7 @@ def test_match_on_component_without_default():
     match_comp = Match.create(MatchState.value, *match_case_tuples)
     default = match_comp.render()["children"][0]["default"]  # type: ignore
 
-    assert isinstance(default, rx.Fragment)
+    assert isinstance(default, Fragment)
 
 
 def test_match_on_var_no_default():
@@ -258,8 +260,8 @@ def test_match_case_tuple_elements(match_case):
                 ([1, 2], rx.text("third value")),
                 rx.text("default value"),
             ),
-            "Match cases should have the same return types. Case 3 with return value `<Text> {`first value`} </Text>` "
-            "of type <class 'reflex.components.chakra.typography.text.Text'> is not <class 'reflex.vars.BaseVar'>",
+            "Match cases should have the same return types. Case 3 with return value `<RadixThemesText as={`p`}> {`first value`} </RadixThemesText>` "
+            "of type <class 'reflex.components.radix.themes.typography.text.Text'> is not <class 'reflex.vars.BaseVar'>",
         ),
     ],
 )
diff --git a/tests/components/media/test_image.py b/tests/components/media/test_image.py
index ace0c1f31..a39895c67 100644
--- a/tests/components/media/test_image.py
+++ b/tests/components/media/test_image.py
@@ -35,7 +35,10 @@ def test_serialize_image(pil_image: Img):
 def test_set_src_str():
     """Test that setting the src works."""
     image = rx.image(src="pic2.jpeg")
-    assert str(image.src) == "{`pic2.jpeg`}"  # type: ignore
+    # when using next/image, we explicitly create a _var_is_str Var
+    # assert str(image.src) == "{`pic2.jpeg`}"  # type: ignore
+    # For plain rx.el.img, an explicit var is not created, so the quoting happens later
+    assert str(image.src) == "pic2.jpeg"  # type: ignore
 
 
 def test_set_src_img(pil_image: Img):
diff --git a/tests/components/test_component.py b/tests/components/test_component.py
index fb9479979..04468b2ba 100644
--- a/tests/components/test_component.py
+++ b/tests/components/test_component.py
@@ -450,7 +450,7 @@ def test_component_event_trigger_arbitrary_args():
 
     assert comp.render()["props"][0] == (
         "onFoo={(__e,_alpha,_bravo,_charlie) => addEvents("
-        '[Event("c1_state.mock_handler", {_e:__e.target.value,_bravo:_bravo["nested"],_charlie:(_charlie.custom + 42)})], '
+        '[Event("c1_state.mock_handler", {_e:__e.target.value,_bravo:_bravo["nested"],_charlie:((_charlie.custom) + (42))})], '
         "(__e,_alpha,_bravo,_charlie), {})}"
     )
 
@@ -488,12 +488,14 @@ def test_custom_component_wrapper():
             color=color,
         )
 
+    from reflex.components.radix.themes.typography.text import Text
+
     ccomponent = my_component(
         rx.text("child"), width=Var.create(1), color=Var.create("red")
     )
     assert isinstance(ccomponent, CustomComponent)
     assert len(ccomponent.children) == 1
-    assert isinstance(ccomponent.children[0], rx.Text)
+    assert isinstance(ccomponent.children[0], Text)
 
     component = ccomponent.get_component(ccomponent)
     assert isinstance(component, Box)
@@ -595,7 +597,7 @@ def test_unsupported_parent_components(component5):
         component5: component with valid parent of "Text" only
     """
     with pytest.raises(ValueError) as err:
-        rx.Box(children=[component5.create()])
+        rx.box(component5.create())
     assert (
         err.value.args[0]
         == f"The component `{component5.__name__}` can only be a child of the components: `{component5._valid_parents[0]}`. Got `Box` instead."
@@ -625,10 +627,10 @@ def test_component_with_only_valid_children(fixture, request):
 @pytest.mark.parametrize(
     "component,rendered",
     [
-        (rx.text("hi"), "<Text>\n  {`hi`}\n</Text>"),
+        (rx.text("hi"), "<RadixThemesText as={`p`}>\n  {`hi`}\n</RadixThemesText>"),
         (
-            rx.box(rx.heading("test", size="md")),
-            "<Box>\n  <Heading size={`md`}>\n  {`test`}\n</Heading>\n</Box>",
+            rx.box(rx.chakra.heading("test", size="md")),
+            "<RadixThemesBox>\n  <Heading size={`md`}>\n  {`test`}\n</Heading>\n</RadixThemesBox>",
         ),
     ],
 )
@@ -685,7 +687,10 @@ def test_stateful_banner():
 
 TEST_VAR = Var.create_safe("test")._replace(
     merge_var_data=VarData(
-        hooks={"useTest"}, imports={"test": {ImportVar(tag="test")}}, state="Test"
+        hooks={"useTest"},
+        imports={"test": {ImportVar(tag="test")}},
+        state="Test",
+        interpolations=[],
     )
 )
 FORMATTED_TEST_VAR = Var.create(f"foo{TEST_VAR}bar")
@@ -766,7 +771,7 @@ class EventState(rx.State):
             id="direct-prop",
         ),
         pytest.param(
-            rx.text(as_=f"foo{TEST_VAR}bar"),
+            rx.heading(as_=f"foo{TEST_VAR}bar"),
             [FORMATTED_TEST_VAR],
             id="fstring-prop",
         ),
@@ -946,3 +951,321 @@ def test_instantiate_all_components():
         component = getattr(rx, component_name)
         if isinstance(component, type) and issubclass(component, Component):
             component.create()
+
+
+class InvalidParentComponent(Component):
+    """Invalid Parent Component."""
+
+    ...
+
+
+class ValidComponent1(Component):
+    """Test valid component."""
+
+    _valid_children = ["ValidComponent2"]
+
+
+class ValidComponent2(Component):
+    """Test valid component."""
+
+    ...
+
+
+class ValidComponent3(Component):
+    """Test valid component."""
+
+    _valid_parents = ["ValidComponent2"]
+
+
+class ValidComponent4(Component):
+    """Test valid component."""
+
+    _invalid_children = ["InvalidComponent"]
+
+
+class InvalidComponent(Component):
+    """Test invalid component."""
+
+    ...
+
+
+valid_component1 = ValidComponent1.create
+valid_component2 = ValidComponent2.create
+invalid_component = InvalidComponent.create
+valid_component3 = ValidComponent3.create
+invalid_parent = InvalidParentComponent.create
+valid_component4 = ValidComponent4.create
+
+
+def test_validate_valid_children():
+    valid_component1(valid_component2())
+    valid_component1(
+        rx.fragment(valid_component2()),
+    )
+    valid_component1(
+        rx.fragment(
+            rx.fragment(
+                rx.fragment(valid_component2()),
+            ),
+        ),
+    )
+
+    valid_component1(
+        rx.cond(  # type: ignore
+            True,
+            rx.fragment(valid_component2()),
+            rx.fragment(
+                rx.foreach(Var.create([1, 2, 3]), lambda x: valid_component2(x))  # type: ignore
+            ),
+        )
+    )
+
+    valid_component1(
+        rx.cond(
+            True,
+            valid_component2(),
+            rx.fragment(
+                rx.match(
+                    "condition",
+                    ("first", valid_component2()),
+                    rx.fragment(valid_component2(rx.text("default"))),
+                )
+            ),
+        )
+    )
+
+    valid_component1(
+        rx.match(
+            "condition",
+            ("first", valid_component2()),
+            ("second", "third", rx.fragment(valid_component2())),
+            (
+                "fourth",
+                rx.cond(True, valid_component2(), rx.fragment(valid_component2())),
+            ),
+            (
+                "fifth",
+                rx.match(
+                    "nested_condition",
+                    ("nested_first", valid_component2()),
+                    rx.fragment(valid_component2()),
+                ),
+                valid_component2(),
+            ),
+        )
+    )
+
+
+def test_validate_valid_parents():
+    valid_component2(valid_component3())
+    valid_component2(
+        rx.fragment(valid_component3()),
+    )
+    valid_component1(
+        rx.fragment(
+            valid_component2(
+                rx.fragment(valid_component3()),
+            ),
+        ),
+    )
+
+    valid_component2(
+        rx.cond(  # type: ignore
+            True,
+            rx.fragment(valid_component3()),
+            rx.fragment(
+                rx.foreach(
+                    Var.create([1, 2, 3]),  # type: ignore
+                    lambda x: valid_component2(valid_component3(x)),
+                )
+            ),
+        )
+    )
+
+    valid_component2(
+        rx.cond(
+            True,
+            valid_component3(),
+            rx.fragment(
+                rx.match(
+                    "condition",
+                    ("first", valid_component3()),
+                    rx.fragment(valid_component3(rx.text("default"))),
+                )
+            ),
+        )
+    )
+
+    valid_component2(
+        rx.match(
+            "condition",
+            ("first", valid_component3()),
+            ("second", "third", rx.fragment(valid_component3())),
+            (
+                "fourth",
+                rx.cond(True, valid_component3(), rx.fragment(valid_component3())),
+            ),
+            (
+                "fifth",
+                rx.match(
+                    "nested_condition",
+                    ("nested_first", valid_component3()),
+                    rx.fragment(valid_component3()),
+                ),
+                valid_component3(),
+            ),
+        )
+    )
+
+
+def test_validate_invalid_children():
+    with pytest.raises(ValueError):
+        valid_component4(invalid_component())
+
+    with pytest.raises(ValueError):
+        valid_component4(
+            rx.fragment(invalid_component()),
+        )
+
+    with pytest.raises(ValueError):
+        valid_component2(
+            rx.fragment(
+                valid_component4(
+                    rx.fragment(invalid_component()),
+                ),
+            ),
+        )
+
+    with pytest.raises(ValueError):
+        valid_component4(
+            rx.cond(  # type: ignore
+                True,
+                rx.fragment(invalid_component()),
+                rx.fragment(
+                    rx.foreach(Var.create([1, 2, 3]), lambda x: invalid_component(x))  # type: ignore
+                ),
+            )
+        )
+
+    with pytest.raises(ValueError):
+        valid_component4(
+            rx.cond(
+                True,
+                invalid_component(),
+                rx.fragment(
+                    rx.match(
+                        "condition",
+                        ("first", invalid_component()),
+                        rx.fragment(invalid_component(rx.text("default"))),
+                    )
+                ),
+            )
+        )
+
+    with pytest.raises(ValueError):
+        valid_component4(
+            rx.match(
+                "condition",
+                ("first", invalid_component()),
+                ("second", "third", rx.fragment(invalid_component())),
+                (
+                    "fourth",
+                    rx.cond(True, invalid_component(), rx.fragment(valid_component2())),
+                ),
+                (
+                    "fifth",
+                    rx.match(
+                        "nested_condition",
+                        ("nested_first", invalid_component()),
+                        rx.fragment(invalid_component()),
+                    ),
+                    invalid_component(),
+                ),
+            )
+        )
+
+
+def test_rename_props():
+    """Test that _rename_props works and is inherited."""
+
+    class C1(Component):
+        tag = "C1"
+
+        prop1: Var[str]
+        prop2: Var[str]
+
+        _rename_props = {"prop1": "renamed_prop1", "prop2": "renamed_prop2"}
+
+    class C2(C1):
+        tag = "C2"
+
+        prop3: Var[str]
+
+        _rename_props = {"prop2": "subclass_prop2", "prop3": "renamed_prop3"}
+
+    c1 = C1.create(prop1="prop1_1", prop2="prop2_1")
+    rendered_c1 = c1.render()
+    assert "renamed_prop1={`prop1_1`}" in rendered_c1["props"]
+    assert "renamed_prop2={`prop2_1`}" in rendered_c1["props"]
+
+    c2 = C2.create(prop1="prop1_2", prop2="prop2_2", prop3="prop3_2")
+    rendered_c2 = c2.render()
+    assert "renamed_prop1={`prop1_2`}" in rendered_c2["props"]
+    assert "subclass_prop2={`prop2_2`}" in rendered_c2["props"]
+    assert "renamed_prop3={`prop3_2`}" in rendered_c2["props"]
+
+
+def test_deprecated_props(capsys):
+    """Assert that deprecated underscore suffix props are translated.
+
+    Args:
+        capsys: Pytest fixture for capturing stdout and stderr.
+    """
+
+    class C1(Component):
+        tag = "C1"
+
+        type: Var[str]
+        min: Var[str]
+        max: Var[str]
+
+    # No warnings are emitted when using the new prop names.
+    c1_1 = C1.create(type="type1", min="min1", max="max1")
+    out_err = capsys.readouterr()
+    assert not out_err.err
+    assert not out_err.out
+
+    c1_1_render = c1_1.render()
+    assert "type={`type1`}" in c1_1_render["props"]
+    assert "min={`min1`}" in c1_1_render["props"]
+    assert "max={`max1`}" in c1_1_render["props"]
+
+    # Deprecation warning is emitted with underscore suffix,
+    # but the component still works.
+    c1_2 = C1.create(type_="type2", min_="min2", max_="max2")
+    out_err = capsys.readouterr()
+    assert out_err.out.count("DeprecationWarning:") == 3
+    assert not out_err.err
+
+    c1_2_render = c1_2.render()
+    assert "type={`type2`}" in c1_2_render["props"]
+    assert "min={`min2`}" in c1_2_render["props"]
+    assert "max={`max2`}" in c1_2_render["props"]
+
+    class C2(Component):
+        tag = "C2"
+
+        type_: Var[str]
+        min_: Var[str]
+        max_: Var[str]
+
+    # No warnings are emitted if the actual prop has an underscore suffix
+    c2_1 = C2.create(type_="type1", min_="min1", max_="max1")
+    out_err = capsys.readouterr()
+    assert not out_err.err
+    assert not out_err.out
+
+    c2_1_render = c2_1.render()
+    assert "type={`type1`}" in c2_1_render["props"]
+    assert "min={`min1`}" in c2_1_render["props"]
+    assert "max={`max1`}" in c2_1_render["props"]
diff --git a/tests/components/typography/test_markdown.py b/tests/components/typography/test_markdown.py
index 2d136b498..32d6c040f 100644
--- a/tests/components/typography/test_markdown.py
+++ b/tests/components/typography/test_markdown.py
@@ -37,7 +37,7 @@ def test_set_component_map():
     """Test setting the component map."""
     component_map = {
         "h1": lambda value: rx.box(
-            rx.heading(value, as_="h1", size="2xl"), padding="1em"
+            rx.chakra.heading(value, as_="h1", size="2xl"), padding="1em"
         ),
         "p": lambda value: rx.box(rx.text(value), padding="1em"),
     }
@@ -58,6 +58,6 @@ def test_pass_custom_styles():
     comp = md.get_component("h1")  # type: ignore
     assert comp.style == {
         "color": "red",
-        "margin-bottom": "0.5em",
-        "margin-top": "0.5em",
+        "marginBottom": "0.5em",
+        "marginTop": "0.5em",
     }
diff --git a/tests/test_app.py b/tests/test_app.py
index 756b701fa..08b24b2ea 100644
--- a/tests/test_app.py
+++ b/tests/test_app.py
@@ -15,7 +15,7 @@ from starlette_admin.auth import AuthProvider
 from starlette_admin.contrib.sqla.admin import Admin
 from starlette_admin.contrib.sqla.view import ModelView
 
-import reflex.components.radix.themes as rdxt
+import reflex as rx
 from reflex import AdminDash, constants
 from reflex.app import (
     App,
@@ -24,7 +24,8 @@ from reflex.app import (
     process,
     upload,
 )
-from reflex.components import Box, Component, Cond, Fragment, Text
+from reflex.components import Component, Cond, Fragment
+from reflex.components.radix.themes.typography.text import Text
 from reflex.event import Event
 from reflex.middleware import HydrateMiddleware
 from reflex.model import Model
@@ -58,7 +59,7 @@ def index_page():
     """
 
     def index():
-        return Box.create("Index")
+        return rx.box("Index")
 
     return index
 
@@ -72,7 +73,7 @@ def about_page():
     """
 
     def about():
-        return Box.create("About")
+        return rx.box("About")
 
     return about
 
@@ -1172,7 +1173,7 @@ def test_overlay_component(
             exp_page_child,
         )
 
-    app.add_page(Box.create("Index"), route="/test")
+    app.add_page(rx.box("Index"), route="/test")
     page = app.pages["test"]
     if exp_page_child is not None:
         assert len(page.children) == 3
@@ -1212,7 +1213,7 @@ def test_app_wrap_compile_theme(compilable_app):
         compilable_app: compilable_app fixture.
     """
     app, web_dir = compilable_app
-    app.theme = rdxt.theme(accent_color="plum")
+    app.theme = rx.theme(accent_color="plum")
     app.compile_()
     app_js_contents = (web_dir / "pages" / "_app.js").read_text()
     app_js_lines = [
@@ -1245,13 +1246,13 @@ def test_app_wrap_priority(compilable_app):
         tag = "Fragment1"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
-            return {(99, "Box"): Box.create()}
+            return {(99, "Box"): rx.chakra.box()}
 
     class Fragment2(Component):
         tag = "Fragment2"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
-            return {(50, "Text"): Text.create()}
+            return {(50, "Text"): rx.chakra.text()}
 
     class Fragment3(Component):
         tag = "Fragment3"
diff --git a/tests/test_style.py b/tests/test_style.py
index 79ecee23c..ccc7b6569 100644
--- a/tests/test_style.py
+++ b/tests/test_style.py
@@ -6,6 +6,7 @@ import pytest
 
 import reflex as rx
 from reflex import style
+from reflex.components.component import evaluate_style_namespaces
 from reflex.style import Style
 from reflex.vars import Var
 
@@ -20,17 +21,17 @@ test_style = [
         {"::-webkit-scrollbar": {"display": "none"}},
         {"::-webkit-scrollbar": {"display": "none"}},
     ),
-    ({"margin_y": "2rem"}, {"margin-bottom": "2rem", "margin-top": "2rem"}),
-    ({"marginY": "2rem"}, {"margin-bottom": "2rem", "margin-top": "2rem"}),
+    ({"margin_y": "2rem"}, {"marginBottom": "2rem", "marginTop": "2rem"}),
+    ({"marginY": "2rem"}, {"marginBottom": "2rem", "marginTop": "2rem"}),
     (
         {"::-webkit-scrollbar": {"bgColor": "red"}},
-        {"::-webkit-scrollbar": {"background-color": "red"}},
+        {"::-webkit-scrollbar": {"backgroundColor": "red"}},
     ),
     (
         {"paddingX": ["2rem", "3rem"]},
         {
-            "padding-inline-start": ["2rem", "3rem"],
-            "padding-inline-end": ["2rem", "3rem"],
+            "paddingInlineStart": ["2rem", "3rem"],
+            "paddingInlineEnd": ["2rem", "3rem"],
         },
     ),
 ]
@@ -494,3 +495,11 @@ def test_style_via_component_with_state(
     assert comp.style._var_data == expected_get_style["css"]._var_data
     # Assert that style values are equal.
     compare_dict_of_var(comp._get_style(), expected_get_style)
+
+
+def test_evaluate_style_namespaces():
+    """Test that namespaces get converted to component create functions."""
+    style_dict = {rx.text: {"color": "blue"}}
+    assert rx.text.__call__ not in style_dict
+    style_dict = evaluate_style_namespaces(style_dict)  # type: ignore
+    assert rx.text.__call__ in style_dict
diff --git a/tests/test_var.py b/tests/test_var.py
index df9b7453e..3d7d23d89 100644
--- a/tests/test_var.py
+++ b/tests/test_var.py
@@ -245,30 +245,30 @@ def test_basic_operations(TestObj):
     Args:
         TestObj: The test object.
     """
-    assert str(v(1) == v(2)) == "{(1 === 2)}"
-    assert str(v(1) != v(2)) == "{(1 !== 2)}"
-    assert str(v(1) < v(2)) == "{(1 < 2)}"
-    assert str(v(1) <= v(2)) == "{(1 <= 2)}"
-    assert str(v(1) > v(2)) == "{(1 > 2)}"
-    assert str(v(1) >= v(2)) == "{(1 >= 2)}"
-    assert str(v(1) + v(2)) == "{(1 + 2)}"
-    assert str(v(1) - v(2)) == "{(1 - 2)}"
-    assert str(v(1) * v(2)) == "{(1 * 2)}"
-    assert str(v(1) / v(2)) == "{(1 / 2)}"
-    assert str(v(1) // v(2)) == "{Math.floor(1 / 2)}"
-    assert str(v(1) % v(2)) == "{(1 % 2)}"
-    assert str(v(1) ** v(2)) == "{Math.pow(1 , 2)}"
-    assert str(v(1) & v(2)) == "{(1 && 2)}"
-    assert str(v(1) | v(2)) == "{(1 || 2)}"
+    assert str(v(1) == v(2)) == "{((1) === (2))}"
+    assert str(v(1) != v(2)) == "{((1) !== (2))}"
+    assert str(v(1) < v(2)) == "{((1) < (2))}"
+    assert str(v(1) <= v(2)) == "{((1) <= (2))}"
+    assert str(v(1) > v(2)) == "{((1) > (2))}"
+    assert str(v(1) >= v(2)) == "{((1) >= (2))}"
+    assert str(v(1) + v(2)) == "{((1) + (2))}"
+    assert str(v(1) - v(2)) == "{((1) - (2))}"
+    assert str(v(1) * v(2)) == "{((1) * (2))}"
+    assert str(v(1) / v(2)) == "{((1) / (2))}"
+    assert str(v(1) // v(2)) == "{Math.floor((1) / (2))}"
+    assert str(v(1) % v(2)) == "{((1) % (2))}"
+    assert str(v(1) ** v(2)) == "{Math.pow((1) , (2))}"
+    assert str(v(1) & v(2)) == "{((1) && (2))}"
+    assert str(v(1) | v(2)) == "{((1) || (2))}"
     assert str(v([1, 2, 3])[v(0)]) == "{[1, 2, 3].at(0)}"
     assert str(v({"a": 1, "b": 2})["a"]) == '{{"a": 1, "b": 2}["a"]}'
-    assert str(v("foo") == v("bar")) == '{("foo" === "bar")}'
+    assert str(v("foo") == v("bar")) == '{(("foo") === ("bar"))}'
     assert (
         str(
             Var.create("foo", _var_is_local=False)
             == Var.create("bar", _var_is_local=False)
         )
-        == "{(foo === bar)}"
+        == "{((foo) === (bar))}"
     )
     assert (
         str(
@@ -279,7 +279,7 @@ def test_basic_operations(TestObj):
                 _var_name="bar", _var_type=str, _var_is_string=True, _var_is_local=True
             )
         )
-        == "(`foo` === `bar`)"
+        == "((`foo`) === (`bar`))"
     )
     assert (
         str(
@@ -295,7 +295,7 @@ def test_basic_operations(TestObj):
                 _var_name="bar", _var_type=str, _var_is_string=True, _var_is_local=True
             )
         )
-        == "{(state.foo.bar === `bar`)}"
+        == "{((state.foo.bar) === (`bar`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=TestObj)._var_set_state("state").bar)
@@ -303,7 +303,7 @@ def test_basic_operations(TestObj):
     )
     assert str(abs(v(1))) == "{Math.abs(1)}"
     assert str(v([1, 2, 3]).length()) == "{[1, 2, 3].length}"
-    assert str(v([1, 2]) + v([3, 4])) == "{spreadArraysOrObjects([1, 2] , [3, 4])}"
+    assert str(v([1, 2]) + v([3, 4])) == "{spreadArraysOrObjects(([1, 2]) , ([3, 4]))}"
 
     # Tests for reverse operation
     assert str(v([1, 2, 3]).reverse()) == "{[...[1, 2, 3]].reverse()}"
@@ -319,55 +319,55 @@ def test_basic_operations(TestObj):
     assert str(BaseVar(_var_name="foo", _var_type=str)._type()) == "{typeof foo}"  # type: ignore
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() == str)  # type: ignore
-        == "{(typeof foo === `string`)}"
+        == "{((typeof foo) === (`string`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() == str)  # type: ignore
-        == "{(typeof foo === `string`)}"
+        == "{((typeof foo) === (`string`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() == int)  # type: ignore
-        == "{(typeof foo === `number`)}"
+        == "{((typeof foo) === (`number`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() == list)  # type: ignore
-        == "{(typeof foo === `Array`)}"
+        == "{((typeof foo) === (`Array`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() == float)  # type: ignore
-        == "{(typeof foo === `number`)}"
+        == "{((typeof foo) === (`number`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() == tuple)  # type: ignore
-        == "{(typeof foo === `Array`)}"
+        == "{((typeof foo) === (`Array`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() == dict)  # type: ignore
-        == "{(typeof foo === `Object`)}"
+        == "{((typeof foo) === (`Object`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() != str)  # type: ignore
-        == "{(typeof foo !== `string`)}"
+        == "{((typeof foo) !== (`string`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() != int)  # type: ignore
-        == "{(typeof foo !== `number`)}"
+        == "{((typeof foo) !== (`number`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() != list)  # type: ignore
-        == "{(typeof foo !== `Array`)}"
+        == "{((typeof foo) !== (`Array`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() != float)  # type: ignore
-        == "{(typeof foo !== `number`)}"
+        == "{((typeof foo) !== (`number`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() != tuple)  # type: ignore
-        == "{(typeof foo !== `Array`)}"
+        == "{((typeof foo) !== (`Array`))}"
     )
     assert (
         str(BaseVar(_var_name="foo", _var_type=str)._type() != dict)  # type: ignore
-        == "{(typeof foo !== `Object`)}"
+        == "{((typeof foo) !== (`Object`))}"
     )
 
 
@@ -718,7 +718,7 @@ def test_computed_var_with_annotation_error(request, fixture, full_name):
         (f"{BaseVar(_var_name='var', _var_type=str)}", "${var}"),
         (
             f"testing f-string with {BaseVar(_var_name='myvar', _var_type=int)._var_set_state('state')}",
-            'testing f-string with $<reflex.Var>{"state": "state", "imports": {"/utils/context": [{"tag": "StateContexts", "is_default": false, "alias": null, "install": true, "render": true}], "react": [{"tag": "useContext", "is_default": false, "alias": null, "install": true, "render": true}]}, "hooks": ["const state = useContext(StateContexts.state)"]}</reflex.Var>{state.myvar}',
+            'testing f-string with $<reflex.Var>{"state": "state", "interpolations": [], "imports": {"/utils/context": [{"tag": "StateContexts", "is_default": false, "alias": null, "install": true, "render": true}], "react": [{"tag": "useContext", "is_default": false, "alias": null, "install": true, "render": true}]}, "hooks": ["const state = useContext(StateContexts.state)"], "string_length": 13}</reflex.Var>{state.myvar}',
         ),
         (
             f"testing local f-string {BaseVar(_var_name='x', _var_is_local=True, _var_type=str)}",