Convert templates to use `rx.chakra` where needed (#2555)

* Convert templates to use `rx.chakra` where needed

* reflex_init_in_docker_test: run test on PR into reflex-0.4.0

This is why we didn't catch the template issues earlier

.github/workflows/reflex_init_in_docker_test.yml

@@ -6,8 +6,7 @@ on:
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches:
-      - main
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 

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",

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(),

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,21 +292,21 @@ 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.code_block(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             code_show,
                             language="python",
                             show_line_numbers=True,
@@ -315,8 +315,8 @@ def datatable_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
-                        rx.code_block(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             data_show,
                             language="python",
                             show_line_numbers=True,
@@ -325,8 +325,8 @@ def datatable_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
-                        rx.code_block(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             state_show,
                             language="python",
                             show_line_numbers=True,
@@ -335,8 +335,8 @@ def datatable_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
-                        rx.code_block(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             darkTheme_show,
                             language="python",
                             show_line_numbers=True,

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,20 +137,20 @@ 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.code_block(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             forms_1_code,
                             language="python",
                             show_line_numbers=True,
@@ -159,8 +159,8 @@ def forms_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
-                        rx.code_block(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             forms_1_state,
                             language="python",
                             show_line_numbers=True,
@@ -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,15 +215,15 @@ 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.code_block(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             forms_2_code,
                             language="python",
                             show_line_numbers=True,
@@ -230,8 +232,8 @@ def forms_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
-                        rx.code_block(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             forms_2_state,
                             language="python",
                             show_line_numbers=True,

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,15 +136,15 @@ 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.code_block(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             graph_1_code,
                             language="python",
                             show_line_numbers=True,
@@ -153,8 +153,8 @@ def graphing_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
-                        rx.code_block(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             data_1_show,
                             language="python",
                             show_line_numbers=True,
@@ -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,15 +209,15 @@ 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.code_block(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             graph_2_code,
                             language="python",
                             show_line_numbers=True,
@@ -226,8 +226,8 @@ def graphing_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
-                        rx.code_block(
+                    rx.chakra.tab_panel(
+                        rx.chakra.code_block(
                             graph_2_state,
                             language="python",
                             show_line_numbers=True,

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)",

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",
         ),

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 = {

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",

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",

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",

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",
                     )

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",
     },

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",
         ),

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"),
         ),
     )

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"),
         ),
     )

reflex/.templates/apps/sidebar/code/styles.py

@@ -45,8 +45,8 @@ base_style = {
 }
 
 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",

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,
                     ),