From 0b4b7c0d12217de3a72c9481abac6b7099c59939 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 19:06:24 +0100
Subject: [PATCH 01/52] bump reflex_hosting_cli, pydantic and fastapi deps

---
 poetry.lock    | 201 +++++++++++++++++++++++++++++++++----------------
 pyproject.toml |  11 ++-
 2 files changed, 146 insertions(+), 66 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index c3e3a6200ce..92216c4803f 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 1.7.1 and should not be changed by hand.
+# This file is automatically @generated by Poetry 1.8.2 and should not be changed by hand.
 
 [[package]]
 name = "alembic"
@@ -21,6 +21,20 @@ typing-extensions = ">=4"
 [package.extras]
 tz = ["backports.zoneinfo"]
 
+[[package]]
+name = "annotated-types"
+version = "0.6.0"
+description = "Reusable constraint types to use with typing.Annotated"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {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]
+typing-extensions = {version = ">=4.0.0", markers = "python_version < \"3.9\""}
+
 [[package]]
 name = "anyio"
 version = "4.3.0"
@@ -501,24 +515,22 @@ test = ["pytest (>=6)"]
 
 [[package]]
 name = "fastapi"
-version = "0.96.1"
+version = "0.110.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.110.0-py3-none-any.whl", hash = "sha256:87a1f6fb632a218222c5984be540055346a8f5d8a68e8f6fb647b1dc9934de4b"},
+    {file = "fastapi-0.110.0.tar.gz", hash = "sha256:266775f0dcc95af9d3ef39bad55cff525329a931d5fd51930aadd4f428bf7ff3"},
 ]
 
 [package.dependencies]
-pydantic = ">=1.7.4,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0"
-starlette = ">=0.27.0,<0.28.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.36.3,<0.37.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.7)", "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"
@@ -1385,55 +1397,113 @@ files = [
 
 [[package]]
 name = "pydantic"
-version = "1.10.14"
-description = "Data validation and settings management using python type hints"
+version = "2.6.3"
+description = "Data validation using Python type hints"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "pydantic-1.10.14-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:7f4fcec873f90537c382840f330b90f4715eebc2bc9925f04cb92de593eae054"},
-    {file = "pydantic-1.10.14-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:8e3a76f571970fcd3c43ad982daf936ae39b3e90b8a2e96c04113a369869dc87"},
-    {file = "pydantic-1.10.14-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:82d886bd3c3fbeaa963692ef6b643159ccb4b4cefaf7ff1617720cbead04fd1d"},
-    {file = "pydantic-1.10.14-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:798a3d05ee3b71967844a1164fd5bdb8c22c6d674f26274e78b9f29d81770c4e"},
-    {file = "pydantic-1.10.14-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:23d47a4b57a38e8652bcab15a658fdb13c785b9ce217cc3a729504ab4e1d6bc9"},
-    {file = "pydantic-1.10.14-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:f9f674b5c3bebc2eba401de64f29948ae1e646ba2735f884d1594c5f675d6f2a"},
-    {file = "pydantic-1.10.14-cp310-cp310-win_amd64.whl", hash = "sha256:24a7679fab2e0eeedb5a8924fc4a694b3bcaac7d305aeeac72dd7d4e05ecbebf"},
-    {file = "pydantic-1.10.14-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:9d578ac4bf7fdf10ce14caba6f734c178379bd35c486c6deb6f49006e1ba78a7"},
-    {file = "pydantic-1.10.14-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:fa7790e94c60f809c95602a26d906eba01a0abee9cc24150e4ce2189352deb1b"},
-    {file = "pydantic-1.10.14-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:aad4e10efa5474ed1a611b6d7f0d130f4aafadceb73c11d9e72823e8f508e663"},
-    {file = "pydantic-1.10.14-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:1245f4f61f467cb3dfeced2b119afef3db386aec3d24a22a1de08c65038b255f"},
-    {file = "pydantic-1.10.14-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:21efacc678a11114c765eb52ec0db62edffa89e9a562a94cbf8fa10b5db5c046"},
-    {file = "pydantic-1.10.14-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:412ab4a3f6dbd2bf18aefa9f79c7cca23744846b31f1d6555c2ee2b05a2e14ca"},
-    {file = "pydantic-1.10.14-cp311-cp311-win_amd64.whl", hash = "sha256:e897c9f35281f7889873a3e6d6b69aa1447ceb024e8495a5f0d02ecd17742a7f"},
-    {file = "pydantic-1.10.14-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:d604be0f0b44d473e54fdcb12302495fe0467c56509a2f80483476f3ba92b33c"},
-    {file = "pydantic-1.10.14-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a42c7d17706911199798d4c464b352e640cab4351efe69c2267823d619a937e5"},
-    {file = "pydantic-1.10.14-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:596f12a1085e38dbda5cbb874d0973303e34227b400b6414782bf205cc14940c"},
-    {file = "pydantic-1.10.14-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:bfb113860e9288d0886e3b9e49d9cf4a9d48b441f52ded7d96db7819028514cc"},
-    {file = "pydantic-1.10.14-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:bc3ed06ab13660b565eed80887fcfbc0070f0aa0691fbb351657041d3e874efe"},
-    {file = "pydantic-1.10.14-cp37-cp37m-win_amd64.whl", hash = "sha256:ad8c2bc677ae5f6dbd3cf92f2c7dc613507eafe8f71719727cbc0a7dec9a8c01"},
-    {file = "pydantic-1.10.14-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:c37c28449752bb1f47975d22ef2882d70513c546f8f37201e0fec3a97b816eee"},
-    {file = "pydantic-1.10.14-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:49a46a0994dd551ec051986806122767cf144b9702e31d47f6d493c336462597"},
-    {file = "pydantic-1.10.14-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:53e3819bd20a42470d6dd0fe7fc1c121c92247bca104ce608e609b59bc7a77ee"},
-    {file = "pydantic-1.10.14-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:0fbb503bbbbab0c588ed3cd21975a1d0d4163b87e360fec17a792f7d8c4ff29f"},
-    {file = "pydantic-1.10.14-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:336709883c15c050b9c55a63d6c7ff09be883dbc17805d2b063395dd9d9d0022"},
-    {file = "pydantic-1.10.14-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:4ae57b4d8e3312d486e2498d42aed3ece7b51848336964e43abbf9671584e67f"},
-    {file = "pydantic-1.10.14-cp38-cp38-win_amd64.whl", hash = "sha256:dba49d52500c35cfec0b28aa8b3ea5c37c9df183ffc7210b10ff2a415c125c4a"},
-    {file = "pydantic-1.10.14-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:c66609e138c31cba607d8e2a7b6a5dc38979a06c900815495b2d90ce6ded35b4"},
-    {file = "pydantic-1.10.14-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:d986e115e0b39604b9eee3507987368ff8148222da213cd38c359f6f57b3b347"},
-    {file = "pydantic-1.10.14-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:646b2b12df4295b4c3148850c85bff29ef6d0d9621a8d091e98094871a62e5c7"},
-    {file = "pydantic-1.10.14-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:282613a5969c47c83a8710cc8bfd1e70c9223feb76566f74683af889faadc0ea"},
-    {file = "pydantic-1.10.14-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:466669501d08ad8eb3c4fecd991c5e793c4e0bbd62299d05111d4f827cded64f"},
-    {file = "pydantic-1.10.14-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:13e86a19dca96373dcf3190fcb8797d40a6f12f154a244a8d1e8e03b8f280593"},
-    {file = "pydantic-1.10.14-cp39-cp39-win_amd64.whl", hash = "sha256:08b6ec0917c30861e3fe71a93be1648a2aa4f62f866142ba21670b24444d7fd8"},
-    {file = "pydantic-1.10.14-py3-none-any.whl", hash = "sha256:8ee853cd12ac2ddbf0ecbac1c289f95882b2d4482258048079d13be700aa114c"},
-    {file = "pydantic-1.10.14.tar.gz", hash = "sha256:46f17b832fe27de7850896f3afee50ea682220dd218f7e9c88d436788419dca6"},
+    {file = "pydantic-2.6.3-py3-none-any.whl", hash = "sha256:72c6034df47f46ccdf81869fddb81aade68056003900a8724a4f160700016a2a"},
+    {file = "pydantic-2.6.3.tar.gz", hash = "sha256:e07805c4c7f5c6826e33a1d4c9d47950d7eaf34868e2690f8594d2e30241f11f"},
 ]
 
 [package.dependencies]
-typing-extensions = ">=4.2.0"
+annotated-types = ">=0.4.0"
+pydantic-core = "2.16.3"
+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.16.3"
+description = ""
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "pydantic_core-2.16.3-cp310-cp310-macosx_10_12_x86_64.whl", hash = "sha256:75b81e678d1c1ede0785c7f46690621e4c6e63ccd9192af1f0bd9d504bbb6bf4"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:9c865a7ee6f93783bd5d781af5a4c43dadc37053a5b42f7d18dc019f8c9d2bd1"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:162e498303d2b1c036b957a1278fa0899d02b2842f1ff901b6395104c5554a45"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:2f583bd01bbfbff4eaee0868e6fc607efdfcc2b03c1c766b06a707abbc856187"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:b926dd38db1519ed3043a4de50214e0d600d404099c3392f098a7f9d75029ff8"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:716b542728d4c742353448765aa7cdaa519a7b82f9564130e2b3f6766018c9ec"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:fc4ad7f7ee1a13d9cb49d8198cd7d7e3aa93e425f371a68235f784e99741561f"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:bd87f48924f360e5d1c5f770d6155ce0e7d83f7b4e10c2f9ec001c73cf475c99"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:0df446663464884297c793874573549229f9eca73b59360878f382a0fc085979"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:4df8a199d9f6afc5ae9a65f8f95ee52cae389a8c6b20163762bde0426275b7db"},
+    {file = "pydantic_core-2.16.3-cp310-none-win32.whl", hash = "sha256:456855f57b413f077dff513a5a28ed838dbbb15082ba00f80750377eed23d132"},
+    {file = "pydantic_core-2.16.3-cp310-none-win_amd64.whl", hash = "sha256:732da3243e1b8d3eab8c6ae23ae6a58548849d2e4a4e03a1924c8ddf71a387cb"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-macosx_10_12_x86_64.whl", hash = "sha256:519ae0312616026bf4cedc0fe459e982734f3ca82ee8c7246c19b650b60a5ee4"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:b3992a322a5617ded0a9f23fd06dbc1e4bd7cf39bc4ccf344b10f80af58beacd"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8d62da299c6ecb04df729e4b5c52dc0d53f4f8430b4492b93aa8de1f541c4aac"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:2acca2be4bb2f2147ada8cac612f8a98fc09f41c89f87add7256ad27332c2fda"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:1b662180108c55dfbf1280d865b2d116633d436cfc0bba82323554873967b340"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:e7c6ed0dc9d8e65f24f5824291550139fe6f37fac03788d4580da0d33bc00c97"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a6b1bb0827f56654b4437955555dc3aeeebeddc47c2d7ed575477f082622c49e"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:e56f8186d6210ac7ece503193ec84104da7ceb98f68ce18c07282fcc2452e76f"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:936e5db01dd49476fa8f4383c259b8b1303d5dd5fb34c97de194560698cc2c5e"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:33809aebac276089b78db106ee692bdc9044710e26f24a9a2eaa35a0f9fa70ba"},
+    {file = "pydantic_core-2.16.3-cp311-none-win32.whl", hash = "sha256:ded1c35f15c9dea16ead9bffcde9bb5c7c031bff076355dc58dcb1cb436c4721"},
+    {file = "pydantic_core-2.16.3-cp311-none-win_amd64.whl", hash = "sha256:d89ca19cdd0dd5f31606a9329e309d4fcbb3df860960acec32630297d61820df"},
+    {file = "pydantic_core-2.16.3-cp311-none-win_arm64.whl", hash = "sha256:6162f8d2dc27ba21027f261e4fa26f8bcb3cf9784b7f9499466a311ac284b5b9"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-macosx_10_12_x86_64.whl", hash = "sha256:0f56ae86b60ea987ae8bcd6654a887238fd53d1384f9b222ac457070b7ac4cff"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:c9bd22a2a639e26171068f8ebb5400ce2c1bc7d17959f60a3b753ae13c632975"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4204e773b4b408062960e65468d5346bdfe139247ee5f1ca2a378983e11388a2"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:f651dd19363c632f4abe3480a7c87a9773be27cfe1341aef06e8759599454120"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:aaf09e615a0bf98d406657e0008e4a8701b11481840be7d31755dc9f97c44053"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:8e47755d8152c1ab5b55928ab422a76e2e7b22b5ed8e90a7d584268dd49e9c6b"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:500960cb3a0543a724a81ba859da816e8cf01b0e6aaeedf2c3775d12ee49cade"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:cf6204fe865da605285c34cf1172879d0314ff267b1c35ff59de7154f35fdc2e"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:d33dd21f572545649f90c38c227cc8631268ba25c460b5569abebdd0ec5974ca"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:49d5d58abd4b83fb8ce763be7794d09b2f50f10aa65c0f0c1696c677edeb7cbf"},
+    {file = "pydantic_core-2.16.3-cp312-none-win32.whl", hash = "sha256:f53aace168a2a10582e570b7736cc5bef12cae9cf21775e3eafac597e8551fbe"},
+    {file = "pydantic_core-2.16.3-cp312-none-win_amd64.whl", hash = "sha256:0d32576b1de5a30d9a97f300cc6a3f4694c428d956adbc7e6e2f9cad279e45ed"},
+    {file = "pydantic_core-2.16.3-cp312-none-win_arm64.whl", hash = "sha256:ec08be75bb268473677edb83ba71e7e74b43c008e4a7b1907c6d57e940bf34b6"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-macosx_10_12_x86_64.whl", hash = "sha256:b1f6f5938d63c6139860f044e2538baeee6f0b251a1816e7adb6cbce106a1f01"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:2a1ef6a36fdbf71538142ed604ad19b82f67b05749512e47f247a6ddd06afdc7"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:704d35ecc7e9c31d48926150afada60401c55efa3b46cd1ded5a01bdffaf1d48"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:d937653a696465677ed583124b94a4b2d79f5e30b2c46115a68e482c6a591c8a"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:c9803edf8e29bd825f43481f19c37f50d2b01899448273b3a7758441b512acf8"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:72282ad4892a9fb2da25defeac8c2e84352c108705c972db82ab121d15f14e6d"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7f752826b5b8361193df55afcdf8ca6a57d0232653494ba473630a83ba50d8c9"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:4384a8f68ddb31a0b0c3deae88765f5868a1b9148939c3f4121233314ad5532c"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:a4b2bf78342c40b3dc830880106f54328928ff03e357935ad26c7128bbd66ce8"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:13dcc4802961b5f843a9385fc821a0b0135e8c07fc3d9949fd49627c1a5e6ae5"},
+    {file = "pydantic_core-2.16.3-cp38-none-win32.whl", hash = "sha256:e3e70c94a0c3841e6aa831edab1619ad5c511199be94d0c11ba75fe06efe107a"},
+    {file = "pydantic_core-2.16.3-cp38-none-win_amd64.whl", hash = "sha256:ecdf6bf5f578615f2e985a5e1f6572e23aa632c4bd1dc67f8f406d445ac115ed"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-macosx_10_12_x86_64.whl", hash = "sha256:bda1ee3e08252b8d41fa5537413ffdddd58fa73107171a126d3b9ff001b9b820"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:21b888c973e4f26b7a96491c0965a8a312e13be108022ee510248fe379a5fa23"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:be0ec334369316fa73448cc8c982c01e5d2a81c95969d58b8f6e272884df0074"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:b5b6079cc452a7c53dd378c6f881ac528246b3ac9aae0f8eef98498a75657805"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:7ee8d5f878dccb6d499ba4d30d757111847b6849ae07acdd1205fffa1fc1253c"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:7233d65d9d651242a68801159763d09e9ec96e8a158dbf118dc090cd77a104c9"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c6119dc90483a5cb50a1306adb8d52c66e447da88ea44f323e0ae1a5fcb14256"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:578114bc803a4c1ff9946d977c221e4376620a46cf78da267d946397dc9514a8"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:d8f99b147ff3fcf6b3cc60cb0c39ea443884d5559a30b1481e92495f2310ff2b"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:4ac6b4ce1e7283d715c4b729d8f9dab9627586dafce81d9eaa009dd7f25dd972"},
+    {file = "pydantic_core-2.16.3-cp39-none-win32.whl", hash = "sha256:e7774b570e61cb998490c5235740d475413a1f6de823169b4cf94e2fe9e9f6b2"},
+    {file = "pydantic_core-2.16.3-cp39-none-win_amd64.whl", hash = "sha256:9091632a25b8b87b9a605ec0e61f241c456e9248bfdcf7abdf344fdb169c81cf"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-macosx_10_12_x86_64.whl", hash = "sha256:36fa178aacbc277bc6b62a2c3da95226520da4f4e9e206fdf076484363895d2c"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-macosx_11_0_arm64.whl", hash = "sha256:dcca5d2bf65c6fb591fff92da03f94cd4f315972f97c21975398bd4bd046854a"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:2a72fb9963cba4cd5793854fd12f4cfee731e86df140f59ff52a49b3552db241"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b60cc1a081f80a2105a59385b92d82278b15d80ebb3adb200542ae165cd7d183"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:cbcc558401de90a746d02ef330c528f2e668c83350f045833543cd57ecead1ad"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:fee427241c2d9fb7192b658190f9f5fd6dfe41e02f3c1489d2ec1e6a5ab1e04a"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:f4cb85f693044e0f71f394ff76c98ddc1bc0953e48c061725e540396d5c8a2e1"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-win_amd64.whl", hash = "sha256:b29eeb887aa931c2fcef5aa515d9d176d25006794610c264ddc114c053bf96fe"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-macosx_10_12_x86_64.whl", hash = "sha256:a425479ee40ff021f8216c9d07a6a3b54b31c8267c6e17aa88b70d7ebd0e5e5b"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-macosx_11_0_arm64.whl", hash = "sha256:5c5cbc703168d1b7a838668998308018a2718c2130595e8e190220238addc96f"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:99b6add4c0b39a513d323d3b93bc173dac663c27b99860dd5bf491b240d26137"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:75f76ee558751746d6a38f89d60b6228fa174e5172d143886af0f85aa306fd89"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:00ee1c97b5364b84cb0bd82e9bbf645d5e2871fb8c58059d158412fee2d33d8a"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:287073c66748f624be4cef893ef9174e3eb88fe0b8a78dc22e88eca4bc357ca6"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:ed25e1835c00a332cb10c683cd39da96a719ab1dfc08427d476bce41b92531fc"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:86b3d0033580bd6bbe07590152007275bd7af95f98eaa5bd36f3da219dcd93da"},
+    {file = "pydantic_core-2.16.3.tar.gz", hash = "sha256:1cac689f80a3abab2d3c0048b29eea5751114054f032a941a32de4c852c59cad"},
+]
+
+[package.dependencies]
+typing-extensions = ">=4.6.0,<4.7.0 || >4.7.0"
 
 [[package]]
 name = "pygments"
@@ -1746,13 +1816,13 @@ ocsp = ["cryptography (>=36.0.1)", "pyopenssl (==20.0.1)", "requests (>=2.26.0)"
 
 [[package]]
 name = "reflex-hosting-cli"
-version = "0.1.8"
+version = "0.1.9.dev0"
 description = "Reflex Hosting CLI"
 optional = false
 python-versions = ">=3.8,<4.0"
 files = [
-    {file = "reflex_hosting_cli-0.1.8-py3-none-any.whl", hash = "sha256:1f8372adcf2e1ec6eae75eedb2652e17a58a733a0bae1b768afb7bcd32f9452c"},
-    {file = "reflex_hosting_cli-0.1.8.tar.gz", hash = "sha256:e3326cd29058099d387974c7687011ae798419a471c35be10895535b788b4ae6"},
+    {file = "reflex_hosting_cli-0.1.9.dev0-py3-none-any.whl", hash = "sha256:1839574fca98f99d5b6c4e9ff6e8733ea2859918a9ed354b516aec5a855dd1c0"},
+    {file = "reflex_hosting_cli-0.1.9.dev0.tar.gz", hash = "sha256:bbda3779303db666026ecfc19922fe4417bd27eef97ec98d4d4a3889f1cb64d3"},
 ]
 
 [package.dependencies]
@@ -1761,13 +1831,18 @@ httpx = ">=0.24.0,<0.26.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"
+pydantic = ">=2.6,<3.0"
 python-dateutil = ">=2.8.1"
 rich = ">=13.0.0,<14.0.0"
 tabulate = ">=0.9.0,<0.10.0"
 typer = ">=0.4.2,<1"
 websockets = ">=10.4"
 
+[package.source]
+type = "legacy"
+url = "https://test.pypi.org/simple"
+reference = "test"
+
 [[package]]
 name = "requests"
 version = "2.31.0"
@@ -2021,13 +2096,13 @@ SQLAlchemy = ">=2.0.0,<2.1.0"
 
 [[package]]
 name = "starlette"
-version = "0.27.0"
+version = "0.36.3"
 description = "The little ASGI library that shines."
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "starlette-0.27.0-py3-none-any.whl", hash = "sha256:918416370e846586541235ccd38a474c08b80443ed31c578a418e2209b3eef91"},
-    {file = "starlette-0.27.0.tar.gz", hash = "sha256:6a6b0d042acb8d469a01eba54e9cda6cbd24ac602c4cd016723117d6a7e73b75"},
+    {file = "starlette-0.36.3-py3-none-any.whl", hash = "sha256:13d429aa93a61dc40bf503e8c801db1f1bca3dc706b10ef2434a36123568f044"},
+    {file = "starlette-0.36.3.tar.gz", hash = "sha256:90a671733cfb35771d8cc605e0b679d23b992f8dcfad48cc60b38cb29aeb7080"},
 ]
 
 [package.dependencies]
@@ -2035,7 +2110,7 @@ anyio = ">=3.4.0,<5"
 typing-extensions = {version = ">=3.10.0", markers = "python_version < \"3.10\""}
 
 [package.extras]
-full = ["httpx (>=0.22.0)", "itsdangerous", "jinja2", "python-multipart", "pyyaml"]
+full = ["httpx (>=0.22.0)", "itsdangerous", "jinja2", "python-multipart (>=0.0.7)", "pyyaml"]
 
 [[package]]
 name = "starlette-admin"
@@ -2569,4 +2644,4 @@ testing = ["big-O", "jaraco.functools", "jaraco.itertools", "more-itertools", "p
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.8"
-content-hash = "a63e08c3b525d056f00f54fe7de92443177d727e7557bed01c8639c6fa8a17ac"
+content-hash = "4c2a1d9ff107be80adb8170b4da4ac732ed6e6cc2680194d1f33a578ba30371c"
diff --git a/pyproject.toml b/pyproject.toml
index 7c3f98ec2f8..d12959a278a 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -25,14 +25,19 @@ packages = [
     {include = "reflex"}
 ]
 
+[[tool.poetry.source]]
+name = "test"
+url = "https://test.pypi.org/simple/"
+priority = "explicit"
+
 [tool.poetry.dependencies]
 python = "^3.8"
 cloudpickle = "^2.2.1"
-fastapi = "^0.96.0"
+fastapi = "^0.110"
 gunicorn = "^20.1.0"
 jinja2 = "^3.1.2"
 psutil = "^5.9.4"
-pydantic = "^1.10.2"
+pydantic = "^2"
 python-multipart = "^0.0.5"
 python-socketio = "^5.7.0"
 redis = "^4.3.5"
@@ -55,7 +60,7 @@ wrapt = [
     {version = "^1.11.0", python = "<3.11"},
 ]
 packaging = "^23.1"
-reflex-hosting-cli = ">=0.1.2"
+reflex-hosting-cli = {version = "0.1.9dev0", source = "test"}
 charset-normalizer = "^3.3.2"
 wheel = "^0.42.0"
 build = "^1.0.3"

From 25d05856f99d081e456f5862feec24a508b0d155 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Wed, 28 Feb 2024 23:42:32 +0100
Subject: [PATCH 02/52] prepare base

---
 reflex/base.py | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/reflex/base.py b/reflex/base.py
index 36b150c5ca8..a4c85e074e2 100644
--- a/reflex/base.py
+++ b/reflex/base.py
@@ -2,15 +2,16 @@
 from __future__ import annotations
 
 import os
-from typing import Any, List, Type
+from typing import Any, List, Type, Dict, Optional
 
 import pydantic
 from pydantic import BaseModel
-from pydantic.fields import ModelField
+from pydantic.fields import FieldInfo
 
 from reflex import constants
 
 
+# TODO: migrate to pydantic v2
 def validate_field_name(bases: List[Type["BaseModel"]], field_name: str) -> None:
     """Ensure that the field's name does not shadow an existing attribute of the model.
 
@@ -35,7 +36,8 @@ def validate_field_name(bases: List[Type["BaseModel"]], field_name: str) -> None
 
 # monkeypatch pydantic validate_field_name method to skip validating
 # shadowed state vars when reloading app via utils.prerequisites.get_app(reload=True)
-pydantic.main.validate_field_name = validate_field_name  # type: ignore
+# TODO
+#  pydantic.main.validate_field_name = validate_field_name  # type: ignore
 
 
 class Base(pydantic.BaseModel):
@@ -61,9 +63,10 @@ def json(self) -> str:
         Returns:
             The object as a json string.
         """
-        from reflex.utils.serializers import serialize
+        #  from reflex.utils.serializers import serialize
 
-        return self.__config__.json_dumps(self.dict(), default=serialize)
+        return self.model_dump_json()
+        #  return self.__config__.json_dumps(self.dict(), default=serialize)
 
     def set(self, **kwargs):
         """Set multiple fields and return the object.
@@ -85,7 +88,8 @@ def get_fields(cls) -> dict[str, Any]:
         Returns:
             The fields of the object.
         """
-        return cls.__fields__
+        return cls.model_fields
+
 
     @classmethod
     def add_field(cls, var: Any, default_value: Any):
@@ -97,14 +101,10 @@ def add_field(cls, var: Any, default_value: Any):
             var: The variable to add a pydantic field for.
             default_value: The default value of the field
         """
-        new_field = ModelField.infer(
-            name=var._var_name,
-            value=default_value,
-            annotation=var._var_type,
-            class_validators=None,
-            config=cls.__config__,
-        )
-        cls.__fields__.update({var._var_name: new_field})
+        field_info = FieldInfo(default=default_value, annotation=var._var_type)
+        cls.model_fields.update({var._var_name: field_info})
+        cls.model_rebuild(force=True)
+
 
     def get_value(self, key: str) -> Any:
         """Get the value of a field.
@@ -115,7 +115,7 @@ def get_value(self, key: str) -> Any:
         Returns:
             The value of the field.
         """
-        if isinstance(key, str) and key in self.__fields__:
+        if isinstance(key, str) and key in self.get_fields():
             # Seems like this function signature was wrong all along?
             # If the user wants a field that we know of, get it and pass it off to _get_value
             key = getattr(self, key)

From 8e692cd305315824cbd13df655751a0f1e92fd02 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Wed, 28 Feb 2024 23:49:43 +0100
Subject: [PATCH 03/52] state adjustments

---
 reflex/state.py | 40 +++++++++++++---------------------------
 1 file changed, 13 insertions(+), 27 deletions(-)

diff --git a/reflex/state.py b/reflex/state.py
index 20552249b0a..e055d77feaf 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -151,6 +151,7 @@ def __init__(self, router_data: Optional[dict] = None):
     "_substate_var_dependencies",
     "_always_dirty_computed_vars",
     "_always_dirty_substates",
+    "_abc_impl", # pydantic v2
     "_was_touched",
 }
 
@@ -281,6 +282,11 @@ def __init__(
                 "See https://reflex.dev/docs/state/ for further information."
             )
         kwargs["parent_state"] = parent_state
+
+        for prop_name, prop in self.base_vars.items():
+            if prop_name not in kwargs and self.model_fields[prop_name].is_required():
+                kwargs[prop_name] = prop.get_default_value()
+
         super().__init__(*args, **kwargs)
 
         # Setup the substates (for memory state manager only).
@@ -334,7 +340,7 @@ def __repr__(self) -> str:
         Returns:
             The string representation of the state.
         """
-        return f"{self.__class__.__name__}({self.dict()})"
+        return f"{type(self).__name__}({self.dict()})"
 
     @classmethod
     def _get_computed_vars(cls) -> list[ComputedVar]:
@@ -401,8 +407,8 @@ def __init_subclass__(cls, **kwargs):
         computed_vars = cls._get_computed_vars()
 
         new_backend_vars = {
-            name: value
-            for name, value in cls.__dict__.items()
+            name: value.default
+            for name, value in cls.__private_attributes__.items()
             if types.is_backend_variable(name, cls)
             and name not in RESERVED_BACKEND_VAR_NAMES
             and name not in cls.inherited_backend_vars
@@ -738,7 +744,6 @@ def _init_var(cls, prop: BaseVar):
             )
         cls._set_var(prop)
         cls._create_setter(prop)
-        cls._set_default_value(prop)
 
     @classmethod
     def add_var(cls, name: str, type_: Any, default_value: Any = None):
@@ -802,28 +807,6 @@ def _create_setter(cls, prop: BaseVar):
             cls.event_handlers[setter_name] = event_handler
             setattr(cls, setter_name, event_handler)
 
-    @classmethod
-    def _set_default_value(cls, prop: BaseVar):
-        """Set the default value for the var.
-
-        Args:
-            prop: The var to set the default value for.
-        """
-        # Get the pydantic field for the var.
-        field = cls.get_fields()[prop._var_name]
-        if field.required:
-            default_value = prop.get_default_value()
-            if default_value is not None:
-                field.required = False
-                field.default = default_value
-        if (
-            not field.required
-            and field.default is None
-            and not types.is_optional(prop._var_type)
-        ):
-            # Ensure frontend uses null coalescing when accessing.
-            prop._var_type = Optional[prop._var_type]
-
     @staticmethod
     def _get_base_functions() -> dict[str, FunctionType]:
         """Get all functions of the state class excluding dunder methods.
@@ -1006,6 +989,9 @@ def __getattribute__(self, name: str) -> Any:
         # If the state hasn't been initialized yet, return the default value.
         if not super().__getattribute__("__dict__"):
             return super().__getattribute__(name)
+        private_attrs = super().__getattribute__("__pydantic_private__")
+        if private_attrs is None:
+            return super().__getattribute__(name)
 
         inherited_vars = {
             **super().__getattribute__("inherited_vars"),
@@ -1018,7 +1004,7 @@ def __getattribute__(self, name: str) -> Any:
             if parent_state is not None:
                 return getattr(parent_state, name)
 
-        backend_vars = super().__getattribute__("_backend_vars")
+        backend_vars = private_attrs["_backend_vars"]
         if name in backend_vars:
             value = backend_vars[name]
         else:

From 95f9b128294e78928166fe49910f51981dab60cb Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Wed, 28 Feb 2024 23:53:51 +0100
Subject: [PATCH 04/52] types adjustments

---
 reflex/utils/types.py | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/reflex/utils/types.py b/reflex/utils/types.py
index 125dc261557..d320351bcaa 100644
--- a/reflex/utils/types.py
+++ b/reflex/utils/types.py
@@ -22,7 +22,6 @@
 )
 
 import sqlalchemy
-from pydantic.fields import ModelField
 from sqlalchemy.ext.hybrid import hybrid_property
 from sqlalchemy.orm import DeclarativeBase, Mapped, QueryableAttribute, Relationship
 
@@ -165,13 +164,11 @@ def get_attribute_access_type(cls: GenericType, name: str) -> GenericType | None
     attr = getattr(cls, name, None)
     if hint := get_property_hint(attr):
         return hint
-    if hasattr(cls, "__fields__") and name in cls.__fields__:
+    if hasattr(cls, "model_fields") and name in cls.model_fields:
         # pydantic models
-        field = cls.__fields__[name]
-        type_ = field.outer_type_
-        if isinstance(type_, ModelField):
-            type_ = type_.type_
-        if not field.required and field.default is None:
+        field = cls.model_fields[name]
+        type_ = field.annotation
+        if not field.is_required() and field.default is None and field.default_factory is None:
             # Ensure frontend uses null coalescing when accessing.
             type_ = Optional[type_]
         return type_
@@ -201,8 +198,9 @@ 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
-            if isinstance(type_, ModelField):
-                return type_.type_  # SQLAlchemy v1.4
+            # TODO: pydantic v2
+            #  if isinstance(type_, ModelField):
+            #      return type_.type_  # SQLAlchemy v1.4
             return type_
     elif is_union(cls):
         # Check in each arg of the annotation.

From 8b2d0b40bc579c9b5a80078f88144ddee2a7a2f0 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Wed, 28 Feb 2024 23:55:35 +0100
Subject: [PATCH 05/52] outer_type_ -> annotation

---
 reflex/components/component.py | 6 +++---
 reflex/state.py                | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index cf6f67c82ca..b12ff43eebe 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -286,7 +286,7 @@ def __init__(self, *args, **kwargs):
                     if kwargs[key] is None:
                         raise TypeError
 
-                    expected_type = fields[key].outer_type_.__args__[0]
+                    expected_type = fields[key].annotation.__args__[0]
                     # validate literal fields.
                     types.validate_literal(
                         key, value, expected_type, type(self).__name__
@@ -301,7 +301,7 @@ def __init__(self, *args, **kwargs):
                 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(
@@ -581,7 +581,7 @@ def get_component_props(cls) -> set[str]:
             name
             for name, field in cls.get_fields().items()
             if name in cls.get_props()
-            and types._issubclass(field.outer_type_, Component)
+            and types._issubclass(field.annotation, Component)
         }
 
     @classmethod
diff --git a/reflex/state.py b/reflex/state.py
index e055d77feaf..9f6daf96e33 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -432,7 +432,7 @@ def __init_subclass__(cls, **kwargs):
 
         # Set the base and computed vars.
         cls.base_vars = {
-            f.name: BaseVar(_var_name=f.name, _var_type=f.outer_type_)._var_set_state(
+            f.name: BaseVar(_var_name=f.name, _var_type=f.annotation)._var_set_state(
                 cls
             )
             for f in cls.get_fields().values()

From ce06bf01144f77bbc1b9931a45842ae0408bb5d6 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Wed, 28 Feb 2024 23:57:47 +0100
Subject: [PATCH 06/52] migrate config to pydantic v2

---
 reflex/config.py | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/reflex/config.py b/reflex/config.py
index 9739c8ec211..3965afe7a1e 100644
--- a/reflex/config.py
+++ b/reflex/config.py
@@ -6,14 +6,14 @@
 import os
 import sys
 import urllib.parse
-from typing import Any, Dict, List, Optional, Set
+from typing import Any, Dict, List, Optional, Set, get_args
 
 import pydantic
 from reflex_cli.constants.hosting import Hosting
 
 from reflex import constants
 from reflex.base import Base
-from reflex.utils import console
+from reflex.utils import console, types
 
 
 class DBConfig(Base):
@@ -251,7 +251,7 @@ def update_from_env(self) -> dict[str, Any]:
         """
         updated_values = {}
         # Iterate over the fields.
-        for key, field in self.__fields__.items():
+        for key, field in self.model_fields.items():
             # The env var name is the key in uppercase.
             env_var = os.environ.get(key.upper())
 
@@ -264,14 +264,18 @@ def update_from_env(self) -> dict[str, Any]:
 
                 # Convert the env var to the expected type.
                 try:
-                    if issubclass(field.type_, bool):
+                    if types._issubclass(field.annotation, bool):
                         # special handling for bool values
                         env_var = env_var.lower() in ["true", "1", "yes"]
+                    elif types.is_generic_alias(field.annotation):
+                        env_var = get_args(field.annotation)[0](env_var)
+                    elif field.annotation:
+                        env_var = field.annotation(env_var)
                     else:
-                        env_var = field.type_(env_var)
+                        raise ValueError(f"Invalid type {field.annotation}")
                 except ValueError:
                     console.error(
-                        f"Could not convert {key.upper()}={env_var} to type {field.type_}"
+                        f"Could not convert {key.upper()}={env_var} to type {field.annotation}"
                     )
                     raise
 

From 67c81489cf412de9b204d16f77e24d12f984634a Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Wed, 28 Feb 2024 23:58:36 +0100
Subject: [PATCH 07/52] migrate remaining __fields__ to model_fields

---
 reflex/compiler/utils.py               | 2 +-
 reflex/components/chakra/base.py       | 2 +-
 reflex/components/radix/themes/base.py | 2 +-
 reflex/model.py                        | 8 ++++----
 reflex/state.py                        | 2 +-
 scripts/pyi_generator.py               | 2 +-
 tests/test_model.py                    | 4 ++--
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py
index 33202e56b0a..497ee12a237 100644
--- a/reflex/compiler/utils.py
+++ b/reflex/compiler/utils.py
@@ -188,7 +188,7 @@ def _compile_client_storage_recursive(
     cookies = {}
     local_storage = {}
     state_name = state.get_full_name()
-    for name, field in state.__fields__.items():
+    for name, field in state.model_fields.items():
         if name in state.inherited_vars:
             # only include vars defined in this state
             continue
diff --git a/reflex/components/chakra/base.py b/reflex/components/chakra/base.py
index 9e1f3f69839..a92906bdaa1 100644
--- a/reflex/components/chakra/base.py
+++ b/reflex/components/chakra/base.py
@@ -70,7 +70,7 @@ def create(cls) -> Component:
 
     def _get_imports(self) -> imports.ImportDict:
         _imports = super()._get_imports()
-        _imports.setdefault(self.__fields__["library"].default, []).append(
+        _imports.setdefault(self.model_fields["library"].default, []).append(
             imports.ImportVar(tag="extendTheme", is_default=False),
         )
         _imports.setdefault("/utils/theme.js", []).append(
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index 590dd5089d2..28dc68f1616 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -101,7 +101,7 @@ def create(
         """
         component = super().create(*children, **props)
         if component.library is None:
-            component.library = RadixThemesComponent.__fields__["library"].default
+            component.library = RadixThemesComponent.model_fields["library"].default
         component.alias = "RadixThemes" + (
             component.tag or component.__class__.__name__
         )
diff --git a/reflex/model.py b/reflex/model.py
index cd1b141f7b0..f7396fad542 100644
--- a/reflex/model.py
+++ b/reflex/model.py
@@ -61,12 +61,12 @@ def __init_subclass__(cls):
         """Drop the default primary key field if any primary key field is defined."""
         non_default_primary_key_fields = [
             field_name
-            for field_name, field in cls.__fields__.items()
+            for field_name, field in cls.model_fields.items()
             if field_name != "id"
             and getattr(field.field_info, "primary_key", None) is True
         ]
         if non_default_primary_key_fields:
-            cls.__fields__.pop("id", None)
+            cls.model_fields.pop("id", None)
 
         super().__init_subclass__()
 
@@ -95,9 +95,9 @@ def dict(self, **kwargs):
         Returns:
             The object as a dictionary.
         """
-        base_fields = {name: getattr(self, name) for name in self.__fields__}
+        base_fields = {name: getattr(self, name) for name in self.model_fields}
         relationships = {}
-        # SQLModel relationships do not appear in __fields__, but should be included if present.
+        # SQLModel relationships do not appear in model_fields, but should be included if present.
         for name in self.__sqlmodel_relationships__:
             try:
                 relationships[name] = self._dict_recursive(getattr(self, name))
diff --git a/reflex/state.py b/reflex/state.py
index 9f6daf96e33..d15d1f1a988 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -760,7 +760,7 @@ def add_var(cls, name: str, type_: Any, default_value: Any = None):
         Raises:
             NameError: if a variable of this name already exists
         """
-        if name in cls.__fields__:
+        if name in cls.model_fields:
             raise NameError(
                 f"The variable '{name}' already exist. Use a different name"
             )
diff --git a/scripts/pyi_generator.py b/scripts/pyi_generator.py
index 2e8936d13fd..f18a300d0da 100644
--- a/scripts/pyi_generator.py
+++ b/scripts/pyi_generator.py
@@ -373,7 +373,7 @@ def _extract_class_props_as_ast_nodes(
                 #       with the annotation in some cases.
                 with contextlib.suppress(AttributeError, KeyError):
                     # Try to get default from pydantic field definition.
-                    default = target_class.__fields__[name].default
+                    default = target_class.model_fields[name].default
                     if isinstance(default, Var):
                         default = default._decode()  # type: ignore
 
diff --git a/tests/test_model.py b/tests/test_model.py
index accab52fe1e..90ab3302bdf 100644
--- a/tests/test_model.py
+++ b/tests/test_model.py
@@ -45,7 +45,7 @@ def test_default_primary_key(model_default_primary):
     Args:
         model_default_primary: Fixture.
     """
-    assert "id" in model_default_primary.__class__.__fields__
+    assert "id" in model_default_primary.__class__.model_fields
 
 
 def test_custom_primary_key(model_custom_primary):
@@ -54,7 +54,7 @@ def test_custom_primary_key(model_custom_primary):
     Args:
         model_custom_primary: Fixture.
     """
-    assert "id" not in model_custom_primary.__class__.__fields__
+    assert "id" not in model_custom_primary.__class__.model_fields
 
 
 @pytest.mark.filterwarnings(

From 66f1e215766385351711ee26fb52c33f711e77de Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 00:01:15 +0100
Subject: [PATCH 08/52] fix backend vars

---
 reflex/state.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/reflex/state.py b/reflex/state.py
index d15d1f1a988..84adbd0fc37 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -155,6 +155,9 @@ def __init__(self, router_data: Optional[dict] = None):
     "_was_touched",
 }
 
+SPECIAL_METHODS = {
+    "model_post_init",  # never treat this as an event handler
+}
 
 def _substate_key(
     token: str,
@@ -517,6 +520,7 @@ def _item_is_event_handler(name: str, value: Any) -> bool:
         """
         return (
             not name.startswith("_")
+            and name not in SPECIAL_METHODS
             and isinstance(value, Callable)
             and not isinstance(value, EventHandler)
             and hasattr(value, "__code__")

From fd32942eb4739814ef862d772289e080043603c0 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 00:04:30 +0100
Subject: [PATCH 09/52] parse_obj is deprecated in favor of model_validate

---
 reflex/vars.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/vars.py b/reflex/vars.py
index eed60a946f0..4b7ee6ab08c 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -263,7 +263,7 @@ def json_loads(s):
             # Read the JSON, pull out the string length, parse the rest as VarData.
             data = json_loads(m.group(1))
             string_length = data.pop("string_length", None)
-            var_data = VarData.parse_obj(data)
+            var_data = VarData.model_validate(data)
 
             # Use string length to compute positions of interpolations.
             if string_length is not None:

From 6291c39fd7d5e73d8dd005965750e78a73ccfe07 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 00:27:00 +0100
Subject: [PATCH 10/52] minor state fixes, and var serialization

---
 reflex/state.py |  6 +++---
 reflex/vars.py  | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/reflex/state.py b/reflex/state.py
index 84adbd0fc37..7fe50e55c08 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -435,11 +435,11 @@ def __init_subclass__(cls, **kwargs):
 
         # Set the base and computed vars.
         cls.base_vars = {
-            f.name: BaseVar(_var_name=f.name, _var_type=f.annotation)._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) for v in computed_vars}
         cls.vars = {
diff --git a/reflex/vars.py b/reflex/vars.py
index 4b7ee6ab08c..bc4a81fa9a0 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -31,6 +31,7 @@
     get_origin,
     get_type_hints,
 )
+import pydantic_core
 
 from reflex import constants
 from reflex.base import Base
@@ -219,7 +220,7 @@ def _encode_var(value: Var) -> str:
         final_value = str(value)
         data = value._var_data.dict()
         data["string_length"] = len(final_value)
-        data_json = value._var_data.__config__.json_dumps(data, default=serialize)
+        data_json = value._var_data.__pydantic_serializer__.to_json(value=data, fallback=serialize)
 
         return (
             f"{constants.REFLEX_VAR_OPENING_TAG}{data_json}{constants.REFLEX_VAR_CLOSING_TAG}"
@@ -242,14 +243,13 @@ def _decode_var(value: str) -> tuple[VarData | None, str]:
     if isinstance(value, str):
         offset = 0
 
-        # Initialize some methods for reading json.
-        var_data_config = VarData().__config__
 
         def json_loads(s):
             try:
-                return var_data_config.json_loads(s)
-            except json.decoder.JSONDecodeError:
-                return var_data_config.json_loads(var_data_config.json_loads(f'"{s}"'))
+                return VarData.model_validate(s)
+            except pydantic_core.ValidationError:
+                raise ValueError(f"Invalid VarData: {s}")
+                #  return VarData.model_validate(var_data_config.json_loads(f'"{s}"'))
 
         # Compile regex for finding reflex var tags.
         pattern_re = rf"{constants.REFLEX_VAR_OPENING_TAG}(.*?){constants.REFLEX_VAR_CLOSING_TAG}"

From a5d197c2fb98e4860b19a5c3e19d0cc218f8b7ae Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 00:30:04 +0100
Subject: [PATCH 11/52] serialization fixes

---
 reflex/base.py | 5 ++---
 reflex/vars.py | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/reflex/base.py b/reflex/base.py
index a4c85e074e2..634ae126c8d 100644
--- a/reflex/base.py
+++ b/reflex/base.py
@@ -63,10 +63,9 @@ def json(self) -> str:
         Returns:
             The object as a json string.
         """
-        #  from reflex.utils.serializers import serialize
+        from reflex.utils.serializers import serialize
 
-        return self.model_dump_json()
-        #  return self.__config__.json_dumps(self.dict(), default=serialize)
+        return self.__pydantic_serializer__.to_json(value=self, fallback=serialize).decode()
 
     def set(self, **kwargs):
         """Set multiple fields and return the object.
diff --git a/reflex/vars.py b/reflex/vars.py
index bc4a81fa9a0..a591b76bf70 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -220,7 +220,7 @@ def _encode_var(value: Var) -> str:
         final_value = str(value)
         data = value._var_data.dict()
         data["string_length"] = len(final_value)
-        data_json = value._var_data.__pydantic_serializer__.to_json(value=data, fallback=serialize)
+        data_json = value._var_data.__pydantic_serializer__.to_json(value=data, fallback=serialize).decode()
 
         return (
             f"{constants.REFLEX_VAR_OPENING_TAG}{data_json}{constants.REFLEX_VAR_CLOSING_TAG}"

From faebd22185ca81e240b184d54768773ade956f82 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 00:31:35 +0100
Subject: [PATCH 12/52] black fixes

---
 reflex/base.py        | 6 +++---
 reflex/state.py       | 9 +++++----
 reflex/utils/types.py | 6 +++++-
 reflex/vars.py        | 5 +++--
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/reflex/base.py b/reflex/base.py
index 634ae126c8d..c7694204c39 100644
--- a/reflex/base.py
+++ b/reflex/base.py
@@ -65,7 +65,9 @@ def json(self) -> str:
         """
         from reflex.utils.serializers import serialize
 
-        return self.__pydantic_serializer__.to_json(value=self, fallback=serialize).decode()
+        return self.__pydantic_serializer__.to_json(
+            value=self, fallback=serialize
+        ).decode()
 
     def set(self, **kwargs):
         """Set multiple fields and return the object.
@@ -89,7 +91,6 @@ def get_fields(cls) -> dict[str, Any]:
         """
         return cls.model_fields
 
-
     @classmethod
     def add_field(cls, var: Any, default_value: Any):
         """Add a pydantic field after class definition.
@@ -104,7 +105,6 @@ def add_field(cls, var: Any, default_value: Any):
         cls.model_fields.update({var._var_name: field_info})
         cls.model_rebuild(force=True)
 
-
     def get_value(self, key: str) -> Any:
         """Get the value of a field.
 
diff --git a/reflex/state.py b/reflex/state.py
index 7fe50e55c08..0b00f16fbc8 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -151,7 +151,7 @@ def __init__(self, router_data: Optional[dict] = None):
     "_substate_var_dependencies",
     "_always_dirty_computed_vars",
     "_always_dirty_substates",
-    "_abc_impl", # pydantic v2
+    "_abc_impl",  # pydantic v2
     "_was_touched",
 }
 
@@ -159,6 +159,7 @@ def __init__(self, router_data: Optional[dict] = None):
     "model_post_init",  # never treat this as an event handler
 }
 
+
 def _substate_key(
     token: str,
     state_cls_or_name: BaseState | Type[BaseState] | str | list[str],
@@ -435,9 +436,9 @@ def __init_subclass__(cls, **kwargs):
 
         # Set the base and computed vars.
         cls.base_vars = {
-            field_name: BaseVar(_var_name=field_name, _var_type=field.annotation)._var_set_state(
-                cls
-            )
+            field_name: BaseVar(
+                _var_name=field_name, _var_type=field.annotation
+            )._var_set_state(cls)
             for field_name, field in cls.get_fields().items()
             if field_name not in cls.get_skip_vars()
         }
diff --git a/reflex/utils/types.py b/reflex/utils/types.py
index d320351bcaa..1fe53eb2b15 100644
--- a/reflex/utils/types.py
+++ b/reflex/utils/types.py
@@ -168,7 +168,11 @@ def get_attribute_access_type(cls: GenericType, name: str) -> GenericType | None
         # pydantic models
         field = cls.model_fields[name]
         type_ = field.annotation
-        if not field.is_required() and field.default is None and field.default_factory is None:
+        if (
+            not field.is_required()
+            and field.default is None
+            and field.default_factory is None
+        ):
             # Ensure frontend uses null coalescing when accessing.
             type_ = Optional[type_]
         return type_
diff --git a/reflex/vars.py b/reflex/vars.py
index a591b76bf70..725efdec8f5 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -220,7 +220,9 @@ def _encode_var(value: Var) -> str:
         final_value = str(value)
         data = value._var_data.dict()
         data["string_length"] = len(final_value)
-        data_json = value._var_data.__pydantic_serializer__.to_json(value=data, fallback=serialize).decode()
+        data_json = value._var_data.__pydantic_serializer__.to_json(
+            value=data, fallback=serialize
+        ).decode()
 
         return (
             f"{constants.REFLEX_VAR_OPENING_TAG}{data_json}{constants.REFLEX_VAR_CLOSING_TAG}"
@@ -243,7 +245,6 @@ def _decode_var(value: str) -> tuple[VarData | None, str]:
     if isinstance(value, str):
         offset = 0
 
-
         def json_loads(s):
             try:
                 return VarData.model_validate(s)

From 2def8b97e7717cb54d1b536045dc068918410f48 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 00:32:55 +0100
Subject: [PATCH 13/52] FieldInfo has no name anymore

---
 reflex/components/component.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index b12ff43eebe..bdaed586c21 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -211,9 +211,9 @@ def __init_subclass__(cls, **kwargs):
         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.

From c057f2e3f35473c70759d55bb08eed0d847fd3b8 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 01:17:34 +0100
Subject: [PATCH 14/52] minor pydantic fixups

---
 reflex/base.py                 | 2 +-
 reflex/components/component.py | 4 ++++
 reflex/state.py                | 1 +
 reflex/vars.py                 | 5 +++--
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/reflex/base.py b/reflex/base.py
index c7694204c39..1b282e83fc6 100644
--- a/reflex/base.py
+++ b/reflex/base.py
@@ -2,7 +2,7 @@
 from __future__ import annotations
 
 import os
-from typing import Any, List, Type, Dict, Optional
+from typing import Any, List, Type
 
 import pydantic
 from pydantic import BaseModel
diff --git a/reflex/components/component.py b/reflex/components/component.py
index bdaed586c21..ac4cdee0d14 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -21,6 +21,8 @@
     Union,
 )
 
+from pydantic.fields import ModelPrivateAttr
+
 from reflex.base import Base
 from reflex.compiler.templates import STATEFUL_COMPONENT
 from reflex.components.tags import Tag
@@ -226,6 +228,8 @@ def __init_subclass__(cls, **kwargs):
             inherited_rename_props = {}
             for parent in reversed(cls.mro()):
                 if issubclass(parent, Component) and parent._rename_props:
+                    if isinstance(parent._rename_props, ModelPrivateAttr):
+                        parent._rename_props = parent._rename_props.default
                     inherited_rename_props.update(parent._rename_props)
             cls._rename_props = inherited_rename_props
 
diff --git a/reflex/state.py b/reflex/state.py
index 0b00f16fbc8..cb726f03fb5 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -2080,6 +2080,7 @@ class StateManagerMemory(StateManager):
     class Config:
         """The Pydantic config."""
 
+        # TODO: pydantic v2
         fields = {
             "_states_locks": {"exclude": True},
         }
diff --git a/reflex/vars.py b/reflex/vars.py
index 725efdec8f5..e0b94da7806 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -31,6 +31,7 @@
     get_origin,
     get_type_hints,
 )
+
 import pydantic_core
 
 from reflex import constants
@@ -248,8 +249,8 @@ def _decode_var(value: str) -> tuple[VarData | None, str]:
         def json_loads(s):
             try:
                 return VarData.model_validate(s)
-            except pydantic_core.ValidationError:
-                raise ValueError(f"Invalid VarData: {s}")
+            except pydantic_core.ValidationError as e:
+                raise ValueError(f"Invalid VarData: {s}") from e
                 #  return VarData.model_validate(var_data_config.json_loads(f'"{s}"'))
 
         # Compile regex for finding reflex var tags.

From 7f8a457d74b4b5f40f6e083c0dba1453d0a5dc26 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 01:23:02 +0100
Subject: [PATCH 15/52] migrate to field.annotation and fix default var
 wrapping for undefined

---
 reflex/compiler/utils.py       | 6 ++++--
 reflex/components/component.py | 9 ++++++---
 reflex/state.py                | 4 ++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py
index 497ee12a237..f13e648eaf6 100644
--- a/reflex/compiler/utils.py
+++ b/reflex/compiler/utils.py
@@ -162,8 +162,10 @@ def _compile_client_storage_field(
     for field_type in (Cookie, LocalStorage):
         if isinstance(field.default, field_type):
             cs_obj = field.default
-        elif isinstance(field.type_, type) and issubclass(field.type_, field_type):
-            cs_obj = field.type_()
+        elif isinstance(field.annotation, type) and issubclass(
+            field.annotation, field_type
+        ):
+            cs_obj = field.annotation()
         else:
             continue
         return field_type, cs_obj.options()
diff --git a/reflex/components/component.py b/reflex/components/component.py
index ac4cdee0d14..f32b476bac9 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -22,6 +22,7 @@
 )
 
 from pydantic.fields import ModelPrivateAttr
+from pydantic_core._pydantic_core import PydanticUndefinedType
 
 from reflex.base import Base
 from reflex.compiler.templates import STATEFUL_COMPONENT
@@ -219,9 +220,11 @@ def __init_subclass__(cls, **kwargs):
                 continue
 
             # Set default values for any props.
-            if types._issubclass(field.type_, Var):
-                field.required = False
-                field.default = Var.create(field.default)
+            if types._issubclass(field.annotation, Var):
+                # TODO: pydantic v2 AttributeError: 'FieldInfo' object attribute 'is_required' is read-only
+                #  field.is_required = False
+                if not isinstance(field.default, PydanticUndefinedType):
+                    field.default = Var.create(field.default)
 
         # Ensure renamed props from parent classes are applied to the subclass.
         if cls._rename_props:
diff --git a/reflex/state.py b/reflex/state.py
index cb726f03fb5..5ae04534115 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -1090,8 +1090,8 @@ def _reset_client_storage(self):
         for prop_name in self.base_vars:
             field = fields[prop_name]
             if isinstance(field.default, ClientStorageBase) or (
-                isinstance(field.type_, type)
-                and issubclass(field.type_, ClientStorageBase)
+                isinstance(field.annotation, type)
+                and issubclass(field.annotation, ClientStorageBase)
             ):
                 setattr(self, prop_name, copy.deepcopy(field.default))
 

From 5c584da4ef5d7395ba26f0a3ce77b05418c0f63b Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 01:42:13 +0100
Subject: [PATCH 16/52] add missing default values to icon and link

---
 reflex/components/lucide/icon.py | 4 +++-
 reflex/components/next/link.py   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/reflex/components/lucide/icon.py b/reflex/components/lucide/icon.py
index 6be61a61a17..b56f7f05f21 100644
--- a/reflex/components/lucide/icon.py
+++ b/reflex/components/lucide/icon.py
@@ -1,5 +1,7 @@
 """Lucide Icon component."""
 
+from typing import Optional
+
 from reflex.components.component import Component
 from reflex.style import Style
 from reflex.utils import format
@@ -18,7 +20,7 @@ class Icon(LucideIconComponent):
     tag = "None"
 
     # The size of the icon in pixels.
-    size: Var[int]
+    size: Optional[Var[int]] = None
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/next/link.py b/reflex/components/next/link.py
index be32cd8e579..17520825993 100644
--- a/reflex/components/next/link.py
+++ b/reflex/components/next/link.py
@@ -1,5 +1,7 @@
 """A link component."""
 
+from typing import Optional
+
 from reflex.components.component import Component
 from reflex.vars import Var
 
@@ -14,7 +16,7 @@ class NextLink(Component):
     is_default = True
 
     # The page to link to.
-    href: Var[str]
+    href: Optional[Var[str]] = None
 
     # Whether to pass the href prop to the child.
     pass_href: Var[bool] = True  # type: ignore

From 1abc57c68b07cd38af4d2f1e1043602ec0ee3073 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 01:47:47 +0100
Subject: [PATCH 17/52] fix default value for theme in ChakraProvider

---
 reflex/components/chakra/base.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/reflex/components/chakra/base.py b/reflex/components/chakra/base.py
index a92906bdaa1..f93005726e1 100644
--- a/reflex/components/chakra/base.py
+++ b/reflex/components/chakra/base.py
@@ -2,7 +2,7 @@
 from __future__ import annotations
 
 from functools import lru_cache
-from typing import List, Literal
+from typing import List, Literal, Optional
 
 from reflex.components.component import Component
 from reflex.utils import imports
@@ -55,7 +55,7 @@ class ChakraProvider(ChakraComponent):
 
     tag = "ChakraProvider"
 
-    theme: Var[str]
+    theme: Optional[Var[str]] = None
 
     @classmethod
     def create(cls) -> Component:

From 4d497e0053e192386168de714260e11d5f72a04e Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 01:50:18 +0100
Subject: [PATCH 18/52] hacky workaround to allow __class_getitem__ with
 pydantic

---
 reflex/components/chakra/datadisplay/list.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/reflex/components/chakra/datadisplay/list.py b/reflex/components/chakra/datadisplay/list.py
index 4c78b56e35d..5ae03989c4e 100644
--- a/reflex/components/chakra/datadisplay/list.py
+++ b/reflex/components/chakra/datadisplay/list.py
@@ -6,9 +6,12 @@
 from reflex.components.component import Component
 from reflex.components.core.foreach import Foreach
 from reflex.vars import Var
+from typing import TypeVar, Generic
 
+T = TypeVar("T")
 
-class List(ChakraComponent):
+# TODO: Generic is just a hacky workaround to stop pydantic from complaining
+class List(ChakraComponent, Generic[T]):
     """Display a list of items."""
 
     tag = "List"

From 80a25d6b29e4dc142f031f8dc040b028af880b67 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 01:50:58 +0100
Subject: [PATCH 19/52] add missing type annotation for initialColorMode

---
 reflex/components/chakra/forms/colormodeswitch.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/components/chakra/forms/colormodeswitch.py b/reflex/components/chakra/forms/colormodeswitch.py
index b88e5895b2e..16bcf6b4661 100644
--- a/reflex/components/chakra/forms/colormodeswitch.py
+++ b/reflex/components/chakra/forms/colormodeswitch.py
@@ -100,4 +100,4 @@ class ColorModeScript(ChakraComponent):
     """Chakra color mode script."""
 
     tag = "ColorModeScript"
-    initialColorMode = LIGHT_COLOR_MODE
+    initialColorMode: str = LIGHT_COLOR_MODE

From 8c7dd39f0211796e7d39e4dd59b20a82292e0138 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 01:55:56 +0100
Subject: [PATCH 20/52] fix EventSpec args type annotation for pydantic v2

---
 reflex/event.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/reflex/event.py b/reflex/event.py
index d81e257f949..912a18d4f0c 100644
--- a/reflex/event.py
+++ b/reflex/event.py
@@ -216,7 +216,8 @@ class EventSpec(EventActionsMixin):
     client_handler_name: str = ""
 
     # The arguments to pass to the function.
-    args: Tuple[Tuple[Var, Var], ...] = ()
+    # TODO: pydantic v2 add rx.Var type annotation?
+    args: Tuple[Tuple[Any, Any], ...] = ()
 
     class Config:
         """The Pydantic config."""

From 6d3809efcbf5ba7935ab43c1f85f1ca277a5f384 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 01:57:08 +0100
Subject: [PATCH 21/52] ModelField doesn't exist in pydantic v2

---
 reflex/compiler/utils.py | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py
index f13e648eaf6..701b50f842d 100644
--- a/reflex/compiler/utils.py
+++ b/reflex/compiler/utils.py
@@ -5,8 +5,6 @@
 from typing import Any, Callable, Dict, Optional, Type, Union
 from urllib.parse import urlparse
 
-from pydantic.fields import ModelField
-
 from reflex import constants
 from reflex.components.base import (
     Body,
@@ -149,7 +147,7 @@ def compile_state(state: Type[BaseState]) -> dict:
 
 
 def _compile_client_storage_field(
-    field: ModelField,
+    field,
 ) -> tuple[Type[Cookie] | Type[LocalStorage] | None, dict[str, Any] | None]:
     """Compile the given cookie or local_storage field.
 

From 1c89f012b6619552f9186082403feacf959a7135 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 18:16:17 +0100
Subject: [PATCH 22/52] optionalize some Component props

---
 reflex/components/base/bare.py                |  4 +--
 reflex/components/el/elements/base.py         | 35 +++++++++----------
 reflex/components/radix/themes/base.py        | 26 +++++++++-----
 .../radix/themes/typography/heading.py        | 17 ++++-----
 4 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/reflex/components/base/bare.py b/reflex/components/base/bare.py
index ee66ecd4d5e..c449dc6bab0 100644
--- a/reflex/components/base/bare.py
+++ b/reflex/components/base/bare.py
@@ -1,7 +1,7 @@
 """A bare component."""
 from __future__ import annotations
 
-from typing import Any, Iterator
+from typing import Any, Iterator, Optional
 
 from reflex.components.component import Component
 from reflex.components.tags import Tag
@@ -12,7 +12,7 @@
 class Bare(Component):
     """A component with no tag."""
 
-    contents: Var[str]
+    contents: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, contents: Any) -> Component:
diff --git a/reflex/components/el/elements/base.py b/reflex/components/el/elements/base.py
index fd2dc8cbb20..fefbfdb561b 100644
--- a/reflex/components/el/elements/base.py
+++ b/reflex/components/el/elements/base.py
@@ -1,5 +1,4 @@
-"""Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Union, Optional
 
 from reflex.components.el.element import Element
 from reflex.vars import Var as Var
@@ -9,49 +8,49 @@ class BaseHTML(Element):
     """Base class for common attributes."""
 
     #  Provides a hint for generating a keyboard shortcut for the current element.
-    access_key: Var[Union[str, int, bool]]
+    access_key: Optional[Var[Union[str, int, bool]]] = None
 
     # Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
-    auto_capitalize: Var[Union[str, int, bool]]
+    auto_capitalize: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates whether the element's content is editable.
-    content_editable: Var[Union[str, int, bool]]
+    content_editable: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines the ID of a <menu> element which will serve as the element's context menu.
-    context_menu: Var[Union[str, int, bool]]
+    context_menu: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
-    dir: Var[Union[str, int, bool]]
+    dir: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines whether the element can be dragged.
-    draggable: Var[Union[str, int, bool]]
+    draggable: Optional[Var[Union[str, int, bool]]] = None
 
     # Hints what media types the media element is able to play.
-    enter_key_hint: Var[Union[str, int, bool]]
+    enter_key_hint: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines whether the element is hidden.
-    hidden: Var[Union[str, int, bool]]
+    hidden: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines the type of the element.
-    input_mode: Var[Union[str, int, bool]]
+    input_mode: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines the name of the element for metadata purposes.
-    item_prop: Var[Union[str, int, bool]]
+    item_prop: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines the language used in the element.
-    lang: Var[Union[str, int, bool]]
+    lang: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines the role of the element.
-    role: Var[Union[str, int, bool]]
+    role: Optional[Var[Union[str, int, bool]]] = None
 
     # Assigns a slot in a shadow DOM shadow tree to an element.
-    slot: Var[Union[str, int, bool]]
+    slot: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines whether the element may be checked for spelling errors.
-    spell_check: Var[Union[str, int, bool]]
+    spell_check: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines the position of the current element in the tabbing order.
-    tab_index: Var[Union[str, int, bool]]
+    tab_index: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines a tooltip for the element.
-    title: Var[Union[str, int, bool]]
+    title: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index 28dc68f1616..daa437195c1 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Dict, Literal
+from typing import Any, Dict, Literal, Optional, Union
 
 from reflex.components import Component
 from reflex.components.tags import Tag
@@ -101,7 +101,13 @@ def create(
         """
         component = super().create(*children, **props)
         if component.library is None:
+<<<<<<< HEAD
             component.library = RadixThemesComponent.model_fields["library"].default
+=======
+            component.library = RadixThemesComponent.model_fields[
+                "library"
+            ].default
+>>>>>>> f7035d9b (optionalize some Component props)
         component.alias = "RadixThemes" + (
             component.tag or component.__class__.__name__
         )
@@ -127,25 +133,25 @@ class Theme(RadixThemesComponent):
     tag = "Theme"
 
     # Whether to apply the themes background color to the theme node. Defaults to True.
-    has_background: Var[bool]
+    has_background: Optional[Var[bool]] = None
 
     # Override light or dark mode theme: "inherit" | "light" | "dark". Defaults to "inherit".
-    appearance: Var[LiteralAppearance]
+    appearance: Optional[Var[LiteralAppearance]] = None
 
     # The color used for default buttons, typography, backgrounds, etc
-    accent_color: Var[LiteralAccentColor]
+    accent_color: Optional[Var[LiteralAccentColor]] = None
 
     # The shade of gray, defaults to "auto".
-    gray_color: Var[LiteralGrayColor]
+    gray_color: Optional[Var[LiteralGrayColor]] = None
 
     # Whether panel backgrounds are translucent: "solid" | "translucent" (default)
-    panel_background: Var[LiteralPanelBackground]
+    panel_background: Optional[Var[LiteralPanelBackground]] = None
 
     # Element border radius: "none" | "small" | "medium" | "large" | "full". Defaults to "medium".
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = None
 
     # Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%". Defaults to "100%"
-    scaling: Var[LiteralScaling]
+    scaling: Optional[Var[LiteralScaling]] = None
 
     @classmethod
     def create(
@@ -153,6 +159,7 @@ def create(
         *children,
         color_mode: LiteralAppearance | None = None,
         theme_panel: bool = False,
+        accent_color: Union[LiteralAccentColor, Var[LiteralAccentColor]] | None = None,
         **props,
     ) -> Component:
         """Create a new Radix Theme specification.
@@ -170,6 +177,9 @@ def create(
             props["appearance"] = color_mode
         if theme_panel:
             children = [ThemePanel.create(), *children]
+        if not isinstance(accent_color, Var):
+            accent_color = Var.create(accent_color)
+        props["accent_color"] = accent_color
         return super().create(*children, **props)
 
     def _get_imports(self) -> imports.ImportDict:
diff --git a/reflex/components/radix/themes/typography/heading.py b/reflex/components/radix/themes/typography/heading.py
index 729d0662485..94b19577b77 100644
--- a/reflex/components/radix/themes/typography/heading.py
+++ b/reflex/components/radix/themes/typography/heading.py
@@ -6,6 +6,7 @@
 
 from reflex import el
 from reflex.vars import Var
+from typing import Optional
 
 from ..base import (
     LiteralAccentColor,
@@ -25,25 +26,25 @@ class Heading(el.H1, RadixThemesComponent):
     tag = "Heading"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
-    as_: Var[str]
+    as_: Optional[Var[str]] = None
 
     # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
+    size: Optional[Var[LiteralTextSize]] = None
 
     # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[LiteralTextWeight]
+    weight: Optional[Var[LiteralTextWeight]] = None
 
     # Alignment of text in element: "left" | "center" | "right"
-    align: Var[LiteralTextAlign]
+    align: Optional[Var[LiteralTextAlign]] = None
 
     # Removes the leading trim space: "normal" | "start" | "end" | "both"
-    trim: Var[LiteralTextTrim]
+    trim: Optional[Var[LiteralTextTrim]] = None
 
     # Overrides the accent color inherited from the Theme.
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the text with higher contrast color
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None

From fd5a5b97f21ebf5ea08951c30861d9110a3f83f8 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 19:49:55 +0100
Subject: [PATCH 23/52] Bare.contents should be a Var

---
 reflex/components/base/bare.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/components/base/bare.py b/reflex/components/base/bare.py
index c449dc6bab0..5b8bd68e7d1 100644
--- a/reflex/components/base/bare.py
+++ b/reflex/components/base/bare.py
@@ -27,7 +27,7 @@ def create(cls, contents: Any) -> Component:
         if isinstance(contents, Var) and contents._var_data:
             contents = contents.to(str)
         else:
-            contents = str(contents)
+            contents = Var.create(str(contents))
         return cls(contents=contents)  # type: ignore
 
     def _render(self) -> Tag:

From d0f15c591dd2395a1e172f070fa03bcf09394378 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 20:39:58 +0100
Subject: [PATCH 24/52] optionalize all Var props without defaults

---
 reflex/components/base/link.py                |  20 +-
 reflex/components/base/script.py              |   8 +-
 reflex/components/chakra/datadisplay/badge.py |   5 +-
 .../components/chakra/datadisplay/divider.py  |   6 +-
 reflex/components/chakra/datadisplay/list.py  |  10 +-
 reflex/components/chakra/datadisplay/stat.py  |   3 +-
 reflex/components/chakra/datadisplay/table.py |  16 +-
 reflex/components/chakra/datadisplay/tag.py   |   6 +-
 .../components/chakra/disclosure/accordion.py |  17 +-
 reflex/components/chakra/disclosure/tabs.py   |  29 ++-
 .../chakra/disclosure/transition.py           |  24 +-
 reflex/components/chakra/feedback/alert.py    |   5 +-
 .../chakra/feedback/circularprogress.py       |  22 +-
 reflex/components/chakra/feedback/progress.py |  17 +-
 reflex/components/chakra/feedback/skeleton.py |  33 +--
 reflex/components/chakra/feedback/spinner.py  |  11 +-
 reflex/components/chakra/forms/button.py      |  36 +--
 reflex/components/chakra/forms/checkbox.py    |  32 +--
 reflex/components/chakra/forms/editable.py    |  18 +-
 reflex/components/chakra/forms/form.py        |  16 +-
 reflex/components/chakra/forms/iconbutton.py  |  15 +-
 reflex/components/chakra/forms/input.py       |  29 ++-
 reflex/components/chakra/forms/multiselect.py |  96 ++++----
 reflex/components/chakra/forms/numberinput.py |  41 ++--
 reflex/components/chakra/forms/pininput.py    |  32 +--
 reflex/components/chakra/forms/radio.py       |  28 +--
 reflex/components/chakra/forms/rangeslider.py |  24 +-
 reflex/components/chakra/forms/select.py      |  27 +--
 reflex/components/chakra/forms/slider.py      |  40 ++--
 reflex/components/chakra/forms/switch.py      |  22 +-
 reflex/components/chakra/forms/textarea.py    |  24 +-
 .../components/chakra/layout/aspect_ratio.py  |   3 +-
 reflex/components/chakra/layout/box.py        |   7 +-
 reflex/components/chakra/layout/card.py       |  13 +-
 reflex/components/chakra/layout/container.py  |   3 +-
 reflex/components/chakra/layout/flex.py       |  17 +-
 reflex/components/chakra/layout/grid.py       |  57 +++--
 reflex/components/chakra/layout/stack.py      |  19 +-
 reflex/components/chakra/layout/wrap.py       |  15 +-
 reflex/components/chakra/media/avatar.py      |  22 +-
 reflex/components/chakra/media/image.py       |  20 +-
 .../chakra/navigation/breadcrumb.py           |  15 +-
 reflex/components/chakra/navigation/link.py   |  10 +-
 .../chakra/navigation/linkoverlay.py          |   5 +-
 .../components/chakra/navigation/stepper.py   |  15 +-
 .../components/chakra/overlay/alertdialog.py  |  28 +--
 reflex/components/chakra/overlay/drawer.py    |  34 +--
 reflex/components/chakra/overlay/menu.py      |  66 ++---
 reflex/components/chakra/overlay/modal.py     |  26 +-
 reflex/components/chakra/overlay/popover.py   |  44 ++--
 reflex/components/chakra/overlay/tooltip.py   |  36 +--
 .../components/chakra/typography/heading.py   |   6 +-
 .../components/chakra/typography/highlight.py |   5 +-
 reflex/components/chakra/typography/text.py   |   6 +-
 reflex/components/component.py                |   1 -
 reflex/components/core/cond.py                |   2 +-
 reflex/components/core/debounce.py            |  14 +-
 reflex/components/core/foreach.py             |   2 +-
 reflex/components/core/html.py                |   4 +-
 reflex/components/core/match.py               |   3 +-
 reflex/components/core/upload.py              |  16 +-
 reflex/components/datadisplay/code.py         |  10 +-
 reflex/components/datadisplay/dataeditor.py   |  56 ++---
 reflex/components/el/elements/base.py         |   2 +-
 reflex/components/el/elements/forms.py        | 202 ++++++++--------
 reflex/components/el/elements/inline.py       |  26 +-
 reflex/components/el/elements/media.py        | 140 +++++------
 reflex/components/el/elements/metadata.py     |  32 +--
 reflex/components/el/elements/other.py        |   8 +-
 reflex/components/el/elements/scripts.py      |  20 +-
 reflex/components/el/elements/tables.py       |  42 ++--
 reflex/components/el/elements/typography.py   |  22 +-
 reflex/components/gridjs/datatable.py         |  13 +-
 reflex/components/moment/moment.py            |  41 ++--
 reflex/components/next/image.py               |  27 +--
 reflex/components/next/video.py               |   3 +-
 reflex/components/plotly/plotly.py            |  15 +-
 .../components/radix/primitives/accordion.py  |  19 +-
 reflex/components/radix/primitives/base.py    |   4 +-
 reflex/components/radix/primitives/drawer.py  |  16 +-
 reflex/components/radix/primitives/form.py    |  15 +-
 .../components/radix/primitives/progress.py   |  15 +-
 reflex/components/radix/primitives/slider.py  |  25 +-
 reflex/components/radix/themes/base.py        |  17 +-
 .../radix/themes/components/alert_dialog.py   |   8 +-
 .../radix/themes/components/aspect_ratio.py   |   4 +-
 .../radix/themes/components/avatar.py         |  17 +-
 .../radix/themes/components/badge.py          |  12 +-
 .../radix/themes/components/button.py         |  14 +-
 .../radix/themes/components/callout.py        |  17 +-
 .../radix/themes/components/card.py           |   8 +-
 .../radix/themes/components/checkbox.py       |  51 ++--
 .../radix/themes/components/context_menu.py   |  26 +-
 .../radix/themes/components/dialog.py         |   7 +-
 .../radix/themes/components/dropdown_menu.py  |  84 +++----
 .../radix/themes/components/hover_card.py     |  18 +-
 .../radix/themes/components/icon_button.py    |  15 +-
 .../radix/themes/components/inset.py          |  20 +-
 .../radix/themes/components/popover.py        |  18 +-
 .../radix/themes/components/radio_group.py    |  45 ++--
 .../radix/themes/components/scroll_area.py    |   8 +-
 .../radix/themes/components/select.py         |  62 ++---
 .../radix/themes/components/separator.py      |   8 +-
 .../radix/themes/components/slider.py         |  28 +--
 .../radix/themes/components/switch.py         |  26 +-
 .../radix/themes/components/table.py          |  14 +-
 .../radix/themes/components/tabs.py           |  16 +-
 .../radix/themes/components/text_area.py      |  36 +--
 .../radix/themes/components/text_field.py     |  43 ++--
 .../radix/themes/components/tooltip.py        |  34 +--
 reflex/components/radix/themes/layout/base.py |  21 +-
 .../radix/themes/layout/container.py          |   4 +-
 reflex/components/radix/themes/layout/flex.py |  15 +-
 reflex/components/radix/themes/layout/grid.py |  21 +-
 .../components/radix/themes/layout/section.py |   4 +-
 .../radix/themes/typography/blockquote.py     |  14 +-
 .../radix/themes/typography/code.py           |  16 +-
 .../radix/themes/typography/heading.py        |   3 +-
 .../radix/themes/typography/link.py           |  22 +-
 .../radix/themes/typography/text.py           |  23 +-
 .../components/react_player/react_player.py   |  19 +-
 reflex/components/recharts/cartesian.py       | 226 +++++++++---------
 reflex/components/recharts/charts.py          |  92 +++----
 reflex/components/recharts/general.py         |  68 +++---
 reflex/components/recharts/polar.py           | 122 +++++-----
 reflex/components/suneditor/editor.py         |  30 +--
 reflex/components/tags/cond_tag.py            |   3 +-
 reflex/components/tags/iter_tag.py            |   4 +-
 reflex/components/tags/match_tag.py           |   5 +-
 tests/components/test_component.py            |  34 +--
 130 files changed, 1680 insertions(+), 1701 deletions(-)

diff --git a/reflex/components/base/link.py b/reflex/components/base/link.py
index 04d109e51c7..b2a69616304 100644
--- a/reflex/components/base/link.py
+++ b/reflex/components/base/link.py
@@ -1,5 +1,5 @@
 """Display the title of the current page."""
-
+from typing import Optional
 
 from reflex.components.component import Component
 from reflex.vars import Var
@@ -11,10 +11,10 @@ class RawLink(Component):
     tag = "link"
 
     # The href.
-    href: Var[str]
+    href: Optional[Var[str]] = None
 
     # The type of link.
-    rel: Var[str]
+    rel: Optional[Var[str]] = None
 
 
 class ScriptTag(Component):
@@ -23,22 +23,22 @@ class ScriptTag(Component):
     tag = "script"
 
     # The type of script represented.
-    type_: Var[str]
+    type_: Optional[Var[str]] = None
 
     # The URI of an external script.
-    source: Var[str]
+    source: Optional[Var[str]] = None
 
     # Metadata to verify the content of the script.
-    integrity: Var[str]
+    integrity: Optional[Var[str]] = None
 
     # Whether to allow cross-origin requests.
-    crossorigin: Var[str]
+    crossorigin: Optional[Var[str]] = None
 
     # Indicates which referrer to send when fetching the script.
-    referrer_policy: Var[str]
+    referrer_policy: Optional[Var[str]] = None
 
     # Whether to asynchronously load the script.
-    is_async: Var[bool]
+    is_async: Optional[Var[bool]] = None
 
     # Whether to defer loading the script.
-    defer: Var[bool]
+    defer: Optional[Var[bool]] = None
diff --git a/reflex/components/base/script.py b/reflex/components/base/script.py
index e379a1824c9..752d7c92fa7 100644
--- a/reflex/components/base/script.py
+++ b/reflex/components/base/script.py
@@ -1,10 +1,10 @@
 """Next.js script wrappers and inline script functionality.
-
-https://nextjs.org/docs/app/api-reference/components/script
+from typing import Optional
+https://nextjs.org/docs/app/api-reference/components/script.
 """
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.component import Component
 from reflex.vars import Var
@@ -25,7 +25,7 @@ class Script(Component):
     is_default = True
 
     # Required unless inline script is used
-    src: Var[str]
+    src: Optional[Var[str]] = None
 
     # When the script will execute: afterInteractive | beforeInteractive | lazyOnload
     strategy: Var[str] = "afterInteractive"  # type: ignore
diff --git a/reflex/components/chakra/datadisplay/badge.py b/reflex/components/chakra/datadisplay/badge.py
index 52d36fe7c1c..01f1d5c458e 100644
--- a/reflex/components/chakra/datadisplay/badge.py
+++ b/reflex/components/chakra/datadisplay/badge.py
@@ -1,4 +1,5 @@
 """Badge component."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent, LiteralVariant
 from reflex.vars import Var
@@ -10,7 +11,7 @@ class Badge(ChakraComponent):
     tag = "Badge"
 
     # Variant of the badge ("solid" | "subtle" | "outline")
-    variant: Var[LiteralVariant]
+    variant: Optional[Var[LiteralVariant]] = None
 
     # The color of the badge
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/datadisplay/divider.py b/reflex/components/chakra/datadisplay/divider.py
index de33e4ec04a..b7d07563233 100644
--- a/reflex/components/chakra/datadisplay/divider.py
+++ b/reflex/components/chakra/datadisplay/divider.py
@@ -1,5 +1,5 @@
 """A line to divide parts of the layout."""
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex.components.chakra import ChakraComponent, LiteralDividerVariant
 from reflex.vars import Var
@@ -13,7 +13,7 @@ class Divider(ChakraComponent):
     tag = "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]
+    orientation: Optional[Var[LiteralLayout]] = None
 
     # Variant of the divider ("solid" | "dashed")
-    variant: Var[LiteralDividerVariant]
+    variant: Optional[Var[LiteralDividerVariant]] = None
diff --git a/reflex/components/chakra/datadisplay/list.py b/reflex/components/chakra/datadisplay/list.py
index 5ae03989c4e..cc32b810618 100644
--- a/reflex/components/chakra/datadisplay/list.py
+++ b/reflex/components/chakra/datadisplay/list.py
@@ -1,12 +1,12 @@
 """List components."""
-
 from __future__ import annotations
 
+from typing import Generic, Optional, TypeVar
+
 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.components.core.foreach import Foreach
 from reflex.vars import Var
-from typing import TypeVar, Generic
 
 T = TypeVar("T")
 
@@ -17,13 +17,13 @@ class List(ChakraComponent, Generic[T]):
     tag = "List"
 
     # The space between each list item
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None
 
     # Shorthand prop for listStylePosition
-    style_position: Var[str]
+    style_position: Optional[Var[str]] = None
 
     # Shorthand prop for listStyleType
-    style_type: Var[str]
+    style_type: Optional[Var[str]] = None
 
     @classmethod
     def create(
diff --git a/reflex/components/chakra/datadisplay/stat.py b/reflex/components/chakra/datadisplay/stat.py
index b9fe7f33293..58078cef39c 100644
--- a/reflex/components/chakra/datadisplay/stat.py
+++ b/reflex/components/chakra/datadisplay/stat.py
@@ -1,4 +1,5 @@
 """Statistics components."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@@ -71,7 +72,7 @@ class StatArrow(ChakraComponent):
     tag = "StatArrow"
 
     # The type of arrow, either increase or decrease.
-    type_: Var[str]
+    type_: Optional[Var[str]] = None
 
 
 class StatGroup(ChakraComponent):
diff --git a/reflex/components/chakra/datadisplay/table.py b/reflex/components/chakra/datadisplay/table.py
index cdc5c1fea94..b2237817b24 100644
--- a/reflex/components/chakra/datadisplay/table.py
+++ b/reflex/components/chakra/datadisplay/table.py
@@ -1,5 +1,5 @@
 """Table components."""
-from typing import List, Tuple
+from typing import List, Optional, Tuple
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@@ -14,16 +14,16 @@ class Table(ChakraComponent):
     tag = "Table"
 
     # The color scheme of the table
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None
 
     # The variant of the table style to use
-    variant: Var[str]
+    variant: Optional[Var[str]] = None
 
     # The size of the table
-    size: Var[str]
+    size: Optional[Var[str]] = None
 
     # The placement of the table caption.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None
 
     @classmethod
     def create(
@@ -274,7 +274,7 @@ class Th(ChakraComponent):
     _invalid_children: List[str] = ["Tbody", "Thead", "Tr", "Td", "Th"]
 
     # Aligns the cell content to the right.
-    is_numeric: Var[bool]
+    is_numeric: Optional[Var[bool]] = None
 
 
 class Td(ChakraComponent):
@@ -286,7 +286,7 @@ class Td(ChakraComponent):
     _invalid_children: List[str] = ["Tbody", "Thead"]
 
     # Aligns the cell content to the right.
-    is_numeric: Var[bool]
+    is_numeric: Optional[Var[bool]] = None
 
 
 class TableCaption(ChakraComponent):
@@ -295,7 +295,7 @@ class TableCaption(ChakraComponent):
     tag = "TableCaption"
 
     # The placement of the table caption. This sets the `caption-side` CSS attribute.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None
 
 
 class TableContainer(ChakraComponent):
diff --git a/reflex/components/chakra/datadisplay/tag.py b/reflex/components/chakra/datadisplay/tag.py
index 4a02d22d987..7fd9e895461 100644
--- a/reflex/components/chakra/datadisplay/tag.py
+++ b/reflex/components/chakra/datadisplay/tag.py
@@ -44,17 +44,17 @@ class Tag(ChakraComponent):
     # options: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" |
     #  "cyan" | "purple" | "pink"
     # default: "gray"
-    color_scheme: Var[LiteralTagColorScheme]
+    color_scheme: Optional[Var[LiteralTagColorScheme]] = None
 
     # The size of the tag
     # options: "sm" | "md" | "lg"
     # default: "md"
-    size: Var[LiteralTagSize]
+    size: Optional[Var[LiteralTagSize]] = None
 
     # The variant of the tag
     # options: "solid" | "subtle" | "outline"
     # default: "solid"
-    variant: Var[LiteralVariant]
+    variant: Optional[Var[LiteralVariant]] = None
 
     @classmethod
     def create(
diff --git a/reflex/components/chakra/disclosure/accordion.py b/reflex/components/chakra/disclosure/accordion.py
index 7fd61ca6133..15148c1376d 100644
--- a/reflex/components/chakra/disclosure/accordion.py
+++ b/reflex/components/chakra/disclosure/accordion.py
@@ -1,5 +1,4 @@
 """Container to stack elements with spacing."""
-
 from typing import List, Optional, Union
 
 from reflex.components.chakra import ChakraComponent
@@ -13,19 +12,19 @@ class Accordion(ChakraComponent):
     tag = "Accordion"
 
     # If true, multiple accordion items can be expanded at once.
-    allow_multiple: Var[bool]
+    allow_multiple: Optional[Var[bool]] = None
 
     # If true, any expanded accordion item can be collapsed again.
-    allow_toggle: Var[bool]
+    allow_toggle: Optional[Var[bool]] = None
 
     # The initial index(es) of the expanded accordion item(s).
-    default_index: Var[Optional[List[int]]]
+    default_index: Optional[Var[Optional[List[int]]]] = None
 
     # The index(es) of the expanded accordion item
-    index: Var[Union[int, List[int]]]
+    index: Optional[Var[Union[int, List[int]]]] = None
 
     # If true, height animation and transitions will be disabled.
-    reduce_motion: Var[bool]
+    reduce_motion: Optional[Var[bool]] = None
 
     @classmethod
     def create(
@@ -83,13 +82,13 @@ class AccordionItem(ChakraComponent):
     tag = "AccordionItem"
 
     # A unique id for the accordion item.
-    id_: Var[str]
+    id_: Optional[Var[str]] = None
 
     # If true, the accordion item will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the accordion item will be focusable.
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None
 
 
 class AccordionButton(ChakraComponent):
diff --git a/reflex/components/chakra/disclosure/tabs.py b/reflex/components/chakra/disclosure/tabs.py
index 4600384b4e5..cf687170277 100644
--- a/reflex/components/chakra/disclosure/tabs.py
+++ b/reflex/components/chakra/disclosure/tabs.py
@@ -1,5 +1,4 @@
 """Tab components."""
-
 from typing import List, Optional, Tuple
 
 from reflex.components.chakra import (
@@ -18,34 +17,34 @@ class Tabs(ChakraComponent):
     tag = "Tabs"
 
     # The alignment of the tabs ("center" | "end" | "start").
-    align: Var[LiteralTagAlign]
+    align: Optional[Var[LiteralTagAlign]] = None
 
     # The initial index of the selected tab (in uncontrolled mode).
-    default_index: Var[int]
+    default_index: Optional[Var[int]] = None
 
     # The id of the tab.
-    id_: Var[str]
+    id_: Optional[Var[str]] = None
 
     # If true, tabs will stretch to width of the tablist.
-    is_fitted: Var[bool]
+    is_fitted: Optional[Var[bool]] = None
 
     # Performance booster. If true, rendering of the tab panel's will be deferred until it is selected.
-    is_lazy: Var[bool]
+    is_lazy: Optional[Var[bool]] = None
 
     # If true, the tabs will be manually activated and display its panel by pressing Space or Enter. If false, the tabs will be automatically activated and their panel is displayed when they receive focus.
-    is_manual: Var[bool]
+    is_manual: Optional[Var[bool]] = None
 
     # The orientation of the tab list.
-    orientation: Var[str]
+    orientation: Optional[Var[str]] = None
 
     # "line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | "unstyled"
-    variant: Var[LiteralTabsVariant]
+    variant: Optional[Var[LiteralTabsVariant]] = None
 
     # The color scheme of the tabs.
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None
 
     # Index of the selected tab (in controlled mode).
-    index: Var[int]
+    index: Optional[Var[int]] = None
 
     @classmethod
     def create(
@@ -79,16 +78,16 @@ class Tab(ChakraComponent):
     tag = "Tab"
 
     # If true, the Tab won't be toggleable.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the Tab will be selected.
-    is_selected: Var[bool]
+    is_selected: Optional[Var[bool]] = None
 
     # The id of the tab.
-    id_: Var[str]
+    id_: Optional[Var[str]] = None
 
     # The id of the panel.
-    panel_id: Var[str]
+    panel_id: Optional[Var[str]] = None
 
     _valid_parents: List[str] = ["TabList"]
 
diff --git a/reflex/components/chakra/disclosure/transition.py b/reflex/components/chakra/disclosure/transition.py
index f24afa827a6..c2fc18bd3b0 100644
--- a/reflex/components/chakra/disclosure/transition.py
+++ b/reflex/components/chakra/disclosure/transition.py
@@ -1,5 +1,5 @@
 """A transition Component."""
-from typing import Union
+from typing import Optional, Union
 
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@@ -9,10 +9,10 @@ class Transition(ChakraComponent):
     """Base componemt of all transitions."""
 
     # Show the component; triggers when enter or exit states
-    in_: Var[bool]
+    in_: Optional[Var[bool]] = None
 
     # If true, the element will unmount when `in={false}` and animation is done
-    unmount_on_exit: Var[bool]
+    unmount_on_exit: Optional[Var[bool]] = None
 
 
 class Fade(Transition):
@@ -27,10 +27,10 @@ class ScaleFade(Transition):
     tag = "ScaleFade"
 
     # The initial scale of the element
-    initial_scale: Var[float]
+    initial_scale: Optional[Var[float]] = None
 
     # If true, the element will transition back to exit state
-    reverse: Var[bool]
+    reverse: Optional[Var[bool]] = None
 
 
 class Slide(Transition):
@@ -39,7 +39,7 @@ class Slide(Transition):
     tag = "Slide"
 
     # The direction to slide from
-    direction: Var[str]
+    direction: Optional[Var[str]] = None
 
 
 class SlideFade(Transition):
@@ -48,13 +48,13 @@ class SlideFade(Transition):
     tag = "SlideFade"
 
     # The offset on the horizontal or x axis
-    offsetX: Var[Union[str, int]]
+    offsetX: Optional[Var[Union[str, int]]] = None
 
     # The offset on the vertical or y axis
-    offsetY: Var[Union[str, int]]
+    offsetY: Optional[Var[Union[str, int]]] = None
 
     # If true, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out
-    reverse: Var[bool]
+    reverse: Optional[Var[bool]] = None
 
 
 class Collapse(Transition):
@@ -63,10 +63,10 @@ class Collapse(Transition):
     tag = "Collapse"
 
     # If true, the opacity of the content will be animated
-    animateOpacity: Var[bool]
+    animateOpacity: Optional[Var[bool]] = None
 
     # The height you want the content in its expanded state.
-    endingHeight: Var[str]
+    endingHeight: Optional[Var[str]] = None
 
     # The height you want the content in its collapsed state.
-    startingHeight: Var[Union[str, int]]
+    startingHeight: Optional[Var[Union[str, int]]] = None
diff --git a/reflex/components/chakra/feedback/alert.py b/reflex/components/chakra/feedback/alert.py
index 57f99817fb2..2940a6d0c88 100644
--- a/reflex/components/chakra/feedback/alert.py
+++ b/reflex/components/chakra/feedback/alert.py
@@ -1,4 +1,5 @@
 """Alert components."""
+from typing import Optional
 
 from reflex.components.chakra import (
     ChakraComponent,
@@ -15,10 +16,10 @@ class Alert(ChakraComponent):
     tag = "Alert"
 
     # The status of the alert ("success" | "info" | "warning" | "error")
-    status: Var[LiteralStatus]
+    status: Optional[Var[LiteralStatus]] = None
 
     # "subtle" | "left-accent" | "top-accent" | "solid"
-    variant: Var[LiteralAlertVariant]
+    variant: Optional[Var[LiteralAlertVariant]] = None
 
     @classmethod
     def create(
diff --git a/reflex/components/chakra/feedback/circularprogress.py b/reflex/components/chakra/feedback/circularprogress.py
index 45a0877eb63..c22ea6210f3 100644
--- a/reflex/components/chakra/feedback/circularprogress.py
+++ b/reflex/components/chakra/feedback/circularprogress.py
@@ -1,5 +1,5 @@
 """Container to stack elements with spacing."""
-from typing import Union
+from typing import Optional, Union
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@@ -12,34 +12,34 @@ class CircularProgress(ChakraComponent):
     tag = "CircularProgress"
 
     # If true, the cap of the progress indicator will be rounded.
-    cap_is_round: Var[bool]
+    cap_is_round: Optional[Var[bool]] = None
 
     # If true, the progress will be indeterminate and the value prop will be ignored
-    is_indeterminate: Var[bool]
+    is_indeterminate: Optional[Var[bool]] = None
 
     # Maximum value defining 100% progress made (must be higher than 'min')
-    max_: Var[int]
+    max_: Optional[Var[int]] = None
 
     # Minimum value defining 'no progress' (must be lower than 'max')
-    min_: Var[int]
+    min_: Optional[Var[int]] = None
 
     # This defines the stroke width of the svg circle.
-    thickness: Var[Union[str, int]]
+    thickness: Optional[Var[Union[str, int]]] = None
 
     # The color name of the progress track. Use a color key in the theme object
-    track_color: Var[str]
+    track_color: Optional[Var[str]] = None
 
     # Current progress (must be between min/max).
-    value: Var[int]
+    value: Optional[Var[int]] = None
 
     # The desired valueText to use in place of the value.
-    value_text: Var[str]
+    value_text: Optional[Var[str]] = None
 
     # The color name of the progress bar
-    color: Var[str]
+    color: Optional[Var[str]] = None
 
     # The size of the circular progress
-    size: Var[str]
+    size: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, *children, label=None, **props) -> Component:
diff --git a/reflex/components/chakra/feedback/progress.py b/reflex/components/chakra/feedback/progress.py
index 6dbaf1e94ca..3f6983383cb 100644
--- a/reflex/components/chakra/feedback/progress.py
+++ b/reflex/components/chakra/feedback/progress.py
@@ -1,6 +1,5 @@
 """Container to stack elements with spacing."""
-
-from typing import Union
+from typing import Optional, Union
 
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@@ -12,22 +11,22 @@ class Progress(ChakraComponent):
     tag = "Progress"
 
     # If true, the progress bar will show stripe
-    has_stripe: Var[bool]
+    has_stripe: Optional[Var[bool]] = None
 
     # If true, and has_stripe is true, the stripes will be animated
-    is_animated: Var[bool]
+    is_animated: Optional[Var[bool]] = None
 
     # If true, the progress will be indeterminate and the value prop will be ignored
-    is_indeterminate: Var[bool]
+    is_indeterminate: Optional[Var[bool]] = None
 
     # The maximum value of the progress
-    max_: Var[int]
+    max_: Optional[Var[int]] = None
 
     # The minimum value of the progress
-    min_: Var[int]
+    min_: Optional[Var[int]] = None
 
     # The value of the progress indicator. If undefined the progress bar will be in indeterminate state
-    value: Var[Union[int, float]]
+    value: Optional[Var[Union[int, float]]] = None
 
     # The color scheme of the progress bar.
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/feedback/skeleton.py b/reflex/components/chakra/feedback/skeleton.py
index ef71cd51439..4766dc6f63e 100644
--- a/reflex/components/chakra/feedback/skeleton.py
+++ b/reflex/components/chakra/feedback/skeleton.py
@@ -1,4 +1,5 @@
 """Container to stack elements with spacing."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@@ -10,19 +11,19 @@ class Skeleton(ChakraComponent):
     tag = "Skeleton"
 
     # The color at the animation end
-    end_color: Var[str]
+    end_color: Optional[Var[str]] = None
 
     # The fadeIn duration in seconds
-    fade_duration: Var[float]
+    fade_duration: Optional[Var[float]] = None
 
     # If true, it'll render its children with a nice fade transition
-    is_loaded: Var[bool]
+    is_loaded: Optional[Var[bool]] = None
 
     # The animation speed in seconds
-    speed: Var[float]
+    speed: Optional[Var[float]] = None
 
     # The color at the animation start
-    start_color: Var[str]
+    start_color: Optional[Var[str]] = None
 
 
 class SkeletonCircle(ChakraComponent):
@@ -31,19 +32,19 @@ class SkeletonCircle(ChakraComponent):
     tag = "SkeletonCircle"
 
     # The color at the animation end
-    end_color: Var[str]
+    end_color: Optional[Var[str]] = None
 
     # The fadeIn duration in seconds
-    fade_duration: Var[float]
+    fade_duration: Optional[Var[float]] = None
 
     # If true, it'll render its children with a nice fade transition
-    is_loaded: Var[bool]
+    is_loaded: Optional[Var[bool]] = None
 
     # The animation speed in seconds
-    speed: Var[float]
+    speed: Optional[Var[float]] = None
 
     # The color at the animation start
-    start_color: Var[str]
+    start_color: Optional[Var[str]] = None
 
 
 class SkeletonText(ChakraComponent):
@@ -52,19 +53,19 @@ class SkeletonText(ChakraComponent):
     tag = "SkeletonText"
 
     # The color at the animation end
-    end_color: Var[str]
+    end_color: Optional[Var[str]] = None
 
     # The fadeIn duration in seconds
-    fade_duration: Var[float]
+    fade_duration: Optional[Var[float]] = None
 
     # If true, it'll render its children with a nice fade transition
-    is_loaded: Var[bool]
+    is_loaded: Optional[Var[bool]] = None
 
     # The animation speed in seconds
-    speed: Var[float]
+    speed: Optional[Var[float]] = None
 
     # The color at the animation start
-    start_color: Var[str]
+    start_color: Optional[Var[str]] = None
 
     # Number is lines of text.
-    no_of_lines: Var[int]
+    no_of_lines: Optional[Var[int]] = None
diff --git a/reflex/components/chakra/feedback/spinner.py b/reflex/components/chakra/feedback/spinner.py
index eed335ce19e..74e076d10a2 100644
--- a/reflex/components/chakra/feedback/spinner.py
+++ b/reflex/components/chakra/feedback/spinner.py
@@ -1,4 +1,5 @@
 """Container to stack elements with spacing."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent, LiteralSpinnerSize
 from reflex.vars import Var
@@ -10,16 +11,16 @@ class Spinner(ChakraComponent):
     tag = "Spinner"
 
     # The color of the empty area in the spinner
-    empty_color: Var[str]
+    empty_color: Optional[Var[str]] = None
 
     # For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.
-    label: Var[str]
+    label: Optional[Var[str]] = None
 
     # The speed of the spinner must be as a string and in seconds '1s'. Default is '0.45s'.
-    speed: Var[str]
+    speed: Optional[Var[str]] = None
 
     # The thickness of the spinner.
-    thickness: Var[int]
+    thickness: Optional[Var[int]] = None
 
     # "xs" | "sm" | "md" | "lg" | "xl"
-    size: Var[LiteralSpinnerSize]
+    size: Optional[Var[LiteralSpinnerSize]] = None
diff --git a/reflex/components/chakra/forms/button.py b/reflex/components/chakra/forms/button.py
index bbadbf73d81..64330687124 100644
--- a/reflex/components/chakra/forms/button.py
+++ b/reflex/components/chakra/forms/button.py
@@ -1,5 +1,5 @@
 """A button component."""
-from typing import List
+from typing import List, Optional
 
 from reflex.components.chakra import (
     ChakraComponent,
@@ -17,48 +17,48 @@ class Button(ChakraComponent):
     tag = "Button"
 
     # The space between the button icon and label.
-    icon_spacing: Var[int]
+    icon_spacing: Optional[Var[int]] = None
 
     # If true, the button will be styled in its active state.
-    is_active: Var[bool]
+    is_active: Optional[Var[bool]] = None
 
     # If true, the button will be styled in its disabled state.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the button will take up the full width of its container.
-    is_full_width: Var[bool]
+    is_full_width: Optional[Var[bool]] = None
 
     # If true, the button will show a spinner.
-    is_loading: Var[bool]
+    is_loading: Optional[Var[bool]] = None
 
     # The label to show in the button when isLoading is true If no text is passed, it only shows the spinner.
-    loading_text: Var[str]
+    loading_text: Optional[Var[str]] = None
 
     # "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None
 
     # "ghost" | "outline" | "solid" | "link" | "unstyled"
-    variant: Var[LiteralButtonVariant]
+    variant: Optional[Var[LiteralButtonVariant]] = None
 
     # Built in color scheme for ease of use.
     # Options:
     # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
     # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None
 
     # Position of the loading spinner.
     # Options:
     # "start" | "end"
-    spinner_placement: Var[LiteralSpinnerPlacement]
+    spinner_placement: Optional[Var[LiteralSpinnerPlacement]] = None
 
     # The type of button.
-    type_: Var[str]
+    type_: Optional[Var[str]] = None
 
     # Components that are not allowed as children.
     _invalid_children: List[str] = ["Button", "MenuButton"]
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
 
 class ButtonGroup(ChakraComponent):
@@ -67,16 +67,16 @@ class ButtonGroup(ChakraComponent):
     tag = "ButtonGroup"
 
     # If true, the borderRadius of button that are direct children will be altered to look flushed together.
-    is_attached: Var[bool]
+    is_attached: Optional[Var[bool]] = None
 
     # If true, all wrapped button will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # The spacing between the buttons.
-    spacing: Var[int]
+    spacing: Optional[Var[int]] = None
 
     # "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None
 
     # "ghost" | "outline" | "solid" | "link" | "unstyled"
-    variant: Var[LiteralButtonVariant]
+    variant: Optional[Var[LiteralButtonVariant]] = None
diff --git a/reflex/components/chakra/forms/checkbox.py b/reflex/components/chakra/forms/checkbox.py
index b0e29ea1678..298eaf16749 100644
--- a/reflex/components/chakra/forms/checkbox.py
+++ b/reflex/components/chakra/forms/checkbox.py
@@ -1,7 +1,7 @@
 """A checkbox component."""
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.chakra import (
     ChakraComponent,
@@ -21,40 +21,40 @@ class Checkbox(ChakraComponent):
     # Options:
     # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
     # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None
 
     # "sm" | "md" | "lg"
-    size: Var[LiteralTagSize]
+    size: Optional[Var[LiteralTagSize]] = None
 
     # If true, the checkbox will be checked.
-    is_checked: Var[bool]
+    is_checked: Optional[Var[bool]] = None
 
     # If true, the checkbox will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true and is_disabled is passed, the checkbox will remain tabbable but not interactive
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None
 
     # If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the is_checked var.
-    is_indeterminate: Var[bool]
+    is_indeterminate: Optional[Var[bool]] = None
 
     # If true, the checkbox is marked as invalid. Changes style of unchecked state.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # If true, the checkbox will be readonly
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # If true, the checkbox input is marked as required, and required attribute will be added
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None
 
     # The name of the input field in a checkbox (Useful for form submission).
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # The value of the input field when checked (use is_checked prop for a bool)
     value: Var[str] = Var.create("true")  # type: ignore
 
     # The spacing between the checkbox and its label text (0.5rem)
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -74,13 +74,13 @@ class CheckboxGroup(ChakraComponent):
     tag = "CheckboxGroup"
 
     # The value of the checkbox group
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The initial value of the checkbox group
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # If true, all wrapped checkbox inputs will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs
-    is_native: Var[bool]
+    is_native: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/forms/editable.py b/reflex/components/chakra/forms/editable.py
index d09a90a3fa0..4524492f1c6 100644
--- a/reflex/components/chakra/forms/editable.py
+++ b/reflex/components/chakra/forms/editable.py
@@ -1,7 +1,7 @@
 """An editable component."""
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.chakra import ChakraComponent
 from reflex.constants import EventTriggers
@@ -14,28 +14,28 @@ class Editable(ChakraComponent):
     tag = "Editable"
 
     # If true, the Editable will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the read only view, has a tabIndex set to 0 so it can receive focus via the keyboard or click.
-    is_preview_focusable: Var[bool]
+    is_preview_focusable: Optional[Var[bool]] = None
 
     # The placeholder text when the value is empty.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # If true, the input's text will be highlighted on focus.
-    select_all_on_focus: Var[bool]
+    select_all_on_focus: Optional[Var[bool]] = None
 
     # If true, the Editable will start with edit mode by default.
-    start_with_edit_view: Var[bool]
+    start_with_edit_view: Optional[Var[bool]] = None
 
     # If true, it'll update the value onBlur and turn off the edit mode.
-    submit_on_blur: Var[bool]
+    submit_on_blur: Optional[Var[bool]] = None
 
     # The value of the Editable in both edit & preview mode
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The initial value of the Editable in both edit and preview mode.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
diff --git a/reflex/components/chakra/forms/form.py b/reflex/components/chakra/forms/form.py
index 5d38f66b4b6..6149d645ff6 100644
--- a/reflex/components/chakra/forms/form.py
+++ b/reflex/components/chakra/forms/form.py
@@ -2,7 +2,7 @@
 from __future__ import annotations
 
 from hashlib import md5
-from typing import Any, Dict, Iterator
+from typing import Any, Dict, Iterator, Optional
 
 from jinja2 import Environment
 
@@ -45,7 +45,7 @@ class Form(ChakraComponent):
     reset_on_submit: Var[bool] = False  # type: ignore
 
     # The name used to make this form's submit handler function unique
-    handle_submit_unique_name: Var[str]
+    handle_submit_unique_name: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, *children, **props) -> Component:
@@ -154,19 +154,19 @@ class FormControl(ChakraComponent):
     tag = "FormControl"
 
     # If true, the form control will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the form control will be invalid.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # If true, the form control will be readonly
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # If true, the form control will be required.
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None
 
     # The label text used to inform users as to what information is requested for a text field.
-    label: Var[str]
+    label: Optional[Var[str]] = None
 
     @classmethod
     def create(
@@ -225,7 +225,7 @@ class FormLabel(ChakraComponent):
     tag = "FormLabel"
 
     # Link
-    html_for: Var[str]
+    html_for: Optional[Var[str]] = None
 
 
 class FormErrorMessage(ChakraComponent):
diff --git a/reflex/components/chakra/forms/iconbutton.py b/reflex/components/chakra/forms/iconbutton.py
index 10e3d3a6fbe..bd53ecae03f 100644
--- a/reflex/components/chakra/forms/iconbutton.py
+++ b/reflex/components/chakra/forms/iconbutton.py
@@ -1,5 +1,4 @@
 """An icon button component."""
-
 from typing import Optional
 
 from reflex.components.chakra.typography.text import Text
@@ -14,25 +13,25 @@ class IconButton(Text):
     library = "@chakra-ui/button@2.1.0"
 
     # The type of button.
-    type: Var[str]
+    type: Optional[Var[str]] = None
 
     #  A label that describes the button
-    aria_label: Var[str]
+    aria_label: Optional[Var[str]] = None
 
     # The icon to be used in the button.
     icon: Optional[Component]
 
     # If true, the button will be styled in its active state.
-    is_active: Var[bool]
+    is_active: Optional[Var[bool]] = None
 
     # If true, the button will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the button will show a spinner.
-    is_loading: Var[bool]
+    is_loading: Optional[Var[bool]] = None
 
     # If true, the button will be perfectly round. Else, it'll be slightly round
-    is_round: Var[bool]
+    is_round: Optional[Var[bool]] = None
 
     # Replace the spinner component when isLoading is set to true
-    spinner: Var[str]
+    spinner: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/forms/input.py b/reflex/components/chakra/forms/input.py
index 4512a4f48cc..e694c100648 100644
--- a/reflex/components/chakra/forms/input.py
+++ b/reflex/components/chakra/forms/input.py
@@ -1,6 +1,5 @@
 """An input component."""
-
-from typing import Any, Dict
+from typing import Any, Dict, Optional
 
 from reflex.components.chakra import (
     ChakraComponent,
@@ -21,43 +20,43 @@ class Input(ChakraComponent):
     tag = "Input"
 
     # State var to bind the input.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The default value of the input.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # The placeholder text.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # The type of input.
-    type_: Var[LiteralInputType]
+    type_: Optional[Var[LiteralInputType]] = None
 
     # The border color when the input is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None
 
     # The border color when the input is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None
 
     # If true, the form control will be disabled. This has 2 side effects - The FormLabel will have `data-disabled` attribute - The form element (e.g, Input) will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the form control will be invalid. This has 2 side effects - The FormLabel and FormErrorIcon will have `data-invalid` set to true - The form element (e.g, Input) will have `aria-invalid` set to true
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # If true, the form control will be readonly.
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # If true, the form control will be required. This has 2 side effects - The FormLabel will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None
 
     # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None
 
     # "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     def _get_imports(self) -> imports.ImportDict:
         return imports.merge_imports(
diff --git a/reflex/components/chakra/forms/multiselect.py b/reflex/components/chakra/forms/multiselect.py
index d9af42c3b16..db4739c97a2 100644
--- a/reflex/components/chakra/forms/multiselect.py
+++ b/reflex/components/chakra/forms/multiselect.py
@@ -51,19 +51,19 @@ class Select(Component):
     alias = "MultiSelect"
 
     # Focus the control when it is mounted
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None
 
     # Remove the currently focused option when the user presses backspace
     #  when Select isClearable or isMulti
-    backspace_removes_value: Var[bool]
+    backspace_removes_value: Optional[Var[bool]] = None
 
     # Remove focus from the input when the user selects an option
     # (handy for dismissing the keyboard on touch devices)
-    blur_input_on_select: Var[bool]
+    blur_input_on_select: Optional[Var[bool]] = None
 
     # When the user reaches the top/bottom of the menu,
     # prevent scroll on the scroll-parent
-    capture_menu_scroll: Var[bool]
+    capture_menu_scroll: Optional[Var[bool]] = None
 
     # [chakra]
     # To use the chakraStyles prop, first,
@@ -101,13 +101,13 @@ class Select(Component):
     # - placeholder - Box
     # - singleValue - Box
     # - valueContainer - Box
-    chakra_styles: Var[str]
+    chakra_styles: Optional[Var[str]] = None
 
     # Close the select menu when the user selects an option
-    close_menu_on_select: Var[bool]
+    close_menu_on_select: Optional[Var[bool]] = None
 
     # If true, close the select menu when the user scrolls the document/body.
-    close_menu_on_scroll: Var[bool]
+    close_menu_on_scroll: Optional[Var[bool]] = None
 
     # [chakra]
     # The visual color appearance of the component
@@ -116,117 +116,117 @@ class Select(Component):
     #  "purple" | "pink" | "linkedin" | "facebook" | "messenger" |
     #  "whatsapp" | "twitter" | "telegram"
     # default: "gray"
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None
 
     # This complex object includes all the compositional components
     # that are used in react-select. If you wish to overwrite a component,
     # pass in an object with the appropriate namespace.
     # If you only wish to restyle a component,
     # we recommend using the styles prop instead.
-    components: Var[Dict[str, Component]]
+    components: Optional[Var[Dict[str, Component]]] = None
 
     # Whether the value of the select, e.g. SingleValue,
     # should be displayed in the control.
-    control_should_render_value: Var[bool]
+    control_should_render_value: Optional[Var[bool]] = None
 
     # Delimiter used to join multiple values into a single HTML Input value
-    delimiter: Var[str]
+    delimiter: Optional[Var[str]] = None
 
     # [chakra]
     # Colors the component border with the given chakra color string on error state
     # default: "red.500"
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None
 
     # Clear all values when the user presses escape AND the menu is closed
-    escape_clears_value: Var[bool]
+    escape_clears_value: Optional[Var[bool]] = None
 
     # [chakra]
     # Colors the component border with the given chakra color string on focus
     # default: "blue.500"
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None
 
     # Sets the form attribute on the input
-    form: Var[str]
+    form: Optional[Var[str]] = None
 
     # Hide the selected option from the menu
-    hide_selected_options: Var[bool]
+    hide_selected_options: Optional[Var[bool]] = None
 
     # The id to set on the SelectContainer component.
-    # id: Var[str]
+    # id: Optional[Var[str]] = None
 
     # The value of the search input
-    input_value: Var[str]
+    input_value: Optional[Var[str]] = None
 
     # The id of the search input
-    input_id: Var[str]
+    input_id: Optional[Var[str]] = None
 
     # Is the select value clearable
-    is_clearable: Var[bool]
+    is_clearable: Optional[Var[bool]] = None
 
     # Is the select disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # [chakra]
     # Style component in the chakra invalid style
     # default: False
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # Support multiple selected options
-    is_multi: Var[bool]
+    is_multi: Optional[Var[bool]] = None
 
     # [chakra]
     # Style component as disabled (chakra style)
     # default: False
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # Is the select direction right-to-left
-    is_rtl: Var[bool]
+    is_rtl: Optional[Var[bool]] = None
 
     # Whether to enable search functionality
-    is_searchable: Var[bool]
+    is_searchable: Optional[Var[bool]] = None
 
     # Minimum height of the menu before flipping
-    min_menu_height: Var[int]
+    min_menu_height: Optional[Var[int]] = None
 
     # Maximum height of the menu before scrolling
-    max_menu_height: Var[int]
+    max_menu_height: Optional[Var[int]] = None
 
     # Default placement of the menu in relation to the control.
     # 'auto' will flip when there isn't enough space below the control.
     # options: "bottom" | "auto" | "top"
-    menu_placement: Var[str]
+    menu_placement: Optional[Var[str]] = None
 
     # The CSS position value of the menu,
     #  when "fixed" extra layout management is required
     # options: "absolute" | "fixed"
-    menu_position: Var[str]
+    menu_position: Optional[Var[str]] = None
 
     # Whether to block scroll events when the menu is open
-    menu_should_block_scroll: Var[bool]
+    menu_should_block_scroll: Optional[Var[bool]] = None
 
     # Whether the menu should be scrolled into view when it opens
-    menu_should_scroll_into_view: Var[bool]
+    menu_should_scroll_into_view: Optional[Var[bool]] = None
 
     # Name of the HTML Input (optional - without this, no input will be rendered)
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # Allows control of whether the menu is opened when the Select is focused
-    open_menu_on_focus: Var[bool]
+    open_menu_on_focus: Optional[Var[bool]] = None
 
     # Allows control of whether the menu is opened when the Select is clicked
-    open_menu_on_click: Var[bool]
+    open_menu_on_click: Optional[Var[bool]] = None
 
     # Array of options that populate the select menu
-    options: Var[List[Dict]]
+    options: Optional[Var[List[Dict]]] = None
 
     # Number of options to jump in menu when page{up|down} keys are used
-    page_size: Var[int]
+    page_size: Optional[Var[int]] = None
 
     # Placeholder for the select value
-    placeholder: Var[Optional[str]]
+    placeholder: Optional[Var[Optional[str]]] = None
 
     # Marks the value-holding input as required for form validation
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
     # [chakra]
     # If you choose to stick with the default selectedOptionStyle="color",
@@ -239,7 +239,7 @@ class Select(Component):
     # If you would like to use a specific color for the background that's not a part of your theme,
     # use the chakraStyles prop to customize it.
     # default: "blue"
-    selected_option_color_scheme: Var[str]
+    selected_option_color_scheme: Optional[Var[str]] = None
 
     # [chakra]
     # The default option "color" will style a selected option
@@ -253,28 +253,28 @@ class Select(Component):
     # if hide_selected_options=False is also passed.
     # options: "color" | "check"
     # default: "color"
-    selected_option_style: Var[str]
+    selected_option_style: Optional[Var[str]] = None
 
     # [chakra]
     # The size of the component.
     # options: "sm" | "md" | "lg"
     # default: "md"
-    size: Var[str]
+    size: Optional[Var[str]] = None
 
     # Sets the tabIndex attribute on the input
-    tab_index: Var[int]
+    tab_index: Optional[Var[int]] = None
 
     # Select the currently focused option when the user presses tab
-    tab_selects_value: Var[bool]
+    tab_selects_value: Optional[Var[bool]] = None
 
     # [chakra]
     # Variant of multi-select tags
     # options: "subtle" | "solid" | "outline"
     # default: "subtle"
-    tag_variant: Var[str]
+    tag_variant: Optional[Var[str]] = None
 
     # Remove all non-essential styles
-    unstyled: Var[bool]
+    unstyled: Optional[Var[bool]] = None
 
     # [chakra]
     # If this prop is passed,
@@ -287,7 +287,7 @@ class Select(Component):
     # However, as this button only appears when isMulti is passed,
     # using this style could make more sense for a single select.
     # default: False
-    use_basic_style: Var[bool]
+    use_basic_style: Optional[Var[bool]] = None
 
     # [chakra]
     # The variant of the Select. If no variant is passed,
@@ -295,7 +295,7 @@ class Select(Component):
     # If your component theme for Input is not modified, it will be outline.
     # options: "outline" | "filled" | "flushed" | "unstyled"
     # default: "outline"
-    variant: Var[str]
+    variant: Optional[Var[str]] = None
 
     # How the options should be displayed in the menu.
     menu_position: Var[str] = "fixed"  # type: ignore
diff --git a/reflex/components/chakra/forms/numberinput.py b/reflex/components/chakra/forms/numberinput.py
index c6ed8df6dfd..8e064d77e8b 100644
--- a/reflex/components/chakra/forms/numberinput.py
+++ b/reflex/components/chakra/forms/numberinput.py
@@ -1,7 +1,6 @@
 """A number input component."""
-
 from numbers import Number
-from typing import Any, Dict
+from typing import Any, Dict, Optional
 
 from reflex.components.chakra import (
     ChakraComponent,
@@ -19,61 +18,61 @@ class NumberInput(ChakraComponent):
     tag = "NumberInput"
 
     # State var to bind the input.
-    value: Var[Number]
+    value: Optional[Var[Number]] = None
 
     # If true, the input's value will change based on mouse wheel.
-    allow_mouse_wheel: Var[bool]
+    allow_mouse_wheel: Optional[Var[bool]] = None
 
     # This controls the value update when you blur out of the input. - If true and the value is greater than max, the value will be reset to max - Else, the value remains the same.
-    clamped_value_on_blur: Var[bool]
+    clamped_value_on_blur: Optional[Var[bool]] = None
 
     # The initial value of the counter. Should be less than max and greater than min
-    default_value: Var[Number]
+    default_value: Optional[Var[Number]] = None
 
     # The border color when the input is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None
 
     # The border color when the input is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None
 
     # If true, the input will be focused as you increment or decrement the value with the stepper
-    focus_input_on_change: Var[bool]
+    focus_input_on_change: Optional[Var[bool]] = None
 
     # Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices ("text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal")
-    # input_mode: Var[LiteralInputNumberMode]
+    # input_mode: Optional[Var[LiteralInputNumberMode]] = None
 
     # Whether the input should be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the input will have `aria-invalid` set to true
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # If true, the input will be in readonly mode
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # Whether the input is required
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None
 
     # Whether the pressed key should be allowed in the input. The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/
-    is_valid_character: Var[str]
+    is_valid_character: Optional[Var[str]] = None
 
     # This controls the value update behavior in general. - If true and you use the stepper or up/down arrow keys, the value will not exceed the max or go lower than min - If false, the value will be allowed to go out of range.
-    keep_within_range: Var[bool]
+    keep_within_range: Optional[Var[bool]] = None
 
     # The maximum value of the counter
-    max_: Var[Number]
+    max_: Optional[Var[Number]] = None
 
     # The minimum value of the counter
-    min_: Var[Number]
+    min_: Optional[Var[Number]] = None
 
     # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None
 
     # "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.
diff --git a/reflex/components/chakra/forms/pininput.py b/reflex/components/chakra/forms/pininput.py
index d57c9acafa4..1e54bdc04e6 100644
--- a/reflex/components/chakra/forms/pininput.py
+++ b/reflex/components/chakra/forms/pininput.py
@@ -18,49 +18,49 @@ class PinInput(ChakraComponent):
     tag = "PinInput"
 
     # State var to bind the the input.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # If true, the pin input receives focus on mount
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None
 
     # The default value of the pin input
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # The border color when the input is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None
 
     # The border color when the input is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None
 
     # The top-level id string that will be applied to the input fields. The index of the input will be appended to this top-level id.
-    id_: Var[str]
+    id_: Optional[Var[str]] = None
 
     # The length of the number input.
-    length: Var[int]
+    length: Optional[Var[int]] = None
 
     # If true, the pin input component is put in the disabled state
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the pin input component is put in the invalid state
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # If true, focus will move automatically to the next input once filled
-    manage_focus: Var[bool]
+    manage_focus: Optional[Var[bool]] = None
 
     # If true, the input's value will be masked just like `type=password`
-    mask: Var[bool]
+    mask: Optional[Var[bool]] = None
 
     # The placeholder for the pin input
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # The type of values the pin-input should allow ("number" | "alphanumeric").
-    type_: Var[str]
+    type_: Optional[Var[str]] = None
 
     # "outline" | "flushed" | "filled" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     def _get_imports(self) -> ImportDict:
         """Include PinInputField explicitly because it may not be a child component at compile time.
@@ -171,7 +171,7 @@ class PinInputField(ChakraComponent):
     index: Optional[Var[int]] = None
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     @classmethod
     def for_length(cls, length: Var | int, **props) -> Var:
diff --git a/reflex/components/chakra/forms/radio.py b/reflex/components/chakra/forms/radio.py
index 67ad9200bfa..23213f6f585 100644
--- a/reflex/components/chakra/forms/radio.py
+++ b/reflex/components/chakra/forms/radio.py
@@ -1,7 +1,5 @@
 """A radio component."""
-
-
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.chakra.typography.text import Text
@@ -18,13 +16,13 @@ class RadioGroup(ChakraComponent):
     tag = "RadioGroup"
 
     # State var to bind the the input.
-    value: Var[Any]
+    value: Optional[Var[Any]] = None
 
     # The default value.
-    default_value: Var[Any]
+    default_value: Optional[Var[Any]] = None
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> Dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -65,31 +63,31 @@ class Radio(Text):
     tag = "Radio"
 
     # Value of radio.
-    value: Var[Any]
+    value: Optional[Var[Any]] = None
 
     # The default value.
-    default_value: Var[Any]
+    default_value: Optional[Var[Any]] = None
 
     # The color scheme.
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None
 
     # If true, the radio will be initially checked.
-    default_checked: Var[bool]
+    default_checked: Optional[Var[bool]] = None
 
     # If true, the radio will be checked. You'll need to pass onChange to update its value (since it is now controlled)
-    is_checked: Var[bool]
+    is_checked: Optional[Var[bool]] = None
 
     # If true, the radio will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the radio button will be invalid. This also sets `aria-invalid` to true.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # If true, the radio will be read-only
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # If true, the radio button will be required. This also sets `aria-required` to true.
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/chakra/forms/rangeslider.py b/reflex/components/chakra/forms/rangeslider.py
index 6179f36461e..c076dc8854c 100644
--- a/reflex/components/chakra/forms/rangeslider.py
+++ b/reflex/components/chakra/forms/rangeslider.py
@@ -16,37 +16,37 @@ class RangeSlider(ChakraComponent):
     tag = "RangeSlider"
 
     # State var to bind the the input.
-    value: Var[List[int]]
+    value: Optional[Var[List[int]]] = None
 
     # The default values.
-    default_value: Var[List[int]]
+    default_value: Optional[Var[List[int]]] = None
 
     # The writing mode ("ltr" | "rtl")
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None
 
     # If false, the slider handle will not capture focus when value changes.
-    focus_thumb_on_change: Var[bool]
+    focus_thumb_on_change: Optional[Var[bool]] = None
 
     # If true, the slider will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the slider will be in `read-only` state.
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # If true, the value will be incremented or decremented in reverse.
-    is_reversed: Var[bool]
+    is_reversed: Optional[Var[bool]] = None
 
     # The minimum value of the slider.
-    min_: Var[int]
+    min_: Optional[Var[int]] = None
 
     # The maximum value of the slider.
-    max_: Var[int]
+    max_: Optional[Var[int]] = None
 
     # The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
-    min_steps_between_thumbs: Var[int]
+    min_steps_between_thumbs: Optional[Var[int]] = None
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -136,7 +136,7 @@ class RangeSliderThumb(ChakraComponent):
     tag = "RangeSliderThumb"
 
     # The position of the thumb.
-    index: Var[int]
+    index: Optional[Var[int]] = None
 
     def _get_ref_hook(self) -> Optional[str]:
         # hook is None because RangeSlider is handling it.
diff --git a/reflex/components/chakra/forms/select.py b/reflex/components/chakra/forms/select.py
index c898f40d92f..906fbe12e61 100644
--- a/reflex/components/chakra/forms/select.py
+++ b/reflex/components/chakra/forms/select.py
@@ -1,6 +1,5 @@
 """A select component."""
-
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union
 
 from reflex.components.chakra import ChakraComponent, LiteralInputVariant
 from reflex.components.chakra.typography.text import Text
@@ -17,37 +16,37 @@ class Select(ChakraComponent):
     tag = "Select"
 
     # State var to bind the select.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The default value of the select.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # The placeholder text.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # The border color when the select is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None
 
     # The border color when the select is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None
 
     # If true, the select will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the form control will be invalid. This has 2 side effects: - The FormLabel and FormErrorIcon will have `data-invalid` set to true - The form element (e.g, Input) will have `aria-invalid` set to true
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # If true, the form control will be required. This has 2 side effects: - The FormLabel will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None
 
     # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None
 
     # The size of the select.
-    size: Var[str]
+    size: Optional[Var[str]] = None
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> Dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -90,7 +89,7 @@ class Option(Text):
 
     tag = "option"
 
-    value: Var[Any]
+    value: Optional[Var[Any]] = None
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/chakra/forms/slider.py b/reflex/components/chakra/forms/slider.py
index 69eb6ac9fce..ce847ebd2d8 100644
--- a/reflex/components/chakra/forms/slider.py
+++ b/reflex/components/chakra/forms/slider.py
@@ -1,7 +1,7 @@
 """A slider component."""
 from __future__ import annotations
 
-from typing import Any, Literal, Union
+from typing import Any, Literal, Optional, Union
 
 from reflex.components.chakra import ChakraComponent, LiteralChakraDirection
 from reflex.components.component import Component
@@ -17,58 +17,58 @@ class Slider(ChakraComponent):
     tag = "Slider"
 
     # State var to bind the input.
-    value: Var[int]
+    value: Optional[Var[int]] = None
 
     # The color scheme.
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None
 
     # The placeholder text.
-    default_value: Var[int]
+    default_value: Optional[Var[int]] = None
 
     # The writing mode ("ltr" | "rtl")
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None
 
     # If false, the slider handle will not capture focus when value changes.
-    focus_thumb_on_change: Var[bool]
+    focus_thumb_on_change: Optional[Var[bool]] = None
 
     # If true, the slider will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the slider will be in `read-only` state.
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # If true, the value will be incremented or decremented in reverse.
-    is_reversed: Var[bool]
+    is_reversed: Optional[Var[bool]] = None
 
     # The minimum value of the slider.
-    min_: Var[int]
+    min_: Optional[Var[int]] = None
 
     # The maximum value of the slider.
-    max_: Var[int]
+    max_: Optional[Var[int]] = None
 
     # The step in which increments/decrements have to be made
-    step: Var[int]
+    step: Optional[Var[int]] = None
 
     # The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
-    min_steps_between_thumbs: Var[int]
+    min_steps_between_thumbs: Optional[Var[int]] = None
 
     # Oreintation of the slider vertical | horizontal.
-    orientation: Var[LiteralLayout]
+    orientation: Optional[Var[LiteralLayout]] = None
 
     # Minimum height of the slider.
-    min_h: Var[str]
+    min_h: Optional[Var[str]] = None
 
     # Minimum width of the slider.
-    min_w: Var[str]
+    min_w: Optional[Var[str]] = None
 
     # Maximum height of the slider.
-    max_h: Var[str]
+    max_h: Optional[Var[str]] = None
 
     # Maximum width of the slider.
-    max_w: Var[str]
+    max_w: Optional[Var[str]] = None
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -124,7 +124,7 @@ class SliderThumb(ChakraComponent):
     tag = "SliderThumb"
 
     # The size of the thumb.
-    box_size: Var[str]
+    box_size: Optional[Var[str]] = None
 
 
 class SliderMark(ChakraComponent):
diff --git a/reflex/components/chakra/forms/switch.py b/reflex/components/chakra/forms/switch.py
index 6079de2bb79..ca8dd30960f 100644
--- a/reflex/components/chakra/forms/switch.py
+++ b/reflex/components/chakra/forms/switch.py
@@ -1,7 +1,7 @@
 """A switch component."""
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.chakra import ChakraComponent, LiteralColorScheme
 from reflex.constants import EventTriggers
@@ -14,37 +14,37 @@ class Switch(ChakraComponent):
     tag = "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]
+    is_checked: Optional[Var[bool]] = None
 
     # If true, the switch will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true and is_disabled prop is set, the switch will remain tabbable but not interactive.
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None
 
     # If true, the switch is marked as invalid. Changes style of unchecked state.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # If true, the switch will be readonly
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # If true, the switch will be required
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None
 
     # The name of the input field in a switch (Useful for form submission).
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # The value of the input field when checked (use is_checked prop for a bool)
     value: Var[str] = Var.create(True)  # type: ignore
 
     # The spacing between the switch and its label text (0.5rem)
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None
 
     # The placeholder text.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # The color scheme of the switch (e.g. "blue", "green", "red", etc.)
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
diff --git a/reflex/components/chakra/forms/textarea.py b/reflex/components/chakra/forms/textarea.py
index ecbe15e1e17..6ee816b08a4 100644
--- a/reflex/components/chakra/forms/textarea.py
+++ b/reflex/components/chakra/forms/textarea.py
@@ -1,7 +1,7 @@
 """A textarea component."""
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.chakra import ChakraComponent, LiteralInputVariant
 from reflex.components.component import Component
@@ -16,37 +16,37 @@ class TextArea(ChakraComponent):
     tag = "Textarea"
 
     # State var to bind the input.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The default value of the textarea.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # The placeholder text.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # The border color when the input is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None
 
     # The border color when the input is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None
 
     # If true, the form control will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the form control will be invalid.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None
 
     # If true, the form control will be read-only.
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None
 
     # If true, the form control will be required.
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None
 
     # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None
 
     # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
diff --git a/reflex/components/chakra/layout/aspect_ratio.py b/reflex/components/chakra/layout/aspect_ratio.py
index 5d0328d7e18..f8d1c153063 100644
--- a/reflex/components/chakra/layout/aspect_ratio.py
+++ b/reflex/components/chakra/layout/aspect_ratio.py
@@ -1,4 +1,5 @@
 """A AspectRatio component."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@@ -10,4 +11,4 @@ class AspectRatio(ChakraComponent):
     tag = "AspectRatio"
 
     # The aspect ratio of the Box
-    ratio: Var[float]
+    ratio: Optional[Var[float]] = None
diff --git a/reflex/components/chakra/layout/box.py b/reflex/components/chakra/layout/box.py
index 497e514b87b..e898af1441e 100644
--- a/reflex/components/chakra/layout/box.py
+++ b/reflex/components/chakra/layout/box.py
@@ -1,4 +1,5 @@
 """A box component that can contain other components."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.tags import Tag
@@ -11,13 +12,13 @@ class Box(ChakraComponent):
     tag = "Box"
 
     # The type element to render. You can specify an image, video, or any other HTML element such as iframe.
-    element: Var[str]
+    element: Optional[Var[str]] = None
 
     # The source of the content.
-    src: Var[str]
+    src: Optional[Var[str]] = None
 
     # The alt text of the content.
-    alt: Var[str]
+    alt: Optional[Var[str]] = None
 
     def _render(self) -> Tag:
         return (
diff --git a/reflex/components/chakra/layout/card.py b/reflex/components/chakra/layout/card.py
index 595c5327f1a..9ea3d06210e 100644
--- a/reflex/components/chakra/layout/card.py
+++ b/reflex/components/chakra/layout/card.py
@@ -1,5 +1,4 @@
 """Chakra Card component."""
-
 from typing import Optional
 
 from reflex.components.chakra import (
@@ -36,30 +35,30 @@ class Card(ChakraComponent):
     tag = "Card"
 
     # [required] The flex alignment of the card
-    align: Var[str]
+    align: Optional[Var[str]] = None
 
     # [required] The flex direction of the card
-    direction: Var[str]
+    direction: Optional[Var[str]] = None
 
     # [required] The flex distribution of the card
-    justify: Var[str]
+    justify: Optional[Var[str]] = None
 
     # The visual color appearance of the component.
     # options: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" |
     #  "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" |
     #  "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
     # default: "gray"
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None
 
     # The size of the Card
     # options: "sm" | "md" | "lg"
     # default: "md"
-    size: Var[LiteralTagSize]
+    size: Optional[Var[LiteralTagSize]] = None
 
     # The variant of the Card
     # options: "elevated" | "outline" | "filled" | "unstyled"
     # default: "elevated"
-    variant: Var[LiteralCardVariant]
+    variant: Optional[Var[LiteralCardVariant]] = None
 
     @classmethod
     def create(
diff --git a/reflex/components/chakra/layout/container.py b/reflex/components/chakra/layout/container.py
index 26863d01820..4273d774779 100644
--- a/reflex/components/chakra/layout/container.py
+++ b/reflex/components/chakra/layout/container.py
@@ -1,4 +1,5 @@
 """A flexbox container."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@@ -10,4 +11,4 @@ class Container(ChakraComponent):
     tag = "Container"
 
     # If true, container will center its children regardless of their width.
-    center_content: Var[bool]
+    center_content: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/layout/flex.py b/reflex/components/chakra/layout/flex.py
index ff6e5abcec2..306f0984d73 100644
--- a/reflex/components/chakra/layout/flex.py
+++ b/reflex/components/chakra/layout/flex.py
@@ -1,6 +1,5 @@
 """A reflexive container component."""
-
-from typing import List, Union
+from typing import List, Optional, Union
 
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@@ -12,22 +11,22 @@ class Flex(ChakraComponent):
     tag = "Flex"
 
     # How to align items in the flex.
-    align: Var[str]
+    align: Optional[Var[str]] = None
 
     # Shorthand for flexBasis style prop
-    basis: Var[str]
+    basis: Optional[Var[str]] = None
 
     # Shorthand for flexDirection style prop
-    direction: Var[Union[str, List[str]]]
+    direction: Optional[Var[Union[str, List[str]]]] = None
 
     # Shorthand for flexGrow style prop
-    grow: Var[str]
+    grow: Optional[Var[str]] = None
 
     # The way to justify the items.
-    justify: Var[str]
+    justify: Optional[Var[str]] = None
 
     # Shorthand for flexWrap style prop
-    wrap: Var[Union[str, List[str]]]
+    wrap: Optional[Var[Union[str, List[str]]]] = None
 
     # Shorthand for flexShrink style prop
-    shrink: Var[str]
+    shrink: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/grid.py b/reflex/components/chakra/layout/grid.py
index ee1d8aa33b0..6cfda018a7e 100644
--- a/reflex/components/chakra/layout/grid.py
+++ b/reflex/components/chakra/layout/grid.py
@@ -1,6 +1,5 @@
 """Container to stack elements with spacing."""
-
-from typing import List
+from typing import List, Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@@ -13,32 +12,32 @@ class Grid(ChakraComponent):
 
     # 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)_
-    auto_columns: Var[str]
+    auto_columns: Optional[Var[str]] = None
 
     # Shorthand prop for gridAutoFlow to specify exactly how
     # auto-placed items get flowed into the grid.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)_
-    auto_flow: Var[str]
+    auto_flow: Optional[Var[str]] = None
 
     # Shorthand prop for gridAutoRows.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)_
-    auto_rows: Var[str]
+    auto_rows: Optional[Var[str]] = None
 
     # Shorthand prop for gridColumn.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)_
-    column: Var[str]
+    column: Optional[Var[str]] = None
 
     # Shorthand prop for gridRow.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)_
-    row: Var[str]
+    row: Optional[Var[str]] = None
 
     # Shorthand prop for gridTemplateColumns.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)_
-    template_columns: Var[str]
+    template_columns: Optional[Var[str]] = None
 
     # Shorthand prop for gridTemplateRows.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)_
-    template_rows: Var[str]
+    template_rows: Optional[Var[str]] = None
 
 
 class GridItem(ChakraComponent):
@@ -48,27 +47,27 @@ class GridItem(ChakraComponent):
 
     # Shorthand prop for gridArea
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)_
-    area: Var[str]
+    area: Optional[Var[str]] = None
 
     # Shorthand prop for gridColumnEnd
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)_
-    col_end: Var[str]
+    col_end: Optional[Var[str]] = None
 
     # The column number the grid item should start.
-    col_start: Var[int]
+    col_start: Optional[Var[int]] = None
 
     # The number of columns the grid item should span.
-    col_span: Var[int]
+    col_span: Optional[Var[int]] = None
 
     # Shorthand prop for gridRowEnd
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)_
-    row_end: Var[str]
+    row_end: Optional[Var[str]] = None
 
     # The row number the grid item should start.
-    row_start: Var[int]
+    row_start: Optional[Var[int]] = None
 
     # The number of rows the grid item should span.
-    row_span: Var[int]
+    row_span: Optional[Var[int]] = None
 
 
 class ResponsiveGrid(ChakraComponent):
@@ -78,48 +77,48 @@ class ResponsiveGrid(ChakraComponent):
 
     # 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)_
-    auto_columns: Var[str]
+    auto_columns: Optional[Var[str]] = None
 
     # Shorthand prop for gridAutoFlow to specify exactly how
     # auto-placed items get flowed into the grid.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)_
-    auto_flow: Var[str]
+    auto_flow: Optional[Var[str]] = None
 
     # Shorthand prop for gridAutoRows.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)_
-    auto_rows: Var[str]
+    auto_rows: Optional[Var[str]] = None
 
     # Shorthand prop for gridColumn.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)_
-    column: Var[str]
+    column: Optional[Var[str]] = None
 
     # Shorthand prop for gridRow.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)_
-    row: Var[str]
+    row: Optional[Var[str]] = None
 
     # A list that defines the number of columns for each breakpoint.
-    columns: Var[List[int]]
+    columns: Optional[Var[List[int]]] = None
 
     # The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.
-    min_child_width: Var[str]
+    min_child_width: Optional[Var[str]] = None
 
     # The gap between the grid items
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None
 
     # The column gap between the grid items
-    spacing_x: Var[str]
+    spacing_x: Optional[Var[str]] = None
 
     # The row gap between the grid items
-    spacing_y: Var[str]
+    spacing_y: Optional[Var[str]] = None
 
     # Shorthand prop for gridTemplateAreas
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)_
-    template_areas: Var[str]
+    template_areas: Optional[Var[str]] = None
 
     # Shorthand prop for gridTemplateColumns.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)_
-    template_columns: Var[str]
+    template_columns: Optional[Var[str]] = None
 
     # Shorthand prop for gridTemplateRows.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)_
-    template_rows: Var[str]
+    template_rows: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/stack.py b/reflex/components/chakra/layout/stack.py
index 8e2ab34e6ce..b37e7caa34f 100644
--- a/reflex/components/chakra/layout/stack.py
+++ b/reflex/components/chakra/layout/stack.py
@@ -1,6 +1,5 @@
 """Container to stack elements with spacing."""
-
-from typing import List, Union
+from typing import List, Optional, Union
 
 from reflex.components.chakra import ChakraComponent, LiteralStackDirection
 from reflex.vars import Var
@@ -12,28 +11,28 @@ class Stack(ChakraComponent):
     tag = "Stack"
 
     # Shorthand for alignItems style prop
-    align_items: Var[str]
+    align_items: Optional[Var[str]] = None
 
     # The direction to stack the items.
-    direction: Var[Union[LiteralStackDirection, List[str]]]
+    direction: Optional[Var[Union[LiteralStackDirection, List[str]]]] = None
 
     # If true the items will be stacked horizontally.
-    is_inline: Var[bool]
+    is_inline: Optional[Var[bool]] = None
 
     # Shorthand for justifyContent style prop
-    justify_content: Var[str]
+    justify_content: Optional[Var[str]] = None
 
     # If true, the children will be wrapped in a Box, and the Box will take the spacing props
-    should_wrap_children: Var[bool]
+    should_wrap_children: Optional[Var[bool]] = None
 
     # The space between each stack item
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None
 
     # Shorthand for flexWrap style prop
-    wrap: Var[str]
+    wrap: Optional[Var[str]] = None
 
     # Alignment of contents.
-    justify: Var[str]
+    justify: Optional[Var[str]] = None
 
 
 class Hstack(Stack):
diff --git a/reflex/components/chakra/layout/wrap.py b/reflex/components/chakra/layout/wrap.py
index 5d436c5b2a6..e72f4fc1217 100644
--- a/reflex/components/chakra/layout/wrap.py
+++ b/reflex/components/chakra/layout/wrap.py
@@ -1,4 +1,5 @@
 """Container to stack elements with spacing."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@@ -11,25 +12,25 @@ class Wrap(ChakraComponent):
     tag = "Wrap"
 
     # How to align the items.
-    align: Var[str]
+    align: Optional[Var[str]] = None
 
     # The flex direction of the wrap.
-    direction: Var[str]
+    direction: Optional[Var[str]] = None
 
     # How to justify the items.
-    justify: Var[str]
+    justify: Optional[Var[str]] = None
 
     # Whether to wrap children in `rx.wrap_item`.
-    should_wrap_children: Var[bool]
+    should_wrap_children: Optional[Var[bool]] = None
 
     # The spacing between the items.
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None
 
     # The horizontal spacing between the items.
-    spacing_x: Var[str]
+    spacing_x: Optional[Var[str]] = None
 
     # The vertical spacing between the items.
-    spacing_y: Var[str]
+    spacing_y: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, *children, items=None, **props) -> Component:
diff --git a/reflex/components/chakra/media/avatar.py b/reflex/components/chakra/media/avatar.py
index 80a0b7174a8..d13bee75f8d 100644
--- a/reflex/components/chakra/media/avatar.py
+++ b/reflex/components/chakra/media/avatar.py
@@ -1,7 +1,7 @@
 """Avatar components."""
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.chakra import ChakraComponent, LiteralAvatarSize
 from reflex.vars import Var
@@ -13,28 +13,28 @@ class Avatar(ChakraComponent):
     tag = "Avatar"
 
     # The default avatar used as fallback when name, and src is not specified.
-    icon: Var[str]
+    icon: Optional[Var[str]] = None
 
     # The label of the icon.
-    icon_label: Var[str]
+    icon_label: Optional[Var[str]] = None
 
     # If true, opt out of the avatar's fallback logic and renders the img at all times.
-    ignore_fallback: Var[bool]
+    ignore_fallback: Optional[Var[bool]] = None
 
     # The name of the person in the avatar.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # If true, the Avatar will show a border around it. Best for a group of avatars.
-    show_border: Var[bool]
+    show_border: Optional[Var[bool]] = None
 
     # The image url of the Avatar.
-    src: Var[str]
+    src: Optional[Var[str]] = None
 
     # List of sources to use for different screen resolutions.
-    src_set: Var[str]
+    src_set: Optional[Var[str]] = None
 
     # "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"
-    size: Var[LiteralAvatarSize]
+    size: Optional[Var[LiteralAvatarSize]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
@@ -60,7 +60,7 @@ class AvatarGroup(ChakraComponent):
     tag = "AvatarGroup"
 
     # The maximum number of visible avatars.
-    max_: Var[int]
+    max_: Optional[Var[int]] = None
 
     # The space between the avatars in the group.
-    spacing: Var[int]
+    spacing: Optional[Var[int]] = None
diff --git a/reflex/components/chakra/media/image.py b/reflex/components/chakra/media/image.py
index 2b1a4e26f1e..6a2dd6e9a89 100644
--- a/reflex/components/chakra/media/image.py
+++ b/reflex/components/chakra/media/image.py
@@ -14,40 +14,40 @@ class Image(ChakraComponent):
     tag = "Image"
     alias = "ChakraImage"
     # How to align the image within its bounds. It maps to css `object-position` property.
-    align: Var[str]
+    align: Optional[Var[str]] = None
 
     # Fallback Reflex component to show if image is loading or image fails.
     fallback: Optional[Component] = None
 
     # Fallback image src to show if image is loading or image fails.
-    fallback_src: Var[str]
+    fallback_src: Optional[Var[str]] = None
 
     # How the image to fit within its bounds. It maps to css `object-fit` property.
-    fit: Var[str]
+    fit: Optional[Var[str]] = None
 
     # The native HTML height attribute to the passed to the img.
-    html_height: Var[str]
+    html_height: Optional[Var[str]] = None
 
     # The native HTML width attribute to the passed to the img.
-    html_width: Var[str]
+    html_width: Optional[Var[str]] = None
 
     # If true, opt out of the fallbackSrc logic and use as img.
-    ignore_fallback: Var[bool]
+    ignore_fallback: Optional[Var[bool]] = None
 
     # "eager" | "lazy"
-    loading: Var[LiteralImageLoading]
+    loading: Optional[Var[LiteralImageLoading]] = None
 
     # The path/url to the image or PIL image object.
-    src: Var[Any]
+    src: Optional[Var[Any]] = None
 
     # The alt text of the image.
-    alt: Var[str]
+    alt: Optional[Var[str]] = None
 
     # Provide multiple sources for an image, allowing the browser
     # to select the most appropriate source based on factors like
     # screen resolution and device capabilities.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)_
-    src_set: Var[str]
+    src_set: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
diff --git a/reflex/components/chakra/navigation/breadcrumb.py b/reflex/components/chakra/navigation/breadcrumb.py
index 7c902bf1ae2..57e7d2cdc0e 100644
--- a/reflex/components/chakra/navigation/breadcrumb.py
+++ b/reflex/components/chakra/navigation/breadcrumb.py
@@ -1,4 +1,5 @@
 """Breadcrumb components."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.chakra.navigation.link import Link
@@ -13,10 +14,10 @@ class Breadcrumb(ChakraComponent):
     tag = "Breadcrumb"
 
     # The visual separator between each breadcrumb item
-    separator: Var[str]
+    separator: Optional[Var[str]] = None
 
     # The left and right margin applied to the separator
-    separator_margin: Var[str]
+    separator_margin: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, *children, items=None, **props) -> Component:
@@ -54,16 +55,16 @@ class BreadcrumbItem(ChakraComponent):
     tag = "BreadcrumbItem"
 
     # Is the current page of the breadcrumb.
-    is_current_page: Var[bool]
+    is_current_page: Optional[Var[bool]] = None
 
     # Is the last child of the breadcrumb.
-    is_last_child: Var[bool]
+    is_last_child: Optional[Var[bool]] = None
 
     # The visual separator between each breadcrumb item
-    separator: Var[str]
+    separator: Optional[Var[str]] = None
 
     # The left and right margin applied to the separator
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, *children, label=None, href=None, **props):
@@ -95,4 +96,4 @@ class BreadcrumbLink(Link):
     tag = "BreadcrumbLink"
 
     # Is the current page of the breadcrumb.
-    is_current_page: Var[bool]
+    is_current_page: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/navigation/link.py b/reflex/components/chakra/navigation/link.py
index a524202dff1..e1422b18ad5 100644
--- a/reflex/components/chakra/navigation/link.py
+++ b/reflex/components/chakra/navigation/link.py
@@ -1,5 +1,5 @@
 """A link component."""
-
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@@ -16,19 +16,19 @@ class Link(ChakraComponent):
     tag = "Link"
 
     # The rel.
-    rel: Var[str]
+    rel: Optional[Var[str]] = None
 
     # The page to link to.
-    href: Var[str]
+    href: Optional[Var[str]] = None
 
     # The text to display.
-    text: Var[str]
+    text: Optional[Var[str]] = None
 
     # What the link renders to.
     as_: Var[str] = BaseVar.create(value="{NextLink}", _var_is_local=False)  # type: ignore
 
     # If true, the link will open in new tab.
-    is_external: Var[bool]
+    is_external: Optional[Var[bool]] = None
 
     def _get_imports(self) -> imports.ImportDict:
         return {**super()._get_imports(), **next_link._get_imports()}
diff --git a/reflex/components/chakra/navigation/linkoverlay.py b/reflex/components/chakra/navigation/linkoverlay.py
index 370e3df48d0..5fe8134cf0c 100644
--- a/reflex/components/chakra/navigation/linkoverlay.py
+++ b/reflex/components/chakra/navigation/linkoverlay.py
@@ -1,4 +1,5 @@
 """Link overlay components."""
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@@ -10,10 +11,10 @@ class LinkOverlay(ChakraComponent):
     tag = "LinkOverlay"
 
     # If true, the link will open in new tab
-    is_external: Var[bool]
+    is_external: Optional[Var[bool]] = None
 
     # Href of the link overlay.
-    href: Var[str]
+    href: Optional[Var[str]] = None
 
 
 class LinkBox(ChakraComponent):
diff --git a/reflex/components/chakra/navigation/stepper.py b/reflex/components/chakra/navigation/stepper.py
index 7c47760e560..1a2f40270b9 100644
--- a/reflex/components/chakra/navigation/stepper.py
+++ b/reflex/components/chakra/navigation/stepper.py
@@ -1,5 +1,4 @@
 """A component to indicate progress through a multi-step process."""
-
 from typing import List, Literal, Optional, Tuple
 
 from reflex.components.chakra import ChakraComponent, LiteralColorScheme
@@ -12,19 +11,19 @@ class Stepper(ChakraComponent):
 
     tag = "Stepper"
 
-    orientation: Var[Literal["vertical", "horizontal"]]
+    orientation: Optional[Var[Literal["vertical", "horizontal"]]] = None
 
     # The color scheme to use for the stepper; default is blue.
-    colorScheme: Var[LiteralColorScheme]
+    colorScheme: Optional[Var[LiteralColorScheme]] = None
 
     # Chakra provides a useSteps hook to control the stepper.
     # Instead, use an integer state value to set progress in the stepper.
 
     # The index of the current step.
-    index: Var[int]
+    index: Optional[Var[int]] = None
 
     # The size of the steps in the stepper.
-    size: Var[str]
+    size: Optional[Var[str]] = None
 
     @classmethod
     def create(
@@ -98,11 +97,11 @@ class StepStatus(ChakraComponent):
     # active, complete, and incomplete should also be able to accept StepIcon or StepNumber components
     # currently, these props only support strings
 
-    active: Var[str]
+    active: Optional[Var[str]] = None
 
-    complete: Var[str]
+    complete: Optional[Var[str]] = None
 
-    incomplete: Var[str]
+    incomplete: Optional[Var[str]] = None
 
     tag = "StepStatus"
 
diff --git a/reflex/components/chakra/overlay/alertdialog.py b/reflex/components/chakra/overlay/alertdialog.py
index 48829c5ff18..d394a30c192 100644
--- a/reflex/components/chakra/overlay/alertdialog.py
+++ b/reflex/components/chakra/overlay/alertdialog.py
@@ -1,7 +1,7 @@
 """Alert dialog components."""
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.chakra import ChakraComponent, LiteralAlertDialogSize
 from reflex.components.chakra.media.icon import Icon
@@ -15,43 +15,43 @@ class AlertDialog(ChakraComponent):
     tag = "AlertDialog"
 
     # If true, the modal will be open.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None
 
     # The least destructive element to focus when the dialog opens.
-    least_destructive_ref: Var[str]
+    least_destructive_ref: Optional[Var[str]] = None
 
     # Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to false.
-    allow_pinch_zoom: Var[bool]
+    allow_pinch_zoom: Optional[Var[bool]] = None
 
     # If true, the modal will autofocus the first enabled and interactive element within the ModalContent
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None
 
     # If true, scrolling will be disabled on the body when the modal opens.
-    block_scroll_on_mount: Var[bool]
+    block_scroll_on_mount: Optional[Var[bool]] = None
 
     # If true, the modal will close when the Esc key is pressed
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None
 
     # If true, the modal will close when the overlay is clicked
-    close_on_overlay_click: Var[bool]
+    close_on_overlay_click: Optional[Var[bool]] = None
 
     # If true, the modal will be centered on screen.
-    is_centered: Var[bool]
+    is_centered: Optional[Var[bool]] = None
 
     # Enables aggressive focus capturing within iframes. If true, keep focus in the lock, no matter where lock is active. If false, allows focus to move outside of iframe.
-    lock_focus_across_frames: Var[bool]
+    lock_focus_across_frames: Optional[Var[bool]] = None
 
     # If true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens
-    preserve_scroll_bar_gap: Var[bool]
+    preserve_scroll_bar_gap: Optional[Var[bool]] = None
 
     # If true, the modal will return focus to the element that triggered it when it closes.
-    return_focus_on_close: Var[bool]
+    return_focus_on_close: Optional[Var[bool]] = None
 
     # "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"
-    size: Var[LiteralAlertDialogSize]
+    size: Optional[Var[LiteralAlertDialogSize]] = None
 
     # If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
-    use_inert: Var[bool]
+    use_inert: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
diff --git a/reflex/components/chakra/overlay/drawer.py b/reflex/components/chakra/overlay/drawer.py
index 7d317fe9c77..8d915993067 100644
--- a/reflex/components/chakra/overlay/drawer.py
+++ b/reflex/components/chakra/overlay/drawer.py
@@ -1,7 +1,7 @@
 """Container to stack elements with spacing."""
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.chakra import (
     ChakraComponent,
@@ -19,55 +19,55 @@ class Drawer(ChakraComponent):
     tag = "Drawer"
 
     # If true, the modal will be open.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None
 
     # Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to false.
-    allow_pinch_zoom: Var[bool]
+    allow_pinch_zoom: Optional[Var[bool]] = None
 
     # If true, the modal will autofocus the first enabled and interactive element within the ModalContent
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None
 
     # If true, scrolling will be disabled on the body when the modal opens.
-    block_scroll_on_mount: Var[bool]
+    block_scroll_on_mount: Optional[Var[bool]] = None
 
     # If true, the modal will close when the Esc key is pressed
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None
 
     # If true, the modal will close when the overlay is clicked
-    close_on_overlay_click: Var[bool]
+    close_on_overlay_click: Optional[Var[bool]] = None
 
     # If true, the modal will be centered on screen.
-    is_centered: Var[bool]
+    is_centered: Optional[Var[bool]] = None
 
     # If true and drawer's placement is top or bottom, the drawer will occupy the viewport height (100vh)
-    is_full_height: Var[bool]
+    is_full_height: Optional[Var[bool]] = None
 
     # Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe
-    lock_focus_across_frames: Var[bool]
+    lock_focus_across_frames: Optional[Var[bool]] = None
 
     # The placement of the drawer
-    placement: Var[str]
+    placement: Optional[Var[str]] = None
 
     # If true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens
-    preserve_scroll_bar_gap: Var[bool]
+    preserve_scroll_bar_gap: Optional[Var[bool]] = None
 
     # If true, the modal will return focus to the element that triggered it when it closes.
-    return_focus_on_close: Var[bool]
+    return_focus_on_close: Optional[Var[bool]] = None
 
     # "xs" | "sm" | "md" | "lg" | "xl" | "full"
-    size: Var[LiteralDrawerSize]
+    size: Optional[Var[LiteralDrawerSize]] = None
 
     # A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
-    use_inert: Var[bool]
+    use_inert: Optional[Var[bool]] = None
 
     # Variant of drawer
-    variant: Var[str]
+    variant: Optional[Var[str]] = None
 
     # Color scheme of the Drawer
     # Options:
     # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
     # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
diff --git a/reflex/components/chakra/overlay/menu.py b/reflex/components/chakra/overlay/menu.py
index 1401fce7c7f..74a42f44c54 100644
--- a/reflex/components/chakra/overlay/menu.py
+++ b/reflex/components/chakra/overlay/menu.py
@@ -20,52 +20,52 @@ class Menu(ChakraComponent):
     tag = "Menu"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
-    arrow_padding: Var[int]
+    arrow_padding: Optional[Var[int]] = None
 
     # If true, the first enabled menu item will receive focus and be selected when the menu opens.
-    auto_select: Var[bool]
+    auto_select: Optional[Var[bool]] = None
 
     # The boundary area for the popper. Used within the preventOverflow modifier
-    boundary: Var[str]
+    boundary: Optional[Var[str]] = None
 
     # If true, the menu will close when you click outside the menu list
-    close_on_blur: Var[bool]
+    close_on_blur: Optional[Var[bool]] = None
 
     # If true, the menu will close when a menu item is clicked
-    close_on_select: Var[bool]
+    close_on_select: Optional[Var[bool]] = None
 
     # If by default the menu is open.
-    default_is_open: Var[bool]
+    default_is_open: Optional[Var[bool]] = None
 
     # If rtl, popper placement positions will be flipped i.e. 'top-right' will become 'top-left' and vice-verse ("ltr" | "rtl")
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None
 
     # If true, the popper will change its placement and flip when it's about to overflow its boundary area.
-    flip: Var[bool]
+    flip: Optional[Var[bool]] = None
 
     # The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.
-    gutter: Var[int]
+    gutter: Optional[Var[int]] = None
 
     # Performance 🚀: If true, the MenuItem rendering will be deferred until the menu is open.
-    is_lazy: Var[bool]
+    is_lazy: Optional[Var[bool]] = None
 
     # Performance 🚀: The lazy behavior of menu's content when not visible. Only works when `isLazy={true}` - "unmount": The menu's content is always unmounted when not open. - "keepMounted": The menu's content initially unmounted, but stays mounted when menu is open.
-    lazy_behavior: Var[str]
+    lazy_behavior: Optional[Var[str]] = None
 
     # Determines if the menu is open or not.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None
 
     # If true, the popper will match the width of the reference at all times. It's useful for autocomplete, `date-picker` and select patterns.
-    match_width: Var[bool]
+    match_width: Optional[Var[bool]] = None
 
     # The placement of the popper relative to its reference.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None
 
     # If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
-    prevent_overflow: Var[bool]
+    prevent_overflow: Optional[Var[bool]] = None
 
     # The CSS positioning strategy to use. ("fixed" | "absolute")
-    strategy: Var[LiteralMenuStrategy]
+    strategy: Optional[Var[LiteralMenuStrategy]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
@@ -118,13 +118,13 @@ class MenuButton(ChakraComponent):
     tag = "MenuButton"
 
     # The variant of the menu button.
-    variant: Var[str]
+    variant: Optional[Var[str]] = None
 
     # Components that are not allowed as children.
     _invalid_children: List[str] = ["Button", "MenuButton"]
 
     # The tag to use for the menu button.
-    as_: Var[str]
+    as_: Optional[Var[str]] = None
 
 
 class MenuList(ChakraComponent):
@@ -160,19 +160,19 @@ class MenuItem(ChakraComponent):
     tag = "MenuItem"
 
     # Overrides the parent menu's closeOnSelect prop.
-    close_on_select: Var[bool]
+    close_on_select: Optional[Var[bool]] = None
 
     # Right-aligned label text content, useful for displaying hotkeys.
-    command: Var[str]
+    command: Optional[Var[str]] = None
 
     # The spacing between the command and menu item's label.
-    command_spacing: Var[int]
+    command_spacing: Optional[Var[int]] = None
 
     # If true, the menuitem will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true and the menuitem is disabled, it'll remain keyboard-focusable
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None
 
 
 class MenuItemOption(ChakraComponent):
@@ -181,28 +181,28 @@ class MenuItemOption(ChakraComponent):
     tag = "MenuItemOption"
 
     # Overrides the parent menu's closeOnSelect prop.
-    close_on_select: Var[bool]
+    close_on_select: Optional[Var[bool]] = None
 
     # Right-aligned label text content, useful for displaying hotkeys.
-    command: Var[str]
+    command: Optional[Var[str]] = None
 
     # The spacing between the command and menu item's label.
-    command_spacing: Var[int]
+    command_spacing: Optional[Var[int]] = None
 
     # Determines if menu item is checked.
-    is_checked: Var[bool]
+    is_checked: Optional[Var[bool]] = None
 
     # If true, the menuitem will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true and the menuitem is disabled, it'll remain keyboard-focusable
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None
 
     # "checkbox" | "radio"
-    type_: Var[LiteralMenuOption]
+    type_: Optional[Var[LiteralMenuOption]] = None
 
     # Value of the menu item.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
 
 class MenuGroup(ChakraComponent):
@@ -217,10 +217,10 @@ class MenuOptionGroup(ChakraComponent):
     tag = "MenuOptionGroup"
 
     # "checkbox" | "radio"
-    type_: Var[LiteralMenuOption]
+    type_: Optional[Var[LiteralMenuOption]] = None
 
     # Value of the option group.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
 
 class MenuDivider(ChakraComponent):
diff --git a/reflex/components/chakra/overlay/modal.py b/reflex/components/chakra/overlay/modal.py
index 78b8a8164cd..450706e13d7 100644
--- a/reflex/components/chakra/overlay/modal.py
+++ b/reflex/components/chakra/overlay/modal.py
@@ -17,43 +17,43 @@ class Modal(ChakraComponent):
     tag = "Modal"
 
     # If true, the modal will be open.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None
 
     # Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to false.
-    allow_pinch_zoom: Var[bool]
+    allow_pinch_zoom: Optional[Var[bool]] = None
 
     # If true, the modal will autofocus the first enabled and interactive element within the ModalContent
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None
 
     # If true, scrolling will be disabled on the body when the modal opens.
-    block_scroll_on_mount: Var[bool]
+    block_scroll_on_mount: Optional[Var[bool]] = None
 
     # If true, the modal will close when the Esc key is pressed
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None
 
     # If true, the modal will close when the overlay is clicked
-    close_on_overlay_click: Var[bool]
+    close_on_overlay_click: Optional[Var[bool]] = None
 
     # If true, the modal will be centered on screen.
-    is_centered: Var[bool]
+    is_centered: Optional[Var[bool]] = None
 
     # Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe
-    lock_focus_across_frames: Var[bool]
+    lock_focus_across_frames: Optional[Var[bool]] = None
 
     # The transition that should be used for the modal
-    motion_preset: Var[str]
+    motion_preset: Optional[Var[str]] = None
 
     # If true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens
-    preserve_scroll_bar_gap: Var[bool]
+    preserve_scroll_bar_gap: Optional[Var[bool]] = None
 
     # If true, the modal will return focus to the element that triggered it when it closes.
-    return_focus_on_close: Var[bool]
+    return_focus_on_close: Optional[Var[bool]] = None
 
     # "xs" | "sm" | "md" | "lg" | "xl" | "full"
-    size: Var[ModalSizes]
+    size: Optional[Var[ModalSizes]] = None
 
     # A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
-    use_inert: Var[bool]
+    use_inert: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
diff --git a/reflex/components/chakra/overlay/popover.py b/reflex/components/chakra/overlay/popover.py
index 7e1fa3e996c..db20efa166f 100644
--- a/reflex/components/chakra/overlay/popover.py
+++ b/reflex/components/chakra/overlay/popover.py
@@ -1,7 +1,7 @@
 """Popover components."""
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.chakra import (
     ChakraComponent,
@@ -19,67 +19,67 @@ class Popover(ChakraComponent):
     tag = "Popover"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
-    arrow_padding: Var[int]
+    arrow_padding: Optional[Var[int]] = None
 
     # The `box-shadow` of the popover arrow
-    arrow_shadow_color: Var[str]
+    arrow_shadow_color: Optional[Var[str]] = None
 
     # The size of the popover arrow
-    arrow_size: Var[int]
+    arrow_size: Optional[Var[int]] = None
 
     # If true, focus will be transferred to the first interactive element when the popover opens
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None
 
     # The boundary area for the popper. Used within the preventOverflow modifier
-    boundary: Var[str]
+    boundary: Optional[Var[str]] = None
 
     # If true, the popover will close when you blur out it by clicking outside or tabbing out
-    close_on_blur: Var[bool]
+    close_on_blur: Optional[Var[bool]] = None
 
     # If true, the popover will close when you hit the Esc key
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None
 
     # If true, the popover will be initially opened.
-    default_is_open: Var[bool]
+    default_is_open: Optional[Var[bool]] = None
 
     # Theme direction ltr or rtl. Popper's placement will be set accordingly
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None
 
     # If true, the popper will change its placement and flip when it's about to overflow its boundary area.
-    flip: Var[bool]
+    flip: Optional[Var[bool]] = None
 
     # The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.
-    gutter: Var[int]
+    gutter: Optional[Var[int]] = None
 
     # The html id attribute of the popover. If not provided, we generate a unique id. This id is also used to auto-generate the `aria-labelledby` and `aria-describedby` attributes that points to the PopoverHeader and PopoverBody
-    id_: Var[str]
+    id_: Optional[Var[str]] = None
 
     # Performance 🚀: If true, the PopoverContent rendering will be deferred until the popover is open.
-    is_lazy: Var[bool]
+    is_lazy: Optional[Var[bool]] = None
 
     # Performance 🚀: The lazy behavior of popover's content when not visible. Only works when `isLazy={true}` - "unmount": The popover's content is always unmounted when not open. - "keepMounted": The popover's content initially unmounted, but stays mounted when popover is open.
-    lazy_behavior: Var[str]
+    lazy_behavior: Optional[Var[str]] = None
 
     # If true, the popover will be opened in controlled mode.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None
 
     # If true, the popper will match the width of the reference at all times. It's useful for autocomplete, `date-picker` and select patterns.
-    match_width: Var[bool]
+    match_width: Optional[Var[bool]] = None
 
     # The placement of the popover. It's used internally by Popper.js.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None
 
     # If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
-    prevent_overflow: Var[bool]
+    prevent_overflow: Optional[Var[bool]] = None
 
     # If true, focus will be returned to the element that triggers the popover when it closes
-    return_focus_on_close: Var[bool]
+    return_focus_on_close: Optional[Var[bool]] = None
 
     # The CSS positioning strategy to use. ("fixed" | "absolute")
-    strategy: Var[LiteralMenuStrategy]
+    strategy: Optional[Var[LiteralMenuStrategy]] = None
 
     # The interaction that triggers the popover. hover - means the popover will open when you hover with mouse or focus with keyboard on the popover trigger click - means the popover will open on click or press Enter to Space on keyboard ("click" | "hover")
-    trigger: Var[LiteralPopOverTrigger]
+    trigger: Optional[Var[LiteralPopOverTrigger]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
diff --git a/reflex/components/chakra/overlay/tooltip.py b/reflex/components/chakra/overlay/tooltip.py
index bd3a062c6dd..eec1205f3d9 100644
--- a/reflex/components/chakra/overlay/tooltip.py
+++ b/reflex/components/chakra/overlay/tooltip.py
@@ -1,7 +1,7 @@
 """Tooltip components."""
 from __future__ import annotations
 
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.components.chakra import ChakraComponent, LiteralChakraDirection
 from reflex.vars import Var
@@ -13,55 +13,55 @@ class Tooltip(ChakraComponent):
     tag = "Tooltip"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
-    arrow_padding: Var[int]
+    arrow_padding: Optional[Var[int]] = None
 
     # The color of the arrow shadow.
-    arrow_shadow_color: Var[str]
+    arrow_shadow_color: Optional[Var[str]] = None
 
     # Size of the arrow.
-    arrow_size: Var[int]
+    arrow_size: Optional[Var[int]] = None
 
     # Delay (in ms) before hiding the tooltip
-    delay: Var[int]
+    delay: Optional[Var[int]] = None
 
     # If true, the tooltip will hide on click
-    close_on_click: Var[bool]
+    close_on_click: Optional[Var[bool]] = None
 
     # If true, the tooltip will hide on pressing Esc key
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None
 
     # If true, the tooltip will hide while the mouse is down
-    close_on_mouse_down: Var[bool]
+    close_on_mouse_down: Optional[Var[bool]] = None
 
     # If true, the tooltip will be initially shown
-    default_is_open: Var[bool]
+    default_is_open: Optional[Var[bool]] = None
 
     # Theme direction ltr or rtl. Popper's placement will be set accordingly
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None
 
     # The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.
-    gutter: Var[int]
+    gutter: Optional[Var[int]] = None
 
     # If true, the tooltip will show an arrow tip
-    has_arrow: Var[bool]
+    has_arrow: Optional[Var[bool]] = None
 
     # If true, the tooltip with be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None
 
     # If true, the tooltip will be open.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None
 
     # The label of the tooltip
-    label: Var[str]
+    label: Optional[Var[str]] = None
 
     # Delay (in ms) before showing the tooltip
-    open_delay: Var[int]
+    open_delay: Optional[Var[int]] = None
 
     # The placement of the popper relative to its reference.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None
 
     # If true, the tooltip will wrap its children in a `<span/>` with `tabIndex=0`
-    should_wrap_children: Var[bool]
+    should_wrap_children: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
diff --git a/reflex/components/chakra/typography/heading.py b/reflex/components/chakra/typography/heading.py
index d681802faa3..871dda42810 100644
--- a/reflex/components/chakra/typography/heading.py
+++ b/reflex/components/chakra/typography/heading.py
@@ -1,5 +1,5 @@
 """A heading component."""
-
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent, LiteralHeadingSize
 from reflex.vars import Var
@@ -11,7 +11,7 @@ class Heading(ChakraComponent):
     tag = "Heading"
 
     # Override the tag. The default tag is `<h2>`.
-    as_: Var[str]
+    as_: Optional[Var[str]] = None
 
     # "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralHeadingSize]
+    size: Optional[Var[LiteralHeadingSize]] = None
diff --git a/reflex/components/chakra/typography/highlight.py b/reflex/components/chakra/typography/highlight.py
index 0308c091e3d..24e7d3b109f 100644
--- a/reflex/components/chakra/typography/highlight.py
+++ b/reflex/components/chakra/typography/highlight.py
@@ -1,6 +1,5 @@
 """A highlight component."""
-
-from typing import Dict, List
+from typing import Dict, List, Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.tags import Tag
@@ -13,7 +12,7 @@ class Highlight(ChakraComponent):
     tag = "Highlight"
 
     # A query for the text to highlight. Can be a string or a list of strings.
-    query: Var[List[str]]
+    query: Optional[Var[List[str]]] = None
 
     # The style of the content.
     # Note: styles and style are different prop.
diff --git a/reflex/components/chakra/typography/text.py b/reflex/components/chakra/typography/text.py
index e211c4d641e..aed9e6e858a 100644
--- a/reflex/components/chakra/typography/text.py
+++ b/reflex/components/chakra/typography/text.py
@@ -1,6 +1,8 @@
 """A text component."""
 from __future__ import annotations
 
+from typing import Optional
+
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
 
@@ -11,7 +13,7 @@ class Text(ChakraComponent):
     tag = "Text"
 
     # Override the tag. The default tag is `<p>`.
-    as_: Var[str]
+    as_: Optional[Var[str]] = None
 
     # Truncate text after a specific number of lines. It will render an ellipsis when the text exceeds the width of the viewport or max_width prop.
-    no_of_lines: Var[int]
+    no_of_lines: Optional[Var[int]] = None
diff --git a/reflex/components/component.py b/reflex/components/component.py
index f32b476bac9..af8808654ce 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -1,5 +1,4 @@
 """Base component definitions."""
-
 from __future__ import annotations
 
 import copy
diff --git a/reflex/components/core/cond.py b/reflex/components/core/cond.py
index 66f7f64482f..91350ce76a8 100644
--- a/reflex/components/core/cond.py
+++ b/reflex/components/core/cond.py
@@ -21,7 +21,7 @@ class Cond(MemoizationLeaf):
     """Render one of two components based on a condition."""
 
     # The cond to determine which component to render.
-    cond: Var[Any]
+    cond: Optional[Var[Any]] = None
 
     # The component to render if the cond is true.
     comp1: BaseComponent = None  # type: ignore
diff --git a/reflex/components/core/debounce.py b/reflex/components/core/debounce.py
index 28ba6ee3e64..383ac43f9ca 100644
--- a/reflex/components/core/debounce.py
+++ b/reflex/components/core/debounce.py
@@ -1,7 +1,7 @@
 """Wrapper around react-debounce-input."""
 from __future__ import annotations
 
-from typing import Any, Type
+from typing import Any, Optional, Type
 
 from reflex.components.component import Component
 from reflex.constants import EventTriggers
@@ -22,25 +22,25 @@ class DebounceInput(Component):
     tag = "DebounceInput"
 
     # Minimum input characters before triggering the on_change event
-    min_length: Var[int]
+    min_length: Optional[Var[int]] = None
 
     # Time to wait between end of input and triggering on_change
     debounce_timeout: Var[int] = DEFAULT_DEBOUNCE_TIMEOUT  # type: ignore
 
     # If true, notify when Enter key is pressed
-    force_notify_by_enter: Var[bool]
+    force_notify_by_enter: Optional[Var[bool]] = None
 
     # If true, notify when form control loses focus
-    force_notify_on_blur: Var[bool]
+    force_notify_on_blur: Optional[Var[bool]] = None
 
     # If provided, create a fully-controlled input
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The ref to attach to the created input
-    input_ref: Var[str]
+    input_ref: Optional[Var[str]] = None
 
     # The element to wrap
-    element: Var[Type[Component]]
+    element: Optional[Var[Type[Component]]] = None
 
     @classmethod
     def create(cls, *children: Component, **props: Any) -> Component:
diff --git a/reflex/components/core/foreach.py b/reflex/components/core/foreach.py
index 0ef7aeefa9a..528ce45e919 100644
--- a/reflex/components/core/foreach.py
+++ b/reflex/components/core/foreach.py
@@ -18,7 +18,7 @@ class Foreach(Component):
     _memoization_mode = MemoizationMode(recursive=False)
 
     # The iterable to create components from.
-    iterable: Var[Iterable]
+    iterable: Optional[Var[Iterable]] = None
 
     # A function from the render args to the component.
     render_fn: Callable = Fragment.create
diff --git a/reflex/components/core/html.py b/reflex/components/core/html.py
index 987d216a3d8..9976acafc5a 100644
--- a/reflex/components/core/html.py
+++ b/reflex/components/core/html.py
@@ -1,5 +1,5 @@
 """A html component."""
-from typing import Dict
+from typing import Dict, Optional
 
 from reflex.components.el.elements.typography import Div
 from reflex.vars import Var
@@ -13,7 +13,7 @@ class Html(Div):
     """
 
     # The HTML to render.
-    dangerouslySetInnerHTML: Var[Dict[str, str]]
+    dangerouslySetInnerHTML: Optional[Var[Dict[str, str]]] = None
 
     @classmethod
     def create(cls, *children, **props):
diff --git a/reflex/components/core/match.py b/reflex/components/core/match.py
index f1f4a20965a..dcd0a51d2be 100644
--- a/reflex/components/core/match.py
+++ b/reflex/components/core/match.py
@@ -1,5 +1,4 @@
 """rx.match."""
-
 import textwrap
 from typing import Any, Dict, List, Optional, Tuple, Union
 
@@ -17,7 +16,7 @@ class Match(MemoizationLeaf):
     """Match cases based on a condition."""
 
     # The condition to determine which case to match.
-    cond: Var[Any]
+    cond: Optional[Var[Any]] = None
 
     # The list of match cases to be matched.
     match_cases: List[Any] = []
diff --git a/reflex/components/core/upload.py b/reflex/components/core/upload.py
index 0d8eaea03c1..70bccb0e39c 100644
--- a/reflex/components/core/upload.py
+++ b/reflex/components/core/upload.py
@@ -173,31 +173,31 @@ class Upload(MemoizationLeaf):
     # The list of accepted file types. This should be a dictionary of MIME types as keys and array of file formats as
     # values.
     # supported MIME types: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
-    accept: Var[Optional[Dict[str, List]]]
+    accept: Optional[Var[Optional[Dict[str, List]]]] = None
 
     # Whether the dropzone is disabled.
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # The maximum number of files that can be uploaded.
-    max_files: Var[int]
+    max_files: Optional[Var[int]] = None
 
     # The maximum file size (bytes) that can be uploaded.
-    max_size: Var[int]
+    max_size: Optional[Var[int]] = None
 
     # The minimum file size (bytes) that can be uploaded.
-    min_size: Var[int]
+    min_size: Optional[Var[int]] = None
 
     # Whether to allow multiple files to be uploaded.
     multiple: Var[bool] = True  # type: ignore
 
     # Whether to disable click to upload.
-    no_click: Var[bool]
+    no_click: Optional[Var[bool]] = None
 
     # Whether to disable drag and drop.
-    no_drag: Var[bool]
+    no_drag: Optional[Var[bool]] = None
 
     # Whether to disable using the space/enter keys to upload.
-    no_keyboard: Var[bool]
+    no_keyboard: Optional[Var[bool]] = None
 
     # Marked True when any Upload component is created.
     is_used: ClassVar[bool] = False
diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
index 0ac0d4d270f..4552eb4e611 100644
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@@ -361,22 +361,22 @@ class CodeBlock(Component):
     language: Var[LiteralCodeLanguage] = "python"  # type: ignore
 
     # The code to display.
-    code: Var[str]
+    code: Optional[Var[str]] = None
 
     # If this is enabled line numbers will be shown next to the code block.
-    show_line_numbers: Var[bool]
+    show_line_numbers: Optional[Var[bool]] = None
 
     # The starting line number to use.
-    starting_line_number: Var[int]
+    starting_line_number: Optional[Var[int]] = None
 
     # Whether to wrap long lines.
-    wrap_long_lines: Var[bool]
+    wrap_long_lines: Optional[Var[bool]] = None
 
     # A custom style for the code block.
     custom_style: Dict[str, str] = {}
 
     # Props passed down to the code tag.
-    code_tag_props: Var[Dict[str, str]]
+    code_tag_props: Optional[Var[Dict[str, str]]] = None
 
     def _get_imports(self) -> imports.ImportDict:
         merged_imports = super()._get_imports()
diff --git a/reflex/components/datadisplay/dataeditor.py b/reflex/components/datadisplay/dataeditor.py
index ce9e3134ff7..fa8370a29da 100644
--- a/reflex/components/datadisplay/dataeditor.py
+++ b/reflex/components/datadisplay/dataeditor.py
@@ -116,94 +116,94 @@ class DataEditor(NoSSRComponent):
     ]
 
     # Number of rows.
-    rows: Var[int]
+    rows: Optional[Var[int]] = None
 
     # Headers of the columns for the data grid.
-    columns: Var[List[Dict[str, Any]]]
+    columns: Optional[Var[List[Dict[str, Any]]]] = None
 
     # The data.
-    data: Var[List[List[Any]]]
+    data: Optional[Var[List[List[Any]]]] = None
 
     # The name of the callback used to find the data to display.
-    get_cell_content: Var[str]
+    get_cell_content: Optional[Var[str]] = None
 
     # Allow selection for copying.
-    get_cell_for_selection: Var[bool]
+    get_cell_for_selection: Optional[Var[bool]] = None
 
     # Allow paste.
-    on_paste: Var[bool]
+    on_paste: Optional[Var[bool]] = None
 
     # Controls the drawing of the focus ring.
-    draw_focus_ring: Var[bool]
+    draw_focus_ring: Optional[Var[bool]] = None
 
     # Enables or disables the overlay shadow when scrolling horizontally.
-    fixed_shadow_x: Var[bool]
+    fixed_shadow_x: Optional[Var[bool]] = None
 
     # Enables or disables the overlay shadow when scrolling vertically.
-    fixed_shadow_y: Var[bool]
+    fixed_shadow_y: Optional[Var[bool]] = None
 
     # The number of columns which should remain in place when scrolling horizontally. Doesn't include rowMarkers.
-    freeze_columns: Var[int]
+    freeze_columns: Optional[Var[int]] = None
 
     # Controls the header of the group header row.
-    group_header_height: Var[int]
+    group_header_height: Optional[Var[int]] = None
 
     # Controls the height of the header row.
-    header_height: Var[int]
+    header_height: Optional[Var[int]] = None
 
     # Additional header icons:
     # header_icons: Var[Any] # (TODO: must be a map of name: svg)
 
     # The maximum width a column can be automatically sized to.
-    max_column_auto_width: Var[int]
+    max_column_auto_width: Optional[Var[int]] = None
 
     # The maximum width a column can be resized to.
-    max_column_width: Var[int]
+    max_column_width: Optional[Var[int]] = None
 
     # The minimum width a column can be resized to.
-    min_column_width: Var[int]
+    min_column_width: Optional[Var[int]] = None
 
     # Determins the height of each row.
-    row_height: Var[int]
+    row_height: Optional[Var[int]] = None
 
     # Kind of row markers.
-    row_markers: Var[LiteralRowMarker]
+    row_markers: Optional[Var[LiteralRowMarker]] = None
 
     # Changes the starting index for row markers.
-    row_marker_start_index: Var[int]
+    row_marker_start_index: Optional[Var[int]] = None
 
     # Sets the width of row markers in pixels, if unset row markers will automatically size.
-    row_marker_width: Var[int]
+    row_marker_width: Optional[Var[int]] = None
 
     # Enable horizontal smooth scrolling.
-    smooth_scroll_x: Var[bool]
+    smooth_scroll_x: Optional[Var[bool]] = None
 
     # Enable vertical smooth scrolling.
-    smooth_scroll_y: Var[bool]
+    smooth_scroll_y: Optional[Var[bool]] = None
 
     # Controls the drawing of the left hand vertical border of a column. If set to a boolean value it controls all borders.
     vertical_border: Var[bool]  # TODO: support a mapping (dict[int, bool])
 
     # Allow columns selections. ("none", "single", "multi")
-    column_select: Var[Literal["none", "single", "multi"]]
+    column_select: Optional[Var[Literal["none", "single", "multi"]]] = None
 
     # Prevent diagonal scrolling.
-    prevent_diagonal_scrolling: Var[bool]
+    prevent_diagonal_scrolling: Optional[Var[bool]] = None
 
     # Allow to scroll past the limit of the actual content on the horizontal axis.
-    overscroll_x: Var[int]
+    overscroll_x: Optional[Var[int]] = None
 
     # Allow to scroll past the limit of the actual content on the vertical axis.
-    overscroll_y: Var[int]
+    overscroll_y: Optional[Var[int]] = None
 
     # Initial scroll offset on the horizontal axis.
-    scroll_offset_x: Var[int]
+    scroll_offset_x: Optional[Var[int]] = None
 
     # Initial scroll offset on the vertical axis.
-    scroll_offset_y: Var[int]
+    scroll_offset_y: Optional[Var[int]] = None
 
     # global theme
-    theme: Var[Union[DataEditorTheme, Dict]]
+    theme: Optional[Var[Union[DataEditorTheme, Dict]]] = None
 
     def _get_imports(self):
         return imports.merge_imports(
diff --git a/reflex/components/el/elements/base.py b/reflex/components/el/elements/base.py
index fefbfdb561b..4cc993e9a77 100644
--- a/reflex/components/el/elements/base.py
+++ b/reflex/components/el/elements/base.py
@@ -1,4 +1,4 @@
-from typing import Union, Optional
+from typing import Optional, Union
 
 from reflex.components.el.element import Element
 from reflex.vars import Var as Var
diff --git a/reflex/components/el/elements/forms.py b/reflex/components/el/elements/forms.py
index bdeff695bff..ed4903dc25d 100644
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Any, Dict, Union
+from typing import Any, Dict, Optional, Union
 
 from reflex.components.el.element import Element
 from reflex.constants.event import EventTriggers
@@ -14,37 +14,37 @@ class Button(BaseHTML):
     tag = "button"
 
     # Automatically focuses the button when the page loads
-    auto_focus: Var[Union[str, int, bool]]
+    auto_focus: Optional[Var[Union[str, int, bool]]] = None
 
     # Disables the button
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # Associates the button with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # URL to send the form data to (for type="submit" buttons)
-    form_action: Var[Union[str, int, bool]]
+    form_action: Optional[Var[Union[str, int, bool]]] = None
 
     # How the form data should be encoded when submitting to the server (for type="submit" buttons)
-    form_enc_type: Var[Union[str, int, bool]]
+    form_enc_type: Optional[Var[Union[str, int, bool]]] = None
 
     # HTTP method to use for sending form data (for type="submit" buttons)
-    form_method: Var[Union[str, int, bool]]
+    form_method: Optional[Var[Union[str, int, bool]]] = None
 
     # Bypasses form validation when submitting (for type="submit" buttons)
-    form_no_validate: Var[Union[str, int, bool]]
+    form_no_validate: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies where to display the response after submitting the form (for type="submit" buttons)
-    form_target: Var[Union[str, int, bool]]
+    form_target: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the button, used when sending form data
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
     # Type of the button (submit, reset, or button)
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None
 
     # Value of the button, used when sending form data
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Datalist(BaseHTML):
@@ -60,13 +60,13 @@ class Fieldset(Element):
     tag = "fieldset"
 
     # Disables all the form control descendants of the fieldset
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None
 
     # Associates the fieldset with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the fieldset, used for scripting
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Form(BaseHTML):
@@ -75,31 +75,31 @@ class Form(BaseHTML):
     tag = "form"
 
     # MIME types the server accepts for file upload
-    accept: Var[Union[str, int, bool]]
+    accept: Optional[Var[Union[str, int, bool]]] = None
 
     # Character encodings to be used for form submission
-    accept_charset: Var[Union[str, int, bool]]
+    accept_charset: Optional[Var[Union[str, int, bool]]] = None
 
     # URL where the form's data should be submitted
-    action: Var[Union[str, int, bool]]
+    action: Optional[Var[Union[str, int, bool]]] = None
 
     # Whether the form should have autocomplete enabled
-    auto_complete: Var[Union[str, int, bool]]
+    auto_complete: Optional[Var[Union[str, int, bool]]] = None
 
     # Encoding type for the form data when submitted
-    enc_type: Var[Union[str, int, bool]]
+    enc_type: Optional[Var[Union[str, int, bool]]] = None
 
     # HTTP method to use for form submission
-    method: Var[Union[str, int, bool]]
+    method: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the form
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates that the form should not be validated on submit
-    no_validate: Var[Union[str, int, bool]]
+    no_validate: Optional[Var[Union[str, int, bool]]] = None
 
     # Where to display the response after submitting the form
-    target: Var[Union[str, int, bool]]
+    target: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Input(BaseHTML):
@@ -108,103 +108,103 @@ class Input(BaseHTML):
     tag = "input"
 
     # Accepted types of files when the input is file type
-    accept: Var[Union[str, int, bool]]
+    accept: Optional[Var[Union[str, int, bool]]] = None
 
     # Alternate text for input type="image"
-    alt: Var[Union[str, int, bool]]
+    alt: Optional[Var[Union[str, int, bool]]] = None
 
     # Whether the input should have autocomplete enabled
-    auto_complete: Var[Union[str, int, bool]]
+    auto_complete: Optional[Var[Union[str, int, bool]]] = None
 
     # Automatically focuses the input when the page loads
-    auto_focus: Var[Union[str, int, bool]]
+    auto_focus: Optional[Var[Union[str, int, bool]]] = None
 
     # Captures media from the user (camera or microphone)
-    capture: Var[Union[str, int, bool]]
+    capture: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates whether the input is checked (for checkboxes and radio buttons)
-    checked: Var[Union[str, int, bool]]
+    checked: Optional[Var[Union[str, int, bool]]] = None
 
     # The initial value (for checkboxes and radio buttons)
-    default_checked: Var[bool]
+    default_checked: Optional[Var[bool]] = None
 
     # The initial value for a text field
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # Name part of the input to submit in 'dir' and 'name' pair when form is submitted
-    dirname: Var[Union[str, int, bool]]
+    dirname: Optional[Var[Union[str, int, bool]]] = None
 
     # Disables the input
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None
 
     # Associates the input with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # URL to send the form data to (for type="submit" buttons)
-    form_action: Var[Union[str, int, bool]]
+    form_action: Optional[Var[Union[str, int, bool]]] = None
 
     # How the form data should be encoded when submitting to the server (for type="submit" buttons)
-    form_enc_type: Var[Union[str, int, bool]]
+    form_enc_type: Optional[Var[Union[str, int, bool]]] = None
 
     # HTTP method to use for sending form data (for type="submit" buttons)
-    form_method: Var[Union[str, int, bool]]
+    form_method: Optional[Var[Union[str, int, bool]]] = None
 
     # Bypasses form validation when submitting (for type="submit" buttons)
-    form_no_validate: Var[Union[str, int, bool]]
+    form_no_validate: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies where to display the response after submitting the form (for type="submit" buttons)
-    form_target: Var[Union[str, int, bool]]
+    form_target: Optional[Var[Union[str, int, bool]]] = None
 
     # References a datalist for suggested options
-    list: Var[Union[str, int, bool]]
+    list: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the maximum value for the input
-    max: Var[Union[str, int, bool]]
+    max: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the maximum number of characters allowed in the input
-    max_length: Var[Union[str, int, bool]]
+    max_length: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the minimum number of characters required in the input
-    min_length: Var[Union[str, int, bool]]
+    min_length: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the minimum value for the input
-    min: Var[Union[str, int, bool]]
+    min: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates whether multiple values can be entered in an input of the type email or file
-    multiple: Var[Union[str, int, bool]]
+    multiple: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the input, used when sending form data
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
     # Regex pattern the input's value must match to be valid
-    pattern: Var[Union[str, int, bool]]
+    pattern: Optional[Var[Union[str, int, bool]]] = None
 
     # Placeholder text in the input
-    placeholder: Var[Union[str, int, bool]]
+    placeholder: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates whether the input is read-only
-    read_only: Var[Union[str, int, bool]]
+    read_only: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates that the input is required
-    required: Var[Union[str, int, bool]]
+    required: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the visible width of a text control
-    size: Var[Union[str, int, bool]]
+    size: Optional[Var[Union[str, int, bool]]] = None
 
     # URL for image inputs
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the legal number intervals for an input
-    step: Var[Union[str, int, bool]]
+    step: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the type of input
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the image map used with the input
-    use_map: Var[Union[str, int, bool]]
+    use_map: Optional[Var[Union[str, int, bool]]] = None
 
     # Value of the input
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.
@@ -228,10 +228,10 @@ class Label(BaseHTML):
     tag = "label"
 
     # ID of a form control with which the label is associated
-    html_for: Var[Union[str, int, bool]]
+    html_for: Optional[Var[Union[str, int, bool]]] = None
 
     # Associates the label with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Legend(BaseHTML):
@@ -247,25 +247,25 @@ class Meter(BaseHTML):
     tag = "meter"
 
     # Associates the meter with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # High limit of range (above this is considered high value)
-    high: Var[Union[str, int, bool]]
+    high: Optional[Var[Union[str, int, bool]]] = None
 
     # Low limit of range (below this is considered low value)
-    low: Var[Union[str, int, bool]]
+    low: Optional[Var[Union[str, int, bool]]] = None
 
     # Maximum value of the range
-    max: Var[Union[str, int, bool]]
+    max: Optional[Var[Union[str, int, bool]]] = None
 
     # Minimum value of the range
-    min: Var[Union[str, int, bool]]
+    min: Optional[Var[Union[str, int, bool]]] = None
 
     # Optimum value in the range
-    optimum: Var[Union[str, int, bool]]
+    optimum: Optional[Var[Union[str, int, bool]]] = None
 
     # Current value of the meter
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Optgroup(BaseHTML):
@@ -274,10 +274,10 @@ class Optgroup(BaseHTML):
     tag = "optgroup"
 
     # Disables the optgroup
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None
 
     # Label for the optgroup
-    label: Var[Union[str, int, bool]]
+    label: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Option(BaseHTML):
@@ -286,16 +286,16 @@ class Option(BaseHTML):
     tag = "option"
 
     # Disables the option
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None
 
     # Label for the option, if the text is not the label
-    label: Var[Union[str, int, bool]]
+    label: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates that the option is initially selected
-    selected: Var[Union[str, int, bool]]
+    selected: Optional[Var[Union[str, int, bool]]] = None
 
     # Value to be sent as form data
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Output(BaseHTML):
@@ -304,13 +304,13 @@ class Output(BaseHTML):
     tag = "output"
 
     # Associates the output with one or more elements (by their IDs)
-    html_for: Var[Union[str, int, bool]]
+    html_for: Optional[Var[Union[str, int, bool]]] = None
 
     # Associates the output with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the output element for form submission
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Progress(BaseHTML):
@@ -319,13 +319,13 @@ class Progress(BaseHTML):
     tag = "progress"
 
     # Associates the progress element with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # Maximum value of the progress indicator
-    max: Var[Union[str, int, bool]]
+    max: Optional[Var[Union[str, int, bool]]] = None
 
     # Current value of the progress indicator
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Select(BaseHTML):
@@ -334,28 +334,28 @@ class Select(BaseHTML):
     tag = "select"
 
     # Whether the form control should have autocomplete enabled
-    auto_complete: Var[Union[str, int, bool]]
+    auto_complete: Optional[Var[Union[str, int, bool]]] = None
 
     # Automatically focuses the select when the page loads
-    auto_focus: Var[Union[str, int, bool]]
+    auto_focus: Optional[Var[Union[str, int, bool]]] = None
 
     # Disables the select control
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None
 
     # Associates the select with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates that multiple options can be selected
-    multiple: Var[Union[str, int, bool]]
+    multiple: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the select, used when submitting the form
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates that the select control must have a selected option
-    required: Var[Union[str, int, bool]]
+    required: Optional[Var[Union[str, int, bool]]] = None
 
     # Number of visible options in a drop-down list
-    size: Var[Union[str, int, bool]]
+    size: Optional[Var[Union[str, int, bool]]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.
@@ -375,49 +375,49 @@ class Textarea(BaseHTML):
     tag = "textarea"
 
     # Whether the form control should have autocomplete enabled
-    auto_complete: Var[Union[str, int, bool]]
+    auto_complete: Optional[Var[Union[str, int, bool]]] = None
 
     # Automatically focuses the textarea when the page loads
-    auto_focus: Var[Union[str, int, bool]]
+    auto_focus: Optional[Var[Union[str, int, bool]]] = None
 
     # Visible width of the text control, in average character widths
-    cols: Var[Union[str, int, bool]]
+    cols: Optional[Var[Union[str, int, bool]]] = None
 
     # Name part of the textarea to submit in 'dir' and 'name' pair when form is submitted
-    dirname: Var[Union[str, int, bool]]
+    dirname: Optional[Var[Union[str, int, bool]]] = None
 
     # Disables the textarea
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None
 
     # Associates the textarea with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # Maximum number of characters allowed in the textarea
-    max_length: Var[Union[str, int, bool]]
+    max_length: Optional[Var[Union[str, int, bool]]] = None
 
     # Minimum number of characters required in the textarea
-    min_length: Var[Union[str, int, bool]]
+    min_length: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the textarea, used when submitting the form
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
     # Placeholder text in the textarea
-    placeholder: Var[Union[str, int, bool]]
+    placeholder: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates whether the textarea is read-only
-    read_only: Var[Union[str, int, bool]]
+    read_only: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates that the textarea is required
-    required: Var[Union[str, int, bool]]
+    required: Optional[Var[Union[str, int, bool]]] = None
 
     # Visible number of lines in the text control
-    rows: Var[Union[str, int, bool]]
+    rows: Optional[Var[Union[str, int, bool]]] = None
 
     # The controlled value of the textarea, read only unless used with on_change
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None
 
     # How the text in the textarea is to be wrapped when submitting the form
-    wrap: Var[Union[str, int, bool]]
+    wrap: Optional[Var[Union[str, int, bool]]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.
diff --git a/reflex/components/el/elements/inline.py b/reflex/components/el/elements/inline.py
index a8454217b8e..9cacf99c256 100644
--- a/reflex/components/el/elements/inline.py
+++ b/reflex/components/el/elements/inline.py
@@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union
 
 from reflex.vars import Var
 
@@ -12,31 +12,31 @@ class A(BaseHTML):  # Inherits common attributes from BaseMeta
     tag = "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]]
+    download: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the URL of the page the link goes to
-    href: Var[Union[str, int, bool]]
+    href: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the language of the linked document
-    href_lang: Var[Union[str, int, bool]]
+    href_lang: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies what media/device the linked document is optimized for
-    media: Var[Union[str, int, bool]]
+    media: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies which referrer is sent when fetching the resource
-    ping: Var[Union[str, int, bool]]
+    ping: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the relationship between the current document and the linked document
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the relationship between the linked document and the current document
-    rel: Var[Union[str, int, bool]]
+    rel: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the shape of the area
-    shape: Var[Union[str, int, bool]]
+    shape: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies where to open the linked document
-    target: Var[Union[str, int, bool]]
+    target: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Abbr(BaseHTML):
@@ -87,7 +87,7 @@ class Data(BaseHTML):
     tag = "data"
 
     # Specifies the machine-readable translation of the data element.
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Dfn(BaseHTML):
@@ -126,7 +126,7 @@ class Q(BaseHTML):
     tag = "q"
 
     # Specifies the source URL of the quote.
-    cite: Var[Union[str, int, bool]]
+    cite: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Rp(BaseHTML):
@@ -195,7 +195,7 @@ class Time(BaseHTML):
     tag = "time"
 
     # Specifies the date and/or time of the element.
-    date_time: Var[Union[str, int, bool]]
+    date_time: Optional[Var[Union[str, int, bool]]] = None
 
 
 class U(BaseHTML):
diff --git a/reflex/components/el/elements/media.py b/reflex/components/el/elements/media.py
index 2865ca66a11..95b95c5d7c8 100644
--- a/reflex/components/el/elements/media.py
+++ b/reflex/components/el/elements/media.py
@@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Any, Union
+from typing import Any, Optional, Union
 
 from reflex.vars import Var as Var
 
@@ -12,37 +12,37 @@ class Area(BaseHTML):
     tag = "area"
 
     # Alternate text for the area, used for accessibility
-    alt: Var[Union[str, int, bool]]
+    alt: Optional[Var[Union[str, int, bool]]] = None
 
     # Coordinates to define the shape of the area
-    coords: Var[Union[str, int, bool]]
+    coords: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies that the target will be downloaded when clicked
-    download: Var[Union[str, int, bool]]
+    download: Optional[Var[Union[str, int, bool]]] = None
 
     # Hyperlink reference for the area
-    href: Var[Union[str, int, bool]]
+    href: Optional[Var[Union[str, int, bool]]] = None
 
     # Language of the linked resource
-    href_lang: Var[Union[str, int, bool]]
+    href_lang: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies what media/device the linked resource is optimized for
-    media: Var[Union[str, int, bool]]
+    media: Optional[Var[Union[str, int, bool]]] = None
 
     # A list of URLs to be notified if the user follows the hyperlink
-    ping: Var[Union[str, int, bool]]
+    ping: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies which referrer information to send with the link
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the relationship of the target object to the link object
-    rel: Var[Union[str, int, bool]]
+    rel: Optional[Var[Union[str, int, bool]]] = None
 
     # Defines the shape of the area (rectangle, circle, polygon)
-    shape: Var[Union[str, int, bool]]
+    shape: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies where to open the linked document
-    target: Var[Union[str, int, bool]]
+    target: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Audio(BaseHTML):
@@ -51,28 +51,28 @@ class Audio(BaseHTML):
     tag = "audio"
 
     # Specifies that the audio will start playing as soon as it is ready
-    auto_play: Var[Union[str, int, bool]]
+    auto_play: Optional[Var[Union[str, int, bool]]] = None
 
     # Represents the time range of the buffered media
-    buffered: Var[Union[str, int, bool]]
+    buffered: Optional[Var[Union[str, int, bool]]] = None
 
     # Displays the standard audio controls
-    controls: Var[Union[str, int, bool]]
+    controls: Optional[Var[Union[str, int, bool]]] = None
 
     # Configures the CORS requests for the element
-    cross_origin: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies that the audio will loop
-    loop: Var[Union[str, int, bool]]
+    loop: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates whether the audio is muted by default
-    muted: Var[Union[str, int, bool]]
+    muted: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies how the audio file should be preloaded
-    preload: Var[Union[str, int, bool]]
+    preload: Optional[Var[Union[str, int, bool]]] = None
 
     # URL of the audio to play
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Img(BaseHTML):
@@ -81,40 +81,40 @@ class Img(BaseHTML):
     tag = "img"
 
     # Image alignment with respect to its surrounding elements
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
     # Alternative text for the image
-    alt: Var[Union[str, int, bool]]
+    alt: Optional[Var[Union[str, int, bool]]] = None
 
     # Configures the CORS requests for the image
-    cross_origin: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None
 
     # How the image should be decoded
-    decoding: Var[Union[str, int, bool]]
+    decoding: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies an intrinsic size for the image
-    intrinsicsize: Var[Union[str, int, bool]]
+    intrinsicsize: Optional[Var[Union[str, int, bool]]] = None
 
     # Whether the image is a server-side image map
-    ismap: Var[Union[str, int, bool]]
+    ismap: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the loading behavior of the image
-    loading: Var[Union[str, int, bool]]
+    loading: Optional[Var[Union[str, int, bool]]] = None
 
     # Referrer policy for the image
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None
 
     # Sizes of the image for different layouts
-    sizes: Var[Union[str, int, bool]]
+    sizes: Optional[Var[Union[str, int, bool]]] = None
 
     # URL of the image to display
-    src: Var[Any]
+    src: Optional[Var[Any]] = None
 
     # A set of source sizes and URLs for responsive images
-    src_set: Var[Union[str, int, bool]]
+    src_set: Optional[Var[Union[str, int, bool]]] = None
 
     # The name of the map to use with the image
-    use_map: Var[Union[str, int, bool]]
+    use_map: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Map(BaseHTML):
@@ -123,7 +123,7 @@ class Map(BaseHTML):
     tag = "map"
 
     # Name of the map, referenced by the 'usemap' attribute in 'img' and 'object' elements
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Track(BaseHTML):
@@ -132,19 +132,19 @@ class Track(BaseHTML):
     tag = "track"
 
     # Indicates that the track should be enabled unless the user's preferences indicate otherwise
-    default: Var[Union[str, int, bool]]
+    default: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the kind of text track
-    kind: Var[Union[str, int, bool]]
+    kind: Optional[Var[Union[str, int, bool]]] = None
 
     # Title of the text track, used by the browser when listing available text tracks
-    label: Var[Union[str, int, bool]]
+    label: Optional[Var[Union[str, int, bool]]] = None
 
     # URL of the track file
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None
 
     # Language of the track text data
-    src_lang: Var[Union[str, int, bool]]
+    src_lang: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Video(BaseHTML):
@@ -153,34 +153,34 @@ class Video(BaseHTML):
     tag = "video"
 
     # Specifies that the video will start playing as soon as it is ready
-    auto_play: Var[Union[str, int, bool]]
+    auto_play: Optional[Var[Union[str, int, bool]]] = None
 
     # Represents the time range of the buffered media
-    buffered: Var[Union[str, int, bool]]
+    buffered: Optional[Var[Union[str, int, bool]]] = None
 
     # Displays the standard video controls
-    controls: Var[Union[str, int, bool]]
+    controls: Optional[Var[Union[str, int, bool]]] = None
 
     # Configures the CORS requests for the video
-    cross_origin: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies that the video will loop
-    loop: Var[Union[str, int, bool]]
+    loop: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates whether the video is muted by default
-    muted: Var[Union[str, int, bool]]
+    muted: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates that the video should play 'inline', inside its element's playback area
-    plays_inline: Var[Union[str, int, bool]]
+    plays_inline: Optional[Var[Union[str, int, bool]]] = None
 
     # URL of an image to show while the video is downloading, or until the user hits the play button
-    poster: Var[Union[str, int, bool]]
+    poster: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies how the video file should be preloaded
-    preload: Var[Union[str, int, bool]]
+    preload: Optional[Var[Union[str, int, bool]]] = None
 
     # URL of the video to play
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Embed(BaseHTML):
@@ -189,10 +189,10 @@ class Embed(BaseHTML):
     tag = "embed"
 
     # URL of the embedded content
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None
 
     # Media type of the embedded content
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Iframe(BaseHTML):
@@ -201,31 +201,31 @@ class Iframe(BaseHTML):
     tag = "iframe"
 
     # Alignment of the iframe within the page or surrounding elements
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
     # Permissions policy for the iframe
-    allow: Var[Union[str, int, bool]]
+    allow: Optional[Var[Union[str, int, bool]]] = None
 
     # Content Security Policy to apply to the iframe's content
-    csp: Var[Union[str, int, bool]]
+    csp: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the loading behavior of the iframe
-    loading: Var[Union[str, int, bool]]
+    loading: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the iframe, used as a target for hyperlinks and forms
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
     # Referrer policy for the iframe
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None
 
     # Security restrictions for the content in the iframe
-    sandbox: Var[Union[str, int, bool]]
+    sandbox: Optional[Var[Union[str, int, bool]]] = None
 
     # URL of the document to display in the iframe
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None
 
     # HTML content to embed directly within the iframe
-    src_doc: Var[Union[str, int, bool]]
+    src_doc: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Object(BaseHTML):
@@ -234,19 +234,19 @@ class Object(BaseHTML):
     tag = "object"
 
     # URL of the data to be used by the object
-    data: Var[Union[str, int, bool]]
+    data: Optional[Var[Union[str, int, bool]]] = None
 
     # Associates the object with a form element
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of the object, used for scripting or as a target for forms and links
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None
 
     # Media type of the data specified in the data attribute
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None
 
     # Name of an image map to use with the object
-    use_map: Var[Union[str, int, bool]]
+    use_map: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Picture(BaseHTML):
@@ -269,19 +269,19 @@ class Source(BaseHTML):
     tag = "source"
 
     # Media query indicating what device the linked resource is optimized for
-    media: Var[Union[str, int, bool]]
+    media: Optional[Var[Union[str, int, bool]]] = None
 
     # Sizes of the source for different layouts
-    sizes: Var[Union[str, int, bool]]
+    sizes: Optional[Var[Union[str, int, bool]]] = None
 
     # URL of the media file or an image for the element to use
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None
 
     # A set of source sizes and URLs for responsive images
-    src_set: Var[Union[str, int, bool]]
+    src_set: Optional[Var[Union[str, int, bool]]] = None
 
     # Media type of the source
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Svg(BaseHTML):
@@ -296,4 +296,4 @@ class Path(BaseHTML):
     tag = "path"
 
     # Defines the shape of the path
-    d: Var[Union[str, int, bool]]
+    d: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/metadata.py b/reflex/components/el/elements/metadata.py
index 2ff25755e43..0ec97645cb0 100644
--- a/reflex/components/el/elements/metadata.py
+++ b/reflex/components/el/elements/metadata.py
@@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union
 
 from reflex.components.el.element import Element
 from reflex.vars import Var as Var
@@ -13,8 +13,8 @@ class Base(BaseHTML):  # noqa: E742
     tag = "base"
 
     tag = "base"
-    href: Var[Union[str, int, bool]]
-    target: Var[Union[str, int, bool]]
+    href: Optional[Var[Union[str, int, bool]]] = None
+    target: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Head(BaseHTML):  # noqa: E742
@@ -28,25 +28,25 @@ class Link(BaseHTML):  # noqa: E742
 
     tag = "link"
 
-    cross_origin: Var[Union[str, int, bool]]
-    href: Var[Union[str, int, bool]]
-    href_lang: Var[Union[str, int, bool]]
-    integrity: Var[Union[str, int, bool]]
-    media: Var[Union[str, int, bool]]
-    referrer_policy: Var[Union[str, int, bool]]
-    rel: Var[Union[str, int, bool]]
-    sizes: Var[Union[str, int, bool]]
-    type: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None
+    href: Optional[Var[Union[str, int, bool]]] = None
+    href_lang: Optional[Var[Union[str, int, bool]]] = None
+    integrity: Optional[Var[Union[str, int, bool]]] = None
+    media: Optional[Var[Union[str, int, bool]]] = None
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None
+    rel: Optional[Var[Union[str, int, bool]]] = None
+    sizes: Optional[Var[Union[str, int, bool]]] = None
+    type: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Meta(BaseHTML):  # Inherits common attributes from BaseHTML
     """Display the meta element."""
 
     tag = "meta"
-    char_set: Var[Union[str, int, bool]]
-    content: Var[Union[str, int, bool]]
-    http_equiv: Var[Union[str, int, bool]]
-    name: Var[Union[str, int, bool]]
+    char_set: Optional[Var[Union[str, int, bool]]] = None
+    content: Optional[Var[Union[str, int, bool]]] = None
+    http_equiv: Optional[Var[Union[str, int, bool]]] = None
+    name: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Title(Element):  # noqa: E742
diff --git a/reflex/components/el/elements/other.py b/reflex/components/el/elements/other.py
index 26dbf6050b8..9d034a6458b 100644
--- a/reflex/components/el/elements/other.py
+++ b/reflex/components/el/elements/other.py
@@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union
 
 from reflex.vars import Var as Var
 
@@ -12,7 +12,7 @@ class Details(BaseHTML):
     tag = "details"
 
     # Indicates whether the details will be visible (expanded) to the user
-    open: Var[Union[str, int, bool]]
+    open: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Dialog(BaseHTML):
@@ -21,7 +21,7 @@ class Dialog(BaseHTML):
     tag = "dialog"
 
     # Indicates whether the dialog is active and can be interacted with
-    open: Var[Union[str, int, bool]]
+    open: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Summary(BaseHTML):
@@ -58,4 +58,4 @@ class Html(BaseHTML):
     tag = "html"
 
     # Specifies the URL of the document's cache manifest (obsolete in HTML5)
-    manifest: Var[Union[str, int, bool]]
+    manifest: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/scripts.py b/reflex/components/el/elements/scripts.py
index a37a32494f4..ebe60832253 100644
--- a/reflex/components/el/elements/scripts.py
+++ b/reflex/components/el/elements/scripts.py
@@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union
 
 from reflex.vars import Var as Var
 
@@ -25,28 +25,28 @@ class Script(BaseHTML):
     tag = "script"
 
     # Indicates that the script should be executed asynchronously
-    async_: Var[Union[str, int, bool]]
+    async_: Optional[Var[Union[str, int, bool]]] = None
 
     # Character encoding of the external script
-    char_set: Var[Union[str, int, bool]]
+    char_set: Optional[Var[Union[str, int, bool]]] = None
 
     # Configures the CORS requests for the script
-    cross_origin: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None
 
     # Indicates that the script should be executed after the page has finished parsing
-    defer: Var[Union[str, int, bool]]
+    defer: Optional[Var[Union[str, int, bool]]] = None
 
     # Security feature allowing browsers to verify what they fetch
-    integrity: Var[Union[str, int, bool]]
+    integrity: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the scripting language used in the type attribute
-    language: Var[Union[str, int, bool]]
+    language: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies which referrer information to send when fetching the script
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None
 
     # URL of an external script
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the MIME type of the script
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/tables.py b/reflex/components/el/elements/tables.py
index 1277e1bea79..e81ab86cd3f 100644
--- a/reflex/components/el/elements/tables.py
+++ b/reflex/components/el/elements/tables.py
@@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union
 
 from reflex.vars import Var as Var
 
@@ -12,7 +12,7 @@ class Caption(BaseHTML):
     tag = "caption"
 
     # Alignment of the caption
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Col(BaseHTML):
@@ -21,10 +21,10 @@ class Col(BaseHTML):
     tag = "col"
 
     # Alignment of the content within the column
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
     # Number of columns the col element spans
-    span: Var[Union[str, int, bool]]
+    span: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Colgroup(BaseHTML):
@@ -33,10 +33,10 @@ class Colgroup(BaseHTML):
     tag = "colgroup"
 
     # Alignment of the content within the column group
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
     # Number of columns the colgroup element spans
-    span: Var[Union[str, int, bool]]
+    span: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Table(BaseHTML):
@@ -45,10 +45,10 @@ class Table(BaseHTML):
     tag = "table"
 
     # Alignment of the table
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
     # Provides a summary of the table's purpose and structure
-    summary: Var[Union[str, int, bool]]
+    summary: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Tbody(BaseHTML):
@@ -57,7 +57,7 @@ class Tbody(BaseHTML):
     tag = "tbody"
 
     # Alignment of the content within the table body
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Td(BaseHTML):
@@ -66,16 +66,16 @@ class Td(BaseHTML):
     tag = "td"
 
     # Alignment of the content within the table cell
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
     # Number of columns a cell should span
-    col_span: Var[Union[str, int, bool]]
+    col_span: Optional[Var[Union[str, int, bool]]] = None
 
     # IDs of the headers associated with this cell
-    headers: Var[Union[str, int, bool]]
+    headers: Optional[Var[Union[str, int, bool]]] = None
 
     # Number of rows a cell should span
-    row_span: Var[Union[str, int, bool]]
+    row_span: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Tfoot(BaseHTML):
@@ -84,7 +84,7 @@ class Tfoot(BaseHTML):
     tag = "tfoot"
 
     # Alignment of the content within the table footer
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Th(BaseHTML):
@@ -93,19 +93,19 @@ class Th(BaseHTML):
     tag = "th"
 
     # Alignment of the content within the table header cell
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
     # Number of columns a header cell should span
-    col_span: Var[Union[str, int, bool]]
+    col_span: Optional[Var[Union[str, int, bool]]] = None
 
     # IDs of the headers associated with this header cell
-    headers: Var[Union[str, int, bool]]
+    headers: Optional[Var[Union[str, int, bool]]] = None
 
     # Number of rows a header cell should span
-    row_span: Var[Union[str, int, bool]]
+    row_span: Optional[Var[Union[str, int, bool]]] = None
 
     # Scope of the header cell (row, col, rowgroup, colgroup)
-    scope: Var[Union[str, int, bool]]
+    scope: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Thead(BaseHTML):
@@ -114,7 +114,7 @@ class Thead(BaseHTML):
     tag = "thead"
 
     # Alignment of the content within the table header
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Tr(BaseHTML):
@@ -123,4 +123,4 @@ class Tr(BaseHTML):
     tag = "tr"
 
     # Alignment of the content within the table row
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/typography.py b/reflex/components/el/elements/typography.py
index f8e3769fa12..61766004195 100644
--- a/reflex/components/el/elements/typography.py
+++ b/reflex/components/el/elements/typography.py
@@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union
 
 from reflex.vars import Var as Var
 
@@ -12,7 +12,7 @@ class Blockquote(BaseHTML):
     tag = "blockquote"
 
     # Define the title of a work.
-    cite: Var[Union[str, int, bool]]
+    cite: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Dd(BaseHTML):
@@ -51,7 +51,7 @@ class Hr(BaseHTML):
     tag = "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]]
+    align: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Li(BaseHTML):
@@ -66,7 +66,7 @@ class Menu(BaseHTML):
     tag = "menu"
 
     # Specifies that the menu element is a context menu.
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Ol(BaseHTML):
@@ -75,13 +75,13 @@ class Ol(BaseHTML):
     tag = "ol"
 
     # Reverses the order of the list.
-    reversed: Var[Union[str, int, bool]]
+    reversed: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the start value of the first list item in an ordered list.
-    start: Var[Union[str, int, bool]]
+    start: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the kind of marker to use in the list (letters or numbers).
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None
 
 
 class P(BaseHTML):
@@ -108,10 +108,10 @@ class Ins(BaseHTML):
     tag = "ins"
 
     # Specifies the URL of the document that explains the reason why the text was inserted/changed.
-    cite: Var[Union[str, int, bool]]
+    cite: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the date and time of when the text was inserted/changed.
-    date_time: Var[Union[str, int, bool]]
+    date_time: Optional[Var[Union[str, int, bool]]] = None
 
 
 class Del(BaseHTML):
@@ -120,7 +120,7 @@ class Del(BaseHTML):
     tag = "del"
 
     # Specifies the URL of the document that explains the reason why the text was deleted.
-    cite: Var[Union[str, int, bool]]
+    cite: Optional[Var[Union[str, int, bool]]] = None
 
     # Specifies the date and time of when the text was deleted.
-    date_time: Var[Union[str, int, bool]]
+    date_time: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/gridjs/datatable.py b/reflex/components/gridjs/datatable.py
index 6c05dfd811d..1cbfeb72a83 100644
--- a/reflex/components/gridjs/datatable.py
+++ b/reflex/components/gridjs/datatable.py
@@ -1,8 +1,7 @@
 """Table components."""
-
 from __future__ import annotations
 
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union
 
 from reflex.components.component import Component
 from reflex.components.tags import Tag
@@ -31,19 +30,19 @@ class DataTable(Gridjs):
 
     # The list of columns to display. Required if data is a list and should not be provided
     # if the data field is a dataframe
-    columns: Var[List]
+    columns: Optional[Var[List]] = None
 
     # Enable a search bar.
-    search: Var[bool]
+    search: Optional[Var[bool]] = None
 
     # Enable sorting on columns.
-    sort: Var[bool]
+    sort: Optional[Var[bool]] = None
 
     # Enable resizable columns.
-    resizable: Var[bool]
+    resizable: Optional[Var[bool]] = None
 
     # Enable pagination.
-    pagination: Var[Union[bool, Dict]]
+    pagination: Optional[Var[Union[bool, Dict]]] = None
 
     @classmethod
     def create(cls, *children, **props):
diff --git a/reflex/components/moment/moment.py b/reflex/components/moment/moment.py
index 53e199c4e8a..65dcde23a67 100644
--- a/reflex/components/moment/moment.py
+++ b/reflex/components/moment/moment.py
@@ -1,5 +1,4 @@
 """Moment component for humanized date rendering."""
-
 from typing import Any, Dict, List, Optional
 
 from reflex.base import Base
@@ -31,64 +30,64 @@ class Moment(NoSSRComponent):
     lib_dependencies: List[str] = ["moment"]
 
     # How often the date update (how often time update / 0 to disable).
-    interval: Var[int]
+    interval: Optional[Var[int]] = None
 
     # Formats the date according to the given format string.
-    format: Var[str]
+    format: Optional[Var[str]] = None
 
     # When formatting duration time, the largest-magnitude tokens are automatically trimmed when they have no value.
-    trim: Var[bool]
+    trim: Optional[Var[bool]] = None
 
     #  Use the parse attribute to tell moment how to parse the given date when non-standard.
-    parse: Var[str]
+    parse: Optional[Var[str]] = None
 
     # Add a delta to the base date (keys are "years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds")
-    add: Var[MomentDelta]
+    add: Optional[Var[MomentDelta]] = None
 
     # Subtract a delta to the base date (keys are "years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds")
-    subtract: Var[MomentDelta]
+    subtract: Optional[Var[MomentDelta]] = None
 
     # Displays the date as the time from now, e.g. "5 minutes ago".
-    from_now: Var[bool]
+    from_now: Optional[Var[bool]] = None
 
     # Setting fromNowDuring will display the relative time as with fromNow but just during its value in milliseconds, after that format will be used instead.
-    from_now_during: Var[int]
+    from_now_during: Optional[Var[int]] = None
 
     # Similar to fromNow, but gives the opposite interval.
-    to_now: Var[bool]
+    to_now: Optional[Var[bool]] = None
 
     # Adds a title attribute to the element with the complete date.
-    with_title: Var[bool]
+    with_title: Optional[Var[bool]] = None
 
     # How the title date is formatted when using the withTitle attribute.
-    title_format: Var[str]
+    title_format: Optional[Var[str]] = None
 
     # Show the different between this date and the rendered child.
-    diff: Var[str]
+    diff: Optional[Var[str]] = None
 
     # Display the diff as decimal.
-    decimal: Var[bool]
+    decimal: Optional[Var[bool]] = None
 
     # Display the diff in given unit.
-    unit: Var[str]
+    unit: Optional[Var[str]] = None
 
     # Shows the duration (elapsed time) between two dates. duration property should be behind date property time-wise.
-    duration: Var[str]
+    duration: Optional[Var[str]] = None
 
     # The date to display (also work if passed as children).
-    date: Var[str]
+    date: Optional[Var[str]] = None
 
     # Shows the duration (elapsed time) between now and the provided datetime.
-    duration_from_now: Var[bool]
+    duration_from_now: Optional[Var[bool]] = None
 
     # Tells Moment to parse the given date value as a unix timestamp.
-    unix: Var[bool]
+    unix: Optional[Var[bool]] = None
 
     # Outputs the result in local time.
-    local: Var[bool]
+    local: Optional[Var[bool]] = None
 
     # Display the date in the given timezone.
-    tz: Var[str]
+    tz: Optional[Var[str]] = None
 
     def _get_imports(self) -> imports.ImportDict:
         merged_imports = super()._get_imports()
diff --git a/reflex/components/next/image.py b/reflex/components/next/image.py
index 10556d5ad1b..ef99217b1cc 100644
--- a/reflex/components/next/image.py
+++ b/reflex/components/next/image.py
@@ -1,5 +1,4 @@
 """Image component from next/image."""
-
 from typing import Any, Dict, Literal, Optional, Union
 
 from reflex.utils import types
@@ -16,43 +15,43 @@ class Image(NextComponent):
     is_default = True
 
     # This can be either an absolute external URL, or an internal path
-    src: Var[Any]
+    src: Optional[Var[Any]] = None
 
     # Represents the rendered width in pixels, so it will affect how large the image appears.
-    width: Var[Any]
+    width: Optional[Var[Any]] = None
 
     # Represents the rendered height in pixels, so it will affect how large the image appears.
-    height: Var[Any]
+    height: Optional[Var[Any]] = None
 
     # Used to describe the image for screen readers and search engines.
-    alt: Var[str]
+    alt: Optional[Var[str]] = None
 
     # A custom function used to resolve image URLs.
-    loader: Var[Any]
+    loader: Optional[Var[Any]] = None
 
     # A boolean that causes the image to fill the parent element, which is useful when the width and height are unknown. Default to True
-    fill: Var[bool]
+    fill: Optional[Var[bool]] = None
 
     # A string, similar to a media query, that provides information about how wide the image will be at different breakpoints.
-    sizes: Var[str]
+    sizes: Optional[Var[str]] = None
 
     # The quality of the optimized image, an integer between 1 and 100, where 100 is the best quality and therefore largest file size. Defaults to 75.
-    quality: Var[int]
+    quality: Optional[Var[int]] = None
 
     # When true, the image will be considered high priority and preload. Lazy loading is automatically disabled for images using priority.
-    priority: Var[bool]
+    priority: Optional[Var[bool]] = None
 
     # A placeholder to use while the image is loading. Possible values are blur, empty, or data:image/.... Defaults to empty.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # Allows passing CSS styles to the underlying image element.
-    # style: Var[Any]
+    # style: Optional[Var[Any]] = None
 
     # The loading behavior of the image. Defaults to lazy. Can hurt performance, recommended to use `priority` instead.
-    loading: Var[Literal["lazy", "eager"]]
+    loading: Optional[Var[Literal["lazy", "eager"]]] = None
 
     # A Data URL to be used as a placeholder image before the src image successfully loads. Only takes effect when combined with placeholder="blur".
-    blurDataURL: Var[str]
+    blurDataURL: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """The event triggers of the component.
diff --git a/reflex/components/next/video.py b/reflex/components/next/video.py
index ae6007671c6..faa79e6253a 100644
--- a/reflex/components/next/video.py
+++ b/reflex/components/next/video.py
@@ -1,5 +1,4 @@
 """Wrapping of the next-video component."""
-
 from typing import Optional
 
 from reflex.components.component import Component
@@ -15,7 +14,7 @@ class Video(NextComponent):
     library = "next-video"
     is_default = True
     # the URL
-    src: Var[str]
+    src: Optional[Var[str]] = None
 
     as_: Optional[Component]
 
diff --git a/reflex/components/plotly/plotly.py b/reflex/components/plotly/plotly.py
index 7a0dd835f6c..80a07ac6239 100644
--- a/reflex/components/plotly/plotly.py
+++ b/reflex/components/plotly/plotly.py
@@ -1,6 +1,5 @@
 """Component for displaying a plotly graph."""
-
-from typing import Any, Dict, List
+from typing import Any, Dict, List, Optional
 
 from reflex.components.component import NoSSRComponent
 from reflex.vars import Var
@@ -27,19 +26,19 @@ class Plotly(PlotlyLib):
     is_default = True
 
     # The figure to display. This can be a plotly figure or a plotly data json.
-    data: Var[Figure]
+    data: Optional[Var[Figure]] = None
 
     # The layout of the graph.
-    layout: Var[Dict]
+    layout: Optional[Var[Dict]] = None
 
     # The config of the graph.
-    config: Var[Dict]
+    config: Optional[Var[Dict]] = None
 
     # The width of the graph.
-    width: Var[str]
+    width: Optional[Var[str]] = None
 
     # The height of the graph.
-    height: Var[str]
+    height: Optional[Var[str]] = None
 
     # If true, the graph will resize when the window is resized.
-    use_resize_handler: Var[bool]
+    use_resize_handler: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
index 2cf37c34fee..ecb4e410713 100644
--- a/reflex/components/radix/primitives/accordion.py
+++ b/reflex/components/radix/primitives/accordion.py
@@ -1,5 +1,4 @@
 """Radix accordion components."""
-
 from __future__ import annotations
 
 from typing import Any, Dict, List, Literal, Optional, Union
@@ -311,25 +310,25 @@ class AccordionRoot(AccordionComponent):
     alias = "RadixAccordionRoot"
 
     # The type of accordion (single or multiple).
-    type: Var[LiteralAccordionType]
+    type: Optional[Var[LiteralAccordionType]] = None
 
     # The value of the item to expand.
-    value: Var[Optional[Union[str, List[str]]]]
+    value: Optional[Var[Optional[Union[str, List[str]]]]] = None
 
     # The default value of the item to expand.
-    default_value: Var[Optional[Union[str, List[str]]]]
+    default_value: Optional[Var[Optional[Union[str, List[str]]]]] = None
 
     # Whether or not the accordion is collapsible.
-    collapsible: Var[bool]
+    collapsible: Optional[Var[bool]] = None
 
     # Whether or not the accordion is disabled.
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # The reading direction of the accordion when applicable.
-    dir: Var[LiteralAccordionDir]
+    dir: Optional[Var[LiteralAccordionDir]] = None
 
     # The orientation of the accordion.
-    orientation: Var[LiteralAccordionOrientation]
+    orientation: Optional[Var[LiteralAccordionOrientation]] = None
 
     # The variant of the accordion.
     variant: Var[LiteralAccordionRootVariant] = "classic"  # type: ignore
@@ -475,10 +474,10 @@ class AccordionItem(AccordionComponent):
     alias = "RadixAccordionItem"
 
     # A unique identifier for the item.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # When true, prevents the user from interacting with the item.
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     _valid_children: List[str] = [
         "AccordionHeader",
diff --git a/reflex/components/radix/primitives/base.py b/reflex/components/radix/primitives/base.py
index bd1690c3bef..f096f9ace19 100644
--- a/reflex/components/radix/primitives/base.py
+++ b/reflex/components/radix/primitives/base.py
@@ -1,5 +1,5 @@
 """The base component for Radix primitives."""
-from typing import List
+from typing import List, Optional
 
 from reflex.components.component import Component
 from reflex.components.tags.tag import Tag
@@ -11,7 +11,7 @@ class RadixPrimitiveComponent(Component):
     """Basic component for radix Primitives."""
 
     # Change the default rendered element for the one passed as a child.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     lib_dependencies: List[str] = ["@emotion/react@^11.11.1"]
 
diff --git a/reflex/components/radix/primitives/drawer.py b/reflex/components/radix/primitives/drawer.py
index a149a434f55..96411c21a95 100644
--- a/reflex/components/radix/primitives/drawer.py
+++ b/reflex/components/radix/primitives/drawer.py
@@ -32,31 +32,31 @@ class DrawerRoot(DrawerComponent):
     alias = "Vaul" + tag
 
     # Whether the drawer is open or not.
-    open: Var[bool]
+    open: Optional[Var[bool]] = None
 
     # Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
-    should_scale_background: Var[bool]
+    should_scale_background: Optional[Var[bool]] = None
 
     # Number between 0 and 1 that determines when the drawer should be closed.
-    close_threshold: Var[float]
+    close_threshold: Optional[Var[float]] = None
 
     # Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
     snap_points: Optional[List[Union[str, float]]]
 
     # Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
-    fade_from_index: Var[int]
+    fade_from_index: Optional[Var[int]] = None
 
     # Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
-    scroll_lock_timeout: Var[int]
+    scroll_lock_timeout: Optional[Var[int]] = None
 
     # When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
-    modal: Var[bool]
+    modal: Optional[Var[bool]] = None
 
     # Direction of the drawer. Defaults to `"bottom"`
-    direction: Var[LiteralDirectionType]
+    direction: Optional[Var[LiteralDirectionType]] = None
 
     # When `True`, it prevents scroll restoration. Defaults to `True`.
-    preventScrollRestoration: Var[bool]
+    preventScrollRestoration: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.
diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py
index d6b57799a89..7ff63bc818e 100644
--- a/reflex/components/radix/primitives/form.py
+++ b/reflex/components/radix/primitives/form.py
@@ -1,9 +1,8 @@
 """Radix form component."""
-
 from __future__ import annotations
 
 from hashlib import md5
-from typing import Any, Dict, Iterator, Literal
+from typing import Any, Dict, Iterator, Literal, Optional
 
 from jinja2 import Environment
 
@@ -54,7 +53,7 @@ class FormRoot(FormComponent):
     reset_on_submit: Var[bool] = False  # type: ignore
 
     # The name used to make this form's submit handler function unique.
-    handle_submit_unique_name: Var[str]
+    handle_submit_unique_name: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Event triggers for radix form root.
@@ -173,10 +172,10 @@ class FormField(FormComponent):
     alias = "RadixFormField"
 
     # The name of the form field, that is passed down to the control and used to match with validation messages.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # Flag to mark the form field as invalid, for server side validation.
-    server_invalid: Var[bool]
+    server_invalid: Optional[Var[bool]] = None
 
     def _apply_theme(self, theme: Component):
         return {
@@ -258,13 +257,13 @@ class FormMessage(FormComponent):
     alias = "RadixFormMessage"
 
     # Used to target a specific field by name when rendering outside of a Field part.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # Used to indicate on which condition the message should be visible.
-    match: Var[LiteralMatcher]
+    match: Optional[Var[LiteralMatcher]] = None
 
     # Forces the message to be shown. This is useful when using server-side validation.
-    force_match: Var[bool]
+    force_match: Optional[Var[bool]] = None
 
     def _apply_theme(self, theme: Component):
         return {
diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py
index 08fa14b052c..827e3130420 100644
--- a/reflex/components/radix/primitives/progress.py
+++ b/reflex/components/radix/primitives/progress.py
@@ -1,5 +1,4 @@
 """Progress."""
-
 from __future__ import annotations
 
 from typing import Optional
@@ -26,7 +25,7 @@ class ProgressRoot(ProgressComponent):
     alias = "RadixProgressRoot"
 
     # Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = None
 
     def _apply_theme(self, theme: Component):
         if self.radius is not None:
@@ -57,13 +56,13 @@ class ProgressIndicator(ProgressComponent):
     alias = "RadixProgressIndicator"
 
     # The current progress value.
-    value: Var[Optional[int]]
+    value: Optional[Var[Optional[int]]] = None
 
     # The maximum progress value.
-    max: Var[Optional[int]]
+    max: Optional[Var[Optional[int]]] = None
 
     # The color scheme of the progress indicator.
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     def _apply_theme(self, theme: Component):
         if self.color_scheme is not None:
@@ -92,13 +91,13 @@ class Progress(ProgressRoot):
     """The high-level Progress component."""
 
     # Override theme color for progress bar indicator
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # The current progress value.
-    value: Var[Optional[int]]
+    value: Optional[Var[Optional[int]]] = None
 
     # The maximum progress value.
-    max: Var[Optional[int]]
+    max: Optional[Var[Optional[int]]] = None
 
     @classmethod
     def create(cls, **props) -> Component:
diff --git a/reflex/components/radix/primitives/slider.py b/reflex/components/radix/primitives/slider.py
index 94560c3f020..185aa0d380d 100644
--- a/reflex/components/radix/primitives/slider.py
+++ b/reflex/components/radix/primitives/slider.py
@@ -1,8 +1,7 @@
 """Radix slider components."""
-
 from __future__ import annotations
 
-from typing import Any, Dict, List, Literal
+from typing import Any, Dict, List, Literal, Optional
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
@@ -25,27 +24,27 @@ class SliderRoot(SliderComponent):
     tag = "Root"
     alias = "RadixSliderRoot"
 
-    default_value: Var[List[int]]
+    default_value: Optional[Var[List[int]]] = None
 
-    value: Var[List[int]]
+    value: Optional[Var[List[int]]] = None
 
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
-    orientation: Var[LiteralSliderOrientation]
+    orientation: Optional[Var[LiteralSliderOrientation]] = None
 
-    dir: Var[LiteralSliderDir]
+    dir: Optional[Var[LiteralSliderDir]] = None
 
-    inverted: Var[bool]
+    inverted: Optional[Var[bool]] = None
 
-    min: Var[int]
+    min: Optional[Var[int]] = None
 
-    max: Var[int]
+    max: Optional[Var[int]] = None
 
-    step: Var[int]
+    step: Optional[Var[int]] = None
 
-    min_steps_between_thumbs: Var[int]
+    min_steps_between_thumbs: Optional[Var[int]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Event triggers for radix slider primitive.
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index daa437195c1..95f21325686 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -1,5 +1,4 @@
 """Base classes for radix-themes components."""
-
 from __future__ import annotations
 
 from typing import Any, Dict, Literal, Optional, Union
@@ -52,25 +51,25 @@ class CommonMarginProps(Component):
     """Many radix-themes elements accept shorthand margin props."""
 
     # Margin: "0" - "9"
-    m: Var[LiteralSpacing]
+    m: Optional[Var[LiteralSpacing]] = None
 
     # Margin horizontal: "0" - "9"
-    mx: Var[LiteralSpacing]
+    mx: Optional[Var[LiteralSpacing]] = None
 
     # Margin vertical: "0" - "9"
-    my: Var[LiteralSpacing]
+    my: Optional[Var[LiteralSpacing]] = None
 
     # Margin top: "0" - "9"
-    mt: Var[LiteralSpacing]
+    mt: Optional[Var[LiteralSpacing]] = None
 
     # Margin right: "0" - "9"
-    mr: Var[LiteralSpacing]
+    mr: Optional[Var[LiteralSpacing]] = None
 
     # Margin bottom: "0" - "9"
-    mb: Var[LiteralSpacing]
+    mb: Optional[Var[LiteralSpacing]] = None
 
     # Margin left: "0" - "9"
-    ml: Var[LiteralSpacing]
+    ml: Optional[Var[LiteralSpacing]] = None
 
 
 class RadixThemesComponent(Component):
@@ -215,7 +214,7 @@ class ThemePanel(RadixThemesComponent):
     tag = "ThemePanel"
 
     # Whether the panel is open. Defaults to False.
-    default_open: Var[bool]
+    default_open: Optional[Var[bool]] = None
 
 
 class RadixThemesColorModeProvider(Component):
diff --git a/reflex/components/radix/themes/components/alert_dialog.py b/reflex/components/radix/themes/components/alert_dialog.py
index 81b8bb0af84..f257ae006f0 100644
--- a/reflex/components/radix/themes/components/alert_dialog.py
+++ b/reflex/components/radix/themes/components/alert_dialog.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, Literal
+from typing import Any, Dict, Literal, Optional
 
 from reflex import el
 from reflex.components.component import ComponentNamespace
@@ -17,7 +17,7 @@ class AlertDialogRoot(RadixThemesComponent):
     tag = "AlertDialog.Root"
 
     # The controlled open state of the dialog.
-    open: Var[bool]
+    open: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -43,10 +43,10 @@ class AlertDialogContent(el.Div, RadixThemesComponent):
     tag = "AlertDialog.Content"
 
     # The size of the content.
-    size: Var[LiteralContentSize]
+    size: Optional[Var[LiteralContentSize]] = None
 
     # Whether to force mount the content on open.
-    force_mount: Var[bool]
+    force_mount: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
diff --git a/reflex/components/radix/themes/components/aspect_ratio.py b/reflex/components/radix/themes/components/aspect_ratio.py
index 1b6847a189a..1c8b000a1ae 100644
--- a/reflex/components/radix/themes/components/aspect_ratio.py
+++ b/reflex/components/radix/themes/components/aspect_ratio.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Union
+from typing import Optional, Union
 
 from reflex.vars import Var
 
@@ -12,7 +12,7 @@ class AspectRatio(RadixThemesComponent):
     tag = "AspectRatio"
 
     # The ratio of the width to the height of the element
-    ratio: Var[Union[float, int]]
+    ratio: Optional[Var[Union[float, int]]] = None
 
 
 aspect_ratio = AspectRatio.create
diff --git a/reflex/components/radix/themes/components/avatar.py b/reflex/components/radix/themes/components/avatar.py
index 0b64831c349..41eb58a1a45 100644
--- a/reflex/components/radix/themes/components/avatar.py
+++ b/reflex/components/radix/themes/components/avatar.py
@@ -1,6 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex.vars import Var
 
@@ -19,25 +18,25 @@ class Avatar(RadixThemesComponent):
     tag = "Avatar"
 
     # The variant of the avatar
-    variant: Var[Literal["solid", "soft"]]
+    variant: Optional[Var[Literal["solid", "soft"]]] = None
 
     # The size of the avatar: "1" - "9"
-    size: Var[LiteralSize]
+    size: Optional[Var[LiteralSize]] = None
 
     # Color theme of the avatar
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the avatar with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # Override theme radius for avatar: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = None
 
     # The src of the avatar image
-    src: Var[str]
+    src: Optional[Var[str]] = None
 
     # The rendered fallback text
-    fallback: Var[str]
+    fallback: Optional[Var[str]] = None
 
 
 avatar = Avatar.create
diff --git a/reflex/components/radix/themes/components/badge.py b/reflex/components/radix/themes/components/badge.py
index f279ee0cf6a..2bdb5d18ccd 100644
--- a/reflex/components/radix/themes/components/badge.py
+++ b/reflex/components/radix/themes/components/badge.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex import el
 from reflex.vars import Var
@@ -17,19 +17,19 @@ class Badge(el.Span, RadixThemesComponent):
     tag = "Badge"
 
     # The variant of the badge
-    variant: Var[Literal["solid", "soft", "surface", "outline"]]
+    variant: Optional[Var[Literal["solid", "soft", "surface", "outline"]]] = None
 
     # The size of the badge
-    size: Var[Literal["1", "2"]]
+    size: Optional[Var[Literal["1", "2"]]] = None
 
     # Color theme of the badge
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the badge with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # Override theme radius for badge: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = None
 
 
 badge = Badge.create
diff --git a/reflex/components/radix/themes/components/button.py b/reflex/components/radix/themes/components/button.py
index a9d681f8e1c..2ed920ffb2f 100644
--- a/reflex/components/radix/themes/components/button.py
+++ b/reflex/components/radix/themes/components/button.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex import el
 from reflex.vars import Var
@@ -20,22 +20,22 @@ class Button(el.Button, RadixThemesComponent):
     tag = "Button"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Button size "1" - "4"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None
 
     # Variant of button: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[LiteralVariant]
+    variant: Optional[Var[LiteralVariant]] = None
 
     # Override theme color for button
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the button with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = None
 
 
 button = Button.create
diff --git a/reflex/components/radix/themes/components/callout.py b/reflex/components/radix/themes/components/callout.py
index 5eaf1cac093..b3eb71e3173 100644
--- a/reflex/components/radix/themes/components/callout.py
+++ b/reflex/components/radix/themes/components/callout.py
@@ -1,6 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-
-from typing import Literal, Union
+from typing import Literal, Optional, Union
 
 import reflex as rx
 from reflex import el
@@ -22,19 +21,19 @@ class CalloutRoot(el.Div, RadixThemesComponent):
     tag = "Callout.Root"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Size "1" - "3"
-    size: Var[Literal["1", "2", "3"]]
+    size: Optional[Var[Literal["1", "2", "3"]]] = None
 
     # Variant of button: "soft" | "surface" | "outline"
-    variant: Var[CalloutVariant]
+    variant: Optional[Var[CalloutVariant]] = None
 
     # Override theme color for button
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the button with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
 
 class CalloutIcon(el.Div, RadixThemesComponent):
@@ -53,10 +52,10 @@ class Callout(CalloutRoot):
     """A short message to attract user's attention."""
 
     # The text of the callout.
-    text: Var[str]
+    text: Optional[Var[str]] = None
 
     # The icon of the callout.
-    icon: Var[str]
+    icon: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, text: Union[str, Var[str]], **props) -> Component:
diff --git a/reflex/components/radix/themes/components/card.py b/reflex/components/radix/themes/components/card.py
index ab4cf2b88f1..0d70baaabea 100644
--- a/reflex/components/radix/themes/components/card.py
+++ b/reflex/components/radix/themes/components/card.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex import el
 from reflex.vars import Var
@@ -15,13 +15,13 @@ class Card(el.Div, RadixThemesComponent):
     tag = "Card"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Card size: "1" - "5"
-    size: Var[Literal["1", "2", "3", "4", "5"]]
+    size: Optional[Var[Literal["1", "2", "3", "4", "5"]]] = None
 
     # Variant of Card: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[Literal["surface", "classic", "ghost"]]
+    variant: Optional[Var[Literal["surface", "classic", "ghost"]]] = None
 
 
 card = Card.create
diff --git a/reflex/components/radix/themes/components/checkbox.py b/reflex/components/radix/themes/components/checkbox.py
index 250a1da4c78..7dbd05882ee 100644
--- a/reflex/components/radix/themes/components/checkbox.py
+++ b/reflex/components/radix/themes/components/checkbox.py
@@ -1,6 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-
-from typing import Any, Dict, Literal
+from typing import Any, Dict, Literal, Optional
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.themes.layout.flex import Flex
@@ -24,37 +23,37 @@ class Checkbox(RadixThemesComponent):
     tag = "Checkbox"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Checkbox size "1" - "3"
-    size: Var[LiteralCheckboxSize]
+    size: Optional[Var[LiteralCheckboxSize]] = None
 
     # Variant of checkbox: "classic" | "surface" | "soft"
-    variant: Var[LiteralCheckboxVariant]
+    variant: Optional[Var[LiteralCheckboxVariant]] = None
 
     # Override theme color for checkbox
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the checkbox with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # Whether the checkbox is checked by default
-    default_checked: Var[bool]
+    default_checked: Optional[Var[bool]] = None
 
     # Whether the checkbox is checked
-    checked: Var[bool]
+    checked: Optional[Var[bool]] = None
 
     # Whether the checkbox is disabled
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # Whether the checkbox is required
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
     # The name of the checkbox control when submitting the form.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # The value of the checkbox control when submitting the form.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # Props to rename
     _rename_props = {"onChange": "onCheckedChange"}
@@ -77,43 +76,43 @@ class HighLevelCheckbox(RadixThemesComponent):
     tag = "Checkbox"
 
     # The text label for the checkbox.
-    text: Var[str]
+    text: Optional[Var[str]] = None
 
     # The gap between the checkbox and the label.
-    spacing: Var[LiteralSpacing]
+    spacing: Optional[Var[LiteralSpacing]] = None
 
     # The size of the checkbox "1" - "3".
-    size: Var[LiteralCheckboxSize]
+    size: Optional[Var[LiteralCheckboxSize]] = None
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Variant of checkbox: "classic" | "surface" | "soft"
-    variant: Var[LiteralCheckboxVariant]
+    variant: Optional[Var[LiteralCheckboxVariant]] = None
 
     # Override theme color for checkbox
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the checkbox with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # Whether the checkbox is checked by default
-    default_checked: Var[bool]
+    default_checked: Optional[Var[bool]] = None
 
     # Whether the checkbox is checked
-    checked: Var[bool]
+    checked: Optional[Var[bool]] = None
 
     # Whether the checkbox is disabled
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # Whether the checkbox is required
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
     # The name of the checkbox control when submitting the form.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # The value of the checkbox control when submitting the form.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # Props to rename
     _rename_props = {"onChange": "onCheckedChange"}
diff --git a/reflex/components/radix/themes/components/context_menu.py b/reflex/components/radix/themes/components/context_menu.py
index 7631d797084..c1719c319fd 100644
--- a/reflex/components/radix/themes/components/context_menu.py
+++ b/reflex/components/radix/themes/components/context_menu.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, List, Literal
+from typing import Any, Dict, List, Literal, Optional
 
 from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
@@ -17,7 +17,7 @@ class ContextMenuRoot(RadixThemesComponent):
     tag = "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]
+    modal: Optional[Var[bool]] = None
 
     _invalid_children: List[str] = ["ContextMenuItem"]
 
@@ -39,7 +39,7 @@ class ContextMenuTrigger(RadixThemesComponent):
     tag = "ContextMenu.Trigger"
 
     # Whether the trigger is disabled
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     _valid_parents: List[str] = ["ContextMenuRoot"]
 
@@ -52,22 +52,22 @@ class ContextMenuContent(RadixThemesComponent):
     tag = "ContextMenu.Content"
 
     # Button size "1" - "4"
-    size: Var[Literal["1", "2"]]
+    size: Optional[Var[Literal["1", "2"]]] = None
 
     # Variant of button: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[Literal["solid", "soft"]]
+    variant: Optional[Var[Literal["solid", "soft"]]] = None
 
     # Override theme color for button
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the button with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # The vertical distance in pixels from the anchor.
-    align_offset: Var[int]
+    align_offset: Optional[Var[int]] = None
 
     # When true, overrides the side and aligns preferences to prevent collisions with boundary edges.
-    avoid_collisions: Var[bool]
+    avoid_collisions: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -97,7 +97,7 @@ class ContextMenuSubTrigger(RadixThemesComponent):
     tag = "ContextMenu.SubTrigger"
 
     # Whether the trigger is disabled
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     _valid_parents: List[str] = ["ContextMenuContent", "ContextMenuSub"]
 
@@ -108,7 +108,7 @@ class ContextMenuSubContent(RadixThemesComponent):
     tag = "ContextMenu.SubContent"
 
     # When true, keyboard navigation will loop from last item to first, and vice versa.
-    loop: Var[bool]
+    loop: Optional[Var[bool]] = None
 
     _valid_parents: List[str] = ["ContextMenuSub"]
 
@@ -133,10 +133,10 @@ class ContextMenuItem(RadixThemesComponent):
     tag = "ContextMenu.Item"
 
     # Override theme color for button
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Shortcut to render a menu item as a link
-    shortcut: Var[str]
+    shortcut: Optional[Var[str]] = None
 
     _valid_parents: List[str] = ["ContextMenuContent", "ContextMenuSubContent"]
 
diff --git a/reflex/components/radix/themes/components/dialog.py b/reflex/components/radix/themes/components/dialog.py
index ebc80b5a385..5a664758fa2 100644
--- a/reflex/components/radix/themes/components/dialog.py
+++ b/reflex/components/radix/themes/components/dialog.py
@@ -1,6 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-
-from typing import Any, Dict, Literal
+from typing import Any, Dict, Literal, Optional
 
 from reflex import el
 from reflex.components.component import ComponentNamespace
@@ -18,7 +17,7 @@ class DialogRoot(RadixThemesComponent):
     tag = "Dialog.Root"
 
     # The controlled open state of the dialog.
-    open: Var[bool]
+    open: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -50,7 +49,7 @@ class DialogContent(el.Div, RadixThemesComponent):
     tag = "Dialog.Content"
 
     # DialogContent size "1" - "4"
-    size: Var[Literal["1", "2", "3", "4"]]
+    size: Optional[Var[Literal["1", "2", "3", "4"]]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
diff --git a/reflex/components/radix/themes/components/dropdown_menu.py b/reflex/components/radix/themes/components/dropdown_menu.py
index 013684975f1..ae5a9c16057 100644
--- a/reflex/components/radix/themes/components/dropdown_menu.py
+++ b/reflex/components/radix/themes/components/dropdown_menu.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, List, Literal, Union
+from typing import Any, Dict, List, Literal, Optional, Union
 
 from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
@@ -33,16 +33,16 @@ class DropdownMenuRoot(RadixThemesComponent):
     tag = "DropdownMenu.Root"
 
     # The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
-    default_open: Var[bool]
+    default_open: Optional[Var[bool]] = None
 
     # The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
-    open: Var[bool]
+    open: Optional[Var[bool]] = None
 
     # The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers. Defaults to True.
-    modal: Var[bool]
+    modal: Optional[Var[bool]] = None
 
     # The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
-    dir: Var[LiteralDirType]
+    dir: Optional[Var[LiteralDirType]] = None
 
     _invalid_children: List[str] = ["DropdownMenuItem"]
 
@@ -64,7 +64,7 @@ class DropdownMenuTrigger(RadixThemesComponent):
     tag = "DropdownMenu.Trigger"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     _valid_parents: List[str] = ["DropdownMenuRoot"]
 
@@ -77,52 +77,52 @@ class DropdownMenuContent(RadixThemesComponent):
     tag = "DropdownMenu.Content"
 
     # Dropdown Menu Content size "1" - "2"
-    size: Var[LiteralSizeType]
+    size: Optional[Var[LiteralSizeType]] = None
 
     # Variant of Dropdown Menu Content: "solid" | "soft"
-    variant: Var[LiteralVariantType]
+    variant: Optional[Var[LiteralVariantType]] = None
 
     # Override theme color for Dropdown Menu Content
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Renders the Dropdown Menu Content in higher contrast
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
-    loop: Var[bool]
+    loop: Optional[Var[bool]] = None
 
     # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
-    force_mount: Var[bool]
+    force_mount: Optional[Var[bool]] = None
 
     # The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
-    side: Var[LiteralSideType]
+    side: Optional[Var[LiteralSideType]] = None
 
     # The distance in pixels from the trigger. Defaults to 0.
-    side_offset: Var[Union[float, int]]
+    side_offset: Optional[Var[Union[float, int]]] = None
 
     # The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
-    align: Var[LiteralAlignType]
+    align: Optional[Var[LiteralAlignType]] = None
 
     # An offset in pixels from the "start" or "end" alignment options.
-    align_offset: Var[Union[float, int]]
+    align_offset: Optional[Var[Union[float, int]]] = None
 
     # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
-    avoid_collisions: Var[bool]
+    avoid_collisions: Optional[Var[bool]] = None
 
     # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
-    collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
+    collision_padding: Optional[Var[Union[float, int, Dict[str, Union[float, int]]]]] = None
 
     # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
-    arrow_padding: Var[Union[float, int]]
+    arrow_padding: Optional[Var[Union[float, int]]] = None
 
     # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
-    sticky: Var[LiteralStickyType]
+    sticky: Optional[Var[LiteralStickyType]] = None
 
     # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
-    hide_when_detached: Var[bool]
+    hide_when_detached: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -146,13 +146,13 @@ class DropdownMenuSubTrigger(RadixThemesComponent):
     tag = "DropdownMenu.SubTrigger"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # When true, prevents the user from interacting with the item.
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
-    text_value: Var[str]
+    text_value: Optional[Var[str]] = None
 
     _valid_parents: List[str] = ["DropdownMenuContent", "DropdownMenuSub"]
 
@@ -163,10 +163,10 @@ class DropdownMenuSub(RadixThemesComponent):
     tag = "DropdownMenu.Sub"
 
     # The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
-    open: Var[bool]
+    open: Optional[Var[bool]] = None
 
     # The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
-    default_open: Var[bool]
+    default_open: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -186,34 +186,34 @@ class DropdownMenuSubContent(RadixThemesComponent):
     tag = "DropdownMenu.SubContent"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
-    loop: Var[bool]
+    loop: Optional[Var[bool]] = None
 
     # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
-    force_mount: Var[bool]
+    force_mount: Optional[Var[bool]] = None
 
     # The distance in pixels from the trigger. Defaults to 0.
-    side_offset: Var[Union[float, int]]
+    side_offset: Optional[Var[Union[float, int]]] = None
 
     # An offset in pixels from the "start" or "end" alignment options.
-    align_offset: Var[Union[float, int]]
+    align_offset: Optional[Var[Union[float, int]]] = None
 
     # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
-    avoid_collisions: Var[bool]
+    avoid_collisions: Optional[Var[bool]] = None
 
     # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
-    collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
+    collision_padding: Optional[Var[Union[float, int, Dict[str, Union[float, int]]]]] = None
 
     # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
-    arrow_padding: Var[Union[float, int]]
+    arrow_padding: Optional[Var[Union[float, int]]] = None
 
     # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
-    sticky: Var[LiteralStickyType]
+    sticky: Optional[Var[LiteralStickyType]] = None
 
     # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
-    hide_when_detached: Var[bool]
+    hide_when_detached: Optional[Var[bool]] = None
 
     _valid_parents: List[str] = ["DropdownMenuSub"]
 
@@ -238,19 +238,19 @@ class DropdownMenuItem(RadixThemesComponent):
     tag = "DropdownMenu.Item"
 
     # Override theme color for Dropdown Menu Item
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Shortcut to render a menu item as a link
-    shortcut: Var[str]
+    shortcut: Optional[Var[str]] = None
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # When true, prevents the user from interacting with the item.
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
-    text_value: Var[str]
+    text_value: Optional[Var[str]] = None
 
     _valid_parents: List[str] = ["DropdownMenuContent", "DropdownMenuSubContent"]
 
diff --git a/reflex/components/radix/themes/components/hover_card.py b/reflex/components/radix/themes/components/hover_card.py
index aee63930295..94ed6fd623a 100644
--- a/reflex/components/radix/themes/components/hover_card.py
+++ b/reflex/components/radix/themes/components/hover_card.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, Literal
+from typing import Any, Dict, Literal, Optional
 
 from reflex import el
 from reflex.components.component import ComponentNamespace
@@ -17,16 +17,16 @@ class HoverCardRoot(RadixThemesComponent):
     tag = "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]
+    default_open: Optional[Var[bool]] = None
 
     # The controlled open state of the hover card. Must be used in conjunction with onOpenChange.
-    open: Var[bool]
+    open: Optional[Var[bool]] = None
 
     # The duration from when the mouse enters the trigger until the hover card opens.
-    open_delay: Var[int]
+    open_delay: Optional[Var[int]] = None
 
     # The duration from when the mouse leaves the trigger until the hover card closes.
-    close_delay: Var[int]
+    close_delay: Optional[Var[int]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -52,16 +52,16 @@ class HoverCardContent(el.Div, RadixThemesComponent):
     tag = "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"]]
+    side: Optional[Var[Literal["top", "right", "bottom", "left"]]] = None
 
     # The distance in pixels from the trigger.
-    side_offset: Var[int]
+    side_offset: Optional[Var[int]] = None
 
     # The preferred alignment against the trigger. May change when collisions occur.
-    align: Var[Literal["start", "center", "end"]]
+    align: Optional[Var[Literal["start", "center", "end"]]] = None
 
     # Whether or not the hover card should avoid collisions with its trigger.
-    avoid_collisions: Var[bool]
+    avoid_collisions: Optional[Var[bool]] = None
 
 
 class HoverCard(ComponentNamespace):
diff --git a/reflex/components/radix/themes/components/icon_button.py b/reflex/components/radix/themes/components/icon_button.py
index 47dc1be86c4..d7a6a7402b9 100644
--- a/reflex/components/radix/themes/components/icon_button.py
+++ b/reflex/components/radix/themes/components/icon_button.py
@@ -1,6 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex import el
 from reflex.components.component import Component
@@ -25,22 +24,22 @@ class IconButton(el.Button, RadixThemesComponent):
     tag = "IconButton"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Button size "1" - "4"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None
 
     # Variant of button: "classic" | "solid" | "soft" | "surface" | "outline" | "ghost"
-    variant: Var[LiteralVariant]
+    variant: Optional[Var[LiteralVariant]] = None
 
     # Override theme color for button
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the button with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = 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 fcdafc6a042..59f22d71eab 100644
--- a/reflex/components/radix/themes/components/inset.py
+++ b/reflex/components/radix/themes/components/inset.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Literal, Union
+from typing import Literal, Optional, Union
 
 from reflex import el
 from reflex.vars import Var
@@ -17,31 +17,31 @@ class Inset(el.Div, RadixThemesComponent):
     tag = "Inset"
 
     # The side
-    side: Var[Literal["x", "y", "top", "bottom", "right", "left"]]
+    side: Optional[Var[Literal["x", "y", "top", "bottom", "right", "left"]]] = None
 
     # How to clip the element's content: "border-box" | "padding-box"
-    clip: Var[Literal["border-box", "padding-box"]]
+    clip: Optional[Var[Literal["border-box", "padding-box"]]] = None
 
     # Padding
-    p: Var[Union[int, str]]
+    p: Optional[Var[Union[int, str]]] = None
 
     # Padding on the x axis
-    px: Var[Union[int, str]]
+    px: Optional[Var[Union[int, str]]] = None
 
     # Padding on the y axis
-    py: Var[Union[int, str]]
+    py: Optional[Var[Union[int, str]]] = None
 
     # Padding on the top
-    pt: Var[Union[int, str]]
+    pt: Optional[Var[Union[int, str]]] = None
 
     # Padding on the right
-    pr: Var[Union[int, str]]
+    pr: Optional[Var[Union[int, str]]] = None
 
     # Padding on the bottom
-    pb: Var[Union[int, str]]
+    pb: Optional[Var[Union[int, str]]] = None
 
     # Padding on the left
-    pl: Var[Union[int, str]]
+    pl: Optional[Var[Union[int, str]]] = None
 
 
 inset = Inset.create
diff --git a/reflex/components/radix/themes/components/popover.py b/reflex/components/radix/themes/components/popover.py
index 97250fc0e62..cd5c048c8b4 100644
--- a/reflex/components/radix/themes/components/popover.py
+++ b/reflex/components/radix/themes/components/popover.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, Literal
+from typing import Any, Dict, Literal, Optional
 
 from reflex import el
 from reflex.components.component import ComponentNamespace
@@ -17,10 +17,10 @@ class PopoverRoot(RadixThemesComponent):
     tag = "Popover.Root"
 
     # The controlled open state of the popover.
-    open: Var[bool]
+    open: Optional[Var[bool]] = None
 
     # The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
-    modal: Var[bool]
+    modal: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -46,22 +46,22 @@ class PopoverContent(el.Div, RadixThemesComponent):
     tag = "Popover.Content"
 
     # Size of the button: "1" | "2" | "3" | "4"
-    size: Var[Literal["1", "2", "3", "4"]]
+    size: Optional[Var[Literal["1", "2", "3", "4"]]] = None
 
     # The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
-    side: Var[Literal["top", "right", "bottom", "left"]]
+    side: Optional[Var[Literal["top", "right", "bottom", "left"]]] = None
 
     # The distance in pixels from the anchor.
-    side_offset: Var[int]
+    side_offset: Optional[Var[int]] = None
 
     # The preferred alignment against the anchor. May change when collisions occur.
-    align: Var[Literal["start", "center", "end"]]
+    align: Optional[Var[Literal["start", "center", "end"]]] = None
 
     # The vertical distance in pixels from the anchor.
-    align_offset: Var[int]
+    align_offset: Optional[Var[int]] = None
 
     # When true, overrides the side andalign preferences to prevent collisions with boundary edges.
-    avoid_collisions: Var[bool]
+    avoid_collisions: Optional[Var[bool]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
diff --git a/reflex/components/radix/themes/components/radio_group.py b/reflex/components/radix/themes/components/radio_group.py
index 7ff901f3744..1f4175331bc 100644
--- a/reflex/components/radix/themes/components/radio_group.py
+++ b/reflex/components/radix/themes/components/radio_group.py
@@ -1,5 +1,4 @@
 """Interactive components provided by @radix-ui/themes."""
-
 from typing import Any, Dict, List, Literal, Optional, Union
 
 import reflex as rx
@@ -24,31 +23,31 @@ class RadioGroupRoot(RadixThemesComponent):
     tag = "RadioGroup.Root"
 
     # The size of the radio group: "1" | "2" | "3"
-    size: Var[Literal["1", "2", "3"]]
+    size: Optional[Var[Literal["1", "2", "3"]]] = None
 
     # The variant of the radio group
-    variant: Var[Literal["classic", "surface", "soft"]]
+    variant: Optional[Var[Literal["classic", "surface", "soft"]]] = None
 
     # The color of the radio group
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the radio group with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # The controlled value of the radio item to check. Should be used in conjunction with on_change.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The initial value of checked radio item. Should be used in conjunction with on_change.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # Whether the radio group is disabled
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # The name of the group. Submitted with its owning form as part of a name/value pair.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # Whether the radio group is required
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
     # Props to rename
     _rename_props = {"onChange": "onValueChange"}
@@ -71,23 +70,23 @@ class RadioGroupItem(RadixThemesComponent):
     tag = "RadioGroup.Item"
 
     # The value of the radio item to check. Should be used in conjunction with on_change.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # When true, prevents the user from interacting with the radio item.
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # When true, indicates that the user must check the radio item before the owning form can be submitted.
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
 
 class HighLevelRadioGroup(RadixThemesComponent):
     """High level wrapper for the RadioGroup component."""
 
     # The items of the radio group.
-    items: Var[List[str]]
+    items: Optional[Var[List[str]]] = None
 
     # The direction of the radio group.
-    direction: Var[LiteralFlexDirection]
+    direction: Optional[Var[LiteralFlexDirection]] = None
 
     # The gap between the items of the radio group.
     spacing: Var[LiteralSpacing] = Var.create_safe("2")
@@ -96,28 +95,28 @@ class HighLevelRadioGroup(RadixThemesComponent):
     size: Var[Literal["1", "2", "3"]] = Var.create_safe("2")
 
     # The variant of the radio group
-    variant: Var[Literal["classic", "surface", "soft"]]
+    variant: Optional[Var[Literal["classic", "surface", "soft"]]] = None
 
     # The color of the radio group
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the radio group with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # The controlled value of the radio item to check. Should be used in conjunction with on_change.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The initial value of checked radio item. Should be used in conjunction with on_change.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # Whether the radio group is disabled
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # The name of the group. Submitted with its owning form as part of a name/value pair.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # Whether the radio group is required
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
     # Props to rename
     _rename_props = {"onChange": "onValueChange"}
diff --git a/reflex/components/radix/themes/components/scroll_area.py b/reflex/components/radix/themes/components/scroll_area.py
index b7b79286b13..35831b7e222 100644
--- a/reflex/components/radix/themes/components/scroll_area.py
+++ b/reflex/components/radix/themes/components/scroll_area.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex.vars import Var
 
@@ -14,13 +14,13 @@ class ScrollArea(RadixThemesComponent):
     tag = "ScrollArea"
 
     # The alignment of the scroll area
-    scrollbars: Var[Literal["vertical", "horizontal", "both"]]
+    scrollbars: Optional[Var[Literal["vertical", "horizontal", "both"]]] = None
 
     # Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. "auto" | "always" | "scroll" | "hover"
-    type: Var[Literal["auto", "always", "scroll", "hover"]]
+    type: Optional[Var[Literal["auto", "always", "scroll", "hover"]]] = None
 
     # If type is set to either "scroll" or "hover", this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.
-    scroll_hide_delay: Var[int]
+    scroll_hide_delay: Optional[Var[int]] = None
 
 
 scroll_area = ScrollArea.create
diff --git a/reflex/components/radix/themes/components/select.py b/reflex/components/radix/themes/components/select.py
index eb597f4fc57..b5c8b8b2838 100644
--- a/reflex/components/radix/themes/components/select.py
+++ b/reflex/components/radix/themes/components/select.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, List, Literal, Union
+from typing import Any, Dict, List, Literal, Optional, Union
 
 import reflex as rx
 from reflex.components.component import Component, ComponentNamespace
@@ -19,28 +19,28 @@ class SelectRoot(RadixThemesComponent):
     tag = "Select.Root"
 
     # The size of the select: "1" | "2" | "3"
-    size: Var[Literal["1", "2", "3"]]
+    size: Optional[Var[Literal["1", "2", "3"]]] = None
 
     # The value of the select when initially rendered. Use when you do not need to control the state of the select.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # The controlled value of the select. Should be used in conjunction with on_change.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The open state of the select when it is initially rendered. Use when you do not need to control its open state.
-    default_open: Var[bool]
+    default_open: Optional[Var[bool]] = None
 
     # The controlled open state of the select. Must be used in conjunction with on_open_change.
-    open: Var[bool]
+    open: Optional[Var[bool]] = None
 
     # The name of the select control when submitting the form.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # When True, prevents the user from interacting with select.
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # When True, indicates that the user must select a value before the owning form can be submitted.
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
     # Props to rename
     _rename_props = {"onChange": "onValueChange"}
@@ -64,16 +64,16 @@ class SelectTrigger(RadixThemesComponent):
     tag = "Select.Trigger"
 
     # Variant of the select trigger
-    variant: Var[Literal["classic", "surface", "soft", "ghost"]]
+    variant: Optional[Var[Literal["classic", "surface", "soft", "ghost"]]] = None
 
     # The color of the select trigger
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # The radius of the select trigger
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = None
 
     # The placeholder of the select trigger
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     _valid_parents: List[str] = ["SelectRoot"]
 
@@ -84,28 +84,28 @@ class SelectContent(RadixThemesComponent):
     tag = "Select.Content"
 
     # The variant of the select content
-    variant: Var[Literal["solid", "soft"]]
+    variant: Optional[Var[Literal["solid", "soft"]]] = None
 
     # The color of the select content
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the select content with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # The positioning mode to use, item-aligned is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item. popper positions content in the same way as our other primitives, for example Popover or DropdownMenu.
-    position: Var[Literal["item-aligned", "popper"]]
+    position: Optional[Var[Literal["item-aligned", "popper"]]] = None
 
     # The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. Only available when position is set to popper.
-    side: Var[Literal["top", "right", "bottom", "left"]]
+    side: Optional[Var[Literal["top", "right", "bottom", "left"]]] = None
 
     # The distance in pixels from the anchor. Only available when position is set to popper.
-    side_offset: Var[int]
+    side_offset: Optional[Var[int]] = None
 
     # The preferred alignment against the anchor. May change when collisions occur. Only available when position is set to popper.
-    align: Var[Literal["start", "center", "end"]]
+    align: Optional[Var[Literal["start", "center", "end"]]] = None
 
     # The vertical distance in pixels from the anchor. Only available when position is set to popper.
-    align_offset: Var[int]
+    align_offset: Optional[Var[int]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -135,10 +135,10 @@ class SelectItem(RadixThemesComponent):
     tag = "Select.Item"
 
     # The value given as data when submitting a form with a name.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # Whether the select item is disabled
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     _valid_parents: List[str] = ["SelectGroup", "SelectContent"]
 
@@ -161,28 +161,28 @@ class HighLevelSelect(SelectRoot):
     """High level wrapper for the Select component."""
 
     # The items of the select.
-    items: Var[List[str]]
+    items: Optional[Var[List[str]]] = None
 
     # The placeholder of the select.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # The label of the select.
-    label: Var[str]
+    label: Optional[Var[str]] = None
 
     # The color of the select.
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the select with higher contrast color against background.
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # The variant of the select.
-    variant: Var[Literal["classic", "surface", "soft", "ghost"]]
+    variant: Optional[Var[Literal["classic", "surface", "soft", "ghost"]]] = None
 
     # The radius of the select.
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = None
 
     # The width of the select.
-    width: Var[str]
+    width: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, items: Union[List[str], Var[List[str]]], **props) -> Component:
diff --git a/reflex/components/radix/themes/components/separator.py b/reflex/components/radix/themes/components/separator.py
index 92d2e8b8512..567d284c6af 100644
--- a/reflex/components/radix/themes/components/separator.py
+++ b/reflex/components/radix/themes/components/separator.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex.vars import Var
 
@@ -20,13 +20,13 @@ class Separator(RadixThemesComponent):
     size: Var[LiteralSeperatorSize] = Var.create_safe("4")
 
     # The color of the select
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # The orientation of the separator.
-    orientation: Var[Literal["horizontal", "vertical"]]
+    orientation: Optional[Var[Literal["horizontal", "vertical"]]] = None
 
     # When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.
-    decorative: Var[bool]
+    decorative: Optional[Var[bool]] = None
 
 
 # Alias to divider.
diff --git a/reflex/components/radix/themes/components/slider.py b/reflex/components/radix/themes/components/slider.py
index 6d8bd90f140..9fb32b70642 100644
--- a/reflex/components/radix/themes/components/slider.py
+++ b/reflex/components/radix/themes/components/slider.py
@@ -17,46 +17,46 @@ class Slider(RadixThemesComponent):
     tag = "Slider"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Button size "1" - "3"
-    size: Var[Literal["1", "2", "3"]]
+    size: Optional[Var[Literal["1", "2", "3"]]] = None
 
     # Variant of button
-    variant: Var[Literal["classic", "surface", "soft"]]
+    variant: Optional[Var[Literal["classic", "surface", "soft"]]] = None
 
     # Override theme color for button
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the button with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # Override theme radius for button: "none" | "small" | "full"
-    radius: Var[Literal["none", "small", "full"]]
+    radius: Optional[Var[Literal["none", "small", "full"]]] = None
 
     # The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
-    default_value: Var[Union[List[Union[float, int]], float, int]]
+    default_value: Optional[Var[Union[List[Union[float, int]], float, int]]] = None
 
     # The controlled value of the slider. Must be used in conjunction with onValueChange.
-    value: Var[List[Union[float, int]]]
+    value: Optional[Var[List[Union[float, int]]]] = None
 
     # The name of the slider. Submitted with its owning form as part of a name/value pair.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # The minimum value of the slider.
-    min: Var[Union[float, int]]
+    min: Optional[Var[Union[float, int]]] = None
 
     # The maximum value of the slider.
-    max: Var[Union[float, int]]
+    max: Optional[Var[Union[float, int]]] = None
 
     # The step value of the slider.
-    step: Var[Union[float, int]]
+    step: Optional[Var[Union[float, int]]] = None
 
     # Whether the slider is disabled
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # The orientation of the slider.
-    orientation: Var[Literal["horizontal", "vertical"]]
+    orientation: Optional[Var[Literal["horizontal", "vertical"]]] = None
 
     # Props to rename
     _rename_props = {"onChange": "onValueChange"}
diff --git a/reflex/components/radix/themes/components/switch.py b/reflex/components/radix/themes/components/switch.py
index 14ac152b2df..a83cf3ec426 100644
--- a/reflex/components/radix/themes/components/switch.py
+++ b/reflex/components/radix/themes/components/switch.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, Literal
+from typing import Any, Dict, Literal, Optional
 
 from reflex.constants import EventTriggers
 from reflex.vars import Var
@@ -18,40 +18,40 @@ class Switch(RadixThemesComponent):
     tag = "Switch"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Whether the switch is checked by default
-    default_checked: Var[bool]
+    default_checked: Optional[Var[bool]] = None
 
     # Whether the switch is checked
-    checked: Var[bool]
+    checked: Optional[Var[bool]] = None
 
     # If true, prevent the user from interacting with the switch
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # If true, the user must interact with the switch to submit the form
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
     # The name of the switch (when submitting a form)
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # The value associated with the "on" position
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # Switch size "1" - "4"
-    size: Var[LiteralSwitchSize]
+    size: Optional[Var[LiteralSwitchSize]] = None
 
     # Variant of switch: "classic" | "surface" | "soft"
-    variant: Var[Literal["classic", "surface", "soft"]]
+    variant: Optional[Var[Literal["classic", "surface", "soft"]]] = None
 
     # Override theme color for switch
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the switch with higher contrast color against background
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # Override theme radius for switch: "none" | "small" | "full"
-    radius: Var[Literal["none", "small", "full"]]
+    radius: Optional[Var[Literal["none", "small", "full"]]] = None
 
     # Props to rename
     _rename_props = {"onChange": "onCheckedChange"}
diff --git a/reflex/components/radix/themes/components/table.py b/reflex/components/radix/themes/components/table.py
index a2b3bada35a..1f5ee47753d 100644
--- a/reflex/components/radix/themes/components/table.py
+++ b/reflex/components/radix/themes/components/table.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import List, Literal
+from typing import List, Literal, Optional
 
 from reflex import el
 from reflex.components.component import ComponentNamespace
@@ -16,10 +16,10 @@ class TableRoot(el.Table, RadixThemesComponent):
     tag = "Table.Root"
 
     # The size of the table: "1" | "2" | "3"
-    size: Var[Literal["1", "2", "3"]]
+    size: Optional[Var[Literal["1", "2", "3"]]] = None
 
     # The variant of the table
-    variant: Var[Literal["surface", "ghost"]]
+    variant: Optional[Var[Literal["surface", "ghost"]]] = None
 
 
 class TableHeader(el.Thead, RadixThemesComponent):
@@ -38,7 +38,7 @@ class TableRow(el.Tr, RadixThemesComponent):
     tag = "Table.Row"
 
     # The alignment of the row
-    align: Var[Literal["start", "center", "end", "baseline"]]
+    align: Optional[Var[Literal["start", "center", "end", "baseline"]]] = None
 
     _invalid_children: List[str] = ["TableBody", "TableHeader", "TableRow"]
 
@@ -49,7 +49,7 @@ class TableColumnHeaderCell(el.Th, RadixThemesComponent):
     tag = "Table.ColumnHeaderCell"
 
     # The justification of the column
-    justify: Var[Literal["start", "center", "end"]]
+    justify: Optional[Var[Literal["start", "center", "end"]]] = None
 
     _invalid_children: List[str] = [
         "TableBody",
@@ -82,7 +82,7 @@ class TableCell(el.Td, RadixThemesComponent):
     tag = "Table.Cell"
 
     # The justification of the column
-    justify: Var[Literal["start", "center", "end"]]
+    justify: Optional[Var[Literal["start", "center", "end"]]] = None
 
     _invalid_children: List[str] = [
         "TableBody",
@@ -99,7 +99,7 @@ class TableRowHeaderCell(el.Th, RadixThemesComponent):
     tag = "Table.RowHeaderCell"
 
     # The justification of the column
-    justify: Var[Literal["start", "center", "end"]]
+    justify: Optional[Var[Literal["start", "center", "end"]]] = None
 
     _invalid_children: List[str] = [
         "TableBody",
diff --git a/reflex/components/radix/themes/components/tabs.py b/reflex/components/radix/themes/components/tabs.py
index b0a1697413b..a60f04f1111 100644
--- a/reflex/components/radix/themes/components/tabs.py
+++ b/reflex/components/radix/themes/components/tabs.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, List, Literal
+from typing import Any, Dict, List, Literal, Optional
 
 from reflex.components.component import ComponentNamespace
 from reflex.constants import EventTriggers
@@ -16,13 +16,13 @@ class TabsRoot(RadixThemesComponent):
     tag = "Tabs.Root"
 
     # The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # The controlled value of the tab that should be active. Use when you need to control the state of the tabs.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The orientation of the tabs.
-    orientation: Var[Literal["horizontal", "vertical"]]
+    orientation: Optional[Var[Literal["horizontal", "vertical"]]] = None
 
     # Props to rename
     _rename_props = {"onChange": "onValueChange"}
@@ -45,7 +45,7 @@ class TabsList(RadixThemesComponent):
     tag = "Tabs.List"
 
     # Tabs size "1" - "2"
-    size: Var[Literal["1", "2"]]
+    size: Optional[Var[Literal["1", "2"]]] = None
 
 
 class TabsTrigger(RadixThemesComponent):
@@ -54,10 +54,10 @@ class TabsTrigger(RadixThemesComponent):
     tag = "Tabs.Trigger"
 
     # The value of the tab. Must be unique for each tab.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # Whether the tab is disabled
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     _valid_parents: List[str] = ["TabsList"]
 
@@ -68,7 +68,7 @@ class TabsContent(RadixThemesComponent):
     tag = "Tabs.Content"
 
     # The value of the tab. Must be unique for each tab.
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
 
 class Tabs(ComponentNamespace):
diff --git a/reflex/components/radix/themes/components/text_area.py b/reflex/components/radix/themes/components/text_area.py
index 2eec48631e5..a21f0125f83 100644
--- a/reflex/components/radix/themes/components/text_area.py
+++ b/reflex/components/radix/themes/components/text_area.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, Literal, Union
+from typing import Any, Dict, Literal, Optional, Union
 
 from reflex import el
 from reflex.components.component import Component
@@ -21,55 +21,55 @@ class TextArea(RadixThemesComponent, el.Textarea):
     tag = "TextArea"
 
     # The size of the text area: "1" | "2" | "3"
-    size: Var[LiteralTextAreaSize]
+    size: Optional[Var[LiteralTextAreaSize]] = None
 
     # The variant of the text area
-    variant: Var[Literal["classic", "surface", "soft"]]
+    variant: Optional[Var[Literal["classic", "surface", "soft"]]] = None
 
     # The color of the text area
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether the form control should have autocomplete enabled
-    auto_complete: Var[bool]
+    auto_complete: Optional[Var[bool]] = None
 
     # Automatically focuses the textarea when the page loads
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None
 
     # Name part of the textarea to submit in 'dir' and 'name' pair when form is submitted
-    dirname: Var[str]
+    dirname: Optional[Var[str]] = None
 
     # Disables the textarea
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # Associates the textarea with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None
 
     # Maximum number of characters allowed in the textarea
-    max_length: Var[int]
+    max_length: Optional[Var[int]] = None
 
     # Minimum number of characters required in the textarea
-    min_length: Var[int]
+    min_length: Optional[Var[int]] = None
 
     # Name of the textarea, used when submitting the form
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # Placeholder text in the textarea
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # Indicates whether the textarea is read-only
-    read_only: Var[bool]
+    read_only: Optional[Var[bool]] = None
 
     # Indicates that the textarea is required
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
     # Visible number of lines in the text control
-    rows: Var[str]
+    rows: Optional[Var[str]] = None
 
     # The controlled value of the textarea, read only unless used with on_change
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # How the text in the textarea is to be wrapped when submitting the form
-    wrap: Var[str]
+    wrap: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/radix/themes/components/text_field.py b/reflex/components/radix/themes/components/text_field.py
index 74b88fd2722..84810ac7f50 100644
--- a/reflex/components/radix/themes/components/text_field.py
+++ b/reflex/components/radix/themes/components/text_field.py
@@ -1,6 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-
-from typing import Any, Dict, Literal
+from typing import Any, Dict, Literal, Optional
 
 from reflex.components import el
 from reflex.components.component import Component, ComponentNamespace
@@ -24,16 +23,16 @@ class TextFieldRoot(el.Div, RadixThemesComponent):
     tag = "TextField.Root"
 
     # Text field size "1" - "3"
-    size: Var[LiteralTextFieldSize]
+    size: Optional[Var[LiteralTextFieldSize]] = None
 
     # Variant of text field: "classic" | "surface" | "soft"
-    variant: Var[LiteralTextFieldVariant]
+    variant: Optional[Var[LiteralTextFieldVariant]] = None
 
     # Override theme color for text field
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = None
 
 
 class TextFieldInput(el.Input, TextFieldRoot):
@@ -79,56 +78,56 @@ class TextFieldSlot(RadixThemesComponent):
     tag = "TextField.Slot"
 
     # Override theme color for text field slot
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
 
 class Input(RadixThemesComponent):
     """High level wrapper for the Input component."""
 
     # Text field size "1" - "3"
-    size: Var[LiteralTextFieldSize]
+    size: Optional[Var[LiteralTextFieldSize]] = None
 
     # Variant of text field: "classic" | "surface" | "soft"
-    variant: Var[LiteralTextFieldVariant]
+    variant: Optional[Var[LiteralTextFieldVariant]] = None
 
     # Override theme color for text field
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[LiteralRadius]
+    radius: Optional[Var[LiteralRadius]] = None
 
     # Whether the input should have autocomplete enabled
-    auto_complete: Var[bool]
+    auto_complete: Optional[Var[bool]] = None
 
     # The value of the input when initially rendered.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # Disables the input
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None
 
     # Specifies the maximum number of characters allowed in the input
-    max_length: Var[str]
+    max_length: Optional[Var[str]] = None
 
     # Specifies the minimum number of characters required in the input
-    min_length: Var[str]
+    min_length: Optional[Var[str]] = None
 
     # Name of the input, used when sending form data
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # Placeholder text in the input
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # Indicates whether the input is read-only
-    read_only: Var[bool]
+    read_only: Optional[Var[bool]] = None
 
     # Indicates that the input is required
-    required: Var[bool]
+    required: Optional[Var[bool]] = None
 
     # Specifies the type of input
-    type: Var[str]
+    type: Optional[Var[str]] = None
 
     # Value of the input
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     @classmethod
     def create(cls, **props):
diff --git a/reflex/components/radix/themes/components/tooltip.py b/reflex/components/radix/themes/components/tooltip.py
index 29bac80d036..01859ee089e 100644
--- a/reflex/components/radix/themes/components/tooltip.py
+++ b/reflex/components/radix/themes/components/tooltip.py
@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, Literal, Union
+from typing import Any, Dict, Literal, Optional, Union
 
 from reflex.components.component import Component
 from reflex.constants import EventTriggers
@@ -36,52 +36,52 @@ class Tooltip(RadixThemesComponent):
     tag = "Tooltip"
 
     # The content of the tooltip.
-    content: Var[str]
+    content: Optional[Var[str]] = None
 
     # The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
-    default_open: Var[bool]
+    default_open: Optional[Var[bool]] = None
 
     # The controlled open state of the tooltip. Must be used in conjunction with `on_open_change`.
-    open: Var[bool]
+    open: Optional[Var[bool]] = None
 
     # The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
-    side: Var[LiteralSideType]
+    side: Optional[Var[LiteralSideType]] = None
 
     # The distance in pixels from the trigger. Defaults to 0.
-    side_offset: Var[Union[float, int]]
+    side_offset: Optional[Var[Union[float, int]]] = None
 
     # The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
-    align: Var[LiteralAlignType]
+    align: Optional[Var[LiteralAlignType]] = None
 
     # An offset in pixels from the "start" or "end" alignment options.
-    align_offset: Var[Union[float, int]]
+    align_offset: Optional[Var[Union[float, int]]] = None
 
     # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
-    avoid_collisions: Var[bool]
+    avoid_collisions: Optional[Var[bool]] = None
 
     # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
-    collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
+    collision_padding: Optional[Var[Union[float, int, Dict[str, Union[float, int]]]]] = None
 
     # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
-    arrow_padding: Var[Union[float, int]]
+    arrow_padding: Optional[Var[Union[float, int]]] = None
 
     # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
-    sticky: Var[LiteralStickyType]
+    sticky: Optional[Var[LiteralStickyType]] = None
 
     # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
-    hide_when_detached: Var[bool]
+    hide_when_detached: Optional[Var[bool]] = None
 
     # Override the duration in milliseconds to customize the open delay for a specific tooltip. Default is 700.
-    delay_duration: Var[Union[float, int]]
+    delay_duration: Optional[Var[Union[float, int]]] = None
 
     # Prevents Tooltip content from remaining open when hovering.
-    disable_hoverable_content: Var[bool]
+    disable_hoverable_content: Optional[Var[bool]] = None
 
     # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
-    force_mount: Var[bool]
+    force_mount: Optional[Var[bool]] = None
 
     # By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.
-    aria_label: Var[str]
+    aria_label: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
diff --git a/reflex/components/radix/themes/layout/base.py b/reflex/components/radix/themes/layout/base.py
index f18ed34a8ca..c3f6696095d 100644
--- a/reflex/components/radix/themes/layout/base.py
+++ b/reflex/components/radix/themes/layout/base.py
@@ -1,8 +1,7 @@
 """Declarative layout and common spacing props."""
-
 from __future__ import annotations
 
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex.vars import Var
 
@@ -22,28 +21,28 @@ class LayoutComponent(CommonMarginProps, RadixThemesComponent):
     """
 
     # Padding: "0" - "9"
-    p: Var[LiteralSpacing]
+    p: Optional[Var[LiteralSpacing]] = None
 
     # Padding horizontal: "0" - "9"
-    px: Var[LiteralSpacing]
+    px: Optional[Var[LiteralSpacing]] = None
 
     # Padding vertical: "0" - "9"
-    py: Var[LiteralSpacing]
+    py: Optional[Var[LiteralSpacing]] = None
 
     # Padding top: "0" - "9"
-    pt: Var[LiteralSpacing]
+    pt: Optional[Var[LiteralSpacing]] = None
 
     # Padding right: "0" - "9"
-    pr: Var[LiteralSpacing]
+    pr: Optional[Var[LiteralSpacing]] = None
 
     # Padding bottom: "0" - "9"
-    pb: Var[LiteralSpacing]
+    pb: Optional[Var[LiteralSpacing]] = None
 
     # Padding left: "0" - "9"
-    pl: Var[LiteralSpacing]
+    pl: Optional[Var[LiteralSpacing]] = None
 
     # Whether the element will take up the smallest possible space: "0" | "1"
-    shrink: Var[LiteralBoolNumber]
+    shrink: Optional[Var[LiteralBoolNumber]] = None
 
     # Whether the element will take up the largest possible space: "0" | "1"
-    grow: Var[LiteralBoolNumber]
+    grow: Optional[Var[LiteralBoolNumber]] = None
diff --git a/reflex/components/radix/themes/layout/container.py b/reflex/components/radix/themes/layout/container.py
index 2e049df7d8c..0b1bff0c52a 100644
--- a/reflex/components/radix/themes/layout/container.py
+++ b/reflex/components/radix/themes/layout/container.py
@@ -1,7 +1,7 @@
 """Declarative layout and common spacing props."""
 from __future__ import annotations
 
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex import el
 from reflex.vars import Var
@@ -20,4 +20,4 @@ class Container(el.Div, RadixThemesComponent):
     tag = "Container"
 
     # The size of the container: "1" - "4" (default "4")
-    size: Var[LiteralContainerSize]
+    size: Optional[Var[LiteralContainerSize]] = None
diff --git a/reflex/components/radix/themes/layout/flex.py b/reflex/components/radix/themes/layout/flex.py
index ef7aed16ca3..fe2dba4de1e 100644
--- a/reflex/components/radix/themes/layout/flex.py
+++ b/reflex/components/radix/themes/layout/flex.py
@@ -1,8 +1,7 @@
 """Declarative layout and common spacing props."""
-
 from __future__ import annotations
 
-from typing import Dict, Literal
+from typing import Dict, Literal, Optional
 
 from reflex import el
 from reflex.vars import Var
@@ -24,22 +23,22 @@ class Flex(el.Div, RadixThemesComponent):
     tag = "Flex"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
-    direction: Var[LiteralFlexDirection]
+    direction: Optional[Var[LiteralFlexDirection]] = None
 
     # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
-    align: Var[LiteralAlign]
+    align: Optional[Var[LiteralAlign]] = None
 
     # Alignment of children along the cross axis: "start" | "center" | "end" | "between"
-    justify: Var[LiteralJustify]
+    justify: Optional[Var[LiteralJustify]] = None
 
     # Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-    wrap: Var[LiteralFlexWrap]
+    wrap: Optional[Var[LiteralFlexWrap]] = None
 
     # Gap between children: "0" - "9"
-    spacing: Var[LiteralSpacing]
+    spacing: Optional[Var[LiteralSpacing]] = None
 
     # Reflex maps the "spacing" prop to "gap" prop.
     _rename_props: Dict[str, str] = {"spacing": "gap"}
diff --git a/reflex/components/radix/themes/layout/grid.py b/reflex/components/radix/themes/layout/grid.py
index 565703643e2..ea1653d023c 100644
--- a/reflex/components/radix/themes/layout/grid.py
+++ b/reflex/components/radix/themes/layout/grid.py
@@ -1,8 +1,7 @@
 """Declarative layout and common spacing props."""
-
 from __future__ import annotations
 
-from typing import Dict, Literal
+from typing import Dict, Literal, Optional
 
 from reflex import el
 from reflex.vars import Var
@@ -23,31 +22,31 @@ class Grid(el.Div, RadixThemesComponent):
     tag = "Grid"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Number of columns
-    columns: Var[str]
+    columns: Optional[Var[str]] = None
 
     # Number of rows
-    rows: Var[str]
+    rows: Optional[Var[str]] = None
 
     # How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
-    flow: Var[LiteralGridFlow]
+    flow: Optional[Var[LiteralGridFlow]] = None
 
     # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
-    align: Var[LiteralAlign]
+    align: Optional[Var[LiteralAlign]] = None
 
     # Alignment of children along the cross axis: "start" | "center" | "end" | "between"
-    justify: Var[LiteralJustify]
+    justify: Optional[Var[LiteralJustify]] = None
 
     # Gap between children: "0" - "9"
-    spacing: Var[LiteralSpacing]
+    spacing: Optional[Var[LiteralSpacing]] = None
 
     # Gap between children horizontal: "0" - "9"
-    spacing_x: Var[LiteralSpacing]
+    spacing_x: Optional[Var[LiteralSpacing]] = None
 
     # Gap between children vertical: "0" - "9"
-    spacing_y: Var[LiteralSpacing]
+    spacing_y: Optional[Var[LiteralSpacing]] = None
 
     # Reflex maps the "spacing" prop to "gap" prop.
     _rename_props: Dict[str, str] = {
diff --git a/reflex/components/radix/themes/layout/section.py b/reflex/components/radix/themes/layout/section.py
index 5f17b270c99..faf179aa43a 100644
--- a/reflex/components/radix/themes/layout/section.py
+++ b/reflex/components/radix/themes/layout/section.py
@@ -1,7 +1,7 @@
 """Declarative layout and common spacing props."""
 from __future__ import annotations
 
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex import el
 from reflex.vars import Var
@@ -17,4 +17,4 @@ class Section(el.Section, RadixThemesComponent):
     tag = "Section"
 
     # The size of the section: "1" - "3" (default "3")
-    size: Var[LiteralSectionSize]
+    size: Optional[Var[LiteralSectionSize]] = None
diff --git a/reflex/components/radix/themes/typography/blockquote.py b/reflex/components/radix/themes/typography/blockquote.py
index 6525064d5fb..0e5da9d92c3 100644
--- a/reflex/components/radix/themes/typography/blockquote.py
+++ b/reflex/components/radix/themes/typography/blockquote.py
@@ -1,9 +1,11 @@
 """Components for rendering heading.
-
-https://www.radix-ui.com/themes/docs/theme/typography
+from typing import Optional
+https://www.radix-ui.com/themes/docs/theme/typography.
 """
 from __future__ import annotations
 
+from typing import Optional
+
 from reflex import el
 from reflex.vars import Var
 
@@ -23,13 +25,13 @@ class Blockquote(el.Blockquote, RadixThemesComponent):
     tag = "Blockquote"
 
     # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
+    size: Optional[Var[LiteralTextSize]] = None
 
     # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[LiteralTextWeight]
+    weight: Optional[Var[LiteralTextWeight]] = None
 
     # Overrides the accent color inherited from the Theme.
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the text with higher contrast color
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/typography/code.py b/reflex/components/radix/themes/typography/code.py
index 8ee0d2be2e1..c5937a530bd 100644
--- a/reflex/components/radix/themes/typography/code.py
+++ b/reflex/components/radix/themes/typography/code.py
@@ -1,9 +1,11 @@
 """Components for rendering heading.
-
-https://www.radix-ui.com/themes/docs/theme/typography
+from typing import Optional
+https://www.radix-ui.com/themes/docs/theme/typography.
 """
 from __future__ import annotations
 
+from typing import Optional
+
 from reflex import el
 from reflex.vars import Var
 
@@ -24,16 +26,16 @@ class Code(el.Code, RadixThemesComponent):
     tag = "Code"
 
     # The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[LiteralVariant]
+    variant: Optional[Var[LiteralVariant]] = None
 
     # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
+    size: Optional[Var[LiteralTextSize]] = None
 
     # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[LiteralTextWeight]
+    weight: Optional[Var[LiteralTextWeight]] = None
 
     # Overrides the accent color inherited from the Theme.
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the text with higher contrast color
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/typography/heading.py b/reflex/components/radix/themes/typography/heading.py
index 94b19577b77..d20bc22c86c 100644
--- a/reflex/components/radix/themes/typography/heading.py
+++ b/reflex/components/radix/themes/typography/heading.py
@@ -4,9 +4,10 @@
 """
 from __future__ import annotations
 
+from typing import Optional
+
 from reflex import el
 from reflex.vars import Var
-from typing import Optional
 
 from ..base import (
     LiteralAccentColor,
diff --git a/reflex/components/radix/themes/typography/link.py b/reflex/components/radix/themes/typography/link.py
index a5d969b6c60..c358e458201 100644
--- a/reflex/components/radix/themes/typography/link.py
+++ b/reflex/components/radix/themes/typography/link.py
@@ -1,10 +1,10 @@
 """Components for rendering heading.
-
-https://www.radix-ui.com/themes/docs/theme/typography
+from typing import Optional
+https://www.radix-ui.com/themes/docs/theme/typography.
 """
 from __future__ import annotations
 
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex.components.component import Component, MemoizationLeaf
 from reflex.components.core.cond import cond
@@ -34,28 +34,28 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
     tag = "Link"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
+    size: Optional[Var[LiteralTextSize]] = None
 
     # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[LiteralTextWeight]
+    weight: Optional[Var[LiteralTextWeight]] = None
 
     # Removes the leading trim space: "normal" | "start" | "end" | "both"
-    trim: Var[LiteralTextTrim]
+    trim: Optional[Var[LiteralTextTrim]] = None
 
     # Sets the visibility of the underline affordance: "auto" | "hover" | "always"
-    underline: Var[LiteralLinkUnderline]
+    underline: Optional[Var[LiteralLinkUnderline]] = None
 
     # Overrides the accent color inherited from the Theme.
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the text with higher contrast color
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
     # If True, the link will open in a new tab
-    is_external: Var[bool]
+    is_external: Optional[Var[bool]] = None
 
     def _get_imports(self) -> imports.ImportDict:
         return {**super()._get_imports(), **next_link._get_imports()}
diff --git a/reflex/components/radix/themes/typography/text.py b/reflex/components/radix/themes/typography/text.py
index 96512fe58fb..1706c2dff70 100644
--- a/reflex/components/radix/themes/typography/text.py
+++ b/reflex/components/radix/themes/typography/text.py
@@ -1,11 +1,10 @@
 """Components for rendering text.
-
-https://www.radix-ui.com/themes/docs/theme/typography
+from typing import Optional
+https://www.radix-ui.com/themes/docs/theme/typography.
 """
-
 from __future__ import annotations
 
-from typing import Literal
+from typing import Literal, Optional
 
 from reflex import el
 from reflex.components.component import ComponentNamespace
@@ -50,28 +49,28 @@ class Text(el.Span, RadixThemesComponent):
     tag = "Text"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
-    as_child: Var[bool]
+    as_child: Optional[Var[bool]] = None
 
     # Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
     as_: Var[LiteralType] = "p"  # type: ignore
 
     # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
+    size: Optional[Var[LiteralTextSize]] = None
 
     # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[LiteralTextWeight]
+    weight: Optional[Var[LiteralTextWeight]] = None
 
     # Alignment of text in element: "left" | "center" | "right"
-    align: Var[LiteralTextAlign]
+    align: Optional[Var[LiteralTextAlign]] = None
 
     # Removes the leading trim space: "normal" | "start" | "end" | "both"
-    trim: Var[LiteralTextTrim]
+    trim: Optional[Var[LiteralTextTrim]] = None
 
     # Overrides the accent color inherited from the Theme.
-    color_scheme: Var[LiteralAccentColor]
+    color_scheme: Optional[Var[LiteralAccentColor]] = None
 
     # Whether to render the text with higher contrast color
-    high_contrast: Var[bool]
+    high_contrast: Optional[Var[bool]] = None
 
 
 class Span(Text):
@@ -92,7 +91,7 @@ class Kbd(el.Kbd, RadixThemesComponent):
     tag = "Kbd"
 
     # Text size: "1" - "9"
-    size: Var[LiteralTextSize]
+    size: Optional[Var[LiteralTextSize]] = None
 
 
 class Quote(el.Q, RadixThemesComponent):
diff --git a/reflex/components/react_player/react_player.py b/reflex/components/react_player/react_player.py
index 2e09d4bf9c3..516498d0d9c 100644
--- a/reflex/components/react_player/react_player.py
+++ b/reflex/components/react_player/react_player.py
@@ -1,7 +1,8 @@
 """React-Player component."""
-
 from __future__ import annotations
 
+from typing import Optional
+
 from reflex.components.component import NoSSRComponent
 from reflex.vars import Var
 
@@ -18,28 +19,28 @@ class ReactPlayer(NoSSRComponent):
     is_default = True
 
     # The url of a video or song to play
-    url: Var[str]
+    url: Optional[Var[str]] = None
 
     # Set to true or false to pause or play the media
-    playing: Var[bool]
+    playing: Optional[Var[bool]] = None
 
     # Set to true or false to loop the media
-    loop: Var[bool]
+    loop: Optional[Var[bool]] = None
 
     # Set to true or false to display native player controls.
     controls: Var[bool] = True  # type: ignore
 
     # Set to true to show just the video thumbnail, which loads the full player on click
-    light: Var[bool]
+    light: Optional[Var[bool]] = None
 
     # Set the volume of the player, between 0 and 1
-    volume: Var[float]
+    volume: Optional[Var[float]] = None
 
     # Mutes the player
-    muted: Var[bool]
+    muted: Optional[Var[bool]] = None
 
     # Set the width of the player: ex:640px
-    width: Var[str]
+    width: Optional[Var[str]] = None
 
     # Set the height of the player: ex:640px
-    height: Var[str]
+    height: Optional[Var[str]] = None
diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 136bddf9f81..1150c90f89d 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -1,7 +1,7 @@
 """Cartesian charts in Recharts."""
 from __future__ import annotations
 
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union
 
 from reflex.constants import EventTriggers
 from reflex.vars import Var
@@ -27,46 +27,46 @@ class Axis(Recharts):
     """A base class for axes in Recharts."""
 
     # The key of a group of data which should be unique in an area chart.
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # If set true, the axis do not display in the chart.
-    hide: Var[bool]
+    hide: Optional[Var[bool]] = None
 
     # The orientation of axis 'top' | 'bottom'
-    orientation: Var[LiteralOrientationTopBottom]
+    orientation: Optional[Var[LiteralOrientationTopBottom]] = None
 
     # The type of axis 'number' | 'category'
-    type_: Var[LiteralPolarRadiusType]
+    type_: Optional[Var[LiteralPolarRadiusType]] = None
 
     # Allow the ticks of XAxis to be decimals or not.
-    allow_decimals: Var[bool]
+    allow_decimals: Optional[Var[bool]] = None
 
     # When domain of the axis is specified and the type of the axis is 'number', if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value of data is smaller than domain[0] or the maximum value of data is greater than domain[1] so that the axis displays all data values. If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain.
-    allow_data_overflow: Var[bool]
+    allow_data_overflow: Optional[Var[bool]] = None
 
     # Allow the axis has duplicated categorys or not when the type of axis is "category".
-    allow_duplicated_category: Var[bool]
+    allow_duplicated_category: Optional[Var[bool]] = None
 
     # If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
-    axis_line: Var[bool]
+    axis_line: Optional[Var[bool]] = None
 
     # If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.
-    tick_line: Var[bool]
+    tick_line: Optional[Var[bool]] = None
 
     # If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
-    mirror: Var[bool]
+    mirror: Optional[Var[bool]] = None
 
     # Reverse the ticks or not.
-    reversed: Var[bool]
+    reversed: Optional[Var[bool]] = None
 
     # If 'auto' set, the scale function is decided by the type of chart, and the props type. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function
-    scale: Var[LiteralScale]
+    scale: Optional[Var[LiteralScale]] = None
 
     # The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
-    unit: Var[Union[str, int]]
+    unit: Optional[Var[Union[str, int]]] = None
 
     # The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
-    name: Var[Union[str, int]]
+    name: Optional[Var[Union[str, int]]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -100,7 +100,7 @@ class YAxis(Axis):
     alias = "RechartsYAxis"
 
     # The key of data displayed in the axis.
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
 
 class ZAxis(Recharts):
@@ -111,19 +111,19 @@ class ZAxis(Recharts):
     alias = "RechartszAxis"
 
     # The key of data displayed in the axis.
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # The range of axis.
-    range: Var[List[int]]
+    range: Optional[Var[List[int]]] = None
 
     # The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
-    unit: Var[Union[str, int]]
+    unit: Optional[Var[Union[str, int]]] = None
 
     # The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
-    name: Var[Union[str, int]]
+    name: Optional[Var[Union[str, int]]] = None
 
     # If 'auto' set, the scale function is decided by the type of chart, and the props type.
-    scale: Var[LiteralScale]
+    scale: Optional[Var[LiteralScale]] = None
 
 
 class Brush(Recharts):
@@ -134,37 +134,37 @@ class Brush(Recharts):
     alias = "RechartsBrush"
 
     # Stroke color
-    stroke: Var[str]
+    stroke: Optional[Var[str]] = None
 
     # The key of data displayed in the axis.
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # The x-coordinate of brush.
-    x: Var[int]
+    x: Optional[Var[int]] = None
 
     # The y-coordinate of brush.
-    y: Var[int]
+    y: Optional[Var[int]] = None
 
     # The width of brush.
-    width: Var[int]
+    width: Optional[Var[int]] = None
 
     # The height of brush.
-    height: Var[int]
+    height: Optional[Var[int]] = None
 
     # The data domain of brush, [min, max].
-    data: Var[List[Any]]
+    data: Optional[Var[List[Any]]] = None
 
     # The width of each traveller.
-    traveller_width: Var[int]
+    traveller_width: Optional[Var[int]] = None
 
     # The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time
-    gap: Var[int]
+    gap: Optional[Var[int]] = None
 
     # The default start index of brush. If the option is not set, the start index will be 0.
-    start_index: Var[int]
+    start_index: Optional[Var[int]] = None
 
     # The default end index of brush. If the option is not set, the end index will be 1.
-    end_index: Var[int]
+    end_index: Optional[Var[int]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -181,19 +181,19 @@ class Cartesian(Recharts):
     """A base class for cartesian charts in Recharts."""
 
     # The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
-    layout: Var[LiteralLayout]
+    layout: Optional[Var[LiteralLayout]] = None
 
     # The key of a group of data which should be unique in an area chart.
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # The id of x-axis which is corresponding to the data.
-    x_axis_id: Var[Union[str, int]]
+    x_axis_id: Optional[Var[Union[str, int]]] = None
 
     # The id of y-axis which is corresponding to the data.
-    y_axis_id: Var[Union[str, int]]
+    y_axis_id: Optional[Var[Union[str, int]]] = None
 
     # The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye' | 'none'optional
-    # legend_type: Var[LiteralLegendType]
+    # legend_type: Optional[Var[LiteralLegendType]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -219,28 +219,28 @@ class Area(Cartesian):
     alias = "RechartsArea"
 
     # The color of the line stroke.
-    stroke: Var[str]
+    stroke: Optional[Var[str]] = None
 
     # The width of the line stroke.
-    stroke_width: Var[int]
+    stroke_width: Optional[Var[int]] = None
 
     # The color of the area fill.
-    fill: Var[str]
+    fill: Optional[Var[str]] = None
 
     # The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' |
-    type_: Var[LiteralAreaType]
+    type_: Optional[Var[LiteralAreaType]] = None
 
     # If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.
-    dot: Var[bool]
+    dot: Optional[Var[bool]] = None
 
     # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
-    active_dot: Var[bool]
+    active_dot: Optional[Var[bool]] = None
 
     # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
-    label: Var[bool]
+    label: Optional[Var[bool]] = None
 
     # The stack id of area, when two areas have the same value axis and same stackId, then the two areas area stacked in order.
-    stack_id: Var[str]
+    stack_id: Optional[Var[str]] = None
 
     # Valid children components
     _valid_children: List[str] = ["LabelList"]
@@ -254,28 +254,28 @@ class Bar(Cartesian):
     alias = "RechartsBar"
 
     # The color of the line stroke.
-    stroke: Var[str]
+    stroke: Optional[Var[str]] = None
 
     # The width of the line stroke.
-    stroke_width: Var[int]
+    stroke_width: Optional[Var[int]] = None
 
     # The width of the line stroke.
-    fill: Var[str]
+    fill: Optional[Var[str]] = None
 
     # If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally.
-    background: Var[bool]
+    background: Optional[Var[bool]] = None
 
     # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
-    label: Var[bool]
+    label: Optional[Var[bool]] = None
 
     # The stack id of bar, when two areas have the same value axis and same stackId, then the two areas area stacked in order.
-    stack_id: Var[str]
+    stack_id: Optional[Var[str]] = None
 
     # Size of the bar
-    bar_size: Var[int]
+    bar_size: Optional[Var[int]] = None
 
     # Max size of the bar
-    max_bar_size: Var[int]
+    max_bar_size: Optional[Var[int]] = None
 
     # Valid children components
     _valid_children: List[str] = ["Cell", "LabelList", "ErrorBar"]
@@ -289,28 +289,28 @@ class Line(Cartesian):
     alias = "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]
+    type_: Optional[Var[LiteralAreaType]] = None
 
     # The color of the line stroke.
-    stroke: Var[str]
+    stroke: Optional[Var[str]] = None
 
     # The width of the line stroke.
-    stoke_width: Var[int]
+    stoke_width: Optional[Var[int]] = None
 
     # The dot is shown when mouse enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
-    dot: Var[bool]
+    dot: Optional[Var[bool]] = None
 
     # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
-    active_dot: Var[bool]
+    active_dot: Optional[Var[bool]] = None
 
     # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
-    label: Var[bool]
+    label: Optional[Var[bool]] = None
 
     # Hides the line when true, useful when toggling visibility state via legend.
-    hide: Var[bool]
+    hide: Optional[Var[bool]] = None
 
     # Whether to connect a graph line across null points.
-    connect_nulls: Var[bool]
+    connect_nulls: Optional[Var[bool]] = None
 
     # Valid children components
     _valid_children: List[str] = ["LabelList", "ErrorBar"]
@@ -324,25 +324,25 @@ class Scatter(Cartesian):
     alias = "RechartsScatter"
 
     # The source data, in which each element is an object.
-    data: Var[List[Dict[str, Any]]]
+    data: Optional[Var[List[Dict[str, Any]]]] = None
 
     # The id of z-axis which is corresponding to the data.
-    z_axis_id: Var[str]
+    z_axis_id: Optional[Var[str]] = None
 
     # If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally.
-    line: Var[bool]
+    line: Optional[Var[bool]] = None
 
     # If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'
-    shape: Var[LiteralShape]
+    shape: Optional[Var[LiteralShape]] = None
 
     # If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'
-    line_type: Var[LiteralLineType]
+    line_type: Optional[Var[LiteralLineType]] = None
 
     # The fill
-    fill: Var[str]
+    fill: Optional[Var[str]] = None
 
     # the name
-    name: Var[Union[str, int]]
+    name: Optional[Var[Union[str, int]]] = None
 
     # Valid children components.
     _valid_children: List[str] = ["LabelList", "ErrorBar"]
@@ -356,16 +356,16 @@ class Funnel(Cartesian):
     alias = "RechartsFunnel"
 
     # The source data, in which each element is an object.
-    data: Var[List[Dict[str, Any]]]
+    data: Optional[Var[List[Dict[str, Any]]]] = None
 
     # Specifies when the animation should begin, the unit of this option is ms.
-    animation_begin: Var[int]
+    animation_begin: Optional[Var[int]] = None
 
     # Specifies the duration of animation, the unit of this option is ms.
-    animation_duration: Var[int]
+    animation_duration: Optional[Var[int]] = None
 
     # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
-    animation_easing: Var[LiteralAnimationEasing]
+    animation_easing: Optional[Var[LiteralAnimationEasing]] = None
 
     # Valid children components
     _valid_children: List[str] = ["LabelList", "Cell"]
@@ -379,41 +379,41 @@ class ErrorBar(Recharts):
     alias = "RechartsErrorBar"
 
     # The direction of error bar. 'x' | 'y' | 'both'
-    direction: Var[LiteralDirection]
+    direction: Optional[Var[LiteralDirection]] = None
 
     # The key of a group of data which should be unique in an area chart.
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # The width of the error bar ends.
-    width: Var[int]
+    width: Optional[Var[int]] = None
 
     # The stroke color of error bar.
-    stroke: Var[str]
+    stroke: Optional[Var[str]] = None
 
     # The stroke width of error bar.
-    stroke_width: Var[int]
+    stroke_width: Optional[Var[int]] = None
 
 
 class Reference(Recharts):
     """A base class for reference components in Reference."""
 
     # The id of x-axis which is corresponding to the data.
-    x_axis_id: Var[Union[str, int]]
+    x_axis_id: Optional[Var[Union[str, int]]] = None
 
     # The id of y-axis which is corresponding to the data.
-    y_axis_id: Var[Union[str, int]]
+    y_axis_id: Optional[Var[Union[str, int]]] = None
 
     # If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
-    x: Var[str]
+    x: Optional[Var[str]] = None
 
     # If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
-    y: Var[str]
+    y: Optional[Var[str]] = None
 
     # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
-    if_overflow: Var[LiteralIfOverflow]
+    if_overflow: Optional[Var[LiteralIfOverflow]] = None
 
     # If set true, the line will be rendered in front of bars in BarChart, etc.
-    is_front: Var[bool]
+    is_front: Optional[Var[bool]] = None
 
 
 class ReferenceLine(Reference):
@@ -424,7 +424,7 @@ class ReferenceLine(Reference):
     alias = "RechartsReferenceLine"
 
     # The width of the stroke.
-    stroke_width: Var[int]
+    stroke_width: Optional[Var[int]] = None
 
     # Valid children components
     _valid_children: List[str] = ["Label"]
@@ -464,37 +464,37 @@ class ReferenceArea(Recharts):
     alias = "RechartsReferenceArea"
 
     # Stroke color
-    stroke: Var[str]
+    stroke: Optional[Var[str]] = None
 
     # Fill color
-    fill: Var[str]
+    fill: Optional[Var[str]] = None
 
     # The opacity of area.
-    fill_opacity: Var[float]
+    fill_opacity: Optional[Var[float]] = None
 
     # The id of x-axis which is corresponding to the data.
-    x_axis_id: Var[Union[str, int]]
+    x_axis_id: Optional[Var[Union[str, int]]] = None
 
     # The id of y-axis which is corresponding to the data.
-    y_axis_id: Var[Union[str, int]]
+    y_axis_id: Optional[Var[Union[str, int]]] = None
 
     # A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys. If one of x1 or x2 is invalidate, the area will cover along x-axis.
-    x1: Var[Union[str, int]]
+    x1: Optional[Var[Union[str, int]]] = None
 
     # A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys. If one of x1 or x2 is invalidate, the area will cover along x-axis.
-    x2: Var[Union[str, int]]
+    x2: Optional[Var[Union[str, int]]] = None
 
     # A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis.
-    y1: Var[Union[str, int]]
+    y1: Optional[Var[Union[str, int]]] = None
 
     # A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis.
-    y2: Var[Union[str, int]]
+    y2: Optional[Var[Union[str, int]]] = None
 
     # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
-    if_overflow: Var[LiteralIfOverflow]
+    if_overflow: Optional[Var[LiteralIfOverflow]] = None
 
     # If set true, the line will be rendered in front of bars in BarChart, etc.
-    is_front: Var[bool]
+    is_front: Optional[Var[bool]] = None
 
     # Valid children components
     _valid_children: List[str] = ["Label"]
@@ -504,16 +504,16 @@ class Grid(Recharts):
     """A base class for grid components in Recharts."""
 
     # The x-coordinate of grid.
-    x: Var[int]
+    x: Optional[Var[int]] = None
 
     # The y-coordinate of grid.
-    y: Var[int]
+    y: Optional[Var[int]] = None
 
     # The width of grid.
-    width: Var[int]
+    width: Optional[Var[int]] = None
 
     # The height of grid.
-    height: Var[int]
+    height: Optional[Var[int]] = None
 
 
 class CartesianGrid(Grid):
@@ -524,19 +524,19 @@ class CartesianGrid(Grid):
     alias = "RechartsCartesianGrid"
 
     # The horizontal line configuration.
-    horizontal: Var[Dict[str, Any]]
+    horizontal: Optional[Var[Dict[str, Any]]] = None
 
     # The vertical line configuration.
-    vertical: Var[Dict[str, Any]]
+    vertical: Optional[Var[Dict[str, Any]]] = None
 
     # The background of grid.
-    fill: Var[str]
+    fill: Optional[Var[str]] = None
 
     # The opacity of the background used to fill the space between grid lines
-    fill_opacity: Var[float]
+    fill_opacity: Optional[Var[float]] = None
 
     # The pattern of dashes and gaps used to paint the lines of the grid
-    stroke_dasharray: Var[str]
+    stroke_dasharray: Optional[Var[str]] = None
 
 
 class CartesianAxis(Grid):
@@ -547,28 +547,28 @@ class CartesianAxis(Grid):
     alias = "RechartsCartesianAxis"
 
     # The orientation of axis 'top' | 'bottom' | 'left' | 'right'
-    orientation: Var[LiteralOrientationTopBottomLeftRight]
+    orientation: Optional[Var[LiteralOrientationTopBottomLeftRight]] = None
 
     # If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
-    axis_line: Var[bool]
+    axis_line: Optional[Var[bool]] = None
 
     # If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.
-    tick_line: Var[bool]
+    tick_line: Optional[Var[bool]] = None
 
     # The length of tick line.
-    tick_size: Var[int]
+    tick_size: Optional[Var[int]] = None
 
     # If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
-    interval: Var[LiteralInterval]
+    interval: Optional[Var[LiteralInterval]] = None
 
     # If set false, no ticks will be drawn.
-    ticks: Var[bool]
+    ticks: Optional[Var[bool]] = None
 
     # If set a string or a number, default label will be drawn, and the option is content.
-    label: Var[str]
+    label: Optional[Var[str]] = None
 
     # If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
-    mirror: Var[bool]
+    mirror: Optional[Var[bool]] = None
 
     # The margin between tick line and tick.
-    tick_margin: Var[int]
+    tick_margin: Optional[Var[int]] = None
diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index 5a29cc2aa6f..6640391adea 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -1,7 +1,7 @@
 """A module that defines the chart components in Recharts."""
 from __future__ import annotations
 
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union
 
 from reflex.components.component import Component
 from reflex.components.recharts.general import ResponsiveContainer
@@ -22,13 +22,13 @@ class ChartBase(RechartsCharts):
     """A component that wraps a Recharts charts."""
 
     # The source data, in which each element is an object.
-    data: Var[List[Dict[str, Any]]]
+    data: Optional[Var[List[Dict[str, Any]]]] = None
 
     # If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-    sync_id: Var[str]
+    sync_id: Optional[Var[str]] = None
 
     # When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-    sync_method: Var[LiteralSyncMethod]
+    sync_method: Optional[Var[LiteralSyncMethod]] = None
 
     # The width of chart container. String or Integer
     width: Var[Union[str, int]] = "100%"  # type: ignore
@@ -37,13 +37,13 @@ class ChartBase(RechartsCharts):
     height: Var[Union[str, int]] = "100%"  # type: ignore
 
     # The layout of area in the chart. 'horizontal' | 'vertical'
-    layout: Var[LiteralLayout]
+    layout: Optional[Var[LiteralLayout]] = None
 
     # The sizes of whitespace around the chart.
-    margin: Var[Dict[str, Any]]
+    margin: Optional[Var[Dict[str, Any]]] = None
 
     # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
-    stack_offset: Var[LiteralStackOffset]
+    stack_offset: Optional[Var[LiteralStackOffset]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -124,10 +124,10 @@ class AreaChart(ChartBase):
     alias = "RechartsAreaChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
-    base_value: Var[Union[int, LiteralComposedChartBaseValue]]
+    base_value: Optional[Var[Union[int, LiteralComposedChartBaseValue]]] = None
 
     # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape.
-    stack_offset: Var[LiteralStackOffset]
+    stack_offset: Optional[Var[LiteralStackOffset]] = None
 
     # Valid children components
     _valid_children: List[str] = [
@@ -158,16 +158,16 @@ class BarChart(ChartBase):
     bar_gap: Var[Union[str, int]]  # type: ignore
 
     # The width of all the bars in the chart. Number
-    bar_size: Var[int]
+    bar_size: Optional[Var[int]] = None
 
     # The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.
-    max_bar_size: Var[int]
+    max_bar_size: Optional[Var[int]] = None
 
     # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape.
-    stack_offset: Var[LiteralStackOffset]
+    stack_offset: Optional[Var[LiteralStackOffset]] = None
 
     # If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
-    reverse_stack_order: Var[bool]
+    reverse_stack_order: Optional[Var[bool]] = None
 
     # Valid children components
     _valid_children: List[str] = [
@@ -214,19 +214,19 @@ class ComposedChart(ChartBase):
     alias = "RechartsComposedChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
-    base_value: Var[Union[int, LiteralComposedChartBaseValue]]
+    base_value: Optional[Var[Union[int, LiteralComposedChartBaseValue]]] = None
 
     # 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
 
     # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
-    bar_gap: Var[int]
+    bar_gap: Optional[Var[int]] = None
 
     # The width of all the bars in the chart. Number
-    bar_size: Var[int]
+    bar_size: Optional[Var[int]] = None
 
     # If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
-    reverse_stack_order: Var[bool]
+    reverse_stack_order: Optional[Var[bool]] = None
 
     # Valid children components
     _valid_children: List[str] = [
@@ -283,22 +283,22 @@ class RadarChart(ChartBase):
     alias = "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]]
+    cx: Optional[Var[Union[int, str]]] = None
 
     # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
-    cy: Var[Union[int, str]]
+    cy: Optional[Var[Union[int, str]]] = None
 
     # The angle of first radial direction line.
-    start_angle: Var[int]
+    start_angle: Optional[Var[int]] = None
 
     # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.
-    end_angle: Var[int]
+    end_angle: Optional[Var[int]] = None
 
     # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
-    inner_radius: Var[Union[int, str]]
+    inner_radius: Optional[Var[Union[int, str]]] = None
 
     # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
-    outer_radius: Var[Union[int, str]]
+    outer_radius: Optional[Var[Union[int, str]]] = None
 
     # Valid children components
     _valid_children: List[str] = [
@@ -332,31 +332,31 @@ class RadialBarChart(ChartBase):
     alias = "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]]
+    cx: Optional[Var[Union[int, str]]] = None
 
     # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
-    cy: Var[Union[int, str]]
+    cy: Optional[Var[Union[int, str]]] = None
 
     # The angle of first radial direction line.
-    start_angle: Var[int]
+    start_angle: Optional[Var[int]] = None
 
     # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.
-    end_angle: Var[int]
+    end_angle: Optional[Var[int]] = None
 
     # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
-    inner_radius: Var[Union[int, str]]
+    inner_radius: Optional[Var[Union[int, str]]] = None
 
     # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
-    outer_radius: Var[Union[int, str]]
+    outer_radius: Optional[Var[Union[int, str]]] = None
 
     # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
-    bar_category_gap: Var[Union[int, str]]
+    bar_category_gap: Optional[Var[Union[int, str]]] = None
 
     # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
-    bar_gap: Var[str]
+    bar_gap: Optional[Var[str]] = None
 
     # The size of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
-    bar_size: Var[int]
+    bar_size: Optional[Var[int]] = None
 
     # Valid children components
     _valid_children: List[str] = [
@@ -428,13 +428,13 @@ class FunnelChart(RechartsCharts):
     alias = "RechartsFunnelChart"
 
     # The source data, in which each element is an object.
-    data: Var[List[Dict[str, Any]]]
+    data: Optional[Var[List[Dict[str, Any]]]] = None
 
     # If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-    sync_id: Var[str]
+    sync_id: Optional[Var[str]] = None
 
     # When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-    sync_method: Var[str]
+    sync_method: Optional[Var[str]] = None
 
     # The width of chart container. String or Integer
     width: Var[Union[str, int]] = "100%"  # type: ignore
@@ -443,16 +443,16 @@ class FunnelChart(RechartsCharts):
     height: Var[Union[str, int]] = "100%"  # type: ignore
 
     # The layout of area in the chart. 'horizontal' | 'vertical'
-    layout: Var[LiteralLayout]
+    layout: Optional[Var[LiteralLayout]] = None
 
     # The sizes of whitespace around the chart.
-    margin: Var[Dict[str, Any]]
+    margin: Optional[Var[Dict[str, Any]]] = None
 
     # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
-    stack_offset: Var[LiteralStackOffset]
+    stack_offset: Optional[Var[LiteralStackOffset]] = None
 
     # The layout of bars in the chart. centeric
-    layout: Var[str]
+    layout: Optional[Var[str]] = None
 
     # Valid children components
     _valid_children: List[str] = ["Legend", "GraphingTooltip", "Funnel"]
@@ -485,25 +485,25 @@ class Treemap(RechartsCharts):
     height: Var[Union[str, int]] = "100%"  # type: ignore
 
     # data of treemap. Array
-    data: Var[List[Dict[str, Any]]]
+    data: Optional[Var[List[Dict[str, Any]]]] = None
 
     # The key of a group of data which should be unique in a treemap. String | Number | Function
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given. Number
-    aspect_ratio: Var[int]
+    aspect_ratio: Optional[Var[int]] = None
 
     # If set false, animation of area will be disabled.
-    is_animation_active: Var[bool]
+    is_animation_active: Optional[Var[bool]] = None
 
     # Specifies when the animation should begin, the unit of this option is ms.
-    animation_begin: Var[int]
+    animation_begin: Optional[Var[int]] = None
 
     # Specifies the duration of animation, the unit of this option is ms.
-    animation_duration: Var[int]
+    animation_duration: Optional[Var[int]] = None
 
     # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
-    animation_easing: Var[LiteralAnimationEasing]
+    animation_easing: Optional[Var[LiteralAnimationEasing]] = None
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/recharts/general.py b/reflex/components/recharts/general.py
index ad23204d636..70a17cdf052 100644
--- a/reflex/components/recharts/general.py
+++ b/reflex/components/recharts/general.py
@@ -1,7 +1,7 @@
 """General components for Recharts."""
 from __future__ import annotations
 
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union
 
 from reflex.components.component import MemoizationLeaf
 from reflex.constants import EventTriggers
@@ -25,22 +25,22 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
     alias = "RechartsResponsiveContainer"
 
     # The aspect ratio of the container. The final aspect ratio of the SVG element will be (width / height) * aspect. Number
-    aspect: Var[int]
+    aspect: Optional[Var[int]] = None
 
     # The width of chart container. Can be a number or string
-    width: Var[Union[int, str]]
+    width: Optional[Var[Union[int, str]]] = None
 
     # The height of chart container. Number
-    height: Var[Union[int, str]]
+    height: Optional[Var[Union[int, str]]] = None
 
     # The minimum width of chart container.
-    min_width: Var[int]
+    min_width: Optional[Var[int]] = None
 
     # The minimum height of chart container. Number
-    min_height: Var[int]
+    min_height: Optional[Var[int]] = None
 
     # If specified a positive number, debounced function will be used to handle the resize event.
-    debounce: Var[int]
+    debounce: Optional[Var[int]] = None
 
     # Valid children components
     _valid_children: List[str] = [
@@ -64,34 +64,34 @@ class Legend(Recharts):
     alias = "RechartsLegend"
 
     # The width of legend container. Number
-    width: Var[int]
+    width: Optional[Var[int]] = None
 
     # The height of legend container. Number
-    height: Var[int]
+    height: Optional[Var[int]] = None
 
     # The layout of legend items. 'horizontal' | 'vertical'
-    layout: Var[LiteralLayout]
+    layout: Optional[Var[LiteralLayout]] = None
 
     # The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'.
-    align: Var[LiteralLegendAlign]
+    align: Optional[Var[LiteralLegendAlign]] = None
 
     # The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'.
-    vertical_align: Var[LiteralVerticalAlign]
+    vertical_align: Optional[Var[LiteralVerticalAlign]] = None
 
     # The size of icon in each legend item.
-    icon_size: Var[int]
+    icon_size: Optional[Var[int]] = None
 
     # The type of icon in each legend item. 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'
-    icon_type: Var[LiteralIconType]
+    icon_type: Optional[Var[LiteralIconType]] = None
 
     # The width of chart container, usually calculated internally.
-    chart_width: Var[int]
+    chart_width: Optional[Var[int]] = None
 
     # The height of chart container, usually calculated internally.
-    chart_height: Var[int]
+    chart_height: Optional[Var[int]] = None
 
     # The margin of chart container, usually calculated internally.
-    margin: Var[Dict[str, Any]]
+    margin: Optional[Var[Dict[str, Any]]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -117,28 +117,28 @@ class GraphingTooltip(Recharts):
     alias = "RechartsTooltip"
 
     # The separator between name and value.
-    separator: Var[str]
+    separator: Optional[Var[str]] = None
 
     # The offset size of tooltip. Number
-    offset: Var[int]
+    offset: Optional[Var[int]] = None
 
     # When an item of the payload has value null or undefined, this item won't be displayed.
-    filter_null: Var[bool]
+    filter_null: Optional[Var[bool]] = None
 
     # If set false, no cursor will be drawn when tooltip is active.
-    cursor: Var[bool]
+    cursor: Optional[Var[bool]] = None
 
     # 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]]
+    view_box: Optional[Var[Dict[str, Any]]] = None
 
     # If set true, the tooltip is displayed. If set false, the tooltip is hidden, usually calculated internally.
-    active: Var[bool]
+    active: Optional[Var[bool]] = None
 
     # If this field is set, the tooltip position will be fixed and will not move anymore.
-    position: Var[Dict[str, Any]]
+    position: Optional[Var[Dict[str, Any]]] = None
 
     # The coordinate of tooltip which is usually calculated internally.
-    coordinate: Var[Dict[str, Any]]
+    coordinate: Optional[Var[Dict[str, Any]]] = None
 
 
 class Label(Recharts):
@@ -149,16 +149,16 @@ class Label(Recharts):
     alias = "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]]
+    view_box: Optional[Var[Dict[str, Any]]] = None
 
     # The value of label, which can be specified by this props or the children of <Label />
-    value: Var[str]
+    value: Optional[Var[str]] = None
 
     # The offset of label which can be specified by this props or the children of <Label />
-    offset: Var[int]
+    offset: Optional[Var[int]] = None
 
     # The position of label which can be specified by this props or the children of <Label />
-    position: Var[LiteralPosition]
+    position: Optional[Var[LiteralPosition]] = None
 
 
 class LabelList(Recharts):
@@ -169,16 +169,16 @@ class LabelList(Recharts):
     alias = "RechartsLabelList"
 
     # The key of a group of label values in data.
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # The position of each label relative to it view box。"Top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
-    position: Var[LiteralPosition]
+    position: Optional[Var[LiteralPosition]] = None
 
     # The offset to the specified "position"
-    offset: Var[int]
+    offset: Optional[Var[int]] = None
 
     # Color of the fill
-    fill: Var[str]
+    fill: Optional[Var[str]] = None
 
     # Color of the stroke
-    stroke: Var[str]
+    stroke: Optional[Var[str]] = None
diff --git a/reflex/components/recharts/polar.py b/reflex/components/recharts/polar.py
index 25669574038..ea3d46f73c2 100644
--- a/reflex/components/recharts/polar.py
+++ b/reflex/components/recharts/polar.py
@@ -1,7 +1,7 @@
 """Polar charts in Recharts."""
 from __future__ import annotations
 
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union
 
 from reflex.constants import EventTriggers
 from reflex.vars import Var
@@ -23,55 +23,55 @@ class Pie(Recharts):
     alias = "RechartsPie"
 
     # data
-    data: Var[List[Dict[str, Any]]]
+    data: Optional[Var[List[Dict[str, Any]]]] = None
 
     # The key of each sector's value.
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # 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]]
+    cx: Optional[Var[Union[int, str]]] = None
 
     # The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
-    cy: Var[Union[int, str]]
+    cy: Optional[Var[Union[int, str]]] = None
 
     # The inner radius of pie, which can be set to a percent value.
-    inner_radius: Var[Union[int, str]]
+    inner_radius: Optional[Var[Union[int, str]]] = None
 
     # The outer radius of pie, which can be set to a percent value.
-    outer_radius: Var[Union[int, str]]
+    outer_radius: Optional[Var[Union[int, str]]] = None
 
     # The angle of first sector.
-    start_angle: Var[int]
+    start_angle: Optional[Var[int]] = None
 
     # The direction of sectors. 1 means clockwise and -1 means anticlockwise.
-    end_angle: Var[int]
+    end_angle: Optional[Var[int]] = None
 
     # The minimum angle of each unzero data.
-    min_angle: Var[int]
+    min_angle: Optional[Var[int]] = None
 
     # The angle between two sectors.
-    padding_angle: Var[int]
+    padding_angle: Optional[Var[int]] = None
 
     # The key of each sector's name.
-    name_key: Var[str]
+    name_key: Optional[Var[str]] = None
 
     # The type of icon in legend. If set to 'none', no legend item will be rendered.
-    legend_type: Var[str]
+    legend_type: Optional[Var[str]] = None
 
     # If false set, labels will not be drawn.
     label: Var[bool] = False  # type: ignore
 
     # If false set, label lines will not be drawn.
-    label_line: Var[bool]
+    label_line: Optional[Var[bool]] = None
 
     # Valid children components
     _valid_children: List[str] = ["Cell", "LabelList"]
 
     # fill color
-    fill: Var[str]
+    fill: Optional[Var[str]] = None
 
     # stroke color
-    stroke: Var[str]
+    stroke: Optional[Var[str]] = None
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -97,37 +97,37 @@ class Radar(Recharts):
     alias = "RechartsRadar"
 
     # The key of a group of data which should be unique in a radar chart.
-    data_key: Var[Union[str, int]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # The coordinates of all the vertexes of the radar shape, like [{ x, y }].
-    points: Var[List[Dict[str, Any]]]
+    points: Optional[Var[List[Dict[str, Any]]]] = None
 
     # If false set, dots will not be drawn
-    dot: Var[bool]
+    dot: Optional[Var[bool]] = None
 
     # Stoke color
-    stroke: Var[str]
+    stroke: Optional[Var[str]] = None
 
     # Fill color
-    fill: Var[str]
+    fill: Optional[Var[str]] = None
 
     # opacity
-    fill_opacity: Var[float]
+    fill_opacity: Optional[Var[float]] = None
 
     # The type of icon in legend. If set to 'none', no legend item will be rendered.
-    legend_type: Var[str]
+    legend_type: Optional[Var[str]] = None
 
     # If false set, labels will not be drawn
-    label: Var[bool]
+    label: Optional[Var[bool]] = None
 
     # Specifies when the animation should begin, the unit of this option is ms.
-    animation_begin: Var[int]
+    animation_begin: Optional[Var[int]] = None
 
     # Specifies the duration of animation, the unit of this option is ms.
-    animation_duration: Var[int]
+    animation_duration: Optional[Var[int]] = None
 
     # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
-    animation_easing: Var[LiteralAnimationEasing]
+    animation_easing: Optional[Var[LiteralAnimationEasing]] = None
 
     # Valid children components
     _valid_children: List[str] = ["LabelList"]
@@ -141,19 +141,19 @@ class RadialBar(Recharts):
     alias = "RechartsRadialBar"
 
     # The source data which each element is an object.
-    data: Var[List[Dict[str, Any]]]
+    data: Optional[Var[List[Dict[str, Any]]]] = None
 
     # Min angle of each bar. A positive value between 0 and 360.
-    min_angle: Var[int]
+    min_angle: Optional[Var[int]] = None
 
     # Type of legend
-    legend_type: Var[str]
+    legend_type: Optional[Var[str]] = None
 
     # If false set, labels will not be drawn.
-    label: Var[bool]
+    label: Optional[Var[bool]] = None
 
     # If false set, background sector will not be drawn.
-    background: Var[bool]
+    background: Optional[Var[bool]] = None
 
     # Valid children components
     _valid_children: List[str] = ["LabelList"]
@@ -182,37 +182,37 @@ class PolarAngleAxis(Recharts):
     alias = "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]]
+    data_key: Optional[Var[Union[str, int]]] = None
 
     # 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]]
+    cx: Optional[Var[Union[int, str]]] = None
 
     # The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
-    cy: Var[Union[int, str]]
+    cy: Optional[Var[Union[int, str]]] = None
 
     # The outer radius of circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
-    radius: Var[Union[int, str]]
+    radius: Optional[Var[Union[int, str]]] = None
 
     # If false set, axis line will not be drawn. If true set, axis line will be drawn which have the props calculated internally. If object set, axis line will be drawn which have the props mergered by the internal calculated props and the option.
-    axis_line: Var[Union[bool, Dict[str, Any]]]
+    axis_line: Optional[Var[Union[bool, Dict[str, Any]]]] = None
 
     # The type of axis line.
-    axis_line_type: Var[str]
+    axis_line_type: Optional[Var[str]] = None
 
     # If false set, tick lines will not be drawn. If true set, tick lines will be drawn which have the props calculated internally. If object set, tick lines will be drawn which have the props mergered by the internal calculated props and the option.
-    tick_line: Var[Union[bool, Dict[str, Any]]]
+    tick_line: Optional[Var[Union[bool, Dict[str, Any]]]] = None
 
     # The width or height of tick.
-    tick: Var[Union[int, str]]
+    tick: Optional[Var[Union[int, str]]] = None
 
     # The array of every tick's value and angle.
-    ticks: Var[List[Dict[str, Any]]]
+    ticks: Optional[Var[List[Dict[str, Any]]]] = None
 
     # The orientation of axis text.
-    orient: Var[str]
+    orient: Optional[Var[str]] = None
 
     # Allow the axis has duplicated categorys or not when the type of axis is "category".
-    allow_duplicated_category: Var[bool]
+    allow_duplicated_category: Optional[Var[bool]] = None
 
     # Valid children components
     _valid_children: List[str] = ["Label"]
@@ -241,25 +241,25 @@ class PolarGrid(Recharts):
     alias = "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]]
+    cx: Optional[Var[Union[int, str]]] = None
 
     # The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
-    cy: Var[Union[int, str]]
+    cy: Optional[Var[Union[int, str]]] = None
 
     # The radius of the inner polar grid.
-    inner_radius: Var[Union[int, str]]
+    inner_radius: Optional[Var[Union[int, str]]] = None
 
     # The radius of the outer polar grid.
-    outer_radius: Var[Union[int, str]]
+    outer_radius: Optional[Var[Union[int, str]]] = None
 
     # The array of every line grid's angle.
-    polar_angles: Var[List[int]]
+    polar_angles: Optional[Var[List[int]]] = None
 
     # The array of every line grid's radius.
-    polar_radius: Var[List[int]]
+    polar_radius: Optional[Var[List[int]]] = None
 
     # The type of polar grids. 'polygon' | 'circle'
-    grid_type: Var[LiteralGridType]
+    grid_type: Optional[Var[LiteralGridType]] = None
 
     # Valid children components
     _valid_children: List[str] = ["RadarChart", "RadiarBarChart"]
@@ -273,37 +273,37 @@ class PolarRadiusAxis(Recharts):
     alias = "RechartsPolarRadiusAxis"
 
     # The angle of radial direction line to display axis text.
-    angle: Var[int]
+    angle: Optional[Var[int]] = None
 
     # The type of axis line. 'number' | 'category'
-    type_: Var[LiteralPolarRadiusType]
+    type_: Optional[Var[LiteralPolarRadiusType]] = None
 
     # Allow the axis has duplicated categorys or not when the type of axis is "category".
-    allow_duplicated_category: Var[bool]
+    allow_duplicated_category: Optional[Var[bool]] = None
 
     # The x-coordinate of center.
-    cx: Var[Union[int, str]]
+    cx: Optional[Var[Union[int, str]]] = None
 
     # The y-coordinate of center.
-    cy: Var[Union[int, str]]
+    cy: Optional[Var[Union[int, str]]] = None
 
     # If set to true, the ticks of this axis are reversed.
-    reversed: Var[bool]
+    reversed: Optional[Var[bool]] = None
 
     # The orientation of axis text.
-    orientation: Var[str]
+    orientation: Optional[Var[str]] = None
 
     # If false set, axis line will not be drawn. If true set, axis line will be drawn which have the props calculated internally. If object set, axis line will be drawn which have the props mergered by the internal calculated props and the option.
-    axis_line: Var[Union[bool, Dict[str, Any]]]
+    axis_line: Optional[Var[Union[bool, Dict[str, Any]]]] = None
 
     # The width or height of tick.
-    tick: Var[Union[int, str]]
+    tick: Optional[Var[Union[int, str]]] = None
 
     # The count of ticks.
-    tick_count: Var[int]
+    tick_count: Optional[Var[int]] = None
 
     # If 'auto' set, the scale funtion is linear scale. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold'
-    scale: Var[LiteralScale]
+    scale: Optional[Var[LiteralScale]] = None
 
     # Valid children components
     _valid_children: List[str] = ["Label"]
diff --git a/reflex/components/suneditor/editor.py b/reflex/components/suneditor/editor.py
index 92a1e80c37c..77d1acf844c 100644
--- a/reflex/components/suneditor/editor.py
+++ b/reflex/components/suneditor/editor.py
@@ -116,34 +116,34 @@ class Editor(NoSSRComponent):
     # This is used to set the HTML form name of the editor.
     # This means on HTML form submission,
     # it will be submitted together with contents of the editor by the name provided.
-    name: Var[str]
+    name: Optional[Var[str]] = None
 
     # Sets the default value of the editor.
     # This is useful if you don't want the on_change method to be called on render.
     # If you want the on_change method to be called on render please use the set_contents prop
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None
 
     # Sets the width of the editor.
     # px and percentage values are accepted, eg width="100%" or width="500px"
     # default: 100%
-    width: Var[str]
+    width: Optional[Var[str]] = None
 
     # Sets the height of the editor.
     # px and percentage values are accepted, eg height="100%" or height="100px"
-    height: Var[str]
+    height: Optional[Var[str]] = None
 
     # Sets the placeholder of the editor.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None
 
     # Should the editor receive focus when initialized?
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None
 
     # Pass an EditorOptions instance to modify the behaviour of Editor even more.
-    set_options: Var[Dict]
+    set_options: Optional[Var[Dict]] = None
 
     # Whether all SunEditor plugins should be loaded.
     # default: True
-    set_all_plugins: Var[bool]
+    set_all_plugins: Optional[Var[bool]] = None
 
     # Set the content of the editor.
     # Note: To set the initial contents of the editor
@@ -152,29 +152,29 @@ class Editor(NoSSRComponent):
     # set_contents is used to set the contents of the editor programmatically.
     # You must be aware that, when the set_contents's prop changes,
     # the on_change event is triggered.
-    set_contents: Var[str]
+    set_contents: Optional[Var[str]] = None
 
     # Append editor content
-    append_contents: Var[str]
+    append_contents: Optional[Var[str]] = None
 
     # Sets the default style of the editor's edit area
-    set_default_style: Var[str]
+    set_default_style: Optional[Var[str]] = None
 
     # Disable the editor
     # default: False
-    disable: Var[bool]
+    disable: Optional[Var[bool]] = None
 
     # Hide the editor
     # default: False
-    hide: Var[bool]
+    hide: Optional[Var[bool]] = None
 
     # Hide the editor toolbar
     # default: False
-    hide_toolbar: Var[bool]
+    hide_toolbar: Optional[Var[bool]] = None
 
     # Disable the editor toolbar
     # default: False
-    disable_toolbar: Var[bool]
+    disable_toolbar: Optional[Var[bool]] = None
 
     def _get_imports(self):
         imports = super()._get_imports()
diff --git a/reflex/components/tags/cond_tag.py b/reflex/components/tags/cond_tag.py
index 3143890c4d9..500ab2a9605 100644
--- a/reflex/components/tags/cond_tag.py
+++ b/reflex/components/tags/cond_tag.py
@@ -1,5 +1,4 @@
 """Tag to conditionally render components."""
-
 from typing import Any, Dict, Optional
 
 from reflex.components.tags.tag import Tag
@@ -10,7 +9,7 @@ class CondTag(Tag):
     """A conditional tag."""
 
     # The condition to determine which component to render.
-    cond: Var[Any]
+    cond: Optional[Var[Any]] = None
 
     # The code to render if the condition is true.
     true_value: Dict
diff --git a/reflex/components/tags/iter_tag.py b/reflex/components/tags/iter_tag.py
index a0797193cc2..9ef89ee020a 100644
--- a/reflex/components/tags/iter_tag.py
+++ b/reflex/components/tags/iter_tag.py
@@ -2,7 +2,7 @@
 from __future__ import annotations
 
 import inspect
-from typing import TYPE_CHECKING, Any, Callable, List, Type
+from typing import TYPE_CHECKING, Any, Callable, List, Optional, Type
 
 from reflex.components.tags.tag import Tag
 from reflex.vars import BaseVar, Var
@@ -15,7 +15,7 @@ class IterTag(Tag):
     """An iterator tag."""
 
     # The var to iterate over.
-    iterable: Var[List]
+    iterable: Optional[Var[List]] = None
 
     # The component render function for each item in the iterable.
     render_fn: Callable
diff --git a/reflex/components/tags/match_tag.py b/reflex/components/tags/match_tag.py
index c2f6649d51e..88d2c617d5a 100644
--- a/reflex/components/tags/match_tag.py
+++ b/reflex/components/tags/match_tag.py
@@ -1,6 +1,5 @@
 """Tag to conditionally match cases."""
-
-from typing import Any, List
+from typing import Any, List, Optional
 
 from reflex.components.tags.tag import Tag
 from reflex.vars import Var
@@ -10,7 +9,7 @@ class MatchTag(Tag):
     """A match tag."""
 
     # The condition to determine which case to match.
-    cond: Var[Any]
+    cond: Optional[Var[Any]] = None
 
     # The list of match cases to be matched.
     match_cases: List[Any]
diff --git a/tests/components/test_component.py b/tests/components/test_component.py
index 04468b2ba47..4918f37c49c 100644
--- a/tests/components/test_component.py
+++ b/tests/components/test_component.py
@@ -1,4 +1,4 @@
-from typing import Any, Dict, List, Type
+from typing import Any, Dict, List, Optional, Type
 
 import pytest
 
@@ -45,10 +45,10 @@ def component1() -> Type[Component]:
 
     class TestComponent1(Component):
         # A test string prop.
-        text: Var[str]
+        text: Optional[Var[str]] = None
 
         # A test number prop.
-        number: Var[int]
+        number: Optional[Var[int]] = None
 
         def _get_imports(self) -> imports.ImportDict:
             return {"react": [ImportVar(tag="Component")]}
@@ -69,7 +69,7 @@ def component2() -> Type[Component]:
 
     class TestComponent2(Component):
         # A test list prop.
-        arr: Var[List[str]]
+        arr: Optional[Var[List[str]]] = None
 
         def get_event_triggers(self) -> Dict[str, Any]:
             """Test controlled triggers.
@@ -730,10 +730,10 @@ def test_stateful_banner():
 class ComponentNestedVar(Component):
     """A component with nested Var types."""
 
-    dict_of_dict: Var[Dict[str, Dict[str, str]]]
-    list_of_list: Var[List[List[str]]]
-    list_of_list_of_list: Var[List[List[List[str]]]]
-    list_of_dict: Var[List[Dict[str, str]]]
+    dict_of_dict: Optional[Var[Dict[str, Dict[str, str]]]] = None
+    list_of_list: Optional[Var[List[List[str]]]] = None
+    list_of_list_of_list: Optional[Var[List[List[List[str]]]]] = None
+    list_of_dict: Optional[Var[List[Dict[str, str]]]] = None
 
 
 class EventState(rx.State):
@@ -1191,15 +1191,15 @@ def test_rename_props():
     class C1(Component):
         tag = "C1"
 
-        prop1: Var[str]
-        prop2: Var[str]
+        prop1: Optional[Var[str]] = None
+        prop2: Optional[Var[str]] = None
 
         _rename_props = {"prop1": "renamed_prop1", "prop2": "renamed_prop2"}
 
     class C2(C1):
         tag = "C2"
 
-        prop3: Var[str]
+        prop3: Optional[Var[str]] = None
 
         _rename_props = {"prop2": "subclass_prop2", "prop3": "renamed_prop3"}
 
@@ -1225,9 +1225,9 @@ def test_deprecated_props(capsys):
     class C1(Component):
         tag = "C1"
 
-        type: Var[str]
-        min: Var[str]
-        max: Var[str]
+        type: Optional[Var[str]] = None
+        min: Optional[Var[str]] = None
+        max: Optional[Var[str]] = None
 
     # No warnings are emitted when using the new prop names.
     c1_1 = C1.create(type="type1", min="min1", max="max1")
@@ -1255,9 +1255,9 @@ class C1(Component):
     class C2(Component):
         tag = "C2"
 
-        type_: Var[str]
-        min_: Var[str]
-        max_: Var[str]
+        type_: Optional[Var[str]] = None
+        min_: Optional[Var[str]] = None
+        max_: Optional[Var[str]] = None
 
     # No warnings are emitted if the actual prop has an underscore suffix
     c2_1 = C2.create(type_="type1", min_="min1", max_="max1")

From 78db90d6953aaeea985ebc3bcafbd3b1cb6db118 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 21:22:31 +0100
Subject: [PATCH 25/52] forgot to migrate one type_ to annotation

---
 reflex/components/component.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index af8808654ce..d9d4da32e8c 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -277,7 +277,7 @@ def __init__(self, *args, **kwargs):
                 field_type = EventChain
             elif key in props:
                 # Set the field type.
-                field_type = fields[key].type_
+                field_type = fields[key].annotation
 
             else:
                 continue

From 211f9f35987df9fe0b4659eab5d24f80f7bf3092 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 21:48:16 +0100
Subject: [PATCH 26/52] fix auto-var conversion

---
 reflex/components/component.py | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index d9d4da32e8c..6eeb3d1629d 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -282,6 +282,9 @@ def __init__(self, *args, **kwargs):
             else:
                 continue
 
+            # unwrap Optional from field_type
+            field_type = typing.get_args(field_type)[0] if types.is_optional(field_type) else field_type
+
             # Check whether the key is a component prop.
             if types._issubclass(field_type, Var):
                 try:
@@ -292,7 +295,7 @@ def __init__(self, *args, **kwargs):
                     if kwargs[key] is None:
                         raise TypeError
 
-                    expected_type = fields[key].annotation.__args__[0]
+                    expected_type = field_type.__args__[0]
                     # validate literal fields.
                     types.validate_literal(
                         key, value, expected_type, type(self).__name__
@@ -307,7 +310,7 @@ def __init__(self, *args, **kwargs):
                 except TypeError:
                     # If it is not a valid var, check the base types.
                     passed_type = type(value)
-                    expected_type = fields[key].annotation
+                    expected_type = field_type
                 if not types._issubclass(passed_type, expected_type):
                     value_name = value._var_name if isinstance(value, Var) else value
                     raise TypeError(

From 7789118af331e6872c9fc5854a1e4d36b1e34787 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 21:54:36 +0100
Subject: [PATCH 27/52] prevent calling __bool__ for is_hydrated

---
 reflex/state.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/state.py b/reflex/state.py
index 5ae04534115..a0f080458a4 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -1763,7 +1763,7 @@ def on_load_internal(self) -> list[Event | EventSpec] | None:
         # Do not app.compile_()!  It should be already compiled by now.
         app = getattr(prerequisites.get_app(), constants.CompileVars.APP)
         load_events = app.get_load_events(self.router.page.path)
-        if not load_events and self.is_hydrated:
+        if not load_events and self.is_hydrated is True:
             return  # Fast path for page-to-page navigation
         if not load_events:
             self.is_hydrated = True

From 4380cd266ddae547afc6ef971c4b7ca0955831cf Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 22:44:46 +0100
Subject: [PATCH 28/52] fix pydantic _get_value for MutableProxy

---
 reflex/state.py | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/reflex/state.py b/reflex/state.py
index a0f080458a4..e45c35c1d5a 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -1609,7 +1609,22 @@ def _clean(self):
         self.dirty_vars = set()
         self.dirty_substates = set()
 
-    def get_value(self, key: str) -> Any:
+    def get_value(self, value: Any) -> Any:
+        """Get the value of a field (without proxying).
+
+        The returned value will NOT track dirty state updates.
+
+        Args:
+            value: The value of the field.
+
+        Returns:
+            The value of the field.
+        """
+        if isinstance(value, MutableProxy):
+            return super().get_value(value.__wrapped__)
+        return super().get_value(value)
+
+    def _get_value(self, value: Any, **kwargs) -> Any:
         """Get the value of a field (without proxying).
 
         The returned value will NOT track dirty state updates.
@@ -1620,9 +1635,9 @@ def get_value(self, key: str) -> Any:
         Returns:
             The value of the field.
         """
-        if isinstance(key, MutableProxy):
-            return super().get_value(key.__wrapped__)
-        return super().get_value(key)
+        if isinstance(value, MutableProxy):
+            return super()._get_value(value.__wrapped__, **kwargs)
+        return super()._get_value(value, **kwargs)
 
     def dict(
         self, include_computed: bool = True, initial: bool = False, **kwargs
@@ -2085,6 +2100,10 @@ class Config:
             "_states_locks": {"exclude": True},
         }
 
+        #  json_encoders = {
+        #      MutableProxy: lambda v: v.__wrapped__,
+        #  }
+
     async def get_state(self, token: str) -> BaseState:
         """Get the state for a token.
 

From 80f02753babe4736db766a00d4dd152154030080 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Thu, 29 Feb 2024 22:52:10 +0100
Subject: [PATCH 29/52] add some missing type hints to test state vars

---
 tests/states/mutation.py | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/states/mutation.py b/tests/states/mutation.py
index 5825b6d12bd..465514192a8 100644
--- a/tests/states/mutation.py
+++ b/tests/states/mutation.py
@@ -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 @@ def pop_out_age(self):
         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,7 @@ def add_street_to_home_address(self):
         self.address[0]["street"] = "street address"
 
     # nested dict
-    friend_in_nested_dict = {"name": "Nikhil", "friend": {"name": "Alek"}}
+    friend_in_nested_dict: Dict[str, Union[str, Dict[str,str]]] = {"name": "Nikhil", "friend": {"name": "Alek"}}
 
     def change_friend_name(self):
         """Change the friend's name in the nested dict."""
@@ -67,7 +67,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 +99,7 @@ def remove_tommy(self):
         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 +114,7 @@ def tommy_has_no_fds(self):
         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."""

From 37c360e78683c476f9ee270a01315d90172df08c Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 14:55:34 +0100
Subject: [PATCH 30/52] fix init_subclass for pydantic v2, add some missing
 type hints, format black

---
 reflex/components/component.py                |  6 +++-
 reflex/components/radix/themes/base.py        |  4 ---
 .../radix/themes/components/dropdown_menu.py  |  8 ++++--
 .../radix/themes/components/tooltip.py        |  4 ++-
 reflex/state.py                               | 28 +++++++++++++------
 tests/states/mutation.py                      |  7 +++--
 6 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index 6eeb3d1629d..f98df026a3b 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -283,7 +283,11 @@ def __init__(self, *args, **kwargs):
                 continue
 
             # unwrap Optional from field_type
-            field_type = typing.get_args(field_type)[0] if types.is_optional(field_type) else field_type
+            field_type = (
+                typing.get_args(field_type)[0]
+                if types.is_optional(field_type)
+                else field_type
+            )
 
             # Check whether the key is a component prop.
             if types._issubclass(field_type, Var):
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index 95f21325686..502316a217e 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -100,13 +100,9 @@ def create(
         """
         component = super().create(*children, **props)
         if component.library is None:
-<<<<<<< HEAD
-            component.library = RadixThemesComponent.model_fields["library"].default
-=======
             component.library = RadixThemesComponent.model_fields[
                 "library"
             ].default
->>>>>>> f7035d9b (optionalize some Component props)
         component.alias = "RadixThemes" + (
             component.tag or component.__class__.__name__
         )
diff --git a/reflex/components/radix/themes/components/dropdown_menu.py b/reflex/components/radix/themes/components/dropdown_menu.py
index ae5a9c16057..54d8fb6d057 100644
--- a/reflex/components/radix/themes/components/dropdown_menu.py
+++ b/reflex/components/radix/themes/components/dropdown_menu.py
@@ -113,7 +113,9 @@ class DropdownMenuContent(RadixThemesComponent):
     avoid_collisions: Optional[Var[bool]] = None
 
     # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
-    collision_padding: Optional[Var[Union[float, int, Dict[str, Union[float, int]]]]] = None
+    collision_padding: Optional[
+        Var[Union[float, int, Dict[str, Union[float, int]]]]
+    ] = None
 
     # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
     arrow_padding: Optional[Var[Union[float, int]]] = None
@@ -204,7 +206,9 @@ class DropdownMenuSubContent(RadixThemesComponent):
     avoid_collisions: Optional[Var[bool]] = None
 
     # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
-    collision_padding: Optional[Var[Union[float, int, Dict[str, Union[float, int]]]]] = None
+    collision_padding: Optional[
+        Var[Union[float, int, Dict[str, Union[float, int]]]]
+    ] = None
 
     # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
     arrow_padding: Optional[Var[Union[float, int]]] = None
diff --git a/reflex/components/radix/themes/components/tooltip.py b/reflex/components/radix/themes/components/tooltip.py
index 01859ee089e..9778b34a884 100644
--- a/reflex/components/radix/themes/components/tooltip.py
+++ b/reflex/components/radix/themes/components/tooltip.py
@@ -60,7 +60,9 @@ class Tooltip(RadixThemesComponent):
     avoid_collisions: Optional[Var[bool]] = None
 
     # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
-    collision_padding: Optional[Var[Union[float, int, Dict[str, Union[float, int]]]]] = None
+    collision_padding: Optional[
+        Var[Union[float, int, Dict[str, Union[float, int]]]]
+    ] = None
 
     # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
     arrow_padding: Optional[Var[Union[float, int]]] = None
diff --git a/reflex/state.py b/reflex/state.py
index e45c35c1d5a..26669b98b9d 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -195,7 +195,7 @@ def _split_substate_key(substate_key: str) -> tuple[str, str]:
     return token, state_name
 
 
-class BaseState(Base, ABC, extra=pydantic.Extra.allow):
+class BaseState(Base, ABC, extra="allow"):
     """The state of the app."""
 
     # A map from the var name to the var.
@@ -288,7 +288,11 @@ def __init__(
         kwargs["parent_state"] = parent_state
 
         for prop_name, prop in self.base_vars.items():
-            if prop_name not in kwargs and self.model_fields[prop_name].is_required():
+            if (
+                prop_name not in kwargs
+                and prop_name in self.model_fields
+                and self.model_fields[prop_name].is_required()
+            ):
                 kwargs[prop_name] = prop.get_default_value()
 
         super().__init__(*args, **kwargs)
@@ -362,7 +366,7 @@ def _get_computed_vars(cls) -> list[ComputedVar]:
         ]
 
     @classmethod
-    def __init_subclass__(cls, **kwargs):
+    def __pydantic_init_subclass__(cls, **kwargs: Any) -> None:
         """Do some magic for the subclass initialization.
 
         Args:
@@ -371,7 +375,7 @@ def __init_subclass__(cls, **kwargs):
         Raises:
             ValueError: If a substate class shadows another.
         """
-        super().__init_subclass__(**kwargs)
+        #  super().__init_subclass__(**kwargs)
         # Event handlers should not shadow builtin state methods.
         cls._check_overridden_methods()
 
@@ -486,6 +490,12 @@ def __init_subclass__(cls, **kwargs):
             cls.event_handlers[name] = handler
             setattr(cls, name, handler)
 
+        # Inherited vars are handled in __getattribute__, not by pydantic
+        for prop in cls.model_fields.copy():
+            if prop in cls.inherited_vars or prop in cls.inherited_backend_vars:
+                del cls.model_fields[prop]
+        cls.model_rebuild(force=True)
+
         cls._init_var_dependency_dicts()
 
     @staticmethod
@@ -994,9 +1004,6 @@ def __getattribute__(self, name: str) -> Any:
         # If the state hasn't been initialized yet, return the default value.
         if not super().__getattribute__("__dict__"):
             return super().__getattribute__(name)
-        private_attrs = super().__getattribute__("__pydantic_private__")
-        if private_attrs is None:
-            return super().__getattribute__(name)
 
         inherited_vars = {
             **super().__getattribute__("inherited_vars"),
@@ -1009,6 +1016,9 @@ def __getattribute__(self, name: str) -> Any:
             if parent_state is not None:
                 return getattr(parent_state, name)
 
+        private_attrs = super().__getattribute__("__pydantic_private__")
+        if private_attrs is None:
+            return super().__getattribute__(name)
         backend_vars = private_attrs["_backend_vars"]
         if name in backend_vars:
             value = backend_vars[name]
@@ -1088,7 +1098,9 @@ def _reset_client_storage(self):
         # on the browser also resets the values on the backend.
         fields = self.get_fields()
         for prop_name in self.base_vars:
-            field = fields[prop_name]
+            if not (field := fields.get(prop_name)):
+                # inherited values are reset in the parent state
+                continue
             if isinstance(field.default, ClientStorageBase) or (
                 isinstance(field.annotation, type)
                 and issubclass(field.annotation, ClientStorageBase)
diff --git a/tests/states/mutation.py b/tests/states/mutation.py
index 465514192a8..4fa26586c7f 100644
--- a/tests/states/mutation.py
+++ b/tests/states/mutation.py
@@ -37,7 +37,7 @@ def pop_out_age(self):
         self.details.pop("age")
 
     # dict in list
-    address: List[Dict[str,str]] = [{"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 @@ def add_street_to_home_address(self):
         self.address[0]["street"] = "street address"
 
     # nested dict
-    friend_in_nested_dict: Dict[str, Union[str, Dict[str,str]]] = {"name": "Nikhil", "friend": {"name": "Alek"}}
+    friend_in_nested_dict: Dict[str, Union[str, Dict[str, str]]] = {
+        "name": "Nikhil",
+        "friend": {"name": "Alek"},
+    }
 
     def change_friend_name(self):
         """Change the friend's name in the nested dict."""

From 45cb36f59a0ddd303d40d5155b26a911f9cb82ba Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 15:08:59 +0100
Subject: [PATCH 31/52] pydantic copy is deprecated in favor of model_copy

---
 reflex/components/component.py | 2 +-
 reflex/event.py                | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index f98df026a3b..f4807f11f6f 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -1854,7 +1854,7 @@ def create(cls, *children, **props) -> Component:
         """
         comp = super().create(*children, **props)
         if comp.get_hooks():
-            comp._memoization_mode = cls._memoization_mode.copy(
+            comp._memoization_mode = cls._memoization_mode.model_copy(
                 update={"disposition": MemoizationDisposition.ALWAYS}
             )
         return comp
diff --git a/reflex/event.py b/reflex/event.py
index 912a18d4f0c..b9c39f0c27a 100644
--- a/reflex/event.py
+++ b/reflex/event.py
@@ -125,7 +125,7 @@ def stop_propagation(self):
         Returns:
             New EventHandler-like with stopPropagation set to True.
         """
-        return self.copy(
+        return self.model_copy(
             update={"event_actions": {"stopPropagation": True, **self.event_actions}},
         )
 
@@ -136,7 +136,7 @@ def prevent_default(self):
         Returns:
             New EventHandler-like with preventDefault set to True.
         """
-        return self.copy(
+        return self.model_copy(
             update={"event_actions": {"preventDefault": True, **self.event_actions}},
         )
 

From b65c34b212a1311b0ba6a71d6d21ce2f44084314 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 15:10:22 +0100
Subject: [PATCH 32/52] update_forward_refs -> model_rebuild

---
 reflex/style.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/style.py b/reflex/style.py
index 3b916da431e..3ee03fdab1c 100644
--- a/reflex/style.py
+++ b/reflex/style.py
@@ -10,7 +10,7 @@
 from reflex.utils.imports import ImportVar
 from reflex.vars import BaseVar, Var, VarData
 
-VarData.update_forward_refs()  # Ensure all type definitions are resolved
+VarData.model_rebuild(force=True)  # Ensure all type definitions are resolved
 
 LIGHT_COLOR_MODE: str = "light"
 DARK_COLOR_MODE: str = "dark"

From b565e8934ac640b5ddd90560727f0a4066b110fd Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 18:06:42 +0100
Subject: [PATCH 33/52] dict -> model_dump and field_info fixes

---
 reflex/components/chakra/forms/multiselect.py | 2 +-
 reflex/components/suneditor/editor.py         | 2 +-
 reflex/event.py                               | 2 +-
 reflex/model.py                               | 2 +-
 reflex/vars.py                                | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/reflex/components/chakra/forms/multiselect.py b/reflex/components/chakra/forms/multiselect.py
index db4739c97a2..7d9a73e06c6 100644
--- a/reflex/components/chakra/forms/multiselect.py
+++ b/reflex/components/chakra/forms/multiselect.py
@@ -348,7 +348,7 @@ def create(
                     converted_options.append(Option(label=str(option), value=option))
                 else:
                     converted_options.append(option)
-            props["options"] = [o.dict() for o in converted_options]
+            props["options"] = [o.model_dump() for o in converted_options]
         else:
             props["options"] = options
         return super().create(*[], **props)
diff --git a/reflex/components/suneditor/editor.py b/reflex/components/suneditor/editor.py
index 77d1acf844c..2b71985572d 100644
--- a/reflex/components/suneditor/editor.py
+++ b/reflex/components/suneditor/editor.py
@@ -225,7 +225,7 @@ def create(cls, set_options: Optional[EditorOptions] = None, **props) -> Compone
                 raise ValueError("EditorOptions cannot be a state Var")
             props["set_options"] = {
                 to_camel_case(k): v
-                for k, v in set_options.dict().items()
+                for k, v in set_options.model_dump().items()
                 if v is not None
             }
         return super().create(*[], **props)
diff --git a/reflex/event.py b/reflex/event.py
index b9c39f0c27a..26ef59d0a18 100644
--- a/reflex/event.py
+++ b/reflex/event.py
@@ -262,7 +262,7 @@ def __init__(self, fn: Callable[..., EventSpec] | None = None, **kwargs):
             default_event_spec = fn()
             super().__init__(
                 fn=fn,  # type: ignore
-                **default_event_spec.dict(),
+                **default_event_spec.model_dump(),
                 **kwargs,
             )
         else:
diff --git a/reflex/model.py b/reflex/model.py
index f7396fad542..5448c665a31 100644
--- a/reflex/model.py
+++ b/reflex/model.py
@@ -63,7 +63,7 @@ def __init_subclass__(cls):
             field_name
             for field_name, field in cls.model_fields.items()
             if field_name != "id"
-            and getattr(field.field_info, "primary_key", None) is True
+            and getattr(field, "primary_key", None) is True
         ]
         if non_default_primary_key_fields:
             cls.model_fields.pop("id", None)
diff --git a/reflex/vars.py b/reflex/vars.py
index e0b94da7806..7a502ed8997 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -199,7 +199,7 @@ def dict(self) -> dict:
             "state": self.state,
             "interpolations": list(self.interpolations),
             "imports": {
-                lib: [import_var.dict() for import_var in import_vars]
+                lib: [import_var.model_dump() for import_var in import_vars]
                 for lib, import_vars in self.imports.items()
             },
             "hooks": list(self.hooks),

From b3593537beadbdaf7ebf3d7f526b5e5f3eb2c0d8 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 18:09:37 +0100
Subject: [PATCH 34/52] fix VarData json loads

---
 reflex/vars.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/vars.py b/reflex/vars.py
index 7a502ed8997..7cf4bb9d240 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -248,7 +248,7 @@ def _decode_var(value: str) -> tuple[VarData | None, str]:
 
         def json_loads(s):
             try:
-                return VarData.model_validate(s)
+                return VarData.model_validate_json(s).model_dump()
             except pydantic_core.ValidationError as e:
                 raise ValueError(f"Invalid VarData: {s}") from e
                 #  return VarData.model_validate(var_data_config.json_loads(f'"{s}"'))

From 0240541d0b706dc1df1135b3dbc936b83311c423 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 18:23:42 +0100
Subject: [PATCH 35/52] migrate pydantic config classes to ConfigDict

---
 reflex/base.py   | 12 ++++++------
 reflex/config.py |  8 ++++----
 reflex/event.py  | 20 ++++++++++----------
 reflex/model.py  |  3 +--
 reflex/state.py  | 20 +++++++++++---------
 5 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/reflex/base.py b/reflex/base.py
index 1b282e83fc6..ecc7b1683d2 100644
--- a/reflex/base.py
+++ b/reflex/base.py
@@ -50,12 +50,12 @@ class Base(pydantic.BaseModel):
     frontend and backend should subclass this class.
     """
 
-    class Config:
-        """Pydantic config."""
-
-        arbitrary_types_allowed = True
-        use_enum_values = True
-        extra = "allow"
+    # Pydantic config
+    model_config = pydantic.ConfigDict(
+        arbitrary_types_allowed=True,
+        use_enum_values=True,
+        extra="allow",
+    )
 
     def json(self) -> str:
         """Convert the object to a json string.
diff --git a/reflex/config.py b/reflex/config.py
index 3965afe7a1e..d30a58cee68 100644
--- a/reflex/config.py
+++ b/reflex/config.py
@@ -127,10 +127,10 @@ def get_url(self) -> str:
 class Config(Base):
     """A Reflex config."""
 
-    class Config:
-        """Pydantic config for the config."""
-
-        validate_assignment = True
+    # Pydantic config
+    model_config = pydantic.ConfigDict(
+        validate_assignment=True,
+    )
 
     # The name of the app.
     app_name: str
diff --git a/reflex/event.py b/reflex/event.py
index 26ef59d0a18..75ae96a8624 100644
--- a/reflex/event.py
+++ b/reflex/event.py
@@ -16,6 +16,8 @@
     Union,
 )
 
+from pydantic import ConfigDict
+
 from reflex import constants
 from reflex.base import Base
 from reflex.utils import console, format
@@ -147,11 +149,10 @@ class EventHandler(EventActionsMixin):
     # The function to call in response to the event.
     fn: Any
 
-    class Config:
-        """The Pydantic config."""
-
-        # Needed to allow serialization of Callable.
-        frozen = True
+    # Pydantic config
+    model_config = ConfigDict(
+        frozen=True,  # Needed to allow serialization of Callable.
+    )
 
     @property
     def is_background(self) -> bool:
@@ -219,11 +220,10 @@ class EventSpec(EventActionsMixin):
     # TODO: pydantic v2 add rx.Var type annotation?
     args: Tuple[Tuple[Any, Any], ...] = ()
 
-    class Config:
-        """The Pydantic config."""
-
-        # Required to allow tuple fields.
-        frozen = True
+    # Pydantic config
+    model_config = ConfigDict(
+        frozen=True,  # Required to allow tuple fields.
+    )
 
     def with_args(self, args: Tuple[Tuple[Var, Var], ...]) -> EventSpec:
         """Copy the event spec, with updated args.
diff --git a/reflex/model.py b/reflex/model.py
index 5448c665a31..c556a448230 100644
--- a/reflex/model.py
+++ b/reflex/model.py
@@ -62,8 +62,7 @@ def __init_subclass__(cls):
         non_default_primary_key_fields = [
             field_name
             for field_name, field in cls.model_fields.items()
-            if field_name != "id"
-            and getattr(field, "primary_key", None) is True
+            if field_name != "id" and getattr(field, "primary_key", None) is True
         ]
         if non_default_primary_key_fields:
             cls.model_fields.pop("id", None)
diff --git a/reflex/state.py b/reflex/state.py
index 26669b98b9d..6ddef6a3d11 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -2104,17 +2104,19 @@ class StateManagerMemory(StateManager):
     # The dict of mutexes for each client
     _states_locks: Dict[str, asyncio.Lock] = pydantic.PrivateAttr({})
 
-    class Config:
-        """The Pydantic config."""
-
-        # TODO: pydantic v2
-        fields = {
-            "_states_locks": {"exclude": True},
-        }
-
+    # Pydantic config
+    model_config = pydantic.ConfigDict(
+        arbitrary_types_allowed=True,
+        use_enum_values=True,
+        extra="allow",
         #  json_encoders = {
-        #      MutableProxy: lambda v: v.__wrapped__,
+        #      MutableProxy: lambda v: v.__wrapped__, # this is currently done in _get_value
         #  }
+        # TODO: pydantic v2
+        #  fields = {
+        #      "_states_locks": {"exclude": True},
+        #  }
+    )
 
     async def get_state(self, token: str) -> BaseState:
         """Get the state for a token.

From db3c791603d440f4c51b6c03f0060893b39b40d9 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 18:26:44 +0100
Subject: [PATCH 36/52] add hint for VarData deserialization

---
 reflex/vars.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/reflex/vars.py b/reflex/vars.py
index 7cf4bb9d240..a8e0d267fd2 100644
--- a/reflex/vars.py
+++ b/reflex/vars.py
@@ -248,6 +248,7 @@ def _decode_var(value: str) -> tuple[VarData | None, str]:
 
         def json_loads(s):
             try:
+                # TODO: go one pydantic api level lower to load json directly into dict
                 return VarData.model_validate_json(s).model_dump()
             except pydantic_core.ValidationError as e:
                 raise ValueError(f"Invalid VarData: {s}") from e

From 32bc17b757c14923eea03ef7b0056dea4210067b Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 19:10:45 +0100
Subject: [PATCH 37/52] minor IconButton default value fix

---
 reflex/components/chakra/forms/iconbutton.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/components/chakra/forms/iconbutton.py b/reflex/components/chakra/forms/iconbutton.py
index bd53ecae03f..b89214edb44 100644
--- a/reflex/components/chakra/forms/iconbutton.py
+++ b/reflex/components/chakra/forms/iconbutton.py
@@ -19,7 +19,7 @@ class IconButton(Text):
     aria_label: Optional[Var[str]] = None
 
     # The icon to be used in the button.
-    icon: Optional[Component]
+    icon: Optional[Component] = None
 
     # If true, the button will be styled in its active state.
     is_active: Optional[Var[bool]] = None

From 99c28f843345754bb0bdd375d9c48e55123d159d Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 19:20:14 +0100
Subject: [PATCH 38/52] add proper pydantic v2 FieldInfo annotation

---
 reflex/compiler/utils.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py
index 701b50f842d..80d05acca79 100644
--- a/reflex/compiler/utils.py
+++ b/reflex/compiler/utils.py
@@ -4,6 +4,7 @@
 import os
 from typing import Any, Callable, Dict, Optional, Type, Union
 from urllib.parse import urlparse
+from pydantic.fields import FieldInfo
 
 from reflex import constants
 from reflex.components.base import (
@@ -147,7 +148,7 @@ def compile_state(state: Type[BaseState]) -> dict:
 
 
 def _compile_client_storage_field(
-    field,
+    field: FieldInfo,
 ) -> tuple[Type[Cookie] | Type[LocalStorage] | None, dict[str, Any] | None]:
     """Compile the given cookie or local_storage field.
 

From 7534b2caf26e18c9bf26281f65f2669317719bc2 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 19:21:39 +0100
Subject: [PATCH 39/52] my regex was not smart enough

---
 reflex/components/base/script.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/reflex/components/base/script.py b/reflex/components/base/script.py
index 752d7c92fa7..e2721ebdf13 100644
--- a/reflex/components/base/script.py
+++ b/reflex/components/base/script.py
@@ -1,5 +1,4 @@
 """Next.js script wrappers and inline script functionality.
-from typing import Optional
 https://nextjs.org/docs/app/api-reference/components/script.
 """
 from __future__ import annotations

From 935286b4642debd6f5660f4fca941e00db441285 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 23:01:36 +0100
Subject: [PATCH 40/52] add Component.tag str type annotation

---
 integration/test_event_actions.py             |  2 +-
 reflex/components/base/body.py                |  2 +-
 reflex/components/base/document.py            |  8 +--
 reflex/components/base/fragment.py            |  2 +-
 reflex/components/base/head.py                |  2 +-
 reflex/components/base/link.py                |  4 +-
 reflex/components/base/meta.py                |  4 +-
 reflex/components/base/script.py              |  2 +-
 reflex/components/chakra/base.py              |  4 +-
 reflex/components/chakra/datadisplay/badge.py |  2 +-
 reflex/components/chakra/datadisplay/code.py  |  2 +-
 .../components/chakra/datadisplay/divider.py  |  2 +-
 .../chakra/datadisplay/keyboard_key.py        |  2 +-
 reflex/components/chakra/datadisplay/list.py  |  8 +--
 reflex/components/chakra/datadisplay/stat.py  | 12 ++--
 reflex/components/chakra/datadisplay/table.py | 18 +++---
 reflex/components/chakra/datadisplay/tag.py   | 10 ++--
 .../components/chakra/disclosure/accordion.py | 10 ++--
 reflex/components/chakra/disclosure/tabs.py   | 10 ++--
 .../chakra/disclosure/transition.py           | 10 ++--
 .../chakra/disclosure/visuallyhidden.py       |  2 +-
 reflex/components/chakra/feedback/alert.py    |  8 +--
 .../chakra/feedback/circularprogress.py       |  4 +-
 reflex/components/chakra/feedback/progress.py |  2 +-
 reflex/components/chakra/feedback/skeleton.py |  6 +-
 reflex/components/chakra/feedback/spinner.py  |  2 +-
 reflex/components/chakra/forms/button.py      |  4 +-
 reflex/components/chakra/forms/checkbox.py    |  4 +-
 .../chakra/forms/colormodeswitch.py           |  2 +-
 reflex/components/chakra/forms/editable.py    |  8 +--
 reflex/components/chakra/forms/form.py        | 10 ++--
 reflex/components/chakra/forms/iconbutton.py  |  2 +-
 reflex/components/chakra/forms/input.py       | 12 ++--
 reflex/components/chakra/forms/multiselect.py |  2 +-
 reflex/components/chakra/forms/numberinput.py | 10 ++--
 reflex/components/chakra/forms/pininput.py    |  4 +-
 reflex/components/chakra/forms/radio.py       |  4 +-
 reflex/components/chakra/forms/rangeslider.py |  8 +--
 reflex/components/chakra/forms/select.py      |  4 +-
 reflex/components/chakra/forms/slider.py      | 10 ++--
 reflex/components/chakra/forms/switch.py      |  2 +-
 reflex/components/chakra/forms/textarea.py    |  2 +-
 .../components/chakra/layout/aspect_ratio.py  |  2 +-
 reflex/components/chakra/layout/box.py        |  2 +-
 reflex/components/chakra/layout/card.py       |  8 +--
 reflex/components/chakra/layout/center.py     |  6 +-
 reflex/components/chakra/layout/container.py  |  2 +-
 reflex/components/chakra/layout/flex.py       |  2 +-
 reflex/components/chakra/layout/grid.py       |  6 +-
 reflex/components/chakra/layout/spacer.py     |  2 +-
 reflex/components/chakra/layout/stack.py      |  6 +-
 reflex/components/chakra/layout/wrap.py       |  4 +-
 reflex/components/chakra/media/avatar.py      |  6 +-
 reflex/components/chakra/media/icon.py        |  2 +-
 reflex/components/chakra/media/image.py       |  2 +-
 .../chakra/navigation/breadcrumb.py           |  8 +--
 reflex/components/chakra/navigation/link.py   |  2 +-
 .../chakra/navigation/linkoverlay.py          |  4 +-
 .../components/chakra/navigation/stepper.py   | 18 +++---
 .../components/chakra/overlay/alertdialog.py  | 14 ++---
 reflex/components/chakra/overlay/drawer.py    | 14 ++---
 reflex/components/chakra/overlay/menu.py      | 16 +++---
 reflex/components/chakra/overlay/modal.py     | 14 ++---
 reflex/components/chakra/overlay/popover.py   | 18 +++---
 reflex/components/chakra/overlay/tooltip.py   |  2 +-
 .../components/chakra/typography/heading.py   |  2 +-
 .../components/chakra/typography/highlight.py |  2 +-
 reflex/components/chakra/typography/span.py   |  2 +-
 reflex/components/chakra/typography/text.py   |  2 +-
 reflex/components/core/client_side_routing.py |  4 +-
 reflex/components/core/debounce.py            |  2 +-
 reflex/components/core/upload.py              |  4 +-
 reflex/components/datadisplay/code.py         |  2 +-
 reflex/components/datadisplay/dataeditor.py   |  2 +-
 reflex/components/el/elements/forms.py        | 28 +++++-----
 reflex/components/el/elements/inline.py       | 56 +++++++++----------
 reflex/components/el/elements/media.py        | 28 +++++-----
 reflex/components/el/elements/metadata.py     | 12 ++--
 reflex/components/el/elements/other.py        | 14 ++---
 reflex/components/el/elements/scripts.py      |  6 +-
 reflex/components/el/elements/sectioning.py   | 30 +++++-----
 reflex/components/el/elements/tables.py       | 20 +++----
 reflex/components/el/elements/typography.py   | 30 +++++-----
 reflex/components/gridjs/datatable.py         |  2 +-
 reflex/components/lucide/icon.py              |  2 +-
 reflex/components/markdown/markdown.py        |  2 +-
 reflex/components/next/image.py               |  2 +-
 reflex/components/next/link.py                |  2 +-
 reflex/components/next/video.py               |  2 +-
 reflex/components/plotly/plotly.py            |  2 +-
 .../components/radix/primitives/accordion.py  | 10 ++--
 reflex/components/radix/primitives/drawer.py  | 16 +++---
 reflex/components/radix/primitives/form.py    | 14 ++---
 .../components/radix/primitives/progress.py   |  4 +-
 reflex/components/radix/primitives/slider.py  |  8 +--
 reflex/components/radix/themes/base.py        |  6 +-
 .../radix/themes/components/alert_dialog.py   | 14 ++---
 .../radix/themes/components/aspect_ratio.py   |  2 +-
 .../radix/themes/components/avatar.py         |  2 +-
 .../radix/themes/components/badge.py          |  2 +-
 .../radix/themes/components/button.py         |  2 +-
 .../radix/themes/components/callout.py        |  6 +-
 .../radix/themes/components/card.py           |  2 +-
 .../radix/themes/components/checkbox.py       |  4 +-
 .../radix/themes/components/context_menu.py   | 16 +++---
 .../radix/themes/components/dialog.py         | 12 ++--
 .../radix/themes/components/dropdown_menu.py  | 16 +++---
 .../radix/themes/components/hover_card.py     |  6 +-
 .../radix/themes/components/icon_button.py    |  2 +-
 .../radix/themes/components/inset.py          |  2 +-
 .../radix/themes/components/popover.py        |  8 +--
 .../radix/themes/components/radio_group.py    |  4 +-
 .../radix/themes/components/scroll_area.py    |  2 +-
 .../radix/themes/components/select.py         | 14 ++---
 .../radix/themes/components/separator.py      |  2 +-
 .../radix/themes/components/slider.py         |  2 +-
 .../radix/themes/components/switch.py         |  2 +-
 .../radix/themes/components/table.py          | 14 ++---
 .../radix/themes/components/tabs.py           |  8 +--
 .../radix/themes/components/text_area.py      |  2 +-
 .../radix/themes/components/text_field.py     |  6 +-
 .../radix/themes/components/tooltip.py        |  2 +-
 reflex/components/radix/themes/layout/box.py  |  2 +-
 .../radix/themes/layout/container.py          |  2 +-
 reflex/components/radix/themes/layout/flex.py |  2 +-
 reflex/components/radix/themes/layout/grid.py |  2 +-
 .../components/radix/themes/layout/section.py |  2 +-
 .../radix/themes/typography/blockquote.py     |  2 +-
 .../radix/themes/typography/code.py           |  2 +-
 .../radix/themes/typography/heading.py        |  2 +-
 .../radix/themes/typography/link.py           |  2 +-
 .../radix/themes/typography/text.py           | 10 ++--
 .../components/react_player/react_player.py   |  2 +-
 reflex/components/recharts/cartesian.py       | 30 +++++-----
 reflex/components/recharts/charts.py          | 20 +++----
 reflex/components/recharts/general.py         | 10 ++--
 reflex/components/recharts/polar.py           | 12 ++--
 reflex/components/suneditor/editor.py         |  2 +-
 tests/components/test_component.py            | 16 +++---
 tests/test_app.py                             |  6 +-
 140 files changed, 493 insertions(+), 493 deletions(-)

diff --git a/integration/test_event_actions.py b/integration/test_event_actions.py
index 67605639afb..ced91b79230 100644
--- a/integration/test_event_actions.py
+++ b/integration/test_event_actions.py
@@ -25,7 +25,7 @@ def on_click2(self):
     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/reflex/components/base/body.py b/reflex/components/base/body.py
index ee38cb5d407..99833b8366a 100644
--- a/reflex/components/base/body.py
+++ b/reflex/components/base/body.py
@@ -6,4 +6,4 @@
 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 8f841cb5241..e5500530a10 100644
--- a/reflex/components/base/document.py
+++ b/reflex/components/base/document.py
@@ -14,7 +14,7 @@ class NextDocumentLib(Component):
 class Html(NextDocumentLib):
     """The document html."""
 
-    tag = "Html"
+    tag: str = "Html"
 
     lang: Optional[str]
 
@@ -22,16 +22,16 @@ class Html(NextDocumentLib):
 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"
diff --git a/reflex/components/base/fragment.py b/reflex/components/base/fragment.py
index 99554ede9e3..22e9d797a4b 100644
--- a/reflex/components/base/fragment.py
+++ b/reflex/components/base/fragment.py
@@ -6,4 +6,4 @@ class Fragment(Component):
     """A React fragment to return multiple components from a function without wrapping it in a container."""
 
     library = "react"
-    tag = "Fragment"
+    tag: str = "Fragment"
diff --git a/reflex/components/base/head.py b/reflex/components/base/head.py
index c8a63e7b4df..34a5e71afa7 100644
--- a/reflex/components/base/head.py
+++ b/reflex/components/base/head.py
@@ -12,6 +12,6 @@ class NextHeadLib(Component):
 class Head(NextHeadLib, MemoizationLeaf):
     """Head Component."""
 
-    tag = "NextHead"
+    tag: str = "NextHead"
 
     is_default = True
diff --git a/reflex/components/base/link.py b/reflex/components/base/link.py
index b2a69616304..4a78ffa09f9 100644
--- a/reflex/components/base/link.py
+++ b/reflex/components/base/link.py
@@ -8,7 +8,7 @@
 class RawLink(Component):
     """A component that displays the title of the current page."""
 
-    tag = "link"
+    tag: str = "link"
 
     # The href.
     href: Optional[Var[str]] = None
@@ -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_: Optional[Var[str]] = None
diff --git a/reflex/components/base/meta.py b/reflex/components/base/meta.py
index 55cb42f0ab3..1a310bf311c 100644
--- a/reflex/components/base/meta.py
+++ b/reflex/components/base/meta.py
@@ -11,7 +11,7 @@
 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 @@ def render(self) -> dict:
 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 e2721ebdf13..b3fe74f49de 100644
--- a/reflex/components/base/script.py
+++ b/reflex/components/base/script.py
@@ -20,7 +20,7 @@ class Script(Component):
     """
 
     library = "next/script"
-    tag = "Script"
+    tag: str = "Script"
     is_default = True
 
     # Required unless inline script is used
diff --git a/reflex/components/chakra/base.py b/reflex/components/chakra/base.py
index f93005726e1..ab502864662 100644
--- a/reflex/components/chakra/base.py
+++ b/reflex/components/chakra/base.py
@@ -53,7 +53,7 @@ def _get_dependencies_imports(cls) -> imports.ImportDict:
 class ChakraProvider(ChakraComponent):
     """Top level Chakra provider must be included in any app using chakra components."""
 
-    tag = "ChakraProvider"
+    tag: str = "ChakraProvider"
 
     theme: Optional[Var[str]] = None
 
@@ -93,7 +93,7 @@ class ChakraColorModeProvider(Component):
     """Next-themes integration for chakra colorModeProvider."""
 
     library = "/components/reflex/chakra_color_mode_provider.js"
-    tag = "ChakraColorModeProvider"
+    tag: str = "ChakraColorModeProvider"
     is_default = True
 
 
diff --git a/reflex/components/chakra/datadisplay/badge.py b/reflex/components/chakra/datadisplay/badge.py
index 01f1d5c458e..80a9898e87c 100644
--- a/reflex/components/chakra/datadisplay/badge.py
+++ b/reflex/components/chakra/datadisplay/badge.py
@@ -8,7 +8,7 @@
 class Badge(ChakraComponent):
     """A badge component."""
 
-    tag = "Badge"
+    tag: str = "Badge"
 
     # Variant of the badge ("solid" | "subtle" | "outline")
     variant: Optional[Var[LiteralVariant]] = None
diff --git a/reflex/components/chakra/datadisplay/code.py b/reflex/components/chakra/datadisplay/code.py
index fe1016b7af9..b2931c6d0a2 100644
--- a/reflex/components/chakra/datadisplay/code.py
+++ b/reflex/components/chakra/datadisplay/code.py
@@ -7,4 +7,4 @@
 class Code(ChakraComponent):
     """Used to display inline code."""
 
-    tag = "Code"
+    tag: str = "Code"
diff --git a/reflex/components/chakra/datadisplay/divider.py b/reflex/components/chakra/datadisplay/divider.py
index b7d07563233..0bafce00c7c 100644
--- a/reflex/components/chakra/datadisplay/divider.py
+++ b/reflex/components/chakra/datadisplay/divider.py
@@ -10,7 +10,7 @@
 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: Optional[Var[LiteralLayout]] = None
diff --git a/reflex/components/chakra/datadisplay/keyboard_key.py b/reflex/components/chakra/datadisplay/keyboard_key.py
index f9068284d5b..0e568e56aec 100644
--- a/reflex/components/chakra/datadisplay/keyboard_key.py
+++ b/reflex/components/chakra/datadisplay/keyboard_key.py
@@ -6,4 +6,4 @@
 class KeyboardKey(ChakraComponent):
     """Display a keyboard key text."""
 
-    tag = "Kbd"
+    tag: str = "Kbd"
diff --git a/reflex/components/chakra/datadisplay/list.py b/reflex/components/chakra/datadisplay/list.py
index cc32b810618..d3248e19662 100644
--- a/reflex/components/chakra/datadisplay/list.py
+++ b/reflex/components/chakra/datadisplay/list.py
@@ -14,7 +14,7 @@
 class List(ChakraComponent, Generic[T]):
     """Display a list of items."""
 
-    tag = "List"
+    tag: str = "List"
 
     # The space between each list item
     spacing: Optional[Var[str]] = None
@@ -50,16 +50,16 @@ def create(
 class ListItem(ChakraComponent):
     """A single list item."""
 
-    tag = "ListItem"
+    tag: str = "ListItem"
 
 
 class OrderedList(List):
     """An ordered list component with numbers."""
 
-    tag = "OrderedList"
+    tag: str = "OrderedList"
 
 
 class UnorderedList(List):
     """An unordered list component with bullets."""
 
-    tag = "UnorderedList"
+    tag: str = "UnorderedList"
diff --git a/reflex/components/chakra/datadisplay/stat.py b/reflex/components/chakra/datadisplay/stat.py
index 58078cef39c..71e4189bd35 100644
--- a/reflex/components/chakra/datadisplay/stat.py
+++ b/reflex/components/chakra/datadisplay/stat.py
@@ -9,7 +9,7 @@
 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(
@@ -51,25 +51,25 @@ def create(
 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_: Optional[Var[str]] = None
@@ -78,4 +78,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/chakra/datadisplay/table.py b/reflex/components/chakra/datadisplay/table.py
index b2237817b24..65a925c2473 100644
--- a/reflex/components/chakra/datadisplay/table.py
+++ b/reflex/components/chakra/datadisplay/table.py
@@ -11,7 +11,7 @@
 class Table(ChakraComponent):
     """A table component."""
 
-    tag = "Table"
+    tag: str = "Table"
 
     # The color scheme of the table
     color_scheme: Optional[Var[str]] = None
@@ -62,7 +62,7 @@ def create(
 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 @@ def validate_headers(headers):
 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 @@ def validate_rows(rows):
 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 @@ def validate_footers(footers):
 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 @@ def create(cls, *children, cell_type: str = "", cells=None, **props) -> Componen
 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: Optional[Var[str]] = None
@@ -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/chakra/datadisplay/tag.py b/reflex/components/chakra/datadisplay/tag.py
index 7fd9e895461..eaa7a7508f6 100644
--- a/reflex/components/chakra/datadisplay/tag.py
+++ b/reflex/components/chakra/datadisplay/tag.py
@@ -14,31 +14,31 @@
 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/chakra/disclosure/accordion.py b/reflex/components/chakra/disclosure/accordion.py
index 15148c1376d..ef78c7d6045 100644
--- a/reflex/components/chakra/disclosure/accordion.py
+++ b/reflex/components/chakra/disclosure/accordion.py
@@ -9,7 +9,7 @@
 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: Optional[Var[bool]] = None
@@ -79,7 +79,7 @@ def create(
 class AccordionItem(ChakraComponent):
     """A single accordion item."""
 
-    tag = "AccordionItem"
+    tag: str = "AccordionItem"
 
     # A unique id for the accordion item.
     id_: Optional[Var[str]] = None
@@ -94,16 +94,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/chakra/disclosure/tabs.py b/reflex/components/chakra/disclosure/tabs.py
index cf687170277..20486b21796 100644
--- a/reflex/components/chakra/disclosure/tabs.py
+++ b/reflex/components/chakra/disclosure/tabs.py
@@ -14,7 +14,7 @@
 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: Optional[Var[LiteralTagAlign]] = None
@@ -75,7 +75,7 @@ def create(
 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: Optional[Var[bool]] = None
@@ -95,7 +95,7 @@ class Tab(ChakraComponent):
 class TabList(ChakraComponent):
     """Wrapper for the Tab components."""
 
-    tag = "TabList"
+    tag: str = "TabList"
 
     _valid_parents: List[str] = ["Tabs"]
 
@@ -103,7 +103,7 @@ class TabList(ChakraComponent):
 class TabPanels(ChakraComponent):
     """Wrapper for the Tab components."""
 
-    tag = "TabPanels"
+    tag: str = "TabPanels"
 
     _valid_parents: List[str] = ["Tabs"]
 
@@ -111,6 +111,6 @@ class TabPanels(ChakraComponent):
 class TabPanel(ChakraComponent):
     """An element that contains the content associated with a tab."""
 
-    tag = "TabPanel"
+    tag: str = "TabPanel"
 
     _valid_parents: List[str] = ["TabPanels"]
diff --git a/reflex/components/chakra/disclosure/transition.py b/reflex/components/chakra/disclosure/transition.py
index c2fc18bd3b0..381d529a564 100644
--- a/reflex/components/chakra/disclosure/transition.py
+++ b/reflex/components/chakra/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: Optional[Var[float]] = None
@@ -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: Optional[Var[str]] = None
@@ -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: Optional[Var[Union[str, int]]] = None
@@ -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: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/disclosure/visuallyhidden.py b/reflex/components/chakra/disclosure/visuallyhidden.py
index 161b130b2a2..6c31b0154d7 100644
--- a/reflex/components/chakra/disclosure/visuallyhidden.py
+++ b/reflex/components/chakra/disclosure/visuallyhidden.py
@@ -6,4 +6,4 @@
 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/chakra/feedback/alert.py b/reflex/components/chakra/feedback/alert.py
index 2940a6d0c88..94efe49ef6d 100644
--- a/reflex/components/chakra/feedback/alert.py
+++ b/reflex/components/chakra/feedback/alert.py
@@ -13,7 +13,7 @@
 class Alert(ChakraComponent):
     """An alert feedback box."""
 
-    tag = "Alert"
+    tag: str = "Alert"
 
     # The status of the alert ("success" | "info" | "warning" | "error")
     status: Optional[Var[LiteralStatus]] = None
@@ -54,16 +54,16 @@ def create(
 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/chakra/feedback/circularprogress.py b/reflex/components/chakra/feedback/circularprogress.py
index c22ea6210f3..2fb375fb709 100644
--- a/reflex/components/chakra/feedback/circularprogress.py
+++ b/reflex/components/chakra/feedback/circularprogress.py
@@ -9,7 +9,7 @@
 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: Optional[Var[bool]] = None
@@ -64,4 +64,4 @@ def create(cls, *children, label=None, **props) -> Component:
 class CircularProgressLabel(ChakraComponent):
     """Label of CircularProcess."""
 
-    tag = "CircularProgressLabel"
+    tag: str = "CircularProgressLabel"
diff --git a/reflex/components/chakra/feedback/progress.py b/reflex/components/chakra/feedback/progress.py
index 3f6983383cb..c423de773f9 100644
--- a/reflex/components/chakra/feedback/progress.py
+++ b/reflex/components/chakra/feedback/progress.py
@@ -8,7 +8,7 @@
 class Progress(ChakraComponent):
     """A bar to display progress."""
 
-    tag = "Progress"
+    tag: str = "Progress"
 
     # If true, the progress bar will show stripe
     has_stripe: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/feedback/skeleton.py b/reflex/components/chakra/feedback/skeleton.py
index 4766dc6f63e..0a555b1c9a3 100644
--- a/reflex/components/chakra/feedback/skeleton.py
+++ b/reflex/components/chakra/feedback/skeleton.py
@@ -8,7 +8,7 @@
 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: Optional[Var[str]] = None
@@ -29,7 +29,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: Optional[Var[str]] = None
@@ -50,7 +50,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: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/feedback/spinner.py b/reflex/components/chakra/feedback/spinner.py
index 74e076d10a2..934b2c7a563 100644
--- a/reflex/components/chakra/feedback/spinner.py
+++ b/reflex/components/chakra/feedback/spinner.py
@@ -8,7 +8,7 @@
 class Spinner(ChakraComponent):
     """The component that spins."""
 
-    tag = "Spinner"
+    tag: str = "Spinner"
 
     # The color of the empty area in the spinner
     empty_color: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/forms/button.py b/reflex/components/chakra/forms/button.py
index 64330687124..e8c68d2606a 100644
--- a/reflex/components/chakra/forms/button.py
+++ b/reflex/components/chakra/forms/button.py
@@ -14,7 +14,7 @@
 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: Optional[Var[int]] = None
@@ -64,7 +64,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: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/forms/checkbox.py b/reflex/components/chakra/forms/checkbox.py
index 298eaf16749..d856cdaee3f 100644
--- a/reflex/components/chakra/forms/checkbox.py
+++ b/reflex/components/chakra/forms/checkbox.py
@@ -15,7 +15,7 @@
 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 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class CheckboxGroup(ChakraComponent):
     """A group of checkboxes."""
 
-    tag = "CheckboxGroup"
+    tag: str = "CheckboxGroup"
 
     # The value of the checkbox group
     value: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/forms/colormodeswitch.py b/reflex/components/chakra/forms/colormodeswitch.py
index 16bcf6b4661..a5afcf9ee8b 100644
--- a/reflex/components/chakra/forms/colormodeswitch.py
+++ b/reflex/components/chakra/forms/colormodeswitch.py
@@ -99,5 +99,5 @@ def create(cls, *children, **props):
 class ColorModeScript(ChakraComponent):
     """Chakra color mode script."""
 
-    tag = "ColorModeScript"
+    tag: str = "ColorModeScript"
     initialColorMode: str = LIGHT_COLOR_MODE
diff --git a/reflex/components/chakra/forms/editable.py b/reflex/components/chakra/forms/editable.py
index 4524492f1c6..8178af83ffa 100644
--- a/reflex/components/chakra/forms/editable.py
+++ b/reflex/components/chakra/forms/editable.py
@@ -11,7 +11,7 @@
 class Editable(ChakraComponent):
     """The wrapper component that provides context value."""
 
-    tag = "Editable"
+    tag: str = "Editable"
 
     # If true, the Editable will be disabled.
     is_disabled: Optional[Var[bool]] = None
@@ -55,16 +55,16 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 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/chakra/forms/form.py b/reflex/components/chakra/forms/form.py
index 6149d645ff6..90c139c39bd 100644
--- a/reflex/components/chakra/forms/form.py
+++ b/reflex/components/chakra/forms/form.py
@@ -36,7 +36,7 @@
 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 @@ def _get_vars(self) -> Iterator[Var]:
 class FormControl(ChakraComponent):
     """Provide context to form components."""
 
-    tag = "FormControl"
+    tag: str = "FormControl"
 
     # If true, the form control will be disabled.
     is_disabled: Optional[Var[bool]] = None
@@ -216,13 +216,13 @@ def create(
 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: Optional[Var[str]] = None
@@ -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/chakra/forms/iconbutton.py b/reflex/components/chakra/forms/iconbutton.py
index b89214edb44..2f5e2c6ceb0 100644
--- a/reflex/components/chakra/forms/iconbutton.py
+++ b/reflex/components/chakra/forms/iconbutton.py
@@ -9,7 +9,7 @@
 class IconButton(Text):
     """A button with an icon."""
 
-    tag = "IconButton"
+    tag: str = "IconButton"
     library = "@chakra-ui/button@2.1.0"
 
     # The type of button.
diff --git a/reflex/components/chakra/forms/input.py b/reflex/components/chakra/forms/input.py
index e694c100648..35066b573e0 100644
--- a/reflex/components/chakra/forms/input.py
+++ b/reflex/components/chakra/forms/input.py
@@ -17,7 +17,7 @@
 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: Optional[Var[str]] = None
@@ -99,7 +99,7 @@ def create(cls, *children, **props) -> Component:
 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)
 
@@ -107,22 +107,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/chakra/forms/multiselect.py b/reflex/components/chakra/forms/multiselect.py
index 7d9a73e06c6..d5d0272af53 100644
--- a/reflex/components/chakra/forms/multiselect.py
+++ b/reflex/components/chakra/forms/multiselect.py
@@ -47,7 +47,7 @@ class Select(Component):
     """
 
     library = "chakra-react-select@4.7.5"
-    tag = "Select"
+    tag: str = "Select"
     alias = "MultiSelect"
 
     # Focus the control when it is mounted
diff --git a/reflex/components/chakra/forms/numberinput.py b/reflex/components/chakra/forms/numberinput.py
index 8e064d77e8b..a72ba14ce67 100644
--- a/reflex/components/chakra/forms/numberinput.py
+++ b/reflex/components/chakra/forms/numberinput.py
@@ -15,7 +15,7 @@
 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: Optional[Var[Number]] = None
@@ -115,22 +115,22 @@ def create(cls, *children, **props) -> Component:
 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/chakra/forms/pininput.py b/reflex/components/chakra/forms/pininput.py
index 1e54bdc04e6..bd66bd9ecbb 100644
--- a/reflex/components/chakra/forms/pininput.py
+++ b/reflex/components/chakra/forms/pininput.py
@@ -15,7 +15,7 @@
 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: Optional[Var[str]] = None
@@ -164,7 +164,7 @@ def create(cls, *children, **props) -> Component:
 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/chakra/forms/radio.py b/reflex/components/chakra/forms/radio.py
index 23213f6f585..9ca32345474 100644
--- a/reflex/components/chakra/forms/radio.py
+++ b/reflex/components/chakra/forms/radio.py
@@ -13,7 +13,7 @@
 class RadioGroup(ChakraComponent):
     """A grouping of individual radio options."""
 
-    tag = "RadioGroup"
+    tag: str = "RadioGroup"
 
     # State var to bind the the input.
     value: Optional[Var[Any]] = None
@@ -60,7 +60,7 @@ def create(cls, *children, **props) -> Component:
 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: Optional[Var[Any]] = None
diff --git a/reflex/components/chakra/forms/rangeslider.py b/reflex/components/chakra/forms/rangeslider.py
index c076dc8854c..71f7bcd7ee0 100644
--- a/reflex/components/chakra/forms/rangeslider.py
+++ b/reflex/components/chakra/forms/rangeslider.py
@@ -13,7 +13,7 @@
 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: Optional[Var[List[int]]] = None
@@ -121,19 +121,19 @@ def create(cls, *children, **props) -> Component:
 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: Optional[Var[int]] = None
diff --git a/reflex/components/chakra/forms/select.py b/reflex/components/chakra/forms/select.py
index 906fbe12e61..c369e8c97c1 100644
--- a/reflex/components/chakra/forms/select.py
+++ b/reflex/components/chakra/forms/select.py
@@ -13,7 +13,7 @@
 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: Optional[Var[str]] = None
@@ -87,7 +87,7 @@ def create(cls, *children, **props) -> Component:
 class Option(Text):
     """A select option."""
 
-    tag = "option"
+    tag: str = "option"
 
     value: Optional[Var[Any]] = None
 
diff --git a/reflex/components/chakra/forms/slider.py b/reflex/components/chakra/forms/slider.py
index ce847ebd2d8..f4cf8eff2b2 100644
--- a/reflex/components/chakra/forms/slider.py
+++ b/reflex/components/chakra/forms/slider.py
@@ -14,7 +14,7 @@
 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: Optional[Var[int]] = None
@@ -109,19 +109,19 @@ def create(cls, *children, **props) -> Component:
 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: Optional[Var[str]] = None
@@ -130,4 +130,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/chakra/forms/switch.py b/reflex/components/chakra/forms/switch.py
index ca8dd30960f..b9853ded9de 100644
--- a/reflex/components/chakra/forms/switch.py
+++ b/reflex/components/chakra/forms/switch.py
@@ -11,7 +11,7 @@
 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: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/forms/textarea.py b/reflex/components/chakra/forms/textarea.py
index 6ee816b08a4..d104340880f 100644
--- a/reflex/components/chakra/forms/textarea.py
+++ b/reflex/components/chakra/forms/textarea.py
@@ -13,7 +13,7 @@
 class TextArea(ChakraComponent):
     """A text area component."""
 
-    tag = "Textarea"
+    tag: str = "Textarea"
 
     # State var to bind the input.
     value: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/aspect_ratio.py b/reflex/components/chakra/layout/aspect_ratio.py
index f8d1c153063..ad89d2a8f7a 100644
--- a/reflex/components/chakra/layout/aspect_ratio.py
+++ b/reflex/components/chakra/layout/aspect_ratio.py
@@ -8,7 +8,7 @@
 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: Optional[Var[float]] = None
diff --git a/reflex/components/chakra/layout/box.py b/reflex/components/chakra/layout/box.py
index e898af1441e..607850ab28e 100644
--- a/reflex/components/chakra/layout/box.py
+++ b/reflex/components/chakra/layout/box.py
@@ -9,7 +9,7 @@
 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: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/card.py b/reflex/components/chakra/layout/card.py
index 9ea3d06210e..b857be7549a 100644
--- a/reflex/components/chakra/layout/card.py
+++ b/reflex/components/chakra/layout/card.py
@@ -14,25 +14,25 @@
 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: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/center.py b/reflex/components/chakra/layout/center.py
index bc3ced1aaa1..b853c56ff4d 100644
--- a/reflex/components/chakra/layout/center.py
+++ b/reflex/components/chakra/layout/center.py
@@ -6,16 +6,16 @@
 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/chakra/layout/container.py b/reflex/components/chakra/layout/container.py
index 4273d774779..5b04a272692 100644
--- a/reflex/components/chakra/layout/container.py
+++ b/reflex/components/chakra/layout/container.py
@@ -8,7 +8,7 @@
 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: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/layout/flex.py b/reflex/components/chakra/layout/flex.py
index 306f0984d73..116692e72c6 100644
--- a/reflex/components/chakra/layout/flex.py
+++ b/reflex/components/chakra/layout/flex.py
@@ -8,7 +8,7 @@
 class Flex(ChakraComponent):
     """A reflexive container component."""
 
-    tag = "Flex"
+    tag: str = "Flex"
 
     # How to align items in the flex.
     align: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/grid.py b/reflex/components/chakra/layout/grid.py
index 6cfda018a7e..042dfa9f0f8 100644
--- a/reflex/components/chakra/layout/grid.py
+++ b/reflex/components/chakra/layout/grid.py
@@ -8,7 +8,7 @@
 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)_
@@ -43,7 +43,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)_
@@ -73,7 +73,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/chakra/layout/spacer.py b/reflex/components/chakra/layout/spacer.py
index 3888f372652..5e6d9431687 100644
--- a/reflex/components/chakra/layout/spacer.py
+++ b/reflex/components/chakra/layout/spacer.py
@@ -6,4 +6,4 @@
 class Spacer(ChakraComponent):
     """A flexible space component."""
 
-    tag = "Spacer"
+    tag: str = "Spacer"
diff --git a/reflex/components/chakra/layout/stack.py b/reflex/components/chakra/layout/stack.py
index b37e7caa34f..de1a4c03dcd 100644
--- a/reflex/components/chakra/layout/stack.py
+++ b/reflex/components/chakra/layout/stack.py
@@ -8,7 +8,7 @@
 class Stack(ChakraComponent):
     """Container to stack elements with spacing."""
 
-    tag = "Stack"
+    tag: str = "Stack"
 
     # Shorthand for alignItems style prop
     align_items: Optional[Var[str]] = None
@@ -38,10 +38,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/chakra/layout/wrap.py b/reflex/components/chakra/layout/wrap.py
index e72f4fc1217..b5915487aa2 100644
--- a/reflex/components/chakra/layout/wrap.py
+++ b/reflex/components/chakra/layout/wrap.py
@@ -9,7 +9,7 @@
 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: Optional[Var[str]] = None
@@ -55,4 +55,4 @@ def create(cls, *children, items=None, **props) -> Component:
 class WrapItem(ChakraComponent):
     """Item of the Wrap component."""
 
-    tag = "WrapItem"
+    tag: str = "WrapItem"
diff --git a/reflex/components/chakra/media/avatar.py b/reflex/components/chakra/media/avatar.py
index d13bee75f8d..caa7513e5da 100644
--- a/reflex/components/chakra/media/avatar.py
+++ b/reflex/components/chakra/media/avatar.py
@@ -10,7 +10,7 @@
 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: Optional[Var[str]] = None
@@ -51,13 +51,13 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 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_: Optional[Var[int]] = None
diff --git a/reflex/components/chakra/media/icon.py b/reflex/components/chakra/media/icon.py
index 8b4fb3581cb..3a2b064c9ed 100644
--- a/reflex/components/chakra/media/icon.py
+++ b/reflex/components/chakra/media/icon.py
@@ -14,7 +14,7 @@ class ChakraIconComponent(ChakraComponent):
 class Icon(ChakraIconComponent):
     """An image icon."""
 
-    tag = "None"
+    tag: str = "None"
 
     @classmethod
     def create(cls, *children, **props):
diff --git a/reflex/components/chakra/media/image.py b/reflex/components/chakra/media/image.py
index 6a2dd6e9a89..82927cc7b25 100644
--- a/reflex/components/chakra/media/image.py
+++ b/reflex/components/chakra/media/image.py
@@ -11,7 +11,7 @@
 class Image(ChakraComponent):
     """Display an image."""
 
-    tag = "Image"
+    tag: str = "Image"
     alias = "ChakraImage"
     # How to align the image within its bounds. It maps to css `object-position` property.
     align: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/navigation/breadcrumb.py b/reflex/components/chakra/navigation/breadcrumb.py
index 57e7d2cdc0e..b525415b14f 100644
--- a/reflex/components/chakra/navigation/breadcrumb.py
+++ b/reflex/components/chakra/navigation/breadcrumb.py
@@ -11,7 +11,7 @@
 class Breadcrumb(ChakraComponent):
     """The parent container for breadcrumbs."""
 
-    tag = "Breadcrumb"
+    tag: str = "Breadcrumb"
 
     # The visual separator between each breadcrumb item
     separator: Optional[Var[str]] = None
@@ -52,7 +52,7 @@ def create(cls, *children, items=None, **props) -> Component:
 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: Optional[Var[bool]] = None
@@ -87,13 +87,13 @@ def create(cls, *children, label=None, href=None, **props):
 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: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/navigation/link.py b/reflex/components/chakra/navigation/link.py
index e1422b18ad5..b3560530d3e 100644
--- a/reflex/components/chakra/navigation/link.py
+++ b/reflex/components/chakra/navigation/link.py
@@ -13,7 +13,7 @@
 class Link(ChakraComponent):
     """Link to another page."""
 
-    tag = "Link"
+    tag: str = "Link"
 
     # The rel.
     rel: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/navigation/linkoverlay.py b/reflex/components/chakra/navigation/linkoverlay.py
index 5fe8134cf0c..43f58ceb637 100644
--- a/reflex/components/chakra/navigation/linkoverlay.py
+++ b/reflex/components/chakra/navigation/linkoverlay.py
@@ -8,7 +8,7 @@
 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: Optional[Var[bool]] = None
@@ -20,4 +20,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/chakra/navigation/stepper.py b/reflex/components/chakra/navigation/stepper.py
index 1a2f40270b9..cffe0d067f7 100644
--- a/reflex/components/chakra/navigation/stepper.py
+++ b/reflex/components/chakra/navigation/stepper.py
@@ -9,7 +9,7 @@
 class Stepper(ChakraComponent):
     """The parent container for a stepper."""
 
-    tag = "Stepper"
+    tag: str = "Stepper"
 
     orientation: Optional[Var[Literal["vertical", "horizontal"]]] = None
 
@@ -57,37 +57,37 @@ def create(
 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):
@@ -103,10 +103,10 @@ class StepStatus(ChakraComponent):
 
     incomplete: Optional[Var[str]] = None
 
-    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/chakra/overlay/alertdialog.py b/reflex/components/chakra/overlay/alertdialog.py
index d394a30c192..1e135fe28a5 100644
--- a/reflex/components/chakra/overlay/alertdialog.py
+++ b/reflex/components/chakra/overlay/alertdialog.py
@@ -12,7 +12,7 @@
 class AlertDialog(ChakraComponent):
     """Provides context and state for the dialog."""
 
-    tag = "AlertDialog"
+    tag: str = "AlertDialog"
 
     # If true, the modal will be open.
     is_open: Optional[Var[bool]] = None
@@ -122,34 +122,34 @@ def create(
 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/chakra/overlay/drawer.py b/reflex/components/chakra/overlay/drawer.py
index 8d915993067..d63fa9a60f8 100644
--- a/reflex/components/chakra/overlay/drawer.py
+++ b/reflex/components/chakra/overlay/drawer.py
@@ -16,7 +16,7 @@
 class Drawer(ChakraComponent):
     """A drawer component."""
 
-    tag = "Drawer"
+    tag: str = "Drawer"
 
     # If true, the modal will be open.
     is_open: Optional[Var[bool]] = None
@@ -137,34 +137,34 @@ def create(
 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/chakra/overlay/menu.py b/reflex/components/chakra/overlay/menu.py
index 74a42f44c54..91b80ea9e91 100644
--- a/reflex/components/chakra/overlay/menu.py
+++ b/reflex/components/chakra/overlay/menu.py
@@ -17,7 +17,7 @@
 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: Optional[Var[int]] = None
@@ -115,7 +115,7 @@ def create(
 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: Optional[Var[str]] = None
@@ -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(cls, *children, items: Optional[list] = None, **props) -> Component:
@@ -157,7 +157,7 @@ def create(cls, *children, items: Optional[list] = None, **props) -> Component:
 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: Optional[Var[bool]] = None
@@ -178,7 +178,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: Optional[Var[bool]] = None
@@ -208,13 +208,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_: Optional[Var[LiteralMenuOption]] = None
@@ -226,4 +226,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/chakra/overlay/modal.py b/reflex/components/chakra/overlay/modal.py
index 450706e13d7..0ce7dba5eef 100644
--- a/reflex/components/chakra/overlay/modal.py
+++ b/reflex/components/chakra/overlay/modal.py
@@ -14,7 +14,7 @@
 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: Optional[Var[bool]] = None
@@ -133,34 +133,34 @@ def create(
 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/chakra/overlay/popover.py b/reflex/components/chakra/overlay/popover.py
index db20efa166f..303293d50a9 100644
--- a/reflex/components/chakra/overlay/popover.py
+++ b/reflex/components/chakra/overlay/popover.py
@@ -16,7 +16,7 @@
 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: Optional[Var[int]] = None
@@ -144,46 +144,46 @@ def create(
 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/chakra/overlay/tooltip.py b/reflex/components/chakra/overlay/tooltip.py
index eec1205f3d9..cc739c61263 100644
--- a/reflex/components/chakra/overlay/tooltip.py
+++ b/reflex/components/chakra/overlay/tooltip.py
@@ -10,7 +10,7 @@
 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: Optional[Var[int]] = None
diff --git a/reflex/components/chakra/typography/heading.py b/reflex/components/chakra/typography/heading.py
index 871dda42810..d649ec66836 100644
--- a/reflex/components/chakra/typography/heading.py
+++ b/reflex/components/chakra/typography/heading.py
@@ -8,7 +8,7 @@
 class Heading(ChakraComponent):
     """A page heading."""
 
-    tag = "Heading"
+    tag: str = "Heading"
 
     # Override the tag. The default tag is `<h2>`.
     as_: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/typography/highlight.py b/reflex/components/chakra/typography/highlight.py
index 24e7d3b109f..fa758ed7d5f 100644
--- a/reflex/components/chakra/typography/highlight.py
+++ b/reflex/components/chakra/typography/highlight.py
@@ -9,7 +9,7 @@
 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: Optional[Var[List[str]]] = None
diff --git a/reflex/components/chakra/typography/span.py b/reflex/components/chakra/typography/span.py
index e4bc698e600..c526f325b6c 100644
--- a/reflex/components/chakra/typography/span.py
+++ b/reflex/components/chakra/typography/span.py
@@ -8,7 +8,7 @@
 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/chakra/typography/text.py b/reflex/components/chakra/typography/text.py
index aed9e6e858a..769837fa46f 100644
--- a/reflex/components/chakra/typography/text.py
+++ b/reflex/components/chakra/typography/text.py
@@ -10,7 +10,7 @@
 class Text(ChakraComponent):
     """Render a paragraph of text."""
 
-    tag = "Text"
+    tag: str = "Text"
 
     # Override the tag. The default tag is `<p>`.
     as_: Optional[Var[str]] = None
diff --git a/reflex/components/core/client_side_routing.py b/reflex/components/core/client_side_routing.py
index 3d2090cd38e..4a145b09884 100644
--- a/reflex/components/core/client_side_routing.py
+++ b/reflex/components/core/client_side_routing.py
@@ -21,7 +21,7 @@ class ClientSideRouting(Component):
     """The client-side routing component."""
 
     library = "/utils/client_side_routing"
-    tag = "useClientSideRouting"
+    tag: str = "useClientSideRouting"
 
     def _get_hooks(self) -> str:
         """Get the hooks to render.
@@ -62,7 +62,7 @@ class Default404Page(Component):
     """The NextJS default 404 page."""
 
     library = "next/error"
-    tag = "Error"
+    tag: str = "Error"
     is_default = True
 
     status_code: Var[int] = 404  # type: ignore
diff --git a/reflex/components/core/debounce.py b/reflex/components/core/debounce.py
index 383ac43f9ca..7237b961067 100644
--- a/reflex/components/core/debounce.py
+++ b/reflex/components/core/debounce.py
@@ -19,7 +19,7 @@ class DebounceInput(Component):
     """
 
     library = "react-debounce-input@3.3.0"
-    tag = "DebounceInput"
+    tag: str = "DebounceInput"
 
     # Minimum input characters before triggering the on_change event
     min_length: Optional[Var[int]] = None
diff --git a/reflex/components/core/upload.py b/reflex/components/core/upload.py
index 70bccb0e39c..698540fb37b 100644
--- a/reflex/components/core/upload.py
+++ b/reflex/components/core/upload.py
@@ -158,7 +158,7 @@ class UploadFilesProvider(Component):
     """AppWrap component that provides a dict of selected files by ID via useContext."""
 
     library = f"/{Dirs.CONTEXTS_PATH}"
-    tag = "UploadFilesProvider"
+    tag: str = "UploadFilesProvider"
 
 
 class Upload(MemoizationLeaf):
@@ -166,7 +166,7 @@ class Upload(MemoizationLeaf):
 
     library = "react-dropzone@14.2.3"
 
-    tag = "ReactDropzone"
+    tag: str = "ReactDropzone"
 
     is_default = True
 
diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
index 4552eb4e611..d0ed4939514 100644
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@@ -350,7 +350,7 @@ class CodeBlock(Component):
 
     library = "react-syntax-highlighter@15.5.0"
 
-    tag = "PrismAsyncLight"
+    tag: str = "PrismAsyncLight"
 
     alias = "SyntaxHighlighter"
 
diff --git a/reflex/components/datadisplay/dataeditor.py b/reflex/components/datadisplay/dataeditor.py
index fa8370a29da..82a243424ba 100644
--- a/reflex/components/datadisplay/dataeditor.py
+++ b/reflex/components/datadisplay/dataeditor.py
@@ -106,7 +106,7 @@ class DataEditorTheme(Base):
 class DataEditor(NoSSRComponent):
     """The DataEditor Component."""
 
-    tag = "DataEditor"
+    tag: str = "DataEditor"
     is_default = True
     library: str = "@glideapps/glide-data-grid@^5.3.0"
     lib_dependencies: List[str] = [
diff --git a/reflex/components/el/elements/forms.py b/reflex/components/el/elements/forms.py
index ed4903dc25d..90dca7f223f 100644
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@@ -11,7 +11,7 @@
 class Button(BaseHTML):
     """Display the button element."""
 
-    tag = "button"
+    tag: str = "button"
 
     # Automatically focuses the button when the page loads
     auto_focus: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -225,7 +225,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 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: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -271,7 +271,7 @@ class Meter(BaseHTML):
 class Optgroup(BaseHTML):
     """Display the optgroup element."""
 
-    tag = "optgroup"
+    tag: str = "optgroup"
 
     # Disables the optgroup
     disabled: Optional[Var[Union[str, int, bool]]] = None
@@ -283,7 +283,7 @@ class Optgroup(BaseHTML):
 class Option(BaseHTML):
     """Display the option element."""
 
-    tag = "option"
+    tag: str = "option"
 
     # Disables the option
     disabled: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -372,7 +372,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class Textarea(BaseHTML):
     """Display the textarea element."""
 
-    tag = "textarea"
+    tag: str = "textarea"
 
     # Whether the form control should have autocomplete enabled
     auto_complete: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/inline.py b/reflex/components/el/elements/inline.py
index 9cacf99c256..c1ec4e02e68 100644
--- a/reflex/components/el/elements/inline.py
+++ b/reflex/components/el/elements/inline.py
@@ -9,7 +9,7 @@
 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: Optional[Var[Union[str, int, bool]]] = None
@@ -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"
 
     # Specifies the machine-readable translation of the data element.
     value: Optional[Var[Union[str, int, bool]]] = None
@@ -93,37 +93,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"
 
     # Specifies the source URL of the quote.
     cite: Optional[Var[Union[str, int, bool]]] = None
@@ -132,67 +132,67 @@ 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"
 
     # Specifies the date and/or time of the element.
     date_time: Optional[Var[Union[str, int, bool]]] = None
@@ -201,10 +201,10 @@ class Time(BaseHTML):
 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 95b95c5d7c8..607a24d7db2 100644
--- a/reflex/components/el/elements/media.py
+++ b/reflex/components/el/elements/media.py
@@ -9,7 +9,7 @@
 class Area(BaseHTML):
     """Display the area element."""
 
-    tag = "area"
+    tag: str = "area"
 
     # Alternate text for the area, used for accessibility
     alt: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -120,7 +120,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: Optional[Var[Union[str, int, bool]]] = None
@@ -129,7 +129,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: Optional[Var[Union[str, int, bool]]] = None
@@ -150,7 +150,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: Optional[Var[Union[str, int, bool]]] = None
@@ -186,7 +186,7 @@ class Video(BaseHTML):
 class Embed(BaseHTML):
     """Display the embed element."""
 
-    tag = "embed"
+    tag: str = "embed"
 
     # URL of the embedded content
     src: Optional[Var[Union[str, int, bool]]] = None
@@ -198,7 +198,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: Optional[Var[Union[str, int, bool]]] = None
@@ -231,7 +231,7 @@ class Iframe(BaseHTML):
 class Object(BaseHTML):
     """Display the object element."""
 
-    tag = "object"
+    tag: str = "object"
 
     # URL of the data to be used by the object
     data: Optional[Var[Union[str, int, bool]]] = None
@@ -252,21 +252,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: Optional[Var[Union[str, int, bool]]] = None
@@ -287,13 +287,13 @@ class Source(BaseHTML):
 class Svg(BaseHTML):
     """Display the svg element."""
 
-    tag = "svg"
+    tag: str = "svg"
 
 
 class Path(BaseHTML):
     """Display the path element."""
 
-    tag = "path"
+    tag: str = "path"
 
     # Defines the shape of the path
     d: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/metadata.py b/reflex/components/el/elements/metadata.py
index 0ec97645cb0..55ab9e4cdb6 100644
--- a/reflex/components/el/elements/metadata.py
+++ b/reflex/components/el/elements/metadata.py
@@ -10,9 +10,9 @@
 class Base(BaseHTML):  # noqa: E742
     """Display the base element."""
 
-    tag = "base"
+    tag: str = "base"
 
-    tag = "base"
+    tag: str = "base"
     href: Optional[Var[Union[str, int, bool]]] = None
     target: Optional[Var[Union[str, int, bool]]] = None
 
@@ -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: Optional[Var[Union[str, int, bool]]] = None
     href: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
     content: Optional[Var[Union[str, int, bool]]] = None
     http_equiv: Optional[Var[Union[str, int, bool]]] = None
@@ -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 9d034a6458b..4e309f6c266 100644
--- a/reflex/components/el/elements/other.py
+++ b/reflex/components/el/elements/other.py
@@ -9,7 +9,7 @@
 class Details(BaseHTML):
     """Display the details element."""
 
-    tag = "details"
+    tag: str = "details"
 
     # Indicates whether the details will be visible (expanded) to the user
     open: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/scripts.py b/reflex/components/el/elements/scripts.py
index ebe60832253..3a687a69a7d 100644
--- a/reflex/components/el/elements/scripts.py
+++ b/reflex/components/el/elements/scripts.py
@@ -9,20 +9,20 @@
 class Canvas(BaseHTML):
     """Display the canvas element."""
 
-    tag = "canvas"
+    tag: str = "canvas"
 
 
 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_: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/sectioning.py b/reflex/components/el/elements/sectioning.py
index ce354957308..6816091a443 100644
--- a/reflex/components/el/elements/sectioning.py
+++ b/reflex/components/el/elements/sectioning.py
@@ -8,88 +8,88 @@
 class Body(BaseHTML):  # noqa: E742
     """Display the body element."""
 
-    tag = "body"
+    tag: str = "body"
 
 
 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 e81ab86cd3f..d5ff492a4fd 100644
--- a/reflex/components/el/elements/tables.py
+++ b/reflex/components/el/elements/tables.py
@@ -9,7 +9,7 @@
 class Caption(BaseHTML):
     """Display the caption element."""
 
-    tag = "caption"
+    tag: str = "caption"
 
     # Alignment of the caption
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -30,7 +30,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: Optional[Var[Union[str, int, bool]]] = None
@@ -42,7 +42,7 @@ class Colgroup(BaseHTML):
 class Table(BaseHTML):
     """Display the table element."""
 
-    tag = "table"
+    tag: str = "table"
 
     # Alignment of the table
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -54,7 +54,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: Optional[Var[Union[str, int, bool]]] = None
@@ -63,7 +63,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: Optional[Var[Union[str, int, bool]]] = None
@@ -81,7 +81,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: Optional[Var[Union[str, int, bool]]] = None
@@ -90,7 +90,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: Optional[Var[Union[str, int, bool]]] = None
@@ -111,7 +111,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: Optional[Var[Union[str, int, bool]]] = None
@@ -120,7 +120,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: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/typography.py b/reflex/components/el/elements/typography.py
index 61766004195..9637ebdeb8a 100644
--- a/reflex/components/el/elements/typography.py
+++ b/reflex/components/el/elements/typography.py
@@ -9,7 +9,7 @@
 class Blockquote(BaseHTML):
     """Display the blockquote element."""
 
-    tag = "blockquote"
+    tag: str = "blockquote"
 
     # Define the title of a work.
     cite: Optional[Var[Union[str, int, bool]]] = None
@@ -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: Optional[Var[Union[str, int, bool]]] = None
@@ -57,13 +57,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: Optional[Var[Union[str, int, bool]]] = None
@@ -72,7 +72,7 @@ class Menu(BaseHTML):
 class Ol(BaseHTML):
     """Display the ol element."""
 
-    tag = "ol"
+    tag: str = "ol"
 
     # Reverses the order of the list.
     reversed: Optional[Var[Union[str, int, bool]]] = None
@@ -87,25 +87,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: Optional[Var[Union[str, int, bool]]] = None
@@ -117,7 +117,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: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/gridjs/datatable.py b/reflex/components/gridjs/datatable.py
index 1cbfeb72a83..b21ddffec52 100644
--- a/reflex/components/gridjs/datatable.py
+++ b/reflex/components/gridjs/datatable.py
@@ -21,7 +21,7 @@ class Gridjs(Component):
 class DataTable(Gridjs):
     """A data table component."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
     alias = "DataTableGrid"
 
diff --git a/reflex/components/lucide/icon.py b/reflex/components/lucide/icon.py
index b56f7f05f21..8ab825738be 100644
--- a/reflex/components/lucide/icon.py
+++ b/reflex/components/lucide/icon.py
@@ -17,7 +17,7 @@ class LucideIconComponent(Component):
 class Icon(LucideIconComponent):
     """An Icon component."""
 
-    tag = "None"
+    tag: str = "None"
 
     # The size of the icon in pixels.
     size: Optional[Var[int]] = None
diff --git a/reflex/components/markdown/markdown.py b/reflex/components/markdown/markdown.py
index 04e392fef05..31865fc0b2f 100644
--- a/reflex/components/markdown/markdown.py
+++ b/reflex/components/markdown/markdown.py
@@ -77,7 +77,7 @@ class Markdown(Component):
 
     library = "react-markdown@8.0.7"
 
-    tag = "ReactMarkdown"
+    tag: str = "ReactMarkdown"
 
     is_default = True
 
diff --git a/reflex/components/next/image.py b/reflex/components/next/image.py
index ef99217b1cc..b89259974bd 100644
--- a/reflex/components/next/image.py
+++ b/reflex/components/next/image.py
@@ -10,7 +10,7 @@
 class Image(NextComponent):
     """Display an image."""
 
-    tag = "Image"
+    tag: str = "Image"
     library = "next/image"
     is_default = True
 
diff --git a/reflex/components/next/link.py b/reflex/components/next/link.py
index 17520825993..e3ddfc6c6c5 100644
--- a/reflex/components/next/link.py
+++ b/reflex/components/next/link.py
@@ -11,7 +11,7 @@ class NextLink(Component):
 
     library = "next/link"
 
-    tag = "NextLink"
+    tag: str = "NextLink"
 
     is_default = True
 
diff --git a/reflex/components/next/video.py b/reflex/components/next/video.py
index faa79e6253a..45d77cce64c 100644
--- a/reflex/components/next/video.py
+++ b/reflex/components/next/video.py
@@ -10,7 +10,7 @@
 class Video(NextComponent):
     """A video component from NextJS."""
 
-    tag = "Video"
+    tag: str = "Video"
     library = "next-video"
     is_default = True
     # the URL
diff --git a/reflex/components/plotly/plotly.py b/reflex/components/plotly/plotly.py
index 80a07ac6239..0b9185e64a4 100644
--- a/reflex/components/plotly/plotly.py
+++ b/reflex/components/plotly/plotly.py
@@ -21,7 +21,7 @@ class PlotlyLib(NoSSRComponent):
 class Plotly(PlotlyLib):
     """Display a plotly graph."""
 
-    tag = "Plot"
+    tag: str = "Plot"
 
     is_default = True
 
diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
index ecb4e410713..5d6690a933e 100644
--- a/reflex/components/radix/primitives/accordion.py
+++ b/reflex/components/radix/primitives/accordion.py
@@ -305,7 +305,7 @@ class AccordionComponent(RadixPrimitiveComponent):
 class AccordionRoot(AccordionComponent):
     """An accordion component."""
 
-    tag = "Root"
+    tag: str = "Root"
 
     alias = "RadixAccordionRoot"
 
@@ -469,7 +469,7 @@ def _exclude_props(self) -> list[str]:
 class AccordionItem(AccordionComponent):
     """An accordion component."""
 
-    tag = "Item"
+    tag: str = "Item"
 
     alias = "RadixAccordionItem"
 
@@ -538,7 +538,7 @@ def create(
 class AccordionHeader(AccordionComponent):
     """An accordion component."""
 
-    tag = "Header"
+    tag: str = "Header"
 
     alias = "RadixAccordionHeader"
 
@@ -567,7 +567,7 @@ def _apply_theme(self, theme: Component):
 class AccordionTrigger(AccordionComponent):
     """An accordion component."""
 
-    tag = "Trigger"
+    tag: str = "Trigger"
 
     alias = "RadixAccordionTrigger"
 
@@ -618,7 +618,7 @@ def create(cls, *children, **props) -> Component:
 class AccordionContent(AccordionComponent):
     """An accordion component."""
 
-    tag = "Content"
+    tag: str = "Content"
 
     alias = "RadixAccordionContent"
 
diff --git a/reflex/components/radix/primitives/drawer.py b/reflex/components/radix/primitives/drawer.py
index 96411c21a95..56c97ee5ba2 100644
--- a/reflex/components/radix/primitives/drawer.py
+++ b/reflex/components/radix/primitives/drawer.py
@@ -27,7 +27,7 @@ class DrawerComponent(RadixPrimitiveComponent):
 class DrawerRoot(DrawerComponent):
     """The Root component of a Drawer, contains all parts of a drawer."""
 
-    tag = "Drawer.Root"
+    tag: str = "Drawer.Root"
 
     alias = "Vaul" + tag
 
@@ -73,7 +73,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class DrawerTrigger(DrawerComponent):
     """The button that opens the dialog."""
 
-    tag = "Drawer.Trigger"
+    tag: str = "Drawer.Trigger"
 
     alias = "Vaul" + tag
 
@@ -84,7 +84,7 @@ class DrawerTrigger(DrawerComponent):
 class DrawerPortal(DrawerComponent):
     """Portals your drawer into the body."""
 
-    tag = "Drawer.Portal"
+    tag: str = "Drawer.Portal"
 
     alias = "Vaul" + tag
 
@@ -93,7 +93,7 @@ class DrawerPortal(DrawerComponent):
 class DrawerContent(DrawerComponent):
     """Content that should be rendered in the drawer."""
 
-    tag = "Drawer.Content"
+    tag: str = "Drawer.Content"
 
     alias = "Vaul" + tag
 
@@ -157,7 +157,7 @@ def create(cls, *children, **props):
 class DrawerOverlay(DrawerComponent):
     """A layer that covers the inert portion of the view when the dialog is open."""
 
-    tag = "Drawer.Overlay"
+    tag: str = "Drawer.Overlay"
 
     alias = "Vaul" + tag
 
@@ -185,7 +185,7 @@ def _get_style(self) -> dict:
 class DrawerClose(DrawerComponent):
     """A button that closes the drawer."""
 
-    tag = "Drawer.Close"
+    tag: str = "Drawer.Close"
 
     alias = "Vaul" + tag
 
@@ -193,7 +193,7 @@ class DrawerClose(DrawerComponent):
 class DrawerTitle(DrawerComponent):
     """A title for the drawer."""
 
-    tag = "Drawer.Title"
+    tag: str = "Drawer.Title"
 
     alias = "Vaul" + tag
 
@@ -218,7 +218,7 @@ def _get_style(self) -> dict:
 class DrawerDescription(DrawerComponent):
     """A description for the drawer."""
 
-    tag = "Drawer.Description"
+    tag: str = "Drawer.Description"
 
     alias = "Vaul" + tag
 
diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py
index 7ff63bc818e..8361c66468e 100644
--- a/reflex/components/radix/primitives/form.py
+++ b/reflex/components/radix/primitives/form.py
@@ -45,7 +45,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
 class FormRoot(FormComponent):
     """The root component of a radix form."""
 
-    tag = "Root"
+    tag: str = "Root"
 
     alias = "RadixFormRoot"
 
@@ -167,7 +167,7 @@ def _get_vars(self) -> Iterator[Var]:
 class FormField(FormComponent):
     """A form field component."""
 
-    tag = "Field"
+    tag: str = "Field"
 
     alias = "RadixFormField"
 
@@ -188,7 +188,7 @@ def _apply_theme(self, theme: Component):
 class FormLabel(FormComponent):
     """A form label component."""
 
-    tag = "Label"
+    tag: str = "Label"
 
     alias = "RadixFormLabel"
 
@@ -204,7 +204,7 @@ def _apply_theme(self, theme: Component):
 class FormControl(FormComponent):
     """A form control component."""
 
-    tag = "Control"
+    tag: str = "Control"
 
     alias = "RadixFormControl"
 
@@ -252,7 +252,7 @@ def create(cls, *children, **props):
 class FormMessage(FormComponent):
     """A form message component."""
 
-    tag = "Message"
+    tag: str = "Message"
 
     alias = "RadixFormMessage"
 
@@ -277,14 +277,14 @@ def _apply_theme(self, theme: Component):
 class FormValidityState(FormComponent):
     """A form validity state component."""
 
-    tag = "ValidityState"
+    tag: str = "ValidityState"
     alias = "RadixFormValidityState"
 
 
 class FormSubmit(FormComponent):
     """A form submit component."""
 
-    tag = "Submit"
+    tag: str = "Submit"
     alias = "RadixFormSubmit"
 
 
diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py
index 827e3130420..1fcb8cb2c6b 100644
--- a/reflex/components/radix/primitives/progress.py
+++ b/reflex/components/radix/primitives/progress.py
@@ -21,7 +21,7 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
 class ProgressRoot(ProgressComponent):
     """The Progress Root component."""
 
-    tag = "Root"
+    tag: str = "Root"
     alias = "RadixProgressRoot"
 
     # Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
@@ -51,7 +51,7 @@ def _exclude_props(self) -> list[str]:
 class ProgressIndicator(ProgressComponent):
     """The Progress bar indicator."""
 
-    tag = "Indicator"
+    tag: str = "Indicator"
 
     alias = "RadixProgressIndicator"
 
diff --git a/reflex/components/radix/primitives/slider.py b/reflex/components/radix/primitives/slider.py
index 185aa0d380d..ac70790e041 100644
--- a/reflex/components/radix/primitives/slider.py
+++ b/reflex/components/radix/primitives/slider.py
@@ -21,7 +21,7 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
 class SliderRoot(SliderComponent):
     """The Slider component comtaining all slider parts."""
 
-    tag = "Root"
+    tag: str = "Root"
     alias = "RadixSliderRoot"
 
     default_value: Optional[Var[List[int]]] = None
@@ -81,7 +81,7 @@ def _apply_theme(self, theme: Component):
 class SliderTrack(SliderComponent):
     """A Slider Track component."""
 
-    tag = "Track"
+    tag: str = "Track"
     alias = "RadixSliderTrack"
 
     def _apply_theme(self, theme: Component):
@@ -103,7 +103,7 @@ def _apply_theme(self, theme: Component):
 class SliderRange(SliderComponent):
     """A SliderRange component."""
 
-    tag = "Range"
+    tag: str = "Range"
     alias = "RadixSliderRange"
 
     def _apply_theme(self, theme: Component):
@@ -123,7 +123,7 @@ def _apply_theme(self, theme: Component):
 class SliderThumb(SliderComponent):
     """A SliderThumb component."""
 
-    tag = "Thumb"
+    tag: str = "Thumb"
     alias = "RadixSliderThumb"
 
     def _apply_theme(self, theme: Component):
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index 502316a217e..4157b47d0cb 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -125,7 +125,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. Defaults to True.
     has_background: Optional[Var[bool]] = None
@@ -207,7 +207,7 @@ class ThemePanel(RadixThemesComponent):
     Include as a child component of Theme to use in your app.
     """
 
-    tag = "ThemePanel"
+    tag: str = "ThemePanel"
 
     # Whether the panel is open. Defaults to False.
     default_open: Optional[Var[bool]] = None
@@ -217,7 +217,7 @@ class RadixThemesColorModeProvider(Component):
     """Next-themes integration for radix themes components."""
 
     library = "/components/reflex/radix_themes_color_mode_provider.js"
-    tag = "RadixThemesColorModeProvider"
+    tag: str = "RadixThemesColorModeProvider"
     is_default = True
 
 
diff --git a/reflex/components/radix/themes/components/alert_dialog.py b/reflex/components/radix/themes/components/alert_dialog.py
index f257ae006f0..3fee4dec939 100644
--- a/reflex/components/radix/themes/components/alert_dialog.py
+++ b/reflex/components/radix/themes/components/alert_dialog.py
@@ -14,7 +14,7 @@
 class AlertDialogRoot(RadixThemesComponent):
     """Contains all the parts of the dialog."""
 
-    tag = "AlertDialog.Root"
+    tag: str = "AlertDialog.Root"
 
     # The controlled open state of the dialog.
     open: Optional[Var[bool]] = None
@@ -34,13 +34,13 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class AlertDialogTrigger(RadixThemesComponent):
     """Wraps the control that will open the dialog."""
 
-    tag = "AlertDialog.Trigger"
+    tag: str = "AlertDialog.Trigger"
 
 
 class AlertDialogContent(el.Div, RadixThemesComponent):
     """Contains the content of the dialog. This component is based on the div element."""
 
-    tag = "AlertDialog.Content"
+    tag: str = "AlertDialog.Content"
 
     # The size of the content.
     size: Optional[Var[LiteralContentSize]] = None
@@ -68,7 +68,7 @@ class AlertDialogTitle(RadixThemesComponent):
     leading trim on top.
     """
 
-    tag = "AlertDialog.Title"
+    tag: str = "AlertDialog.Title"
 
 
 class AlertDialogDescription(RadixThemesComponent):
@@ -76,7 +76,7 @@ class AlertDialogDescription(RadixThemesComponent):
     This part is based on the Text component with a pre-defined font size.
     """
 
-    tag = "AlertDialog.Description"
+    tag: str = "AlertDialog.Description"
 
 
 class AlertDialogAction(RadixThemesComponent):
@@ -84,7 +84,7 @@ class AlertDialogAction(RadixThemesComponent):
     visually from the Cancel control.
     """
 
-    tag = "AlertDialog.Action"
+    tag: str = "AlertDialog.Action"
 
 
 class AlertDialogCancel(RadixThemesComponent):
@@ -92,7 +92,7 @@ class AlertDialogCancel(RadixThemesComponent):
     visually from the Action control.
     """
 
-    tag = "AlertDialog.Cancel"
+    tag: str = "AlertDialog.Cancel"
 
 
 class AlertDialog(ComponentNamespace):
diff --git a/reflex/components/radix/themes/components/aspect_ratio.py b/reflex/components/radix/themes/components/aspect_ratio.py
index 1c8b000a1ae..5b2e942798b 100644
--- a/reflex/components/radix/themes/components/aspect_ratio.py
+++ b/reflex/components/radix/themes/components/aspect_ratio.py
@@ -9,7 +9,7 @@
 class AspectRatio(RadixThemesComponent):
     """Displays content with a desired ratio."""
 
-    tag = "AspectRatio"
+    tag: str = "AspectRatio"
 
     # The ratio of the width to the height of the element
     ratio: Optional[Var[Union[float, int]]] = None
diff --git a/reflex/components/radix/themes/components/avatar.py b/reflex/components/radix/themes/components/avatar.py
index 41eb58a1a45..29d0a987566 100644
--- a/reflex/components/radix/themes/components/avatar.py
+++ b/reflex/components/radix/themes/components/avatar.py
@@ -15,7 +15,7 @@
 class Avatar(RadixThemesComponent):
     """An image element with a fallback for representing the user."""
 
-    tag = "Avatar"
+    tag: str = "Avatar"
 
     # The variant of the avatar
     variant: Optional[Var[Literal["solid", "soft"]]] = None
diff --git a/reflex/components/radix/themes/components/badge.py b/reflex/components/radix/themes/components/badge.py
index 2bdb5d18ccd..1b68c370b5a 100644
--- a/reflex/components/radix/themes/components/badge.py
+++ b/reflex/components/radix/themes/components/badge.py
@@ -14,7 +14,7 @@
 class Badge(el.Span, RadixThemesComponent):
     """A stylized badge element."""
 
-    tag = "Badge"
+    tag: str = "Badge"
 
     # The variant of the badge
     variant: Optional[Var[Literal["solid", "soft", "surface", "outline"]]] = None
diff --git a/reflex/components/radix/themes/components/button.py b/reflex/components/radix/themes/components/button.py
index 2ed920ffb2f..3e8a380fa59 100644
--- a/reflex/components/radix/themes/components/button.py
+++ b/reflex/components/radix/themes/components/button.py
@@ -17,7 +17,7 @@
 class Button(el.Button, 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: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/components/callout.py b/reflex/components/radix/themes/components/callout.py
index b3eb71e3173..094b947d56a 100644
--- a/reflex/components/radix/themes/components/callout.py
+++ b/reflex/components/radix/themes/components/callout.py
@@ -18,7 +18,7 @@
 class CalloutRoot(el.Div, RadixThemesComponent):
     """Groups Icon and Text parts of a Callout."""
 
-    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: Optional[Var[bool]] = None
@@ -39,13 +39,13 @@ class CalloutRoot(el.Div, RadixThemesComponent):
 class CalloutIcon(el.Div, RadixThemesComponent):
     """Provides width and height for the icon associated with the callout."""
 
-    tag = "Callout.Icon"
+    tag: str = "Callout.Icon"
 
 
 class CalloutText(el.P, RadixThemesComponent):
     """Renders the callout text. This component is based on the p element."""
 
-    tag = "Callout.Text"
+    tag: str = "Callout.Text"
 
 
 class Callout(CalloutRoot):
diff --git a/reflex/components/radix/themes/components/card.py b/reflex/components/radix/themes/components/card.py
index 0d70baaabea..1dff04f9fca 100644
--- a/reflex/components/radix/themes/components/card.py
+++ b/reflex/components/radix/themes/components/card.py
@@ -12,7 +12,7 @@
 class Card(el.Div, RadixThemesComponent):
     """Container that groups related content and actions."""
 
-    tag = "Card"
+    tag: str = "Card"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/components/checkbox.py b/reflex/components/radix/themes/components/checkbox.py
index 7dbd05882ee..c080b1f7209 100644
--- a/reflex/components/radix/themes/components/checkbox.py
+++ b/reflex/components/radix/themes/components/checkbox.py
@@ -20,7 +20,7 @@
 class Checkbox(RadixThemesComponent):
     """Selects a single value, typically for submission in a form."""
 
-    tag = "Checkbox"
+    tag: str = "Checkbox"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Optional[Var[bool]] = None
@@ -73,7 +73,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class HighLevelCheckbox(RadixThemesComponent):
     """A checkbox component with a label."""
 
-    tag = "Checkbox"
+    tag: str = "Checkbox"
 
     # The text label for the checkbox.
     text: Optional[Var[str]] = None
diff --git a/reflex/components/radix/themes/components/context_menu.py b/reflex/components/radix/themes/components/context_menu.py
index c1719c319fd..c4e6ac45d69 100644
--- a/reflex/components/radix/themes/components/context_menu.py
+++ b/reflex/components/radix/themes/components/context_menu.py
@@ -14,7 +14,7 @@
 class ContextMenuRoot(RadixThemesComponent):
     """Menu representing a set of actions, displayed at the origin of a pointer right-click or long-press."""
 
-    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: Optional[Var[bool]] = None
@@ -36,7 +36,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class ContextMenuTrigger(RadixThemesComponent):
     """Wraps the element that will open the context menu."""
 
-    tag = "ContextMenu.Trigger"
+    tag: str = "ContextMenu.Trigger"
 
     # Whether the trigger is disabled
     disabled: Optional[Var[bool]] = None
@@ -49,7 +49,7 @@ class ContextMenuTrigger(RadixThemesComponent):
 class ContextMenuContent(RadixThemesComponent):
     """The component that pops out when the context menu is open."""
 
-    tag = "ContextMenu.Content"
+    tag: str = "ContextMenu.Content"
 
     # Button size "1" - "4"
     size: Optional[Var[Literal["1", "2"]]] = None
@@ -88,13 +88,13 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class ContextMenuSub(RadixThemesComponent):
     """Contains all the parts of a submenu."""
 
-    tag = "ContextMenu.Sub"
+    tag: str = "ContextMenu.Sub"
 
 
 class ContextMenuSubTrigger(RadixThemesComponent):
     """An item that opens a submenu."""
 
-    tag = "ContextMenu.SubTrigger"
+    tag: str = "ContextMenu.SubTrigger"
 
     # Whether the trigger is disabled
     disabled: Optional[Var[bool]] = None
@@ -105,7 +105,7 @@ class ContextMenuSubTrigger(RadixThemesComponent):
 class ContextMenuSubContent(RadixThemesComponent):
     """The component that pops out when a submenu is open."""
 
-    tag = "ContextMenu.SubContent"
+    tag: str = "ContextMenu.SubContent"
 
     # When true, keyboard navigation will loop from last item to first, and vice versa.
     loop: Optional[Var[bool]] = None
@@ -130,7 +130,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class ContextMenuItem(RadixThemesComponent):
     """The component that contains the context menu items."""
 
-    tag = "ContextMenu.Item"
+    tag: str = "ContextMenu.Item"
 
     # Override theme color for button
     color_scheme: Optional[Var[LiteralAccentColor]] = None
@@ -144,7 +144,7 @@ class ContextMenuItem(RadixThemesComponent):
 class ContextMenuSeparator(RadixThemesComponent):
     """Separates items in a context menu."""
 
-    tag = "ContextMenu.Separator"
+    tag: str = "ContextMenu.Separator"
 
 
 class ContextMenu(ComponentNamespace):
diff --git a/reflex/components/radix/themes/components/dialog.py b/reflex/components/radix/themes/components/dialog.py
index 5a664758fa2..24e0022d709 100644
--- a/reflex/components/radix/themes/components/dialog.py
+++ b/reflex/components/radix/themes/components/dialog.py
@@ -14,7 +14,7 @@
 class DialogRoot(RadixThemesComponent):
     """Root component for Dialog."""
 
-    tag = "Dialog.Root"
+    tag: str = "Dialog.Root"
 
     # The controlled open state of the dialog.
     open: Optional[Var[bool]] = None
@@ -34,19 +34,19 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class DialogTrigger(RadixThemesComponent):
     """Trigger an action or event, to open a Dialog modal."""
 
-    tag = "Dialog.Trigger"
+    tag: str = "Dialog.Trigger"
 
 
 class DialogTitle(RadixThemesComponent):
     """Title component to display inside a Dialog modal."""
 
-    tag = "Dialog.Title"
+    tag: str = "Dialog.Title"
 
 
 class DialogContent(el.Div, RadixThemesComponent):
     """Content component to display inside a Dialog modal."""
 
-    tag = "Dialog.Content"
+    tag: str = "Dialog.Content"
 
     # DialogContent size "1" - "4"
     size: Optional[Var[Literal["1", "2", "3", "4"]]] = None
@@ -70,13 +70,13 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class DialogDescription(RadixThemesComponent):
     """Description component to display inside a Dialog modal."""
 
-    tag = "Dialog.Description"
+    tag: str = "Dialog.Description"
 
 
 class DialogClose(RadixThemesComponent):
     """Close button component to close an open Dialog modal."""
 
-    tag = "Dialog.Close"
+    tag: str = "Dialog.Close"
 
 
 class Dialog(ComponentNamespace):
diff --git a/reflex/components/radix/themes/components/dropdown_menu.py b/reflex/components/radix/themes/components/dropdown_menu.py
index 54d8fb6d057..c004f053b3e 100644
--- a/reflex/components/radix/themes/components/dropdown_menu.py
+++ b/reflex/components/radix/themes/components/dropdown_menu.py
@@ -30,7 +30,7 @@
 class DropdownMenuRoot(RadixThemesComponent):
     """The Dropdown Menu Root Component."""
 
-    tag = "DropdownMenu.Root"
+    tag: str = "DropdownMenu.Root"
 
     # The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
     default_open: Optional[Var[bool]] = None
@@ -61,7 +61,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class DropdownMenuTrigger(RadixThemesComponent):
     """The button that toggles the dropdown menu."""
 
-    tag = "DropdownMenu.Trigger"
+    tag: str = "DropdownMenu.Trigger"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
     as_child: Optional[Var[bool]] = None
@@ -74,7 +74,7 @@ class DropdownMenuTrigger(RadixThemesComponent):
 class DropdownMenuContent(RadixThemesComponent):
     """The Dropdown Menu Content component that pops out when the dropdown menu is open."""
 
-    tag = "DropdownMenu.Content"
+    tag: str = "DropdownMenu.Content"
 
     # Dropdown Menu Content size "1" - "2"
     size: Optional[Var[LiteralSizeType]] = None
@@ -145,7 +145,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class DropdownMenuSubTrigger(RadixThemesComponent):
     """An item that opens a submenu."""
 
-    tag = "DropdownMenu.SubTrigger"
+    tag: str = "DropdownMenu.SubTrigger"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
     as_child: Optional[Var[bool]] = None
@@ -162,7 +162,7 @@ class DropdownMenuSubTrigger(RadixThemesComponent):
 class DropdownMenuSub(RadixThemesComponent):
     """Contains all the parts of a submenu."""
 
-    tag = "DropdownMenu.Sub"
+    tag: str = "DropdownMenu.Sub"
 
     # The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
     open: Optional[Var[bool]] = None
@@ -185,7 +185,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class DropdownMenuSubContent(RadixThemesComponent):
     """The component that pops out when a submenu is open. Must be rendered inside DropdownMenuSub."""
 
-    tag = "DropdownMenu.SubContent"
+    tag: str = "DropdownMenu.SubContent"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
     as_child: Optional[Var[bool]] = None
@@ -239,7 +239,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class DropdownMenuItem(RadixThemesComponent):
     """The Dropdown Menu Item Component."""
 
-    tag = "DropdownMenu.Item"
+    tag: str = "DropdownMenu.Item"
 
     # Override theme color for Dropdown Menu Item
     color_scheme: Optional[Var[LiteralAccentColor]] = None
@@ -273,7 +273,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class DropdownMenuSeparator(RadixThemesComponent):
     """Dropdown Menu Separator Component. Used to visually separate items in the dropdown menu."""
 
-    tag = "DropdownMenu.Separator"
+    tag: str = "DropdownMenu.Separator"
 
 
 class DropdownMenu(ComponentNamespace):
diff --git a/reflex/components/radix/themes/components/hover_card.py b/reflex/components/radix/themes/components/hover_card.py
index 94ed6fd623a..560f4c0568a 100644
--- a/reflex/components/radix/themes/components/hover_card.py
+++ b/reflex/components/radix/themes/components/hover_card.py
@@ -14,7 +14,7 @@
 class HoverCardRoot(RadixThemesComponent):
     """For sighted users to preview content available behind a link."""
 
-    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: Optional[Var[bool]] = None
@@ -43,13 +43,13 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class HoverCardTrigger(RadixThemesComponent):
     """Wraps the link that will open the hover card."""
 
-    tag = "HoverCard.Trigger"
+    tag: str = "HoverCard.Trigger"
 
 
 class HoverCardContent(el.Div, RadixThemesComponent):
     """Contains the content of the open hover card."""
 
-    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: Optional[Var[Literal["top", "right", "bottom", "left"]]] = None
diff --git a/reflex/components/radix/themes/components/icon_button.py b/reflex/components/radix/themes/components/icon_button.py
index d7a6a7402b9..412cb89e183 100644
--- a/reflex/components/radix/themes/components/icon_button.py
+++ b/reflex/components/radix/themes/components/icon_button.py
@@ -21,7 +21,7 @@
 class IconButton(el.Button, RadixThemesComponent):
     """A button designed specifically for usage with a single icon."""
 
-    tag = "IconButton"
+    tag: str = "IconButton"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/components/inset.py b/reflex/components/radix/themes/components/inset.py
index 59f22d71eab..9997ccf76d5 100644
--- a/reflex/components/radix/themes/components/inset.py
+++ b/reflex/components/radix/themes/components/inset.py
@@ -14,7 +14,7 @@
 class Inset(el.Div, RadixThemesComponent):
     """Applies a negative margin to allow content to bleed into the surrounding container."""
 
-    tag = "Inset"
+    tag: str = "Inset"
 
     # The side
     side: Optional[Var[Literal["x", "y", "top", "bottom", "right", "left"]]] = None
diff --git a/reflex/components/radix/themes/components/popover.py b/reflex/components/radix/themes/components/popover.py
index cd5c048c8b4..4706a63f90c 100644
--- a/reflex/components/radix/themes/components/popover.py
+++ b/reflex/components/radix/themes/components/popover.py
@@ -14,7 +14,7 @@
 class PopoverRoot(RadixThemesComponent):
     """Floating element for displaying rich content, triggered by a button."""
 
-    tag = "Popover.Root"
+    tag: str = "Popover.Root"
 
     # The controlled open state of the popover.
     open: Optional[Var[bool]] = None
@@ -37,13 +37,13 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class PopoverTrigger(RadixThemesComponent):
     """Wraps the control that will open the popover."""
 
-    tag = "Popover.Trigger"
+    tag: str = "Popover.Trigger"
 
 
 class PopoverContent(el.Div, RadixThemesComponent):
     """Contains content to be rendered in the open popover."""
 
-    tag = "Popover.Content"
+    tag: str = "Popover.Content"
 
     # Size of the button: "1" | "2" | "3" | "4"
     size: Optional[Var[Literal["1", "2", "3", "4"]]] = None
@@ -83,7 +83,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class PopoverClose(RadixThemesComponent):
     """Wraps the control that will close the popover."""
 
-    tag = "Popover.Close"
+    tag: str = "Popover.Close"
 
 
 class Popover(ComponentNamespace):
diff --git a/reflex/components/radix/themes/components/radio_group.py b/reflex/components/radix/themes/components/radio_group.py
index 1f4175331bc..bfa66e6a2fa 100644
--- a/reflex/components/radix/themes/components/radio_group.py
+++ b/reflex/components/radix/themes/components/radio_group.py
@@ -20,7 +20,7 @@
 class RadioGroupRoot(RadixThemesComponent):
     """A set of interactive radio buttons where only one can be selected at a time."""
 
-    tag = "RadioGroup.Root"
+    tag: str = "RadioGroup.Root"
 
     # The size of the radio group: "1" | "2" | "3"
     size: Optional[Var[Literal["1", "2", "3"]]] = None
@@ -67,7 +67,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class RadioGroupItem(RadixThemesComponent):
     """An item in the group that can be checked."""
 
-    tag = "RadioGroup.Item"
+    tag: str = "RadioGroup.Item"
 
     # The value of the radio item to check. Should be used in conjunction with on_change.
     value: Optional[Var[str]] = None
diff --git a/reflex/components/radix/themes/components/scroll_area.py b/reflex/components/radix/themes/components/scroll_area.py
index 35831b7e222..46d7c12c0c4 100644
--- a/reflex/components/radix/themes/components/scroll_area.py
+++ b/reflex/components/radix/themes/components/scroll_area.py
@@ -11,7 +11,7 @@
 class ScrollArea(RadixThemesComponent):
     """Custom styled, cross-browser scrollable area using native functionality."""
 
-    tag = "ScrollArea"
+    tag: str = "ScrollArea"
 
     # The alignment of the scroll area
     scrollbars: Optional[Var[Literal["vertical", "horizontal", "both"]]] = None
diff --git a/reflex/components/radix/themes/components/select.py b/reflex/components/radix/themes/components/select.py
index b5c8b8b2838..c3502032c14 100644
--- a/reflex/components/radix/themes/components/select.py
+++ b/reflex/components/radix/themes/components/select.py
@@ -16,7 +16,7 @@
 class SelectRoot(RadixThemesComponent):
     """Displays a list of options for the user to pick from, triggered by a button."""
 
-    tag = "Select.Root"
+    tag: str = "Select.Root"
 
     # The size of the select: "1" | "2" | "3"
     size: Optional[Var[Literal["1", "2", "3"]]] = None
@@ -61,7 +61,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class SelectTrigger(RadixThemesComponent):
     """The button that toggles the select."""
 
-    tag = "Select.Trigger"
+    tag: str = "Select.Trigger"
 
     # Variant of the select trigger
     variant: Optional[Var[Literal["classic", "surface", "soft", "ghost"]]] = None
@@ -81,7 +81,7 @@ class SelectTrigger(RadixThemesComponent):
 class SelectContent(RadixThemesComponent):
     """The component that pops out when the select is open."""
 
-    tag = "Select.Content"
+    tag: str = "Select.Content"
 
     # The variant of the select content
     variant: Optional[Var[Literal["solid", "soft"]]] = None
@@ -124,7 +124,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class SelectGroup(RadixThemesComponent):
     """Used to group multiple items."""
 
-    tag = "Select.Group"
+    tag: str = "Select.Group"
 
     _valid_parents: List[str] = ["SelectContent"]
 
@@ -132,7 +132,7 @@ class SelectGroup(RadixThemesComponent):
 class SelectItem(RadixThemesComponent):
     """The component that contains the select items."""
 
-    tag = "Select.Item"
+    tag: str = "Select.Item"
 
     # The value given as data when submitting a form with a name.
     value: Optional[Var[str]] = None
@@ -146,7 +146,7 @@ class SelectItem(RadixThemesComponent):
 class SelectLabel(RadixThemesComponent):
     """Used to render the label of a group, it isn't focusable using arrow keys."""
 
-    tag = "Select.Label"
+    tag: str = "Select.Label"
 
     _valid_parents: List[str] = ["SelectGroup"]
 
@@ -154,7 +154,7 @@ class SelectLabel(RadixThemesComponent):
 class SelectSeparator(RadixThemesComponent):
     """Used to visually separate items in the Select."""
 
-    tag = "Select.Separator"
+    tag: str = "Select.Separator"
 
 
 class HighLevelSelect(SelectRoot):
diff --git a/reflex/components/radix/themes/components/separator.py b/reflex/components/radix/themes/components/separator.py
index 567d284c6af..2cd93f1c9a8 100644
--- a/reflex/components/radix/themes/components/separator.py
+++ b/reflex/components/radix/themes/components/separator.py
@@ -14,7 +14,7 @@
 class Separator(RadixThemesComponent):
     """Visually or semantically separates content."""
 
-    tag = "Separator"
+    tag: str = "Separator"
 
     # The size of the select: "1" | "2" | "3" | "4"
     size: Var[LiteralSeperatorSize] = Var.create_safe("4")
diff --git a/reflex/components/radix/themes/components/slider.py b/reflex/components/radix/themes/components/slider.py
index 9fb32b70642..5ffa0dbd167 100644
--- a/reflex/components/radix/themes/components/slider.py
+++ b/reflex/components/radix/themes/components/slider.py
@@ -14,7 +14,7 @@
 class Slider(RadixThemesComponent):
     """Provides user selection from a range of values."""
 
-    tag = "Slider"
+    tag: str = "Slider"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/components/switch.py b/reflex/components/radix/themes/components/switch.py
index a83cf3ec426..3cc881ade0f 100644
--- a/reflex/components/radix/themes/components/switch.py
+++ b/reflex/components/radix/themes/components/switch.py
@@ -15,7 +15,7 @@
 class Switch(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: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/components/table.py b/reflex/components/radix/themes/components/table.py
index 1f5ee47753d..7f65242ad96 100644
--- a/reflex/components/radix/themes/components/table.py
+++ b/reflex/components/radix/themes/components/table.py
@@ -13,7 +13,7 @@
 class TableRoot(el.Table, RadixThemesComponent):
     """A semantic table for presenting tabular data."""
 
-    tag = "Table.Root"
+    tag: str = "Table.Root"
 
     # The size of the table: "1" | "2" | "3"
     size: Optional[Var[Literal["1", "2", "3"]]] = None
@@ -25,7 +25,7 @@ class TableRoot(el.Table, RadixThemesComponent):
 class TableHeader(el.Thead, RadixThemesComponent):
     """The header of the table defines column names and other non-data elements."""
 
-    tag = "Table.Header"
+    tag: str = "Table.Header"
 
     _invalid_children: List[str] = ["TableBody"]
 
@@ -35,7 +35,7 @@ class TableHeader(el.Thead, RadixThemesComponent):
 class TableRow(el.Tr, RadixThemesComponent):
     """A row containing table cells."""
 
-    tag = "Table.Row"
+    tag: str = "Table.Row"
 
     # The alignment of the row
     align: Optional[Var[Literal["start", "center", "end", "baseline"]]] = None
@@ -46,7 +46,7 @@ class TableRow(el.Tr, RadixThemesComponent):
 class TableColumnHeaderCell(el.Th, RadixThemesComponent):
     """A table cell that is semantically treated as a column header."""
 
-    tag = "Table.ColumnHeaderCell"
+    tag: str = "Table.ColumnHeaderCell"
 
     # The justification of the column
     justify: Optional[Var[Literal["start", "center", "end"]]] = None
@@ -64,7 +64,7 @@ class TableColumnHeaderCell(el.Th, RadixThemesComponent):
 class TableBody(el.Tbody, RadixThemesComponent):
     """The body of the table contains the data rows."""
 
-    tag = "Table.Body"
+    tag: str = "Table.Body"
 
     _invalid_children: List[str] = [
         "TableHeader",
@@ -79,7 +79,7 @@ class TableBody(el.Tbody, RadixThemesComponent):
 class TableCell(el.Td, RadixThemesComponent):
     """A cell containing data."""
 
-    tag = "Table.Cell"
+    tag: str = "Table.Cell"
 
     # The justification of the column
     justify: Optional[Var[Literal["start", "center", "end"]]] = None
@@ -96,7 +96,7 @@ class TableCell(el.Td, RadixThemesComponent):
 class TableRowHeaderCell(el.Th, RadixThemesComponent):
     """A table cell that is semantically treated as a row header."""
 
-    tag = "Table.RowHeaderCell"
+    tag: str = "Table.RowHeaderCell"
 
     # The justification of the column
     justify: Optional[Var[Literal["start", "center", "end"]]] = None
diff --git a/reflex/components/radix/themes/components/tabs.py b/reflex/components/radix/themes/components/tabs.py
index a60f04f1111..92bc892e87f 100644
--- a/reflex/components/radix/themes/components/tabs.py
+++ b/reflex/components/radix/themes/components/tabs.py
@@ -13,7 +13,7 @@
 class TabsRoot(RadixThemesComponent):
     """Set of content sections to be displayed one at a time."""
 
-    tag = "Tabs.Root"
+    tag: str = "Tabs.Root"
 
     # The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.
     default_value: Optional[Var[str]] = None
@@ -42,7 +42,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 class TabsList(RadixThemesComponent):
     """Contains the triggers that sit alongside the active content."""
 
-    tag = "Tabs.List"
+    tag: str = "Tabs.List"
 
     # Tabs size "1" - "2"
     size: Optional[Var[Literal["1", "2"]]] = None
@@ -51,7 +51,7 @@ class TabsList(RadixThemesComponent):
 class TabsTrigger(RadixThemesComponent):
     """The button that activates its associated content."""
 
-    tag = "Tabs.Trigger"
+    tag: str = "Tabs.Trigger"
 
     # The value of the tab. Must be unique for each tab.
     value: Optional[Var[str]] = None
@@ -65,7 +65,7 @@ class TabsTrigger(RadixThemesComponent):
 class TabsContent(RadixThemesComponent):
     """Contains the content associated with each trigger."""
 
-    tag = "Tabs.Content"
+    tag: str = "Tabs.Content"
 
     # The value of the tab. Must be unique for each tab.
     value: Optional[Var[str]] = None
diff --git a/reflex/components/radix/themes/components/text_area.py b/reflex/components/radix/themes/components/text_area.py
index a21f0125f83..4f531c20165 100644
--- a/reflex/components/radix/themes/components/text_area.py
+++ b/reflex/components/radix/themes/components/text_area.py
@@ -18,7 +18,7 @@
 class TextArea(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: Optional[Var[LiteralTextAreaSize]] = None
diff --git a/reflex/components/radix/themes/components/text_field.py b/reflex/components/radix/themes/components/text_field.py
index 84810ac7f50..4a56c2ab99e 100644
--- a/reflex/components/radix/themes/components/text_field.py
+++ b/reflex/components/radix/themes/components/text_field.py
@@ -20,7 +20,7 @@
 class TextFieldRoot(el.Div, 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: Optional[Var[LiteralTextFieldSize]] = None
@@ -38,7 +38,7 @@ class TextFieldRoot(el.Div, 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:
@@ -75,7 +75,7 @@ def get_event_triggers(self) -> Dict[str, Any]:
 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_scheme: Optional[Var[LiteralAccentColor]] = None
diff --git a/reflex/components/radix/themes/components/tooltip.py b/reflex/components/radix/themes/components/tooltip.py
index 9778b34a884..51c3c6d175c 100644
--- a/reflex/components/radix/themes/components/tooltip.py
+++ b/reflex/components/radix/themes/components/tooltip.py
@@ -33,7 +33,7 @@
 class Tooltip(RadixThemesComponent):
     """Floating element that provides a control with contextual information via pointer or focus."""
 
-    tag = "Tooltip"
+    tag: str = "Tooltip"
 
     # The content of the tooltip.
     content: Optional[Var[str]] = None
diff --git a/reflex/components/radix/themes/layout/box.py b/reflex/components/radix/themes/layout/box.py
index b9bb99107d9..7f8014def1b 100644
--- a/reflex/components/radix/themes/layout/box.py
+++ b/reflex/components/radix/themes/layout/box.py
@@ -9,4 +9,4 @@
 class Box(el.Div, RadixThemesComponent):
     """A fundamental layout building block, based on `div` element."""
 
-    tag = "Box"
+    tag: str = "Box"
diff --git a/reflex/components/radix/themes/layout/container.py b/reflex/components/radix/themes/layout/container.py
index 0b1bff0c52a..7ee422fa150 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, RadixThemesComponent):
     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: Optional[Var[LiteralContainerSize]] = None
diff --git a/reflex/components/radix/themes/layout/flex.py b/reflex/components/radix/themes/layout/flex.py
index fe2dba4de1e..201e3f564e6 100644
--- a/reflex/components/radix/themes/layout/flex.py
+++ b/reflex/components/radix/themes/layout/flex.py
@@ -20,7 +20,7 @@
 class Flex(el.Div, RadixThemesComponent):
     """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: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/layout/grid.py b/reflex/components/radix/themes/layout/grid.py
index ea1653d023c..45c717fb753 100644
--- a/reflex/components/radix/themes/layout/grid.py
+++ b/reflex/components/radix/themes/layout/grid.py
@@ -19,7 +19,7 @@
 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: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/layout/section.py b/reflex/components/radix/themes/layout/section.py
index faf179aa43a..41bc25a263c 100644
--- a/reflex/components/radix/themes/layout/section.py
+++ b/reflex/components/radix/themes/layout/section.py
@@ -14,7 +14,7 @@
 class Section(el.Section, RadixThemesComponent):
     """Denotes a section of page content."""
 
-    tag = "Section"
+    tag: str = "Section"
 
     # The size of the section: "1" - "3" (default "3")
     size: Optional[Var[LiteralSectionSize]] = None
diff --git a/reflex/components/radix/themes/typography/blockquote.py b/reflex/components/radix/themes/typography/blockquote.py
index 0e5da9d92c3..88b08860101 100644
--- a/reflex/components/radix/themes/typography/blockquote.py
+++ b/reflex/components/radix/themes/typography/blockquote.py
@@ -22,7 +22,7 @@
 class Blockquote(el.Blockquote, RadixThemesComponent):
     """A block level extended quotation."""
 
-    tag = "Blockquote"
+    tag: str = "Blockquote"
 
     # Text size: "1" - "9"
     size: Optional[Var[LiteralTextSize]] = None
diff --git a/reflex/components/radix/themes/typography/code.py b/reflex/components/radix/themes/typography/code.py
index c5937a530bd..2930cba752b 100644
--- a/reflex/components/radix/themes/typography/code.py
+++ b/reflex/components/radix/themes/typography/code.py
@@ -23,7 +23,7 @@
 class Code(el.Code, RadixThemesComponent):
     """A block level extended quotation."""
 
-    tag = "Code"
+    tag: str = "Code"
 
     # The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
     variant: Optional[Var[LiteralVariant]] = None
diff --git a/reflex/components/radix/themes/typography/heading.py b/reflex/components/radix/themes/typography/heading.py
index d20bc22c86c..7cd09e92e36 100644
--- a/reflex/components/radix/themes/typography/heading.py
+++ b/reflex/components/radix/themes/typography/heading.py
@@ -24,7 +24,7 @@
 class Heading(el.H1, 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: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/typography/link.py b/reflex/components/radix/themes/typography/link.py
index c358e458201..0235e4fcc3e 100644
--- a/reflex/components/radix/themes/typography/link.py
+++ b/reflex/components/radix/themes/typography/link.py
@@ -31,7 +31,7 @@
 class Link(RadixThemesComponent, A, MemoizationLeaf):
     """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: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/typography/text.py b/reflex/components/radix/themes/typography/text.py
index 1706c2dff70..d7cd1c8d641 100644
--- a/reflex/components/radix/themes/typography/text.py
+++ b/reflex/components/radix/themes/typography/text.py
@@ -46,7 +46,7 @@
 class Text(el.Span, 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: Optional[Var[bool]] = None
@@ -82,13 +82,13 @@ class Span(Text):
 class Em(el.Em, RadixThemesComponent):
     """Marks text to stress emphasis."""
 
-    tag = "Em"
+    tag: str = "Em"
 
 
 class Kbd(el.Kbd, RadixThemesComponent):
     """Represents keyboard input or a hotkey."""
 
-    tag = "Kbd"
+    tag: str = "Kbd"
 
     # Text size: "1" - "9"
     size: Optional[Var[LiteralTextSize]] = None
@@ -97,13 +97,13 @@ class Kbd(el.Kbd, RadixThemesComponent):
 class Quote(el.Q, RadixThemesComponent):
     """A short inline quotation."""
 
-    tag = "Quote"
+    tag: str = "Quote"
 
 
 class Strong(el.Strong, RadixThemesComponent):
     """Marks text to signify strong importance."""
 
-    tag = "Strong"
+    tag: str = "Strong"
 
 
 class TextNamespace(ComponentNamespace):
diff --git a/reflex/components/react_player/react_player.py b/reflex/components/react_player/react_player.py
index 516498d0d9c..13beb8b5be8 100644
--- a/reflex/components/react_player/react_player.py
+++ b/reflex/components/react_player/react_player.py
@@ -14,7 +14,7 @@ class ReactPlayer(NoSSRComponent):
 
     library = "react-player@2.12.0"
 
-    tag = "ReactPlayer"
+    tag: str = "ReactPlayer"
 
     is_default = True
 
diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 1150c90f89d..e7bf110a1ba 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -87,7 +87,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class XAxis(Axis):
     """An XAxis component in Recharts."""
 
-    tag = "XAxis"
+    tag: str = "XAxis"
 
     alias = "RechartsXAxis"
 
@@ -95,7 +95,7 @@ class XAxis(Axis):
 class YAxis(Axis):
     """A YAxis component in Recharts."""
 
-    tag = "YAxis"
+    tag: str = "YAxis"
 
     alias = "RechartsYAxis"
 
@@ -106,7 +106,7 @@ class YAxis(Axis):
 class ZAxis(Recharts):
     """A ZAxis component in Recharts."""
 
-    tag = "ZAxis"
+    tag: str = "ZAxis"
 
     alias = "RechartszAxis"
 
@@ -129,7 +129,7 @@ class ZAxis(Recharts):
 class Brush(Recharts):
     """A Brush component in Recharts."""
 
-    tag = "Brush"
+    tag: str = "Brush"
 
     alias = "RechartsBrush"
 
@@ -214,7 +214,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class Area(Cartesian):
     """An Area component in Recharts."""
 
-    tag = "Area"
+    tag: str = "Area"
 
     alias = "RechartsArea"
 
@@ -249,7 +249,7 @@ class Area(Cartesian):
 class Bar(Cartesian):
     """A Bar component in Recharts."""
 
-    tag = "Bar"
+    tag: str = "Bar"
 
     alias = "RechartsBar"
 
@@ -284,7 +284,7 @@ class Bar(Cartesian):
 class Line(Cartesian):
     """A Line component in Recharts."""
 
-    tag = "Line"
+    tag: str = "Line"
 
     alias = "RechartsLine"
 
@@ -319,7 +319,7 @@ class Line(Cartesian):
 class Scatter(Cartesian):
     """A Scatter component in Recharts."""
 
-    tag = "Scatter"
+    tag: str = "Scatter"
 
     alias = "RechartsScatter"
 
@@ -351,7 +351,7 @@ class Scatter(Cartesian):
 class Funnel(Cartesian):
     """A Funnel component in Recharts."""
 
-    tag = "Funnel"
+    tag: str = "Funnel"
 
     alias = "RechartsFunnel"
 
@@ -374,7 +374,7 @@ class Funnel(Cartesian):
 class ErrorBar(Recharts):
     """An ErrorBar component in Recharts."""
 
-    tag = "ErrorBar"
+    tag: str = "ErrorBar"
 
     alias = "RechartsErrorBar"
 
@@ -419,7 +419,7 @@ class Reference(Recharts):
 class ReferenceLine(Reference):
     """A ReferenceLine component in Recharts."""
 
-    tag = "ReferenceLine"
+    tag: str = "ReferenceLine"
 
     alias = "RechartsReferenceLine"
 
@@ -433,7 +433,7 @@ class ReferenceLine(Reference):
 class ReferenceDot(Reference):
     """A ReferenceDot component in Recharts."""
 
-    tag = "ReferenceDot"
+    tag: str = "ReferenceDot"
 
     alias = "RechartsReferenceDot"
 
@@ -459,7 +459,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class ReferenceArea(Recharts):
     """A ReferenceArea component in Recharts."""
 
-    tag = "ReferenceArea"
+    tag: str = "ReferenceArea"
 
     alias = "RechartsReferenceArea"
 
@@ -519,7 +519,7 @@ class Grid(Recharts):
 class CartesianGrid(Grid):
     """A CartesianGrid component in Recharts."""
 
-    tag = "CartesianGrid"
+    tag: str = "CartesianGrid"
 
     alias = "RechartsCartesianGrid"
 
@@ -542,7 +542,7 @@ class CartesianGrid(Grid):
 class CartesianAxis(Grid):
     """A CartesianAxis component in Recharts."""
 
-    tag = "CartesianAxis"
+    tag: str = "CartesianAxis"
 
     alias = "RechartsCartesianAxis"
 
diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index 6640391adea..fcb9b689c26 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -119,7 +119,7 @@ def create(cls, *children, **props) -> Component:
 class AreaChart(ChartBase):
     """An Area chart component in Recharts."""
 
-    tag = "AreaChart"
+    tag: str = "AreaChart"
 
     alias = "RechartsAreaChart"
 
@@ -147,7 +147,7 @@ class AreaChart(ChartBase):
 class BarChart(ChartBase):
     """A Bar chart component in Recharts."""
 
-    tag = "BarChart"
+    tag: str = "BarChart"
 
     alias = "RechartsBarChart"
 
@@ -187,7 +187,7 @@ class BarChart(ChartBase):
 class LineChart(ChartBase):
     """A Line chart component in Recharts."""
 
-    tag = "LineChart"
+    tag: str = "LineChart"
 
     alias = "RechartsLineChart"
 
@@ -209,7 +209,7 @@ class LineChart(ChartBase):
 class ComposedChart(ChartBase):
     """A Composed chart component in Recharts."""
 
-    tag = "ComposedChart"
+    tag: str = "ComposedChart"
 
     alias = "RechartsComposedChart"
 
@@ -248,7 +248,7 @@ class ComposedChart(ChartBase):
 class PieChart(ChartBase):
     """A Pie chart component in Recharts."""
 
-    tag = "PieChart"
+    tag: str = "PieChart"
 
     alias = "RechartsPieChart"
 
@@ -278,7 +278,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class RadarChart(ChartBase):
     """A Radar chart component in Recharts."""
 
-    tag = "RadarChart"
+    tag: str = "RadarChart"
 
     alias = "RechartsRadarChart"
 
@@ -327,7 +327,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class RadialBarChart(ChartBase):
     """A RadialBar chart component in Recharts."""
 
-    tag = "RadialBarChart"
+    tag: str = "RadialBarChart"
 
     alias = "RechartsRadialBarChart"
 
@@ -385,7 +385,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class ScatterChart(ChartBase):
     """A Scatter chart component in Recharts."""
 
-    tag = "ScatterChart"
+    tag: str = "ScatterChart"
 
     alias = "RechartsScatterChart"
 
@@ -423,7 +423,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class FunnelChart(RechartsCharts):
     """A Funnel chart component in Recharts."""
 
-    tag = "FunnelChart"
+    tag: str = "FunnelChart"
 
     alias = "RechartsFunnelChart"
 
@@ -474,7 +474,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class Treemap(RechartsCharts):
     """A Treemap chart component in Recharts."""
 
-    tag = "Treemap"
+    tag: str = "Treemap"
 
     alias = "RechartsTreemap"
 
diff --git a/reflex/components/recharts/general.py b/reflex/components/recharts/general.py
index 70a17cdf052..19c7b574965 100644
--- a/reflex/components/recharts/general.py
+++ b/reflex/components/recharts/general.py
@@ -20,7 +20,7 @@
 class ResponsiveContainer(Recharts, MemoizationLeaf):
     """A base class for responsive containers in Recharts."""
 
-    tag = "ResponsiveContainer"
+    tag: str = "ResponsiveContainer"
 
     alias = "RechartsResponsiveContainer"
 
@@ -59,7 +59,7 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
 class Legend(Recharts):
     """A Legend component in Recharts."""
 
-    tag = "Legend"
+    tag: str = "Legend"
 
     alias = "RechartsLegend"
 
@@ -112,7 +112,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class GraphingTooltip(Recharts):
     """A Tooltip component in Recharts."""
 
-    tag = "Tooltip"
+    tag: str = "Tooltip"
 
     alias = "RechartsTooltip"
 
@@ -144,7 +144,7 @@ class GraphingTooltip(Recharts):
 class Label(Recharts):
     """A Label component in Recharts."""
 
-    tag = "Label"
+    tag: str = "Label"
 
     alias = "RechartsLabel"
 
@@ -164,7 +164,7 @@ class Label(Recharts):
 class LabelList(Recharts):
     """A LabelList component in Recharts."""
 
-    tag = "LabelList"
+    tag: str = "LabelList"
 
     alias = "RechartsLabelList"
 
diff --git a/reflex/components/recharts/polar.py b/reflex/components/recharts/polar.py
index ea3d46f73c2..b47dc5d7fa5 100644
--- a/reflex/components/recharts/polar.py
+++ b/reflex/components/recharts/polar.py
@@ -18,7 +18,7 @@
 class Pie(Recharts):
     """A Pie chart component in Recharts."""
 
-    tag = "Pie"
+    tag: str = "Pie"
 
     alias = "RechartsPie"
 
@@ -92,7 +92,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class Radar(Recharts):
     """A Radar chart component in Recharts."""
 
-    tag = "Radar"
+    tag: str = "Radar"
 
     alias = "RechartsRadar"
 
@@ -136,7 +136,7 @@ class Radar(Recharts):
 class RadialBar(Recharts):
     """A RadialBar chart component in Recharts."""
 
-    tag = "RadialBar"
+    tag: str = "RadialBar"
 
     alias = "RechartsRadialBar"
 
@@ -177,7 +177,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class PolarAngleAxis(Recharts):
     """A PolarAngleAxis component in Recharts."""
 
-    tag = "PolarAngleAxis"
+    tag: str = "PolarAngleAxis"
 
     alias = "RechartsPolarAngleAxis"
 
@@ -236,7 +236,7 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
 class PolarGrid(Recharts):
     """A PolarGrid component in Recharts."""
 
-    tag = "PolarGrid"
+    tag: str = "PolarGrid"
 
     alias = "RechartsPolarGrid"
 
@@ -268,7 +268,7 @@ class PolarGrid(Recharts):
 class PolarRadiusAxis(Recharts):
     """A PolarRadiusAxis component in Recharts."""
 
-    tag = "PolarRadiusAxis"
+    tag: str = "PolarRadiusAxis"
 
     alias = "RechartsPolarRadiusAxis"
 
diff --git a/reflex/components/suneditor/editor.py b/reflex/components/suneditor/editor.py
index 2b71985572d..dd7f9306bee 100644
--- a/reflex/components/suneditor/editor.py
+++ b/reflex/components/suneditor/editor.py
@@ -75,7 +75,7 @@ class Editor(NoSSRComponent):
 
     library = "suneditor-react"
 
-    tag = "SunEditor"
+    tag: str = "SunEditor"
 
     is_default = True
 
diff --git a/tests/components/test_component.py b/tests/components/test_component.py
index 4918f37c49c..eef2d1dc6ea 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"]
 
@@ -151,7 +151,7 @@ def component6() -> Type[Component]:
     """
 
     class TestComponent6(Component):
-        tag = "RandomComponent"
+        tag: str = "RandomComponent"
 
         _invalid_children: List[str] = ["Text"]
 
@@ -167,7 +167,7 @@ def component7() -> Type[Component]:
     """
 
     class TestComponent7(Component):
-        tag = "RandomComponent"
+        tag: str = "RandomComponent"
 
         _valid_children: List[str] = ["Text"]
 
@@ -438,7 +438,7 @@ def on_foo_spec(_e, alpha: str, bravo: Dict[str, Any], charlie: Obj):
 
     class C1(Component):
         library = "/local"
-        tag = "C1"
+        tag: str = "C1"
 
         def get_event_triggers(self) -> Dict[str, Any]:
             return {
@@ -1189,7 +1189,7 @@ def test_rename_props():
     """Test that _rename_props works and is inherited."""
 
     class C1(Component):
-        tag = "C1"
+        tag: str = "C1"
 
         prop1: Optional[Var[str]] = None
         prop2: Optional[Var[str]] = None
@@ -1197,7 +1197,7 @@ class C1(Component):
         _rename_props = {"prop1": "renamed_prop1", "prop2": "renamed_prop2"}
 
     class C2(C1):
-        tag = "C2"
+        tag: str = "C2"
 
         prop3: Optional[Var[str]] = None
 
@@ -1223,7 +1223,7 @@ def test_deprecated_props(capsys):
     """
 
     class C1(Component):
-        tag = "C1"
+        tag: str = "C1"
 
         type: Optional[Var[str]] = None
         min: Optional[Var[str]] = None
@@ -1253,7 +1253,7 @@ class C1(Component):
     assert "max={`max2`}" in c1_2_render["props"]
 
     class C2(Component):
-        tag = "C2"
+        tag: str = "C2"
 
         type_: Optional[Var[str]] = None
         min_: Optional[Var[str]] = None
diff --git a/tests/test_app.py b/tests/test_app.py
index 0da6c11f98a..d88a82f1fb5 100644
--- a/tests/test_app.py
+++ b/tests/test_app.py
@@ -1269,19 +1269,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"): rx.chakra.box()}
 
     class Fragment2(Component):
-        tag = "Fragment2"
+        tag: str = "Fragment2"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
             return {(50, "Text"): rx.chakra.text()}
 
     class Fragment3(Component):
-        tag = "Fragment3"
+        tag: str = "Fragment3"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
             return {(10, "Fragment2"): Fragment2.create()}

From f44d0edc382e4ad1e613d40f5edfb22e067ed95d Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 23:04:21 +0100
Subject: [PATCH 41/52] add Component.is_default bool type annotation

---
 reflex/components/base/head.py                 | 2 +-
 reflex/components/base/script.py               | 2 +-
 reflex/components/chakra/base.py               | 2 +-
 reflex/components/core/client_side_routing.py  | 2 +-
 reflex/components/core/upload.py               | 2 +-
 reflex/components/datadisplay/dataeditor.py    | 2 +-
 reflex/components/markdown/markdown.py         | 2 +-
 reflex/components/moment/moment.py             | 2 +-
 reflex/components/next/image.py                | 2 +-
 reflex/components/next/link.py                 | 2 +-
 reflex/components/next/video.py                | 2 +-
 reflex/components/plotly/plotly.py             | 2 +-
 reflex/components/radix/themes/base.py         | 2 +-
 reflex/components/react_player/react_player.py | 2 +-
 reflex/components/suneditor/editor.py          | 2 +-
 15 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/reflex/components/base/head.py b/reflex/components/base/head.py
index 34a5e71afa7..cd9a3d1b6c8 100644
--- a/reflex/components/base/head.py
+++ b/reflex/components/base/head.py
@@ -14,4 +14,4 @@ class Head(NextHeadLib, MemoizationLeaf):
 
     tag: str = "NextHead"
 
-    is_default = True
+    is_default: bool = True
diff --git a/reflex/components/base/script.py b/reflex/components/base/script.py
index b3fe74f49de..f3d2425bc1f 100644
--- a/reflex/components/base/script.py
+++ b/reflex/components/base/script.py
@@ -21,7 +21,7 @@ class Script(Component):
 
     library = "next/script"
     tag: str = "Script"
-    is_default = True
+    is_default: bool = True
 
     # Required unless inline script is used
     src: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/base.py b/reflex/components/chakra/base.py
index ab502864662..fdfd6c3dda8 100644
--- a/reflex/components/chakra/base.py
+++ b/reflex/components/chakra/base.py
@@ -94,7 +94,7 @@ class ChakraColorModeProvider(Component):
 
     library = "/components/reflex/chakra_color_mode_provider.js"
     tag: str = "ChakraColorModeProvider"
-    is_default = True
+    is_default: bool = True
 
 
 chakra_color_mode_provider = ChakraColorModeProvider.create()
diff --git a/reflex/components/core/client_side_routing.py b/reflex/components/core/client_side_routing.py
index 4a145b09884..65530a880b4 100644
--- a/reflex/components/core/client_side_routing.py
+++ b/reflex/components/core/client_side_routing.py
@@ -63,6 +63,6 @@ class Default404Page(Component):
 
     library = "next/error"
     tag: str = "Error"
-    is_default = True
+    is_default: bool = True
 
     status_code: Var[int] = 404  # type: ignore
diff --git a/reflex/components/core/upload.py b/reflex/components/core/upload.py
index 698540fb37b..d5f4ca2068e 100644
--- a/reflex/components/core/upload.py
+++ b/reflex/components/core/upload.py
@@ -168,7 +168,7 @@ class Upload(MemoizationLeaf):
 
     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/datadisplay/dataeditor.py b/reflex/components/datadisplay/dataeditor.py
index 82a243424ba..eefc14c29fa 100644
--- a/reflex/components/datadisplay/dataeditor.py
+++ b/reflex/components/datadisplay/dataeditor.py
@@ -107,7 +107,7 @@ class DataEditor(NoSSRComponent):
     """The DataEditor Component."""
 
     tag: str = "DataEditor"
-    is_default = True
+    is_default: bool = True
     library: str = "@glideapps/glide-data-grid@^5.3.0"
     lib_dependencies: List[str] = [
         "lodash@^4.17.21",
diff --git a/reflex/components/markdown/markdown.py b/reflex/components/markdown/markdown.py
index 31865fc0b2f..d19435ac292 100644
--- a/reflex/components/markdown/markdown.py
+++ b/reflex/components/markdown/markdown.py
@@ -79,7 +79,7 @@ class Markdown(Component):
 
     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/moment/moment.py b/reflex/components/moment/moment.py
index 65dcde23a67..ddca517bf88 100644
--- a/reflex/components/moment/moment.py
+++ b/reflex/components/moment/moment.py
@@ -25,7 +25,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/next/image.py b/reflex/components/next/image.py
index b89259974bd..521f0988e8f 100644
--- a/reflex/components/next/image.py
+++ b/reflex/components/next/image.py
@@ -12,7 +12,7 @@ class Image(NextComponent):
 
     tag: str = "Image"
     library = "next/image"
-    is_default = True
+    is_default: bool = True
 
     # This can be either an absolute external URL, or an internal path
     src: Optional[Var[Any]] = None
diff --git a/reflex/components/next/link.py b/reflex/components/next/link.py
index e3ddfc6c6c5..fb8b46f2422 100644
--- a/reflex/components/next/link.py
+++ b/reflex/components/next/link.py
@@ -13,7 +13,7 @@ class NextLink(Component):
 
     tag: str = "NextLink"
 
-    is_default = True
+    is_default: bool = True
 
     # The page to link to.
     href: Optional[Var[str]] = None
diff --git a/reflex/components/next/video.py b/reflex/components/next/video.py
index 45d77cce64c..6565f2f454c 100644
--- a/reflex/components/next/video.py
+++ b/reflex/components/next/video.py
@@ -12,7 +12,7 @@ class Video(NextComponent):
 
     tag: str = "Video"
     library = "next-video"
-    is_default = True
+    is_default: bool = True
     # the URL
     src: Optional[Var[str]] = None
 
diff --git a/reflex/components/plotly/plotly.py b/reflex/components/plotly/plotly.py
index 0b9185e64a4..74ee11a9097 100644
--- a/reflex/components/plotly/plotly.py
+++ b/reflex/components/plotly/plotly.py
@@ -23,7 +23,7 @@ class Plotly(PlotlyLib):
 
     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: Optional[Var[Figure]] = None
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index 4157b47d0cb..ca5602bb993 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -218,7 +218,7 @@ class RadixThemesColorModeProvider(Component):
 
     library = "/components/reflex/radix_themes_color_mode_provider.js"
     tag: str = "RadixThemesColorModeProvider"
-    is_default = True
+    is_default: bool = True
 
 
 theme = Theme.create
diff --git a/reflex/components/react_player/react_player.py b/reflex/components/react_player/react_player.py
index 13beb8b5be8..77356950475 100644
--- a/reflex/components/react_player/react_player.py
+++ b/reflex/components/react_player/react_player.py
@@ -16,7 +16,7 @@ class ReactPlayer(NoSSRComponent):
 
     tag: str = "ReactPlayer"
 
-    is_default = True
+    is_default: bool = True
 
     # The url of a video or song to play
     url: Optional[Var[str]] = None
diff --git a/reflex/components/suneditor/editor.py b/reflex/components/suneditor/editor.py
index dd7f9306bee..02815fea319 100644
--- a/reflex/components/suneditor/editor.py
+++ b/reflex/components/suneditor/editor.py
@@ -77,7 +77,7 @@ class Editor(NoSSRComponent):
 
     tag: str = "SunEditor"
 
-    is_default = True
+    is_default: bool = True
 
     lib_dependencies: List[str] = ["suneditor"]
 

From 16b7baef80610e2b12cc02d00ab3d7d0af9fed5f Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 23:04:57 +0100
Subject: [PATCH 42/52] add Component.library str type annotation

---
 reflex/components/base/document.py              | 2 +-
 reflex/components/base/fragment.py              | 2 +-
 reflex/components/base/head.py                  | 2 +-
 reflex/components/base/script.py                | 2 +-
 reflex/components/chakra/base.py                | 4 ++--
 reflex/components/chakra/forms/iconbutton.py    | 2 +-
 reflex/components/chakra/forms/multiselect.py   | 2 +-
 reflex/components/chakra/media/icon.py          | 2 +-
 reflex/components/core/client_side_routing.py   | 4 ++--
 reflex/components/core/debounce.py              | 2 +-
 reflex/components/core/upload.py                | 2 +-
 reflex/components/datadisplay/code.py           | 2 +-
 reflex/components/gridjs/datatable.py           | 2 +-
 reflex/components/lucide/icon.py                | 2 +-
 reflex/components/markdown/markdown.py          | 2 +-
 reflex/components/next/image.py                 | 2 +-
 reflex/components/next/link.py                  | 2 +-
 reflex/components/next/video.py                 | 2 +-
 reflex/components/plotly/plotly.py              | 2 +-
 reflex/components/radix/primitives/accordion.py | 2 +-
 reflex/components/radix/primitives/drawer.py    | 2 +-
 reflex/components/radix/primitives/form.py      | 2 +-
 reflex/components/radix/primitives/progress.py  | 2 +-
 reflex/components/radix/primitives/slider.py    | 2 +-
 reflex/components/radix/themes/base.py          | 4 ++--
 reflex/components/react_player/react_player.py  | 2 +-
 reflex/components/recharts/recharts.py          | 4 ++--
 reflex/components/suneditor/editor.py           | 2 +-
 tests/components/test_component.py              | 2 +-
 29 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/reflex/components/base/document.py b/reflex/components/base/document.py
index e5500530a10..727438186de 100644
--- a/reflex/components/base/document.py
+++ b/reflex/components/base/document.py
@@ -8,7 +8,7 @@
 class NextDocumentLib(Component):
     """Root document components."""
 
-    library = "next/document"
+    library: str = "next/document"
 
 
 class Html(NextDocumentLib):
diff --git a/reflex/components/base/fragment.py b/reflex/components/base/fragment.py
index 22e9d797a4b..60357cb55d0 100644
--- a/reflex/components/base/fragment.py
+++ b/reflex/components/base/fragment.py
@@ -5,5 +5,5 @@
 class Fragment(Component):
     """A React fragment to return multiple components from a function without wrapping it in a container."""
 
-    library = "react"
+    library: str = "react"
     tag: str = "Fragment"
diff --git a/reflex/components/base/head.py b/reflex/components/base/head.py
index cd9a3d1b6c8..d6301894696 100644
--- a/reflex/components/base/head.py
+++ b/reflex/components/base/head.py
@@ -6,7 +6,7 @@
 class NextHeadLib(Component):
     """Header components."""
 
-    library = "next/head"
+    library: str = "next/head"
 
 
 class Head(NextHeadLib, MemoizationLeaf):
diff --git a/reflex/components/base/script.py b/reflex/components/base/script.py
index f3d2425bc1f..77354612e13 100644
--- a/reflex/components/base/script.py
+++ b/reflex/components/base/script.py
@@ -19,7 +19,7 @@ class Script(Component):
     HTML <script> tag which does not work when rendering a component.
     """
 
-    library = "next/script"
+    library: str = "next/script"
     tag: str = "Script"
     is_default: bool = True
 
diff --git a/reflex/components/chakra/base.py b/reflex/components/chakra/base.py
index fdfd6c3dda8..a51aae7b753 100644
--- a/reflex/components/chakra/base.py
+++ b/reflex/components/chakra/base.py
@@ -12,7 +12,7 @@
 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",
         "framer-motion@10.16.4",
@@ -92,7 +92,7 @@ def _get_app_wrap_components() -> dict[tuple[int, str], Component]:
 class ChakraColorModeProvider(Component):
     """Next-themes integration for chakra colorModeProvider."""
 
-    library = "/components/reflex/chakra_color_mode_provider.js"
+    library: str = "/components/reflex/chakra_color_mode_provider.js"
     tag: str = "ChakraColorModeProvider"
     is_default: bool = True
 
diff --git a/reflex/components/chakra/forms/iconbutton.py b/reflex/components/chakra/forms/iconbutton.py
index 2f5e2c6ceb0..857f6fb23dc 100644
--- a/reflex/components/chakra/forms/iconbutton.py
+++ b/reflex/components/chakra/forms/iconbutton.py
@@ -10,7 +10,7 @@ class IconButton(Text):
     """A button with an icon."""
 
     tag: str = "IconButton"
-    library = "@chakra-ui/button@2.1.0"
+    library: str = "@chakra-ui/button@2.1.0"
 
     # The type of button.
     type: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/forms/multiselect.py b/reflex/components/chakra/forms/multiselect.py
index d5d0272af53..1d425ab54f6 100644
--- a/reflex/components/chakra/forms/multiselect.py
+++ b/reflex/components/chakra/forms/multiselect.py
@@ -46,7 +46,7 @@ class Select(Component):
     Props added by chakra-react-select are marked with "[chakra]".
     """
 
-    library = "chakra-react-select@4.7.5"
+    library: str = "chakra-react-select@4.7.5"
     tag: str = "Select"
     alias = "MultiSelect"
 
diff --git a/reflex/components/chakra/media/icon.py b/reflex/components/chakra/media/icon.py
index 3a2b064c9ed..8dcd2974a91 100644
--- a/reflex/components/chakra/media/icon.py
+++ b/reflex/components/chakra/media/icon.py
@@ -8,7 +8,7 @@
 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):
diff --git a/reflex/components/core/client_side_routing.py b/reflex/components/core/client_side_routing.py
index 65530a880b4..297be2eadf9 100644
--- a/reflex/components/core/client_side_routing.py
+++ b/reflex/components/core/client_side_routing.py
@@ -20,7 +20,7 @@
 class ClientSideRouting(Component):
     """The client-side routing component."""
 
-    library = "/utils/client_side_routing"
+    library: str = "/utils/client_side_routing"
     tag: str = "useClientSideRouting"
 
     def _get_hooks(self) -> str:
@@ -61,7 +61,7 @@ def wait_for_client_redirect(component) -> Component:
 class Default404Page(Component):
     """The NextJS default 404 page."""
 
-    library = "next/error"
+    library: str = "next/error"
     tag: str = "Error"
     is_default: bool = True
 
diff --git a/reflex/components/core/debounce.py b/reflex/components/core/debounce.py
index 7237b961067..497f75ee432 100644
--- a/reflex/components/core/debounce.py
+++ b/reflex/components/core/debounce.py
@@ -18,7 +18,7 @@ class DebounceInput(Component):
     is experiencing high latency.
     """
 
-    library = "react-debounce-input@3.3.0"
+    library: str = "react-debounce-input@3.3.0"
     tag: str = "DebounceInput"
 
     # Minimum input characters before triggering the on_change event
diff --git a/reflex/components/core/upload.py b/reflex/components/core/upload.py
index d5f4ca2068e..823e76f4afe 100644
--- a/reflex/components/core/upload.py
+++ b/reflex/components/core/upload.py
@@ -164,7 +164,7 @@ class UploadFilesProvider(Component):
 class Upload(MemoizationLeaf):
     """A file upload component."""
 
-    library = "react-dropzone@14.2.3"
+    library: str = "react-dropzone@14.2.3"
 
     tag: str = "ReactDropzone"
 
diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
index d0ed4939514..7f106292e85 100644
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@@ -348,7 +348,7 @@
 class CodeBlock(Component):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.5.0"
+    library: str = "react-syntax-highlighter@15.5.0"
 
     tag: str = "PrismAsyncLight"
 
diff --git a/reflex/components/gridjs/datatable.py b/reflex/components/gridjs/datatable.py
index b21ddffec52..09130d0089f 100644
--- a/reflex/components/gridjs/datatable.py
+++ b/reflex/components/gridjs/datatable.py
@@ -13,7 +13,7 @@
 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"]
 
diff --git a/reflex/components/lucide/icon.py b/reflex/components/lucide/icon.py
index 8ab825738be..646dfb87424 100644
--- a/reflex/components/lucide/icon.py
+++ b/reflex/components/lucide/icon.py
@@ -11,7 +11,7 @@
 class LucideIconComponent(Component):
     """Lucide Icon Component."""
 
-    library = "lucide-react@0.314.0"
+    library: str = "lucide-react@0.314.0"
 
 
 class Icon(LucideIconComponent):
diff --git a/reflex/components/markdown/markdown.py b/reflex/components/markdown/markdown.py
index d19435ac292..f16a0535ca9 100644
--- a/reflex/components/markdown/markdown.py
+++ b/reflex/components/markdown/markdown.py
@@ -75,7 +75,7 @@ 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: str = "ReactMarkdown"
 
diff --git a/reflex/components/next/image.py b/reflex/components/next/image.py
index 521f0988e8f..e8c6aca3308 100644
--- a/reflex/components/next/image.py
+++ b/reflex/components/next/image.py
@@ -11,7 +11,7 @@ class Image(NextComponent):
     """Display an image."""
 
     tag: str = "Image"
-    library = "next/image"
+    library: str = "next/image"
     is_default: bool = True
 
     # This can be either an absolute external URL, or an internal path
diff --git a/reflex/components/next/link.py b/reflex/components/next/link.py
index fb8b46f2422..fdc60b2044a 100644
--- a/reflex/components/next/link.py
+++ b/reflex/components/next/link.py
@@ -9,7 +9,7 @@
 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: str = "NextLink"
 
diff --git a/reflex/components/next/video.py b/reflex/components/next/video.py
index 6565f2f454c..79ce3c34ee5 100644
--- a/reflex/components/next/video.py
+++ b/reflex/components/next/video.py
@@ -11,7 +11,7 @@ class Video(NextComponent):
     """A video component from NextJS."""
 
     tag: str = "Video"
-    library = "next-video"
+    library: str = "next-video"
     is_default: bool = True
     # the URL
     src: Optional[Var[str]] = None
diff --git a/reflex/components/plotly/plotly.py b/reflex/components/plotly/plotly.py
index 74ee11a9097..bf3775ba79e 100644
--- a/reflex/components/plotly/plotly.py
+++ b/reflex/components/plotly/plotly.py
@@ -13,7 +13,7 @@
 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"]
 
diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
index 5d6690a933e..897e076d76c 100644
--- a/reflex/components/radix/primitives/accordion.py
+++ b/reflex/components/radix/primitives/accordion.py
@@ -299,7 +299,7 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) ->
 class AccordionComponent(RadixPrimitiveComponent):
     """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"
 
 
 class AccordionRoot(AccordionComponent):
diff --git a/reflex/components/radix/primitives/drawer.py b/reflex/components/radix/primitives/drawer.py
index 56c97ee5ba2..5fcde30cd7f 100644
--- a/reflex/components/radix/primitives/drawer.py
+++ b/reflex/components/radix/primitives/drawer.py
@@ -16,7 +16,7 @@
 class DrawerComponent(RadixPrimitiveComponent):
     """A Drawer component."""
 
-    library = "vaul"
+    library: str = "vaul"
 
     lib_dependencies: List[str] = ["@radix-ui/react-dialog@^1.0.5"]
 
diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py
index 8361c66468e..822653e04d3 100644
--- a/reflex/components/radix/primitives/form.py
+++ b/reflex/components/radix/primitives/form.py
@@ -39,7 +39,7 @@
 class FormComponent(RadixPrimitiveComponentWithClassName):
     """Base class for all @radix-ui/react-form components."""
 
-    library = "@radix-ui/react-form@^0.0.3"
+    library: str = "@radix-ui/react-form@^0.0.3"
 
 
 class FormRoot(FormComponent):
diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py
index 1fcb8cb2c6b..f290c5ca18f 100644
--- a/reflex/components/radix/primitives/progress.py
+++ b/reflex/components/radix/primitives/progress.py
@@ -15,7 +15,7 @@
 class ProgressComponent(RadixPrimitiveComponentWithClassName):
     """A Progress component."""
 
-    library = "@radix-ui/react-progress@^1.0.3"
+    library: str = "@radix-ui/react-progress@^1.0.3"
 
 
 class ProgressRoot(ProgressComponent):
diff --git a/reflex/components/radix/primitives/slider.py b/reflex/components/radix/primitives/slider.py
index ac70790e041..dfe360b6c29 100644
--- a/reflex/components/radix/primitives/slider.py
+++ b/reflex/components/radix/primitives/slider.py
@@ -15,7 +15,7 @@
 class SliderComponent(RadixPrimitiveComponentWithClassName):
     """Base class for all @radix-ui/react-slider components."""
 
-    library = "@radix-ui/react-slider@^1.1.2"
+    library: str = "@radix-ui/react-slider@^1.1.2"
 
 
 class SliderRoot(SliderComponent):
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index ca5602bb993..d6d82bd1ee6 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -75,7 +75,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"
 
     # "Fake" prop color_scheme is used to avoid shadowing CSS prop "color".
     _rename_props: Dict[str, str] = {"colorScheme": "color"}
@@ -216,7 +216,7 @@ class ThemePanel(RadixThemesComponent):
 class RadixThemesColorModeProvider(Component):
     """Next-themes integration for radix themes components."""
 
-    library = "/components/reflex/radix_themes_color_mode_provider.js"
+    library: str = "/components/reflex/radix_themes_color_mode_provider.js"
     tag: str = "RadixThemesColorModeProvider"
     is_default: bool = True
 
diff --git a/reflex/components/react_player/react_player.py b/reflex/components/react_player/react_player.py
index 77356950475..e8b42f3f1ef 100644
--- a/reflex/components/react_player/react_player.py
+++ b/reflex/components/react_player/react_player.py
@@ -12,7 +12,7 @@ class ReactPlayer(NoSSRComponent):
     reference: https://github.com/cookpete/react-player.
     """
 
-    library = "react-player@2.12.0"
+    library: str = "react-player@2.12.0"
 
     tag: str = "ReactPlayer"
 
diff --git a/reflex/components/recharts/recharts.py b/reflex/components/recharts/recharts.py
index 28c8a5c8a24..8de08488310 100644
--- a/reflex/components/recharts/recharts.py
+++ b/reflex/components/recharts/recharts.py
@@ -7,13 +7,13 @@
 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/suneditor/editor.py b/reflex/components/suneditor/editor.py
index 02815fea319..5001acccad4 100644
--- a/reflex/components/suneditor/editor.py
+++ b/reflex/components/suneditor/editor.py
@@ -73,7 +73,7 @@ class Editor(NoSSRComponent):
     refer to the library docs for a complete list.
     """
 
-    library = "suneditor-react"
+    library: str = "suneditor-react"
 
     tag: str = "SunEditor"
 
diff --git a/tests/components/test_component.py b/tests/components/test_component.py
index eef2d1dc6ea..4dc55bc8b51 100644
--- a/tests/components/test_component.py
+++ b/tests/components/test_component.py
@@ -437,7 +437,7 @@ def on_foo_spec(_e, alpha: str, bravo: Dict[str, Any], charlie: Obj):
         return [_e.target.value, bravo["nested"], charlie.custom + 42]
 
     class C1(Component):
-        library = "/local"
+        library: str = "/local"
         tag: str = "C1"
 
         def get_event_triggers(self) -> Dict[str, Any]:

From bcaab3015d4077c8f626753d77ec13c373028894 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 23:05:59 +0100
Subject: [PATCH 43/52] add Component.alias str type annotation

---
 reflex/components/chakra/forms/multiselect.py |  2 +-
 reflex/components/chakra/media/image.py       |  2 +-
 reflex/components/datadisplay/code.py         |  2 +-
 reflex/components/gridjs/datatable.py         |  2 +-
 .../components/radix/primitives/accordion.py  | 10 +++----
 reflex/components/radix/primitives/drawer.py  | 16 +++++-----
 reflex/components/radix/primitives/form.py    | 14 ++++-----
 .../components/radix/primitives/progress.py   |  4 +--
 reflex/components/radix/primitives/slider.py  |  8 ++---
 reflex/components/recharts/cartesian.py       | 30 +++++++++----------
 reflex/components/recharts/charts.py          | 20 ++++++-------
 reflex/components/recharts/general.py         | 10 +++----
 reflex/components/recharts/polar.py           | 12 ++++----
 13 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/reflex/components/chakra/forms/multiselect.py b/reflex/components/chakra/forms/multiselect.py
index 1d425ab54f6..c0a10dd8005 100644
--- a/reflex/components/chakra/forms/multiselect.py
+++ b/reflex/components/chakra/forms/multiselect.py
@@ -48,7 +48,7 @@ class Select(Component):
 
     library: str = "chakra-react-select@4.7.5"
     tag: str = "Select"
-    alias = "MultiSelect"
+    alias: str = "MultiSelect"
 
     # Focus the control when it is mounted
     auto_focus: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/media/image.py b/reflex/components/chakra/media/image.py
index 82927cc7b25..0c85b169b09 100644
--- a/reflex/components/chakra/media/image.py
+++ b/reflex/components/chakra/media/image.py
@@ -12,7 +12,7 @@ class Image(ChakraComponent):
     """Display an image."""
 
     tag: str = "Image"
-    alias = "ChakraImage"
+    alias: str = "ChakraImage"
     # How to align the image within its bounds. It maps to css `object-position` property.
     align: Optional[Var[str]] = None
 
diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
index 7f106292e85..a33e1164161 100644
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@@ -352,7 +352,7 @@ class CodeBlock(Component):
 
     tag: str = "PrismAsyncLight"
 
-    alias = "SyntaxHighlighter"
+    alias: str = "SyntaxHighlighter"
 
     # The theme to use ("light" or "dark").
     theme: Var[LiteralCodeBlockTheme] = "one-light"  # type: ignore
diff --git a/reflex/components/gridjs/datatable.py b/reflex/components/gridjs/datatable.py
index 09130d0089f..c3ce480f83c 100644
--- a/reflex/components/gridjs/datatable.py
+++ b/reflex/components/gridjs/datatable.py
@@ -23,7 +23,7 @@ class DataTable(Gridjs):
 
     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/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
index 897e076d76c..cecfb5dffe9 100644
--- a/reflex/components/radix/primitives/accordion.py
+++ b/reflex/components/radix/primitives/accordion.py
@@ -307,7 +307,7 @@ class AccordionRoot(AccordionComponent):
 
     tag: str = "Root"
 
-    alias = "RadixAccordionRoot"
+    alias: str = "RadixAccordionRoot"
 
     # The type of accordion (single or multiple).
     type: Optional[Var[LiteralAccordionType]] = None
@@ -471,7 +471,7 @@ class AccordionItem(AccordionComponent):
 
     tag: str = "Item"
 
-    alias = "RadixAccordionItem"
+    alias: str = "RadixAccordionItem"
 
     # A unique identifier for the item.
     value: Optional[Var[str]] = None
@@ -540,7 +540,7 @@ class AccordionHeader(AccordionComponent):
 
     tag: str = "Header"
 
-    alias = "RadixAccordionHeader"
+    alias: str = "RadixAccordionHeader"
 
     @classmethod
     def create(cls, *children, **props) -> Component:
@@ -569,7 +569,7 @@ class AccordionTrigger(AccordionComponent):
 
     tag: str = "Trigger"
 
-    alias = "RadixAccordionTrigger"
+    alias: str = "RadixAccordionTrigger"
 
     @classmethod
     def create(cls, *children, **props) -> Component:
@@ -620,7 +620,7 @@ class AccordionContent(AccordionComponent):
 
     tag: str = "Content"
 
-    alias = "RadixAccordionContent"
+    alias: str = "RadixAccordionContent"
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/radix/primitives/drawer.py b/reflex/components/radix/primitives/drawer.py
index 5fcde30cd7f..74110bd1420 100644
--- a/reflex/components/radix/primitives/drawer.py
+++ b/reflex/components/radix/primitives/drawer.py
@@ -29,7 +29,7 @@ class DrawerRoot(DrawerComponent):
 
     tag: str = "Drawer.Root"
 
-    alias = "Vaul" + tag
+    alias: str = "Vaul" + tag
 
     # Whether the drawer is open or not.
     open: Optional[Var[bool]] = None
@@ -75,7 +75,7 @@ class DrawerTrigger(DrawerComponent):
 
     tag: str = "Drawer.Trigger"
 
-    alias = "Vaul" + tag
+    alias: str = "Vaul" + tag
 
     # Defaults to true, if the first child acts as the trigger.
     as_child: Var[bool] = True  # type: ignore
@@ -86,7 +86,7 @@ class DrawerPortal(DrawerComponent):
 
     tag: str = "Drawer.Portal"
 
-    alias = "Vaul" + tag
+    alias: str = "Vaul" + tag
 
 
 # Based on https://www.radix-ui.com/primitives/docs/components/dialog#content
@@ -95,7 +95,7 @@ class DrawerContent(DrawerComponent):
 
     tag: str = "Drawer.Content"
 
-    alias = "Vaul" + tag
+    alias: str = "Vaul" + tag
 
     # Style set partially based on the source code at https://ui.shadcn.com/docs/components/drawer
     def _get_style(self) -> dict:
@@ -159,7 +159,7 @@ class DrawerOverlay(DrawerComponent):
 
     tag: str = "Drawer.Overlay"
 
-    alias = "Vaul" + tag
+    alias: str = "Vaul" + tag
 
     # Style set based on the source code at https://ui.shadcn.com/docs/components/drawer
     def _get_style(self) -> dict:
@@ -187,7 +187,7 @@ class DrawerClose(DrawerComponent):
 
     tag: str = "Drawer.Close"
 
-    alias = "Vaul" + tag
+    alias: str = "Vaul" + tag
 
 
 class DrawerTitle(DrawerComponent):
@@ -195,7 +195,7 @@ class DrawerTitle(DrawerComponent):
 
     tag: str = "Drawer.Title"
 
-    alias = "Vaul" + tag
+    alias: str = "Vaul" + tag
 
     # Style set based on the source code at https://ui.shadcn.com/docs/components/drawer
     def _get_style(self) -> dict:
@@ -220,7 +220,7 @@ class DrawerDescription(DrawerComponent):
 
     tag: str = "Drawer.Description"
 
-    alias = "Vaul" + tag
+    alias: str = "Vaul" + tag
 
     # Style set based on the source code at https://ui.shadcn.com/docs/components/drawer
     def _get_style(self) -> dict:
diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py
index 822653e04d3..66b752489af 100644
--- a/reflex/components/radix/primitives/form.py
+++ b/reflex/components/radix/primitives/form.py
@@ -47,7 +47,7 @@ class FormRoot(FormComponent):
 
     tag: str = "Root"
 
-    alias = "RadixFormRoot"
+    alias: str = "RadixFormRoot"
 
     # If true, the form will be cleared after submit.
     reset_on_submit: Var[bool] = False  # type: ignore
@@ -169,7 +169,7 @@ class FormField(FormComponent):
 
     tag: str = "Field"
 
-    alias = "RadixFormField"
+    alias: str = "RadixFormField"
 
     # The name of the form field, that is passed down to the control and used to match with validation messages.
     name: Optional[Var[str]] = None
@@ -190,7 +190,7 @@ class FormLabel(FormComponent):
 
     tag: str = "Label"
 
-    alias = "RadixFormLabel"
+    alias: str = "RadixFormLabel"
 
     def _apply_theme(self, theme: Component):
         return {
@@ -206,7 +206,7 @@ class FormControl(FormComponent):
 
     tag: str = "Control"
 
-    alias = "RadixFormControl"
+    alias: str = "RadixFormControl"
 
     @classmethod
     def create(cls, *children, **props):
@@ -254,7 +254,7 @@ class FormMessage(FormComponent):
 
     tag: str = "Message"
 
-    alias = "RadixFormMessage"
+    alias: str = "RadixFormMessage"
 
     # Used to target a specific field by name when rendering outside of a Field part.
     name: Optional[Var[str]] = None
@@ -278,14 +278,14 @@ class FormValidityState(FormComponent):
     """A form validity state component."""
 
     tag: str = "ValidityState"
-    alias = "RadixFormValidityState"
+    alias: str = "RadixFormValidityState"
 
 
 class FormSubmit(FormComponent):
     """A form submit component."""
 
     tag: str = "Submit"
-    alias = "RadixFormSubmit"
+    alias: str = "RadixFormSubmit"
 
 
 # This class is created mainly for reflex-web docs.
diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py
index f290c5ca18f..908981a5646 100644
--- a/reflex/components/radix/primitives/progress.py
+++ b/reflex/components/radix/primitives/progress.py
@@ -22,7 +22,7 @@ class ProgressRoot(ProgressComponent):
     """The Progress Root component."""
 
     tag: str = "Root"
-    alias = "RadixProgressRoot"
+    alias: str = "RadixProgressRoot"
 
     # Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
     radius: Optional[Var[LiteralRadius]] = None
@@ -53,7 +53,7 @@ class ProgressIndicator(ProgressComponent):
 
     tag: str = "Indicator"
 
-    alias = "RadixProgressIndicator"
+    alias: str = "RadixProgressIndicator"
 
     # The current progress value.
     value: Optional[Var[Optional[int]]] = None
diff --git a/reflex/components/radix/primitives/slider.py b/reflex/components/radix/primitives/slider.py
index dfe360b6c29..a0fd6236a02 100644
--- a/reflex/components/radix/primitives/slider.py
+++ b/reflex/components/radix/primitives/slider.py
@@ -22,7 +22,7 @@ class SliderRoot(SliderComponent):
     """The Slider component comtaining all slider parts."""
 
     tag: str = "Root"
-    alias = "RadixSliderRoot"
+    alias: str = "RadixSliderRoot"
 
     default_value: Optional[Var[List[int]]] = None
 
@@ -82,7 +82,7 @@ class SliderTrack(SliderComponent):
     """A Slider Track component."""
 
     tag: str = "Track"
-    alias = "RadixSliderTrack"
+    alias: str = "RadixSliderTrack"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
@@ -104,7 +104,7 @@ class SliderRange(SliderComponent):
     """A SliderRange component."""
 
     tag: str = "Range"
-    alias = "RadixSliderRange"
+    alias: str = "RadixSliderRange"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
@@ -124,7 +124,7 @@ class SliderThumb(SliderComponent):
     """A SliderThumb component."""
 
     tag: str = "Thumb"
-    alias = "RadixSliderThumb"
+    alias: str = "RadixSliderThumb"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index e7bf110a1ba..a6af6c67781 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -89,7 +89,7 @@ class XAxis(Axis):
 
     tag: str = "XAxis"
 
-    alias = "RechartsXAxis"
+    alias: str = "RechartsXAxis"
 
 
 class YAxis(Axis):
@@ -97,7 +97,7 @@ class YAxis(Axis):
 
     tag: str = "YAxis"
 
-    alias = "RechartsYAxis"
+    alias: str = "RechartsYAxis"
 
     # The key of data displayed in the axis.
     data_key: Optional[Var[Union[str, int]]] = None
@@ -108,7 +108,7 @@ class ZAxis(Recharts):
 
     tag: str = "ZAxis"
 
-    alias = "RechartszAxis"
+    alias: str = "RechartszAxis"
 
     # The key of data displayed in the axis.
     data_key: Optional[Var[Union[str, int]]] = None
@@ -131,7 +131,7 @@ class Brush(Recharts):
 
     tag: str = "Brush"
 
-    alias = "RechartsBrush"
+    alias: str = "RechartsBrush"
 
     # Stroke color
     stroke: Optional[Var[str]] = None
@@ -216,7 +216,7 @@ class Area(Cartesian):
 
     tag: str = "Area"
 
-    alias = "RechartsArea"
+    alias: str = "RechartsArea"
 
     # The color of the line stroke.
     stroke: Optional[Var[str]] = None
@@ -251,7 +251,7 @@ class Bar(Cartesian):
 
     tag: str = "Bar"
 
-    alias = "RechartsBar"
+    alias: str = "RechartsBar"
 
     # The color of the line stroke.
     stroke: Optional[Var[str]] = None
@@ -286,7 +286,7 @@ class Line(Cartesian):
 
     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_: Optional[Var[LiteralAreaType]] = None
@@ -321,7 +321,7 @@ class Scatter(Cartesian):
 
     tag: str = "Scatter"
 
-    alias = "RechartsScatter"
+    alias: str = "RechartsScatter"
 
     # The source data, in which each element is an object.
     data: Optional[Var[List[Dict[str, Any]]]] = None
@@ -353,7 +353,7 @@ class Funnel(Cartesian):
 
     tag: str = "Funnel"
 
-    alias = "RechartsFunnel"
+    alias: str = "RechartsFunnel"
 
     # The source data, in which each element is an object.
     data: Optional[Var[List[Dict[str, Any]]]] = None
@@ -376,7 +376,7 @@ class ErrorBar(Recharts):
 
     tag: str = "ErrorBar"
 
-    alias = "RechartsErrorBar"
+    alias: str = "RechartsErrorBar"
 
     # The direction of error bar. 'x' | 'y' | 'both'
     direction: Optional[Var[LiteralDirection]] = None
@@ -421,7 +421,7 @@ class ReferenceLine(Reference):
 
     tag: str = "ReferenceLine"
 
-    alias = "RechartsReferenceLine"
+    alias: str = "RechartsReferenceLine"
 
     # The width of the stroke.
     stroke_width: Optional[Var[int]] = None
@@ -435,7 +435,7 @@ class ReferenceDot(Reference):
 
     tag: str = "ReferenceDot"
 
-    alias = "RechartsReferenceDot"
+    alias: str = "RechartsReferenceDot"
 
     # Valid children components
     _valid_children: List[str] = ["Label"]
@@ -461,7 +461,7 @@ class ReferenceArea(Recharts):
 
     tag: str = "ReferenceArea"
 
-    alias = "RechartsReferenceArea"
+    alias: str = "RechartsReferenceArea"
 
     # Stroke color
     stroke: Optional[Var[str]] = None
@@ -521,7 +521,7 @@ class CartesianGrid(Grid):
 
     tag: str = "CartesianGrid"
 
-    alias = "RechartsCartesianGrid"
+    alias: str = "RechartsCartesianGrid"
 
     # The horizontal line configuration.
     horizontal: Optional[Var[Dict[str, Any]]] = None
@@ -544,7 +544,7 @@ class CartesianAxis(Grid):
 
     tag: str = "CartesianAxis"
 
-    alias = "RechartsCartesianAxis"
+    alias: str = "RechartsCartesianAxis"
 
     # The orientation of axis 'top' | 'bottom' | 'left' | 'right'
     orientation: Optional[Var[LiteralOrientationTopBottomLeftRight]] = None
diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index fcb9b689c26..0980a5cd753 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -121,7 +121,7 @@ class AreaChart(ChartBase):
 
     tag: str = "AreaChart"
 
-    alias = "RechartsAreaChart"
+    alias: str = "RechartsAreaChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
     base_value: Optional[Var[Union[int, LiteralComposedChartBaseValue]]] = None
@@ -149,7 +149,7 @@ class BarChart(ChartBase):
 
     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
@@ -189,7 +189,7 @@ class LineChart(ChartBase):
 
     tag: str = "LineChart"
 
-    alias = "RechartsLineChart"
+    alias: str = "RechartsLineChart"
 
     # Valid children components
     _valid_children: List[str] = [
@@ -211,7 +211,7 @@ class ComposedChart(ChartBase):
 
     tag: str = "ComposedChart"
 
-    alias = "RechartsComposedChart"
+    alias: str = "RechartsComposedChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
     base_value: Optional[Var[Union[int, LiteralComposedChartBaseValue]]] = None
@@ -250,7 +250,7 @@ class PieChart(ChartBase):
 
     tag: str = "PieChart"
 
-    alias = "RechartsPieChart"
+    alias: str = "RechartsPieChart"
 
     # Valid children components
     _valid_children: List[str] = [
@@ -280,7 +280,7 @@ class RadarChart(ChartBase):
 
     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: Optional[Var[Union[int, str]]] = None
@@ -329,7 +329,7 @@ class RadialBarChart(ChartBase):
 
     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: Optional[Var[Union[int, str]]] = None
@@ -387,7 +387,7 @@ class ScatterChart(ChartBase):
 
     tag: str = "ScatterChart"
 
-    alias = "RechartsScatterChart"
+    alias: str = "RechartsScatterChart"
 
     # Valid children components
     _valid_children: List[str] = [
@@ -425,7 +425,7 @@ class FunnelChart(RechartsCharts):
 
     tag: str = "FunnelChart"
 
-    alias = "RechartsFunnelChart"
+    alias: str = "RechartsFunnelChart"
 
     # The source data, in which each element is an object.
     data: Optional[Var[List[Dict[str, Any]]]] = None
@@ -476,7 +476,7 @@ class Treemap(RechartsCharts):
 
     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/recharts/general.py b/reflex/components/recharts/general.py
index 19c7b574965..19ee2396e33 100644
--- a/reflex/components/recharts/general.py
+++ b/reflex/components/recharts/general.py
@@ -22,7 +22,7 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
 
     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: Optional[Var[int]] = None
@@ -61,7 +61,7 @@ class Legend(Recharts):
 
     tag: str = "Legend"
 
-    alias = "RechartsLegend"
+    alias: str = "RechartsLegend"
 
     # The width of legend container. Number
     width: Optional[Var[int]] = None
@@ -114,7 +114,7 @@ class GraphingTooltip(Recharts):
 
     tag: str = "Tooltip"
 
-    alias = "RechartsTooltip"
+    alias: str = "RechartsTooltip"
 
     # The separator between name and value.
     separator: Optional[Var[str]] = None
@@ -146,7 +146,7 @@ class Label(Recharts):
 
     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: Optional[Var[Dict[str, Any]]] = None
@@ -166,7 +166,7 @@ class LabelList(Recharts):
 
     tag: str = "LabelList"
 
-    alias = "RechartsLabelList"
+    alias: str = "RechartsLabelList"
 
     # The key of a group of label values in data.
     data_key: Optional[Var[Union[str, int]]] = None
diff --git a/reflex/components/recharts/polar.py b/reflex/components/recharts/polar.py
index b47dc5d7fa5..0f9adf5f76a 100644
--- a/reflex/components/recharts/polar.py
+++ b/reflex/components/recharts/polar.py
@@ -20,7 +20,7 @@ class Pie(Recharts):
 
     tag: str = "Pie"
 
-    alias = "RechartsPie"
+    alias: str = "RechartsPie"
 
     # data
     data: Optional[Var[List[Dict[str, Any]]]] = None
@@ -94,7 +94,7 @@ class Radar(Recharts):
 
     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: Optional[Var[Union[str, int]]] = None
@@ -138,7 +138,7 @@ class RadialBar(Recharts):
 
     tag: str = "RadialBar"
 
-    alias = "RechartsRadialBar"
+    alias: str = "RechartsRadialBar"
 
     # The source data which each element is an object.
     data: Optional[Var[List[Dict[str, Any]]]] = None
@@ -179,7 +179,7 @@ class PolarAngleAxis(Recharts):
 
     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: Optional[Var[Union[str, int]]] = None
@@ -238,7 +238,7 @@ class PolarGrid(Recharts):
 
     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: Optional[Var[Union[int, str]]] = None
@@ -270,7 +270,7 @@ class PolarRadiusAxis(Recharts):
 
     tag: str = "PolarRadiusAxis"
 
-    alias = "RechartsPolarRadiusAxis"
+    alias: str = "RechartsPolarRadiusAxis"
 
     # The angle of radial direction line to display axis text.
     angle: Optional[Var[int]] = None

From 16b838dfb13a376e6c4e43289e071c3e54e294dc Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 23:06:37 +0100
Subject: [PATCH 44/52] format component.library black

---
 reflex/components/radix/themes/base.py | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index d6d82bd1ee6..92b0e557deb 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -100,9 +100,7 @@ def create(
         """
         component = super().create(*children, **props)
         if component.library is None:
-            component.library = RadixThemesComponent.model_fields[
-                "library"
-            ].default
+            component.library = RadixThemesComponent.model_fields["library"].default
         component.alias = "RadixThemes" + (
             component.tag or component.__class__.__name__
         )

From 3c30ceb7f71199e8d720b1275f806411c5e3cddf Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Fri, 1 Mar 2024 23:10:36 +0100
Subject: [PATCH 45/52] new regex missed f-strings

---
 reflex/components/component.py   | 2 +-
 reflex/components/core/upload.py | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index f4807f11f6f..f45cd9a8055 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -1245,7 +1245,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/core/upload.py b/reflex/components/core/upload.py
index 823e76f4afe..aba9595d878 100644
--- a/reflex/components/core/upload.py
+++ b/reflex/components/core/upload.py
@@ -157,7 +157,7 @@ def _on_drop_spec(files: Var):
 class UploadFilesProvider(Component):
     """AppWrap component that provides a dict of selected files by ID via useContext."""
 
-    library = f"/{Dirs.CONTEXTS_PATH}"
+    library: str = f"/{Dirs.CONTEXTS_PATH}"
     tag: str = "UploadFilesProvider"
 
 

From bcd29a10e6761038fa4fcc824bcc909e54cba9c3 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Sat, 2 Mar 2024 11:28:43 +0100
Subject: [PATCH 46/52] use typing.get_args instead of __args__

---
 reflex/components/component.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index f45cd9a8055..4ae831eb59e 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -18,6 +18,7 @@
     Set,
     Type,
     Union,
+    get_args,
 )
 
 from pydantic.fields import ModelPrivateAttr
@@ -299,7 +300,7 @@ def __init__(self, *args, **kwargs):
                     if kwargs[key] is None:
                         raise TypeError
 
-                    expected_type = field_type.__args__[0]
+                    expected_type = get_args(field_type)[0]
                     # validate literal fields.
                     types.validate_literal(
                         key, value, expected_type, type(self).__name__
@@ -1392,7 +1393,7 @@ def get_component(self) -> Component:
 
 
 def custom_component(
-    component_fn: Callable[..., Component]
+    component_fn: Callable[..., Component],
 ) -> Callable[..., CustomComponent]:
     """Create a custom component from a function.
 

From 7ac184f98bf48c6cffee2ec379e02ab3ce13d293 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Sat, 2 Mar 2024 11:32:32 +0100
Subject: [PATCH 47/52] rebuild pydantic model after dropping id field

---
 reflex/model.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/reflex/model.py b/reflex/model.py
index c556a448230..59da57e46b3 100644
--- a/reflex/model.py
+++ b/reflex/model.py
@@ -66,6 +66,7 @@ def __init_subclass__(cls):
         ]
         if non_default_primary_key_fields:
             cls.model_fields.pop("id", None)
+            cls.model_rebuild(force=True)
 
         super().__init_subclass__()
 

From 30df32bd16150cbcc628910500f25b7c375133d4 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Tue, 5 Mar 2024 01:38:50 +0100
Subject: [PATCH 48/52] add default value for new lang prop in Html

---
 reflex/components/base/document.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/components/base/document.py b/reflex/components/base/document.py
index 727438186de..3d5dc813f2f 100644
--- a/reflex/components/base/document.py
+++ b/reflex/components/base/document.py
@@ -16,7 +16,7 @@ class Html(NextDocumentLib):
 
     tag: str = "Html"
 
-    lang: Optional[str]
+    lang: Optional[str] = None
 
 
 class DocumentHead(NextDocumentLib):

From be0a77a66ffc9243b3786c02e5ef4dc4e2b6a193 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Tue, 5 Mar 2024 01:58:09 +0100
Subject: [PATCH 49/52] pydantic_init_subclass

---
 reflex/components/component.py | 2 +-
 reflex/model.py                | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index 4ae831eb59e..2bc9542acde 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -202,7 +202,7 @@ class Component(BaseComponent, ABC):
     _memoization_mode: MemoizationMode = MemoizationMode()
 
     @classmethod
-    def __init_subclass__(cls, **kwargs):
+    def __pydantic_init_subclass__(cls, **kwargs):
         """Set default properties.
 
         Args:
diff --git a/reflex/model.py b/reflex/model.py
index 59da57e46b3..6c6456955a6 100644
--- a/reflex/model.py
+++ b/reflex/model.py
@@ -57,7 +57,8 @@ class Model(Base, sqlmodel.SQLModel):
     # The primary key for the table.
     id: Optional[int] = sqlmodel.Field(default=None, primary_key=True)
 
-    def __init_subclass__(cls):
+    @classmethod
+    def __pydantic_init_subclass__(cls):
         """Drop the default primary key field if any primary key field is defined."""
         non_default_primary_key_fields = [
             field_name

From 16a7c1ff51fd34170d3564458604c9346e882157 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Tue, 5 Mar 2024 21:32:12 +0100
Subject: [PATCH 50/52] fix bug in memoization mode copy

---
 reflex/components/component.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index 2bc9542acde..da9d2bcedaf 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -1855,7 +1855,7 @@ def create(cls, *children, **props) -> Component:
         """
         comp = super().create(*children, **props)
         if comp.get_hooks():
-            comp._memoization_mode = cls._memoization_mode.model_copy(
+            comp._memoization_mode = comp._memoization_mode.model_copy(
                 update={"disposition": MemoizationDisposition.ALWAYS}
             )
         return comp

From 6d96a94d82aa97028f48ad4da7639483352a64bf Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Tue, 5 Mar 2024 21:53:44 +0100
Subject: [PATCH 51/52] fix chakra list, allow Tag.tag to be None in validation

---
 reflex/components/chakra/datadisplay/list.py | 19 ++++++++++++++-----
 reflex/components/tags/tag.py                |  2 +-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/reflex/components/chakra/datadisplay/list.py b/reflex/components/chakra/datadisplay/list.py
index d3248e19662..a3f8ce8ae57 100644
--- a/reflex/components/chakra/datadisplay/list.py
+++ b/reflex/components/chakra/datadisplay/list.py
@@ -1,17 +1,14 @@
 """List components."""
 from __future__ import annotations
 
-from typing import Generic, Optional, TypeVar
+from typing import Optional
 
 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.components.core.foreach import Foreach
 from reflex.vars import Var
 
-T = TypeVar("T")
-
-# TODO: Generic is just a hacky workaround to stop pydantic from complaining
-class List(ChakraComponent, Generic[T]):
+class List(ChakraComponent):
     """Display a list of items."""
 
     tag: str = "List"
@@ -25,6 +22,18 @@ class List(ChakraComponent, Generic[T]):
     # Shorthand prop for listStyleType
     style_type: Optional[Var[str]] = None
 
+    @classmethod
+    def __class_getitem__(cls, item):
+        """This method is just a hacky workaround to stop pydantic v2 from complaining.
+
+        Args:
+            item: The type of the list items.
+
+        Returns:
+            The list component.
+        """
+        return cls
+
     @classmethod
     def create(
         cls, *children, items: list | Var[list] | None = None, **props
diff --git a/reflex/components/tags/tag.py b/reflex/components/tags/tag.py
index 27b5dc7c150..5f528962c7e 100644
--- a/reflex/components/tags/tag.py
+++ b/reflex/components/tags/tag.py
@@ -14,7 +14,7 @@ class Tag(Base):
     """A React tag."""
 
     # The name of the tag.
-    name: str = ""
+    name: str | None = ""
 
     # The props of the tag.
     props: Dict[str, Any] = {}

From cdc2f4f6e037a3ba6fbe45e73a77e643ceceb44d Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Tue, 5 Mar 2024 21:59:59 +0100
Subject: [PATCH 52/52] cleanup unneeded init_subclass super calls

---
 reflex/components/component.py | 4 +---
 reflex/model.py                | 2 --
 reflex/state.py                | 1 -
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index da9d2bcedaf..cb26cbd5b0a 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -202,14 +202,12 @@ class Component(BaseComponent, ABC):
     _memoization_mode: MemoizationMode = MemoizationMode()
 
     @classmethod
-    def __pydantic_init_subclass__(cls, **kwargs):
+    def __pydantic_init_subclass__(cls):
         """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()
 
diff --git a/reflex/model.py b/reflex/model.py
index 6c6456955a6..7bd5ed82a1c 100644
--- a/reflex/model.py
+++ b/reflex/model.py
@@ -69,8 +69,6 @@ def __pydantic_init_subclass__(cls):
             cls.model_fields.pop("id", None)
             cls.model_rebuild(force=True)
 
-        super().__init_subclass__()
-
     @classmethod
     def _dict_recursive(cls, value):
         """Recursively serialize the relationship object(s).
diff --git a/reflex/state.py b/reflex/state.py
index 6ddef6a3d11..e30f60087bf 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -375,7 +375,6 @@ def __pydantic_init_subclass__(cls, **kwargs: Any) -> None:
         Raises:
             ValueError: If a substate class shadows another.
         """
-        #  super().__init_subclass__(**kwargs)
         # Event handlers should not shadow builtin state methods.
         cls._check_overridden_methods()