diff --git a/reflex/components/core/__init__.py b/reflex/components/core/__init__.py
index 17aecc228..4df12bef4 100644
--- a/reflex/components/core/__init__.py
+++ b/reflex/components/core/__init__.py
@@ -1,5 +1,6 @@
"""Core Reflex components."""
+from . import layout as layout
from .banner import ConnectionBanner, ConnectionModal
from .cond import Cond, cond
from .debounce import DebounceInput
diff --git a/reflex/components/core/layout/__init__.py b/reflex/components/core/layout/__init__.py
new file mode 100644
index 000000000..61f49a885
--- /dev/null
+++ b/reflex/components/core/layout/__init__.py
@@ -0,0 +1 @@
+"""Core layout components."""
diff --git a/reflex/components/lucide/icon.py b/reflex/components/lucide/icon.py
index 25a1b8109..6be61a61a 100644
--- a/reflex/components/lucide/icon.py
+++ b/reflex/components/lucide/icon.py
@@ -60,7 +60,7 @@ class Icon(LucideIconComponent):
props["alias"] = f"Lucide{props['tag']}"
return super().create(*children, **props)
- def _apply_theme(self, theme: Component | None):
+ def _apply_theme(self, theme: Component):
self.style = Style(
{
"color": f"var(--current-color)",
diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
index cdb019807..0fc980c1a 100644
--- a/reflex/components/radix/primitives/accordion.py
+++ b/reflex/components/radix/primitives/accordion.py
@@ -6,8 +6,8 @@ from typing import Any, Dict, Literal
from reflex.components.component import Component
from reflex.components.core import cond, match
+from reflex.components.lucide.icon import Icon
from reflex.components.radix.primitives.base import RadixPrimitiveComponent
-from reflex.components.radix.themes.components.icons import Icon
from reflex.style import (
Style,
convert_dict_to_style_and_format_emotion,
diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py
index 97c9ebf53..31939fa06 100644
--- a/reflex/components/radix/primitives/form.py
+++ b/reflex/components/radix/primitives/form.py
@@ -154,7 +154,7 @@ class FormRoot(FormComponent):
)._replace(merge_var_data=ref_var._var_data)
return form_refs
- def _apply_theme(self, theme: Component | None):
+ def _apply_theme(self, theme: Component):
return {
"width": "260px",
**self.style,
@@ -178,7 +178,7 @@ class FormField(FormComponent):
# Flag to mark the form field as invalid, for server side validation.
server_invalid: Var[bool]
- def _apply_theme(self, theme: Component | None):
+ def _apply_theme(self, theme: Component):
return {
"display": "grid",
"margin_bottom": "10px",
@@ -193,7 +193,7 @@ class FormLabel(FormComponent):
alias = "RadixFormLabel"
- def _apply_theme(self, theme: Component | None):
+ def _apply_theme(self, theme: Component):
return {
"font_size": "15px",
"font_weight": "500",
@@ -266,7 +266,7 @@ class FormMessage(FormComponent):
# Forces the message to be shown. This is useful when using server-side validation.
force_match: Var[bool]
- def _apply_theme(self, theme: Component | None):
+ def _apply_theme(self, theme: Component):
return {
"font_size": "13px",
"opacity": "0.8",
diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py
index a4c0fa738..d130883b2 100644
--- a/reflex/components/radix/primitives/progress.py
+++ b/reflex/components/radix/primitives/progress.py
@@ -28,7 +28,7 @@ class ProgressRoot(ProgressComponent):
# The maximum progress value.
max: Var[int]
- def _apply_theme(self, theme: Component | None):
+ def _apply_theme(self, theme: Component):
self.style = Style(
{
"position": "relative",
@@ -52,7 +52,7 @@ class ProgressIndicator(ProgressComponent):
# The current progress value.
value: Var[Optional[int]]
- def _apply_theme(self, theme: Component | None):
+ def _apply_theme(self, theme: Component):
self.style = Style(
{
"background-color": "white",
diff --git a/reflex/components/radix/themes/layout/__init__.py b/reflex/components/radix/themes/layout/__init__.py
index ac1f43feb..78e7a828f 100644
--- a/reflex/components/radix/themes/layout/__init__.py
+++ b/reflex/components/radix/themes/layout/__init__.py
@@ -1,13 +1,20 @@
"""Layout components."""
from .box import Box
+from .center import Center
from .container import Container
from .flex import Flex
from .grid import Grid
from .section import Section
+from .spacer import Spacer
+from .stack import HStack, VStack
box = Box.create
+center = Center.create
container = Container.create
flex = Flex.create
grid = Grid.create
section = Section.create
+spacer = Spacer.create
+hstack = HStack.create
+vstack = VStack.create
diff --git a/reflex/components/radix/themes/layout/center.py b/reflex/components/radix/themes/layout/center.py
new file mode 100644
index 000000000..1d3502980
--- /dev/null
+++ b/reflex/components/radix/themes/layout/center.py
@@ -0,0 +1,19 @@
+"""A center component."""
+from __future__ import annotations
+
+from reflex.components.component import Component
+
+from .flex import Flex
+
+
+class Center(Flex):
+ """A center component."""
+
+ def _apply_theme(self, theme: Component):
+ self.style.update(
+ {
+ "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
new file mode 100644
index 000000000..0d88ef6ec
--- /dev/null
+++ b/reflex/components/radix/themes/layout/center.pyi
@@ -0,0 +1,361 @@
+"""Stub file for reflex/components/radix/themes/layout/center.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from reflex.components.component import Component
+from .flex import Flex
+
+class Center(Flex):
+ @overload
+ @classmethod
+ def create( # type: ignore
+ cls,
+ *children,
+ color: Optional[Union[Var[str], str]] = None,
+ color_scheme: Optional[
+ Union[
+ Var[
+ Literal[
+ "tomato",
+ "red",
+ "ruby",
+ "crimson",
+ "pink",
+ "plum",
+ "purple",
+ "violet",
+ "iris",
+ "indigo",
+ "blue",
+ "cyan",
+ "teal",
+ "jade",
+ "green",
+ "grass",
+ "brown",
+ "orange",
+ "sky",
+ "mint",
+ "lime",
+ "yellow",
+ "amber",
+ "gold",
+ "bronze",
+ "gray",
+ ]
+ ],
+ Literal[
+ "tomato",
+ "red",
+ "ruby",
+ "crimson",
+ "pink",
+ "plum",
+ "purple",
+ "violet",
+ "iris",
+ "indigo",
+ "blue",
+ "cyan",
+ "teal",
+ "jade",
+ "green",
+ "grass",
+ "brown",
+ "orange",
+ "sky",
+ "mint",
+ "lime",
+ "yellow",
+ "amber",
+ "gold",
+ "bronze",
+ "gray",
+ ],
+ ]
+ ] = None,
+ as_child: Optional[Union[Var[bool], bool]] = None,
+ display: Optional[
+ Union[
+ Var[Literal["none", "inline-flex", "flex"]],
+ Literal["none", "inline-flex", "flex"],
+ ]
+ ] = None,
+ direction: Optional[
+ Union[
+ Var[Literal["row", "column", "row-reverse", "column-reverse"]],
+ Literal["row", "column", "row-reverse", "column-reverse"],
+ ]
+ ] = None,
+ align: Optional[
+ Union[
+ Var[Literal["start", "center", "end", "baseline", "stretch"]],
+ Literal["start", "center", "end", "baseline", "stretch"],
+ ]
+ ] = None,
+ justify: Optional[
+ Union[
+ Var[Literal["start", "center", "end", "between"]],
+ Literal["start", "center", "end", "between"],
+ ]
+ ] = None,
+ wrap: Optional[
+ Union[
+ Var[Literal["nowrap", "wrap", "wrap-reverse"]],
+ Literal["nowrap", "wrap", "wrap-reverse"],
+ ]
+ ] = None,
+ gap: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ access_key: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ auto_capitalize: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ content_editable: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ context_menu: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+ draggable: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ enter_key_hint: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ hidden: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ input_mode: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ item_prop: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+ role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+ slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+ spell_check: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ tab_index: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ title: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ translate: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ p: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ px: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ py: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pt: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pr: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pb: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pl: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+ grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+ m: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mx: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ my: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mt: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mr: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mb: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ ml: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ style: Optional[Style] = None,
+ key: Optional[Any] = None,
+ id: Optional[Any] = None,
+ class_name: Optional[Any] = None,
+ autofocus: Optional[bool] = None,
+ custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+ on_blur: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_click: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_context_menu: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_double_click: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_focus: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_mount: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_mouse_down: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_mouse_enter: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_mouse_leave: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_mouse_move: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_mouse_out: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_mouse_over: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_mouse_up: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_scroll: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ on_unmount: Optional[
+ Union[EventHandler, EventSpec, list, function, BaseVar]
+ ] = None,
+ **props
+ ) -> "Center":
+ """Create a new component instance.
+
+ Will prepend "RadixThemes" to the component tag to avoid conflicts with
+ other UI libraries for common names, like Text and Button.
+
+ Args:
+ *children: Child components.
+ color: map to CSS default color property.
+ color_scheme: map to radix color property.
+ as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+ display: How to display the element: "none" | "inline-flex" | "flex"
+ direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+ align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
+ justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
+ wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
+ gap: Gap between children: "0" - "9"
+ access_key: Provides a hint for generating a keyboard shortcut for the current element.
+ auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+ content_editable: Indicates whether the element's content is editable.
+ context_menu: Defines the ID of a