add style for orientation=vertical in tabs (#3332)

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)
 

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: ...

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

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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: