diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
index c59256b07..e6daf45f6 100644
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@@ -493,7 +493,7 @@ class CodeBlock(Component):
         else:
             return code_block
 
-    def add_style(self) -> Style | None:
+    def add_style(self):
         """Add style to the component."""
         self.custom_style.update(self.style)
 
diff --git a/reflex/components/datadisplay/code.pyi b/reflex/components/datadisplay/code.pyi
index f3aeb8e18..901bf38e3 100644
--- a/reflex/components/datadisplay/code.pyi
+++ b/reflex/components/datadisplay/code.pyi
@@ -1111,6 +1111,6 @@ class CodeBlock(Component):
             The text component.
         """
         ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self): ...
     @staticmethod
     def convert_theme_name(theme) -> str: ...
diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
index 9cadfb35d..12eb8de39 100644
--- a/reflex/components/radix/primitives/accordion.py
+++ b/reflex/components/radix/primitives/accordion.py
@@ -59,7 +59,7 @@ class AccordionComponent(RadixPrimitiveComponent):
     # The variant of the component.
     variant: Var[LiteralAccordionVariant]
 
-    def add_style(self) -> Style | None:
+    def add_style(self):
         """Add style to the component."""
         if self.color_scheme is not None:
             self.custom_attrs["data-accent-color"] = self.color_scheme
@@ -250,43 +250,41 @@ class AccordionItem(AccordionComponent):
 
         return super().create(*children, value=value, **props, class_name=cls_name)
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
         divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}"
-        return Style(
-            {
-                "overflow": "hidden",
-                "width": "100%",
-                "margin_top": "1px",
+        return {
+            "overflow": "hidden",
+            "width": "100%",
+            "margin_top": "1px",
+            "border_top": divider_style,
+            "&:first-child": {
+                "margin_top": 0,
+                "border_top": 0,
+                "border_top_left_radius": "var(--radius-4)",
+                "border_top_right_radius": "var(--radius-4)",
+            },
+            "&:last-child": {
+                "border_bottom_left_radius": "var(--radius-4)",
+                "border_bottom_right_radius": "var(--radius-4)",
+            },
+            "&:focus-within": {
+                "position": "relative",
+                "z_index": 1,
+            },
+            _inherited_variant_selector("ghost", "&:first-child"): {
+                "border_radius": 0,
                 "border_top": divider_style,
-                "&:first-child": {
-                    "margin_top": 0,
-                    "border_top": 0,
-                    "border_top_left_radius": "var(--radius-4)",
-                    "border_top_right_radius": "var(--radius-4)",
-                },
-                "&:last-child": {
-                    "border_bottom_left_radius": "var(--radius-4)",
-                    "border_bottom_right_radius": "var(--radius-4)",
-                },
-                "&:focus-within": {
-                    "position": "relative",
-                    "z_index": 1,
-                },
-                _inherited_variant_selector("ghost", "&:first-child"): {
-                    "border_radius": 0,
-                    "border_top": divider_style,
-                },
-                _inherited_variant_selector("ghost", "&:last-child"): {
-                    "border_radius": 0,
-                    "border_bottom": divider_style,
-                },
-            }
-        )
+            },
+            _inherited_variant_selector("ghost", "&:last-child"): {
+                "border_radius": 0,
+                "border_bottom": divider_style,
+            },
+        }
 
 
 class AccordionHeader(AccordionComponent):
@@ -314,13 +312,13 @@ class AccordionHeader(AccordionComponent):
 
         return super().create(*children, class_name=cls_name, **props)
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"display": "flex"})
+        return {"display": "flex"}
 
 
 class AccordionTrigger(AccordionComponent):
@@ -348,44 +346,42 @@ class AccordionTrigger(AccordionComponent):
 
         return super().create(*children, class_name=cls_name, **props)
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style(
-            {
-                "color": color("accent", 11),
-                "font_size": "1.1em",
-                "line_height": 1,
-                "justify_content": "space-between",
-                "align_items": "center",
-                "flex": 1,
-                "display": "flex",
-                "padding": "var(--space-3) var(--space-4)",
-                "width": "100%",
-                "box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
-                "&[data-state='open'] > .AccordionChevron": {
-                    "transform": "rotate(180deg)",
-                },
+        return {
+            "color": color("accent", 11),
+            "font_size": "1.1em",
+            "line_height": 1,
+            "justify_content": "space-between",
+            "align_items": "center",
+            "flex": 1,
+            "display": "flex",
+            "padding": "var(--space-3) var(--space-4)",
+            "width": "100%",
+            "box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
+            "&[data-state='open'] > .AccordionChevron": {
+                "transform": "rotate(180deg)",
+            },
+            "&:hover": {
+                "background_color": color("accent", 4),
+            },
+            "& > .AccordionChevron": {
+                "transition": f"transform var(--animation-duration) var(--animation-easing)",
+            },
+            _inherited_variant_selector("classic"): {
+                "color": "var(--accent-contrast)",
                 "&:hover": {
-                    "background_color": color("accent", 4),
+                    "background_color": color("accent", 10),
                 },
                 "& > .AccordionChevron": {
-                    "transition": f"transform var(--animation-duration) var(--animation-easing)",
-                },
-                _inherited_variant_selector("classic"): {
                     "color": "var(--accent-contrast)",
-                    "&:hover": {
-                        "background_color": color("accent", 10),
-                    },
-                    "& > .AccordionChevron": {
-                        "color": "var(--accent-contrast)",
-                    },
                 },
-            }
-        )
+            },
+        }
 
 
 class AccordionIcon(Icon):
@@ -470,7 +466,7 @@ to {
 """
         ]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
@@ -486,24 +482,22 @@ to {
             _var_is_string=True,
         )
 
-        return Style(
-            {
-                "overflow": "hidden",
-                "color": color("accent", 11),
-                "padding_x": "var(--space-4)",
-                # Apply before and after content to avoid height animation jank.
-                "&:before, &:after": {
-                    "content": "' '",
-                    "display": "block",
-                    "height": "var(--space-3)",
-                },
-                "&[data-state='open']": {"animation": slideDown},
-                "&[data-state='closed']": {"animation": slideUp},
-                _inherited_variant_selector("classic"): {
-                    "color": "var(--accent-contrast)",
-                },
-            }
-        )
+        return {
+            "overflow": "hidden",
+            "color": color("accent", 11),
+            "padding_x": "var(--space-4)",
+            # Apply before and after content to avoid height animation jank.
+            "&:before, &:after": {
+                "content": "' '",
+                "display": "block",
+                "height": "var(--space-3)",
+            },
+            "&[data-state='open']": {"animation": slideDown},
+            "&[data-state='closed']": {"animation": slideUp},
+            _inherited_variant_selector("classic"): {
+                "color": "var(--accent-contrast)",
+            },
+        }
 
 
 class Accordion(ComponentNamespace):
diff --git a/reflex/components/radix/primitives/accordion.pyi b/reflex/components/radix/primitives/accordion.pyi
index e7ae3ff19..a04073d2d 100644
--- a/reflex/components/radix/primitives/accordion.pyi
+++ b/reflex/components/radix/primitives/accordion.pyi
@@ -26,7 +26,7 @@ DEFAULT_ANIMATION_DURATION = 250
 DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"
 
 class AccordionComponent(RadixPrimitiveComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self): ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -520,7 +520,7 @@ class AccordionItem(AccordionComponent):
             The accordion item.
         """
         ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
 
 class AccordionHeader(AccordionComponent):
     @overload
@@ -669,7 +669,7 @@ class AccordionHeader(AccordionComponent):
             The Accordion header Component.
         """
         ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
 
 class AccordionTrigger(AccordionComponent):
     @overload
@@ -818,7 +818,7 @@ class AccordionTrigger(AccordionComponent):
             The Accordion trigger Component.
         """
         ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
 
 class AccordionIcon(Icon):
     @overload
@@ -1047,7 +1047,7 @@ class AccordionContent(AccordionComponent):
         """
         ...
     def add_custom_code(self) -> list[str]: ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
 
 class Accordion(ComponentNamespace):
     content = staticmethod(AccordionContent.create)
diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py
index 3369673da..1b37bd5f7 100644
--- a/reflex/components/radix/primitives/form.py
+++ b/reflex/components/radix/primitives/form.py
@@ -8,7 +8,6 @@ from reflex.components.component import ComponentNamespace
 from reflex.components.el.elements.forms import Form as HTMLForm
 from reflex.components.radix.themes.components.text_field import TextFieldRoot
 from reflex.constants.event import EventTriggers
-from reflex.style import Style
 from reflex.vars import Var
 
 from .base import RadixPrimitiveComponentWithClassName
@@ -38,13 +37,13 @@ class FormRoot(FormComponent, HTMLForm):
             EventTriggers.ON_CLEAR_SERVER_ERRORS: lambda: [],
         }
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"width": "100%"})
+        return {"width": "100%"}
 
 
 class FormField(FormComponent):
@@ -60,13 +59,13 @@ class FormField(FormComponent):
     # Flag to mark the form field as invalid, for server side validation.
     server_invalid: Var[bool]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"display": "grid", "margin_bottom": "10px"})
+        return {"display": "grid", "margin_bottom": "10px"}
 
 
 class FormLabel(FormComponent):
@@ -76,13 +75,13 @@ class FormLabel(FormComponent):
 
     alias = "RadixFormLabel"
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"font_size": "15px", "font_weight": "500", "line_height": "35px"})
+        return {"font_size": "15px", "font_weight": "500", "line_height": "35px"}
 
 
 class FormControl(FormComponent):
@@ -149,13 +148,13 @@ class FormMessage(FormComponent):
     # Forces the message to be shown. This is useful when using server-side validation.
     force_match: Var[bool]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"font_size": "13px", "opacity": "0.8", "color": "white"})
+        return {"font_size": "13px", "opacity": "0.8", "color": "white"}
 
 
 class FormValidityState(FormComponent):
diff --git a/reflex/components/radix/primitives/form.pyi b/reflex/components/radix/primitives/form.pyi
index 8e1631825..182aaec36 100644
--- a/reflex/components/radix/primitives/form.pyi
+++ b/reflex/components/radix/primitives/form.pyi
@@ -12,7 +12,6 @@ from reflex.components.component import ComponentNamespace
 from reflex.components.el.elements.forms import Form as HTMLForm
 from reflex.components.radix.themes.components.text_field import TextFieldRoot
 from reflex.constants.event import EventTriggers
-from reflex.style import Style
 from reflex.vars import Var
 from .base import RadixPrimitiveComponentWithClassName
 
@@ -96,7 +95,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
 
 class FormRoot(FormComponent, HTMLForm):
     def get_event_triggers(self) -> Dict[str, Any]: ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -275,7 +274,7 @@ class FormRoot(FormComponent, HTMLForm):
         ...
 
 class FormField(FormComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -358,7 +357,7 @@ class FormField(FormComponent):
         ...
 
 class FormLabel(FormComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -532,7 +531,7 @@ LiteralMatcher = Literal[
 ]
 
 class FormMessage(FormComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py
index 313d6aeb6..976daf505 100644
--- a/reflex/components/radix/primitives/progress.py
+++ b/reflex/components/radix/primitives/progress.py
@@ -2,14 +2,13 @@
 
 from __future__ import annotations
 
-from typing import Optional
+from typing import Any, Optional
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
 from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
 from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
-from reflex.style import Style
 from reflex.vars import Var
 
 
@@ -28,7 +27,7 @@ class ProgressRoot(ProgressComponent):
     # Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
     radius: Var[LiteralRadius]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
@@ -37,17 +36,15 @@ class ProgressRoot(ProgressComponent):
         if self.radius is not None:
             self.custom_attrs["data-radius"] = self.radius
 
-        return Style(
-            {
-                "position": "relative",
-                "overflow": "hidden",
-                "background": color("gray", 3, alpha=True),
-                "border_radius": "max(var(--radius-2), var(--radius-full))",
-                "width": "100%",
-                "height": "20px",
-                "boxShadow": f"inset 0 0 0 1px {color('gray', 5, alpha=True)}",
-            }
-        )
+        return {
+            "position": "relative",
+            "overflow": "hidden",
+            "background": color("gray", 3, alpha=True),
+            "border_radius": "max(var(--radius-2), var(--radius-full))",
+            "width": "100%",
+            "height": "20px",
+            "boxShadow": f"inset 0 0 0 1px {color('gray', 5, alpha=True)}",
+        }
 
     def _exclude_props(self) -> list[str]:
         return ["radius"]
@@ -69,7 +66,7 @@ class ProgressIndicator(ProgressComponent):
     # The color scheme of the progress indicator.
     color_scheme: Var[LiteralAccentColor]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
@@ -78,19 +75,17 @@ class ProgressIndicator(ProgressComponent):
         if self.color_scheme is not None:
             self.custom_attrs["data-accent-color"] = self.color_scheme
 
-        return Style(
-            {
-                "background_color": color("accent", 9),
-                "width": "100%",
-                "height": "100%",
+        return {
+            "background_color": color("accent", 9),
+            "width": "100%",
+            "height": "100%",
+            "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
+            "&[data_state='loading']": {
                 "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
-                "&[data_state='loading']": {
-                    "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
-                },
-                "transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))",  # type: ignore
-                "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
-            }
-        )
+            },
+            "transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))",  # type: ignore
+            "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
+        }
 
     def _exclude_props(self) -> list[str]:
         return ["color_scheme"]
diff --git a/reflex/components/radix/primitives/progress.pyi b/reflex/components/radix/primitives/progress.pyi
index eb0149496..f6022652e 100644
--- a/reflex/components/radix/primitives/progress.pyi
+++ b/reflex/components/radix/primitives/progress.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 Optional
+from typing import Any, Optional
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
 from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
 from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
-from reflex.style import Style
 from reflex.vars import Var
 
 class ProgressComponent(RadixPrimitiveComponentWithClassName):
@@ -95,7 +94,7 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
         ...
 
 class ProgressRoot(ProgressComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -181,7 +180,7 @@ class ProgressRoot(ProgressComponent):
         ...
 
 class ProgressIndicator(ProgressComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
diff --git a/reflex/components/radix/primitives/slider.py b/reflex/components/radix/primitives/slider.py
index 2e0b1ef49..8368c7ed1 100644
--- a/reflex/components/radix/primitives/slider.py
+++ b/reflex/components/radix/primitives/slider.py
@@ -6,7 +6,6 @@ from typing import Any, Dict, List, Literal
 
 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
 
 LiteralSliderOrientation = Literal["horizontal", "vertical"]
@@ -59,28 +58,26 @@ class SliderRoot(SliderComponent):
             "on_value_commit": lambda e0: [e0],  # trigger when thumb is released
         }
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style(
-            {
-                "position": "relative",
-                "display": "flex",
-                "align_items": "center",
-                "user_select": "none",
-                "touch_action": "none",
-                "width": "200px",
-                "height": "20px",
-                "&[data-orientation='vertical']": {
-                    "flex_direction": "column",
-                    "width": "20px",
-                    "height": "100px",
-                },
-            }
-        )
+        return {
+            "position": "relative",
+            "display": "flex",
+            "align_items": "center",
+            "user_select": "none",
+            "touch_action": "none",
+            "width": "200px",
+            "height": "20px",
+            "&[data-orientation='vertical']": {
+                "flex_direction": "column",
+                "width": "20px",
+                "height": "100px",
+            },
+        }
 
 
 class SliderTrack(SliderComponent):
@@ -89,22 +86,20 @@ class SliderTrack(SliderComponent):
     tag = "Track"
     alias = "RadixSliderTrack"
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style(
-            {
-                "position": "relative",
-                "flex_grow": "1",
-                "background_color": "black",
-                "border_radius": "9999px",
-                "height": "3px",
-                "&[data-orientation='vertical']": {"width": "3px"},
-            }
-        )
+        return {
+            "position": "relative",
+            "flex_grow": "1",
+            "background_color": "black",
+            "border_radius": "9999px",
+            "height": "3px",
+            "&[data-orientation='vertical']": {"width": "3px"},
+        }
 
 
 class SliderRange(SliderComponent):
@@ -113,20 +108,18 @@ class SliderRange(SliderComponent):
     tag = "Range"
     alias = "RadixSliderRange"
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style(
-            {
-                "position": "absolute",
-                "background_color": "white",
-                "height": "100%",
-                "&[data-orientation='vertical']": {"width": "100%"},
-            }
-        )
+        return {
+            "position": "absolute",
+            "background_color": "white",
+            "height": "100%",
+            "&[data-orientation='vertical']": {"width": "100%"},
+        }
 
 
 class SliderThumb(SliderComponent):
@@ -135,29 +128,27 @@ class SliderThumb(SliderComponent):
     tag = "Thumb"
     alias = "RadixSliderThumb"
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style(
-            {
-                "display": "block",
-                "width": "20px",
-                "height": "20px",
-                "background_color": "black",
-                "box_shadow": "0 2px 10px black",
-                "border_radius": "10px",
-                "&:hover": {
-                    "background_color": "gray",
-                },
-                "&:focus": {
-                    "outline": "none",
-                    "box_shadow": "0 0 0 4px gray",
-                },
-            }
-        )
+        return {
+            "display": "block",
+            "width": "20px",
+            "height": "20px",
+            "background_color": "black",
+            "box_shadow": "0 2px 10px black",
+            "border_radius": "10px",
+            "&:hover": {
+                "background_color": "gray",
+            },
+            "&:focus": {
+                "outline": "none",
+                "box_shadow": "0 0 0 4px gray",
+            },
+        }
 
 
 class Slider(ComponentNamespace):
diff --git a/reflex/components/radix/primitives/slider.pyi b/reflex/components/radix/primitives/slider.pyi
index 1f837d732..4ec99f73f 100644
--- a/reflex/components/radix/primitives/slider.pyi
+++ b/reflex/components/radix/primitives/slider.pyi
@@ -10,7 +10,6 @@ from reflex.style import Style
 from typing import Any, Dict, List, Literal
 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
 
 LiteralSliderOrientation = Literal["horizontal", "vertical"]
@@ -96,7 +95,7 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
 
 class SliderRoot(SliderComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -197,7 +196,7 @@ class SliderRoot(SliderComponent):
         ...
 
 class SliderTrack(SliderComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -276,7 +275,7 @@ class SliderTrack(SliderComponent):
         ...
 
 class SliderRange(SliderComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -355,7 +354,7 @@ class SliderRange(SliderComponent):
         ...
 
 class SliderThumb(SliderComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
diff --git a/reflex/components/radix/themes/components/tabs.py b/reflex/components/radix/themes/components/tabs.py
index 130cfd166..fb5bf936d 100644
--- a/reflex/components/radix/themes/components/tabs.py
+++ b/reflex/components/radix/themes/components/tabs.py
@@ -4,6 +4,7 @@ from __future__ import annotations
 from typing import Any, Dict, List, Literal
 
 from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.colors import color
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -12,6 +13,8 @@ from ..base import (
     RadixThemesComponent,
 )
 
+vertical_orientation_css = "&[data-orientation='vertical']"
+
 
 class TabsRoot(RadixThemesComponent):
     """Set of content sections to be displayed one at a time."""
@@ -41,6 +44,18 @@ class TabsRoot(RadixThemesComponent):
             EventTriggers.ON_CHANGE: lambda e0: [e0],
         }
 
+    def add_style(self) -> Dict[str, Any] | None:
+        """Add style for the component.
+
+        Returns:
+            The style to add.
+        """
+        return {
+            vertical_orientation_css: {
+                "display": "flex",
+            }
+        }
+
 
 class TabsList(RadixThemesComponent):
     """Contains the triggers that sit alongside the active content."""
@@ -50,6 +65,19 @@ class TabsList(RadixThemesComponent):
     # Tabs size "1" - "2"
     size: Var[Literal["1", "2"]]
 
+    def add_style(self):
+        """Add style for the component.
+
+        Returns:
+            The style to add.
+        """
+        return {
+            vertical_orientation_css: {
+                "display": "block",
+                "box_shadow": f"inset -1px 0 0 0 {color('gray', 5, alpha=True)}",
+            },
+        }
+
 
 class TabsTrigger(RadixThemesComponent):
     """The button that activates its associated content."""
@@ -86,6 +114,14 @@ class TabsTrigger(RadixThemesComponent):
     def _exclude_props(self) -> list[str]:
         return ["color_scheme"]
 
+    def add_style(self) -> Dict[str, Any] | None:
+        """Add style for the component.
+
+        Returns:
+            The style to add.
+        """
+        return {vertical_orientation_css: {"width": "100%"}}
+
 
 class TabsContent(RadixThemesComponent):
     """Contains the content associated with each trigger."""
@@ -95,6 +131,16 @@ class TabsContent(RadixThemesComponent):
     # The value of the tab. Must be unique for each tab.
     value: Var[str]
 
+    def add_style(self) -> dict[str, Any] | None:
+        """Add style for the component.
+
+        Returns:
+            The style to add.
+        """
+        return {
+            vertical_orientation_css: {"width": "100%", "margin": None},
+        }
+
 
 class Tabs(ComponentNamespace):
     """Set of content sections to be displayed one at a time."""
diff --git a/reflex/components/radix/themes/components/tabs.pyi b/reflex/components/radix/themes/components/tabs.pyi
index a8243554f..02d3bbc93 100644
--- a/reflex/components/radix/themes/components/tabs.pyi
+++ b/reflex/components/radix/themes/components/tabs.pyi
@@ -9,12 +9,16 @@ 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, ComponentNamespace
+from reflex.components.core.colors import color
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import LiteralAccentColor, RadixThemesComponent
 
+vertical_orientation_css = "&[data-orientation='vertical']"
+
 class TabsRoot(RadixThemesComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
+    def add_style(self) -> Dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -108,6 +112,7 @@ class TabsRoot(RadixThemesComponent):
         ...
 
 class TabsList(RadixThemesComponent):
+    def add_style(self): ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -330,8 +335,10 @@ class TabsTrigger(RadixThemesComponent):
             The TabsTrigger Component.
         """
         ...
+    def add_style(self) -> Dict[str, Any] | None: ...
 
 class TabsContent(RadixThemesComponent):
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
diff --git a/reflex/components/radix/themes/layout/center.py b/reflex/components/radix/themes/layout/center.py
index 16441876a..6799f94e9 100644
--- a/reflex/components/radix/themes/layout/center.py
+++ b/reflex/components/radix/themes/layout/center.py
@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from reflex.style import Style
+from typing import Any
 
 from .flex import Flex
 
@@ -10,16 +10,14 @@ from .flex import Flex
 class Center(Flex):
     """A center component."""
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style that center the content.
 
         Returns:
             The style of the component.
         """
-        return Style(
-            {
-                "display": "flex",
-                "align_items": "center",
-                "justify_content": "center",
-            }
-        )
+        return {
+            "display": "flex",
+            "align_items": "center",
+            "justify_content": "center",
+        }
diff --git a/reflex/components/radix/themes/layout/center.pyi b/reflex/components/radix/themes/layout/center.pyi
index 0fd45f940..9a05e6f99 100644
--- a/reflex/components/radix/themes/layout/center.pyi
+++ b/reflex/components/radix/themes/layout/center.pyi
@@ -7,11 +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 reflex.style import Style
+from typing import Any
 from .flex import Flex
 
 class Center(Flex):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
diff --git a/reflex/components/radix/themes/layout/list.py b/reflex/components/radix/themes/layout/list.py
index 87b9cf012..e2e0c15f8 100644
--- a/reflex/components/radix/themes/layout/list.py
+++ b/reflex/components/radix/themes/layout/list.py
@@ -1,14 +1,13 @@
 """List components."""
 from __future__ import annotations
 
-from typing import Iterable, Literal, Optional, Union
+from typing import Any, 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, Ol, Ul
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.typography.text import Text
-from reflex.style import Style
 from reflex.vars import Var
 
 LiteralListStyleTypeUnordered = Literal[
@@ -78,18 +77,16 @@ class BaseList(Component):
             style["gap"] = props["gap"]
         return super().create(*children, **props)
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style(
-            {
-                "direction": "column",
-                "list_style_position": "inside",
-            }
-        )
+        return {
+            "direction": "column",
+            "list_style_position": "inside",
+        }
 
 
 class UnorderedList(BaseList, Ul):
diff --git a/reflex/components/radix/themes/layout/list.pyi b/reflex/components/radix/themes/layout/list.pyi
index a736f106c..6ff3a0a0f 100644
--- a/reflex/components/radix/themes/layout/list.pyi
+++ b/reflex/components/radix/themes/layout/list.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 Iterable, Literal, Optional, Union
+from typing import Any, 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, Ol, Ul
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.typography.text import Text
-from reflex.style import Style
 from reflex.vars import Var
 
 LiteralListStyleTypeUnordered = Literal["none", "disc", "circle", "square"]
@@ -157,7 +156,7 @@ class BaseList(Component):
 
         """
         ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
 
 class UnorderedList(BaseList, Ul):
     @overload
diff --git a/reflex/components/radix/themes/layout/spacer.py b/reflex/components/radix/themes/layout/spacer.py
index 6d7ab9aaf..3186552b1 100644
--- a/reflex/components/radix/themes/layout/spacer.py
+++ b/reflex/components/radix/themes/layout/spacer.py
@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from reflex.style import Style
+from typing import Any
 
 from .flex import Flex
 
@@ -10,16 +10,14 @@ from .flex import Flex
 class Spacer(Flex):
     """A spacer component."""
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style(
-            {
-                "flex": 1,
-                "justify_self": "stretch",
-                "align_self": "stretch",
-            }
-        )
+        return {
+            "flex": 1,
+            "justify_self": "stretch",
+            "align_self": "stretch",
+        }
diff --git a/reflex/components/radix/themes/layout/spacer.pyi b/reflex/components/radix/themes/layout/spacer.pyi
index 733501489..b991e9381 100644
--- a/reflex/components/radix/themes/layout/spacer.pyi
+++ b/reflex/components/radix/themes/layout/spacer.pyi
@@ -7,11 +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 reflex.style import Style
+from typing import Any
 from .flex import Flex
 
 class Spacer(Flex):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
diff --git a/reflex/experimental/layout.py b/reflex/experimental/layout.py
index 5041b9356..033379158 100644
--- a/reflex/experimental/layout.py
+++ b/reflex/experimental/layout.py
@@ -2,6 +2,8 @@
 
 from __future__ import annotations
 
+from typing import Any
+
 from reflex import color, cond
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
@@ -40,7 +42,7 @@ class Sidebar(Box, MemoizationLeaf):
             Box.create(width=props.get("width")),  # spacer for layout
         )
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns: