diff --git a/reflex/.templates/jinja/web/pages/_app.js.jinja2 b/reflex/.templates/jinja/web/pages/_app.js.jinja2
index deaf1a02be..7e45601ef8 100644
--- a/reflex/.templates/jinja/web/pages/_app.js.jinja2
+++ b/reflex/.templates/jinja/web/pages/_app.js.jinja2
@@ -3,6 +3,8 @@
 {% block declaration %}
 import { EventLoopProvider, StateProvider } from "/utils/context.js";
 import { ThemeProvider } from 'next-themes'
+import '/styles/styles.css'
+
 
 {% for custom_code in custom_codes %}
 {{custom_code}}
diff --git a/reflex/app.py b/reflex/app.py
index 747919914c..c66a3dfd89 100644
--- a/reflex/app.py
+++ b/reflex/app.py
@@ -563,7 +563,6 @@ def get_frontend_packages(self, imports: Dict[str, set[ImportVar]]):
             for i, tags in imports.items()
             if i
             not in [
-                *compiler.DEFAULT_IMPORTS.keys(),
                 *constants.PackageJson.DEPENDENCIES.keys(),
                 *constants.PackageJson.DEV_DEPENDENCIES.keys(),
             ]
diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py
index 580ac5d3c8..1e5215872b 100644
--- a/reflex/compiler/compiler.py
+++ b/reflex/compiler/compiler.py
@@ -16,12 +16,7 @@
 )
 from reflex.config import get_config
 from reflex.state import State
-from reflex.utils.imports import ImportDict, ImportVar
-
-# Imports to be included in every Reflex app.
-DEFAULT_IMPORTS: ImportDict = {
-    "": [ImportVar(tag="focus-visible/dist/focus-visible", install=False)],
-}
+from reflex.utils.imports import ImportVar
 
 
 def _compile_document_root(root: Component) -> str:
@@ -103,8 +98,7 @@ def _compile_page(
     Returns:
         The compiled component.
     """
-    # Merge the default imports with the app-specific imports.
-    imports = utils.merge_imports(DEFAULT_IMPORTS, component.get_imports())
+    imports = component.get_imports()
     imports = utils.compile_imports(imports)
 
     # Compile the code to render the component.
diff --git a/reflex/components/base/app_wrap.py b/reflex/components/base/app_wrap.py
index e52831afa6..eb6d04775a 100644
--- a/reflex/components/base/app_wrap.py
+++ b/reflex/components/base/app_wrap.py
@@ -1,10 +1,10 @@
 """Top-level component that wraps the entire app."""
 from reflex.components.component import Component
+from reflex.components.layout.fragment import Fragment
+from reflex.vars import Var
 
-from .bare import Bare
 
-
-class AppWrap(Bare):
+class AppWrap(Fragment):
     """Top-level component that wraps the entire app."""
 
     @classmethod
@@ -14,4 +14,6 @@ def create(cls) -> Component:
         Returns:
             A new AppWrap component containing {children}.
         """
-        return super().create(contents="{children}")
+        return super().create(
+            Var.create("{children}", _var_is_local=False, _var_is_string=False)
+        )
diff --git a/reflex/components/base/app_wrap.pyi b/reflex/components/base/app_wrap.pyi
index cde179f96a..6bd51e5cb8 100644
--- a/reflex/components/base/app_wrap.pyi
+++ b/reflex/components/base/app_wrap.pyi
@@ -8,15 +8,15 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from reflex.components.component import Component
-from .bare import Bare
+from reflex.components.layout.fragment import Fragment
+from reflex.vars import Var
 
-class AppWrap(Bare):
+class AppWrap(Fragment):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
-        contents: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
diff --git a/reflex/components/component.py b/reflex/components/component.py
index 5e25396b9d..a1f4bc6ee5 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -591,7 +591,7 @@ def _get_style(self) -> dict:
         Returns:
             The dictionary of the component style as value and the style notation as key.
         """
-        return {"sx": self.style}
+        return {"style": self.style}
 
     def render(self) -> Dict:
         """Render the component.
diff --git a/reflex/components/el/element.py b/reflex/components/el/element.py
index 0cb46f60ed..c95965f4a2 100644
--- a/reflex/components/el/element.py
+++ b/reflex/components/el/element.py
@@ -1,39 +1,11 @@
 """Base class definition for raw HTML elements."""
 
-from typing import Dict
 
 from reflex.components.component import Component
 
 
 class Element(Component):
-    """The base class for all raw HTML elements.
-
-    The key difference between `Element` and `Component` is that elements do not
-    use Chakra's `sx` prop, instead passing styles directly to the React style
-    prop.
-    """
-
-    def render(self) -> Dict:
-        """Render the element.
-
-        Returns:
-            The code to render the element.
-        """
-        tag = self._render()
-        return dict(
-            tag.add_props(
-                **self.event_triggers,
-                key=self.key,
-                id=self.id,
-                style=self.style,
-                class_name=self.class_name,
-                **self.custom_attrs,
-            ).set(
-                contents=str(tag.contents),
-                children=[child.render() for child in self.children],
-                props=tag.format_props(),
-            )
-        )
+    """The base class for all raw HTML elements."""
 
     def __eq__(self, other):
         """Two elements are equal if they have the same tag.
diff --git a/reflex/components/el/element.pyi b/reflex/components/el/element.pyi
index 36f534edea..5b488d919b 100644
--- a/reflex/components/el/element.pyi
+++ b/reflex/components/el/element.pyi
@@ -7,11 +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 Dict
 from reflex.components.component import Component
 
 class Element(Component):
-    def render(self) -> Dict: ...
     @overload
     @classmethod
     def create(  # type: ignore
diff --git a/reflex/components/forms/debounce.py b/reflex/components/forms/debounce.py
index 1d74f5687d..076eb8510e 100644
--- a/reflex/components/forms/debounce.py
+++ b/reflex/components/forms/debounce.py
@@ -113,7 +113,9 @@ def create(cls, *children: Component, **props: Any) -> Component:
             ),
         )
 
-        return super().create(**props)
+        component = super().create(**props)
+        component._get_style = child._get_style
+        return component
 
     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/libs/chakra.py b/reflex/components/libs/chakra.py
index 34bfff1d5d..2244be898b 100644
--- a/reflex/components/libs/chakra.py
+++ b/reflex/components/libs/chakra.py
@@ -15,6 +15,7 @@ class ChakraComponent(Component):
     library = "@chakra-ui/react@2.6.1"
     lib_dependencies: List[str] = [
         "@chakra-ui/system@2.5.7",
+        "focus-visible@5.2.0",
         "framer-motion@10.16.4",
     ]
 
@@ -25,6 +26,33 @@ def _get_app_wrap_components() -> dict[tuple[int, str], Component]:
             (60, "ChakraProvider"): chakra_provider,
         }
 
+    def get_imports(self) -> imports.ImportDict:
+        """Chakra requires focus-visible and imported into each page.
+
+        This allows the GlobalStyle defined by the ChakraProvider to hide the blue border.
+
+        Returns:
+            The imports for the component.
+        """
+        return imports.merge_imports(
+            super().get_imports(),
+            {
+                "": {
+                    imports.ImportVar(
+                        tag="focus-visible/dist/focus-visible", install=False
+                    )
+                }
+            },
+        )
+
+    def _get_style(self) -> dict:
+        """Get the style for the component.
+
+        Returns:
+            The dictionary of the component style as value and the style notation as key.
+        """
+        return {"sx": self.style}
+
     @classmethod
     @lru_cache(maxsize=None)
     def _get_dependencies_imports(cls) -> imports.ImportDict:
@@ -37,6 +65,7 @@ def _get_dependencies_imports(cls) -> imports.ImportDict:
             dep: [imports.ImportVar(tag=None, render=False)]
             for dep in [
                 "@chakra-ui/system@2.5.7",
+                "focus-visible@5.2.0",
                 "framer-motion@10.16.4",
             ]
         }
@@ -89,8 +118,6 @@ def _get_imports(self) -> imports.ImportDict:
 
     def _get_custom_code(self) -> str | None:
         return """
-import '/styles/styles.css'
-
 const GlobalStyles = css`
   /* Hide the blue border around Chakra components. */
   .js-focus-visible :focus:not([data-focus-visible-added]) {
diff --git a/reflex/components/libs/chakra.pyi b/reflex/components/libs/chakra.pyi
index 0c8098611e..792d459fea 100644
--- a/reflex/components/libs/chakra.pyi
+++ b/reflex/components/libs/chakra.pyi
@@ -14,6 +14,7 @@ from reflex.utils import imports
 from reflex.vars import Var
 
 class ChakraComponent(Component):
+    def get_imports(self) -> imports.ImportDict: ...
     @overload
     @classmethod
     def create(  # type: ignore
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index c75a426a41..46ef26214b 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -72,9 +72,6 @@ def _get_app_wrap_components() -> dict[tuple[int, str], Component]:
             (45, "RadixThemesColorModeProvider"): RadixThemesColorModeProvider.create(),
         }
 
-    def _get_style(self) -> dict:
-        return {"style": self.style}
-
 
 LiteralAccentColor = Literal[
     "tomato",
diff --git a/reflex/constants/installer.py b/reflex/constants/installer.py
index 948448b6be..3266b598df 100644
--- a/reflex/constants/installer.py
+++ b/reflex/constants/installer.py
@@ -103,8 +103,6 @@ class Commands(SimpleNamespace):
 
     DEPENDENCIES = {
         "axios": "1.4.0",
-        "focus-visible": "5.2.0",
-        "framer-motion": "10.16.4",
         "json5": "2.2.3",
         "next": "14.0.1",
         "next-sitemap": "4.1.8",
diff --git a/tests/test_app.py b/tests/test_app.py
index b1baa8d2ff..d0f53bec7f 100644
--- a/tests/test_app.py
+++ b/tests/test_app.py
@@ -1210,7 +1210,9 @@ def test_app_wrap_compile_theme(compilable_app):
         "function AppWrap({children}) {"
         "return ("
         "<RadixThemesTheme accentColor={`plum`}>"
+        "<Fragment>"
         "{children}"
+        "</Fragment>"
         "</RadixThemesTheme>"
         ")"
         "}"
@@ -1261,7 +1263,9 @@ def page():
         "<ChakraColorModeProvider>"
         "<Text>"
         "<Fragment2>"
+        "<Fragment>"
         "{children}"
+        "</Fragment>"
         "</Fragment2>"
         "</Text>"
         "</ChakraColorModeProvider>"