diff --git a/integration/test_event_actions.py b/integration/test_event_actions.py
index da444a5cf..15de5cbaa 100644
--- a/integration/test_event_actions.py
+++ b/integration/test_event_actions.py
@@ -25,7 +25,7 @@ def TestEventAction():
     class EventFiringComponent(rx.Component):
         """A component that fires onClick event without passing DOM event."""
 
-        tag = "EventFiringComponent"
+        tag: str = "EventFiringComponent"
 
         def _get_custom_code(self) -> str | None:
             return """
diff --git a/poetry.lock b/poetry.lock
index 44cd29146..d0cd21a97 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -22,25 +22,39 @@ typing-extensions = ">=4"
 tz = ["backports.zoneinfo"]
 
 [[package]]
-name = "anyio"
-version = "4.1.0"
-description = "High level compatibility layer for multiple asynchronous event loop implementations"
+name = "annotated-types"
+version = "0.6.0"
+description = "Reusable constraint types to use with typing.Annotated"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "anyio-4.1.0-py3-none-any.whl", hash = "sha256:56a415fbc462291813a94528a779597226619c8e78af7de0507333f700011e5f"},
-    {file = "anyio-4.1.0.tar.gz", hash = "sha256:5a0bec7085176715be77df87fc66d6c9d70626bd752fcc85f57cdbee5b3760da"},
+    {file = "annotated_types-0.6.0-py3-none-any.whl", hash = "sha256:0641064de18ba7a25dee8f96403ebc39113d0cb953a01429249d5c7564666a43"},
+    {file = "annotated_types-0.6.0.tar.gz", hash = "sha256:563339e807e53ffd9c267e99fc6d9ea23eb8443c08f112651963e24e22f84a5d"},
 ]
 
 [package.dependencies]
-exceptiongroup = {version = ">=1.0.2", markers = "python_version < \"3.11\""}
+typing-extensions = {version = ">=4.0.0", markers = "python_version < \"3.9\""}
+
+[[package]]
+name = "anyio"
+version = "3.7.1"
+description = "High level compatibility layer for multiple asynchronous event loop implementations"
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "anyio-3.7.1-py3-none-any.whl", hash = "sha256:91dee416e570e92c64041bd18b900d1d6fa78dff7048769ce5ac5ddad004fbb5"},
+    {file = "anyio-3.7.1.tar.gz", hash = "sha256:44a3c9aba0f5defa43261a8b3efb97891f2bd7d804e0e1f56419befa1adfc780"},
+]
+
+[package.dependencies]
+exceptiongroup = {version = "*", markers = "python_version < \"3.11\""}
 idna = ">=2.8"
 sniffio = ">=1.1"
 
 [package.extras]
-doc = ["Sphinx (>=7)", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme"]
-test = ["anyio[trio]", "coverage[toml] (>=7)", "exceptiongroup (>=1.2.0)", "hypothesis (>=4.0)", "psutil (>=5.9)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "uvloop (>=0.17)"]
-trio = ["trio (>=0.23)"]
+doc = ["Sphinx", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme (>=1.2.2)", "sphinxcontrib-jquery"]
+test = ["anyio[trio]", "coverage[toml] (>=4.5)", "hypothesis (>=4.0)", "mock (>=4)", "psutil (>=5.9)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "uvloop (>=0.17)"]
+trio = ["trio (<0.22)"]
 
 [[package]]
 name = "async-timeout"
@@ -480,24 +494,23 @@ test = ["pytest (>=6)"]
 
 [[package]]
 name = "fastapi"
-version = "0.96.1"
+version = "0.105.0"
 description = "FastAPI framework, high performance, easy to learn, fast to code, ready for production"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "fastapi-0.96.1-py3-none-any.whl", hash = "sha256:22d773ce95f14f04f8f37a0c8998fc163e67af83b65510d2879de6cbaaa10215"},
-    {file = "fastapi-0.96.1.tar.gz", hash = "sha256:5c1d243030e63089ccfc0aec69c2da6d619943917727e8e82ee502358d5119bf"},
+    {file = "fastapi-0.105.0-py3-none-any.whl", hash = "sha256:f19ebf6fdc82a3281d10f2cb4774bdfa90238e3b40af3525a0c09fd08ad1c480"},
+    {file = "fastapi-0.105.0.tar.gz", hash = "sha256:4d12838819aa52af244580675825e750ad67c9df4614f557a769606af902cf22"},
 ]
 
 [package.dependencies]
-pydantic = ">=1.7.4,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0"
+anyio = ">=3.7.1,<4.0.0"
+pydantic = ">=1.7.4,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0 || >2.0.0,<2.0.1 || >2.0.1,<2.1.0 || >2.1.0,<3.0.0"
 starlette = ">=0.27.0,<0.28.0"
+typing-extensions = ">=4.8.0"
 
 [package.extras]
-all = ["email-validator (>=1.1.1)", "httpx (>=0.23.0)", "itsdangerous (>=1.1.0)", "jinja2 (>=2.11.2)", "orjson (>=3.2.1)", "python-multipart (>=0.0.5)", "pyyaml (>=5.3.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0)", "uvicorn[standard] (>=0.12.0)"]
-dev = ["pre-commit (>=2.17.0,<3.0.0)", "ruff (==0.0.138)", "uvicorn[standard] (>=0.12.0,<0.21.0)"]
-doc = ["mdx-include (>=1.4.1,<2.0.0)", "mkdocs (>=1.1.2,<2.0.0)", "mkdocs-markdownextradata-plugin (>=0.1.7,<0.3.0)", "mkdocs-material (>=8.1.4,<9.0.0)", "pyyaml (>=5.3.1,<7.0.0)", "typer-cli (>=0.0.13,<0.0.14)", "typer[all] (>=0.6.1,<0.8.0)"]
-test = ["anyio[trio] (>=3.2.1,<4.0.0)", "black (==23.1.0)", "coverage[toml] (>=6.5.0,<8.0)", "databases[sqlite] (>=0.3.2,<0.7.0)", "email-validator (>=1.1.1,<2.0.0)", "flask (>=1.1.2,<3.0.0)", "httpx (>=0.23.0,<0.24.0)", "isort (>=5.0.6,<6.0.0)", "mypy (==0.982)", "orjson (>=3.2.1,<4.0.0)", "passlib[bcrypt] (>=1.7.2,<2.0.0)", "peewee (>=3.13.3,<4.0.0)", "pytest (>=7.1.3,<8.0.0)", "python-jose[cryptography] (>=3.3.0,<4.0.0)", "python-multipart (>=0.0.5,<0.0.7)", "pyyaml (>=5.3.1,<7.0.0)", "ruff (==0.0.138)", "sqlalchemy (>=1.3.18,<1.4.43)", "types-orjson (==3.6.2)", "types-ujson (==5.7.0.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0,<6.0.0)"]
+all = ["email-validator (>=2.0.0)", "httpx (>=0.23.0)", "itsdangerous (>=1.1.0)", "jinja2 (>=2.11.2)", "orjson (>=3.2.1)", "pydantic-extra-types (>=2.0.0)", "pydantic-settings (>=2.0.0)", "python-multipart (>=0.0.5)", "pyyaml (>=5.3.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0)", "uvicorn[standard] (>=0.12.0)"]
 
 [[package]]
 name = "filelock"
@@ -1331,55 +1344,139 @@ files = [
 
 [[package]]
 name = "pydantic"
-version = "1.10.13"
-description = "Data validation and settings management using python type hints"
+version = "2.5.2"
+description = "Data validation using Python type hints"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "pydantic-1.10.13-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:efff03cc7a4f29d9009d1c96ceb1e7a70a65cfe86e89d34e4a5f2ab1e5693737"},
-    {file = "pydantic-1.10.13-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:3ecea2b9d80e5333303eeb77e180b90e95eea8f765d08c3d278cd56b00345d01"},
-    {file = "pydantic-1.10.13-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1740068fd8e2ef6eb27a20e5651df000978edce6da6803c2bef0bc74540f9548"},
-    {file = "pydantic-1.10.13-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:84bafe2e60b5e78bc64a2941b4c071a4b7404c5c907f5f5a99b0139781e69ed8"},
-    {file = "pydantic-1.10.13-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:bc0898c12f8e9c97f6cd44c0ed70d55749eaf783716896960b4ecce2edfd2d69"},
-    {file = "pydantic-1.10.13-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:654db58ae399fe6434e55325a2c3e959836bd17a6f6a0b6ca8107ea0571d2e17"},
-    {file = "pydantic-1.10.13-cp310-cp310-win_amd64.whl", hash = "sha256:75ac15385a3534d887a99c713aa3da88a30fbd6204a5cd0dc4dab3d770b9bd2f"},
-    {file = "pydantic-1.10.13-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:c553f6a156deb868ba38a23cf0df886c63492e9257f60a79c0fd8e7173537653"},
-    {file = "pydantic-1.10.13-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:5e08865bc6464df8c7d61439ef4439829e3ab62ab1669cddea8dd00cd74b9ffe"},
-    {file = "pydantic-1.10.13-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e31647d85a2013d926ce60b84f9dd5300d44535a9941fe825dc349ae1f760df9"},
-    {file = "pydantic-1.10.13-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:210ce042e8f6f7c01168b2d84d4c9eb2b009fe7bf572c2266e235edf14bacd80"},
-    {file = "pydantic-1.10.13-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:8ae5dd6b721459bfa30805f4c25880e0dd78fc5b5879f9f7a692196ddcb5a580"},
-    {file = "pydantic-1.10.13-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:f8e81fc5fb17dae698f52bdd1c4f18b6ca674d7068242b2aff075f588301bbb0"},
-    {file = "pydantic-1.10.13-cp311-cp311-win_amd64.whl", hash = "sha256:61d9dce220447fb74f45e73d7ff3b530e25db30192ad8d425166d43c5deb6df0"},
-    {file = "pydantic-1.10.13-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:4b03e42ec20286f052490423682016fd80fda830d8e4119f8ab13ec7464c0132"},
-    {file = "pydantic-1.10.13-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f59ef915cac80275245824e9d771ee939133be38215555e9dc90c6cb148aaeb5"},
-    {file = "pydantic-1.10.13-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:5a1f9f747851338933942db7af7b6ee8268568ef2ed86c4185c6ef4402e80ba8"},
-    {file = "pydantic-1.10.13-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:97cce3ae7341f7620a0ba5ef6cf043975cd9d2b81f3aa5f4ea37928269bc1b87"},
-    {file = "pydantic-1.10.13-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:854223752ba81e3abf663d685f105c64150873cc6f5d0c01d3e3220bcff7d36f"},
-    {file = "pydantic-1.10.13-cp37-cp37m-win_amd64.whl", hash = "sha256:b97c1fac8c49be29486df85968682b0afa77e1b809aff74b83081cc115e52f33"},
-    {file = "pydantic-1.10.13-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:c958d053453a1c4b1c2062b05cd42d9d5c8eb67537b8d5a7e3c3032943ecd261"},
-    {file = "pydantic-1.10.13-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:4c5370a7edaac06daee3af1c8b1192e305bc102abcbf2a92374b5bc793818599"},
-    {file = "pydantic-1.10.13-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7d6f6e7305244bddb4414ba7094ce910560c907bdfa3501e9db1a7fd7eaea127"},
-    {file = "pydantic-1.10.13-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d3a3c792a58e1622667a2837512099eac62490cdfd63bd407993aaf200a4cf1f"},
-    {file = "pydantic-1.10.13-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:c636925f38b8db208e09d344c7aa4f29a86bb9947495dd6b6d376ad10334fb78"},
-    {file = "pydantic-1.10.13-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:678bcf5591b63cc917100dc50ab6caebe597ac67e8c9ccb75e698f66038ea953"},
-    {file = "pydantic-1.10.13-cp38-cp38-win_amd64.whl", hash = "sha256:6cf25c1a65c27923a17b3da28a0bdb99f62ee04230c931d83e888012851f4e7f"},
-    {file = "pydantic-1.10.13-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:8ef467901d7a41fa0ca6db9ae3ec0021e3f657ce2c208e98cd511f3161c762c6"},
-    {file = "pydantic-1.10.13-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:968ac42970f57b8344ee08837b62f6ee6f53c33f603547a55571c954a4225691"},
-    {file = "pydantic-1.10.13-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9849f031cf8a2f0a928fe885e5a04b08006d6d41876b8bbd2fc68a18f9f2e3fd"},
-    {file = "pydantic-1.10.13-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:56e3ff861c3b9c6857579de282ce8baabf443f42ffba355bf070770ed63e11e1"},
-    {file = "pydantic-1.10.13-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:9f00790179497767aae6bcdc36355792c79e7bbb20b145ff449700eb076c5f96"},
-    {file = "pydantic-1.10.13-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:75b297827b59bc229cac1a23a2f7a4ac0031068e5be0ce385be1462e7e17a35d"},
-    {file = "pydantic-1.10.13-cp39-cp39-win_amd64.whl", hash = "sha256:e70ca129d2053fb8b728ee7d1af8e553a928d7e301a311094b8a0501adc8763d"},
-    {file = "pydantic-1.10.13-py3-none-any.whl", hash = "sha256:b87326822e71bd5f313e7d3bfdc77ac3247035ac10b0c0618bd99dcf95b1e687"},
-    {file = "pydantic-1.10.13.tar.gz", hash = "sha256:32c8b48dcd3b2ac4e78b0ba4af3a2c2eb6048cb75202f0ea7b34feb740efc340"},
+    {file = "pydantic-2.5.2-py3-none-any.whl", hash = "sha256:80c50fb8e3dcecfddae1adbcc00ec5822918490c99ab31f6cf6140ca1c1429f0"},
+    {file = "pydantic-2.5.2.tar.gz", hash = "sha256:ff177ba64c6faf73d7afa2e8cad38fd456c0dbe01c9954e71038001cd15a6edd"},
 ]
 
 [package.dependencies]
-typing-extensions = ">=4.2.0"
+annotated-types = ">=0.4.0"
+pydantic-core = "2.14.5"
+typing-extensions = ">=4.6.1"
 
 [package.extras]
-dotenv = ["python-dotenv (>=0.10.4)"]
-email = ["email-validator (>=1.0.3)"]
+email = ["email-validator (>=2.0.0)"]
+
+[[package]]
+name = "pydantic-core"
+version = "2.14.5"
+description = ""
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "pydantic_core-2.14.5-cp310-cp310-macosx_10_7_x86_64.whl", hash = "sha256:7e88f5696153dc516ba6e79f82cc4747e87027205f0e02390c21f7cb3bd8abfd"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:4641e8ad4efb697f38a9b64ca0523b557c7931c5f84e0fd377a9a3b05121f0de"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:774de879d212db5ce02dfbf5b0da9a0ea386aeba12b0b95674a4ce0593df3d07"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:ebb4e035e28f49b6f1a7032920bb9a0c064aedbbabe52c543343d39341a5b2a3"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:b53e9ad053cd064f7e473a5f29b37fc4cc9dc6d35f341e6afc0155ea257fc911"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:8aa1768c151cf562a9992462239dfc356b3d1037cc5a3ac829bb7f3bda7cc1f9"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:eac5c82fc632c599f4639a5886f96867ffced74458c7db61bc9a66ccb8ee3113"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:d2ae91f50ccc5810b2f1b6b858257c9ad2e08da70bf890dee02de1775a387c66"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:6b9ff467ffbab9110e80e8c8de3bcfce8e8b0fd5661ac44a09ae5901668ba997"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:61ea96a78378e3bd5a0be99b0e5ed00057b71f66115f5404d0dae4819f495093"},
+    {file = "pydantic_core-2.14.5-cp310-none-win32.whl", hash = "sha256:bb4c2eda937a5e74c38a41b33d8c77220380a388d689bcdb9b187cf6224c9720"},
+    {file = "pydantic_core-2.14.5-cp310-none-win_amd64.whl", hash = "sha256:b7851992faf25eac90bfcb7bfd19e1f5ffa00afd57daec8a0042e63c74a4551b"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-macosx_10_7_x86_64.whl", hash = "sha256:4e40f2bd0d57dac3feb3a3aed50f17d83436c9e6b09b16af271b6230a2915459"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:ab1cdb0f14dc161ebc268c09db04d2c9e6f70027f3b42446fa11c153521c0e88"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:aae7ea3a1c5bb40c93cad361b3e869b180ac174656120c42b9fadebf685d121b"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:60b7607753ba62cf0739177913b858140f11b8af72f22860c28eabb2f0a61937"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:2248485b0322c75aee7565d95ad0e16f1c67403a470d02f94da7344184be770f"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:823fcc638f67035137a5cd3f1584a4542d35a951c3cc68c6ead1df7dac825c26"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:96581cfefa9123accc465a5fd0cc833ac4d75d55cc30b633b402e00e7ced00a6"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:a33324437018bf6ba1bb0f921788788641439e0ed654b233285b9c69704c27b4"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:9bd18fee0923ca10f9a3ff67d4851c9d3e22b7bc63d1eddc12f439f436f2aada"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:853a2295c00f1d4429db4c0fb9475958543ee80cfd310814b5c0ef502de24dda"},
+    {file = "pydantic_core-2.14.5-cp311-none-win32.whl", hash = "sha256:cb774298da62aea5c80a89bd58c40205ab4c2abf4834453b5de207d59d2e1651"},
+    {file = "pydantic_core-2.14.5-cp311-none-win_amd64.whl", hash = "sha256:e87fc540c6cac7f29ede02e0f989d4233f88ad439c5cdee56f693cc9c1c78077"},
+    {file = "pydantic_core-2.14.5-cp311-none-win_arm64.whl", hash = "sha256:57d52fa717ff445cb0a5ab5237db502e6be50809b43a596fb569630c665abddf"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-macosx_10_7_x86_64.whl", hash = "sha256:e60f112ac88db9261ad3a52032ea46388378034f3279c643499edb982536a093"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:6e227c40c02fd873c2a73a98c1280c10315cbebe26734c196ef4514776120aeb"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f0cbc7fff06a90bbd875cc201f94ef0ee3929dfbd5c55a06674b60857b8b85ed"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:103ef8d5b58596a731b690112819501ba1db7a36f4ee99f7892c40da02c3e189"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:c949f04ecad823f81b1ba94e7d189d9dfb81edbb94ed3f8acfce41e682e48cef"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:c1452a1acdf914d194159439eb21e56b89aa903f2e1c65c60b9d874f9b950e5d"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:cb4679d4c2b089e5ef89756bc73e1926745e995d76e11925e3e96a76d5fa51fc"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:cf9d3fe53b1ee360e2421be95e62ca9b3296bf3f2fb2d3b83ca49ad3f925835e"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:70f4b4851dbb500129681d04cc955be2a90b2248d69273a787dda120d5cf1f69"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:59986de5710ad9613ff61dd9b02bdd2f615f1a7052304b79cc8fa2eb4e336d2d"},
+    {file = "pydantic_core-2.14.5-cp312-none-win32.whl", hash = "sha256:699156034181e2ce106c89ddb4b6504c30db8caa86e0c30de47b3e0654543260"},
+    {file = "pydantic_core-2.14.5-cp312-none-win_amd64.whl", hash = "sha256:5baab5455c7a538ac7e8bf1feec4278a66436197592a9bed538160a2e7d11e36"},
+    {file = "pydantic_core-2.14.5-cp312-none-win_arm64.whl", hash = "sha256:e47e9a08bcc04d20975b6434cc50bf82665fbc751bcce739d04a3120428f3e27"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-macosx_10_7_x86_64.whl", hash = "sha256:af36f36538418f3806048f3b242a1777e2540ff9efaa667c27da63d2749dbce0"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-macosx_11_0_arm64.whl", hash = "sha256:45e95333b8418ded64745f14574aa9bfc212cb4fbeed7a687b0c6e53b5e188cd"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4e47a76848f92529879ecfc417ff88a2806438f57be4a6a8bf2961e8f9ca9ec7"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:d81e6987b27bc7d101c8597e1cd2bcaa2fee5e8e0f356735c7ed34368c471550"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:34708cc82c330e303f4ce87758828ef6e457681b58ce0e921b6e97937dd1e2a3"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:652c1988019752138b974c28f43751528116bcceadad85f33a258869e641d753"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6e4d090e73e0725b2904fdbdd8d73b8802ddd691ef9254577b708d413bf3006e"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:5c7d5b5005f177764e96bd584d7bf28d6e26e96f2a541fdddb934c486e36fd59"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:a71891847f0a73b1b9eb86d089baee301477abef45f7eaf303495cd1473613e4"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:a717aef6971208f0851a2420b075338e33083111d92041157bbe0e2713b37325"},
+    {file = "pydantic_core-2.14.5-cp37-none-win32.whl", hash = "sha256:de790a3b5aa2124b8b78ae5faa033937a72da8efe74b9231698b5a1dd9be3405"},
+    {file = "pydantic_core-2.14.5-cp37-none-win_amd64.whl", hash = "sha256:6c327e9cd849b564b234da821236e6bcbe4f359a42ee05050dc79d8ed2a91588"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-macosx_10_7_x86_64.whl", hash = "sha256:ef98ca7d5995a82f43ec0ab39c4caf6a9b994cb0b53648ff61716370eadc43cf"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:c6eae413494a1c3f89055da7a5515f32e05ebc1a234c27674a6956755fb2236f"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:dcf4e6d85614f7a4956c2de5a56531f44efb973d2fe4a444d7251df5d5c4dcfd"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:6637560562134b0e17de333d18e69e312e0458ee4455bdad12c37100b7cad706"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:77fa384d8e118b3077cccfcaf91bf83c31fe4dc850b5e6ee3dc14dc3d61bdba1"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:16e29bad40bcf97aac682a58861249ca9dcc57c3f6be22f506501833ddb8939c"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:531f4b4252fac6ca476fbe0e6f60f16f5b65d3e6b583bc4d87645e4e5ddde331"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:074f3d86f081ce61414d2dc44901f4f83617329c6f3ab49d2bc6c96948b2c26b"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:c2adbe22ab4babbca99c75c5d07aaf74f43c3195384ec07ccbd2f9e3bddaecec"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:0f6116a558fd06d1b7c2902d1c4cf64a5bd49d67c3540e61eccca93f41418124"},
+    {file = "pydantic_core-2.14.5-cp38-none-win32.whl", hash = "sha256:fe0a5a1025eb797752136ac8b4fa21aa891e3d74fd340f864ff982d649691867"},
+    {file = "pydantic_core-2.14.5-cp38-none-win_amd64.whl", hash = "sha256:079206491c435b60778cf2b0ee5fd645e61ffd6e70c47806c9ed51fc75af078d"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-macosx_10_7_x86_64.whl", hash = "sha256:a6a16f4a527aae4f49c875da3cdc9508ac7eef26e7977952608610104244e1b7"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:abf058be9517dc877227ec3223f0300034bd0e9f53aebd63cf4456c8cb1e0863"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:49b08aae5013640a3bfa25a8eebbd95638ec3f4b2eaf6ed82cf0c7047133f03b"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:c2d97e906b4ff36eb464d52a3bc7d720bd6261f64bc4bcdbcd2c557c02081ed2"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:3128e0bbc8c091ec4375a1828d6118bc20404883169ac95ffa8d983b293611e6"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:88e74ab0cdd84ad0614e2750f903bb0d610cc8af2cc17f72c28163acfcf372a4"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c339dabd8ee15f8259ee0f202679b6324926e5bc9e9a40bf981ce77c038553db"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:3387277f1bf659caf1724e1afe8ee7dbc9952a82d90f858ebb931880216ea955"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:ba6b6b3846cfc10fdb4c971980a954e49d447cd215ed5a77ec8190bc93dd7bc5"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:ca61d858e4107ce5e1330a74724fe757fc7135190eb5ce5c9d0191729f033209"},
+    {file = "pydantic_core-2.14.5-cp39-none-win32.whl", hash = "sha256:ec1e72d6412f7126eb7b2e3bfca42b15e6e389e1bc88ea0069d0cc1742f477c6"},
+    {file = "pydantic_core-2.14.5-cp39-none-win_amd64.whl", hash = "sha256:c0b97ec434041827935044bbbe52b03d6018c2897349670ff8fe11ed24d1d4ab"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-macosx_10_7_x86_64.whl", hash = "sha256:79e0a2cdbdc7af3f4aee3210b1172ab53d7ddb6a2d8c24119b5706e622b346d0"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-macosx_11_0_arm64.whl", hash = "sha256:678265f7b14e138d9a541ddabbe033012a2953315739f8cfa6d754cc8063e8ca"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:95b15e855ae44f0c6341ceb74df61b606e11f1087e87dcb7482377374aac6abe"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:09b0e985fbaf13e6b06a56d21694d12ebca6ce5414b9211edf6f17738d82b0f8"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:3ad873900297bb36e4b6b3f7029d88ff9829ecdc15d5cf20161775ce12306f8a"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:2d0ae0d8670164e10accbeb31d5ad45adb71292032d0fdb9079912907f0085f4"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:d37f8ec982ead9ba0a22a996129594938138a1503237b87318392a48882d50b7"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-win_amd64.whl", hash = "sha256:35613015f0ba7e14c29ac6c2483a657ec740e5ac5758d993fdd5870b07a61d8b"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-macosx_10_7_x86_64.whl", hash = "sha256:ab4ea451082e684198636565224bbb179575efc1658c48281b2c866bfd4ddf04"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4ce601907e99ea5b4adb807ded3570ea62186b17f88e271569144e8cca4409c7"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:fb2ed8b3fe4bf4506d6dab3b93b83bbc22237e230cba03866d561c3577517d18"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:70f947628e074bb2526ba1b151cee10e4c3b9670af4dbb4d73bc8a89445916b5"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:4bc536201426451f06f044dfbf341c09f540b4ebdb9fd8d2c6164d733de5e634"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:f4791cf0f8c3104ac668797d8c514afb3431bc3305f5638add0ba1a5a37e0d88"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-macosx_10_7_x86_64.whl", hash = "sha256:038c9f763e650712b899f983076ce783175397c848da04985658e7628cbe873b"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-macosx_11_0_arm64.whl", hash = "sha256:27548e16c79702f1e03f5628589c6057c9ae17c95b4c449de3c66b589ead0520"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c97bee68898f3f4344eb02fec316db93d9700fb1e6a5b760ffa20d71d9a46ce3"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b9b759b77f5337b4ea024f03abc6464c9f35d9718de01cfe6bae9f2e139c397e"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:439c9afe34638ace43a49bf72d201e0ffc1a800295bed8420c2a9ca8d5e3dbb3"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:ba39688799094c75ea8a16a6b544eb57b5b0f3328697084f3f2790892510d144"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:ccd4d5702bb90b84df13bd491be8d900b92016c5a455b7e14630ad7449eb03f8"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:81982d78a45d1e5396819bbb4ece1fadfe5f079335dd28c4ab3427cd95389944"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-macosx_10_7_x86_64.whl", hash = "sha256:7f8210297b04e53bc3da35db08b7302a6a1f4889c79173af69b72ec9754796b8"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-macosx_11_0_arm64.whl", hash = "sha256:8c8a8812fe6f43a3a5b054af6ac2d7b8605c7bcab2804a8a7d68b53f3cd86e00"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:206ed23aecd67c71daf5c02c3cd19c0501b01ef3cbf7782db9e4e051426b3d0d"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c2027d05c8aebe61d898d4cffd774840a9cb82ed356ba47a90d99ad768f39789"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:40180930807ce806aa71eda5a5a5447abb6b6a3c0b4b3b1b1962651906484d68"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:615a0a4bff11c45eb3c1996ceed5bdaa2f7b432425253a7c2eed33bb86d80abc"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:f5e412d717366e0677ef767eac93566582518fe8be923361a5c204c1a62eaafe"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:513b07e99c0a267b1d954243845d8a833758a6726a3b5d8948306e3fe14675e3"},
+    {file = "pydantic_core-2.14.5.tar.gz", hash = "sha256:6d30226dfc816dd0fdf120cae611dd2215117e4f9b124af8c60ab9093b6e8e71"},
+]
+
+[package.dependencies]
+typing-extensions = ">=4.6.0,<4.7.0 || >4.7.0"
 
 [[package]]
 name = "pygments"
@@ -1670,24 +1767,26 @@ name = "reflex-hosting-cli"
 version = "0.1.3"
 description = "Reflex Hosting CLI"
 optional = false
-python-versions = ">=3.8,<4.0"
-files = [
-    {file = "reflex_hosting_cli-0.1.3-py3-none-any.whl", hash = "sha256:4e7755f24f7fd5b669dd06414e3a41d50acd008650ba6e5d8387a7f29a4a6f3b"},
-    {file = "reflex_hosting_cli-0.1.3.tar.gz", hash = "sha256:e7e9de2e0abe1df448ad59b9dee17c73da449449ec74fc10ab913f46057ecd8b"},
-]
+python-versions = "^3.8"
+files = []
+develop = true
 
 [package.dependencies]
-coverage = ">=7.3.2,<8.0.0"
-httpx = ">=0.24.0,<0.25.0"
-pipdeptree = ">=2.13.1,<3.0.0"
-pipreqs = ">=0.4.13,<0.5.0"
-platformdirs = ">=3.10.0,<4.0.0"
-pydantic = ">=1.10.2,<2.0.0"
-rich = ">=13.0.0,<14.0.0"
-tabulate = ">=0.9.0,<0.10.0"
+coverage = "^7.3.2"
+httpx = "^0.24.0"
+pipdeptree = "^2.13.1"
+pipreqs = "^0.4.13"
+platformdirs = "^3.10.0"
+pydantic = "^2.5.2"
+rich = "^13.0.0"
+tabulate = "^0.9.0"
 typer = ">=0.4.2,<1"
 websockets = ">=10.4"
 
+[package.source]
+type = "directory"
+url = "../reflex-hosting-cli"
+
 [[package]]
 name = "requests"
 version = "2.31.0"
@@ -2473,4 +2572,4 @@ testing = ["big-O", "jaraco.functools", "jaraco.itertools", "more-itertools", "p
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.8"
-content-hash = "3b45d79329803bc24d8874a6da7af8f6eb6c4677eb100cbe300ad6f9e4bc8c69"
+content-hash = "6745651489e99a444373c56997ed748943106f95cc62131f34bf6751a7870ff0"
diff --git a/pyproject.toml b/pyproject.toml
index cbce05edd..4f5385d38 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -28,12 +28,12 @@ packages = [
 [tool.poetry.dependencies]
 python = "^3.8"
 cloudpickle = "^2.2.1"
-fastapi = "^0.96.0"
+fastapi = "^0.105.0"
 gunicorn = "^20.1.0"
 httpx = ">=0.24.0, <0.26.0"
 jinja2 = "^3.1.2"
 psutil = "^5.9.4"
-pydantic = "^1.10.2"
+pydantic = "^2.5.2"
 python-multipart = "^0.0.5"
 python-socketio = "^5.7.0"
 redis = "^4.3.5"
@@ -57,7 +57,7 @@ wrapt = [
 ]
 packaging = "^23.1"
 pipdeptree = "^2.13.0"
-reflex-hosting-cli = ">=0.1.2"
+reflex-hosting-cli = { path = "../reflex-hosting-cli/", develop = true }
 
 [tool.poetry.group.dev.dependencies]
 pytest = "^7.1.2"
diff --git a/reflex/.templates/apps/demo/code/webui/components/loading_icon.py b/reflex/.templates/apps/demo/code/webui/components/loading_icon.py
index 2678e8fa9..e3a5ad849 100644
--- a/reflex/.templates/apps/demo/code/webui/components/loading_icon.py
+++ b/reflex/.templates/apps/demo/code/webui/components/loading_icon.py
@@ -4,8 +4,8 @@ import reflex as rx
 class LoadingIcon(rx.Component):
     """A custom loading icon component."""
 
-    library = "react-loading-icons"
-    tag = "SpinningCircles"
+    library: str = "react-loading-icons"
+    tag: str = "SpinningCircles"
     stroke: rx.Var[str]
     stroke_opacity: rx.Var[str]
     fill: rx.Var[str]
diff --git a/reflex/base.py b/reflex/base.py
index 9efea60e0..e5bac421b 100644
--- a/reflex/base.py
+++ b/reflex/base.py
@@ -6,7 +6,8 @@ from typing import Any, List, Type
 
 import pydantic
 from pydantic import BaseModel
-from pydantic.fields import ModelField
+
+# from pydantic.fields import ModelField
 
 from reflex import constants
 
@@ -61,9 +62,9 @@ class Base(pydantic.BaseModel):
         Returns:
             The object as a json string.
         """
-        from reflex.utils.serializers import serialize
+        from reflex.utils.format import json_dumps
 
-        return self.__config__.json_dumps(self.dict(), default=serialize)
+        return json_dumps(self.model_dump())
 
     def set(self, **kwargs):
         """Set multiple fields and return the object.
@@ -97,6 +98,7 @@ class Base(pydantic.BaseModel):
             var: The variable to add a pydantic field for.
             default_value: The default value of the field
         """
+        raise RuntimeError("Pydantic V2 does not support adding fields dynamically.")
         new_field = ModelField.infer(
             name=var._var_name,
             value=default_value,
diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py
index dd3a09453..4c0a87871 100644
--- a/reflex/compiler/utils.py
+++ b/reflex/compiler/utils.py
@@ -5,7 +5,7 @@ import os
 from typing import Any, Type
 from urllib.parse import urlparse
 
-from pydantic.fields import ModelField
+# from pydantic.fields import ModelField
 
 from reflex import constants
 from reflex.components.base import (
@@ -148,7 +148,7 @@ def compile_state(state: Type[BaseState]) -> dict:
 
 
 def _compile_client_storage_field(
-    field: ModelField,
+    field: Any,  # XXX: Pydantic v2
 ) -> tuple[Type[Cookie] | Type[LocalStorage] | None, dict[str, Any] | None]:
     """Compile the given cookie or local_storage field.
 
diff --git a/reflex/components/__init__.py b/reflex/components/__init__.py
index 9426ba8fa..21a37feb7 100644
--- a/reflex/components/__init__.py
+++ b/reflex/components/__init__.py
@@ -124,7 +124,7 @@ kbd = Kbd.create
 link = Link.create
 link_box = LinkBox.create
 link_overlay = LinkOverlay.create
-list = List.create
+list = ChakraList.create
 list_item = ListItem.create
 markdown = Markdown.create
 menu = Menu.create
diff --git a/reflex/components/base/body.py b/reflex/components/base/body.py
index ee38cb5d4..99833b836 100644
--- a/reflex/components/base/body.py
+++ b/reflex/components/base/body.py
@@ -6,4 +6,4 @@ from reflex.components.component import Component
 class Body(Component):
     """A body component."""
 
-    tag = "body"
+    tag: str = "body"
diff --git a/reflex/components/base/document.py b/reflex/components/base/document.py
index 5cdba585d..3899e9ce9 100644
--- a/reflex/components/base/document.py
+++ b/reflex/components/base/document.py
@@ -7,35 +7,35 @@ from reflex.components.libs.chakra import ChakraComponent
 class NextDocumentLib(Component):
     """Root document components."""
 
-    library = "next/document"
+    library: str = "next/document"
 
 
 class Html(NextDocumentLib):
     """The document html."""
 
-    tag = "Html"
+    tag: str = "Html"
 
 
 class DocumentHead(NextDocumentLib):
     """The document head."""
 
-    tag = "Head"
+    tag: str = "Head"
 
 
 class Main(NextDocumentLib):
     """The document main section."""
 
-    tag = "Main"
+    tag: str = "Main"
 
 
 class NextScript(NextDocumentLib):
     """The document main scripts."""
 
-    tag = "NextScript"
+    tag: str = "NextScript"
 
 
 class ColorModeScript(ChakraComponent):
     """Chakra color mode script."""
 
-    tag = "ColorModeScript"
-    initialColorMode = "light"
+    tag: str = "ColorModeScript"
+    initialColorMode: str = "light"
diff --git a/reflex/components/base/head.py b/reflex/components/base/head.py
index c8a63e7b4..d63018946 100644
--- a/reflex/components/base/head.py
+++ b/reflex/components/base/head.py
@@ -6,12 +6,12 @@ from reflex.components.component import Component, MemoizationLeaf
 class NextHeadLib(Component):
     """Header components."""
 
-    library = "next/head"
+    library: str = "next/head"
 
 
 class Head(NextHeadLib, MemoizationLeaf):
     """Head Component."""
 
-    tag = "NextHead"
+    tag: str = "NextHead"
 
-    is_default = True
+    is_default: bool = True
diff --git a/reflex/components/base/link.py b/reflex/components/base/link.py
index 04d109e51..8829d7839 100644
--- a/reflex/components/base/link.py
+++ b/reflex/components/base/link.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class RawLink(Component):
     """A component that displays the title of the current page."""
 
-    tag = "link"
+    tag: str = "link"
 
     # The href.
     href: Var[str]
@@ -20,7 +20,7 @@ class RawLink(Component):
 class ScriptTag(Component):
     """A script tag with the specified type and source."""
 
-    tag = "script"
+    tag: str = "script"
 
     # The type of script represented.
     type_: Var[str]
diff --git a/reflex/components/base/meta.py b/reflex/components/base/meta.py
index 55cb42f0a..1a310bf31 100644
--- a/reflex/components/base/meta.py
+++ b/reflex/components/base/meta.py
@@ -11,7 +11,7 @@ from reflex.components.component import Component
 class Title(Component):
     """A component that displays the title of the current page."""
 
-    tag = "title"
+    tag: str = "title"
 
     def render(self) -> dict:
         """Render the title component.
@@ -29,7 +29,7 @@ class Title(Component):
 class Meta(Component):
     """A component that displays metadata for the current page."""
 
-    tag = "meta"
+    tag: str = "meta"
 
     # The description of character encoding.
     char_set: Optional[str] = None
diff --git a/reflex/components/base/script.py b/reflex/components/base/script.py
index e379a1824..bcaa28ff4 100644
--- a/reflex/components/base/script.py
+++ b/reflex/components/base/script.py
@@ -20,9 +20,9 @@ class Script(Component):
     HTML <script> tag which does not work when rendering a component.
     """
 
-    library = "next/script"
-    tag = "Script"
-    is_default = True
+    library: str = "next/script"
+    tag: str = "Script"
+    is_default: bool = True
 
     # Required unless inline script is used
     src: Var[str]
diff --git a/reflex/components/chakra/media/image.py b/reflex/components/chakra/media/image.py
index fed382d56..dc31a5694 100644
--- a/reflex/components/chakra/media/image.py
+++ b/reflex/components/chakra/media/image.py
@@ -11,8 +11,8 @@ from reflex.vars import Var
 class Image(ChakraComponent):
     """Display an image."""
 
-    tag = "Image"
-    alias = "ChakraImage"
+    tag: str = "Image"
+    alias: str = "ChakraImage"
     # How to align the image within its bounds. It maps to css `object-position` property.
     align: Var[str]
 
diff --git a/reflex/components/component.py b/reflex/components/component.py
index 22e59a72e..f73fa10d4 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -44,7 +44,7 @@ from reflex.style import Style, format_as_emotion
 from reflex.utils import console, format, imports, types
 from reflex.utils.imports import ImportVar
 from reflex.utils.serializers import serializer
-from reflex.vars import BaseVar, Var, VarData
+from reflex.vars import BaseVar, UnspecifiedVar, Var, VarData
 
 
 class BaseComponent(Base, ABC):
@@ -162,25 +162,23 @@ class Component(BaseComponent, ABC):
     _memoization_mode: MemoizationMode = MemoizationMode()
 
     @classmethod
-    def __init_subclass__(cls, **kwargs):
+    def ____pydantic_init_subclass__(cls, **kwargs: Any) -> None:
         """Set default properties.
 
         Args:
             **kwargs: The kwargs to pass to the superclass.
         """
-        super().__init_subclass__(**kwargs)
-
         # Get all the props for the component.
         props = cls.get_props()
 
         # Convert fields to props, setting default values.
-        for field in cls.get_fields().values():
+        for field_name, field in cls.get_fields().items():
             # If the field is not a component prop, skip it.
-            if field.name not in props:
+            if field_name not in props:
                 continue
 
             # Set default values for any props.
-            if types._issubclass(field.type_, Var):
+            if types._issubclass(field.annotation, Var):
                 field.required = False
                 field.default = Var.create(field.default)
 
@@ -197,18 +195,15 @@ class Component(BaseComponent, ABC):
         """
         # Set the id and children initially.
         children = kwargs.get("children", [])
-        initial_kwargs = {
-            "id": kwargs.get("id"),
-            "children": children,
-            **{
-                prop: Var.create(kwargs[prop])
-                for prop in self.get_initial_props()
-                if prop in kwargs
-            },
-        }
-        super().__init__(**initial_kwargs)
-
-        self._validate_component_children(children)
+        # kwargs = {
+        #     **{
+        #        prop: Var.create(None) if field.is_required() and types._issubclass(field.annotation, Var) else field.default
+        #        for prop, field in self.get_fields().items()
+        #     },
+        #     "id": kwargs.get("id"),
+        #     "children": children,
+        # }
+        # super().__init__(**initial_kwargs)
 
         # Get the component fields, triggers, and props.
         fields = self.get_fields()
@@ -227,7 +222,7 @@ class Component(BaseComponent, ABC):
                 field_type = EventChain
             elif key in props:
                 # Set the field type.
-                field_type = fields[key].type_
+                field_type = fields[key].annotation
 
             else:
                 continue
@@ -236,13 +231,13 @@ class Component(BaseComponent, ABC):
             if types._issubclass(field_type, Var):
                 try:
                     # Try to create a var from the value.
-                    kwargs[key] = Var.create(value)
+                    field_var = kwargs[key] = Var.create(value)
 
                     # Check that the var type is not None.
-                    if kwargs[key] is None:
+                    if field_var is None:
                         raise TypeError
 
-                    expected_type = fields[key].outer_type_.__args__[0]
+                    expected_type = fields[key].annotation.__args__[0]
 
                     if (
                         types.is_literal(expected_type)
@@ -255,7 +250,7 @@ class Component(BaseComponent, ABC):
                             )
 
                     # Get the passed type and the var type.
-                    passed_type = kwargs[key]._var_type
+                    passed_type = field_var._var_type
                     expected_type = (
                         type(expected_type.__args__[0])
                         if types.is_literal(expected_type)
@@ -264,7 +259,7 @@ class Component(BaseComponent, ABC):
                 except TypeError:
                     # If it is not a valid var, check the base types.
                     passed_type = type(value)
-                    expected_type = fields[key].outer_type_
+                    expected_type = fields[key].annotation
                 if not types._issubclass(passed_type, expected_type):
                     value_name = value._var_name if isinstance(value, Var) else value
                     raise TypeError(
@@ -301,9 +296,22 @@ class Component(BaseComponent, ABC):
         if isinstance(class_name, (List, tuple)):
             kwargs["class_name"] = " ".join(class_name)
 
+        for field_name, field in self.get_fields().items():
+            if (
+                field_name not in kwargs
+                and field.is_required()
+                and types._issubclass(field.annotation, Var)
+            ):
+                kwargs[field_name] = UnspecifiedVar
+
         # Construct the component.
         super().__init__(*args, **kwargs)
 
+    def __pydantic_post_init__(self):
+        self._validate_component_children(
+            [child for child in self.children if isinstance(child, Component)]
+        )
+
     def _create_event_chain(
         self,
         event_trigger: str,
@@ -486,6 +494,7 @@ class Component(BaseComponent, ABC):
             props = {
                 attr[:-1] if attr.endswith("_") else attr: getattr(self, attr)
                 for attr in self.get_props()
+                if getattr(self, attr) is not UnspecifiedVar
             }
 
             # Add ref to element if `id` is not None.
@@ -1121,7 +1130,7 @@ class CustomComponent(Component):
     """A custom user-defined component."""
 
     # Use the components library.
-    library = f"/{Dirs.COMPONENTS_PATH}"
+    library: str = f"/{Dirs.COMPONENTS_PATH}"
 
     # The function that creates the component.
     component_fn: Callable[..., Component] = Component.create
diff --git a/reflex/components/datadisplay/__init__.py b/reflex/components/datadisplay/__init__.py
index 55935f0cd..162321615 100644
--- a/reflex/components/datadisplay/__init__.py
+++ b/reflex/components/datadisplay/__init__.py
@@ -8,7 +8,7 @@ from .dataeditor import DataEditor, DataEditorTheme
 from .datatable import DataTable
 from .divider import Divider
 from .keyboard_key import KeyboardKey as Kbd
-from .list import List, ListItem, OrderedList, UnorderedList
+from .list import ChakraList, ListItem, OrderedList, UnorderedList
 from .moment import Moment, MomentDelta
 from .stat import Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber
 from .table import Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tr
diff --git a/reflex/components/datadisplay/badge.py b/reflex/components/datadisplay/badge.py
index f1216782f..30a68c4a2 100644
--- a/reflex/components/datadisplay/badge.py
+++ b/reflex/components/datadisplay/badge.py
@@ -7,7 +7,7 @@ from reflex.vars import Var
 class Badge(ChakraComponent):
     """A badge component."""
 
-    tag = "Badge"
+    tag: str = "Badge"
 
     # Variant of the badge ("solid" | "subtle" | "outline")
     variant: Var[LiteralVariant]
diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
index 72918fcac..7c789d991 100644
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@@ -350,11 +350,11 @@ LiteralCodeLanguage = Literal[
 class CodeBlock(Component):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.5.0"
+    library: str = "react-syntax-highlighter@15.5.0"
 
-    tag = "PrismAsyncLight"
+    tag: str = "PrismAsyncLight"
 
-    alias = "SyntaxHighlighter"
+    alias: str = "SyntaxHighlighter"
 
     # The theme to use ("light" or "dark").
     theme: Var[LiteralCodeBlockTheme] = "one-light"  # type: ignore
@@ -518,4 +518,4 @@ class CodeBlock(Component):
 class Code(ChakraComponent):
     """Used to display inline code."""
 
-    tag = "Code"
+    tag: str = "Code"
diff --git a/reflex/components/datadisplay/dataeditor.py b/reflex/components/datadisplay/dataeditor.py
index f4b327aa6..39648b78b 100644
--- a/reflex/components/datadisplay/dataeditor.py
+++ b/reflex/components/datadisplay/dataeditor.py
@@ -106,8 +106,8 @@ class DataEditorTheme(Base):
 class DataEditor(NoSSRComponent):
     """The DataEditor Component."""
 
-    tag = "DataEditor"
-    is_default = True
+    tag: str = "DataEditor"
+    is_default: bool = True
     library: str = "@glideapps/glide-data-grid@^5.3.0"
     lib_dependencies: List[str] = ["lodash", "marked", "react-responsive-carousel"]
 
diff --git a/reflex/components/datadisplay/datatable.py b/reflex/components/datadisplay/datatable.py
index 6c05dfd81..203f7eb4d 100644
--- a/reflex/components/datadisplay/datatable.py
+++ b/reflex/components/datadisplay/datatable.py
@@ -14,7 +14,7 @@ from reflex.vars import BaseVar, ComputedVar, Var
 class Gridjs(Component):
     """A component that wraps a nivo bar component."""
 
-    library = "gridjs-react@6.0.1"
+    library: str = "gridjs-react@6.0.1"
 
     lib_dependencies: List[str] = ["gridjs@6.0.6"]
 
@@ -22,9 +22,9 @@ class Gridjs(Component):
 class DataTable(Gridjs):
     """A data table component."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
-    alias = "DataTableGrid"
+    alias: str = "DataTableGrid"
 
     # The data to display. Either a list of lists or a pandas dataframe.
     data: Any
diff --git a/reflex/components/datadisplay/divider.py b/reflex/components/datadisplay/divider.py
index 3b481eb7e..6585c0e5d 100644
--- a/reflex/components/datadisplay/divider.py
+++ b/reflex/components/datadisplay/divider.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Divider(ChakraComponent):
     """Dividers are used to visually separate content in a list or group."""
 
-    tag = "Divider"
+    tag: str = "Divider"
 
     # Pass the orientation prop and set it to either horizontal or vertical. If the vertical orientation is used, make sure that the parent element is assigned a height.
     orientation: Var[LiteralLayout]
diff --git a/reflex/components/datadisplay/keyboard_key.py b/reflex/components/datadisplay/keyboard_key.py
index f8abdfdd1..1cf2b0059 100644
--- a/reflex/components/datadisplay/keyboard_key.py
+++ b/reflex/components/datadisplay/keyboard_key.py
@@ -6,4 +6,4 @@ from reflex.components.libs.chakra import ChakraComponent
 class KeyboardKey(ChakraComponent):
     """Display a keyboard key text."""
 
-    tag = "Kbd"
+    tag: str = "Kbd"
diff --git a/reflex/components/datadisplay/list.py b/reflex/components/datadisplay/list.py
index a3d725291..49ffc7f69 100644
--- a/reflex/components/datadisplay/list.py
+++ b/reflex/components/datadisplay/list.py
@@ -8,10 +8,10 @@ from reflex.components.libs.chakra import ChakraComponent
 from reflex.vars import Var
 
 
-class List(ChakraComponent):
+class ChakraList(ChakraComponent):
     """Display a list of items."""
 
-    tag = "List"
+    tag: str = "List"
 
     # The space between each list item
     spacing: Var[str]
@@ -47,16 +47,16 @@ class List(ChakraComponent):
 class ListItem(ChakraComponent):
     """A single list item."""
 
-    tag = "ListItem"
+    tag: str = "ListItem"
 
 
-class OrderedList(List):
+class OrderedList(ChakraList):
     """An ordered list component with numbers."""
 
-    tag = "OrderedList"
+    tag: str = "OrderedList"
 
 
-class UnorderedList(List):
+class UnorderedList(ChakraList):
     """An unordered list component with bullets."""
 
-    tag = "UnorderedList"
+    tag: str = "UnorderedList"
diff --git a/reflex/components/datadisplay/moment.py b/reflex/components/datadisplay/moment.py
index 53e199c4e..4f934843f 100644
--- a/reflex/components/datadisplay/moment.py
+++ b/reflex/components/datadisplay/moment.py
@@ -26,7 +26,7 @@ class Moment(NoSSRComponent):
     """The Moment component."""
 
     tag: str = "Moment"
-    is_default = True
+    is_default: bool = True
     library: str = "react-moment"
     lib_dependencies: List[str] = ["moment"]
 
diff --git a/reflex/components/datadisplay/stat.py b/reflex/components/datadisplay/stat.py
index 814a313c4..d2e7a725b 100644
--- a/reflex/components/datadisplay/stat.py
+++ b/reflex/components/datadisplay/stat.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Stat(ChakraComponent):
     """The Stat component is used to display some statistics. It can take in a label, a number and a help text."""
 
-    tag = "Stat"
+    tag: str = "Stat"
 
     @classmethod
     def create(
@@ -50,25 +50,25 @@ class Stat(ChakraComponent):
 class StatLabel(ChakraComponent):
     """A stat label component."""
 
-    tag = "StatLabel"
+    tag: str = "StatLabel"
 
 
 class StatNumber(ChakraComponent):
     """The stat to display."""
 
-    tag = "StatNumber"
+    tag: str = "StatNumber"
 
 
 class StatHelpText(ChakraComponent):
     """A helper text to display under the stat."""
 
-    tag = "StatHelpText"
+    tag: str = "StatHelpText"
 
 
 class StatArrow(ChakraComponent):
     """A stat arrow component indicating the direction of change."""
 
-    tag = "StatArrow"
+    tag: str = "StatArrow"
 
     # The type of arrow, either increase or decrease.
     type_: Var[str]
@@ -77,4 +77,4 @@ class StatArrow(ChakraComponent):
 class StatGroup(ChakraComponent):
     """A stat group component to evenly space out the stats."""
 
-    tag = "StatGroup"
+    tag: str = "StatGroup"
diff --git a/reflex/components/datadisplay/table.py b/reflex/components/datadisplay/table.py
index cf4160133..8739d8da0 100644
--- a/reflex/components/datadisplay/table.py
+++ b/reflex/components/datadisplay/table.py
@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Table(ChakraComponent):
     """A table component."""
 
-    tag = "Table"
+    tag: str = "Table"
 
     # The color scheme of the table
     color_scheme: Var[str]
@@ -62,7 +62,7 @@ class Table(ChakraComponent):
 class Thead(ChakraComponent):
     """A table header component."""
 
-    tag = "Thead"
+    tag: str = "Thead"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot"]
@@ -114,7 +114,7 @@ class Thead(ChakraComponent):
 class Tbody(ChakraComponent):
     """A table body component."""
 
-    tag = "Tbody"
+    tag: str = "Tbody"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Td", "Th"]
@@ -188,7 +188,7 @@ class Tbody(ChakraComponent):
 class Tfoot(ChakraComponent):
     """A table footer component."""
 
-    tag = "Tfoot"
+    tag: str = "Tfoot"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Td", "Th", "Tfoot"]
@@ -237,7 +237,7 @@ class Tfoot(ChakraComponent):
 class Tr(ChakraComponent):
     """A table row component."""
 
-    tag = "Tr"
+    tag: str = "Tr"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Tr"]
@@ -268,7 +268,7 @@ class Tr(ChakraComponent):
 class Th(ChakraComponent):
     """A table header cell component."""
 
-    tag = "Th"
+    tag: str = "Th"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tr", "Td", "Th"]
@@ -280,7 +280,7 @@ class Th(ChakraComponent):
 class Td(ChakraComponent):
     """A table data cell component."""
 
-    tag = "Td"
+    tag: str = "Td"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead"]
@@ -292,7 +292,7 @@ class Td(ChakraComponent):
 class TableCaption(ChakraComponent):
     """A table caption component."""
 
-    tag = "TableCaption"
+    tag: str = "TableCaption"
 
     # The placement of the table caption. This sets the `caption-side` CSS attribute.
     placement: Var[str]
@@ -301,4 +301,4 @@ class TableCaption(ChakraComponent):
 class TableContainer(ChakraComponent):
     """The table container component renders a div that wraps the table component."""
 
-    tag = "TableContainer"
+    tag: str = "TableContainer"
diff --git a/reflex/components/datadisplay/tag.py b/reflex/components/datadisplay/tag.py
index dff02eac1..a7d26443f 100644
--- a/reflex/components/datadisplay/tag.py
+++ b/reflex/components/datadisplay/tag.py
@@ -14,31 +14,31 @@ from reflex.vars import Var
 class TagLabel(ChakraComponent):
     """The label of the tag."""
 
-    tag = "TagLabel"
+    tag: str = "TagLabel"
 
 
 class TagLeftIcon(ChakraComponent):
     """The left icon of the tag."""
 
-    tag = "TagLeftIcon"
+    tag: str = "TagLeftIcon"
 
 
 class TagRightIcon(ChakraComponent):
     """The right icon of the tag."""
 
-    tag = "TagRightIcon"
+    tag: str = "TagRightIcon"
 
 
 class TagCloseButton(ChakraComponent):
     """The close button of the tag."""
 
-    tag = "TagCloseButton"
+    tag: str = "TagCloseButton"
 
 
 class Tag(ChakraComponent):
     """The parent wrapper that provides context for its children."""
 
-    tag = "Tag"
+    tag: str = "Tag"
 
     # The visual color appearance of the tag.
     # options: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" |
diff --git a/reflex/components/disclosure/accordion.py b/reflex/components/disclosure/accordion.py
index 007aafc7d..1754e52be 100644
--- a/reflex/components/disclosure/accordion.py
+++ b/reflex/components/disclosure/accordion.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Accordion(ChakraComponent):
     """The wrapper that uses cloneElement to pass props to AccordionItem children."""
 
-    tag = "Accordion"
+    tag: str = "Accordion"
 
     # If true, multiple accordion items can be expanded at once.
     allow_multiple: Var[bool]
@@ -80,7 +80,7 @@ class Accordion(ChakraComponent):
 class AccordionItem(ChakraComponent):
     """A single accordion item."""
 
-    tag = "AccordionItem"
+    tag: str = "AccordionItem"
 
     # A unique id for the accordion item.
     id_: Var[str]
@@ -95,16 +95,16 @@ class AccordionItem(ChakraComponent):
 class AccordionButton(ChakraComponent):
     """The button that toggles the expand/collapse state of the accordion item. This button must be wrapped in an element with role heading."""
 
-    tag = "AccordionButton"
+    tag: str = "AccordionButton"
 
 
 class AccordionPanel(ChakraComponent):
     """The container for the details to be revealed."""
 
-    tag = "AccordionPanel"
+    tag: str = "AccordionPanel"
 
 
 class AccordionIcon(ChakraComponent):
     """A chevron-down icon that rotates based on the expanded/collapsed state."""
 
-    tag = "AccordionIcon"
+    tag: str = "AccordionIcon"
diff --git a/reflex/components/disclosure/tabs.py b/reflex/components/disclosure/tabs.py
index 3071d07e2..6cbb1a7d1 100644
--- a/reflex/components/disclosure/tabs.py
+++ b/reflex/components/disclosure/tabs.py
@@ -15,7 +15,7 @@ from reflex.vars import Var
 class Tabs(ChakraComponent):
     """An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern. Tabs, provides context and state for all components."""
 
-    tag = "Tabs"
+    tag: str = "Tabs"
 
     # The alignment of the tabs ("center" | "end" | "start").
     align: Var[LiteralTagAlign]
@@ -76,7 +76,7 @@ class Tabs(ChakraComponent):
 class Tab(ChakraComponent):
     """An element that serves as a label for one of the tab panels and can be activated to display that panel.."""
 
-    tag = "Tab"
+    tag: str = "Tab"
 
     # If true, the Tab won't be toggleable.
     is_disabled: Var[bool]
@@ -94,16 +94,16 @@ class Tab(ChakraComponent):
 class TabList(ChakraComponent):
     """Wrapper for the Tab components."""
 
-    tag = "TabList"
+    tag: str = "TabList"
 
 
 class TabPanels(ChakraComponent):
     """Wrapper for the Tab components."""
 
-    tag = "TabPanels"
+    tag: str = "TabPanels"
 
 
 class TabPanel(ChakraComponent):
     """An element that contains the content associated with a tab."""
 
-    tag = "TabPanel"
+    tag: str = "TabPanel"
diff --git a/reflex/components/disclosure/transition.py b/reflex/components/disclosure/transition.py
index d934df403..5fa8ef71a 100644
--- a/reflex/components/disclosure/transition.py
+++ b/reflex/components/disclosure/transition.py
@@ -18,13 +18,13 @@ class Transition(ChakraComponent):
 class Fade(Transition):
     """Fade component cab be used show and hide content of your app."""
 
-    tag = "Fade"
+    tag: str = "Fade"
 
 
 class ScaleFade(Transition):
     """Fade component can be scaled and reverse your app."""
 
-    tag = "ScaleFade"
+    tag: str = "ScaleFade"
 
     # The initial scale of the element
     initial_scale: Var[float]
@@ -36,7 +36,7 @@ class ScaleFade(Transition):
 class Slide(Transition):
     """Side can be used show content below your app."""
 
-    tag = "Slide"
+    tag: str = "Slide"
 
     # The direction to slide from
     direction: Var[str]
@@ -45,7 +45,7 @@ class Slide(Transition):
 class SlideFade(Transition):
     """SlideFade component."""
 
-    tag = "SlideFade"
+    tag: str = "SlideFade"
 
     # The offset on the horizontal or x axis
     offsetX: Var[Union[str, int]]
@@ -60,7 +60,7 @@ class SlideFade(Transition):
 class Collapse(Transition):
     """Collapse component can collapse some content."""
 
-    tag = "Collapse"
+    tag: str = "Collapse"
 
     # If true, the opacity of the content will be animated
     animateOpacity: Var[bool]
diff --git a/reflex/components/disclosure/visuallyhidden.py b/reflex/components/disclosure/visuallyhidden.py
index 631191a4c..45d1a6688 100644
--- a/reflex/components/disclosure/visuallyhidden.py
+++ b/reflex/components/disclosure/visuallyhidden.py
@@ -6,4 +6,4 @@ from reflex.components.libs.chakra import ChakraComponent
 class VisuallyHidden(ChakraComponent):
     """A component that visually hides content while still allowing it to be read by screen readers."""
 
-    tag = "VisuallyHidden"
+    tag: str = "VisuallyHidden"
diff --git a/reflex/components/el/elements/forms.py b/reflex/components/el/elements/forms.py
index 094ee4bd7..fa84b8c81 100644
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@@ -11,7 +11,7 @@ from .base import BaseHTML
 class Button(BaseHTML):
     """Display the button element."""
 
-    tag = "button"
+    tag: str = "button"
 
     # Automatically focuses the button when the page loads
     auto_focus: Var[Union[str, int, bool]]
@@ -50,14 +50,14 @@ class Button(BaseHTML):
 class Datalist(BaseHTML):
     """Display the datalist element."""
 
-    tag = "datalist"
+    tag: str = "datalist"
     # No unique attributes, only common ones are inherited
 
 
 class Fieldset(Element):
     """Display the fieldset element."""
 
-    tag = "fieldset"
+    tag: str = "fieldset"
 
     # Disables all the form control descendants of the fieldset
     disabled: Var[Union[str, int, bool]]
@@ -72,7 +72,7 @@ class Fieldset(Element):
 class Form(BaseHTML):
     """Display the form element."""
 
-    tag = "form"
+    tag: str = "form"
 
     # MIME types the server accepts for file upload
     accept: Var[Union[str, int, bool]]
@@ -105,7 +105,7 @@ class Form(BaseHTML):
 class Input(BaseHTML):
     """Display the input element."""
 
-    tag = "input"
+    tag: str = "input"
 
     # Accepted types of files when the input is file type
     accept: Var[Union[str, int, bool]]
@@ -225,7 +225,7 @@ class Input(BaseHTML):
 class Label(BaseHTML):
     """Display the label element."""
 
-    tag = "label"
+    tag: str = "label"
 
     # ID of a form control with which the label is associated
     html_for: Var[Union[str, int, bool]]
@@ -237,14 +237,14 @@ class Label(BaseHTML):
 class Legend(BaseHTML):
     """Display the legend element."""
 
-    tag = "legend"
+    tag: str = "legend"
     # No unique attributes, only common ones are inherited
 
 
 class Meter(BaseHTML):
     """Display the meter element."""
 
-    tag = "meter"
+    tag: str = "meter"
 
     # Associates the meter with a form (by id)
     form: Var[Union[str, int, bool]]
@@ -271,7 +271,7 @@ class Meter(BaseHTML):
 class Optgroup(BaseHTML):
     """Display the optgroup element."""
 
-    tag = "optgroup"
+    tag: str = "optgroup"
 
     # Disables the optgroup
     disabled: Var[Union[str, int, bool]]
@@ -283,7 +283,7 @@ class Optgroup(BaseHTML):
 class Option(BaseHTML):
     """Display the option element."""
 
-    tag = "option"
+    tag: str = "option"
 
     # Disables the option
     disabled: Var[Union[str, int, bool]]
@@ -301,7 +301,7 @@ class Option(BaseHTML):
 class Output(BaseHTML):
     """Display the output element."""
 
-    tag = "output"
+    tag: str = "output"
 
     # Associates the output with one or more elements (by their IDs)
     html_for: Var[Union[str, int, bool]]
@@ -316,7 +316,7 @@ class Output(BaseHTML):
 class Progress(BaseHTML):
     """Display the progress element."""
 
-    tag = "progress"
+    tag: str = "progress"
 
     # Associates the progress element with a form (by id)
     form: Var[Union[str, int, bool]]
@@ -331,7 +331,7 @@ class Progress(BaseHTML):
 class Select(BaseHTML):
     """Display the select element."""
 
-    tag = "select"
+    tag: str = "select"
 
     # Whether the form control should have autocomplete enabled
     auto_complete: Var[Union[str, int, bool]]
@@ -372,7 +372,7 @@ class Select(BaseHTML):
 class Textarea(BaseHTML):
     """Display the textarea element."""
 
-    tag = "textarea"
+    tag: str = "textarea"
 
     # Whether the form control should have autocomplete enabled
     auto_complete: Var[Union[str, int, bool]]
diff --git a/reflex/components/el/elements/inline.py b/reflex/components/el/elements/inline.py
index ad1c0fb04..30d3a2be4 100644
--- a/reflex/components/el/elements/inline.py
+++ b/reflex/components/el/elements/inline.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class A(BaseHTML):  # Inherits common attributes from BaseMeta
     """Display the 'a' element."""
 
-    tag = "a"
+    tag: str = "a"
 
     # Specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
     download: Var[Union[str, int, bool]]
@@ -42,49 +42,49 @@ class A(BaseHTML):  # Inherits common attributes from BaseMeta
 class Abbr(BaseHTML):
     """Display the abbr element."""
 
-    tag = "abbr"
+    tag: str = "abbr"
 
 
 class B(BaseHTML):
     """Display the b element."""
 
-    tag = "b"
+    tag: str = "b"
 
 
 class Bdi(BaseHTML):
     """Display the bdi element."""
 
-    tag = "bdi"
+    tag: str = "bdi"
 
 
 class Bdo(BaseHTML):
     """Display the bdo element."""
 
-    tag = "bdo"
+    tag: str = "bdo"
 
 
 class Br(BaseHTML):
     """Display the br element."""
 
-    tag = "br"
+    tag: str = "br"
 
 
 class Cite(BaseHTML):
     """Display the cite element."""
 
-    tag = "cite"
+    tag: str = "cite"
 
 
 class Code(BaseHTML):
     """Display the code element."""
 
-    tag = "code"
+    tag: str = "code"
 
 
 class Data(BaseHTML):
     """Display the data element."""
 
-    tag = "data"
+    tag: str = "data"
 
     value: Var[Union[str, int, bool]]
 
@@ -92,37 +92,37 @@ class Data(BaseHTML):
 class Dfn(BaseHTML):
     """Display the dfn element."""
 
-    tag = "dfn"
+    tag: str = "dfn"
 
 
 class Em(BaseHTML):
     """Display the em element."""
 
-    tag = "em"
+    tag: str = "em"
 
 
 class I(BaseHTML):  # noqa: E742
     """Display the i element."""
 
-    tag = "i"
+    tag: str = "i"
 
 
 class Kbd(BaseHTML):
     """Display the kbd element."""
 
-    tag = "kbd"
+    tag: str = "kbd"
 
 
 class Mark(BaseHTML):
     """Display the mark element."""
 
-    tag = "mark"
+    tag: str = "mark"
 
 
 class Q(BaseHTML):
     """Display the q element."""
 
-    tag = "q"
+    tag: str = "q"
 
     cite: Var[Union[str, int, bool]]
 
@@ -130,77 +130,77 @@ class Q(BaseHTML):
 class Rp(BaseHTML):
     """Display the rp element."""
 
-    tag = "rp"
+    tag: str = "rp"
 
 
 class Rt(BaseHTML):
     """Display the rt element."""
 
-    tag = "rt"
+    tag: str = "rt"
 
 
 class Ruby(BaseHTML):
     """Display the ruby element."""
 
-    tag = "ruby"
+    tag: str = "ruby"
 
 
 class S(BaseHTML):
     """Display the s element."""
 
-    tag = "s"
+    tag: str = "s"
 
 
 class Samp(BaseHTML):
     """Display the samp element."""
 
-    tag = "samp"
+    tag: str = "samp"
 
 
 class Small(BaseHTML):
     """Display the small element."""
 
-    tag = "small"
+    tag: str = "small"
 
 
 class Span(BaseHTML):
     """Display the span element."""
 
-    tag = "span"
+    tag: str = "span"
 
 
 class Strong(BaseHTML):
     """Display the strong element."""
 
-    tag = "strong"
+    tag: str = "strong"
 
 
 class Sub(BaseHTML):
     """Display the sub element."""
 
-    tag = "sub"
+    tag: str = "sub"
 
 
 class Sup(BaseHTML):
     """Display the sup element."""
 
-    tag = "sup"
+    tag: str = "sup"
 
 
 class Time(BaseHTML):
     """Display the time element."""
 
-    tag = "time"
+    tag: str = "time"
     date_time: Var[Union[str, int, bool]]
 
 
 class U(BaseHTML):
     """Display the u element."""
 
-    tag = "u"
+    tag: str = "u"
 
 
 class Wbr(BaseHTML):
     """Display the wbr element."""
 
-    tag = "wbr"
+    tag: str = "wbr"
diff --git a/reflex/components/el/elements/media.py b/reflex/components/el/elements/media.py
index c39401a88..f6d12fb36 100644
--- a/reflex/components/el/elements/media.py
+++ b/reflex/components/el/elements/media.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Area(BaseHTML):
     """Display the area element."""
 
-    tag = "area"
+    tag: str = "area"
 
     # Alternate text for the area, used for accessibility
     alt: Var[Union[str, int, bool]]
@@ -48,7 +48,7 @@ class Area(BaseHTML):
 class Audio(BaseHTML):
     """Display the audio element."""
 
-    tag = "audio"
+    tag: str = "audio"
 
     # Specifies that the audio will start playing as soon as it is ready
     auto_play: Var[Union[str, int, bool]]
@@ -78,7 +78,7 @@ class Audio(BaseHTML):
 class Img(BaseHTML):
     """Display the img element."""
 
-    tag = "img"
+    tag: str = "img"
 
     # Image alignment with respect to its surrounding elements
     align: Var[Union[str, int, bool]]
@@ -129,7 +129,7 @@ class Img(BaseHTML):
 class Map(BaseHTML):
     """Display the map element."""
 
-    tag = "map"
+    tag: str = "map"
 
     # Name of the map, referenced by the 'usemap' attribute in 'img' and 'object' elements
     name: Var[Union[str, int, bool]]
@@ -138,7 +138,7 @@ class Map(BaseHTML):
 class Track(BaseHTML):
     """Display the track element."""
 
-    tag = "track"
+    tag: str = "track"
 
     # Indicates that the track should be enabled unless the user's preferences indicate otherwise
     default: Var[Union[str, int, bool]]
@@ -159,7 +159,7 @@ class Track(BaseHTML):
 class Video(BaseHTML):
     """Display the video element."""
 
-    tag = "video"
+    tag: str = "video"
 
     # Specifies that the video will start playing as soon as it is ready
     auto_play: Var[Union[str, int, bool]]
@@ -201,7 +201,7 @@ class Video(BaseHTML):
 class Embed(BaseHTML):
     """Display the embed element."""
 
-    tag = "embed"
+    tag: str = "embed"
 
     # The intrinsic height of the embedded content
     height: Var[Union[str, int, bool]]
@@ -219,7 +219,7 @@ class Embed(BaseHTML):
 class Iframe(BaseHTML):
     """Display the iframe element."""
 
-    tag = "iframe"
+    tag: str = "iframe"
 
     # Alignment of the iframe within the page or surrounding elements
     align: Var[Union[str, int, bool]]
@@ -258,7 +258,7 @@ class Iframe(BaseHTML):
 class Object(BaseHTML):
     """Display the object element."""
 
-    tag = "object"
+    tag: str = "object"
 
     # Border width around the object
     border: Var[Union[str, int, bool]]
@@ -288,21 +288,21 @@ class Object(BaseHTML):
 class Picture(BaseHTML):
     """Display the picture element."""
 
-    tag = "picture"
+    tag: str = "picture"
     # No unique attributes, only common ones are inherited
 
 
 class Portal(BaseHTML):
     """Display the portal element."""
 
-    tag = "portal"
+    tag: str = "portal"
     # No unique attributes, only common ones are inherited
 
 
 class Source(BaseHTML):
     """Display the source element."""
 
-    tag = "source"
+    tag: str = "source"
 
     # Media query indicating what device the linked resource is optimized for
     media: Var[Union[str, int, bool]]
@@ -323,7 +323,7 @@ class Source(BaseHTML):
 class Svg(BaseHTML):
     """Display the svg element."""
 
-    tag = "svg"
+    tag: str = "svg"
 
     # Specifies the width of the element
     width: Var[Union[str, int, bool]]
@@ -335,7 +335,7 @@ class Svg(BaseHTML):
 class Path(BaseHTML):
     """Display the path element."""
 
-    tag = "path"
+    tag: str = "path"
 
     # Defines the shape of the path
     d: Var[Union[str, int, bool]]
diff --git a/reflex/components/el/elements/metadata.py b/reflex/components/el/elements/metadata.py
index 2ff25755e..d012cd7fa 100644
--- a/reflex/components/el/elements/metadata.py
+++ b/reflex/components/el/elements/metadata.py
@@ -10,9 +10,9 @@ from .base import BaseHTML
 class Base(BaseHTML):  # noqa: E742
     """Display the base element."""
 
-    tag = "base"
+    tag: str = "base"
 
-    tag = "base"
+    tag: str = "base"
     href: Var[Union[str, int, bool]]
     target: Var[Union[str, int, bool]]
 
@@ -20,13 +20,13 @@ class Base(BaseHTML):  # noqa: E742
 class Head(BaseHTML):  # noqa: E742
     """Display the head element."""
 
-    tag = "head"
+    tag: str = "head"
 
 
 class Link(BaseHTML):  # noqa: E742
     """Display the link element."""
 
-    tag = "link"
+    tag: str = "link"
 
     cross_origin: Var[Union[str, int, bool]]
     href: Var[Union[str, int, bool]]
@@ -42,7 +42,7 @@ class Link(BaseHTML):  # noqa: E742
 class Meta(BaseHTML):  # Inherits common attributes from BaseHTML
     """Display the meta element."""
 
-    tag = "meta"
+    tag: str = "meta"
     char_set: Var[Union[str, int, bool]]
     content: Var[Union[str, int, bool]]
     http_equiv: Var[Union[str, int, bool]]
@@ -52,4 +52,4 @@ class Meta(BaseHTML):  # Inherits common attributes from BaseHTML
 class Title(Element):  # noqa: E742
     """Display the title element."""
 
-    tag = "title"
+    tag: str = "title"
diff --git a/reflex/components/el/elements/other.py b/reflex/components/el/elements/other.py
index 26dbf6050..69c113172 100644
--- a/reflex/components/el/elements/other.py
+++ b/reflex/components/el/elements/other.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Details(BaseHTML):
     """Display the details element."""
 
-    tag = "details"
+    tag: str = "details"
 
     # Indicates whether the details will be visible (expanded) to the user
     open: Var[Union[str, int, bool]]
@@ -18,7 +18,7 @@ class Details(BaseHTML):
 class Dialog(BaseHTML):
     """Display the dialog element."""
 
-    tag = "dialog"
+    tag: str = "dialog"
 
     # Indicates whether the dialog is active and can be interacted with
     open: Var[Union[str, int, bool]]
@@ -27,35 +27,35 @@ class Dialog(BaseHTML):
 class Summary(BaseHTML):
     """Display the summary element."""
 
-    tag = "summary"
+    tag: str = "summary"
     # No unique attributes, only common ones are inherited; used as a summary or caption for a <details> element
 
 
 class Slot(BaseHTML):
     """Display the slot element."""
 
-    tag = "slot"
+    tag: str = "slot"
     # No unique attributes, only common ones are inherited; used as a placeholder inside a web component
 
 
 class Template(BaseHTML):
     """Display the template element."""
 
-    tag = "template"
+    tag: str = "template"
     # No unique attributes, only common ones are inherited; used for declaring fragments of HTML that can be cloned and inserted in the document
 
 
 class Math(BaseHTML):
     """Display the math element."""
 
-    tag = "math"
+    tag: str = "math"
     # No unique attributes, only common ones are inherited; used for displaying mathematical expressions
 
 
 class Html(BaseHTML):
     """Display the html element."""
 
-    tag = "html"
+    tag: str = "html"
 
     # Specifies the URL of the document's cache manifest (obsolete in HTML5)
     manifest: Var[Union[str, int, bool]]
diff --git a/reflex/components/el/elements/scripts.py b/reflex/components/el/elements/scripts.py
index 0eefa43ab..b0ef00f6f 100644
--- a/reflex/components/el/elements/scripts.py
+++ b/reflex/components/el/elements/scripts.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Canvas(BaseHTML):
     """Display the canvas element."""
 
-    tag = "canvas"
+    tag: str = "canvas"
 
     # The height of the canvas in CSS pixels
     height: Var[Union[str, int, bool]]
@@ -21,14 +21,14 @@ class Canvas(BaseHTML):
 class Noscript(BaseHTML):
     """Display the noscript element."""
 
-    tag = "noscript"
+    tag: str = "noscript"
     # No unique attributes, only common ones are inherited
 
 
 class Script(BaseHTML):
     """Display the script element."""
 
-    tag = "script"
+    tag: str = "script"
 
     # Indicates that the script should be executed asynchronously
     async_: Var[Union[str, int, bool]]
diff --git a/reflex/components/el/elements/sectioning.py b/reflex/components/el/elements/sectioning.py
index 140a661bb..9d5c13c97 100644
--- a/reflex/components/el/elements/sectioning.py
+++ b/reflex/components/el/elements/sectioning.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Body(BaseHTML):  # noqa: E742
     """Display the body element."""
 
-    tag = "body"
+    tag: str = "body"
 
     bgcolor: Var[Union[str, int, bool]]
     background: Var[Union[str, int, bool]]
@@ -18,82 +18,82 @@ class Body(BaseHTML):  # noqa: E742
 class Address(BaseHTML):  # noqa: E742
     """Display the address element."""
 
-    tag = "address"
+    tag: str = "address"
 
 
 class Article(BaseHTML):  # noqa: E742
     """Display the article element."""
 
-    tag = "article"
+    tag: str = "article"
 
 
 class Aside(BaseHTML):  # noqa: E742
     """Display the aside element."""
 
-    tag = "aside"
+    tag: str = "aside"
 
 
 class Footer(BaseHTML):  # noqa: E742
     """Display the footer element."""
 
-    tag = "footer"
+    tag: str = "footer"
 
 
 class Header(BaseHTML):  # noqa: E742
     """Display the header element."""
 
-    tag = "header"
+    tag: str = "header"
 
 
 class H1(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h1"
+    tag: str = "h1"
 
 
 class H2(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h2"
+    tag: str = "h2"
 
 
 class H3(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h3"
+    tag: str = "h3"
 
 
 class H4(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h4"
+    tag: str = "h4"
 
 
 class H5(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h5"
+    tag: str = "h5"
 
 
 class H6(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h6"
+    tag: str = "h6"
 
 
 class Main(BaseHTML):  # noqa: E742
     """Display the main element."""
 
-    tag = "main"
+    tag: str = "main"
 
 
 class Nav(BaseHTML):  # noqa: E742
     """Display the nav element."""
 
-    tag = "nav"
+    tag: str = "nav"
 
 
 class Section(BaseHTML):  # noqa: E742
     """Display the section element."""
 
-    tag = "section"
+    tag: str = "section"
diff --git a/reflex/components/el/elements/tables.py b/reflex/components/el/elements/tables.py
index 49fbb6452..0295c1233 100644
--- a/reflex/components/el/elements/tables.py
+++ b/reflex/components/el/elements/tables.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Caption(BaseHTML):
     """Display the caption element."""
 
-    tag = "caption"
+    tag: str = "caption"
 
     # Alignment of the caption
     align: Var[Union[str, int, bool]]
@@ -18,7 +18,7 @@ class Caption(BaseHTML):
 class Col(BaseHTML):
     """Display the col element."""
 
-    tag = "col"
+    tag: str = "col"
 
     # Alignment of the content within the column
     align: Var[Union[str, int, bool]]
@@ -33,7 +33,7 @@ class Col(BaseHTML):
 class Colgroup(BaseHTML):
     """Display the colgroup element."""
 
-    tag = "colgroup"
+    tag: str = "colgroup"
 
     # Alignment of the content within the column group
     align: Var[Union[str, int, bool]]
@@ -48,7 +48,7 @@ class Colgroup(BaseHTML):
 class Table(BaseHTML):
     """Display the table element."""
 
-    tag = "table"
+    tag: str = "table"
 
     # Alignment of the table
     align: Var[Union[str, int, bool]]
@@ -69,7 +69,7 @@ class Table(BaseHTML):
 class Tbody(BaseHTML):
     """Display the tbody element."""
 
-    tag = "tbody"
+    tag: str = "tbody"
 
     # Alignment of the content within the table body
     align: Var[Union[str, int, bool]]
@@ -81,7 +81,7 @@ class Tbody(BaseHTML):
 class Td(BaseHTML):
     """Display the td element."""
 
-    tag = "td"
+    tag: str = "td"
 
     # Alignment of the content within the table cell
     align: Var[Union[str, int, bool]]
@@ -105,7 +105,7 @@ class Td(BaseHTML):
 class Tfoot(BaseHTML):
     """Display the tfoot element."""
 
-    tag = "tfoot"
+    tag: str = "tfoot"
 
     # Alignment of the content within the table footer
     align: Var[Union[str, int, bool]]
@@ -117,7 +117,7 @@ class Tfoot(BaseHTML):
 class Th(BaseHTML):
     """Display the th element."""
 
-    tag = "th"
+    tag: str = "th"
 
     # Alignment of the content within the table header cell
     align: Var[Union[str, int, bool]]
@@ -144,7 +144,7 @@ class Th(BaseHTML):
 class Thead(BaseHTML):
     """Display the thead element."""
 
-    tag = "thead"
+    tag: str = "thead"
 
     # Alignment of the content within the table header
     align: Var[Union[str, int, bool]]
@@ -153,7 +153,7 @@ class Thead(BaseHTML):
 class Tr(BaseHTML):
     """Display the tr element."""
 
-    tag = "tr"
+    tag: str = "tr"
 
     # Alignment of the content within the table row
     align: Var[Union[str, int, bool]]
diff --git a/reflex/components/el/elements/typography.py b/reflex/components/el/elements/typography.py
index 01684951c..86c3c6741 100644
--- a/reflex/components/el/elements/typography.py
+++ b/reflex/components/el/elements/typography.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Blockquote(BaseHTML):
     """Display the blockquote element."""
 
-    tag = "blockquote"
+    tag: str = "blockquote"
 
     # Define the title of a work.
     cite: Var[Union[str, int, bool]]
@@ -18,37 +18,37 @@ class Blockquote(BaseHTML):
 class Dd(BaseHTML):
     """Display the dd element."""
 
-    tag = "dd"
+    tag: str = "dd"
 
 
 class Div(BaseHTML):
     """Display the div element."""
 
-    tag = "div"
+    tag: str = "div"
 
 
 class Dl(BaseHTML):
     """Display the dl element."""
 
-    tag = "dl"
+    tag: str = "dl"
 
 
 class Dt(BaseHTML):
     """Display the dt element."""
 
-    tag = "dt"
+    tag: str = "dt"
 
 
 class Figcaption(BaseHTML):
     """Display the figcaption element."""
 
-    tag = "figcaption"
+    tag: str = "figcaption"
 
 
 class Hr(BaseHTML):
     """Display the hr element."""
 
-    tag = "hr"
+    tag: str = "hr"
 
     # Used to specify the alignment of text content of The Element. this attribute is used in all elements.
     align: Var[Union[str, int, bool]]
@@ -60,13 +60,13 @@ class Hr(BaseHTML):
 class Li(BaseHTML):
     """Display the li element."""
 
-    tag = "li"
+    tag: str = "li"
 
 
 class Menu(BaseHTML):
     """Display the menu element."""
 
-    tag = "menu"
+    tag: str = "menu"
 
     # Specifies that the menu element is a context menu.
     type: Var[Union[str, int, bool]]
@@ -75,7 +75,7 @@ class Menu(BaseHTML):
 class Ol(BaseHTML):
     """Display the ol element."""
 
-    tag = "ol"
+    tag: str = "ol"
 
     # Reverses the order of the list.
     reversed: Var[Union[str, int, bool]]
@@ -90,25 +90,25 @@ class Ol(BaseHTML):
 class P(BaseHTML):
     """Display the p element."""
 
-    tag = "p"
+    tag: str = "p"
 
 
 class Pre(BaseHTML):
     """Display the pre element."""
 
-    tag = "pre"
+    tag: str = "pre"
 
 
 class Ul(BaseHTML):
     """Display the ul element."""
 
-    tag = "ul"
+    tag: str = "ul"
 
 
 class Ins(BaseHTML):
     """Display the ins element."""
 
-    tag = "ins"
+    tag: str = "ins"
 
     # Specifies the URL of the document that explains the reason why the text was inserted/changed.
     cite: Var[Union[str, int, bool]]
@@ -120,7 +120,7 @@ class Ins(BaseHTML):
 class Del(BaseHTML):
     """Display the del element."""
 
-    tag = "del"
+    tag: str = "del"
 
     # Specifies the URL of the document that explains the reason why the text was deleted.
     cite: Var[Union[str, int, bool]]
diff --git a/reflex/components/feedback/alert.py b/reflex/components/feedback/alert.py
index 6553d0023..cd68e4543 100644
--- a/reflex/components/feedback/alert.py
+++ b/reflex/components/feedback/alert.py
@@ -12,7 +12,7 @@ from reflex.vars import Var
 class Alert(ChakraComponent):
     """An alert feedback box."""
 
-    tag = "Alert"
+    tag: str = "Alert"
 
     # The status of the alert ("success" | "info" | "warning" | "error")
     status: Var[LiteralStatus]
@@ -53,16 +53,16 @@ class Alert(ChakraComponent):
 class AlertIcon(ChakraComponent):
     """An icon displayed in the alert."""
 
-    tag = "AlertIcon"
+    tag: str = "AlertIcon"
 
 
 class AlertTitle(ChakraComponent):
     """The title of the alert."""
 
-    tag = "AlertTitle"
+    tag: str = "AlertTitle"
 
 
 class AlertDescription(ChakraComponent):
     """AlertDescription composes the Box component."""
 
-    tag = "AlertDescription"
+    tag: str = "AlertDescription"
diff --git a/reflex/components/feedback/circularprogress.py b/reflex/components/feedback/circularprogress.py
index e0e9ad92b..1427e817b 100644
--- a/reflex/components/feedback/circularprogress.py
+++ b/reflex/components/feedback/circularprogress.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class CircularProgress(ChakraComponent):
     """The CircularProgress component is used to indicate the progress for determinate and indeterminate processes."""
 
-    tag = "CircularProgress"
+    tag: str = "CircularProgress"
 
     # If true, the cap of the progress indicator will be rounded.
     cap_is_round: Var[bool]
@@ -64,4 +64,4 @@ class CircularProgress(ChakraComponent):
 class CircularProgressLabel(ChakraComponent):
     """Label of CircularProcess."""
 
-    tag = "CircularProgressLabel"
+    tag: str = "CircularProgressLabel"
diff --git a/reflex/components/feedback/progress.py b/reflex/components/feedback/progress.py
index 17406c8db..7bd74744b 100644
--- a/reflex/components/feedback/progress.py
+++ b/reflex/components/feedback/progress.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Progress(ChakraComponent):
     """A bar to display progress."""
 
-    tag = "Progress"
+    tag: str = "Progress"
 
     # If true, the progress bar will show stripe
     has_stripe: Var[bool]
diff --git a/reflex/components/feedback/skeleton.py b/reflex/components/feedback/skeleton.py
index e3d867412..b49555124 100644
--- a/reflex/components/feedback/skeleton.py
+++ b/reflex/components/feedback/skeleton.py
@@ -7,7 +7,7 @@ from reflex.vars import Var
 class Skeleton(ChakraComponent):
     """Skeleton is used to display the loading state of some components. You can use it as a standalone component. Or to wrap another component to take the same height and width."""
 
-    tag = "Skeleton"
+    tag: str = "Skeleton"
 
     # The color at the animation end
     end_color: Var[str]
@@ -28,7 +28,7 @@ class Skeleton(ChakraComponent):
 class SkeletonCircle(ChakraComponent):
     """SkeletonCircle is used to display the loading state of some components."""
 
-    tag = "SkeletonCircle"
+    tag: str = "SkeletonCircle"
 
     # The color at the animation end
     end_color: Var[str]
@@ -49,7 +49,7 @@ class SkeletonCircle(ChakraComponent):
 class SkeletonText(ChakraComponent):
     """SkeletonText is used to display the loading state of some components."""
 
-    tag = "SkeletonText"
+    tag: str = "SkeletonText"
 
     # The color at the animation end
     end_color: Var[str]
diff --git a/reflex/components/feedback/spinner.py b/reflex/components/feedback/spinner.py
index ef3de5498..1e92ef4a1 100644
--- a/reflex/components/feedback/spinner.py
+++ b/reflex/components/feedback/spinner.py
@@ -7,7 +7,7 @@ from reflex.vars import Var
 class Spinner(ChakraComponent):
     """The component that spins."""
 
-    tag = "Spinner"
+    tag: str = "Spinner"
 
     # The color of the empty area in the spinner
     empty_color: Var[str]
diff --git a/reflex/components/forms/button.py b/reflex/components/forms/button.py
index 63c34ffae..923d3a4df 100644
--- a/reflex/components/forms/button.py
+++ b/reflex/components/forms/button.py
@@ -14,7 +14,7 @@ from reflex.vars import Var
 class Button(ChakraComponent):
     """The Button component is used to trigger an event or event, such as submitting a form, opening a dialog, canceling an event, or performing a delete operation."""
 
-    tag = "Button"
+    tag: str = "Button"
 
     # The space between the button icon and label.
     icon_spacing: Var[int]
@@ -63,7 +63,7 @@ class Button(ChakraComponent):
 class ButtonGroup(ChakraComponent):
     """A group of buttons."""
 
-    tag = "ButtonGroup"
+    tag: str = "ButtonGroup"
 
     # If true, the borderRadius of button that are direct children will be altered to look flushed together.
     is_attached: Var[bool]
diff --git a/reflex/components/forms/checkbox.py b/reflex/components/forms/checkbox.py
index 3f0c5d327..7ed7b51a9 100644
--- a/reflex/components/forms/checkbox.py
+++ b/reflex/components/forms/checkbox.py
@@ -15,7 +15,7 @@ from reflex.vars import Var
 class Checkbox(ChakraComponent):
     """The Checkbox component is used in forms when a user needs to select multiple values from several options."""
 
-    tag = "Checkbox"
+    tag: str = "Checkbox"
 
     # Color scheme for checkbox.
     # Options:
@@ -71,7 +71,7 @@ class Checkbox(ChakraComponent):
 class CheckboxGroup(ChakraComponent):
     """A group of checkboxes."""
 
-    tag = "CheckboxGroup"
+    tag: str = "CheckboxGroup"
 
     # The value of the checkbox group
     value: Var[str]
diff --git a/reflex/components/forms/debounce.py b/reflex/components/forms/debounce.py
index 076eb8510..433b0244a 100644
--- a/reflex/components/forms/debounce.py
+++ b/reflex/components/forms/debounce.py
@@ -16,8 +16,8 @@ class DebounceInput(Component):
     is experiencing high latency.
     """
 
-    library = "react-debounce-input@3.3.0"
-    tag = "DebounceInput"
+    library: str = "react-debounce-input@3.3.0"
+    tag: str = "DebounceInput"
 
     # Minimum input characters before triggering the on_change event
     min_length: Var[int]
diff --git a/reflex/components/forms/editable.py b/reflex/components/forms/editable.py
index e963be2ad..93a2a0c09 100644
--- a/reflex/components/forms/editable.py
+++ b/reflex/components/forms/editable.py
@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Editable(ChakraComponent):
     """The wrapper component that provides context value."""
 
-    tag = "Editable"
+    tag: str = "Editable"
 
     # If true, the Editable will be disabled.
     is_disabled: Var[bool]
@@ -55,16 +55,16 @@ class Editable(ChakraComponent):
 class EditableInput(ChakraComponent):
     """The edit view of the component. It shows when you click or focus on the text."""
 
-    tag = "EditableInput"
+    tag: str = "EditableInput"
 
 
 class EditableTextarea(ChakraComponent):
     """Use the textarea element to handle multi line text input in an editable context."""
 
-    tag = "EditableTextarea"
+    tag: str = "EditableTextarea"
 
 
 class EditablePreview(ChakraComponent):
     """The read-only view of the component."""
 
-    tag = "EditablePreview"
+    tag: str = "EditablePreview"
diff --git a/reflex/components/forms/editor.py b/reflex/components/forms/editor.py
index 92a1e80c3..d27122a16 100644
--- a/reflex/components/forms/editor.py
+++ b/reflex/components/forms/editor.py
@@ -73,11 +73,11 @@ class Editor(NoSSRComponent):
     refer to the library docs for a complete list.
     """
 
-    library = "suneditor-react"
+    library: str = "suneditor-react"
 
-    tag = "SunEditor"
+    tag: str = "SunEditor"
 
-    is_default = True
+    is_default: bool = True
 
     lib_dependencies: List[str] = ["suneditor"]
 
diff --git a/reflex/components/forms/form.py b/reflex/components/forms/form.py
index cf4124a49..94a73efc2 100644
--- a/reflex/components/forms/form.py
+++ b/reflex/components/forms/form.py
@@ -36,7 +36,7 @@ HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
 class Form(ChakraComponent):
     """A form component."""
 
-    tag = "Box"
+    tag: str = "Box"
 
     # What the form renders to.
     as_: Var[str] = "form"  # type: ignore
@@ -151,7 +151,7 @@ class Form(ChakraComponent):
 class FormControl(ChakraComponent):
     """Provide context to form components."""
 
-    tag = "FormControl"
+    tag: str = "FormControl"
 
     # If true, the form control will be disabled.
     is_disabled: Var[bool]
@@ -216,13 +216,13 @@ class FormControl(ChakraComponent):
 class FormHelperText(ChakraComponent):
     """A form helper text component."""
 
-    tag = "FormHelperText"
+    tag: str = "FormHelperText"
 
 
 class FormLabel(ChakraComponent):
     """A form label component."""
 
-    tag = "FormLabel"
+    tag: str = "FormLabel"
 
     # Link
     html_for: Var[str]
@@ -231,4 +231,4 @@ class FormLabel(ChakraComponent):
 class FormErrorMessage(ChakraComponent):
     """A form error message component."""
 
-    tag = "FormErrorMessage"
+    tag: str = "FormErrorMessage"
diff --git a/reflex/components/forms/iconbutton.py b/reflex/components/forms/iconbutton.py
index ac5549c12..290d35eb4 100644
--- a/reflex/components/forms/iconbutton.py
+++ b/reflex/components/forms/iconbutton.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class IconButton(Text):
     """A button with an icon."""
 
-    tag = "IconButton"
+    tag: str = "IconButton"
 
     # The type of button.
     type: Var[str]
diff --git a/reflex/components/forms/input.py b/reflex/components/forms/input.py
index 17f194daa..0a0abdade 100644
--- a/reflex/components/forms/input.py
+++ b/reflex/components/forms/input.py
@@ -17,7 +17,7 @@ from reflex.vars import Var
 class Input(ChakraComponent):
     """The Input component is a component that is used to get user input in a text field."""
 
-    tag = "Input"
+    tag: str = "Input"
 
     # State var to bind the input.
     value: Var[str]
@@ -105,7 +105,7 @@ class Input(ChakraComponent):
 class InputGroup(ChakraComponent):
     """The InputGroup component is a component that is used to group a set of inputs."""
 
-    tag = "InputGroup"
+    tag: str = "InputGroup"
 
     _memoization_mode = MemoizationMode(recursive=False)
 
@@ -113,22 +113,22 @@ class InputGroup(ChakraComponent):
 class InputLeftAddon(ChakraComponent):
     """The InputLeftAddon component is a component that is used to add an addon to the left of an input."""
 
-    tag = "InputLeftAddon"
+    tag: str = "InputLeftAddon"
 
 
 class InputRightAddon(ChakraComponent):
     """The InputRightAddon component is a component that is used to add an addon to the right of an input."""
 
-    tag = "InputRightAddon"
+    tag: str = "InputRightAddon"
 
 
 class InputLeftElement(ChakraComponent):
     """The InputLeftElement component is a component that is used to add an element to the left of an input."""
 
-    tag = "InputLeftElement"
+    tag: str = "InputLeftElement"
 
 
 class InputRightElement(ChakraComponent):
     """The InputRightElement component is a component that is used to add an element to the right of an input."""
 
-    tag = "InputRightElement"
+    tag: str = "InputRightElement"
diff --git a/reflex/components/forms/multiselect.py b/reflex/components/forms/multiselect.py
index d9af42c3b..4588f0968 100644
--- a/reflex/components/forms/multiselect.py
+++ b/reflex/components/forms/multiselect.py
@@ -46,9 +46,9 @@ class Select(Component):
     Props added by chakra-react-select are marked with "[chakra]".
     """
 
-    library = "chakra-react-select@4.7.5"
-    tag = "Select"
-    alias = "MultiSelect"
+    library: str = "chakra-react-select@4.7.5"
+    tag: str = "Select"
+    alias: str = "MultiSelect"
 
     # Focus the control when it is mounted
     auto_focus: Var[bool]
diff --git a/reflex/components/forms/numberinput.py b/reflex/components/forms/numberinput.py
index 2fe90ad96..5125ccd59 100644
--- a/reflex/components/forms/numberinput.py
+++ b/reflex/components/forms/numberinput.py
@@ -15,7 +15,7 @@ from reflex.vars import Var
 class NumberInput(ChakraComponent):
     """The wrapper that provides context and logic to the components."""
 
-    tag = "NumberInput"
+    tag: str = "NumberInput"
 
     # State var to bind the input.
     value: Var[Number]
@@ -112,22 +112,22 @@ class NumberInput(ChakraComponent):
 class NumberInputField(ChakraComponent):
     """The input field itself."""
 
-    tag = "NumberInputField"
+    tag: str = "NumberInputField"
 
 
 class NumberInputStepper(ChakraComponent):
     """The wrapper for the input's stepper buttons."""
 
-    tag = "NumberInputStepper"
+    tag: str = "NumberInputStepper"
 
 
 class NumberIncrementStepper(ChakraComponent):
     """The button to increment the value of the input."""
 
-    tag = "NumberIncrementStepper"
+    tag: str = "NumberIncrementStepper"
 
 
 class NumberDecrementStepper(ChakraComponent):
     """The button to decrement the value of the input."""
 
-    tag = "NumberDecrementStepper"
+    tag: str = "NumberDecrementStepper"
diff --git a/reflex/components/forms/pininput.py b/reflex/components/forms/pininput.py
index 35e27f6f9..aab32915e 100644
--- a/reflex/components/forms/pininput.py
+++ b/reflex/components/forms/pininput.py
@@ -15,7 +15,7 @@ from reflex.vars import Var
 class PinInput(ChakraComponent):
     """The component that provides context to all the pin-input fields."""
 
-    tag = "PinInput"
+    tag: str = "PinInput"
 
     # State var to bind the the input.
     value: Var[str]
@@ -164,7 +164,7 @@ class PinInput(ChakraComponent):
 class PinInputField(ChakraComponent):
     """The text field that user types in - must be a direct child of PinInput."""
 
-    tag = "PinInputField"
+    tag: str = "PinInputField"
 
     # the position of the PinInputField inside the PinInput.
     # Default to None because it is assigned by PinInput when created.
diff --git a/reflex/components/forms/radio.py b/reflex/components/forms/radio.py
index ecf5afa52..00fe168bd 100644
--- a/reflex/components/forms/radio.py
+++ b/reflex/components/forms/radio.py
@@ -15,7 +15,7 @@ from reflex.vars import Var
 class RadioGroup(ChakraComponent):
     """A grouping of individual radio options."""
 
-    tag = "RadioGroup"
+    tag: str = "RadioGroup"
 
     # State var to bind the the input.
     value: Var[Any]
@@ -62,7 +62,7 @@ class RadioGroup(ChakraComponent):
 class Radio(Text):
     """Radios are used when only one choice may be selected in a series of options."""
 
-    tag = "Radio"
+    tag: str = "Radio"
 
     # Value of radio.
     value: Var[Any]
diff --git a/reflex/components/forms/rangeslider.py b/reflex/components/forms/rangeslider.py
index 44f600bab..5f891a180 100644
--- a/reflex/components/forms/rangeslider.py
+++ b/reflex/components/forms/rangeslider.py
@@ -13,7 +13,7 @@ from reflex.vars import Var
 class RangeSlider(ChakraComponent):
     """The RangeSlider is a multi thumb slider used to select a range of related values. A common use-case of this component is a price range picker that allows a user to set the minimum and maximum price."""
 
-    tag = "RangeSlider"
+    tag: str = "RangeSlider"
 
     # State var to bind the the input.
     value: Var[List[int]]
@@ -121,19 +121,19 @@ class RangeSlider(ChakraComponent):
 class RangeSliderTrack(ChakraComponent):
     """A range slider track."""
 
-    tag = "RangeSliderTrack"
+    tag: str = "RangeSliderTrack"
 
 
 class RangeSliderFilledTrack(ChakraComponent):
     """A filled range slider track."""
 
-    tag = "RangeSliderFilledTrack"
+    tag: str = "RangeSliderFilledTrack"
 
 
 class RangeSliderThumb(ChakraComponent):
     """A range slider thumb."""
 
-    tag = "RangeSliderThumb"
+    tag: str = "RangeSliderThumb"
 
     # The position of the thumb.
     index: Var[int]
diff --git a/reflex/components/forms/select.py b/reflex/components/forms/select.py
index 61c3dd28a..7554fdc78 100644
--- a/reflex/components/forms/select.py
+++ b/reflex/components/forms/select.py
@@ -14,7 +14,7 @@ from reflex.vars import Var
 class Select(ChakraComponent):
     """Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead."""
 
-    tag = "Select"
+    tag: str = "Select"
 
     # State var to bind the select.
     value: Var[str]
@@ -88,7 +88,7 @@ class Select(ChakraComponent):
 class Option(Text):
     """A select option."""
 
-    tag = "option"
+    tag: str = "option"
 
     value: Var[Any]
 
diff --git a/reflex/components/forms/slider.py b/reflex/components/forms/slider.py
index ebf21ce14..65c981d5e 100644
--- a/reflex/components/forms/slider.py
+++ b/reflex/components/forms/slider.py
@@ -13,7 +13,7 @@ from reflex.vars import Var
 class Slider(ChakraComponent):
     """The wrapper that provides context and functionality for all children."""
 
-    tag = "Slider"
+    tag: str = "Slider"
 
     # State var to bind the input.
     value: Var[int]
@@ -108,19 +108,19 @@ class Slider(ChakraComponent):
 class SliderTrack(ChakraComponent):
     """The empty part of the slider that shows the track."""
 
-    tag = "SliderTrack"
+    tag: str = "SliderTrack"
 
 
 class SliderFilledTrack(ChakraComponent):
     """The filled part of the slider."""
 
-    tag = "SliderFilledTrack"
+    tag: str = "SliderFilledTrack"
 
 
 class SliderThumb(ChakraComponent):
     """The handle that's used to change the slider value."""
 
-    tag = "SliderThumb"
+    tag: str = "SliderThumb"
 
     # The size of the thumb.
     box_size: Var[str]
@@ -129,4 +129,4 @@ class SliderThumb(ChakraComponent):
 class SliderMark(ChakraComponent):
     """The label or mark that shows names for specific slider values."""
 
-    tag = "SliderMark"
+    tag: str = "SliderMark"
diff --git a/reflex/components/forms/switch.py b/reflex/components/forms/switch.py
index 301a0bcec..23e9cc67c 100644
--- a/reflex/components/forms/switch.py
+++ b/reflex/components/forms/switch.py
@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Switch(ChakraComponent):
     """Toggleable switch component."""
 
-    tag = "Switch"
+    tag: str = "Switch"
 
     # If true, the switch will be checked. You'll need to set an on_change event handler to update its value (since it is now controlled)
     is_checked: Var[bool]
diff --git a/reflex/components/forms/textarea.py b/reflex/components/forms/textarea.py
index a7f3a9b3d..a6db26b20 100644
--- a/reflex/components/forms/textarea.py
+++ b/reflex/components/forms/textarea.py
@@ -13,7 +13,7 @@ from reflex.vars import Var
 class TextArea(ChakraComponent):
     """A text area component."""
 
-    tag = "Textarea"
+    tag: str = "Textarea"
 
     # State var to bind the input.
     value: Var[str]
diff --git a/reflex/components/forms/upload.py b/reflex/components/forms/upload.py
index ed644ed4e..1b0edf56e 100644
--- a/reflex/components/forms/upload.py
+++ b/reflex/components/forms/upload.py
@@ -95,18 +95,18 @@ def cancel_upload(upload_id: str) -> EventSpec:
 class UploadFilesProvider(Component):
     """AppWrap component that provides a dict of selected files by ID via useContext."""
 
-    library = f"/{Dirs.CONTEXTS_PATH}"
-    tag = "UploadFilesProvider"
+    library: str = f"/{Dirs.CONTEXTS_PATH}"
+    tag: str = "UploadFilesProvider"
 
 
 class Upload(Component):
     """A file upload component."""
 
-    library = "react-dropzone@14.2.3"
+    library: str = "react-dropzone@14.2.3"
 
-    tag = "ReactDropzone"
+    tag: str = "ReactDropzone"
 
-    is_default = True
+    is_default: bool = True
 
     # The list of accepted file types. This should be a dictionary of MIME types as keys and array of file formats as
     # values.
diff --git a/reflex/components/graphing/plotly.py b/reflex/components/graphing/plotly.py
index e0dd880db..cb66267eb 100644
--- a/reflex/components/graphing/plotly.py
+++ b/reflex/components/graphing/plotly.py
@@ -14,7 +14,7 @@ except ImportError:
 class PlotlyLib(NoSSRComponent):
     """A component that wraps a plotly lib."""
 
-    library = "react-plotly.js@2.6.0"
+    library: str = "react-plotly.js@2.6.0"
 
     lib_dependencies: List[str] = ["plotly.js@2.22.0"]
 
@@ -22,9 +22,9 @@ class PlotlyLib(NoSSRComponent):
 class Plotly(PlotlyLib):
     """Display a plotly graph."""
 
-    tag = "Plot"
+    tag: str = "Plot"
 
-    is_default = True
+    is_default: bool = True
 
     # The figure to display. This can be a plotly figure or a plotly data json.
     data: Var[Figure]
diff --git a/reflex/components/graphing/recharts/cartesian.py b/reflex/components/graphing/recharts/cartesian.py
index 136bddf9f..51383215e 100644
--- a/reflex/components/graphing/recharts/cartesian.py
+++ b/reflex/components/graphing/recharts/cartesian.py
@@ -87,17 +87,17 @@ class Axis(Recharts):
 class XAxis(Axis):
     """An XAxis component in Recharts."""
 
-    tag = "XAxis"
+    tag: str = "XAxis"
 
-    alias = "RechartsXAxis"
+    alias: str = "RechartsXAxis"
 
 
 class YAxis(Axis):
     """A YAxis component in Recharts."""
 
-    tag = "YAxis"
+    tag: str = "YAxis"
 
-    alias = "RechartsYAxis"
+    alias: str = "RechartsYAxis"
 
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
@@ -106,9 +106,9 @@ class YAxis(Axis):
 class ZAxis(Recharts):
     """A ZAxis component in Recharts."""
 
-    tag = "ZAxis"
+    tag: str = "ZAxis"
 
-    alias = "RechartszAxis"
+    alias: str = "RechartszAxis"
 
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
@@ -129,9 +129,9 @@ class ZAxis(Recharts):
 class Brush(Recharts):
     """A Brush component in Recharts."""
 
-    tag = "Brush"
+    tag: str = "Brush"
 
-    alias = "RechartsBrush"
+    alias: str = "RechartsBrush"
 
     # Stroke color
     stroke: Var[str]
@@ -214,9 +214,9 @@ class Cartesian(Recharts):
 class Area(Cartesian):
     """An Area component in Recharts."""
 
-    tag = "Area"
+    tag: str = "Area"
 
-    alias = "RechartsArea"
+    alias: str = "RechartsArea"
 
     # The color of the line stroke.
     stroke: Var[str]
@@ -249,9 +249,9 @@ class Area(Cartesian):
 class Bar(Cartesian):
     """A Bar component in Recharts."""
 
-    tag = "Bar"
+    tag: str = "Bar"
 
-    alias = "RechartsBar"
+    alias: str = "RechartsBar"
 
     # The color of the line stroke.
     stroke: Var[str]
@@ -284,9 +284,9 @@ class Bar(Cartesian):
 class Line(Cartesian):
     """A Line component in Recharts."""
 
-    tag = "Line"
+    tag: str = "Line"
 
-    alias = "RechartsLine"
+    alias: str = "RechartsLine"
 
     # The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
     type_: Var[LiteralAreaType]
@@ -319,9 +319,9 @@ class Line(Cartesian):
 class Scatter(Cartesian):
     """A Scatter component in Recharts."""
 
-    tag = "Scatter"
+    tag: str = "Scatter"
 
-    alias = "RechartsScatter"
+    alias: str = "RechartsScatter"
 
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
@@ -351,9 +351,9 @@ class Scatter(Cartesian):
 class Funnel(Cartesian):
     """A Funnel component in Recharts."""
 
-    tag = "Funnel"
+    tag: str = "Funnel"
 
-    alias = "RechartsFunnel"
+    alias: str = "RechartsFunnel"
 
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
@@ -374,9 +374,9 @@ class Funnel(Cartesian):
 class ErrorBar(Recharts):
     """An ErrorBar component in Recharts."""
 
-    tag = "ErrorBar"
+    tag: str = "ErrorBar"
 
-    alias = "RechartsErrorBar"
+    alias: str = "RechartsErrorBar"
 
     # The direction of error bar. 'x' | 'y' | 'both'
     direction: Var[LiteralDirection]
@@ -419,9 +419,9 @@ class Reference(Recharts):
 class ReferenceLine(Reference):
     """A ReferenceLine component in Recharts."""
 
-    tag = "ReferenceLine"
+    tag: str = "ReferenceLine"
 
-    alias = "RechartsReferenceLine"
+    alias: str = "RechartsReferenceLine"
 
     # The width of the stroke.
     stroke_width: Var[int]
@@ -433,9 +433,9 @@ class ReferenceLine(Reference):
 class ReferenceDot(Reference):
     """A ReferenceDot component in Recharts."""
 
-    tag = "ReferenceDot"
+    tag: str = "ReferenceDot"
 
-    alias = "RechartsReferenceDot"
+    alias: str = "RechartsReferenceDot"
 
     # Valid children components
     _valid_children: List[str] = ["Label"]
@@ -459,9 +459,9 @@ class ReferenceDot(Reference):
 class ReferenceArea(Recharts):
     """A ReferenceArea component in Recharts."""
 
-    tag = "ReferenceArea"
+    tag: str = "ReferenceArea"
 
-    alias = "RechartsReferenceArea"
+    alias: str = "RechartsReferenceArea"
 
     # Stroke color
     stroke: Var[str]
@@ -519,9 +519,9 @@ class Grid(Recharts):
 class CartesianGrid(Grid):
     """A CartesianGrid component in Recharts."""
 
-    tag = "CartesianGrid"
+    tag: str = "CartesianGrid"
 
-    alias = "RechartsCartesianGrid"
+    alias: str = "RechartsCartesianGrid"
 
     # The horizontal line configuration.
     horizontal: Var[Dict[str, Any]]
@@ -542,9 +542,9 @@ class CartesianGrid(Grid):
 class CartesianAxis(Grid):
     """A CartesianAxis component in Recharts."""
 
-    tag = "CartesianAxis"
+    tag: str = "CartesianAxis"
 
-    alias = "RechartsCartesianAxis"
+    alias: str = "RechartsCartesianAxis"
 
     # The orientation of axis 'top' | 'bottom' | 'left' | 'right'
     orientation: Var[LiteralOrientationTopBottomLeftRight]
diff --git a/reflex/components/graphing/recharts/charts.py b/reflex/components/graphing/recharts/charts.py
index b0150cc34..477532755 100644
--- a/reflex/components/graphing/recharts/charts.py
+++ b/reflex/components/graphing/recharts/charts.py
@@ -119,9 +119,9 @@ class ChartBase(RechartsCharts):
 class AreaChart(ChartBase):
     """An Area chart component in Recharts."""
 
-    tag = "AreaChart"
+    tag: str = "AreaChart"
 
-    alias = "RechartsAreaChart"
+    alias: str = "RechartsAreaChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
     base_value: Var[Union[int, LiteralComposedChartBaseValue]]
@@ -147,9 +147,9 @@ class AreaChart(ChartBase):
 class BarChart(ChartBase):
     """A Bar chart component in Recharts."""
 
-    tag = "BarChart"
+    tag: str = "BarChart"
 
-    alias = "RechartsBarChart"
+    alias: str = "RechartsBarChart"
 
     # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
     bar_category_gap: Var[Union[str, int]]  # type: ignore
@@ -187,9 +187,9 @@ class BarChart(ChartBase):
 class LineChart(ChartBase):
     """A Line chart component in Recharts."""
 
-    tag = "LineChart"
+    tag: str = "LineChart"
 
-    alias = "RechartsLineChart"
+    alias: str = "RechartsLineChart"
 
     # Valid children components
     _valid_children: List[str] = [
@@ -209,9 +209,9 @@ class LineChart(ChartBase):
 class ComposedChart(ChartBase):
     """A Composed chart component in Recharts."""
 
-    tag = "ComposedChart"
+    tag: str = "ComposedChart"
 
-    alias = "RechartsComposedChart"
+    alias: str = "RechartsComposedChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
     base_value: Var[Union[int, LiteralComposedChartBaseValue]]
@@ -248,9 +248,9 @@ class ComposedChart(ChartBase):
 class PieChart(ChartBase):
     """A Pie chart component in Recharts."""
 
-    tag = "PieChart"
+    tag: str = "PieChart"
 
-    alias = "RechartsPieChart"
+    alias: str = "RechartsPieChart"
 
     # Valid children components
     _valid_children: List[str] = [
@@ -278,9 +278,9 @@ class PieChart(ChartBase):
 class RadarChart(ChartBase):
     """A Radar chart component in Recharts."""
 
-    tag = "RadarChart"
+    tag: str = "RadarChart"
 
-    alias = "RechartsRadarChart"
+    alias: str = "RechartsRadarChart"
 
     # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
     cx: Var[Union[int, str]]
@@ -327,9 +327,9 @@ class RadarChart(ChartBase):
 class RadialBarChart(ChartBase):
     """A RadialBar chart component in Recharts."""
 
-    tag = "RadialBarChart"
+    tag: str = "RadialBarChart"
 
-    alias = "RechartsRadialBarChart"
+    alias: str = "RechartsRadialBarChart"
 
     # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
     cx: Var[Union[int, str]]
@@ -385,9 +385,9 @@ class RadialBarChart(ChartBase):
 class ScatterChart(ChartBase):
     """A Scatter chart component in Recharts."""
 
-    tag = "ScatterChart"
+    tag: str = "ScatterChart"
 
-    alias = "RechartsScatterChart"
+    alias: str = "RechartsScatterChart"
 
     # Valid children components
     _valid_children: List[str] = [
@@ -423,9 +423,9 @@ class ScatterChart(ChartBase):
 class FunnelChart(RechartsCharts):
     """A Funnel chart component in Recharts."""
 
-    tag = "FunnelChart"
+    tag: str = "FunnelChart"
 
-    alias = "RechartsFunnelChart"
+    alias: str = "RechartsFunnelChart"
 
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
@@ -474,9 +474,9 @@ class FunnelChart(RechartsCharts):
 class Treemap(RechartsCharts):
     """A Treemap chart component in Recharts."""
 
-    tag = "Treemap"
+    tag: str = "Treemap"
 
-    alias = "RechartsTreemap"
+    alias: str = "RechartsTreemap"
 
     # The width of chart container. String or Integer
     width: Var[Union[str, int]] = "100%"  # type: ignore
diff --git a/reflex/components/graphing/recharts/general.py b/reflex/components/graphing/recharts/general.py
index ad23204d6..6a7c12d73 100644
--- a/reflex/components/graphing/recharts/general.py
+++ b/reflex/components/graphing/recharts/general.py
@@ -20,9 +20,9 @@ from .recharts import (
 class ResponsiveContainer(Recharts, MemoizationLeaf):
     """A base class for responsive containers in Recharts."""
 
-    tag = "ResponsiveContainer"
+    tag: str = "ResponsiveContainer"
 
-    alias = "RechartsResponsiveContainer"
+    alias: str = "RechartsResponsiveContainer"
 
     # The aspect ratio of the container. The final aspect ratio of the SVG element will be (width / height) * aspect. Number
     aspect: Var[int]
@@ -59,9 +59,9 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
 class Legend(Recharts):
     """A Legend component in Recharts."""
 
-    tag = "Legend"
+    tag: str = "Legend"
 
-    alias = "RechartsLegend"
+    alias: str = "RechartsLegend"
 
     # The width of legend container. Number
     width: Var[int]
@@ -112,9 +112,9 @@ class Legend(Recharts):
 class GraphingTooltip(Recharts):
     """A Tooltip component in Recharts."""
 
-    tag = "Tooltip"
+    tag: str = "Tooltip"
 
-    alias = "RechartsTooltip"
+    alias: str = "RechartsTooltip"
 
     # The separator between name and value.
     separator: Var[str]
@@ -144,9 +144,9 @@ class GraphingTooltip(Recharts):
 class Label(Recharts):
     """A Label component in Recharts."""
 
-    tag = "Label"
+    tag: str = "Label"
 
-    alias = "RechartsLabel"
+    alias: str = "RechartsLabel"
 
     # The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.
     view_box: Var[Dict[str, Any]]
@@ -164,9 +164,9 @@ class Label(Recharts):
 class LabelList(Recharts):
     """A LabelList component in Recharts."""
 
-    tag = "LabelList"
+    tag: str = "LabelList"
 
-    alias = "RechartsLabelList"
+    alias: str = "RechartsLabelList"
 
     # The key of a group of label values in data.
     data_key: Var[Union[str, int]]
diff --git a/reflex/components/graphing/recharts/polar.py b/reflex/components/graphing/recharts/polar.py
index 256695740..5e4c6b780 100644
--- a/reflex/components/graphing/recharts/polar.py
+++ b/reflex/components/graphing/recharts/polar.py
@@ -18,9 +18,9 @@ from .recharts import (
 class Pie(Recharts):
     """A Pie chart component in Recharts."""
 
-    tag = "Pie"
+    tag: str = "Pie"
 
-    alias = "RechartsPie"
+    alias: str = "RechartsPie"
 
     # data
     data: Var[List[Dict[str, Any]]]
@@ -92,9 +92,9 @@ class Pie(Recharts):
 class Radar(Recharts):
     """A Radar chart component in Recharts."""
 
-    tag = "Radar"
+    tag: str = "Radar"
 
-    alias = "RechartsRadar"
+    alias: str = "RechartsRadar"
 
     # The key of a group of data which should be unique in a radar chart.
     data_key: Var[Union[str, int]]
@@ -136,9 +136,9 @@ class Radar(Recharts):
 class RadialBar(Recharts):
     """A RadialBar chart component in Recharts."""
 
-    tag = "RadialBar"
+    tag: str = "RadialBar"
 
-    alias = "RechartsRadialBar"
+    alias: str = "RechartsRadialBar"
 
     # The source data which each element is an object.
     data: Var[List[Dict[str, Any]]]
@@ -177,9 +177,9 @@ class RadialBar(Recharts):
 class PolarAngleAxis(Recharts):
     """A PolarAngleAxis component in Recharts."""
 
-    tag = "PolarAngleAxis"
+    tag: str = "PolarAngleAxis"
 
-    alias = "RechartsPolarAngleAxis"
+    alias: str = "RechartsPolarAngleAxis"
 
     # The key of a group of data which should be unique to show the meaning of angle axis.
     data_key: Var[Union[str, int]]
@@ -236,9 +236,9 @@ class PolarAngleAxis(Recharts):
 class PolarGrid(Recharts):
     """A PolarGrid component in Recharts."""
 
-    tag = "PolarGrid"
+    tag: str = "PolarGrid"
 
-    alias = "RechartsPolarGrid"
+    alias: str = "RechartsPolarGrid"
 
     # The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.
     cx: Var[Union[int, str]]
@@ -268,9 +268,9 @@ class PolarGrid(Recharts):
 class PolarRadiusAxis(Recharts):
     """A PolarRadiusAxis component in Recharts."""
 
-    tag = "PolarRadiusAxis"
+    tag: str = "PolarRadiusAxis"
 
-    alias = "RechartsPolarRadiusAxis"
+    alias: str = "RechartsPolarRadiusAxis"
 
     # The angle of radial direction line to display axis text.
     angle: Var[int]
diff --git a/reflex/components/graphing/recharts/recharts.py b/reflex/components/graphing/recharts/recharts.py
index 28c8a5c8a..8de084883 100644
--- a/reflex/components/graphing/recharts/recharts.py
+++ b/reflex/components/graphing/recharts/recharts.py
@@ -7,13 +7,13 @@ from reflex.components.component import Component, MemoizationLeaf, NoSSRCompone
 class Recharts(Component):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@2.8.0"
+    library: str = "recharts@2.8.0"
 
 
 class RechartsCharts(NoSSRComponent, MemoizationLeaf):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@2.8.0"
+    library: str = "recharts@2.8.0"
 
 
 LiteralAnimationEasing = Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"]
diff --git a/reflex/components/layout/aspect_ratio.py b/reflex/components/layout/aspect_ratio.py
index c12101632..1d689851a 100644
--- a/reflex/components/layout/aspect_ratio.py
+++ b/reflex/components/layout/aspect_ratio.py
@@ -7,7 +7,7 @@ from reflex.vars import Var
 class AspectRatio(ChakraComponent):
     """AspectRatio component is used to embed responsive videos and maps, etc."""
 
-    tag = "AspectRatio"
+    tag: str = "AspectRatio"
 
     # The aspect ratio of the Box
     ratio: Var[float]
diff --git a/reflex/components/layout/box.py b/reflex/components/layout/box.py
index 6ba2a53b2..8a2b7994e 100644
--- a/reflex/components/layout/box.py
+++ b/reflex/components/layout/box.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Box(ChakraComponent):
     """A generic container component that can contain other components."""
 
-    tag = "Box"
+    tag: str = "Box"
 
     # The type element to render. You can specify an image, video, or any other HTML element such as iframe.
     element: Var[str]
diff --git a/reflex/components/layout/card.py b/reflex/components/layout/card.py
index 0d382dc73..11feff6e3 100644
--- a/reflex/components/layout/card.py
+++ b/reflex/components/layout/card.py
@@ -15,25 +15,25 @@ from reflex.vars import Var
 class CardHeader(ChakraComponent):
     """The wrapper that contains a card's header."""
 
-    tag = "CardHeader"
+    tag: str = "CardHeader"
 
 
 class CardBody(ChakraComponent):
     """The wrapper that houses the card's main content."""
 
-    tag = "CardBody"
+    tag: str = "CardBody"
 
 
 class CardFooter(ChakraComponent):
     """The footer that houses the card actions."""
 
-    tag = "CardFooter"
+    tag: str = "CardFooter"
 
 
 class Card(ChakraComponent):
     """The parent wrapper that provides context for its children."""
 
-    tag = "Card"
+    tag: str = "Card"
 
     # [required] The flex alignment of the card
     align: Var[str]
diff --git a/reflex/components/layout/center.py b/reflex/components/layout/center.py
index bae35e88c..d8f788f14 100644
--- a/reflex/components/layout/center.py
+++ b/reflex/components/layout/center.py
@@ -6,16 +6,16 @@ from reflex.components.libs.chakra import ChakraComponent
 class Center(ChakraComponent):
     """A box that centers its contents."""
 
-    tag = "Center"
+    tag: str = "Center"
 
 
 class Square(ChakraComponent):
     """A centered square container."""
 
-    tag = "Square"
+    tag: str = "Square"
 
 
 class Circle(ChakraComponent):
     """A square container with round border-radius."""
 
-    tag = "Circle"
+    tag: str = "Circle"
diff --git a/reflex/components/layout/container.py b/reflex/components/layout/container.py
index b57d5813e..060c00a7c 100644
--- a/reflex/components/layout/container.py
+++ b/reflex/components/layout/container.py
@@ -7,7 +7,7 @@ from reflex.vars import Var
 class Container(ChakraComponent):
     """A flexbox container that centers its children and sets a max width."""
 
-    tag = "Container"
+    tag: str = "Container"
 
     # If true, container will center its children regardless of their width.
     center_content: Var[bool]
diff --git a/reflex/components/layout/flex.py b/reflex/components/layout/flex.py
index 73cd01e32..21fbe0285 100644
--- a/reflex/components/layout/flex.py
+++ b/reflex/components/layout/flex.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Flex(ChakraComponent):
     """A reflexive container component."""
 
-    tag = "Flex"
+    tag: str = "Flex"
 
     # How to align items in the flex.
     align: Var[str]
diff --git a/reflex/components/layout/fragment.py b/reflex/components/layout/fragment.py
index 99554ede9..60357cb55 100644
--- a/reflex/components/layout/fragment.py
+++ b/reflex/components/layout/fragment.py
@@ -5,5 +5,5 @@ from reflex.components.component import Component
 class Fragment(Component):
     """A React fragment to return multiple components from a function without wrapping it in a container."""
 
-    library = "react"
-    tag = "Fragment"
+    library: str = "react"
+    tag: str = "Fragment"
diff --git a/reflex/components/layout/grid.py b/reflex/components/layout/grid.py
index 8e62166cc..0bcd207d7 100644
--- a/reflex/components/layout/grid.py
+++ b/reflex/components/layout/grid.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Grid(ChakraComponent):
     """A grid component."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
     # Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_
@@ -44,7 +44,7 @@ class Grid(ChakraComponent):
 class GridItem(ChakraComponent):
     """Used as a child of Grid to control the span, and start positions within the grid."""
 
-    tag = "GridItem"
+    tag: str = "GridItem"
 
     # Shorthand prop for gridArea
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)_
@@ -74,7 +74,7 @@ class GridItem(ChakraComponent):
 class ResponsiveGrid(ChakraComponent):
     """A responsive grid component."""
 
-    tag = "SimpleGrid"
+    tag: str = "SimpleGrid"
 
     # Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_
diff --git a/reflex/components/layout/spacer.py b/reflex/components/layout/spacer.py
index 18a6a34af..61b2677ad 100644
--- a/reflex/components/layout/spacer.py
+++ b/reflex/components/layout/spacer.py
@@ -6,4 +6,4 @@ from reflex.components.libs.chakra import ChakraComponent
 class Spacer(ChakraComponent):
     """A flexible space component."""
 
-    tag = "Spacer"
+    tag: str = "Spacer"
diff --git a/reflex/components/layout/stack.py b/reflex/components/layout/stack.py
index e2b39e66a..576726e4a 100644
--- a/reflex/components/layout/stack.py
+++ b/reflex/components/layout/stack.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Stack(ChakraComponent):
     """Container to stack elements with spacing."""
 
-    tag = "Stack"
+    tag: str = "Stack"
 
     # Shorthand for alignItems style prop
     align_items: Var[str]
@@ -39,10 +39,10 @@ class Stack(ChakraComponent):
 class Hstack(Stack):
     """Stack items horizontally."""
 
-    tag = "HStack"
+    tag: str = "HStack"
 
 
 class Vstack(Stack):
     """Stack items vertically."""
 
-    tag = "VStack"
+    tag: str = "VStack"
diff --git a/reflex/components/layout/wrap.py b/reflex/components/layout/wrap.py
index 0a8d9864b..460bac35c 100644
--- a/reflex/components/layout/wrap.py
+++ b/reflex/components/layout/wrap.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Wrap(ChakraComponent):
     """Layout component used to add space between elements and wrap automatically if there isn't enough space."""
 
-    tag = "Wrap"
+    tag: str = "Wrap"
 
     # How to align the items.
     align: Var[str]
@@ -54,4 +54,4 @@ class Wrap(ChakraComponent):
 class WrapItem(ChakraComponent):
     """Item of the Wrap component."""
 
-    tag = "WrapItem"
+    tag: str = "WrapItem"
diff --git a/reflex/components/libs/chakra.py b/reflex/components/libs/chakra.py
index 2244be898..9a42d49a6 100644
--- a/reflex/components/libs/chakra.py
+++ b/reflex/components/libs/chakra.py
@@ -12,7 +12,7 @@ from reflex.vars import Var
 class ChakraComponent(Component):
     """A component that wraps a Chakra component."""
 
-    library = "@chakra-ui/react@2.6.1"
+    library: str = "@chakra-ui/react@2.6.1"
     lib_dependencies: List[str] = [
         "@chakra-ui/system@2.5.7",
         "focus-visible@5.2.0",
@@ -74,12 +74,12 @@ class ChakraComponent(Component):
 class Global(Component):
     """The emotion/react Global styling component."""
 
-    library = "@emotion/react@^11.11.0"
+    library: str = "@emotion/react@^11.11.0"
     lib_dependencies: List[str] = [
         "@emotion/styled@^11.11.0",
     ]
 
-    tag = "Global"
+    tag: str = "Global"
 
     styles: Var[str]
 
@@ -87,7 +87,7 @@ class Global(Component):
 class ChakraProvider(ChakraComponent):
     """Top level Chakra provider must be included in any app using chakra components."""
 
-    tag = "ChakraProvider"
+    tag: str = "ChakraProvider"
 
     theme: Var[str]
 
@@ -141,9 +141,9 @@ chakra_provider = ChakraProvider.create()
 class ChakraColorModeProvider(Component):
     """Next-themes integration for chakra colorModeProvider."""
 
-    library = "/components/reflex/chakra_color_mode_provider.js"
-    tag = "ChakraColorModeProvider"
-    is_default = True
+    library: str = "/components/reflex/chakra_color_mode_provider.js"
+    tag: str = "ChakraColorModeProvider"
+    is_default: bool = True
 
 
 chakra_color_mode_provider = ChakraColorModeProvider.create()
diff --git a/reflex/components/libs/react_player.py b/reflex/components/libs/react_player.py
index cb52337c5..8e5271da6 100644
--- a/reflex/components/libs/react_player.py
+++ b/reflex/components/libs/react_player.py
@@ -11,11 +11,11 @@ class ReactPlayerComponent(NoSSRComponent):
     reference: https://github.com/cookpete/react-player.
     """
 
-    library = "react-player@2.12.0"
+    library: str = "react-player@2.12.0"
 
-    tag = "ReactPlayer"
+    tag: str = "ReactPlayer"
 
-    is_default = True
+    is_default: bool = True
 
     # The url of a video or song to play
     url: Var[str]
diff --git a/reflex/components/media/avatar.py b/reflex/components/media/avatar.py
index 40c4040e0..62394fc0b 100644
--- a/reflex/components/media/avatar.py
+++ b/reflex/components/media/avatar.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Avatar(ChakraComponent):
     """The image that represents the user."""
 
-    tag = "Avatar"
+    tag: str = "Avatar"
 
     # The default avatar used as fallback when name, and src is not specified.
     icon: Var[str]
@@ -51,13 +51,13 @@ class Avatar(ChakraComponent):
 class AvatarBadge(ChakraComponent):
     """A wrapper that displays its content on the right corner of the avatar."""
 
-    tag = "AvatarBadge"
+    tag: str = "AvatarBadge"
 
 
 class AvatarGroup(ChakraComponent):
     """A wrapper to stack multiple Avatars together."""
 
-    tag = "AvatarGroup"
+    tag: str = "AvatarGroup"
 
     # The maximum number of visible avatars.
     max_: Var[int]
diff --git a/reflex/components/media/icon.py b/reflex/components/media/icon.py
index 18fc9edc6..53f52217d 100644
--- a/reflex/components/media/icon.py
+++ b/reflex/components/media/icon.py
@@ -8,13 +8,13 @@ from reflex.utils import format
 class ChakraIconComponent(ChakraComponent):
     """A component that wraps a Chakra icon component."""
 
-    library = "@chakra-ui/icons@2.0.19"
+    library: str = "@chakra-ui/icons@2.0.19"
 
 
 class Icon(ChakraIconComponent):
     """An image icon."""
 
-    tag = "None"
+    tag: str = "None"
 
     @classmethod
     def create(cls, *children, **props):
diff --git a/reflex/components/navigation/breadcrumb.py b/reflex/components/navigation/breadcrumb.py
index 21f8fb432..4ab743e51 100644
--- a/reflex/components/navigation/breadcrumb.py
+++ b/reflex/components/navigation/breadcrumb.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Breadcrumb(ChakraComponent):
     """The parent container for breadcrumbs."""
 
-    tag = "Breadcrumb"
+    tag: str = "Breadcrumb"
 
     # The visual separator between each breadcrumb item
     separator: Var[str]
@@ -51,7 +51,7 @@ class Breadcrumb(ChakraComponent):
 class BreadcrumbItem(ChakraComponent):
     """Individual breadcrumb element containing a link and a divider."""
 
-    tag = "BreadcrumbItem"
+    tag: str = "BreadcrumbItem"
 
     # Is the current page of the breadcrumb.
     is_current_page: Var[bool]
@@ -86,13 +86,13 @@ class BreadcrumbItem(ChakraComponent):
 class BreadcrumbSeparator(ChakraComponent):
     """The visual separator between each breadcrumb."""
 
-    tag = "BreadcrumbSeparator"
+    tag: str = "BreadcrumbSeparator"
 
 
 class BreadcrumbLink(Link):
     """The breadcrumb link."""
 
-    tag = "BreadcrumbLink"
+    tag: str = "BreadcrumbLink"
 
     # Is the current page of the breadcrumb.
     is_current_page: Var[bool]
diff --git a/reflex/components/navigation/client_side_routing.py b/reflex/components/navigation/client_side_routing.py
index 99f0f6cfd..5ed0dc256 100644
--- a/reflex/components/navigation/client_side_routing.py
+++ b/reflex/components/navigation/client_side_routing.py
@@ -20,8 +20,8 @@ route_not_found: Var = Var.create_safe(constants.ROUTE_NOT_FOUND)
 class ClientSideRouting(Component):
     """The client-side routing component."""
 
-    library = "/utils/client_side_routing"
-    tag = "useClientSideRouting"
+    library: str = "/utils/client_side_routing"
+    tag: str = "useClientSideRouting"
 
     def _get_hooks(self) -> str:
         """Get the hooks to render.
@@ -61,8 +61,8 @@ def wait_for_client_redirect(component) -> Component:
 class Default404Page(Component):
     """The NextJS default 404 page."""
 
-    library = "next/error"
-    tag = "Error"
-    is_default = True
+    library: str = "next/error"
+    tag: str = "Error"
+    is_default: bool = True
 
     status_code: Var[int] = 404  # type: ignore
diff --git a/reflex/components/navigation/link.py b/reflex/components/navigation/link.py
index 3894a00b3..d5fc4cd36 100644
--- a/reflex/components/navigation/link.py
+++ b/reflex/components/navigation/link.py
@@ -7,13 +7,13 @@ from reflex.components.navigation.nextlink import NextLink
 from reflex.utils import imports
 from reflex.vars import BaseVar, Var
 
-next_link = NextLink.create()
+next_link = NextLink.create(href="")
 
 
 class Link(ChakraComponent):
     """Link to another page."""
 
-    tag = "Link"
+    tag: str = "Link"
 
     # The rel.
     rel: Var[str]
diff --git a/reflex/components/navigation/linkoverlay.py b/reflex/components/navigation/linkoverlay.py
index 969ddd239..82a7e3ed0 100644
--- a/reflex/components/navigation/linkoverlay.py
+++ b/reflex/components/navigation/linkoverlay.py
@@ -7,7 +7,7 @@ from reflex.vars import Var
 class LinkOverlay(ChakraComponent):
     """Wraps child component in a link."""
 
-    tag = "LinkOverlay"
+    tag: str = "LinkOverlay"
 
     # If true, the link will open in new tab
     is_external: Var[bool]
@@ -19,4 +19,4 @@ class LinkOverlay(ChakraComponent):
 class LinkBox(ChakraComponent):
     """The LinkBox lifts any nested links to the top using z-index to ensure proper keyboard navigation between links."""
 
-    tag = "LinkBox"
+    tag: str = "LinkBox"
diff --git a/reflex/components/navigation/nextlink.py b/reflex/components/navigation/nextlink.py
index be32cd8e5..c0e891cca 100644
--- a/reflex/components/navigation/nextlink.py
+++ b/reflex/components/navigation/nextlink.py
@@ -7,11 +7,11 @@ from reflex.vars import Var
 class NextLink(Component):
     """Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>."""
 
-    library = "next/link"
+    library: str = "next/link"
 
-    tag = "NextLink"
+    tag: str = "NextLink"
 
-    is_default = True
+    is_default: bool = True
 
     # The page to link to.
     href: Var[str]
diff --git a/reflex/components/navigation/stepper.py b/reflex/components/navigation/stepper.py
index 2ca6d1cf2..9c8d1a06f 100644
--- a/reflex/components/navigation/stepper.py
+++ b/reflex/components/navigation/stepper.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Stepper(ChakraComponent):
     """The parent container for a stepper."""
 
-    tag = "Stepper"
+    tag: str = "Stepper"
 
     orientation: Var[Literal["vertical", "horizontal"]]
 
@@ -58,37 +58,37 @@ class Stepper(ChakraComponent):
 class Step(ChakraComponent):
     """A component for an individual step in the stepper."""
 
-    tag = "Step"
+    tag: str = "Step"
 
 
 class StepDescription(ChakraComponent):
     """The description text for a step component."""
 
-    tag = "StepDescription"
+    tag: str = "StepDescription"
 
 
 class StepIcon(ChakraComponent):
     """The icon displayed in a step indicator component."""
 
-    tag = "StepIcon"
+    tag: str = "StepIcon"
 
 
 class StepIndicator(ChakraComponent):
     """The component displaying the status of a step."""
 
-    tag = "StepIndicator"
+    tag: str = "StepIndicator"
 
 
 class StepNumber(ChakraComponent):
     """The number of a step displayed in a step indicator component."""
 
-    tag = "StepNumber"
+    tag: str = "StepNumber"
 
 
 class StepSeparator(ChakraComponent):
     """The component separting steps."""
 
-    tag = "StepSeparator"
+    tag: str = "StepSeparator"
 
 
 class StepStatus(ChakraComponent):
@@ -104,10 +104,10 @@ class StepStatus(ChakraComponent):
 
     incomplete: Var[str]
 
-    tag = "StepStatus"
+    tag: str = "StepStatus"
 
 
 class StepTitle(ChakraComponent):
     """The title text for a step component."""
 
-    tag = "StepTitle"
+    tag: str = "StepTitle"
diff --git a/reflex/components/next/image.py b/reflex/components/next/image.py
index 10556d5ad..96d1e1a2b 100644
--- a/reflex/components/next/image.py
+++ b/reflex/components/next/image.py
@@ -11,9 +11,9 @@ from .base import NextComponent
 class Image(NextComponent):
     """Display an image."""
 
-    tag = "Image"
-    library = "next/image"
-    is_default = True
+    tag: str = "Image"
+    library: str = "next/image"
+    is_default: bool = True
 
     # This can be either an absolute external URL, or an internal path
     src: Var[Any]
diff --git a/reflex/components/next/video.py b/reflex/components/next/video.py
index ae6007671..a7ab5e2aa 100644
--- a/reflex/components/next/video.py
+++ b/reflex/components/next/video.py
@@ -11,9 +11,9 @@ from .base import NextComponent
 class Video(NextComponent):
     """A video component from NextJS."""
 
-    tag = "Video"
-    library = "next-video"
-    is_default = True
+    tag: str = "Video"
+    library: str = "next-video"
+    is_default: bool = True
     # the URL
     src: Var[str]
 
diff --git a/reflex/components/overlay/alertdialog.py b/reflex/components/overlay/alertdialog.py
index 47d6f343f..919bfa52a 100644
--- a/reflex/components/overlay/alertdialog.py
+++ b/reflex/components/overlay/alertdialog.py
@@ -12,7 +12,7 @@ from reflex.vars import Var
 class AlertDialog(ChakraComponent):
     """Provides context and state for the dialog."""
 
-    tag = "AlertDialog"
+    tag: str = "AlertDialog"
 
     # If true, the modal will be open.
     is_open: Var[bool]
@@ -122,34 +122,34 @@ class AlertDialog(ChakraComponent):
 class AlertDialogBody(ChakraComponent):
     """Should contain the description announced by screen readers."""
 
-    tag = "AlertDialogBody"
+    tag: str = "AlertDialogBody"
 
 
 class AlertDialogHeader(ChakraComponent):
     """Should contain the title announced by screen readers."""
 
-    tag = "AlertDialogHeader"
+    tag: str = "AlertDialogHeader"
 
 
 class AlertDialogFooter(ChakraComponent):
     """Should contain the events of the dialog."""
 
-    tag = "AlertDialogFooter"
+    tag: str = "AlertDialogFooter"
 
 
 class AlertDialogContent(ChakraComponent):
     """The wrapper for the alert dialog's content."""
 
-    tag = "AlertDialogContent"
+    tag: str = "AlertDialogContent"
 
 
 class AlertDialogOverlay(ChakraComponent):
     """The dimmed overlay behind the dialog."""
 
-    tag = "AlertDialogOverlay"
+    tag: str = "AlertDialogOverlay"
 
 
 class AlertDialogCloseButton(ChakraComponent):
     """The button that closes the dialog."""
 
-    tag = "AlertDialogCloseButton"
+    tag: str = "AlertDialogCloseButton"
diff --git a/reflex/components/overlay/drawer.py b/reflex/components/overlay/drawer.py
index 15dee7001..f348e117d 100644
--- a/reflex/components/overlay/drawer.py
+++ b/reflex/components/overlay/drawer.py
@@ -16,7 +16,7 @@ from reflex.vars import Var
 class Drawer(ChakraComponent):
     """A drawer component."""
 
-    tag = "Drawer"
+    tag: str = "Drawer"
 
     # If true, the modal will be open.
     is_open: Var[bool]
@@ -137,34 +137,34 @@ class Drawer(ChakraComponent):
 class DrawerBody(ChakraComponent):
     """Drawer body."""
 
-    tag = "DrawerBody"
+    tag: str = "DrawerBody"
 
 
 class DrawerHeader(ChakraComponent):
     """Drawer header."""
 
-    tag = "DrawerHeader"
+    tag: str = "DrawerHeader"
 
 
 class DrawerFooter(ChakraComponent):
     """Drawer footer."""
 
-    tag = "DrawerFooter"
+    tag: str = "DrawerFooter"
 
 
 class DrawerOverlay(ChakraComponent):
     """Drawer overlay."""
 
-    tag = "DrawerOverlay"
+    tag: str = "DrawerOverlay"
 
 
 class DrawerContent(ChakraComponent):
     """Drawer content."""
 
-    tag = "DrawerContent"
+    tag: str = "DrawerContent"
 
 
 class DrawerCloseButton(ChakraComponent):
     """Drawer close button."""
 
-    tag = "DrawerCloseButton"
+    tag: str = "DrawerCloseButton"
diff --git a/reflex/components/overlay/menu.py b/reflex/components/overlay/menu.py
index 2c38afa13..5e9b65862 100644
--- a/reflex/components/overlay/menu.py
+++ b/reflex/components/overlay/menu.py
@@ -17,7 +17,7 @@ from reflex.vars import Var
 class Menu(ChakraComponent):
     """The wrapper component provides context, state, and focus management."""
 
-    tag = "Menu"
+    tag: str = "Menu"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Var[int]
@@ -115,7 +115,7 @@ class Menu(ChakraComponent):
 class MenuButton(ChakraComponent):
     """The trigger for the menu list. Must be a direct child of Menu."""
 
-    tag = "MenuButton"
+    tag: str = "MenuButton"
 
     # The variant of the menu button.
     variant: Var[str]
@@ -130,7 +130,7 @@ class MenuButton(ChakraComponent):
 class MenuList(ChakraComponent):
     """The wrapper for the menu items. Must be a direct child of Menu."""
 
-    tag = "MenuList"
+    tag: str = "MenuList"
 
     @classmethod
     def create(
@@ -159,7 +159,7 @@ class MenuList(ChakraComponent):
 class MenuItem(ChakraComponent):
     """The trigger that handles menu selection. Must be a direct child of a MenuList."""
 
-    tag = "MenuItem"
+    tag: str = "MenuItem"
 
     # Overrides the parent menu's closeOnSelect prop.
     close_on_select: Var[bool]
@@ -180,7 +180,7 @@ class MenuItem(ChakraComponent):
 class MenuItemOption(ChakraComponent):
     """The checkable menu item, to be used with MenuOptionGroup."""
 
-    tag = "MenuItemOption"
+    tag: str = "MenuItemOption"
 
     # Overrides the parent menu's closeOnSelect prop.
     close_on_select: Var[bool]
@@ -210,13 +210,13 @@ class MenuItemOption(ChakraComponent):
 class MenuGroup(ChakraComponent):
     """A wrapper to group related menu items."""
 
-    tag = "MenuGroup"
+    tag: str = "MenuGroup"
 
 
 class MenuOptionGroup(ChakraComponent):
     """A wrapper for checkable menu items (radio and checkbox)."""
 
-    tag = "MenuOptionGroup"
+    tag: str = "MenuOptionGroup"
 
     # "checkbox" | "radio"
     type_: Var[LiteralMenuOption]
@@ -228,4 +228,4 @@ class MenuOptionGroup(ChakraComponent):
 class MenuDivider(ChakraComponent):
     """A visual separator for menu items and groups."""
 
-    tag = "MenuDivider"
+    tag: str = "MenuDivider"
diff --git a/reflex/components/overlay/modal.py b/reflex/components/overlay/modal.py
index 43d7acb53..2bd91ddf4 100644
--- a/reflex/components/overlay/modal.py
+++ b/reflex/components/overlay/modal.py
@@ -14,7 +14,7 @@ ModalSizes = Literal["xs", "sm", "md", "lg", "xl", "full"]
 class Modal(ChakraComponent):
     """The wrapper that provides context for its children."""
 
-    tag = "Modal"
+    tag: str = "Modal"
 
     # If true, the modal will be open.
     is_open: Var[bool]
@@ -133,34 +133,34 @@ class Modal(ChakraComponent):
 class ModalOverlay(ChakraComponent):
     """The dimmed overlay behind the modal dialog."""
 
-    tag = "ModalOverlay"
+    tag: str = "ModalOverlay"
 
 
 class ModalHeader(ChakraComponent):
     """The header that labels the modal dialog."""
 
-    tag = "ModalHeader"
+    tag: str = "ModalHeader"
 
 
 class ModalFooter(ChakraComponent):
     """The footer that houses the modal events."""
 
-    tag = "ModalFooter"
+    tag: str = "ModalFooter"
 
 
 class ModalContent(ChakraComponent):
     """The container for the modal dialog's content."""
 
-    tag = "ModalContent"
+    tag: str = "ModalContent"
 
 
 class ModalBody(ChakraComponent):
     """The wrapper that houses the modal's main content."""
 
-    tag = "ModalBody"
+    tag: str = "ModalBody"
 
 
 class ModalCloseButton(ChakraComponent):
     """The button that closes the modal."""
 
-    tag = "ModalCloseButton"
+    tag: str = "ModalCloseButton"
diff --git a/reflex/components/overlay/popover.py b/reflex/components/overlay/popover.py
index 8b0f5d67d..2cf2ff84d 100644
--- a/reflex/components/overlay/popover.py
+++ b/reflex/components/overlay/popover.py
@@ -16,7 +16,7 @@ from reflex.vars import Var
 class Popover(ChakraComponent):
     """The wrapper that provides props, state, and context to its children."""
 
-    tag = "Popover"
+    tag: str = "Popover"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Var[int]
@@ -144,46 +144,46 @@ class Popover(ChakraComponent):
 class PopoverContent(ChakraComponent):
     """The popover itself."""
 
-    tag = "PopoverContent"
+    tag: str = "PopoverContent"
 
 
 class PopoverHeader(ChakraComponent):
     """The header of the popover."""
 
-    tag = "PopoverHeader"
+    tag: str = "PopoverHeader"
 
 
 class PopoverFooter(ChakraComponent):
     """Display a popover footer."""
 
-    tag = "PopoverFooter"
+    tag: str = "PopoverFooter"
 
 
 class PopoverBody(ChakraComponent):
     """The body of the popover."""
 
-    tag = "PopoverBody"
+    tag: str = "PopoverBody"
 
 
 class PopoverArrow(ChakraComponent):
     """A visual arrow that points to the reference (or trigger)."""
 
-    tag = "PopoverArrow"
+    tag: str = "PopoverArrow"
 
 
 class PopoverCloseButton(ChakraComponent):
     """A button to close the popover."""
 
-    tag = "PopoverCloseButton"
+    tag: str = "PopoverCloseButton"
 
 
 class PopoverAnchor(ChakraComponent):
     """Used to wrap the position-reference element."""
 
-    tag = "PopoverAnchor"
+    tag: str = "PopoverAnchor"
 
 
 class PopoverTrigger(ChakraComponent):
     """Used to wrap the reference (or trigger) element."""
 
-    tag = "PopoverTrigger"
+    tag: str = "PopoverTrigger"
diff --git a/reflex/components/overlay/tooltip.py b/reflex/components/overlay/tooltip.py
index 98918fc7c..efda0587f 100644
--- a/reflex/components/overlay/tooltip.py
+++ b/reflex/components/overlay/tooltip.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Tooltip(ChakraComponent):
     """A tooltip message to appear."""
 
-    tag = "Tooltip"
+    tag: str = "Tooltip"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Var[int]
diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
index c3cb66286..ddd6791f5 100644
--- a/reflex/components/radix/primitives/accordion.py
+++ b/reflex/components/radix/primitives/accordion.py
@@ -19,7 +19,7 @@ DEFAULT_ANIMATION_DURATION = 250
 class AccordionComponent(Component):
     """Base class for all @radix-ui/accordion components."""
 
-    library = "@radix-ui/react-accordion@^1.1.2"
+    library: str = "@radix-ui/react-accordion@^1.1.2"
 
     # Change the default rendered element for the one passed as a child.
     as_child: Var[bool]
@@ -39,9 +39,9 @@ class AccordionComponent(Component):
 class AccordionRoot(AccordionComponent):
     """An accordion component."""
 
-    tag = "Root"
+    tag: str = "Root"
 
-    alias = "RadixAccordionRoot"
+    alias: str = "RadixAccordionRoot"
 
     # The type of accordion (single or multiple).
     type_: Var[LiteralAccordionType]
@@ -78,9 +78,9 @@ class AccordionRoot(AccordionComponent):
 class AccordionItem(AccordionComponent):
     """An accordion component."""
 
-    tag = "Item"
+    tag: str = "Item"
 
-    alias = "RadixAccordionItem"
+    alias: str = "RadixAccordionItem"
 
     # A unique identifier for the item.
     value: Var[str]
@@ -115,9 +115,9 @@ class AccordionItem(AccordionComponent):
 class AccordionHeader(AccordionComponent):
     """An accordion component."""
 
-    tag = "Header"
+    tag: str = "Header"
 
-    alias = "RadixAccordionHeader"
+    alias: str = "RadixAccordionHeader"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
@@ -131,9 +131,9 @@ class AccordionHeader(AccordionComponent):
 class AccordionTrigger(AccordionComponent):
     """An accordion component."""
 
-    tag = "Trigger"
+    tag: str = "Trigger"
 
-    alias = "RadixAccordionTrigger"
+    alias: str = "RadixAccordionTrigger"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
@@ -163,9 +163,9 @@ class AccordionTrigger(AccordionComponent):
 class AccordionContent(AccordionComponent):
     """An accordion component."""
 
-    tag = "Content"
+    tag: str = "Content"
 
-    alias = "RadixAccordionContent"
+    alias: str = "RadixAccordionContent"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
@@ -222,9 +222,9 @@ to {
 class ChevronDownIcon(Component):
     """A chevron down icon."""
 
-    library = "@radix-ui/react-icons"
+    library: str = "@radix-ui/react-icons"
 
-    tag = "ChevronDownIcon"
+    tag: str = "ChevronDownIcon"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index 0ed9f9c88..b0b7cd70e 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -47,7 +47,7 @@ class CommonMarginProps(Component):
 class RadixThemesComponent(Component):
     """Base class for all @radix-ui/themes components."""
 
-    library = "@radix-ui/themes@^2.0.0"
+    library: str = "@radix-ui/themes@^2.0.0"
 
     @classmethod
     def create(cls, *children, **props) -> Component:
@@ -118,7 +118,7 @@ class Theme(RadixThemesComponent):
     child elements as an override of the main theme.
     """
 
-    tag = "Theme"
+    tag: str = "Theme"
 
     # Whether to apply the themes background color to the theme node.
     has_background: Var[bool]
@@ -154,7 +154,7 @@ class ThemePanel(RadixThemesComponent):
     Include as a child component of Theme to use in your app.
     """
 
-    tag = "ThemePanel"
+    tag: str = "ThemePanel"
 
     default_open: Var[bool]
 
@@ -162,6 +162,6 @@ class ThemePanel(RadixThemesComponent):
 class RadixThemesColorModeProvider(Component):
     """Next-themes integration for radix themes components."""
 
-    library = "/components/reflex/radix_themes_color_mode_provider.js"
-    tag = "RadixThemesColorModeProvider"
-    is_default = True
+    library: str = "/components/reflex/radix_themes_color_mode_provider.js"
+    tag: str = "RadixThemesColorModeProvider"
+    is_default: bool = True
diff --git a/reflex/components/radix/themes/components/alertdialog.py b/reflex/components/radix/themes/components/alertdialog.py
index f4595cf53..a5dc07878 100644
--- a/reflex/components/radix/themes/components/alertdialog.py
+++ b/reflex/components/radix/themes/components/alertdialog.py
@@ -15,7 +15,7 @@ LiteralSwitchSize = Literal["1", "2", "3", "4"]
 class AlertDialog(CommonMarginProps, RadixThemesComponent):
     """A toggle switch alternative to the checkbox."""
 
-    tag = "AlertDialog.Root"
+    tag: str = "AlertDialog.Root"
 
     # The controlled open state of the dialog.
     open: Var[bool]
@@ -35,13 +35,13 @@ class AlertDialog(CommonMarginProps, RadixThemesComponent):
 class AlertDialogTrigger(CommonMarginProps, RadixThemesComponent):
     """A toggle switch alternative to the checkbox."""
 
-    tag = "AlertDialog.Trigger"
+    tag: str = "AlertDialog.Trigger"
 
 
 class AlertDialogContent(el.Div, CommonMarginProps, RadixThemesComponent):
     """A toggle switch alternative to the checkbox."""
 
-    tag = "AlertDialog.Content"
+    tag: str = "AlertDialog.Content"
 
     # Whether to force mount the content on open.
     force_mount: Var[bool]
@@ -63,10 +63,10 @@ class AlertDialogContent(el.Div, CommonMarginProps, RadixThemesComponent):
 class AlertDialogTitle(CommonMarginProps, RadixThemesComponent):
     """A toggle switch alternative to the checkbox."""
 
-    tag = "AlertDialog.Title"
+    tag: str = "AlertDialog.Title"
 
 
 class AlertDialogDescription(CommonMarginProps, RadixThemesComponent):
     """A toggle switch alternative to the checkbox."""
 
-    tag = "AlertDialog.Description"
+    tag: str = "AlertDialog.Description"
diff --git a/reflex/components/radix/themes/components/aspectratio.py b/reflex/components/radix/themes/components/aspectratio.py
index 08bfc49f0..d58fb0b91 100644
--- a/reflex/components/radix/themes/components/aspectratio.py
+++ b/reflex/components/radix/themes/components/aspectratio.py
@@ -14,7 +14,7 @@ LiteralSwitchSize = Literal["1", "2", "3", "4"]
 class AspectRatio(CommonMarginProps, RadixThemesComponent):
     """A toggle switch alternative to the checkbox."""
 
-    tag = "AspectRatio"
+    tag: str = "AspectRatio"
 
     # The ratio of the width to the height of the element
     ration: Var[Union[float, int]]
diff --git a/reflex/components/radix/themes/components/avatar.py b/reflex/components/radix/themes/components/avatar.py
index 8d0699c9f..3571fc991 100644
--- a/reflex/components/radix/themes/components/avatar.py
+++ b/reflex/components/radix/themes/components/avatar.py
@@ -17,7 +17,7 @@ LiteralSwitchSize = Literal["1", "2", "3", "4"]
 class Avatar(CommonMarginProps, RadixThemesComponent):
     """A toggle switch alternative to the checkbox."""
 
-    tag = "Avatar"
+    tag: str = "Avatar"
 
     # The ratio of the width to the height of the element
     ration: Var[float]
diff --git a/reflex/components/radix/themes/components/badge.py b/reflex/components/radix/themes/components/badge.py
index babbbe825..6b4ee9dd9 100644
--- a/reflex/components/radix/themes/components/badge.py
+++ b/reflex/components/radix/themes/components/badge.py
@@ -17,7 +17,7 @@ LiteralSwitchSize = Literal["1", "2", "3", "4"]
 class Badge(el.Span, CommonMarginProps, RadixThemesComponent):
     """A toggle switch alternative to the checkbox."""
 
-    tag = "Badge"
+    tag: str = "Badge"
 
     # The ratio of the width to the height of the element
     ration: Var[float]
diff --git a/reflex/components/radix/themes/components/button.py b/reflex/components/radix/themes/components/button.py
index 2be972a12..59ce3002c 100644
--- a/reflex/components/radix/themes/components/button.py
+++ b/reflex/components/radix/themes/components/button.py
@@ -18,7 +18,7 @@ LiteralButtonSize = Literal[1, 2, 3, 4]
 class Button(el.Button, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Button"
+    tag: str = "Button"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/components/callout.py b/reflex/components/radix/themes/components/callout.py
index cb0bae91d..bd772c33e 100644
--- a/reflex/components/radix/themes/components/callout.py
+++ b/reflex/components/radix/themes/components/callout.py
@@ -16,7 +16,7 @@ from ..base import (
 class CalloutRoot(el.Div, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Callout.Root"
+    tag: str = "Callout.Root"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
@@ -40,10 +40,10 @@ class CalloutRoot(el.Div, CommonMarginProps, RadixThemesComponent):
 class CalloutIcon(el.Div, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Callout.Icon"
+    tag: str = "Callout.Icon"
 
 
 class CalloutText(el.P, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Callout.Text"
+    tag: str = "Callout.Text"
diff --git a/reflex/components/radix/themes/components/card.py b/reflex/components/radix/themes/components/card.py
index 746eb82f4..f642bf580 100644
--- a/reflex/components/radix/themes/components/card.py
+++ b/reflex/components/radix/themes/components/card.py
@@ -13,7 +13,7 @@ from ..base import (
 class Card(el.Div, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Card"
+    tag: str = "Card"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/components/checkbox.py b/reflex/components/radix/themes/components/checkbox.py
index 19267bac1..c9209acd2 100644
--- a/reflex/components/radix/themes/components/checkbox.py
+++ b/reflex/components/radix/themes/components/checkbox.py
@@ -17,7 +17,7 @@ LiteralCheckboxSize = Literal["1", "2", "3"]
 class Checkbox(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Checkbox"
+    tag: str = "Checkbox"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/components/contextmenu.py b/reflex/components/radix/themes/components/contextmenu.py
index 1d5b3a1f5..fe474a6f6 100644
--- a/reflex/components/radix/themes/components/contextmenu.py
+++ b/reflex/components/radix/themes/components/contextmenu.py
@@ -13,7 +13,7 @@ from ..base import (
 class ContextMenuRoot(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "ContextMenu.Root"
+    tag: str = "ContextMenu.Root"
 
     # The modality of the context menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
     modal: Var[bool]
@@ -33,7 +33,7 @@ class ContextMenuRoot(CommonMarginProps, RadixThemesComponent):
 class ContextMenuTrigger(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "ContextMenu.Trigger"
+    tag: str = "ContextMenu.Trigger"
 
     # Whether the trigger is disabled
     disabled: Var[bool]
@@ -42,7 +42,7 @@ class ContextMenuTrigger(CommonMarginProps, RadixThemesComponent):
 class ContextMenuContent(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "ContextMenu.Content"
+    tag: str = "ContextMenu.Content"
 
     # Button size "1" - "4"
     size: Var[Literal["1", "2"]]
@@ -81,13 +81,13 @@ class ContextMenuContent(CommonMarginProps, RadixThemesComponent):
 class ContextMenuSub(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "ContextMenu.Sub"
+    tag: str = "ContextMenu.Sub"
 
 
 class ContextMenuSubTrigger(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "ContextMenu.SubTrigger"
+    tag: str = "ContextMenu.SubTrigger"
 
     # Whether the trigger is disabled
     disabled: Var[bool]
@@ -96,7 +96,7 @@ class ContextMenuSubTrigger(CommonMarginProps, RadixThemesComponent):
 class ContextMenuSubContent(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "ContextMenu.SubContent"
+    tag: str = "ContextMenu.SubContent"
 
     # When true, keyboard navigation will loop from last item to first, and vice versa.
     loop: Var[bool]
@@ -119,7 +119,7 @@ class ContextMenuSubContent(CommonMarginProps, RadixThemesComponent):
 class ContextMenuItem(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "ContextMenu.Item"
+    tag: str = "ContextMenu.Item"
 
     # Override theme color for button
     color: Var[LiteralAccentColor]
@@ -131,4 +131,4 @@ class ContextMenuItem(CommonMarginProps, RadixThemesComponent):
 class ContextMenuSeparator(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "ContextMenu.Separator"
+    tag: str = "ContextMenu.Separator"
diff --git a/reflex/components/radix/themes/components/dialog.py b/reflex/components/radix/themes/components/dialog.py
index 5a857b44f..e8436e4ed 100644
--- a/reflex/components/radix/themes/components/dialog.py
+++ b/reflex/components/radix/themes/components/dialog.py
@@ -13,7 +13,7 @@ from ..base import (
 class DialogRoot(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Dialog.Root"
+    tag: str = "Dialog.Root"
 
     # The controlled open state of the dialog.
     open: Var[bool]
@@ -36,19 +36,19 @@ class DialogRoot(CommonMarginProps, RadixThemesComponent):
 class DialogTrigger(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Dialog.Trigger"
+    tag: str = "Dialog.Trigger"
 
 
 class DialogTitle(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Dialog.Title"
+    tag: str = "Dialog.Title"
 
 
 class DialogContent(el.Div, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Dialog.Content"
+    tag: str = "Dialog.Content"
 
     # Button size "1" - "4"
     size: Var[Literal[1, 2, 3, 4]]
@@ -72,4 +72,4 @@ class DialogContent(el.Div, CommonMarginProps, RadixThemesComponent):
 class DialogDescription(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Dialog.Description"
+    tag: str = "Dialog.Description"
diff --git a/reflex/components/radix/themes/components/dropdownmenu.py b/reflex/components/radix/themes/components/dropdownmenu.py
index 7857516b8..67323c485 100644
--- a/reflex/components/radix/themes/components/dropdownmenu.py
+++ b/reflex/components/radix/themes/components/dropdownmenu.py
@@ -13,7 +13,7 @@ from ..base import (
 class DropdownMenuRoot(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "DropdownMenu.Root"
+    tag: str = "DropdownMenu.Root"
 
     # The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
     open: Var[bool]
@@ -36,13 +36,13 @@ class DropdownMenuRoot(CommonMarginProps, RadixThemesComponent):
 class DropdownMenuTrigger(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "DropdownMenu.Trigger"
+    tag: str = "DropdownMenu.Trigger"
 
 
 class DropdownMenuContent(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "DropdownMenu.Content"
+    tag: str = "DropdownMenu.Content"
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -62,13 +62,13 @@ class DropdownMenuContent(CommonMarginProps, RadixThemesComponent):
 class DropdownMenuSubTrigger(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "DropdownMenu.SubTrigger"
+    tag: str = "DropdownMenu.SubTrigger"
 
 
 class DropdownMenuSubContent(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "DropdownMenu.SubContent"
+    tag: str = "DropdownMenu.SubContent"
 
     # Button size "1" - "4"
     size: Var[Literal["1", "2"]]
@@ -86,7 +86,7 @@ class DropdownMenuSubContent(CommonMarginProps, RadixThemesComponent):
 class DropdownMenuItem(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "DropdownMenu.Item"
+    tag: str = "DropdownMenu.Item"
 
     # Override theme color for button
     color: Var[LiteralAccentColor]
@@ -98,4 +98,4 @@ class DropdownMenuItem(CommonMarginProps, RadixThemesComponent):
 class DropdownMenuSeparator(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "DropdownMenu.Separator"
+    tag: str = "DropdownMenu.Separator"
diff --git a/reflex/components/radix/themes/components/hovercard.py b/reflex/components/radix/themes/components/hovercard.py
index e3af01bf4..478ee1b22 100644
--- a/reflex/components/radix/themes/components/hovercard.py
+++ b/reflex/components/radix/themes/components/hovercard.py
@@ -13,7 +13,7 @@ from ..base import (
 class HoverCardRoot(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "HoverCard.Root"
+    tag: str = "HoverCard.Root"
 
     # The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.
     default_open: Var[bool]
@@ -42,13 +42,13 @@ class HoverCardRoot(CommonMarginProps, RadixThemesComponent):
 class HoverCardTrigger(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "HoverCard.Trigger"
+    tag: str = "HoverCard.Trigger"
 
 
 class HoverCardContent(el.Div, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "HoverCard.Content"
+    tag: str = "HoverCard.Content"
 
     # The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
     side: Var[Literal["top", "right", "bottom", "left"]]
diff --git a/reflex/components/radix/themes/components/iconbutton.py b/reflex/components/radix/themes/components/iconbutton.py
index 3a9e958f4..c935991ce 100644
--- a/reflex/components/radix/themes/components/iconbutton.py
+++ b/reflex/components/radix/themes/components/iconbutton.py
@@ -18,7 +18,7 @@ LiteralButtonSize = Literal["1", "2", "3", "4"]
 class IconButton(el.Button, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Button"
+    tag: str = "Button"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/components/icons.py b/reflex/components/radix/themes/components/icons.py
index 91f165d50..11c0448bc 100644
--- a/reflex/components/radix/themes/components/icons.py
+++ b/reflex/components/radix/themes/components/icons.py
@@ -10,13 +10,13 @@ from reflex.utils import format
 class RadixIconComponent(Component):
     """A component used as basis for Radix icons."""
 
-    library = "@radix-ui/react-icons"
+    library: str = "@radix-ui/react-icons"
 
 
 class Icon(RadixIconComponent):
     """An image Icon."""
 
-    tag = "None"
+    tag: str = "None"
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/radix/themes/components/inset.py b/reflex/components/radix/themes/components/inset.py
index 65c244cdf..8b124ba53 100644
--- a/reflex/components/radix/themes/components/inset.py
+++ b/reflex/components/radix/themes/components/inset.py
@@ -15,7 +15,7 @@ LiteralButtonSize = Literal["1", "2", "3", "4"]
 class Inset(el.Div, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Inset"
+    tag: str = "Inset"
 
     # The side
     side: Var[Literal["x", "y", "top", "bottom", "right", "left"]]
diff --git a/reflex/components/radix/themes/components/popover.py b/reflex/components/radix/themes/components/popover.py
index e22fb95b5..11f1f49cb 100644
--- a/reflex/components/radix/themes/components/popover.py
+++ b/reflex/components/radix/themes/components/popover.py
@@ -13,7 +13,7 @@ from ..base import (
 class PopoverRoot(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Popover.Root"
+    tag: str = "Popover.Root"
 
     # The controlled open state of the popover.
     open: Var[bool]
@@ -36,13 +36,13 @@ class PopoverRoot(CommonMarginProps, RadixThemesComponent):
 class PopoverTrigger(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Popover.Trigger"
+    tag: str = "Popover.Trigger"
 
 
 class PopoverContent(el.Div, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Popover.Content"
+    tag: str = "Popover.Content"
 
     # Size of the button: "1" | "2" | "3" | "4"
     size: Var[Literal[1, 2, 3, 4]]
@@ -82,4 +82,4 @@ class PopoverContent(el.Div, CommonMarginProps, RadixThemesComponent):
 class PopoverClose(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Popover.Close"
+    tag: str = "Popover.Close"
diff --git a/reflex/components/radix/themes/components/radiogroup.py b/reflex/components/radix/themes/components/radiogroup.py
index 897a0c8d1..0feecf82f 100644
--- a/reflex/components/radix/themes/components/radiogroup.py
+++ b/reflex/components/radix/themes/components/radiogroup.py
@@ -13,7 +13,7 @@ from ..base import (
 class RadioGroupRoot(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "RadioGroup.Root"
+    tag: str = "RadioGroup.Root"
 
     # The size of the radio group: "1" | "2" | "3"
     size: Var[Literal[1, 2, 3]]
@@ -60,7 +60,7 @@ class RadioGroupRoot(CommonMarginProps, RadixThemesComponent):
 class RadioGroupItem(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "RadioGroup.Item"
+    tag: str = "RadioGroup.Item"
 
     # The value of the radio item to check. Should be used in conjunction with onCheckedChange.
     value: Var[str]
diff --git a/reflex/components/radix/themes/components/scrollarea.py b/reflex/components/radix/themes/components/scrollarea.py
index ba3573e8c..bb71cb68c 100644
--- a/reflex/components/radix/themes/components/scrollarea.py
+++ b/reflex/components/radix/themes/components/scrollarea.py
@@ -13,7 +13,7 @@ from ..base import (
 class ScrollArea(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "ScrollArea"
+    tag: str = "ScrollArea"
 
     # The size of the radio group: "1" | "2" | "3"
     size: Var[Literal[1, 2, 3]]
diff --git a/reflex/components/radix/themes/components/select.py b/reflex/components/radix/themes/components/select.py
index 7a3fb3c8d..61f1837c1 100644
--- a/reflex/components/radix/themes/components/select.py
+++ b/reflex/components/radix/themes/components/select.py
@@ -16,7 +16,7 @@ LiteralButtonSize = Literal[1, 2, 3, 4]
 class SelectRoot(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Select.Root"
+    tag: str = "Select.Root"
 
     # The size of the select: "1" | "2" | "3"
     size: Var[Literal[1, 2, 3]]
@@ -52,7 +52,7 @@ class SelectRoot(CommonMarginProps, RadixThemesComponent):
 class SelectTrigger(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Select.Trigger"
+    tag: str = "Select.Trigger"
 
     # Variant of the select trigger
     variant: Var[Literal["classic", "surface", "soft", "ghost"]]
@@ -70,7 +70,7 @@ class SelectTrigger(CommonMarginProps, RadixThemesComponent):
 class SelectContent(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Select.Content"
+    tag: str = "Select.Content"
 
     # The variant of the select content
     variant: Var[Literal["solid", "soft"]]
@@ -113,13 +113,13 @@ class SelectContent(CommonMarginProps, RadixThemesComponent):
 class SelectGroup(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Select.Group"
+    tag: str = "Select.Group"
 
 
 class SelectItem(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Select.Item"
+    tag: str = "Select.Item"
 
     # The value of the select item when submitting the form.
     value: Var[str]
@@ -128,10 +128,10 @@ class SelectItem(CommonMarginProps, RadixThemesComponent):
 class SelectLabel(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Select.Label"
+    tag: str = "Select.Label"
 
 
 class SelectSeparator(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Select.Separator"
+    tag: str = "Select.Separator"
diff --git a/reflex/components/radix/themes/components/separator.py b/reflex/components/radix/themes/components/separator.py
index f3f1ef9ea..aa91f03c0 100644
--- a/reflex/components/radix/themes/components/separator.py
+++ b/reflex/components/radix/themes/components/separator.py
@@ -15,7 +15,7 @@ LiteralSeperatorSize = Literal["1", "2", "3", "4"]
 class Separator(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Separator"
+    tag: str = "Separator"
 
     # The size of the select: "1" | "2" | "3"
     size: Var[LiteralSeperatorSize]
diff --git a/reflex/components/radix/themes/components/slider.py b/reflex/components/radix/themes/components/slider.py
index 6642ad380..910be73c8 100644
--- a/reflex/components/radix/themes/components/slider.py
+++ b/reflex/components/radix/themes/components/slider.py
@@ -14,7 +14,7 @@ from ..base import (
 class Slider(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Slider"
+    tag: str = "Slider"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/components/switch.py b/reflex/components/radix/themes/components/switch.py
index 173954f8f..24060cea8 100644
--- a/reflex/components/radix/themes/components/switch.py
+++ b/reflex/components/radix/themes/components/switch.py
@@ -18,7 +18,7 @@ LiteralSwitchSize = Literal["1", "2", "3", "4"]
 class Switch(CommonMarginProps, RadixThemesComponent):
     """A toggle switch alternative to the checkbox."""
 
-    tag = "Switch"
+    tag: str = "Switch"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/components/table.py b/reflex/components/radix/themes/components/table.py
index a26b60a89..963442b69 100644
--- a/reflex/components/radix/themes/components/table.py
+++ b/reflex/components/radix/themes/components/table.py
@@ -13,7 +13,7 @@ from ..base import (
 class TableRoot(el.Table, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Table.Root"
+    tag: str = "Table.Root"
 
     # The size of the table: "1" | "2" | "3"
     size: Var[Literal[1, 2, 3]]
@@ -25,13 +25,13 @@ class TableRoot(el.Table, CommonMarginProps, RadixThemesComponent):
 class TableHeader(el.Thead, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Table.Header"
+    tag: str = "Table.Header"
 
 
 class TableRow(el.Tr, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Table.Row"
+    tag: str = "Table.Row"
 
     # The alignment of the row
     align: Var[Literal["start", "center", "end", "baseline"]]
@@ -40,7 +40,7 @@ class TableRow(el.Tr, CommonMarginProps, RadixThemesComponent):
 class TableColumnHeaderCell(el.Th, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Table.ColumnHeaderCell"
+    tag: str = "Table.ColumnHeaderCell"
 
     # The justification of the column
     justify: Var[Literal["start", "center", "end"]]
@@ -52,13 +52,13 @@ class TableColumnHeaderCell(el.Th, CommonMarginProps, RadixThemesComponent):
 class TableBody(el.Tbody, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Table.Body"
+    tag: str = "Table.Body"
 
 
 class TableCell(el.Td, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Table.Cell"
+    tag: str = "Table.Cell"
 
     # The justification of the column
     justify: Var[Literal["start", "center", "end"]]
@@ -70,7 +70,7 @@ class TableCell(el.Td, CommonMarginProps, RadixThemesComponent):
 class TableRowHeaderCell(el.Th, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Table.RowHeaderCell"
+    tag: str = "Table.RowHeaderCell"
 
     # The justification of the column
     justify: Var[Literal["start", "center", "end"]]
diff --git a/reflex/components/radix/themes/components/tabs.py b/reflex/components/radix/themes/components/tabs.py
index c1b419222..90f280bc7 100644
--- a/reflex/components/radix/themes/components/tabs.py
+++ b/reflex/components/radix/themes/components/tabs.py
@@ -12,7 +12,7 @@ from ..base import (
 class TabsRoot(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Tabs.Root"
+    tag: str = "Tabs.Root"
 
     # The size of the table: "1" | "2" | "3"
     size: Var[Literal[1, 2, 3]]
@@ -44,13 +44,13 @@ class TabsRoot(CommonMarginProps, RadixThemesComponent):
 class TabsList(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Tabs.List"
+    tag: str = "Tabs.List"
 
 
 class TabsTrigger(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Tabs.Trigger"
+    tag: str = "Tabs.Trigger"
 
     # The value of the tab. Must be unique for each tab.
     value: Var[str]
@@ -62,4 +62,4 @@ class TabsTrigger(CommonMarginProps, RadixThemesComponent):
 class TabsContent(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Tabs.Content"
+    tag: str = "Tabs.Content"
diff --git a/reflex/components/radix/themes/components/textarea.py b/reflex/components/radix/themes/components/textarea.py
index f28aed35b..bf9d40c94 100644
--- a/reflex/components/radix/themes/components/textarea.py
+++ b/reflex/components/radix/themes/components/textarea.py
@@ -19,7 +19,7 @@ LiteralTextAreaSize = Literal["1", "2", "3"]
 class TextArea(CommonMarginProps, RadixThemesComponent, el.Textarea):
     """The input part of a TextArea, may be used by itself."""
 
-    tag = "TextArea"
+    tag: str = "TextArea"
 
     # The size of the text area: "1" | "2" | "3"
     size: Var[LiteralTextAreaSize]
diff --git a/reflex/components/radix/themes/components/textfield.py b/reflex/components/radix/themes/components/textfield.py
index 2f8cb1892..3022ad812 100644
--- a/reflex/components/radix/themes/components/textfield.py
+++ b/reflex/components/radix/themes/components/textfield.py
@@ -22,7 +22,7 @@ LiteralTextFieldVariant = Literal["classic", "surface", "soft"]
 class TextFieldRoot(el.Div, CommonMarginProps, RadixThemesComponent):
     """Captures user input with an optional slot for buttons and icons."""
 
-    tag = "TextField.Root"
+    tag: str = "TextField.Root"
 
     # Text field size "1" - "3"
     size: Var[LiteralTextFieldSize]
@@ -40,7 +40,7 @@ class TextFieldRoot(el.Div, CommonMarginProps, RadixThemesComponent):
 class TextFieldInput(el.Input, TextFieldRoot):
     """The input part of a TextField, may be used by itself."""
 
-    tag = "TextField.Input"
+    tag: str = "TextField.Input"
 
     @classmethod
     def create(cls, *children, **props) -> Component:
@@ -83,7 +83,7 @@ class TextFieldInput(el.Input, TextFieldRoot):
 class TextFieldSlot(RadixThemesComponent):
     """Contains icons or buttons associated with an Input."""
 
-    tag = "TextField.Slot"
+    tag: str = "TextField.Slot"
 
     # Override theme color for text field slot
     color: Var[LiteralAccentColor]
diff --git a/reflex/components/radix/themes/layout/box.py b/reflex/components/radix/themes/layout/box.py
index 4cf55169d..e5fdf3cbe 100644
--- a/reflex/components/radix/themes/layout/box.py
+++ b/reflex/components/radix/themes/layout/box.py
@@ -9,4 +9,4 @@ from .base import LayoutComponent
 class Box(el.Div, LayoutComponent):
     """A fundamental layout building block, based on <div>."""
 
-    tag = "Box"
+    tag: str = "Box"
diff --git a/reflex/components/radix/themes/layout/container.py b/reflex/components/radix/themes/layout/container.py
index 21a020b1d..36220490d 100644
--- a/reflex/components/radix/themes/layout/container.py
+++ b/reflex/components/radix/themes/layout/container.py
@@ -17,7 +17,7 @@ class Container(el.Div, LayoutComponent):
     See https://www.radix-ui.com/themes/docs/components/container
     """
 
-    tag = "Container"
+    tag: str = "Container"
 
     # The size of the container: "1" - "4" (default "4")
     size: Var[LiteralContainerSize]
diff --git a/reflex/components/radix/themes/layout/flex.py b/reflex/components/radix/themes/layout/flex.py
index f6584e6e8..7797c2a26 100644
--- a/reflex/components/radix/themes/layout/flex.py
+++ b/reflex/components/radix/themes/layout/flex.py
@@ -21,7 +21,7 @@ LiteralFlexWrap = Literal["nowrap", "wrap", "wrap-reverse"]
 class Flex(el.Div, LayoutComponent):
     """Component for creating flex layouts."""
 
-    tag = "Flex"
+    tag: str = "Flex"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/layout/grid.py b/reflex/components/radix/themes/layout/grid.py
index f9c9bd6c8..86a69dfe2 100644
--- a/reflex/components/radix/themes/layout/grid.py
+++ b/reflex/components/radix/themes/layout/grid.py
@@ -20,7 +20,7 @@ LiteralGridFlow = Literal["row", "column", "dense", "row-dense", "column-dense"]
 class Grid(el.Div, RadixThemesComponent):
     """Component for creating grid layouts."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/layout/section.py b/reflex/components/radix/themes/layout/section.py
index a86a00325..f53ac9309 100644
--- a/reflex/components/radix/themes/layout/section.py
+++ b/reflex/components/radix/themes/layout/section.py
@@ -14,7 +14,7 @@ LiteralSectionSize = Literal["1", "2", "3"]
 class Section(el.Section, LayoutComponent):
     """Denotes a section of page content."""
 
-    tag = "Section"
+    tag: str = "Section"
 
     # The size of the section: "1" - "3" (default "3")
     size: Var[LiteralSectionSize]
diff --git a/reflex/components/radix/themes/typography.py b/reflex/components/radix/themes/typography.py
index 1464e9938..9cee3b9b5 100644
--- a/reflex/components/radix/themes/typography.py
+++ b/reflex/components/radix/themes/typography.py
@@ -24,7 +24,7 @@ LiteralTextTrim = Literal["normal", "start", "end", "both"]
 class Text(CommonMarginProps, RadixThemesComponent):
     """A foundational text primitive based on the <span> element."""
 
-    tag = "Text"
+    tag: str = "Text"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
@@ -54,13 +54,13 @@ class Text(CommonMarginProps, RadixThemesComponent):
 class Heading(Text):
     """A semantic heading element."""
 
-    tag = "Heading"
+    tag: str = "Heading"
 
 
 class Blockquote(CommonMarginProps, RadixThemesComponent):
     """A block level extended quotation."""
 
-    tag = "Blockquote"
+    tag: str = "Blockquote"
 
     # Text size: "1" - "9"
     size: Var[LiteralTextSize]
@@ -78,7 +78,7 @@ class Blockquote(CommonMarginProps, RadixThemesComponent):
 class Code(Blockquote):
     """Marks text to signify a short fragment of computer code."""
 
-    tag = "Code"
+    tag: str = "Code"
 
     # The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
     variant: Var[LiteralVariant]
@@ -87,13 +87,13 @@ class Code(Blockquote):
 class Em(CommonMarginProps, RadixThemesComponent):
     """Marks text to stress emphasis."""
 
-    tag = "Em"
+    tag: str = "Em"
 
 
 class Kbd(CommonMarginProps, RadixThemesComponent):
     """Represents keyboard input or a hotkey."""
 
-    tag = "Kbd"
+    tag: str = "Kbd"
 
     # Text size: "1" - "9"
     size: Var[LiteralTextSize]
@@ -105,7 +105,7 @@ LiteralLinkUnderline = Literal["auto", "hover", "always"]
 class Link(CommonMarginProps, RadixThemesComponent):
     """A semantic element for navigation between pages."""
 
-    tag = "Link"
+    tag: str = "Link"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
@@ -132,10 +132,10 @@ class Link(CommonMarginProps, RadixThemesComponent):
 class Quote(CommonMarginProps, RadixThemesComponent):
     """A short inline quotation."""
 
-    tag = "Quote"
+    tag: str = "Quote"
 
 
 class Strong(CommonMarginProps, RadixThemesComponent):
     """Marks text to signify strong importance."""
 
-    tag = "Strong"
+    tag: str = "Strong"
diff --git a/reflex/components/radix/themes/typography/blockquote.py b/reflex/components/radix/themes/typography/blockquote.py
index cb1fa05b7..4b50e4119 100644
--- a/reflex/components/radix/themes/typography/blockquote.py
+++ b/reflex/components/radix/themes/typography/blockquote.py
@@ -21,7 +21,7 @@ from .base import (
 class Blockquote(el.Blockquote, CommonMarginProps, RadixThemesComponent):
     """A block level extended quotation."""
 
-    tag = "Blockquote"
+    tag: str = "Blockquote"
 
     # Text size: "1" - "9"
     size: Var[LiteralTextSize]
diff --git a/reflex/components/radix/themes/typography/code.py b/reflex/components/radix/themes/typography/code.py
index a73c7ce70..84278dda3 100644
--- a/reflex/components/radix/themes/typography/code.py
+++ b/reflex/components/radix/themes/typography/code.py
@@ -22,7 +22,7 @@ from .base import (
 class Code(el.Code, CommonMarginProps, RadixThemesComponent):
     """A block level extended quotation."""
 
-    tag = "Code"
+    tag: str = "Code"
 
     # The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
     variant: Var[LiteralVariant]
diff --git a/reflex/components/radix/themes/typography/em.py b/reflex/components/radix/themes/typography/em.py
index 91b9d660c..8d440d8d4 100644
--- a/reflex/components/radix/themes/typography/em.py
+++ b/reflex/components/radix/themes/typography/em.py
@@ -15,4 +15,4 @@ from ..base import (
 class Em(el.Em, CommonMarginProps, RadixThemesComponent):
     """Marks text to stress emphasis."""
 
-    tag = "Em"
+    tag: str = "Em"
diff --git a/reflex/components/radix/themes/typography/heading.py b/reflex/components/radix/themes/typography/heading.py
index cbdee555f..65f528045 100644
--- a/reflex/components/radix/themes/typography/heading.py
+++ b/reflex/components/radix/themes/typography/heading.py
@@ -23,7 +23,7 @@ from .base import (
 class Heading(el.H1, CommonMarginProps, RadixThemesComponent):
     """A foundational text primitive based on the <span> element."""
 
-    tag = "Heading"
+    tag: str = "Heading"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/typography/kbd.py b/reflex/components/radix/themes/typography/kbd.py
index a7d984a31..509247622 100644
--- a/reflex/components/radix/themes/typography/kbd.py
+++ b/reflex/components/radix/themes/typography/kbd.py
@@ -19,7 +19,7 @@ from .base import (
 class Kbd(el.Kbd, CommonMarginProps, RadixThemesComponent):
     """Represents keyboard input or a hotkey."""
 
-    tag = "Kbd"
+    tag: str = "Kbd"
 
     # Text size: "1" - "9"
     size: Var[LiteralTextSize]
diff --git a/reflex/components/radix/themes/typography/link.py b/reflex/components/radix/themes/typography/link.py
index d4880d7ca..2d8355ae7 100644
--- a/reflex/components/radix/themes/typography/link.py
+++ b/reflex/components/radix/themes/typography/link.py
@@ -25,7 +25,7 @@ LiteralLinkUnderline = Literal["auto", "hover", "always"]
 class Link(CommonMarginProps, RadixThemesComponent):
     """A semantic element for navigation between pages."""
 
-    tag = "Link"
+    tag: str = "Link"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/radix/themes/typography/quote.py b/reflex/components/radix/themes/typography/quote.py
index ed58fa8e5..e3ef1ab50 100644
--- a/reflex/components/radix/themes/typography/quote.py
+++ b/reflex/components/radix/themes/typography/quote.py
@@ -15,4 +15,4 @@ from ..base import (
 class Quote(el.Q, CommonMarginProps, RadixThemesComponent):
     """A short inline quotation."""
 
-    tag = "Quote"
+    tag: str = "Quote"
diff --git a/reflex/components/radix/themes/typography/strong.py b/reflex/components/radix/themes/typography/strong.py
index a130b65a3..7bd14c8d1 100644
--- a/reflex/components/radix/themes/typography/strong.py
+++ b/reflex/components/radix/themes/typography/strong.py
@@ -15,4 +15,4 @@ from ..base import (
 class Strong(el.Strong, CommonMarginProps, RadixThemesComponent):
     """Marks text to signify strong importance."""
 
-    tag = "Strong"
+    tag: str = "Strong"
diff --git a/reflex/components/radix/themes/typography/text.py b/reflex/components/radix/themes/typography/text.py
index 5b3b62979..662271043 100644
--- a/reflex/components/radix/themes/typography/text.py
+++ b/reflex/components/radix/themes/typography/text.py
@@ -23,7 +23,7 @@ from .base import (
 class Text(el.Span, CommonMarginProps, RadixThemesComponent):
     """A foundational text primitive based on the <span> element."""
 
-    tag = "Text"
+    tag: str = "Text"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
diff --git a/reflex/components/typography/heading.py b/reflex/components/typography/heading.py
index 0c25ccdef..2126ab666 100644
--- a/reflex/components/typography/heading.py
+++ b/reflex/components/typography/heading.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Heading(ChakraComponent):
     """A page heading."""
 
-    tag = "Heading"
+    tag: str = "Heading"
 
     # Override the tag. The default tag is `<h2>`.
     as_: Var[str]
diff --git a/reflex/components/typography/highlight.py b/reflex/components/typography/highlight.py
index 8b97aa18a..a1c03438a 100644
--- a/reflex/components/typography/highlight.py
+++ b/reflex/components/typography/highlight.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Highlight(ChakraComponent):
     """Highlights a specific part of a string."""
 
-    tag = "Highlight"
+    tag: str = "Highlight"
 
     # A query for the text to highlight. Can be a string or a list of strings.
     query: Var[List[str]]
diff --git a/reflex/components/typography/markdown.py b/reflex/components/typography/markdown.py
index fc7f84a21..80664e84d 100644
--- a/reflex/components/typography/markdown.py
+++ b/reflex/components/typography/markdown.py
@@ -79,11 +79,11 @@ def get_base_component_map() -> dict[str, Callable]:
 class Markdown(Component):
     """A markdown component."""
 
-    library = "react-markdown@8.0.7"
+    library: str = "react-markdown@8.0.7"
 
-    tag = "ReactMarkdown"
+    tag: str = "ReactMarkdown"
 
-    is_default = True
+    is_default: bool = True
 
     # The component map from a tag to a lambda that creates a component.
     component_map: Dict[str, Any] = {}
diff --git a/reflex/components/typography/span.py b/reflex/components/typography/span.py
index 65d53140e..3f9f2da79 100644
--- a/reflex/components/typography/span.py
+++ b/reflex/components/typography/span.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Span(ChakraComponent):
     """Render an inline span of text."""
 
-    tag = "Text"
+    tag: str = "Text"
 
     # Override the tag. The default tag is `<span>`.
     as_: Var[str] = "span"  # type: ignore
diff --git a/reflex/components/typography/text.py b/reflex/components/typography/text.py
index b9c99b25b..391cdcc4e 100644
--- a/reflex/components/typography/text.py
+++ b/reflex/components/typography/text.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Text(ChakraComponent):
     """Render a paragraph of text."""
 
-    tag = "Text"
+    tag: str = "Text"
 
     # Override the tag. The default tag is `<p>`.
     as_: Var[str]
diff --git a/reflex/event.py b/reflex/event.py
index da2b3a1e3..0d9cd0291 100644
--- a/reflex/event.py
+++ b/reflex/event.py
@@ -250,7 +250,7 @@ class CallableEventSpec(EventSpec):
             default_event_spec = fn()
             super().__init__(
                 fn=fn,  # type: ignore
-                **default_event_spec.dict(),
+                **dict(default_event_spec),
                 **kwargs,
             )
         else:
diff --git a/reflex/state.py b/reflex/state.py
index db756d5c2..060996af0 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -269,7 +269,7 @@ class BaseState(Base, ABC, extra=pydantic.Extra.allow):
         return f"{self.__class__.__name__}({self.dict()})"
 
     @classmethod
-    def __init_subclass__(cls, **kwargs):
+    def __pydantic_init_subclass__(cls, **kwargs):
         """Do some magic for the subclass initialization.
 
         Args:
@@ -279,7 +279,7 @@ class BaseState(Base, ABC, extra=pydantic.Extra.allow):
             ValueError: If a substate class shadows another.
         """
         is_testing_env = constants.PYTEST_CURRENT_TEST in os.environ
-        super().__init_subclass__(**kwargs)
+        #super().__init_subclass__(**kwargs)
         # Event handlers should not shadow builtin state methods.
         cls._check_overridden_methods()
 
@@ -324,11 +324,11 @@ class BaseState(Base, ABC, extra=pydantic.Extra.allow):
 
         # Set the base and computed vars.
         cls.base_vars = {
-            f.name: BaseVar(_var_name=f.name, _var_type=f.outer_type_)._var_set_state(
+            field_name: BaseVar(_var_name=field_name, _var_type=field.annotation)._var_set_state(
                 cls
             )
-            for f in cls.get_fields().values()
-            if f.name not in cls.get_skip_vars()
+            for field_name, field in cls.get_fields().items()
+            if field_name not in cls.get_skip_vars()
         }
         cls.computed_vars = {
             v._var_name: v._var_set_state(cls)
@@ -640,13 +640,12 @@ class BaseState(Base, ABC, extra=pydantic.Extra.allow):
         """
         # Get the pydantic field for the var.
         field = cls.get_fields()[prop._var_name]
-        if field.required:
+        if field.is_required():
             default_value = prop.get_default_value()
             if default_value is not None:
-                field.required = False
                 field.default = default_value
         if (
-            not field.required
+            not field.is_required()
             and field.default is None
             and not types.is_optional(prop._var_type)
         ):
diff --git a/reflex/utils/types.py b/reflex/utils/types.py
index 2daec15d9..efdd0ee85 100644
--- a/reflex/utils/types.py
+++ b/reflex/utils/types.py
@@ -18,7 +18,7 @@ from typing import (
     get_type_hints,
 )
 
-from pydantic.fields import ModelField
+# from pydantic.fields import ModelField
 from sqlalchemy.orm import Mapped
 
 from reflex.base import Base
@@ -121,7 +121,8 @@ def get_attribute_access_type(cls: GenericType, name: str) -> GenericType | None
     if hasattr(cls, "__fields__") and name in cls.__fields__:
         # pydantic models
         field = cls.__fields__[name]
-        type_ = field.outer_type_
+        type_ = field.annotation
+        raise RuntimeError("Pydantic V2 field type says what?")
         if isinstance(type_, ModelField):
             type_ = type_.type_
         if not field.required and field.default is None:
@@ -136,6 +137,7 @@ def get_attribute_access_type(cls: GenericType, name: str) -> GenericType | None
             type_origin = get_origin(type_)
             if isinstance(type_origin, type) and issubclass(type_origin, Mapped):
                 return get_args(type_)[0]  # SQLAlchemy v2
+            raise RuntimeError("Pydantic V2 field type says what?")
             if isinstance(type_, ModelField):
                 return type_.type_  # SQLAlchemy v1.4
             return type_
diff --git a/reflex/vars.py b/reflex/vars.py
index 49b395ac7..25144fc1a 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -167,7 +167,7 @@ class VarData(Base):
             == imports.collapse_imports(other.imports)
         )
 
-    def dict(self) -> dict:
+    def __dict(self) -> dict:
         """Convert the var data to a dictionary.
 
         Returns:
@@ -458,6 +458,9 @@ class Var:
         Raises:
             TypeError: when attempting to bool-ify the Var.
         """
+        # pydantic v2 hacks
+        if inspect.stack()[1].function in ("smart_deepcopy"):
+            return bool(self._decode())
         raise TypeError(
             f"Cannot convert Var {self._var_full_name!r} to bool for use with `if`, `and`, `or`, and `not`. "
             "Instead use `rx.cond` and bitwise operators `&` (and), `|` (or), `~` (invert)."
@@ -1535,6 +1538,10 @@ class Var:
 serializers.serializer(_encode_var)
 
 
+# Marker for a Var that was not passed
+UnspecifiedVar = Var()
+
+
 @dataclasses.dataclass(
     eq=False,
     **{"slots": True} if sys.version_info >= (3, 10) else {},
diff --git a/scripts/importreflex.py b/scripts/importreflex.py
new file mode 100644
index 000000000..ad6b22f28
--- /dev/null
+++ b/scripts/importreflex.py
@@ -0,0 +1,3 @@
+import reflex as rx
+
+print(rx.data_editor())
diff --git a/tests/components/test_component.py b/tests/components/test_component.py
index ac5b23130..31e4323ae 100644
--- a/tests/components/test_component.py
+++ b/tests/components/test_component.py
@@ -131,7 +131,7 @@ def component5() -> Type[Component]:
     """
 
     class TestComponent5(Component):
-        tag = "RandomComponent"
+        tag: str = "RandomComponent"
 
         _invalid_children: List[str] = ["Text"]
 
@@ -149,7 +149,7 @@ def component6() -> Type[Component]:
     """
 
     class TestComponent6(Component):
-        tag = "RandomComponent"
+        tag: str = "RandomComponent"
 
         _invalid_children: List[str] = ["Text"]
 
@@ -165,7 +165,7 @@ def component7() -> Type[Component]:
     """
 
     class TestComponent7(Component):
-        tag = "RandomComponent"
+        tag: str = "RandomComponent"
 
         _valid_children: List[str] = ["Text"]
 
@@ -418,8 +418,8 @@ def test_component_event_trigger_arbitrary_args():
         return [_e.target.value, bravo["nested"], charlie.custom + 42]
 
     class C1(Component):
-        library = "/local"
-        tag = "C1"
+        library: str = "/local"
+        tag: str = "C1"
 
         def get_event_triggers(self) -> Dict[str, Any]:
             return {
diff --git a/tests/states/mutation.py b/tests/states/mutation.py
index 5825b6d12..f94d0fff4 100644
--- a/tests/states/mutation.py
+++ b/tests/states/mutation.py
@@ -1,6 +1,6 @@
 """Test states for mutable vars."""
 
-from typing import Dict, List, Set, Union
+from typing import Any, Dict, List, Set, Union
 
 import reflex as rx
 from reflex.state import BaseState
@@ -10,7 +10,7 @@ class DictMutationTestState(BaseState):
     """A state for testing ReflexDict mutation."""
 
     # plain dict
-    details = {"name": "Tommy"}
+    details: dict[str, str] = {"name": "Tommy"}
 
     def add_age(self):
         """Add an age to the dict."""
@@ -37,7 +37,7 @@ class DictMutationTestState(BaseState):
         self.details.pop("age")
 
     # dict in list
-    address = [{"home": "home address"}, {"work": "work address"}]
+    address: list[dict[str, str]] = [{"home": "home address"}, {"work": "work address"}]
 
     def remove_home_address(self):
         """Remove the home address from dict in the list."""
@@ -48,7 +48,10 @@ class DictMutationTestState(BaseState):
         self.address[0]["street"] = "street address"
 
     # nested dict
-    friend_in_nested_dict = {"name": "Nikhil", "friend": {"name": "Alek"}}
+    friend_in_nested_dict: dict[str, Any] = {
+        "name": "Nikhil",
+        "friend": {"name": "Alek"},
+    }
 
     def change_friend_name(self):
         """Change the friend's name in the nested dict."""
@@ -67,7 +70,7 @@ class ListMutationTestState(BaseState):
     """A state for testing ReflexList mutation."""
 
     # plain list
-    plain_friends = ["Tommy"]
+    plain_friends: list[str] = ["Tommy"]
 
     def make_friend(self):
         """Add a friend to the list."""
@@ -99,7 +102,7 @@ class ListMutationTestState(BaseState):
         self.plain_friends.remove("Tommy")
 
     # list in dict
-    friends_in_dict = {"Tommy": ["Jenny"]}
+    friends_in_dict: dict[str, list[str]] = {"Tommy": ["Jenny"]}
 
     def remove_jenny_from_tommy(self):
         """Remove Jenny from Tommy's friends list."""
@@ -114,7 +117,7 @@ class ListMutationTestState(BaseState):
         self.friends_in_dict["Tommy"].clear()
 
     # nested list
-    friends_in_nested_list = [["Tommy"], ["Jenny"]]
+    friends_in_nested_list: list[list[str]] = [["Tommy"], ["Jenny"]]
 
     def remove_first_group(self):
         """Remove the first group of friends from the nested list."""
diff --git a/tests/test_app.py b/tests/test_app.py
index eb1b783ed..370d77ffc 100644
--- a/tests/test_app.py
+++ b/tests/test_app.py
@@ -1242,19 +1242,19 @@ def test_app_wrap_priority(compilable_app):
     app, web_dir = compilable_app
 
     class Fragment1(Component):
-        tag = "Fragment1"
+        tag: str = "Fragment1"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
             return {(99, "Box"): Box.create()}
 
     class Fragment2(Component):
-        tag = "Fragment2"
+        tag: str = "Fragment2"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
             return {(50, "Text"): Text.create()}
 
     class Fragment3(Component):
-        tag = "Fragment3"
+        tag: str = "Fragment3"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
             return {(10, "Fragment2"): Fragment2.create()}