[REF-668] Wrap MyApp with radix Theme component (#1867)

* partly add some radix-ui/themes based components

* add @radix-ui/themes integration to top-level app

* WiP: compile _app_wrap based on which component library is used

TODO: working color mode

* WiP get color mode working with agnostic provider

still not perfect, as the RadixColorModeProvider seems to trip hydration errors
when using color_mode_cond component, but for now, this provides a nice balance
between the two libraries and allows them to interoperate.

* WiP template _app.js instead of making a separate wrap file

* WiP: use next-themes for consistent darkmode switching

* strict pin chakra deps

* Move ChakraColorModeProvider to separate js file

* move nasty radix themes js code into js files

* remove chakra from default imports

* chakra fixup import to use .js extension

* Add radix theme typography and layout components

* do NOT special case the radix theme...

avoid templating json and applying it, avoid non-customizable logic

just add the radix Theme component as an app wrap if the user specifies it to
rx.App, and any other app-wrap theme-like component could _also_ be used
without having to change the code.

this also allows different themes for different sections of the app by simply
placing elements inside a different rdxt.theme wrapper.

* Theme uses "radius" not "borderRadius"

* move next-themes to main packages.json

this is always used, regardless of the component library

* test_app: test cases for app_wrap interface

* Finish wrapping Button, Switch, and TextField components

* docstring, comments, static fixups

* debounce: use alias or tag when passing child Element

Fix REF-830

* test_app: ruin my beautiful indentation

* py38 compatibility

* Add event triggers for switch and TextField

* Add type hints for radix theme components

* radix themes fixups from writing the tests

* Add integration test for radix themes components

* test_app: mock out package installation

we only need the compile result, we're not actually trying to install packages

* avoid incompatible version of @emotion/react

* test_radix_themes: include theme_panel component

* next-themes default scheme: "light"

until all of our components look good in dark mode, need to keep the default as
light mode regardless of the system setting.

integration/test_radix_themes.py

@@ -0,0 +1,155 @@
+"""Integration test for @radix-ui/themes integration."""
+
+from __future__ import annotations
+
+import time
+from typing import Generator
+
+import pytest
+from selenium.webdriver.common.by import By
+from selenium.webdriver.common.keys import Keys
+
+from reflex.testing import DEFAULT_TIMEOUT, AppHarness, WebDriver
+
+
+def RadixThemesApp():
+    """App using radix-themes components."""
+    import reflex as rx
+    import reflex.components.radix.themes as rdxt
+
+    class State(rx.State):
+        v: str = ""
+        checked: bool = False
+
+        @rx.var
+        def token(self) -> str:
+            return self.get_token()
+
+    def index() -> rx.Component:
+        return rdxt.box(
+            rdxt.text_field(id="token", value=State.token, read_only=True),
+            rdxt.text_field(id="tf-bare", value=State.v, on_change=State.set_v),  # type: ignore
+            rdxt.text_field_root(
+                rdxt.text_field_slot("🧸"),
+                rdxt.text_field(id="tf-slotted", value=State.v, on_change=State.set_v),  # type: ignore
+            ),
+            rdxt.flex(
+                rdxt.switch(
+                    id="switch1",
+                    checked=State.checked,
+                    on_checked_change=State.set_checked,  # type: ignore
+                ),
+                rx.cond(
+                    State.checked,
+                    rdxt.text("💡", id="bulb"),
+                    rdxt.text("🌙", id="moon"),
+                ),
+                direction="row",
+                gap="2",
+            ),
+            p="5",
+        )
+
+    app = rx.App(
+        state=State,
+        theme=rdxt.theme(rdxt.theme_panel(), accent_color="grass"),
+    )
+    app.add_page(index)
+    app.compile()
+
+
+@pytest.fixture(scope="session")
+def radix_themes_app(
+    tmp_path_factory,
+) -> Generator[AppHarness, None, None]:
+    """Start BackgroundTask app at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        running AppHarness instance
+    """
+    with AppHarness.create(
+        root=tmp_path_factory.mktemp(f"radix_themes_app"),
+        app_source=RadixThemesApp,  # type: ignore
+    ) as harness:
+        yield harness
+
+
+@pytest.fixture
+def driver(radix_themes_app: AppHarness) -> Generator[WebDriver, None, None]:
+    """Get an instance of the browser open to the radix_themes_app app.
+
+    Args:
+        radix_themes_app: harness for BackgroundTask app
+
+    Yields:
+        WebDriver instance.
+    """
+    assert radix_themes_app.app_instance is not None, "app is not running"
+    driver = radix_themes_app.frontend()
+    try:
+        yield driver
+    finally:
+        driver.quit()
+
+
+@pytest.fixture()
+def token(radix_themes_app: AppHarness, driver: WebDriver) -> str:
+    """Get a function that returns the active token.
+
+    Args:
+        radix_themes_app: harness for BackgroundTask app.
+        driver: WebDriver instance.
+
+    Returns:
+        The token for the connected client
+    """
+    assert radix_themes_app.app_instance is not None
+    token_input = driver.find_element(By.ID, "token")
+    assert token_input
+
+    # wait for the backend connection to send the token
+    token = radix_themes_app.poll_for_value(token_input, timeout=DEFAULT_TIMEOUT * 2)
+    assert token is not None
+
+    return token
+
+
+def test_radix_themes_app(
+    radix_themes_app: AppHarness,
+    driver: WebDriver,
+    token: str,
+):
+    """Test that background tasks work as expected.
+
+    Args:
+        radix_themes_app: harness for BackgroundTask app.
+        driver: WebDriver instance.
+        token: The token for the connected client.
+    """
+    assert radix_themes_app.app_instance is not None
+
+    tf_bare = driver.find_element(By.ID, "tf-bare")
+    tf_slotted = driver.find_element(By.ID, "tf-slotted")
+    switch = driver.find_element(By.ID, "switch1")
+
+    tf_bare.send_keys("hello")
+    assert radix_themes_app.poll_for_value(tf_slotted) == "hello"
+    tf_slotted.send_keys(Keys.ARROW_LEFT, Keys.ARROW_LEFT, Keys.ARROW_LEFT, "y je")
+    assert (
+        radix_themes_app.poll_for_value(tf_bare, exp_not_equal="hello") == "hey jello"
+    )
+
+    driver.find_element(By.ID, "moon")
+    switch.click()
+    time.sleep(0.5)
+    driver.find_element(By.ID, "bulb")
+    with pytest.raises(Exception):
+        driver.find_element(By.ID, "moon")
+    switch.click()
+    time.sleep(0.5)
+    driver.find_element(By.ID, "moon")
+    with pytest.raises(Exception):
+        driver.find_element(By.ID, "bulb")

reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -0,0 +1,36 @@
+{% extends "web/pages/base_page.js.jinja2" %}
+
+{% block declaration %}
+import { EventLoopProvider } from "/utils/context.js";
+import { ThemeProvider } from 'next-themes'
+
+{% for custom_code in custom_codes %}
+{{custom_code}}
+{% endfor %}
+{% endblock %}
+
+{% block export %}
+function AppWrap({children}) {
+
+  {% for hook in hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  return (
+    {{utils.render(render, indent_width=0)}}
+  )
+}
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider defaultTheme="light" storageKey="chakra-ui-color-mode" attribute="class">
+      <AppWrap>
+        <EventLoopProvider>
+          <Component {...pageProps} />
+        </EventLoopProvider>
+      </AppWrap>
+    </ThemeProvider>
+  );
+}
+
+{% endblock %}

reflex/.templates/jinja/web/pages/index.js.jinja2

@@ -10,7 +10,7 @@
 export default function Component() {
   const {{state_name}} = useContext(StateContext)
   const {{const.router}} = useRouter()
-  const { {{const.color_mode}}, {{const.toggle_color_mode}} } = {{const.use_color_mode}}()
+  const [ {{const.color_mode}}, {{const.toggle_color_mode}} ] = useContext(ColorModeContext)
   const focusRef = useRef();
   
   // Main event loop.

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -1,10 +1,27 @@
-import { createContext } from "react"
-import { Event, hydrateClientStorage } from "/utils/state.js"
+import { createContext, useState } from "react"
+import { Event, hydrateClientStorage, useEventLoop } from "/utils/state.js"
 
 export const initialState = {{ initial_state|json_dumps }}
+export const ColorModeContext = createContext(null);
 export const StateContext = createContext(null);
 export const EventLoopContext = createContext(null);
 export const clientStorage = {{ client_storage|json_dumps }}
 export const initialEvents = [
     Event('{{state_name}}.{{const.hydrate}}', hydrateClientStorage(clientStorage)),
-]
+]
+export const isDevMode = {{ is_dev_mode|json_dumps }}
+
+export function EventLoopProvider({ children }) {
+  const [state, addEvents, connectError] = useEventLoop(
+    initialState,
+    initialEvents,
+    clientStorage,
+  )
+  return (
+    <EventLoopContext.Provider value={[addEvents, connectError]}>
+      <StateContext.Provider value={state}>
+        {children}
+      </StateContext.Provider>
+    </EventLoopContext.Provider>
+  )
+}

reflex/.templates/jinja/web/utils/theme.js.jinja2

@@ -1 +1 @@
-export default {{ theme|json_dumps }}
+export default {{ theme|json_dumps }}

reflex/.templates/web/components/reflex/chakra_color_mode_provider.js

@@ -0,0 +1,21 @@
+import { useColorMode as chakraUseColorMode } from "@chakra-ui/react"
+import { useTheme } from "next-themes"
+import { useEffect } from "react"
+import { ColorModeContext } from "/utils/context.js"
+
+export default function ChakraColorModeProvider({ children }) {
+  const {colorMode, toggleColorMode} = chakraUseColorMode()
+  const {theme, setTheme} = useTheme()
+
+  useEffect(() => {
+    if (colorMode != theme) {
+        toggleColorMode()
+    }
+  }, [theme])
+
+  return (
+    <ColorModeContext.Provider value={[ colorMode, toggleColorMode ]}>
+      {children}
+    </ColorModeContext.Provider>
+  )
+}

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -0,0 +1,20 @@
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+import { ColorModeContext } from "/utils/context.js"
+
+
+export default function RadixThemesColorModeProvider({ children }) {
+    const {theme, setTheme} = useTheme()
+    const [colorMode, setColorMode] = useState("light")
+  
+    useEffect(() => setColorMode(theme), [theme])
+  
+    const toggleColorMode = () => {
+      setTheme(theme === "light" ? "dark" : "light")
+    }
+    return (
+      <ColorModeContext.Provider value={[ colorMode, toggleColorMode ]}>
+        {children}
+      </ColorModeContext.Provider>
+    )
+  }

reflex/.templates/web/pages/_app.js

@@ -1,43 +0,0 @@
-import { ChakraProvider, extendTheme } from "@chakra-ui/react";
-import { Global, css } from "@emotion/react";
-import theme from "/utils/theme";
-import { clientStorage, initialEvents, initialState, StateContext, EventLoopContext } from "/utils/context.js";
-import { useEventLoop } from "/utils/state";
-
-import '/styles/styles.css'
-
-const GlobalStyles = css`
-  /* Hide the blue border around Chakra components. */
-  .js-focus-visible :focus:not([data-focus-visible-added]) {
-    outline: none;
-    box-shadow: none;
-  }
-`;
-
-function EventLoopProvider({ children }) {
-  const [state, addEvents, connectError] = useEventLoop(
-    initialState,
-    initialEvents,
-    clientStorage,
-  )
-  return (
-    <EventLoopContext.Provider value={[addEvents, connectError]}>
-      <StateContext.Provider value={state}>
-        {children}
-      </StateContext.Provider>
-    </EventLoopContext.Provider>
-  )
-}
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <ChakraProvider theme={extendTheme(theme)}>
-      <Global styles={GlobalStyles} />
-      <EventLoopProvider>
-        <Component {...pageProps} />
-      </EventLoopProvider>
-    </ChakraProvider>
-  );
-}
-
-export default MyApp;

reflex/app.py

@@ -32,6 +32,7 @@ from reflex.base import Base
 from reflex.compiler import compiler
 from reflex.compiler import utils as compiler_utils
 from reflex.components import connection_modal
+from reflex.components.base.app_wrap import AppWrap
 from reflex.components.component import Component, ComponentStyle
 from reflex.components.layout.fragment import Fragment
 from reflex.components.navigation.client_side_routing import (
@@ -125,6 +126,9 @@ class App(Base):
     # Background tasks that are currently running
     background_tasks: Set[asyncio.Task] = set()
 
+    # The radix theme for the entire app
+    theme: Optional[Component] = None
+
     def __init__(self, *args, **kwargs):
         """Initialize the app.
 
@@ -569,6 +573,15 @@ class App(Base):
         page_imports.update(_frontend_packages)
         prerequisites.install_frontend_packages(page_imports)
 
+    def _app_root(self, app_wrappers):
+        order = sorted(app_wrappers, key=lambda k: k[0], reverse=True)
+        root = parent = app_wrappers[order[0]]
+        for key in order[1:]:
+            child = app_wrappers[key]
+            parent.children.append(child)
+            parent = child
+        return root
+
     def compile(self):
         """Compile the app and output it to the pages folder."""
         if os.environ.get(constants.SKIP_COMPILE_ENV_VAR) == "yes":
@@ -601,12 +614,21 @@ class App(Base):
         # TODO Anecdotally, processes=2 works 10% faster (cpu_count=12)
         thread_pool = ThreadPool()
         all_imports = {}
+        page_futures = []
+        app_wrappers: Dict[tuple[int, str], Component] = {
+            # Default app wrap component renders {children}
+            (0, "AppWrap"): AppWrap.create()
+        }
+        if self.theme is not None:
+            # If a theme component was provided, wrap the app with it
+            app_wrappers[(20, "Theme")] = self.theme
+
         with progress:
             for route, component in self.pages.items():
                 # TODO: this progress does not reflect actual threaded task completion
                 progress.advance(task)
                 component.add_style(self.style)
-                compile_results.append(
+                page_futures.append(
                     thread_pool.apply_async(
                         compiler.compile_page,
                         args=(
@@ -619,14 +641,22 @@ class App(Base):
                 # add component.get_imports() to all_imports
                 all_imports.update(component.get_imports())
 
+                # add the app wrappers from this component
+                app_wrappers.update(component.get_app_wrap_components())
+
                 # Add the custom components from the page to the set.
                 custom_components |= component.get_custom_components()
 
         thread_pool.close()
         thread_pool.join()
 
-        # Get the results.
-        compile_results = [result.get() for result in compile_results]
+        # Compile the app wrapper.
+        app_root = self._app_root(app_wrappers=app_wrappers)
+        all_imports.update(app_root.get_imports())
+        compile_results.append(compiler.compile_app(app_root))
+
+        # Get the compiled pages.
+        compile_results.extend(result.get() for result in page_futures)
 
         # TODO the compile tasks below may also benefit from parallelization too
 
@@ -644,7 +674,7 @@ class App(Base):
         compile_results.append(compiler.compile_document_root(self.head_components))
 
         # Compile the theme.
-        compile_results.append(compiler.compile_theme(self.style))
+        compile_results.append(compiler.compile_theme(style=self.style))
 
         # Compile the contexts.
         compile_results.append(compiler.compile_contexts(self.state))

reflex/compiler/compiler.py

@@ -39,13 +39,9 @@ DEFAULT_IMPORTS: imports.ImportDict = {
         ImportVar(tag="EventLoopContext"),
         ImportVar(tag="initialEvents"),
         ImportVar(tag="StateContext"),
+        ImportVar(tag="ColorModeContext"),
     },
     "": {ImportVar(tag="focus-visible/dist/focus-visible", install=False)},
-    "@chakra-ui/react": {
-        ImportVar(tag=constants.ColorMode.USE),
-        ImportVar(tag="Box"),
-        ImportVar(tag="Text"),
-    },
 }
 
 
@@ -64,6 +60,23 @@ def _compile_document_root(root: Component) -> str:
     )
 
 
+def _compile_app(app_root: Component) -> str:
+    """Compile the app template component.
+
+    Args:
+        app_root: The app root to compile.
+
+    Returns:
+        The compiled app.
+    """
+    return templates.APP_ROOT.render(
+        imports=utils.compile_imports(app_root.get_imports()),
+        custom_codes=app_root.get_custom_code(),
+        hooks=app_root.get_hooks(),
+        render=app_root.render(),
+    )
+
+
 def _compile_theme(theme: dict) -> str:
     """Compile the theme.
 
@@ -89,6 +102,7 @@ def _compile_contexts(state: Type[State]) -> str:
         initial_state=utils.compile_state(state),
         state_name=state.get_name(),
         client_storage=utils.compile_client_storage(state),
+        is_dev_mode=os.environ.get("REFLEX_ENV_MODE", "dev") == "dev",
     )
 
 
@@ -246,6 +260,23 @@ def compile_document_root(head_components: list[Component]) -> tuple[str, str]:
     return output_path, code
 
 
+def compile_app(app_root: Component) -> tuple[str, str]:
+    """Compile the app root.
+
+    Args:
+        app_root: The app root component to compile.
+
+    Returns:
+        The path and code of the compiled app wrapper.
+    """
+    # Get the path for the output file.
+    output_path = utils.get_page_path(constants.PageNames.APP_ROOT)
+
+    # Compile the document root.
+    code = _compile_app(app_root)
+    return output_path, code
+
+
 def compile_theme(style: ComponentStyle) -> tuple[str, str]:
     """Compile the theme.
 

reflex/compiler/templates.py

@@ -60,6 +60,9 @@ RXCONFIG = get_template("app/rxconfig.py.jinja2")
 # Code to render a NextJS Document root.
 DOCUMENT_ROOT = get_template("web/pages/_document.js.jinja2")
 
+# Code to render NextJS App root.
+APP_ROOT = get_template("web/pages/_app.js.jinja2")
+
 # Template for the theme file.
 THEME = get_template("web/utils/theme.js.jinja2")
 

reflex/compiler/utils.py

@@ -10,7 +10,6 @@ from pydantic.fields import ModelField
 from reflex import constants
 from reflex.components.base import (
     Body,
-    ColorModeScript,
     Description,
     DocumentHead,
     Head,
@@ -269,7 +268,6 @@ def create_document_root(head_components: list[Component] | None = None) -> Comp
     return Html.create(
         DocumentHead.create(*head_components),
         Body.create(
-            ColorModeScript.create(),
             Main.create(),
             NextScript.create(),
         ),

reflex/components/base/app_wrap.py

@@ -0,0 +1,17 @@
+"""Top-level component that wraps the entire app."""
+from reflex.components.component import Component
+
+from .bare import Bare
+
+
+class AppWrap(Bare):
+    """Top-level component that wraps the entire app."""
+
+    @classmethod
+    def create(cls) -> Component:
+        """Create a new AppWrap component.
+
+        Returns:
+            A new AppWrap component containing {children}.
+        """
+        return super().create(contents="{children}")

reflex/components/base/app_wrap.pyi

@@ -0,0 +1,78 @@
+"""Stub file for app_wrap.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, List, Optional, Union, overload
+from reflex.components.base.bare import Bare
+from reflex.components.component import Component
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventHandler, EventChain, EventSpec
+from reflex.style import Style
+
+class AppWrap(Bare):
+    @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,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, 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
+    ) -> "AppWrap":
+        """Create a new AppWrap component.
+
+        Returns:
+            A new AppWrap component containing {children}.
+        """
+        ...

reflex/components/component.py

@@ -766,7 +766,37 @@ class Component(Base, ABC):
         Returns:
             An import var.
         """
-        return ImportVar(tag=self.tag, is_default=self.is_default, alias=self.alias)
+        # If the tag is dot-qualified, only import the left-most name.
+        tag = self.tag.partition(".")[0] if self.tag else None
+        alias = self.alias.partition(".")[0] if self.alias else None
+        return ImportVar(tag=tag, is_default=self.is_default, alias=alias)
+
+    def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
+        """Get the app wrap components for the component.
+
+        Returns:
+            The app wrap components.
+        """
+        return {}
+
+    def get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
+        """Get the app wrap components for the component and its children.
+
+        Returns:
+            The app wrap components.
+        """
+        # Store the components in a set to avoid duplicates.
+        components = self._get_app_wrap_components()
+
+        for component in tuple(components.values()):
+            components.update(component.get_app_wrap_components())
+
+        # Add the app wrap components for the children.
+        for child in self.children:
+            components.update(child.get_app_wrap_components())
+
+        # Return the components.
+        return components
 
 
 # Map from component to styling.

reflex/components/forms/debounce.py

@@ -68,7 +68,9 @@ class DebounceInput(Component):
             id=child.id,
             class_name=child.class_name,
             element=Var.create(
-                "{%s}" % child.tag, _var_is_local=False, _var_is_string=False
+                "{%s}" % (child.alias or child.tag),
+                _var_is_local=False,
+                _var_is_string=False,
             ),
         )
         # do NOT render the child, DebounceInput will create it

reflex/components/libs/chakra.py

@@ -1,14 +1,99 @@
 """Components that are based on Chakra-UI."""
+from __future__ import annotations
 
-from typing import Literal
+from typing import List, Literal
 
 from reflex.components.component import Component
+from reflex.utils import imports
+from reflex.vars import ImportVar, Var
 
 
 class ChakraComponent(Component):
     """A component that wraps a Chakra component."""
 
-    library = "@chakra-ui/react"
+    library = "@chakra-ui/react@2.6.1"
+    lib_dependencies: List[str] = [
+        "@chakra-ui/system@2.5.7",
+        "framer-motion@10.16.4",
+    ]
+
+    def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
+        return {
+            **super()._get_app_wrap_components(),
+            (60, "ChakraProvider"): ChakraProvider.create(),
+        }
+
+
+class Global(Component):
+    """The emotion/react Global styling component."""
+
+    library = "@emotion/react@^11.11.0"
+    lib_dependencies: List[str] = [
+        "@emotion/styled@^11.11.0",
+    ]
+
+    tag = "Global"
+
+    styles: Var[str]
+
+
+class ChakraProvider(ChakraComponent):
+    """Top level Chakra provider must be included in any app using chakra components."""
+
+    tag = "ChakraProvider"
+
+    theme: Var[str]
+
+    @classmethod
+    def create(cls) -> Component:
+        """Create a new ChakraProvider component.
+
+        Returns:
+            A new ChakraProvider component.
+        """
+        return super().create(
+            Global.create(styles=Var.create("GlobalStyles", _var_is_local=False)),
+            theme=Var.create("extendTheme(theme)", _var_is_local=False),
+        )
+
+    def _get_imports(self) -> imports.ImportDict:
+        imports = super()._get_imports()
+        imports.setdefault(self.__fields__["library"].default, set()).add(
+            ImportVar(tag="extendTheme", is_default=False),
+        )
+        imports.setdefault("/utils/theme.js", set()).add(
+            ImportVar(tag="theme", is_default=True),
+        )
+        imports.setdefault(Global.__fields__["library"].default, set()).add(
+            ImportVar(tag="css", is_default=False),
+        )
+        return imports
+
+    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]) {
+    outline: none;
+    box-shadow: none;
+  }
+`;
+"""
+
+    def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
+        return {
+            (50, "ChakraColorModeProvider"): ChakraColorModeProvider.create(),
+        }
+
+
+class ChakraColorModeProvider(Component):
+    """Next-themes integration for chakra colorModeProvider."""
+
+    library = "/components/reflex/chakra_color_mode_provider.js"
+    tag = "ChakraColorModeProvider"
+    is_default = True
 
 
 LiteralColorScheme = Literal[

reflex/components/radix/__init__.py

@@ -0,0 +1 @@
+"""Namespace for components provided by @radix-ui packages."""

reflex/components/radix/themes/__init__.py

@@ -0,0 +1,42 @@
+"""Namespace for components provided by the @radix-ui/themes library."""
+from .base import (
+    Theme,
+    ThemePanel,
+)
+from .components import (
+    Button,
+    Switch,
+    TextField,
+    TextFieldRoot,
+    TextFieldSlot,
+)
+from .layout import (
+    Box,
+    Container,
+    Flex,
+    Grid,
+    Section,
+)
+from .typography import Blockquote, Code, Em, Heading, Kbd, Link, Quote, Strong, Text
+
+blockquote = Blockquote.create
+box = Box.create
+button = Button.create
+code = Code.create
+container = Container.create
+em = Em.create
+flex = Flex.create
+grid = Grid.create
+heading = Heading.create
+kbd = Kbd.create
+link = Link.create
+quote = Quote.create
+section = Section.create
+strong = Strong.create
+switch = Switch.create
+text = Text.create
+text_field = TextField.create
+text_field_root = TextFieldRoot.create
+text_field_slot = TextFieldSlot.create
+theme = Theme.create
+theme_panel = ThemePanel.create

reflex/components/radix/themes/base.py

@@ -0,0 +1,125 @@
+"""Base classes for radix-themes components."""
+
+from __future__ import annotations
+
+from reflex.components import Component
+from reflex.utils import imports
+from reflex.vars import ImportVar, Var
+
+
+class CommonMarginProps(Component):
+    """Many radix-themes elements accept shorthand margin props."""
+
+    # Margin: "0" - "9"
+    m: Var[str]
+
+    # Margin horizontal: "0" - "9"
+    mx: Var[str]
+
+    # Margin vertical: "0" - "9"
+    my: Var[str]
+
+    # Margin top: "0" - "9"
+    mt: Var[str]
+
+    # Margin right: "0" - "9"
+    mr: Var[str]
+
+    # Margin bottom: "0" - "9"
+    mb: Var[str]
+
+    # Margin left: "0" - "9"
+    ml: Var[str]
+
+
+class RadixThemesComponent(Component):
+    """Base class for all @radix-ui/themes components."""
+
+    library = "@radix-ui/themes@^2.0.0"
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """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.
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        component = super().create(*children, **props)
+        if component.library is None:
+            component.library = RadixThemesComponent.__fields__["library"].default
+        component.alias = "RadixThemes" + (
+            component.tag or component.__class__.__name__
+        )
+        return component
+
+    def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
+        return {
+            **super()._get_app_wrap_components(),
+            (45, "RadixThemesColorModeProvider"): RadixThemesColorModeProvider.create(),
+        }
+
+
+class Theme(RadixThemesComponent):
+    """A theme provider for radix components.
+
+    This should be applied as `App.theme` to apply the theme to all radix
+    components in the app with the given settings.
+
+    It can also be used in a normal page to apply specified properties to all
+    child elements as an override of the main theme.
+    """
+
+    tag = "Theme"
+
+    # Whether to apply the themes background color to the theme node.
+    has_background: Var[bool]
+
+    # Override light or dark mode theme: "inherit" | "light" | "dark"
+    appearance: Var[str]
+
+    # The color used for default buttons, typography, backgrounds, etc
+    accent_color: Var[str]
+
+    # The shade of gray
+    gray_color: Var[str]
+
+    # Whether panel backgrounds are transparent: "solid" | "transparent" (default)
+    panel_background: Var[str]
+
+    # Element border radius: "none" | "small" | "medium" | "large" | "full"
+    radius: Var[str]
+
+    # Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%"
+    scaling: Var[str]
+
+    def _get_imports(self) -> imports.ImportDict:
+        return {
+            **super()._get_imports(),
+            "": {ImportVar(tag="@radix-ui/themes/styles.css", install=False)},
+        }
+
+
+class ThemePanel(RadixThemesComponent):
+    """Visual editor for creating and editing themes.
+
+    Include as a child component of Theme to use in your app.
+    """
+
+    tag = "ThemePanel"
+
+    default_open: Var[bool]
+
+
+class RadixThemesColorModeProvider(Component):
+    """Next-themes integration for radix themes components."""
+
+    library = "/components/reflex/radix_themes_color_mode_provider.js"
+    tag = "RadixThemesColorModeProvider"
+    is_default = True

reflex/components/radix/themes/base.pyi

@@ -0,0 +1,434 @@
+"""Stub file for base.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, List, Optional, Union, overload
+from reflex.components.component import Component
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventHandler, EventChain, EventSpec
+from reflex.style import Style
+
+class CommonMarginProps(Component):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "CommonMarginProps":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class RadixThemesComponent(Component):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        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, 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
+    ) -> "RadixThemesComponent":
+        """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.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Theme(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        has_background: Optional[Union[Var[bool], bool]] = None,
+        appearance: Optional[Union[Var[str], str]] = None,
+        accent_color: Optional[Union[Var[str], str]] = None,
+        gray_color: Optional[Union[Var[str], str]] = None,
+        panel_background: Optional[Union[Var[str], str]] = None,
+        radius: Optional[Union[Var[str], str]] = None,
+        scaling: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Theme":
+        """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.
+            has_background: Whether to apply the themes background color to the theme node.
+            appearance: Override light or dark mode theme: "inherit" | "light" | "dark"
+            accent_color: The color used for default buttons, typography, backgrounds, etc
+            gray_color: The shade of gray
+            panel_background: Whether panel backgrounds are transparent: "solid" | "transparent" (default)
+            radius: Element border radius: "none" | "small" | "medium" | "large" | "full"
+            scaling: Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ThemePanel(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        default_open: Optional[Union[Var[bool], bool]] = 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, 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
+    ) -> "ThemePanel":
+        """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.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class RadixThemesColorModeProvider(Component):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        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, 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
+    ) -> "RadixThemesColorModeProvider":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...

reflex/components/radix/themes/components.py

@@ -0,0 +1,160 @@
+"""Interactive components provided by @radix-ui/themes."""
+from typing import Any, Dict
+
+from reflex import el
+from reflex.components.component import Component
+from reflex.components.forms.debounce import DebounceInput
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+
+from .base import CommonMarginProps, RadixThemesComponent
+
+
+class Button(CommonMarginProps, RadixThemesComponent):
+    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+
+    tag = "Button"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    # Button size "1" - "4"
+    size: Var[str]
+
+    # Variant of button: "solid" | "soft" | "outline" | "ghost"
+    variant: Var[str]
+
+    # Override theme color for button
+    color: Var[str]
+
+    # Whether to render the button with higher contrast color against background
+    high_contrast: Var[bool]
+
+    # Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
+    radius: Var[str]
+
+
+class Switch(CommonMarginProps, RadixThemesComponent):
+    """A toggle switch alternative to the checkbox."""
+
+    tag = "Switch"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    # Whether the switch is checked by default
+    default_checked: Var[bool]
+
+    # Whether the switch is checked
+    checked: Var[bool]
+
+    # If true, prevent the user from interacting with the switch
+    disabled: Var[bool]
+
+    # If true, the user must interact with the switch to submit the form
+    required: Var[bool]
+
+    # The name of the switch (when submitting a form)
+    name: Var[str]
+
+    # The value associated with the "on" position
+    value: Var[str]
+
+    # Switch size "1" - "4"
+    size: Var[str]
+
+    # Variant of switch: "solid" | "soft" | "outline" | "ghost"
+    variant: Var[str]
+
+    # Override theme color for switch
+    color: Var[str]
+
+    # Whether to render the switch with higher contrast color against background
+    high_contrast: Var[bool]
+
+    # Override theme radius for switch: "none" | "small" | "medium" | "large" | "full"
+    radius: Var[str]
+
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger name to the argspec passed to the handler.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_CHECKED_CHANGE: lambda checked: [checked],
+        }
+
+
+class TextFieldRoot(CommonMarginProps, RadixThemesComponent):
+    """Captures user input with an optional slot for buttons and icons."""
+
+    tag = "TextField.Root"
+
+    # Button size "1" - "3"
+    size: Var[str]
+
+    # Variant of text field: "classic" | "surface" | "soft"
+    variant: Var[str]
+
+    # Override theme color for text field
+    color: Var[str]
+
+    # Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
+    radius: Var[str]
+
+
+class TextField(TextFieldRoot, el.Input):
+    """The input part of a TextField, may be used by itself."""
+
+    tag = "TextField.Input"
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create an Input component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The component.
+        """
+        if (
+            isinstance(props.get("value"), Var) and props.get("on_change")
+        ) or "debounce_timeout" in props:
+            # Currently default to 50ms, which appears to be a good balance
+            debounce_timeout = props.pop("debounce_timeout", 50)
+            # create a debounced input if the user requests full control to avoid typing jank
+            return DebounceInput.create(
+                super().create(*children, **props), debounce_timeout=debounce_timeout
+            )
+        return super().create(*children, **props)
+
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_CHANGE: lambda e0: [e0.target.value],
+            EventTriggers.ON_FOCUS: lambda e0: [e0.target.value],
+            EventTriggers.ON_BLUR: lambda e0: [e0.target.value],
+            EventTriggers.ON_KEY_DOWN: lambda e0: [e0.key],
+            EventTriggers.ON_KEY_UP: lambda e0: [e0.key],
+        }
+
+
+class TextFieldSlot(RadixThemesComponent):
+    """Contains icons or buttons associated with an Input."""
+
+    tag = "TextField.Slot"
+
+    # Override theme color for text field slot
+    color: Var[str]
+
+    # Override the gap spacing between slot and input: "1" - "9"
+    gap: Var[str]

reflex/components/radix/themes/components.pyi

@@ -0,0 +1,650 @@
+"""Stub file for components.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, List, Optional, Union, overload
+from reflex.components.radix.themes.base import CommonMarginProps
+from reflex.components.component import Component
+from reflex.el.elements import Input
+from reflex.components.radix.themes.base import RadixThemesComponent
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventHandler, EventChain, EventSpec
+from reflex.style import Style
+
+class Button(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[Union[Var[str], str]] = None,
+        variant: Optional[Union[Var[str], str]] = None,
+        color: Optional[Union[Var[str], str]] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        radius: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Button":
+        """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.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            size: Button size "1" - "4"
+            variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
+            color: Override theme color for button
+            high_contrast: Whether to render the button with higher contrast color against background
+            radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Switch(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        default_checked: Optional[Union[Var[bool], bool]] = None,
+        checked: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        size: Optional[Union[Var[str], str]] = None,
+        variant: Optional[Union[Var[str], str]] = None,
+        color: Optional[Union[Var[str], str]] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        radius: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, str]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, List, function, BaseVar]
+        ] = None,
+        on_checked_change: 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
+    ) -> "Switch":
+        """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.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            default_checked: Whether the switch is checked by default
+            checked: Whether the switch is checked
+            disabled: If true, prevent the user from interacting with the switch
+            required: If true, the user must interact with the switch to submit the form
+            name: The name of the switch (when submitting a form)
+            value: The value associated with the "on" position
+            size: Switch size "1" - "4"
+            variant: Variant of switch: "solid" | "soft" | "outline" | "ghost"
+            color: Override theme color for switch
+            high_contrast: Whether to render the switch with higher contrast color against background
+            radius: Override theme radius for switch: "none" | "small" | "medium" | "large" | "full"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class TextFieldRoot(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[str], str]] = None,
+        variant: Optional[Union[Var[str], str]] = None,
+        color: Optional[Union[Var[str], str]] = None,
+        radius: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "TextFieldRoot":
+        """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.
+            size: Button size "1" - "3"
+            variant: Variant of text field: "classic" | "surface" | "soft"
+            color: Override theme color for text field
+            radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class TextField(TextFieldRoot, Input):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[str], str]] = None,
+        variant: Optional[Union[Var[str], str]] = None,
+        color: Optional[Union[Var[str], str]] = None,
+        radius: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = None,
+        accept: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        alt: 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,
+        auto_complete: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_focus: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        capture: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        checked: 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,
+        dirname: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        disabled: 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,
+        form: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        form_action: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_enc_type: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_method: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_no_validate: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_target: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        height: 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,
+        list: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        max: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        max_length: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        min_length: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        min: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        multiple: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        name: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        pattern: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        placeholder: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        read_only: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        required: 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,
+        src: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        step: 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,
+        type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        use_map: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        value: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        width: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = 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, str]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, List, function, BaseVar]
+        ] = None,
+        on_change: 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_key_down: Optional[
+            Union[EventHandler, EventSpec, List, function, BaseVar]
+        ] = None,
+        on_key_up: 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
+    ) -> "TextField":
+        """Create an Input component.
+
+        Args:
+            *children: The children of the component.
+            size: Button size "1" - "3"
+            variant: Variant of text field: "classic" | "surface" | "soft"
+            color: Override theme color for text field
+            radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
+class TextFieldSlot(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        color: Optional[Union[Var[str], str]] = None,
+        gap: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "TextFieldSlot":
+        """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: Override theme color for text field slot
+            gap: Override the gap spacing between slot and input: "1" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...

reflex/components/radix/themes/layout.py

@@ -0,0 +1,124 @@
+"""Declarative layout and common spacing props."""
+from __future__ import annotations
+
+from reflex.vars import Var
+
+from .base import CommonMarginProps, RadixThemesComponent
+
+
+class LayoutComponent(CommonMarginProps, RadixThemesComponent):
+    """Box, Flex and Grid are foundational elements you'll use to construct
+    layouts. Box provides block-level spacing and sizing, while Flex and Grid
+    let you create flexible columns, rows and grids.
+    """
+
+    # Padding: "0" - "9"
+    p: Var[str]
+
+    # Padding horizontal: "0" - "9"
+    px: Var[str]
+
+    # Padding vertical: "0" - "9"
+    py: Var[str]
+
+    # Padding top: "0" - "9"
+    pt: Var[str]
+
+    # Padding right: "0" - "9"
+    pr: Var[str]
+
+    # Padding bottom: "0" - "9"
+    pb: Var[str]
+
+    # Padding left: "0" - "9"
+    pl: Var[str]
+
+    # Whether the element will take up the smallest possible space: "0" | "1"
+    shrink: Var[str]
+
+    # Whether the element will take up the largest possible space: "0" | "1"
+    grow: Var[str]
+
+
+class Box(LayoutComponent):
+    """A fundamental layout building block, based on <div>."""
+
+    tag = "Box"
+
+
+class Flex(LayoutComponent):
+    """Component for creating flex layouts."""
+
+    tag = "Flex"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    # How to display the element: "none" | "inline-flex" | "flex"
+    display: Var[str]
+
+    # How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+    direction: Var[str]
+
+    # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
+    align: Var[str]
+
+    # Alignment of children along the cross axis: "start" | "center" | "end" | "between"
+    justify: Var[str]
+
+    # Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
+    wrap: Var[str]
+
+    # Gap between children: "0" - "9"
+    gap: Var[str]
+
+
+class Grid(RadixThemesComponent):
+    """Component for creating grid layouts."""
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    # How to display the element: "none" | "inline-grid" | "grid"
+    display: Var[str]
+
+    # Number of columns
+    columns: Var[str]
+
+    # Number of rows
+    rows: Var[str]
+
+    # How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
+    flow: Var[str]
+
+    # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
+    align: Var[str]
+
+    # Alignment of children along the cross axis: "start" | "center" | "end" | "between"
+    justify: Var[str]
+
+    # Gap between children: "0" - "9"
+    gap: Var[str]
+
+    # Gap between children horizontal: "0" - "9"
+    gap_x: Var[str]
+
+    # Gap between children vertical: "0" - "9"
+    gap_x: Var[str]
+
+
+class Container(LayoutComponent):
+    """Constrains the maximum width of page content.
+
+    See https://www.radix-ui.com/themes/docs/components/container
+    """
+
+    # The size of the container: "1" - "4" (default "4")
+    size: Var[str]
+
+
+class Section(LayoutComponent):
+    """Denotes a section of page content."""
+
+    # The size of the section: "1" - "3" (default "3")
+    size: Var[str]

reflex/components/radix/themes/layout.pyi

@@ -0,0 +1,682 @@
+"""Stub file for layout.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, List, Optional, Union, overload
+from reflex.components.radix.themes.base import CommonMarginProps
+from reflex.components.component import Component
+from reflex.components.radix.themes.base import RadixThemesComponent
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventHandler, EventChain, EventSpec
+from reflex.style import Style
+
+class LayoutComponent(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        p: Optional[Union[Var[str], str]] = None,
+        px: Optional[Union[Var[str], str]] = None,
+        py: Optional[Union[Var[str], str]] = None,
+        pt: Optional[Union[Var[str], str]] = None,
+        pr: Optional[Union[Var[str], str]] = None,
+        pb: Optional[Union[Var[str], str]] = None,
+        pl: Optional[Union[Var[str], str]] = None,
+        shrink: Optional[Union[Var[str], str]] = None,
+        grow: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "LayoutComponent":
+        """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.
+            p: Padding: "0" - "9"
+            px: Padding horizontal: "0" - "9"
+            py: Padding vertical: "0" - "9"
+            pt: Padding top: "0" - "9"
+            pr: Padding right: "0" - "9"
+            pb: Padding bottom: "0" - "9"
+            pl: Padding left: "0" - "9"
+            shrink: Whether the element will take up the smallest possible space: "0" | "1"
+            grow: Whether the element will take up the largest possible space: "0" | "1"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Box(LayoutComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        p: Optional[Union[Var[str], str]] = None,
+        px: Optional[Union[Var[str], str]] = None,
+        py: Optional[Union[Var[str], str]] = None,
+        pt: Optional[Union[Var[str], str]] = None,
+        pr: Optional[Union[Var[str], str]] = None,
+        pb: Optional[Union[Var[str], str]] = None,
+        pl: Optional[Union[Var[str], str]] = None,
+        shrink: Optional[Union[Var[str], str]] = None,
+        grow: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Box":
+        """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.
+            p: Padding: "0" - "9"
+            px: Padding horizontal: "0" - "9"
+            py: Padding vertical: "0" - "9"
+            pt: Padding top: "0" - "9"
+            pr: Padding right: "0" - "9"
+            pb: Padding bottom: "0" - "9"
+            pl: Padding left: "0" - "9"
+            shrink: Whether the element will take up the smallest possible space: "0" | "1"
+            grow: Whether the element will take up the largest possible space: "0" | "1"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Flex(LayoutComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        display: Optional[Union[Var[str], str]] = None,
+        direction: Optional[Union[Var[str], str]] = None,
+        align: Optional[Union[Var[str], str]] = None,
+        justify: Optional[Union[Var[str], str]] = None,
+        wrap: Optional[Union[Var[str], str]] = None,
+        gap: Optional[Union[Var[str], str]] = None,
+        p: Optional[Union[Var[str], str]] = None,
+        px: Optional[Union[Var[str], str]] = None,
+        py: Optional[Union[Var[str], str]] = None,
+        pt: Optional[Union[Var[str], str]] = None,
+        pr: Optional[Union[Var[str], str]] = None,
+        pb: Optional[Union[Var[str], str]] = None,
+        pl: Optional[Union[Var[str], str]] = None,
+        shrink: Optional[Union[Var[str], str]] = None,
+        grow: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Flex":
+        """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.
+            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"
+            p: Padding: "0" - "9"
+            px: Padding horizontal: "0" - "9"
+            py: Padding vertical: "0" - "9"
+            pt: Padding top: "0" - "9"
+            pr: Padding right: "0" - "9"
+            pb: Padding bottom: "0" - "9"
+            pl: Padding left: "0" - "9"
+            shrink: Whether the element will take up the smallest possible space: "0" | "1"
+            grow: Whether the element will take up the largest possible space: "0" | "1"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Grid(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        display: Optional[Union[Var[str], str]] = None,
+        columns: Optional[Union[Var[str], str]] = None,
+        rows: Optional[Union[Var[str], str]] = None,
+        flow: Optional[Union[Var[str], str]] = None,
+        align: Optional[Union[Var[str], str]] = None,
+        justify: Optional[Union[Var[str], str]] = None,
+        gap: Optional[Union[Var[str], str]] = None,
+        gap_x: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Grid":
+        """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.
+            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-grid" | "grid"
+            columns: Number of columns
+            rows: Number of rows
+            flow: How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
+            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"
+            gap: Gap between children: "0" - "9"
+            gap_x: Gap between children vertical: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Container(LayoutComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[str], str]] = None,
+        p: Optional[Union[Var[str], str]] = None,
+        px: Optional[Union[Var[str], str]] = None,
+        py: Optional[Union[Var[str], str]] = None,
+        pt: Optional[Union[Var[str], str]] = None,
+        pr: Optional[Union[Var[str], str]] = None,
+        pb: Optional[Union[Var[str], str]] = None,
+        pl: Optional[Union[Var[str], str]] = None,
+        shrink: Optional[Union[Var[str], str]] = None,
+        grow: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Container":
+        """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.
+            size: The size of the container: "1" - "4" (default "4")
+            p: Padding: "0" - "9"
+            px: Padding horizontal: "0" - "9"
+            py: Padding vertical: "0" - "9"
+            pt: Padding top: "0" - "9"
+            pr: Padding right: "0" - "9"
+            pb: Padding bottom: "0" - "9"
+            pl: Padding left: "0" - "9"
+            shrink: Whether the element will take up the smallest possible space: "0" | "1"
+            grow: Whether the element will take up the largest possible space: "0" | "1"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Section(LayoutComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[str], str]] = None,
+        p: Optional[Union[Var[str], str]] = None,
+        px: Optional[Union[Var[str], str]] = None,
+        py: Optional[Union[Var[str], str]] = None,
+        pt: Optional[Union[Var[str], str]] = None,
+        pr: Optional[Union[Var[str], str]] = None,
+        pb: Optional[Union[Var[str], str]] = None,
+        pl: Optional[Union[Var[str], str]] = None,
+        shrink: Optional[Union[Var[str], str]] = None,
+        grow: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Section":
+        """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.
+            size: The size of the section: "1" - "3" (default "3")
+            p: Padding: "0" - "9"
+            px: Padding horizontal: "0" - "9"
+            py: Padding vertical: "0" - "9"
+            pt: Padding top: "0" - "9"
+            pr: Padding right: "0" - "9"
+            pb: Padding bottom: "0" - "9"
+            pl: Padding left: "0" - "9"
+            shrink: Whether the element will take up the smallest possible space: "0" | "1"
+            grow: Whether the element will take up the largest possible space: "0" | "1"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...

reflex/components/radix/themes/typography.py

@@ -0,0 +1,126 @@
+"""Components for rendering text.
+
+https://www.radix-ui.com/themes/docs/theme/typography
+"""
+from __future__ import annotations
+
+from reflex.vars import Var
+
+from .base import CommonMarginProps, RadixThemesComponent
+
+
+class Text(CommonMarginProps, RadixThemesComponent):
+    """A foundational text primitive based on the <span> element."""
+
+    tag = "Text"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    # Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
+    as_: Var[str]
+
+    # Text size: "1" - "9"
+    size: Var[str]
+
+    # Thickness of text: "light" | "regular" | "medium" | "bold"
+    weight: Var[str]
+
+    # Alignment of text in element: "left" | "center" | "right"
+    align: Var[str]
+
+    # Removes the leading trim space: "normal" | "start" | "end" | "both"
+    trim: Var[str]
+
+    # Overrides the accent color inherited from the Theme.
+    color: Var[str]
+
+    # Whether to render the text with higher contrast color
+    high_contrast: Var[bool]
+
+
+class Heading(Text):
+    """A semantic heading element."""
+
+    tag = "Heading"
+
+
+class Blockquote(CommonMarginProps, RadixThemesComponent):
+    """A block level extended quotation."""
+
+    tag = "Blockquote"
+
+    # Text size: "1" - "9"
+    size: Var[str]
+
+    # Thickness of text: "light" | "regular" | "medium" | "bold"
+    weight: Var[str]
+
+    # Overrides the accent color inherited from the Theme.
+    color: Var[str]
+
+    # Whether to render the text with higher contrast color
+    high_contrast: Var[bool]
+
+
+class Code(Blockquote):
+    """Marks text to signify a short fragment of computer code."""
+
+    tag = "Code"
+
+    # The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
+    variant: Var[str]
+
+
+class Em(CommonMarginProps, RadixThemesComponent):
+    """Marks text to stress emphasis."""
+
+    tag = "Em"
+
+
+class Kbd(CommonMarginProps, RadixThemesComponent):
+    """Represents keyboard input or a hotkey."""
+
+    tag = "Kbd"
+
+    # Text size: "1" - "9"
+    size: Var[str]
+
+
+class Link(CommonMarginProps, RadixThemesComponent):
+    """A semantic element for navigation between pages."""
+
+    tag = "Link"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    # Text size: "1" - "9"
+    size: Var[str]
+
+    # Thickness of text: "light" | "regular" | "medium" | "bold"
+    weight: Var[str]
+
+    # Removes the leading trim space: "normal" | "start" | "end" | "both"
+    trim: Var[str]
+
+    # Sets the visibility of the underline affordance: "auto" | "hover" | "always"
+    underline: Var[str]
+
+    # Overrides the accent color inherited from the Theme.
+    color: Var[str]
+
+    # Whether to render the text with higher contrast color
+    high_contrast: Var[bool]
+
+
+class Quote(CommonMarginProps, RadixThemesComponent):
+    """A short inline quotation."""
+
+    tag = "Quote"
+
+
+class Strong(CommonMarginProps, RadixThemesComponent):
+    """Marks text to signify strong importance."""
+
+    tag = "Strong"

reflex/components/radix/themes/typography.pyi

@@ -0,0 +1,915 @@
+"""Stub file for typography.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, List, Optional, Union, overload
+from reflex.components.radix.themes.base import CommonMarginProps
+from reflex.components.component import Component
+from reflex.components.radix.themes.base import RadixThemesComponent
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventHandler, EventChain, EventSpec
+from reflex.style import Style
+
+class Text(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        as_: Optional[Union[Var[str], str]] = None,
+        size: Optional[Union[Var[str], str]] = None,
+        weight: Optional[Union[Var[str], str]] = None,
+        align: Optional[Union[Var[str], str]] = None,
+        trim: Optional[Union[Var[str], str]] = None,
+        color: Optional[Union[Var[str], str]] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Text":
+        """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.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
+            size: Text size: "1" - "9"
+            weight: Thickness of text: "light" | "regular" | "medium" | "bold"
+            align: Alignment of text in element: "left" | "center" | "right"
+            trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
+            color: Overrides the accent color inherited from the Theme.
+            high_contrast: Whether to render the text with higher contrast color
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Heading(Text):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        as_: Optional[Union[Var[str], str]] = None,
+        size: Optional[Union[Var[str], str]] = None,
+        weight: Optional[Union[Var[str], str]] = None,
+        align: Optional[Union[Var[str], str]] = None,
+        trim: Optional[Union[Var[str], str]] = None,
+        color: Optional[Union[Var[str], str]] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Heading":
+        """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.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
+            size: Text size: "1" - "9"
+            weight: Thickness of text: "light" | "regular" | "medium" | "bold"
+            align: Alignment of text in element: "left" | "center" | "right"
+            trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
+            color: Overrides the accent color inherited from the Theme.
+            high_contrast: Whether to render the text with higher contrast color
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Blockquote(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[str], str]] = None,
+        weight: Optional[Union[Var[str], str]] = None,
+        color: Optional[Union[Var[str], str]] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Blockquote":
+        """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.
+            size: Text size: "1" - "9"
+            weight: Thickness of text: "light" | "regular" | "medium" | "bold"
+            color: Overrides the accent color inherited from the Theme.
+            high_contrast: Whether to render the text with higher contrast color
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Code(Blockquote):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        variant: Optional[Union[Var[str], str]] = None,
+        size: Optional[Union[Var[str], str]] = None,
+        weight: Optional[Union[Var[str], str]] = None,
+        color: Optional[Union[Var[str], str]] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Code":
+        """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.
+            variant: The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
+            size: Text size: "1" - "9"
+            weight: Thickness of text: "light" | "regular" | "medium" | "bold"
+            color: Overrides the accent color inherited from the Theme.
+            high_contrast: Whether to render the text with higher contrast color
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Em(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Em":
+        """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.
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Kbd(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[str], str]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Kbd":
+        """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.
+            size: Text size: "1" - "9"
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Link(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[Union[Var[str], str]] = None,
+        weight: Optional[Union[Var[str], str]] = None,
+        trim: Optional[Union[Var[str], str]] = None,
+        underline: Optional[Union[Var[str], str]] = None,
+        color: Optional[Union[Var[str], str]] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Link":
+        """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.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
+            size: Text size: "1" - "9"
+            weight: Thickness of text: "light" | "regular" | "medium" | "bold"
+            trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
+            underline: Sets the visibility of the underline affordance: "auto" | "hover" | "always"
+            color: Overrides the accent color inherited from the Theme.
+            high_contrast: Whether to render the text with higher contrast color
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Quote(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Quote":
+        """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.
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class Strong(CommonMarginProps, RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        m: Optional[Union[Var[str], str]] = None,
+        mx: Optional[Union[Var[str], str]] = None,
+        my: Optional[Union[Var[str], str]] = None,
+        mt: Optional[Union[Var[str], str]] = None,
+        mr: Optional[Union[Var[str], str]] = None,
+        mb: Optional[Union[Var[str], str]] = None,
+        ml: Optional[Union[Var[str], str]] = 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, 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
+    ) -> "Strong":
+        """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.
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...

reflex/constants/event.py

@@ -65,6 +65,7 @@ class EventTriggers(SimpleNamespace):
     ON_CHANGE = "on_change"
     ON_CHANGE_END = "on_change_end"
     ON_CHANGE_START = "on_change_start"
+    ON_CHECKED_CHANGE = "on_checked_change"
     ON_COMPLETE = "on_complete"
     ON_CONTEXT_MENU = "on_context_menu"
     ON_DOUBLE_CLICK = "on_double_click"

reflex/constants/installer.py

@@ -102,10 +102,6 @@ class PackageJson(SimpleNamespace):
     PATH = os.path.join(Dirs.WEB, "package.json")
 
     DEPENDENCIES = {
-        "@chakra-ui/react": "2.6.0",
-        "@chakra-ui/system": "2.5.6",
-        "@emotion/react": "11.10.6",
-        "@emotion/styled": "11.10.6",
         "axios": "1.4.0",
         "chakra-react-select": "4.6.0",
         "focus-visible": "5.2.0",
@@ -113,6 +109,7 @@ class PackageJson(SimpleNamespace):
         "json5": "2.2.3",
         "next": "13.5.4",
         "next-sitemap": "4.1.8",
+        "next-themes": "0.2.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "socket.io-client": "4.6.1",

reflex/reflex.py

@@ -119,6 +119,9 @@ def run(
     # Set the log level.
     console.set_log_level(loglevel)
 
+    # Set env mode in the environment
+    os.environ["REFLEX_ENV_MODE"] = env.value
+
     # Show system info
     exec.output_system_info()
 

scripts/pyi_generator.py

@@ -7,7 +7,7 @@ import re
 import sys
 from inspect import getfullargspec
 from pathlib import Path
-from typing import Any, Dict, List, Literal, Optional, Union, get_args  # NOQA
+from typing import Any, Dict, List, Literal, Optional, Set, Union, get_args  # NOQA
 
 import black
 
@@ -50,6 +50,8 @@ from reflex.components.libs.chakra import (
 )
 
 # NOQA
+from reflex.event import EventChain
+from reflex.style import Style
 from reflex.utils import format
 from reflex.utils import types as rx_types
 from reflex.vars import Var
@@ -59,6 +61,8 @@ ruff_dont_remove = [
     Optional,
     Dict,
     List,
+    EventChain,
+    Style,
     LiteralInputVariant,
     LiteralColorScheme,
     LiteralChakraDirection,
@@ -100,7 +104,21 @@ EXCLUDED_FILES = [
     "multiselect.py",
 ]
 
-DEFAULT_TYPING_IMPORTS = {"overload", "Optional", "Union"}
+# These props exist on the base component, but should not be exposed in create methods.
+EXCLUDED_PROPS = [
+    "alias",
+    "children",
+    "event_triggers",
+    "invalid_children",
+    "library",
+    "lib_dependencies",
+    "tag",
+    "is_default",
+    "special_props",
+    "valid_children",
+]
+
+DEFAULT_TYPING_IMPORTS = {"overload", "Any", "Dict", "List", "Optional", "Union"}
 
 
 def _get_type_hint(value, top_level=True, no_union=False):
@@ -186,6 +204,7 @@ class PyiGenerator:
             *[f"from {base.__module__} import {base.__name__}" for base in bases],
             "from reflex.vars import Var, BaseVar, ComputedVar",
             "from reflex.event import EventHandler, EventChain, EventSpec",
+            "from reflex.style import Style",
         ]
 
     def _generate_pyi_class(self, _class: type[Component]):
@@ -194,7 +213,7 @@ class PyiGenerator:
             "",
             f"class {_class.__name__}({', '.join([base.__name__ for base in _class.__bases__])}):",
         ]
-        definition = f"    @overload\n    @classmethod\n    def create(cls, *children, "
+        definition = f"    @overload\n    @classmethod\n    def create(  # type: ignore\n        cls, *children, "
 
         for kwarg in create_spec.kwonlyargs:
             if kwarg in create_spec.annotations:
@@ -202,51 +221,64 @@ class PyiGenerator:
             else:
                 definition += f"{kwarg}, "
 
-        for name, value in _class.__annotations__.items():
-            if name in create_spec.kwonlyargs:
-                continue
-            definition += f"{name}: {_get_type_hint(value)} = None, "
+        all_classes = [c for c in _class.__mro__ if issubclass(c, Component)]
+        all_props = []
+        for target_class in all_classes:
+            for name, value in target_class.__annotations__.items():
+                if (
+                    name in create_spec.kwonlyargs
+                    or name in EXCLUDED_PROPS
+                    or name in all_props
+                ):
+                    continue
+                all_props.append(name)
+                definition += f"{name}: {_get_type_hint(value)} = None, "
 
         for trigger in sorted(_class().get_event_triggers().keys()):
             definition += f"{trigger}: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, "
 
         definition = definition.rstrip(", ")
-        definition += f", **props) -> '{_class.__name__}': # type: ignore\n"
+        definition += f", **props) -> '{_class.__name__}':\n"
 
-        definition += self._generate_docstrings(_class, _class.__annotations__.keys())
+        definition += self._generate_docstrings(all_classes, all_props)
         lines.append(definition)
         lines.append("        ...")
         return lines
 
-    def _generate_docstrings(self, _class, _props):
+    def _generate_docstrings(self, _classes, _props):
         props_comments = {}
         comments = []
-        for _i, line in enumerate(inspect.getsource(_class).splitlines()):
-            reached_functions = re.search("def ", line)
-            if reached_functions:
-                # We've reached the functions, so stop.
-                break
-
-            # Get comments for prop
-            if line.strip().startswith("#"):
-                comments.append(line)
-                continue
-
-            # Check if this line has a prop.
-            match = re.search("\\w+:", line)
-            if match is None:
-                # This line doesn't have a var, so continue.
-                continue
-
-            # Get the prop.
-            prop = match.group(0).strip(":")
-            if prop in _props:
-                # This isn't a prop, so continue.
-                props_comments[prop] = "\n".join(
-                    [comment.strip().strip("#") for comment in comments]
-                )
-                comments.clear()
-                continue
+        for _class in _classes:
+            for _i, line in enumerate(inspect.getsource(_class).splitlines()):
+                reached_functions = re.search("def ", line)
+                if reached_functions:
+                    # We've reached the functions, so stop.
+                    break
+
+                # Get comments for prop
+                if line.strip().startswith("#"):
+                    comments.append(line)
+                    continue
+
+                # Check if this line has a prop.
+                match = re.search("\\w+:", line)
+                if match is None:
+                    # This line doesn't have a var, so continue.
+                    continue
+
+                # Get the prop.
+                prop = match.group(0).strip(":")
+                if prop in _props:
+                    if not comments:  # do not include undocumented props
+                        continue
+                    props_comments[prop] = "\n".join(
+                        [comment.strip().strip("#") for comment in comments]
+                    )
+                    comments.clear()
+                    continue
+                if prop in EXCLUDED_PROPS:
+                    comments.clear()  # throw away comments for excluded props
+        _class = _classes[0]
         new_docstring = []
         for i, line in enumerate(_class.create.__doc__.splitlines()):
             if i == 0:

tests/test_app.py

@@ -3,8 +3,10 @@ from __future__ import annotations
 import io
 import os.path
 import sys
+import unittest.mock
 import uuid
-from typing import List, Tuple, Type
+from pathlib import Path
+from typing import Generator, List, Tuple, Type
 
 if sys.version_info.major >= 3 and sys.version_info.minor > 7:
     from unittest.mock import AsyncMock  # type: ignore
@@ -18,6 +20,7 @@ from starlette_admin.auth import AuthProvider
 from starlette_admin.contrib.sqla.admin import Admin
 from starlette_admin.contrib.sqla.view import ModelView
 
+import reflex.components.radix.themes as rdxt
 from reflex import AdminDash, constants
 from reflex.app import (
     App,
@@ -36,6 +39,7 @@ from reflex.style import Style
 from reflex.utils import format
 from reflex.vars import ComputedVar
 
+from .conftest import chdir
 from .states import (
     ChildFileUploadState,
     FileUploadState,
@@ -1122,3 +1126,105 @@ def test_overlay_component(
         assert exp_page_child in children_types
     else:
         assert len(page.children) == 2
+
+
+@pytest.fixture
+def compilable_app(tmp_path) -> Generator[tuple[App, Path], None, None]:
+    """Fixture for an app that can be compiled.
+
+    Args:
+        tmp_path: Temporary path.
+
+    Yields:
+        Tuple containing (app instance, Path to ".web" directory)
+
+        The working directory is set to the app dir (parent of .web),
+        allowing app.compile() to be called.
+    """
+    app_path = tmp_path / "app"
+    web_dir = app_path / ".web"
+    web_dir.mkdir(parents=True)
+    (web_dir / "package.json").touch()
+    app = App()
+    app.get_frontend_packages = unittest.mock.Mock()
+    with chdir(app_path):
+        yield app, web_dir
+
+
+def test_app_wrap_compile_theme(compilable_app):
+    """Test that the radix theme component wraps the app.
+
+    Args:
+        compilable_app: compilable_app fixture.
+    """
+    app, web_dir = compilable_app
+    app.theme = rdxt.theme(accent_color="plum")
+    app.compile()
+    app_js_contents = (web_dir / "pages" / "_app.js").read_text()
+    app_js_lines = [
+        line.strip() for line in app_js_contents.splitlines() if line.strip()
+    ]
+    assert (
+        "function AppWrap({children}) {"
+        "return ("
+        "<RadixThemesTheme accentColor={`plum`}>"
+        "{children}"
+        "</RadixThemesTheme>"
+        ")"
+        "}"
+    ) in "".join(app_js_lines)
+
+
+def test_app_wrap_priority(compilable_app):
+    """Test that the app wrap components are wrapped in the correct order.
+
+    Args:
+        compilable_app: compilable_app fixture.
+    """
+    app, web_dir = compilable_app
+
+    class Fragment1(Component):
+        tag = "Fragment1"
+
+        def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
+            return {(99, "Box"): Box.create()}
+
+    class Fragment2(Component):
+        tag = "Fragment2"
+
+        def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
+            return {(50, "Text"): Text.create()}
+
+    class Fragment3(Component):
+        tag = "Fragment3"
+
+        def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
+            return {(10, "Fragment2"): Fragment2.create()}
+
+    def page():
+        return Fragment1.create(Fragment3.create())
+
+    app.add_page(page)
+    app.compile()
+    app_js_contents = (web_dir / "pages" / "_app.js").read_text()
+    app_js_lines = [
+        line.strip() for line in app_js_contents.splitlines() if line.strip()
+    ]
+    assert (
+        "function AppWrap({children}) {"
+        "return ("
+        "<Box>"
+        "<ChakraProvider theme={extendTheme(theme)}>"
+        "<Global styles={GlobalStyles}/>"
+        "<ChakraColorModeProvider>"
+        "<Text>"
+        "<Fragment2>"
+        "{children}"
+        "</Fragment2>"
+        "</Text>"
+        "</ChakraColorModeProvider>"
+        "</ChakraProvider>"
+        "</Box>"
+        ")"
+        "}"
+    ) in "".join(app_js_lines)