diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a91ef2175d..7aae05f48d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -79,3 +79,14 @@ pre-commit install
```
That's it you can now submit your PR. Thanks for contributing to Reflex!
+
+
+## Other Notes
+
+For some pull requests when adding new components you will have to generate a pyi file for the new component. This is done by running the following command in the `reflex` directory.
+
+(Please check in with the team before adding a new component to Reflex we are cautious about adding new components to Reflex's core.)
+
+``` bash
+poetry run python scripts/pyi_generator.py
+```
\ No newline at end of file
diff --git a/reflex/__init__.py b/reflex/__init__.py
index dd11b73f47..3db45143a9 100644
--- a/reflex/__init__.py
+++ b/reflex/__init__.py
@@ -255,7 +255,7 @@
"reflex.components.graphing": ["recharts"],
"reflex.config": ["config", "Config", "DBConfig"],
"reflex.constants": ["constants", "Env"],
- "reflex.el": ["el"],
+ "reflex.components.el": ["el"],
"reflex.event": [
"event",
"EventChain",
diff --git a/reflex/__init__.pyi b/reflex/__init__.pyi
index 1b5d64d9bc..bf11c6bab1 100644
--- a/reflex/__init__.pyi
+++ b/reflex/__init__.pyi
@@ -447,7 +447,7 @@ from reflex.config import Config as Config
from reflex.config import DBConfig as DBConfig
from reflex import constants as constants
from reflex.constants import Env as Env
-from reflex import el as el
+from reflex.components import el as el
from reflex import event as event
from reflex.event import EventChain as EventChain
from reflex.event import background as background
diff --git a/reflex/components/datadisplay/dataeditor.py b/reflex/components/datadisplay/dataeditor.py
index ecef03b385..408218c77a 100644
--- a/reflex/components/datadisplay/dataeditor.py
+++ b/reflex/components/datadisplay/dataeditor.py
@@ -283,7 +283,7 @@ def create(cls, *children, **props) -> Component:
Returns:
The DataEditor component.&
"""
- from reflex.el.elements import Div
+ from reflex.components.el import Div
columns = props.get("columns", [])
data = props.get("data", [])
@@ -339,7 +339,7 @@ def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
Returns:
The app wrap components.
"""
- from reflex.el.elements import Div
+ from reflex.components.el import Div
class Portal(Div):
def get_ref(self):
diff --git a/reflex/el/__init__.py b/reflex/components/el/__init__.py
similarity index 100%
rename from reflex/el/__init__.py
rename to reflex/components/el/__init__.py
diff --git a/reflex/el/constants/__init__.py b/reflex/components/el/constants/__init__.py
similarity index 100%
rename from reflex/el/constants/__init__.py
rename to reflex/components/el/constants/__init__.py
diff --git a/reflex/el/constants/html.py b/reflex/components/el/constants/html.py
similarity index 100%
rename from reflex/el/constants/html.py
rename to reflex/components/el/constants/html.py
diff --git a/reflex/el/constants/react.py b/reflex/components/el/constants/react.py
similarity index 100%
rename from reflex/el/constants/react.py
rename to reflex/components/el/constants/react.py
diff --git a/reflex/el/constants/reflex.py b/reflex/components/el/constants/reflex.py
similarity index 100%
rename from reflex/el/constants/reflex.py
rename to reflex/components/el/constants/reflex.py
diff --git a/reflex/el/element.py b/reflex/components/el/element.py
similarity index 100%
rename from reflex/el/element.py
rename to reflex/components/el/element.py
diff --git a/reflex/components/el/element.pyi b/reflex/components/el/element.pyi
new file mode 100644
index 0000000000..33546a9fe4
--- /dev/null
+++ b/reflex/components/el/element.pyi
@@ -0,0 +1,91 @@
+"""Stub file for reflex/components/el/element.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Dict
+from reflex.components.component import Component
+
+class Element(Component):
+ def render(self) -> Dict: ...
+ @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
+ ) -> "Element":
+ """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.
+ """
+ ...
diff --git a/reflex/components/el/elements/__init__.py b/reflex/components/el/elements/__init__.py
new file mode 100644
index 0000000000..eefdbc0502
--- /dev/null
+++ b/reflex/components/el/elements/__init__.py
@@ -0,0 +1,226 @@
+"""Element classes."""
+from .forms import (
+ Button,
+ Fieldset,
+ Form,
+ Input,
+ Label,
+ Legend,
+ Meter,
+ Optgroup,
+ Option,
+ Output,
+ Progress,
+ Select,
+ Textarea,
+)
+from .inline import (
+ A,
+ Abbr,
+ B,
+ Bdi,
+ Bdo,
+ Br,
+ Cite,
+ Code,
+ Data,
+ Dfn,
+ Em,
+ I,
+ Kbd,
+ Mark,
+ Q,
+ Rp,
+ Rt,
+ Ruby,
+ S,
+ Samp,
+ Small,
+ Span,
+ Strong,
+ Sub,
+ Sup,
+ Time,
+ U,
+ Wbr,
+)
+from .media import (
+ Area,
+ Audio,
+ Embed,
+ Iframe,
+ Img,
+ Map,
+ Object,
+ Path,
+ Picture,
+ Portal,
+ Source,
+ Svg,
+ Track,
+ Video,
+)
+from .metadata import Base, Head, Link, Meta, Title
+from .other import Details, Dialog, Html, Math, Slot, Summary, Template
+from .scripts import Canvas, Noscript, Script
+from .sectioning import (
+ H1,
+ H2,
+ H3,
+ H4,
+ H5,
+ H6,
+ Address,
+ Article,
+ Aside,
+ Body,
+ Footer,
+ Header,
+ Main,
+ Nav,
+ Section,
+)
+from .tables import Caption, Col, Colgroup, Table, Tbody, Td, Tfoot, Th, Thead, Tr
+from .typography import (
+ Blockquote,
+ Dd,
+ Del,
+ Div,
+ Dl,
+ Dt,
+ Figcaption,
+ Hr,
+ Ins,
+ Li,
+ Ol,
+ P,
+ Pre,
+ Ul,
+)
+
+# Forms
+button = Button.create
+fieldset = Fieldset.create
+form = Form.create
+input = Input.create
+label = Label.create
+legend = Legend.create
+meter = Meter.create
+optgroup = Optgroup.create
+option = Option.create
+output = Output.create
+progress = Progress.create
+select = Select.create
+textarea = Textarea.create
+
+# Tables
+caption = Caption.create
+col = Col.create
+colgroup = Colgroup.create
+table = Table.create
+tbody = Tbody.create
+td = Td.create
+tfoot = Tfoot.create
+th = Th.create
+thead = Thead.create
+tr = Tr.create
+
+# Media
+area = Area.create
+audio = Audio.create
+img = Img.create
+map = Map.create
+track = Track.create
+video = Video.create
+embed = Embed.create
+iframe = Iframe.create
+object = Object.create
+picture = Picture.create
+portal = Portal.create
+source = Source.create
+svg = Svg.create
+path = Path.create
+
+# Sectioning
+address = Address.create
+article = Article.create
+aside = Aside.create
+body = Body.create
+footer = Footer.create
+
+# Typography
+blockquote = Blockquote.create
+dd = Dd.create
+div = Div.create
+dl = Dl.create
+dt = Dt.create
+figcaption = Figcaption.create
+hr = Hr.create
+li = Li.create
+ol = Ol.create
+p = P.create
+pre = Pre.create
+ul = Ul.create
+ins = Ins.create
+del_ = Del.create # 'del' is a reserved keyword in Python
+h1 = H1.create
+h2 = H2.create
+h3 = H3.create
+h4 = H4.create
+h5 = H5.create
+h6 = H6.create
+main = Main.create
+nav = Nav.create
+section = Section.create
+
+# Inline
+a = A.create
+abbr = Abbr.create
+b = B.create
+bdi = Bdi.create
+bdo = Bdo.create
+br = Br.create
+cite = Cite.create
+code = Code.create
+data = Data.create
+dfn = Dfn.create
+em = Em.create
+i = I.create
+kbd = Kbd.create
+mark = Mark.create
+q = Q.create
+rp = Rp.create
+rt = Rt.create
+ruby = Ruby.create
+s = S.create
+samp = Samp.create
+small = Small.create
+span = Span.create
+strong = Strong.create
+sub = Sub.create
+sup = Sup.create
+time = Time.create
+u = U.create
+wbr = Wbr.create
+
+# Metadata
+base = Base.create
+head = Head.create
+link = Link.create
+meta = Meta.create
+title = Title.create
+
+# Scripts
+canvas = Canvas.create
+noscript = Noscript.create
+script = Script.create
+
+# Other
+details = Details.create
+dialog = Dialog.create
+summary = Summary.create
+slot = Slot.create
+template = Template.create
+svg = Svg.create
+math = Math.create
+html = Html.create
diff --git a/reflex/components/el/elements/base.py b/reflex/components/el/elements/base.py
new file mode 100644
index 0000000000..207f980079
--- /dev/null
+++ b/reflex/components/el/elements/base.py
@@ -0,0 +1,60 @@
+"""Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
+from typing import Union
+
+from reflex.components.el.element import Element
+from reflex.vars import Var as Var
+
+
+class BaseHTML(Element):
+ """Base class for common attributes."""
+
+ # Provides a hint for generating a keyboard shortcut for the current element.
+ access_key: Var[Union[str, int, bool]]
+
+ # Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+ auto_capitalize: Var[Union[str, int, bool]]
+
+ # Indicates whether the element's content is editable.
+ content_editable: Var[Union[str, int, bool]]
+
+ # Defines the ID of a