diff --git a/integration/test_event_actions.py b/integration/test_event_actions.py
index 67605639a..ced91b792 100644
--- a/integration/test_event_actions.py
+++ b/integration/test_event_actions.py
@@ -25,7 +25,7 @@ def TestEventAction():
     class EventFiringComponent(rx.Component):
         """A component that fires onClick event without passing DOM event."""
 
-        tag = "EventFiringComponent"
+        tag: str = "EventFiringComponent"
 
         def _get_custom_code(self) -> str | None:
             return """
diff --git a/reflex/components/base/body.py b/reflex/components/base/body.py
index ee38cb5d4..99833b836 100644
--- a/reflex/components/base/body.py
+++ b/reflex/components/base/body.py
@@ -6,4 +6,4 @@ from reflex.components.component import Component
 class Body(Component):
     """A body component."""
 
-    tag = "body"
+    tag: str = "body"
diff --git a/reflex/components/base/document.py b/reflex/components/base/document.py
index 8f841cb52..e5500530a 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 99554ede9..22e9d797a 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 c8a63e7b4..34a5e71af 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 b2a696163..4a78ffa09 100644
--- a/reflex/components/base/link.py
+++ b/reflex/components/base/link.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class RawLink(Component):
     """A component that displays the title of the current page."""
 
-    tag = "link"
+    tag: str = "link"
 
     # The href.
     href: 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 55cb42f0a..1a310bf31 100644
--- a/reflex/components/base/meta.py
+++ b/reflex/components/base/meta.py
@@ -11,7 +11,7 @@ from reflex.components.component import Component
 class Title(Component):
     """A component that displays the title of the current page."""
 
-    tag = "title"
+    tag: str = "title"
 
     def render(self) -> dict:
         """Render the title component.
@@ -29,7 +29,7 @@ class Title(Component):
 class Meta(Component):
     """A component that displays metadata for the current page."""
 
-    tag = "meta"
+    tag: str = "meta"
 
     # The description of character encoding.
     char_set: Optional[str] = None
diff --git a/reflex/components/base/script.py b/reflex/components/base/script.py
index e2721ebdf..b3fe74f49 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 f93005726..ab5028646 100644
--- a/reflex/components/chakra/base.py
+++ b/reflex/components/chakra/base.py
@@ -53,7 +53,7 @@ class ChakraComponent(Component):
 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 01f1d5c45..80a9898e8 100644
--- a/reflex/components/chakra/datadisplay/badge.py
+++ b/reflex/components/chakra/datadisplay/badge.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Badge(ChakraComponent):
     """A badge component."""
 
-    tag = "Badge"
+    tag: str = "Badge"
 
     # Variant of the badge ("solid" | "subtle" | "outline")
     variant: Optional[Var[LiteralVariant]] = None
diff --git a/reflex/components/chakra/datadisplay/code.py b/reflex/components/chakra/datadisplay/code.py
index fe1016b7a..b2931c6d0 100644
--- a/reflex/components/chakra/datadisplay/code.py
+++ b/reflex/components/chakra/datadisplay/code.py
@@ -7,4 +7,4 @@ from reflex.components.chakra import (
 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 b7d075632..0bafce00c 100644
--- a/reflex/components/chakra/datadisplay/divider.py
+++ b/reflex/components/chakra/datadisplay/divider.py
@@ -10,7 +10,7 @@ LiteralLayout = Literal["horizontal", "vertical"]
 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 f9068284d..0e568e56a 100644
--- a/reflex/components/chakra/datadisplay/keyboard_key.py
+++ b/reflex/components/chakra/datadisplay/keyboard_key.py
@@ -6,4 +6,4 @@ from reflex.components.chakra import ChakraComponent
 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 cc32b8106..d3248e196 100644
--- a/reflex/components/chakra/datadisplay/list.py
+++ b/reflex/components/chakra/datadisplay/list.py
@@ -14,7 +14,7 @@ T = TypeVar("T")
 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 @@ class List(ChakraComponent, Generic[T]):
 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 58078cef3..71e4189bd 100644
--- a/reflex/components/chakra/datadisplay/stat.py
+++ b/reflex/components/chakra/datadisplay/stat.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Stat(ChakraComponent):
     """The Stat component is used to display some statistics. It can take in a label, a number and a help text."""
 
-    tag = "Stat"
+    tag: str = "Stat"
 
     @classmethod
     def create(
@@ -51,25 +51,25 @@ class Stat(ChakraComponent):
 class StatLabel(ChakraComponent):
     """A stat label component."""
 
-    tag = "StatLabel"
+    tag: str = "StatLabel"
 
 
 class StatNumber(ChakraComponent):
     """The stat to display."""
 
-    tag = "StatNumber"
+    tag: str = "StatNumber"
 
 
 class StatHelpText(ChakraComponent):
     """A helper text to display under the stat."""
 
-    tag = "StatHelpText"
+    tag: str = "StatHelpText"
 
 
 class StatArrow(ChakraComponent):
     """A stat arrow component indicating the direction of change."""
 
-    tag = "StatArrow"
+    tag: str = "StatArrow"
 
     # The type of arrow, either increase or decrease.
     type_: 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 b2237817b..65a925c24 100644
--- a/reflex/components/chakra/datadisplay/table.py
+++ b/reflex/components/chakra/datadisplay/table.py
@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Table(ChakraComponent):
     """A table component."""
 
-    tag = "Table"
+    tag: str = "Table"
 
     # The color scheme of the table
     color_scheme: Optional[Var[str]] = None
@@ -62,7 +62,7 @@ class Table(ChakraComponent):
 class Thead(ChakraComponent):
     """A table header component."""
 
-    tag = "Thead"
+    tag: str = "Thead"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot"]
@@ -114,7 +114,7 @@ class Thead(ChakraComponent):
 class Tbody(ChakraComponent):
     """A table body component."""
 
-    tag = "Tbody"
+    tag: str = "Tbody"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Td", "Th"]
@@ -188,7 +188,7 @@ class Tbody(ChakraComponent):
 class Tfoot(ChakraComponent):
     """A table footer component."""
 
-    tag = "Tfoot"
+    tag: str = "Tfoot"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Td", "Th", "Tfoot"]
@@ -237,7 +237,7 @@ class Tfoot(ChakraComponent):
 class Tr(ChakraComponent):
     """A table row component."""
 
-    tag = "Tr"
+    tag: str = "Tr"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Tr"]
@@ -268,7 +268,7 @@ class Tr(ChakraComponent):
 class Th(ChakraComponent):
     """A table header cell component."""
 
-    tag = "Th"
+    tag: str = "Th"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tr", "Td", "Th"]
@@ -280,7 +280,7 @@ class Th(ChakraComponent):
 class Td(ChakraComponent):
     """A table data cell component."""
 
-    tag = "Td"
+    tag: str = "Td"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead"]
@@ -292,7 +292,7 @@ class Td(ChakraComponent):
 class TableCaption(ChakraComponent):
     """A table caption component."""
 
-    tag = "TableCaption"
+    tag: str = "TableCaption"
 
     # The placement of the table caption. This sets the `caption-side` CSS attribute.
     placement: 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 7fd9e8954..eaa7a7508 100644
--- a/reflex/components/chakra/datadisplay/tag.py
+++ b/reflex/components/chakra/datadisplay/tag.py
@@ -14,31 +14,31 @@ from reflex.vars import Var
 class TagLabel(ChakraComponent):
     """The label of the tag."""
 
-    tag = "TagLabel"
+    tag: str = "TagLabel"
 
 
 class TagLeftIcon(ChakraComponent):
     """The left icon of the tag."""
 
-    tag = "TagLeftIcon"
+    tag: str = "TagLeftIcon"
 
 
 class TagRightIcon(ChakraComponent):
     """The right icon of the tag."""
 
-    tag = "TagRightIcon"
+    tag: str = "TagRightIcon"
 
 
 class TagCloseButton(ChakraComponent):
     """The close button of the tag."""
 
-    tag = "TagCloseButton"
+    tag: str = "TagCloseButton"
 
 
 class Tag(ChakraComponent):
     """The parent wrapper that provides context for its children."""
 
-    tag = "Tag"
+    tag: str = "Tag"
 
     # The visual color appearance of the tag.
     # options: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" |
diff --git a/reflex/components/chakra/disclosure/accordion.py b/reflex/components/chakra/disclosure/accordion.py
index 15148c137..ef78c7d60 100644
--- a/reflex/components/chakra/disclosure/accordion.py
+++ b/reflex/components/chakra/disclosure/accordion.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Accordion(ChakraComponent):
     """The wrapper that uses cloneElement to pass props to AccordionItem children."""
 
-    tag = "Accordion"
+    tag: str = "Accordion"
 
     # If true, multiple accordion items can be expanded at once.
     allow_multiple: Optional[Var[bool]] = None
@@ -79,7 +79,7 @@ class Accordion(ChakraComponent):
 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 cf6871702..20486b217 100644
--- a/reflex/components/chakra/disclosure/tabs.py
+++ b/reflex/components/chakra/disclosure/tabs.py
@@ -14,7 +14,7 @@ from reflex.vars import Var
 class Tabs(ChakraComponent):
     """An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern. Tabs, provides context and state for all components."""
 
-    tag = "Tabs"
+    tag: str = "Tabs"
 
     # The alignment of the tabs ("center" | "end" | "start").
     align: Optional[Var[LiteralTagAlign]] = None
@@ -75,7 +75,7 @@ class Tabs(ChakraComponent):
 class Tab(ChakraComponent):
     """An element that serves as a label for one of the tab panels and can be activated to display that panel.."""
 
-    tag = "Tab"
+    tag: str = "Tab"
 
     # If true, the Tab won't be toggleable.
     is_disabled: 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 c2fc18bd3..381d529a5 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 161b130b2..6c31b0154 100644
--- a/reflex/components/chakra/disclosure/visuallyhidden.py
+++ b/reflex/components/chakra/disclosure/visuallyhidden.py
@@ -6,4 +6,4 @@ from reflex.components.chakra import ChakraComponent
 class VisuallyHidden(ChakraComponent):
     """A component that visually hides content while still allowing it to be read by screen readers."""
 
-    tag = "VisuallyHidden"
+    tag: str = "VisuallyHidden"
diff --git a/reflex/components/chakra/feedback/alert.py b/reflex/components/chakra/feedback/alert.py
index 2940a6d0c..94efe49ef 100644
--- a/reflex/components/chakra/feedback/alert.py
+++ b/reflex/components/chakra/feedback/alert.py
@@ -13,7 +13,7 @@ from reflex.vars import Var
 class Alert(ChakraComponent):
     """An alert feedback box."""
 
-    tag = "Alert"
+    tag: str = "Alert"
 
     # The status of the alert ("success" | "info" | "warning" | "error")
     status: Optional[Var[LiteralStatus]] = None
@@ -54,16 +54,16 @@ class Alert(ChakraComponent):
 class AlertIcon(ChakraComponent):
     """An icon displayed in the alert."""
 
-    tag = "AlertIcon"
+    tag: str = "AlertIcon"
 
 
 class AlertTitle(ChakraComponent):
     """The title of the alert."""
 
-    tag = "AlertTitle"
+    tag: str = "AlertTitle"
 
 
 class AlertDescription(ChakraComponent):
     """AlertDescription composes the Box component."""
 
-    tag = "AlertDescription"
+    tag: str = "AlertDescription"
diff --git a/reflex/components/chakra/feedback/circularprogress.py b/reflex/components/chakra/feedback/circularprogress.py
index c22ea6210..2fb375fb7 100644
--- a/reflex/components/chakra/feedback/circularprogress.py
+++ b/reflex/components/chakra/feedback/circularprogress.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class CircularProgress(ChakraComponent):
     """The CircularProgress component is used to indicate the progress for determinate and indeterminate processes."""
 
-    tag = "CircularProgress"
+    tag: str = "CircularProgress"
 
     # If true, the cap of the progress indicator will be rounded.
     cap_is_round: Optional[Var[bool]] = None
@@ -64,4 +64,4 @@ class CircularProgress(ChakraComponent):
 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 3f6983383..c423de773 100644
--- a/reflex/components/chakra/feedback/progress.py
+++ b/reflex/components/chakra/feedback/progress.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Progress(ChakraComponent):
     """A bar to display progress."""
 
-    tag = "Progress"
+    tag: str = "Progress"
 
     # If true, the progress bar will show stripe
     has_stripe: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/feedback/skeleton.py b/reflex/components/chakra/feedback/skeleton.py
index 4766dc6f6..0a555b1c9 100644
--- a/reflex/components/chakra/feedback/skeleton.py
+++ b/reflex/components/chakra/feedback/skeleton.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Skeleton(ChakraComponent):
     """Skeleton is used to display the loading state of some components. You can use it as a standalone component. Or to wrap another component to take the same height and width."""
 
-    tag = "Skeleton"
+    tag: str = "Skeleton"
 
     # The color at the animation end
     end_color: 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 74e076d10..934b2c7a5 100644
--- a/reflex/components/chakra/feedback/spinner.py
+++ b/reflex/components/chakra/feedback/spinner.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Spinner(ChakraComponent):
     """The component that spins."""
 
-    tag = "Spinner"
+    tag: str = "Spinner"
 
     # The color of the empty area in the spinner
     empty_color: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/forms/button.py b/reflex/components/chakra/forms/button.py
index 643306871..e8c68d260 100644
--- a/reflex/components/chakra/forms/button.py
+++ b/reflex/components/chakra/forms/button.py
@@ -14,7 +14,7 @@ from reflex.vars import Var
 class Button(ChakraComponent):
     """The Button component is used to trigger an event or event, such as submitting a form, opening a dialog, canceling an event, or performing a delete operation."""
 
-    tag = "Button"
+    tag: str = "Button"
 
     # The space between the button icon and label.
     icon_spacing: 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 298eaf167..d856cdaee 100644
--- a/reflex/components/chakra/forms/checkbox.py
+++ b/reflex/components/chakra/forms/checkbox.py
@@ -15,7 +15,7 @@ from reflex.vars import Var
 class Checkbox(ChakraComponent):
     """The Checkbox component is used in forms when a user needs to select multiple values from several options."""
 
-    tag = "Checkbox"
+    tag: str = "Checkbox"
 
     # Color scheme for checkbox.
     # Options:
@@ -71,7 +71,7 @@ class Checkbox(ChakraComponent):
 class CheckboxGroup(ChakraComponent):
     """A group of checkboxes."""
 
-    tag = "CheckboxGroup"
+    tag: str = "CheckboxGroup"
 
     # The value of the checkbox group
     value: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/forms/colormodeswitch.py b/reflex/components/chakra/forms/colormodeswitch.py
index 16bcf6b46..a5afcf9ee 100644
--- a/reflex/components/chakra/forms/colormodeswitch.py
+++ b/reflex/components/chakra/forms/colormodeswitch.py
@@ -99,5 +99,5 @@ class ColorModeButton(Button):
 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 4524492f1..8178af83f 100644
--- a/reflex/components/chakra/forms/editable.py
+++ b/reflex/components/chakra/forms/editable.py
@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Editable(ChakraComponent):
     """The wrapper component that provides context value."""
 
-    tag = "Editable"
+    tag: str = "Editable"
 
     # If true, the Editable will be disabled.
     is_disabled: Optional[Var[bool]] = None
@@ -55,16 +55,16 @@ class Editable(ChakraComponent):
 class EditableInput(ChakraComponent):
     """The edit view of the component. It shows when you click or focus on the text."""
 
-    tag = "EditableInput"
+    tag: str = "EditableInput"
 
 
 class EditableTextarea(ChakraComponent):
     """Use the textarea element to handle multi line text input in an editable context."""
 
-    tag = "EditableTextarea"
+    tag: str = "EditableTextarea"
 
 
 class EditablePreview(ChakraComponent):
     """The read-only view of the component."""
 
-    tag = "EditablePreview"
+    tag: str = "EditablePreview"
diff --git a/reflex/components/chakra/forms/form.py b/reflex/components/chakra/forms/form.py
index 6149d645f..90c139c39 100644
--- a/reflex/components/chakra/forms/form.py
+++ b/reflex/components/chakra/forms/form.py
@@ -36,7 +36,7 @@ HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
 class Form(ChakraComponent):
     """A form component."""
 
-    tag = "Box"
+    tag: str = "Box"
 
     # What the form renders to.
     as_: Var[str] = "form"  # type: ignore
@@ -151,7 +151,7 @@ class Form(ChakraComponent):
 class FormControl(ChakraComponent):
     """Provide context to form components."""
 
-    tag = "FormControl"
+    tag: str = "FormControl"
 
     # If true, the form control will be disabled.
     is_disabled: Optional[Var[bool]] = None
@@ -216,13 +216,13 @@ class FormControl(ChakraComponent):
 class FormHelperText(ChakraComponent):
     """A form helper text component."""
 
-    tag = "FormHelperText"
+    tag: str = "FormHelperText"
 
 
 class FormLabel(ChakraComponent):
     """A form label component."""
 
-    tag = "FormLabel"
+    tag: str = "FormLabel"
 
     # Link
     html_for: 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 b89214edb..2f5e2c6ce 100644
--- a/reflex/components/chakra/forms/iconbutton.py
+++ b/reflex/components/chakra/forms/iconbutton.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 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 e694c1006..35066b573 100644
--- a/reflex/components/chakra/forms/input.py
+++ b/reflex/components/chakra/forms/input.py
@@ -17,7 +17,7 @@ from reflex.vars import Var
 class Input(ChakraComponent):
     """The Input component is a component that is used to get user input in a text field."""
 
-    tag = "Input"
+    tag: str = "Input"
 
     # State var to bind the input.
     value: Optional[Var[str]] = None
@@ -99,7 +99,7 @@ class Input(ChakraComponent):
 class InputGroup(ChakraComponent):
     """The InputGroup component is a component that is used to group a set of inputs."""
 
-    tag = "InputGroup"
+    tag: str = "InputGroup"
 
     _memoization_mode = MemoizationMode(recursive=False)
 
@@ -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 7d9a73e06..d5d0272af 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 8e064d77e..a72ba14ce 100644
--- a/reflex/components/chakra/forms/numberinput.py
+++ b/reflex/components/chakra/forms/numberinput.py
@@ -15,7 +15,7 @@ from reflex.vars import Var
 class NumberInput(ChakraComponent):
     """The wrapper that provides context and logic to the components."""
 
-    tag = "NumberInput"
+    tag: str = "NumberInput"
 
     # State var to bind the input.
     value: Optional[Var[Number]] = None
@@ -115,22 +115,22 @@ class NumberInput(ChakraComponent):
 class NumberInputField(ChakraComponent):
     """The input field itself."""
 
-    tag = "NumberInputField"
+    tag: str = "NumberInputField"
 
 
 class NumberInputStepper(ChakraComponent):
     """The wrapper for the input's stepper buttons."""
 
-    tag = "NumberInputStepper"
+    tag: str = "NumberInputStepper"
 
 
 class NumberIncrementStepper(ChakraComponent):
     """The button to increment the value of the input."""
 
-    tag = "NumberIncrementStepper"
+    tag: str = "NumberIncrementStepper"
 
 
 class NumberDecrementStepper(ChakraComponent):
     """The button to decrement the value of the input."""
 
-    tag = "NumberDecrementStepper"
+    tag: str = "NumberDecrementStepper"
diff --git a/reflex/components/chakra/forms/pininput.py b/reflex/components/chakra/forms/pininput.py
index 1e54bdc04..bd66bd9ec 100644
--- a/reflex/components/chakra/forms/pininput.py
+++ b/reflex/components/chakra/forms/pininput.py
@@ -15,7 +15,7 @@ from reflex.vars import Var
 class PinInput(ChakraComponent):
     """The component that provides context to all the pin-input fields."""
 
-    tag = "PinInput"
+    tag: str = "PinInput"
 
     # State var to bind the the input.
     value: Optional[Var[str]] = None
@@ -164,7 +164,7 @@ class PinInput(ChakraComponent):
 class PinInputField(ChakraComponent):
     """The text field that user types in - must be a direct child of PinInput."""
 
-    tag = "PinInputField"
+    tag: str = "PinInputField"
 
     # the position of the PinInputField inside the PinInput.
     # Default to None because it is assigned by PinInput when created.
diff --git a/reflex/components/chakra/forms/radio.py b/reflex/components/chakra/forms/radio.py
index 23213f6f5..9ca323454 100644
--- a/reflex/components/chakra/forms/radio.py
+++ b/reflex/components/chakra/forms/radio.py
@@ -13,7 +13,7 @@ from reflex.vars import Var
 class RadioGroup(ChakraComponent):
     """A grouping of individual radio options."""
 
-    tag = "RadioGroup"
+    tag: str = "RadioGroup"
 
     # State var to bind the the input.
     value: Optional[Var[Any]] = None
@@ -60,7 +60,7 @@ class RadioGroup(ChakraComponent):
 class Radio(Text):
     """Radios are used when only one choice may be selected in a series of options."""
 
-    tag = "Radio"
+    tag: str = "Radio"
 
     # Value of radio.
     value: Optional[Var[Any]] = None
diff --git a/reflex/components/chakra/forms/rangeslider.py b/reflex/components/chakra/forms/rangeslider.py
index c076dc885..71f7bcd7e 100644
--- a/reflex/components/chakra/forms/rangeslider.py
+++ b/reflex/components/chakra/forms/rangeslider.py
@@ -13,7 +13,7 @@ from reflex.vars import Var
 class RangeSlider(ChakraComponent):
     """The RangeSlider is a multi thumb slider used to select a range of related values. A common use-case of this component is a price range picker that allows a user to set the minimum and maximum price."""
 
-    tag = "RangeSlider"
+    tag: str = "RangeSlider"
 
     # State var to bind the the input.
     value: Optional[Var[List[int]]] = None
@@ -121,19 +121,19 @@ class RangeSlider(ChakraComponent):
 class RangeSliderTrack(ChakraComponent):
     """A range slider track."""
 
-    tag = "RangeSliderTrack"
+    tag: str = "RangeSliderTrack"
 
 
 class RangeSliderFilledTrack(ChakraComponent):
     """A filled range slider track."""
 
-    tag = "RangeSliderFilledTrack"
+    tag: str = "RangeSliderFilledTrack"
 
 
 class RangeSliderThumb(ChakraComponent):
     """A range slider thumb."""
 
-    tag = "RangeSliderThumb"
+    tag: str = "RangeSliderThumb"
 
     # The position of the thumb.
     index: Optional[Var[int]] = None
diff --git a/reflex/components/chakra/forms/select.py b/reflex/components/chakra/forms/select.py
index 906fbe12e..c369e8c97 100644
--- a/reflex/components/chakra/forms/select.py
+++ b/reflex/components/chakra/forms/select.py
@@ -13,7 +13,7 @@ from reflex.vars import Var
 class Select(ChakraComponent):
     """Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead."""
 
-    tag = "Select"
+    tag: str = "Select"
 
     # State var to bind the select.
     value: Optional[Var[str]] = None
@@ -87,7 +87,7 @@ class Select(ChakraComponent):
 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 ce847ebd2..f4cf8eff2 100644
--- a/reflex/components/chakra/forms/slider.py
+++ b/reflex/components/chakra/forms/slider.py
@@ -14,7 +14,7 @@ LiteralLayout = Literal["horizontal", "vertical"]
 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 @@ class Slider(ChakraComponent):
 class SliderTrack(ChakraComponent):
     """The empty part of the slider that shows the track."""
 
-    tag = "SliderTrack"
+    tag: str = "SliderTrack"
 
 
 class SliderFilledTrack(ChakraComponent):
     """The filled part of the slider."""
 
-    tag = "SliderFilledTrack"
+    tag: str = "SliderFilledTrack"
 
 
 class SliderThumb(ChakraComponent):
     """The handle that's used to change the slider value."""
 
-    tag = "SliderThumb"
+    tag: str = "SliderThumb"
 
     # The size of the thumb.
     box_size: 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 ca8dd3096..b9853ded9 100644
--- a/reflex/components/chakra/forms/switch.py
+++ b/reflex/components/chakra/forms/switch.py
@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Switch(ChakraComponent):
     """Toggleable switch component."""
 
-    tag = "Switch"
+    tag: str = "Switch"
 
     # If true, the switch will be checked. You'll need to set an on_change event handler to update its value (since it is now controlled)
     is_checked: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/forms/textarea.py b/reflex/components/chakra/forms/textarea.py
index 6ee816b08..d10434088 100644
--- a/reflex/components/chakra/forms/textarea.py
+++ b/reflex/components/chakra/forms/textarea.py
@@ -13,7 +13,7 @@ from reflex.vars import Var
 class TextArea(ChakraComponent):
     """A text area component."""
 
-    tag = "Textarea"
+    tag: str = "Textarea"
 
     # State var to bind the input.
     value: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/aspect_ratio.py b/reflex/components/chakra/layout/aspect_ratio.py
index f8d1c1530..ad89d2a8f 100644
--- a/reflex/components/chakra/layout/aspect_ratio.py
+++ b/reflex/components/chakra/layout/aspect_ratio.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class AspectRatio(ChakraComponent):
     """AspectRatio component is used to embed responsive videos and maps, etc."""
 
-    tag = "AspectRatio"
+    tag: str = "AspectRatio"
 
     # The aspect ratio of the Box
     ratio: Optional[Var[float]] = None
diff --git a/reflex/components/chakra/layout/box.py b/reflex/components/chakra/layout/box.py
index e898af144..607850ab2 100644
--- a/reflex/components/chakra/layout/box.py
+++ b/reflex/components/chakra/layout/box.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Box(ChakraComponent):
     """A generic container component that can contain other components."""
 
-    tag = "Box"
+    tag: str = "Box"
 
     # The type element to render. You can specify an image, video, or any other HTML element such as iframe.
     element: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/card.py b/reflex/components/chakra/layout/card.py
index 9ea3d0621..b857be754 100644
--- a/reflex/components/chakra/layout/card.py
+++ b/reflex/components/chakra/layout/card.py
@@ -14,25 +14,25 @@ from reflex.vars import Var
 class CardHeader(ChakraComponent):
     """The wrapper that contains a card's header."""
 
-    tag = "CardHeader"
+    tag: str = "CardHeader"
 
 
 class CardBody(ChakraComponent):
     """The wrapper that houses the card's main content."""
 
-    tag = "CardBody"
+    tag: str = "CardBody"
 
 
 class CardFooter(ChakraComponent):
     """The footer that houses the card actions."""
 
-    tag = "CardFooter"
+    tag: str = "CardFooter"
 
 
 class Card(ChakraComponent):
     """The parent wrapper that provides context for its children."""
 
-    tag = "Card"
+    tag: str = "Card"
 
     # [required] The flex alignment of the card
     align: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/center.py b/reflex/components/chakra/layout/center.py
index bc3ced1aa..b853c56ff 100644
--- a/reflex/components/chakra/layout/center.py
+++ b/reflex/components/chakra/layout/center.py
@@ -6,16 +6,16 @@ from reflex.components.chakra import ChakraComponent
 class Center(ChakraComponent):
     """A box that centers its contents."""
 
-    tag = "Center"
+    tag: str = "Center"
 
 
 class Square(ChakraComponent):
     """A centered square container."""
 
-    tag = "Square"
+    tag: str = "Square"
 
 
 class Circle(ChakraComponent):
     """A square container with round border-radius."""
 
-    tag = "Circle"
+    tag: str = "Circle"
diff --git a/reflex/components/chakra/layout/container.py b/reflex/components/chakra/layout/container.py
index 4273d7747..5b04a2726 100644
--- a/reflex/components/chakra/layout/container.py
+++ b/reflex/components/chakra/layout/container.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Container(ChakraComponent):
     """A flexbox container that centers its children and sets a max width."""
 
-    tag = "Container"
+    tag: str = "Container"
 
     # If true, container will center its children regardless of their width.
     center_content: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/layout/flex.py b/reflex/components/chakra/layout/flex.py
index 306f0984d..116692e72 100644
--- a/reflex/components/chakra/layout/flex.py
+++ b/reflex/components/chakra/layout/flex.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Flex(ChakraComponent):
     """A reflexive container component."""
 
-    tag = "Flex"
+    tag: str = "Flex"
 
     # How to align items in the flex.
     align: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/layout/grid.py b/reflex/components/chakra/layout/grid.py
index 6cfda018a..042dfa9f0 100644
--- a/reflex/components/chakra/layout/grid.py
+++ b/reflex/components/chakra/layout/grid.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Grid(ChakraComponent):
     """A grid component."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
     # Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_
@@ -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 3888f3726..5e6d94316 100644
--- a/reflex/components/chakra/layout/spacer.py
+++ b/reflex/components/chakra/layout/spacer.py
@@ -6,4 +6,4 @@ from reflex.components.chakra import ChakraComponent
 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 b37e7caa3..de1a4c03d 100644
--- a/reflex/components/chakra/layout/stack.py
+++ b/reflex/components/chakra/layout/stack.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Stack(ChakraComponent):
     """Container to stack elements with spacing."""
 
-    tag = "Stack"
+    tag: str = "Stack"
 
     # Shorthand for alignItems style prop
     align_items: 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 e72f4fc12..b5915487a 100644
--- a/reflex/components/chakra/layout/wrap.py
+++ b/reflex/components/chakra/layout/wrap.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Wrap(ChakraComponent):
     """Layout component used to add space between elements and wrap automatically if there isn't enough space."""
 
-    tag = "Wrap"
+    tag: str = "Wrap"
 
     # How to align the items.
     align: Optional[Var[str]] = None
@@ -55,4 +55,4 @@ class Wrap(ChakraComponent):
 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 d13bee75f..caa7513e5 100644
--- a/reflex/components/chakra/media/avatar.py
+++ b/reflex/components/chakra/media/avatar.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Avatar(ChakraComponent):
     """The image that represents the user."""
 
-    tag = "Avatar"
+    tag: str = "Avatar"
 
     # The default avatar used as fallback when name, and src is not specified.
     icon: Optional[Var[str]] = None
@@ -51,13 +51,13 @@ class Avatar(ChakraComponent):
 class AvatarBadge(ChakraComponent):
     """A wrapper that displays its content on the right corner of the avatar."""
 
-    tag = "AvatarBadge"
+    tag: str = "AvatarBadge"
 
 
 class AvatarGroup(ChakraComponent):
     """A wrapper to stack multiple Avatars together."""
 
-    tag = "AvatarGroup"
+    tag: str = "AvatarGroup"
 
     # The maximum number of visible avatars.
     max_: Optional[Var[int]] = None
diff --git a/reflex/components/chakra/media/icon.py b/reflex/components/chakra/media/icon.py
index 8b4fb3581..3a2b064c9 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 6a2dd6e9a..82927cc7b 100644
--- a/reflex/components/chakra/media/image.py
+++ b/reflex/components/chakra/media/image.py
@@ -11,7 +11,7 @@ from reflex.vars import Var
 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 57e7d2cdc..b525415b1 100644
--- a/reflex/components/chakra/navigation/breadcrumb.py
+++ b/reflex/components/chakra/navigation/breadcrumb.py
@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Breadcrumb(ChakraComponent):
     """The parent container for breadcrumbs."""
 
-    tag = "Breadcrumb"
+    tag: str = "Breadcrumb"
 
     # The visual separator between each breadcrumb item
     separator: Optional[Var[str]] = None
@@ -52,7 +52,7 @@ class Breadcrumb(ChakraComponent):
 class BreadcrumbItem(ChakraComponent):
     """Individual breadcrumb element containing a link and a divider."""
 
-    tag = "BreadcrumbItem"
+    tag: str = "BreadcrumbItem"
 
     # Is the current page of the breadcrumb.
     is_current_page: Optional[Var[bool]] = None
@@ -87,13 +87,13 @@ class BreadcrumbItem(ChakraComponent):
 class BreadcrumbSeparator(ChakraComponent):
     """The visual separator between each breadcrumb."""
 
-    tag = "BreadcrumbSeparator"
+    tag: str = "BreadcrumbSeparator"
 
 
 class BreadcrumbLink(Link):
     """The breadcrumb link."""
 
-    tag = "BreadcrumbLink"
+    tag: str = "BreadcrumbLink"
 
     # Is the current page of the breadcrumb.
     is_current_page: Optional[Var[bool]] = None
diff --git a/reflex/components/chakra/navigation/link.py b/reflex/components/chakra/navigation/link.py
index e1422b18a..b3560530d 100644
--- a/reflex/components/chakra/navigation/link.py
+++ b/reflex/components/chakra/navigation/link.py
@@ -13,7 +13,7 @@ next_link = NextLink.create()
 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 5fe8134cf..43f58ceb6 100644
--- a/reflex/components/chakra/navigation/linkoverlay.py
+++ b/reflex/components/chakra/navigation/linkoverlay.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class LinkOverlay(ChakraComponent):
     """Wraps child component in a link."""
 
-    tag = "LinkOverlay"
+    tag: str = "LinkOverlay"
 
     # If true, the link will open in new tab
     is_external: 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 1a2f40270..cffe0d067 100644
--- a/reflex/components/chakra/navigation/stepper.py
+++ b/reflex/components/chakra/navigation/stepper.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 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 @@ class Stepper(ChakraComponent):
 class Step(ChakraComponent):
     """A component for an individual step in the stepper."""
 
-    tag = "Step"
+    tag: str = "Step"
 
 
 class StepDescription(ChakraComponent):
     """The description text for a step component."""
 
-    tag = "StepDescription"
+    tag: str = "StepDescription"
 
 
 class StepIcon(ChakraComponent):
     """The icon displayed in a step indicator component."""
 
-    tag = "StepIcon"
+    tag: str = "StepIcon"
 
 
 class StepIndicator(ChakraComponent):
     """The component displaying the status of a step."""
 
-    tag = "StepIndicator"
+    tag: str = "StepIndicator"
 
 
 class StepNumber(ChakraComponent):
     """The number of a step displayed in a step indicator component."""
 
-    tag = "StepNumber"
+    tag: str = "StepNumber"
 
 
 class StepSeparator(ChakraComponent):
     """The component separting steps."""
 
-    tag = "StepSeparator"
+    tag: str = "StepSeparator"
 
 
 class StepStatus(ChakraComponent):
@@ -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 d394a30c1..1e135fe28 100644
--- a/reflex/components/chakra/overlay/alertdialog.py
+++ b/reflex/components/chakra/overlay/alertdialog.py
@@ -12,7 +12,7 @@ from reflex.vars import Var
 class AlertDialog(ChakraComponent):
     """Provides context and state for the dialog."""
 
-    tag = "AlertDialog"
+    tag: str = "AlertDialog"
 
     # If true, the modal will be open.
     is_open: Optional[Var[bool]] = None
@@ -122,34 +122,34 @@ class AlertDialog(ChakraComponent):
 class AlertDialogBody(ChakraComponent):
     """Should contain the description announced by screen readers."""
 
-    tag = "AlertDialogBody"
+    tag: str = "AlertDialogBody"
 
 
 class AlertDialogHeader(ChakraComponent):
     """Should contain the title announced by screen readers."""
 
-    tag = "AlertDialogHeader"
+    tag: str = "AlertDialogHeader"
 
 
 class AlertDialogFooter(ChakraComponent):
     """Should contain the events of the dialog."""
 
-    tag = "AlertDialogFooter"
+    tag: str = "AlertDialogFooter"
 
 
 class AlertDialogContent(ChakraComponent):
     """The wrapper for the alert dialog's content."""
 
-    tag = "AlertDialogContent"
+    tag: str = "AlertDialogContent"
 
 
 class AlertDialogOverlay(ChakraComponent):
     """The dimmed overlay behind the dialog."""
 
-    tag = "AlertDialogOverlay"
+    tag: str = "AlertDialogOverlay"
 
 
 class AlertDialogCloseButton(ChakraComponent):
     """The button that closes the dialog."""
 
-    tag = "AlertDialogCloseButton"
+    tag: str = "AlertDialogCloseButton"
diff --git a/reflex/components/chakra/overlay/drawer.py b/reflex/components/chakra/overlay/drawer.py
index 8d9159930..d63fa9a60 100644
--- a/reflex/components/chakra/overlay/drawer.py
+++ b/reflex/components/chakra/overlay/drawer.py
@@ -16,7 +16,7 @@ from reflex.vars import Var
 class Drawer(ChakraComponent):
     """A drawer component."""
 
-    tag = "Drawer"
+    tag: str = "Drawer"
 
     # If true, the modal will be open.
     is_open: Optional[Var[bool]] = None
@@ -137,34 +137,34 @@ class Drawer(ChakraComponent):
 class DrawerBody(ChakraComponent):
     """Drawer body."""
 
-    tag = "DrawerBody"
+    tag: str = "DrawerBody"
 
 
 class DrawerHeader(ChakraComponent):
     """Drawer header."""
 
-    tag = "DrawerHeader"
+    tag: str = "DrawerHeader"
 
 
 class DrawerFooter(ChakraComponent):
     """Drawer footer."""
 
-    tag = "DrawerFooter"
+    tag: str = "DrawerFooter"
 
 
 class DrawerOverlay(ChakraComponent):
     """Drawer overlay."""
 
-    tag = "DrawerOverlay"
+    tag: str = "DrawerOverlay"
 
 
 class DrawerContent(ChakraComponent):
     """Drawer content."""
 
-    tag = "DrawerContent"
+    tag: str = "DrawerContent"
 
 
 class DrawerCloseButton(ChakraComponent):
     """Drawer close button."""
 
-    tag = "DrawerCloseButton"
+    tag: str = "DrawerCloseButton"
diff --git a/reflex/components/chakra/overlay/menu.py b/reflex/components/chakra/overlay/menu.py
index 74a42f44c..91b80ea9e 100644
--- a/reflex/components/chakra/overlay/menu.py
+++ b/reflex/components/chakra/overlay/menu.py
@@ -17,7 +17,7 @@ from reflex.vars import Var
 class Menu(ChakraComponent):
     """The wrapper component provides context, state, and focus management."""
 
-    tag = "Menu"
+    tag: str = "Menu"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Optional[Var[int]] = None
@@ -115,7 +115,7 @@ class Menu(ChakraComponent):
 class MenuButton(ChakraComponent):
     """The trigger for the menu list. Must be a direct child of Menu."""
 
-    tag = "MenuButton"
+    tag: str = "MenuButton"
 
     # The variant of the menu button.
     variant: 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 @@ class MenuList(ChakraComponent):
 class MenuItem(ChakraComponent):
     """The trigger that handles menu selection. Must be a direct child of a MenuList."""
 
-    tag = "MenuItem"
+    tag: str = "MenuItem"
 
     # Overrides the parent menu's closeOnSelect prop.
     close_on_select: 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 450706e13..0ce7dba5e 100644
--- a/reflex/components/chakra/overlay/modal.py
+++ b/reflex/components/chakra/overlay/modal.py
@@ -14,7 +14,7 @@ ModalSizes = Literal["xs", "sm", "md", "lg", "xl", "full"]
 class Modal(ChakraComponent):
     """The wrapper that provides context for its children."""
 
-    tag = "Modal"
+    tag: str = "Modal"
 
     # If true, the modal will be open.
     is_open: Optional[Var[bool]] = None
@@ -133,34 +133,34 @@ class Modal(ChakraComponent):
 class ModalOverlay(ChakraComponent):
     """The dimmed overlay behind the modal dialog."""
 
-    tag = "ModalOverlay"
+    tag: str = "ModalOverlay"
 
 
 class ModalHeader(ChakraComponent):
     """The header that labels the modal dialog."""
 
-    tag = "ModalHeader"
+    tag: str = "ModalHeader"
 
 
 class ModalFooter(ChakraComponent):
     """The footer that houses the modal events."""
 
-    tag = "ModalFooter"
+    tag: str = "ModalFooter"
 
 
 class ModalContent(ChakraComponent):
     """The container for the modal dialog's content."""
 
-    tag = "ModalContent"
+    tag: str = "ModalContent"
 
 
 class ModalBody(ChakraComponent):
     """The wrapper that houses the modal's main content."""
 
-    tag = "ModalBody"
+    tag: str = "ModalBody"
 
 
 class ModalCloseButton(ChakraComponent):
     """The button that closes the modal."""
 
-    tag = "ModalCloseButton"
+    tag: str = "ModalCloseButton"
diff --git a/reflex/components/chakra/overlay/popover.py b/reflex/components/chakra/overlay/popover.py
index db20efa16..303293d50 100644
--- a/reflex/components/chakra/overlay/popover.py
+++ b/reflex/components/chakra/overlay/popover.py
@@ -16,7 +16,7 @@ from reflex.vars import Var
 class Popover(ChakraComponent):
     """The wrapper that provides props, state, and context to its children."""
 
-    tag = "Popover"
+    tag: str = "Popover"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Optional[Var[int]] = None
@@ -144,46 +144,46 @@ class Popover(ChakraComponent):
 class PopoverContent(ChakraComponent):
     """The popover itself."""
 
-    tag = "PopoverContent"
+    tag: str = "PopoverContent"
 
 
 class PopoverHeader(ChakraComponent):
     """The header of the popover."""
 
-    tag = "PopoverHeader"
+    tag: str = "PopoverHeader"
 
 
 class PopoverFooter(ChakraComponent):
     """Display a popover footer."""
 
-    tag = "PopoverFooter"
+    tag: str = "PopoverFooter"
 
 
 class PopoverBody(ChakraComponent):
     """The body of the popover."""
 
-    tag = "PopoverBody"
+    tag: str = "PopoverBody"
 
 
 class PopoverArrow(ChakraComponent):
     """A visual arrow that points to the reference (or trigger)."""
 
-    tag = "PopoverArrow"
+    tag: str = "PopoverArrow"
 
 
 class PopoverCloseButton(ChakraComponent):
     """A button to close the popover."""
 
-    tag = "PopoverCloseButton"
+    tag: str = "PopoverCloseButton"
 
 
 class PopoverAnchor(ChakraComponent):
     """Used to wrap the position-reference element."""
 
-    tag = "PopoverAnchor"
+    tag: str = "PopoverAnchor"
 
 
 class PopoverTrigger(ChakraComponent):
     """Used to wrap the reference (or trigger) element."""
 
-    tag = "PopoverTrigger"
+    tag: str = "PopoverTrigger"
diff --git a/reflex/components/chakra/overlay/tooltip.py b/reflex/components/chakra/overlay/tooltip.py
index eec1205f3..cc739c612 100644
--- a/reflex/components/chakra/overlay/tooltip.py
+++ b/reflex/components/chakra/overlay/tooltip.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Tooltip(ChakraComponent):
     """A tooltip message to appear."""
 
-    tag = "Tooltip"
+    tag: str = "Tooltip"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Optional[Var[int]] = None
diff --git a/reflex/components/chakra/typography/heading.py b/reflex/components/chakra/typography/heading.py
index 871dda428..d649ec668 100644
--- a/reflex/components/chakra/typography/heading.py
+++ b/reflex/components/chakra/typography/heading.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Heading(ChakraComponent):
     """A page heading."""
 
-    tag = "Heading"
+    tag: str = "Heading"
 
     # Override the tag. The default tag is `<h2>`.
     as_: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/typography/highlight.py b/reflex/components/chakra/typography/highlight.py
index 24e7d3b10..fa758ed7d 100644
--- a/reflex/components/chakra/typography/highlight.py
+++ b/reflex/components/chakra/typography/highlight.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Highlight(ChakraComponent):
     """Highlights a specific part of a string."""
 
-    tag = "Highlight"
+    tag: str = "Highlight"
 
     # A query for the text to highlight. Can be a string or a list of strings.
     query: Optional[Var[List[str]]] = None
diff --git a/reflex/components/chakra/typography/span.py b/reflex/components/chakra/typography/span.py
index e4bc698e6..c526f325b 100644
--- a/reflex/components/chakra/typography/span.py
+++ b/reflex/components/chakra/typography/span.py
@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Span(ChakraComponent):
     """Render an inline span of text."""
 
-    tag = "Text"
+    tag: str = "Text"
 
     # Override the tag. The default tag is `<span>`.
     as_: Var[str] = "span"  # type: ignore
diff --git a/reflex/components/chakra/typography/text.py b/reflex/components/chakra/typography/text.py
index aed9e6e85..769837fa4 100644
--- a/reflex/components/chakra/typography/text.py
+++ b/reflex/components/chakra/typography/text.py
@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Text(ChakraComponent):
     """Render a paragraph of text."""
 
-    tag = "Text"
+    tag: str = "Text"
 
     # Override the tag. The default tag is `<p>`.
     as_: Optional[Var[str]] = None
diff --git a/reflex/components/core/client_side_routing.py b/reflex/components/core/client_side_routing.py
index 3d2090cd3..4a145b098 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 383ac43f9..7237b9610 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 70bccb0e3..698540fb3 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 4552eb4e6..d0ed49395 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 fa8370a29..82a243424 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 ed4903dc2..90dca7f22 100644
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@@ -11,7 +11,7 @@ from .base import BaseHTML
 class Button(BaseHTML):
     """Display the button element."""
 
-    tag = "button"
+    tag: str = "button"
 
     # Automatically focuses the button when the page loads
     auto_focus: 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 @@ class Input(BaseHTML):
 class Label(BaseHTML):
     """Display the label element."""
 
-    tag = "label"
+    tag: str = "label"
 
     # ID of a form control with which the label is associated
     html_for: 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 @@ class Select(BaseHTML):
 class Textarea(BaseHTML):
     """Display the textarea element."""
 
-    tag = "textarea"
+    tag: str = "textarea"
 
     # Whether the form control should have autocomplete enabled
     auto_complete: Optional[Var[Union[str, int, bool]]] = None
diff --git a/reflex/components/el/elements/inline.py b/reflex/components/el/elements/inline.py
index 9cacf99c2..c1ec4e02e 100644
--- a/reflex/components/el/elements/inline.py
+++ b/reflex/components/el/elements/inline.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class A(BaseHTML):  # Inherits common attributes from BaseMeta
     """Display the 'a' element."""
 
-    tag = "a"
+    tag: str = "a"
 
     # Specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
     download: 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 95b95c5d7..607a24d7d 100644
--- a/reflex/components/el/elements/media.py
+++ b/reflex/components/el/elements/media.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Area(BaseHTML):
     """Display the area element."""
 
-    tag = "area"
+    tag: str = "area"
 
     # Alternate text for the area, used for accessibility
     alt: 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 0ec97645c..55ab9e4cd 100644
--- a/reflex/components/el/elements/metadata.py
+++ b/reflex/components/el/elements/metadata.py
@@ -10,9 +10,9 @@ from .base import BaseHTML
 class Base(BaseHTML):  # noqa: E742
     """Display the base element."""
 
-    tag = "base"
+    tag: str = "base"
 
-    tag = "base"
+    tag: str = "base"
     href: 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 9d034a645..4e309f6c2 100644
--- a/reflex/components/el/elements/other.py
+++ b/reflex/components/el/elements/other.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Details(BaseHTML):
     """Display the details element."""
 
-    tag = "details"
+    tag: str = "details"
 
     # Indicates whether the details will be visible (expanded) to the user
     open: 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 ebe608322..3a687a69a 100644
--- a/reflex/components/el/elements/scripts.py
+++ b/reflex/components/el/elements/scripts.py
@@ -9,20 +9,20 @@ from .base import BaseHTML
 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 ce3549573..6816091a4 100644
--- a/reflex/components/el/elements/sectioning.py
+++ b/reflex/components/el/elements/sectioning.py
@@ -8,88 +8,88 @@ from .base import BaseHTML
 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 e81ab86cd..d5ff492a4 100644
--- a/reflex/components/el/elements/tables.py
+++ b/reflex/components/el/elements/tables.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Caption(BaseHTML):
     """Display the caption element."""
 
-    tag = "caption"
+    tag: str = "caption"
 
     # Alignment of the caption
     align: 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 617660041..9637ebdeb 100644
--- a/reflex/components/el/elements/typography.py
+++ b/reflex/components/el/elements/typography.py
@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Blockquote(BaseHTML):
     """Display the blockquote element."""
 
-    tag = "blockquote"
+    tag: str = "blockquote"
 
     # Define the title of a work.
     cite: 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 1cbfeb72a..b21ddffec 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 b56f7f05f..8ab825738 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 04e392fef..31865fc0b 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 ef99217b1..b89259974 100644
--- a/reflex/components/next/image.py
+++ b/reflex/components/next/image.py
@@ -10,7 +10,7 @@ from .base import NextComponent
 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 175208259..e3ddfc6c6 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 faa79e625..45d77cce6 100644
--- a/reflex/components/next/video.py
+++ b/reflex/components/next/video.py
@@ -10,7 +10,7 @@ from .base import NextComponent
 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 80a07ac62..0b9185e64 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 ecb4e4107..5d6690a93 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 @@ to {
 class AccordionItem(AccordionComponent):
     """An accordion component."""
 
-    tag = "Item"
+    tag: str = "Item"
 
     alias = "RadixAccordionItem"
 
@@ -538,7 +538,7 @@ class AccordionItem(AccordionComponent):
 class AccordionHeader(AccordionComponent):
     """An accordion component."""
 
-    tag = "Header"
+    tag: str = "Header"
 
     alias = "RadixAccordionHeader"
 
@@ -567,7 +567,7 @@ class AccordionHeader(AccordionComponent):
 class AccordionTrigger(AccordionComponent):
     """An accordion component."""
 
-    tag = "Trigger"
+    tag: str = "Trigger"
 
     alias = "RadixAccordionTrigger"
 
@@ -618,7 +618,7 @@ class AccordionIcon(Icon):
 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 96411c21a..56c97ee5b 100644
--- a/reflex/components/radix/primitives/drawer.py
+++ b/reflex/components/radix/primitives/drawer.py
@@ -27,7 +27,7 @@ LiteralDirectionType = Literal["top", "bottom", "left", "right"]
 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 @@ class DrawerRoot(DrawerComponent):
 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 @@ class DrawerContent(DrawerComponent):
 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 @@ class DrawerOverlay(DrawerComponent):
 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 @@ class DrawerTitle(DrawerComponent):
 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 7ff63bc81..8361c6646 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 @@ class FormRoot(FormComponent):
 class FormField(FormComponent):
     """A form field component."""
 
-    tag = "Field"
+    tag: str = "Field"
 
     alias = "RadixFormField"
 
@@ -188,7 +188,7 @@ class FormField(FormComponent):
 class FormLabel(FormComponent):
     """A form label component."""
 
-    tag = "Label"
+    tag: str = "Label"
 
     alias = "RadixFormLabel"
 
@@ -204,7 +204,7 @@ class FormLabel(FormComponent):
 class FormControl(FormComponent):
     """A form control component."""
 
-    tag = "Control"
+    tag: str = "Control"
 
     alias = "RadixFormControl"
 
@@ -252,7 +252,7 @@ LiteralMatcher = Literal[
 class FormMessage(FormComponent):
     """A form message component."""
 
-    tag = "Message"
+    tag: str = "Message"
 
     alias = "RadixFormMessage"
 
@@ -277,14 +277,14 @@ class FormMessage(FormComponent):
 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 827e31304..1fcb8cb2c 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 @@ class ProgressRoot(ProgressComponent):
 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 185aa0d38..ac70790e0 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 @@ class SliderRoot(SliderComponent):
 class SliderTrack(SliderComponent):
     """A Slider Track component."""
 
-    tag = "Track"
+    tag: str = "Track"
     alias = "RadixSliderTrack"
 
     def _apply_theme(self, theme: Component):
@@ -103,7 +103,7 @@ class SliderTrack(SliderComponent):
 class SliderRange(SliderComponent):
     """A SliderRange component."""
 
-    tag = "Range"
+    tag: str = "Range"
     alias = "RadixSliderRange"
 
     def _apply_theme(self, theme: Component):
@@ -123,7 +123,7 @@ class SliderRange(SliderComponent):
 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 502316a21..4157b47d0 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 f257ae006..3fee4dec9 100644
--- a/reflex/components/radix/themes/components/alert_dialog.py
+++ b/reflex/components/radix/themes/components/alert_dialog.py
@@ -14,7 +14,7 @@ LiteralContentSize = Literal["1", "2", "3", "4"]
 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 @@ class AlertDialogRoot(RadixThemesComponent):
 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 1c8b000a1..5b2e94279 100644
--- a/reflex/components/radix/themes/components/aspect_ratio.py
+++ b/reflex/components/radix/themes/components/aspect_ratio.py
@@ -9,7 +9,7 @@ from ..base import RadixThemesComponent
 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 41eb58a1a..29d0a9875 100644
--- a/reflex/components/radix/themes/components/avatar.py
+++ b/reflex/components/radix/themes/components/avatar.py
@@ -15,7 +15,7 @@ LiteralSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
 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 2bdb5d18c..1b68c370b 100644
--- a/reflex/components/radix/themes/components/badge.py
+++ b/reflex/components/radix/themes/components/badge.py
@@ -14,7 +14,7 @@ from ..base import (
 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 2ed920ffb..3e8a380fa 100644
--- a/reflex/components/radix/themes/components/button.py
+++ b/reflex/components/radix/themes/components/button.py
@@ -17,7 +17,7 @@ LiteralButtonSize = Literal["1", "2", "3", "4"]
 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 b3eb71e31..094b947d5 100644
--- a/reflex/components/radix/themes/components/callout.py
+++ b/reflex/components/radix/themes/components/callout.py
@@ -18,7 +18,7 @@ CalloutVariant = Literal["soft", "surface", "outline"]
 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 0d70baaab..1dff04f9f 100644
--- a/reflex/components/radix/themes/components/card.py
+++ b/reflex/components/radix/themes/components/card.py
@@ -12,7 +12,7 @@ from ..base import (
 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 7dbd05882..c080b1f72 100644
--- a/reflex/components/radix/themes/components/checkbox.py
+++ b/reflex/components/radix/themes/components/checkbox.py
@@ -20,7 +20,7 @@ LiteralCheckboxVariant = Literal["classic", "surface", "soft"]
 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 @@ class Checkbox(RadixThemesComponent):
 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 c1719c319..c4e6ac45d 100644
--- a/reflex/components/radix/themes/components/context_menu.py
+++ b/reflex/components/radix/themes/components/context_menu.py
@@ -14,7 +14,7 @@ from ..base import (
 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 @@ class ContextMenuRoot(RadixThemesComponent):
 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 @@ class ContextMenuContent(RadixThemesComponent):
 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 @@ class ContextMenuSubContent(RadixThemesComponent):
 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 5a664758f..24e0022d7 100644
--- a/reflex/components/radix/themes/components/dialog.py
+++ b/reflex/components/radix/themes/components/dialog.py
@@ -14,7 +14,7 @@ from ..base import (
 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 @@ class DialogRoot(RadixThemesComponent):
 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 @@ class DialogContent(el.Div, RadixThemesComponent):
 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 54d8fb6d0..c004f053b 100644
--- a/reflex/components/radix/themes/components/dropdown_menu.py
+++ b/reflex/components/radix/themes/components/dropdown_menu.py
@@ -30,7 +30,7 @@ LiteralStickyType = Literal[
 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 @@ class DropdownMenuRoot(RadixThemesComponent):
 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 @@ class DropdownMenuContent(RadixThemesComponent):
 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 @@ class DropdownMenuSub(RadixThemesComponent):
 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 @@ class DropdownMenuSubContent(RadixThemesComponent):
 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 @@ class DropdownMenuItem(RadixThemesComponent):
 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 94ed6fd62..560f4c056 100644
--- a/reflex/components/radix/themes/components/hover_card.py
+++ b/reflex/components/radix/themes/components/hover_card.py
@@ -14,7 +14,7 @@ from ..base import (
 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 @@ class HoverCardRoot(RadixThemesComponent):
 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 d7a6a7402..412cb89e1 100644
--- a/reflex/components/radix/themes/components/icon_button.py
+++ b/reflex/components/radix/themes/components/icon_button.py
@@ -21,7 +21,7 @@ LiteralButtonSize = Literal["1", "2", "3", "4"]
 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 59f22d71e..9997ccf76 100644
--- a/reflex/components/radix/themes/components/inset.py
+++ b/reflex/components/radix/themes/components/inset.py
@@ -14,7 +14,7 @@ LiteralButtonSize = Literal["1", "2", "3", "4"]
 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 cd5c048c8..4706a63f9 100644
--- a/reflex/components/radix/themes/components/popover.py
+++ b/reflex/components/radix/themes/components/popover.py
@@ -14,7 +14,7 @@ from ..base import (
 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 @@ class PopoverRoot(RadixThemesComponent):
 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 @@ class PopoverContent(el.Div, RadixThemesComponent):
 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 1f4175331..bfa66e6a2 100644
--- a/reflex/components/radix/themes/components/radio_group.py
+++ b/reflex/components/radix/themes/components/radio_group.py
@@ -20,7 +20,7 @@ LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
 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 @@ class RadioGroupRoot(RadixThemesComponent):
 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 35831b7e2..46d7c12c0 100644
--- a/reflex/components/radix/themes/components/scroll_area.py
+++ b/reflex/components/radix/themes/components/scroll_area.py
@@ -11,7 +11,7 @@ from ..base import (
 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 b5c8b8b28..c3502032c 100644
--- a/reflex/components/radix/themes/components/select.py
+++ b/reflex/components/radix/themes/components/select.py
@@ -16,7 +16,7 @@ from ..base import (
 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 @@ class SelectRoot(RadixThemesComponent):
 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 @@ class SelectContent(RadixThemesComponent):
 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 567d284c6..2cd93f1c9 100644
--- a/reflex/components/radix/themes/components/separator.py
+++ b/reflex/components/radix/themes/components/separator.py
@@ -14,7 +14,7 @@ LiteralSeperatorSize = Literal["1", "2", "3", "4"]
 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 9fb32b706..5ffa0dbd1 100644
--- a/reflex/components/radix/themes/components/slider.py
+++ b/reflex/components/radix/themes/components/slider.py
@@ -14,7 +14,7 @@ from ..base import (
 class Slider(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 a83cf3ec4..3cc881ade 100644
--- a/reflex/components/radix/themes/components/switch.py
+++ b/reflex/components/radix/themes/components/switch.py
@@ -15,7 +15,7 @@ LiteralSwitchSize = Literal["1", "2", "3"]
 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 1f5ee4775..7f65242ad 100644
--- a/reflex/components/radix/themes/components/table.py
+++ b/reflex/components/radix/themes/components/table.py
@@ -13,7 +13,7 @@ from ..base import (
 class TableRoot(el.Table, 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 a60f04f11..92bc892e8 100644
--- a/reflex/components/radix/themes/components/tabs.py
+++ b/reflex/components/radix/themes/components/tabs.py
@@ -13,7 +13,7 @@ from ..base import (
 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 @@ class TabsRoot(RadixThemesComponent):
 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 a21f0125f..4f531c201 100644
--- a/reflex/components/radix/themes/components/text_area.py
+++ b/reflex/components/radix/themes/components/text_area.py
@@ -18,7 +18,7 @@ LiteralTextAreaSize = Literal["1", "2", "3"]
 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 84810ac7f..4a56c2ab9 100644
--- a/reflex/components/radix/themes/components/text_field.py
+++ b/reflex/components/radix/themes/components/text_field.py
@@ -20,7 +20,7 @@ LiteralTextFieldVariant = Literal["classic", "surface", "soft"]
 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 @@ class TextFieldInput(el.Input, TextFieldRoot):
 class TextFieldSlot(RadixThemesComponent):
     """Contains icons or buttons associated with an Input."""
 
-    tag = "TextField.Slot"
+    tag: str = "TextField.Slot"
 
     # Override theme color for text field slot
     color_scheme: Optional[Var[LiteralAccentColor]] = None
diff --git a/reflex/components/radix/themes/components/tooltip.py b/reflex/components/radix/themes/components/tooltip.py
index 9778b34a8..51c3c6d17 100644
--- a/reflex/components/radix/themes/components/tooltip.py
+++ b/reflex/components/radix/themes/components/tooltip.py
@@ -33,7 +33,7 @@ LiteralStickyType = Literal[
 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 b9bb99107..7f8014def 100644
--- a/reflex/components/radix/themes/layout/box.py
+++ b/reflex/components/radix/themes/layout/box.py
@@ -9,4 +9,4 @@ from ..base import RadixThemesComponent
 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 0b1bff0c5..7ee422fa1 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 fe2dba4de..201e3f564 100644
--- a/reflex/components/radix/themes/layout/flex.py
+++ b/reflex/components/radix/themes/layout/flex.py
@@ -20,7 +20,7 @@ LiteralFlexWrap = Literal["nowrap", "wrap", "wrap-reverse"]
 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 ea1653d02..45c717fb7 100644
--- a/reflex/components/radix/themes/layout/grid.py
+++ b/reflex/components/radix/themes/layout/grid.py
@@ -19,7 +19,7 @@ LiteralGridFlow = Literal["row", "column", "dense", "row-dense", "column-dense"]
 class Grid(el.Div, RadixThemesComponent):
     """Component for creating grid layouts."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Optional[Var[bool]] = None
diff --git a/reflex/components/radix/themes/layout/section.py b/reflex/components/radix/themes/layout/section.py
index faf179aa4..41bc25a26 100644
--- a/reflex/components/radix/themes/layout/section.py
+++ b/reflex/components/radix/themes/layout/section.py
@@ -14,7 +14,7 @@ LiteralSectionSize = Literal["1", "2", "3"]
 class Section(el.Section, 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 0e5da9d92..88b088601 100644
--- a/reflex/components/radix/themes/typography/blockquote.py
+++ b/reflex/components/radix/themes/typography/blockquote.py
@@ -22,7 +22,7 @@ from .base import (
 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 c5937a530..2930cba75 100644
--- a/reflex/components/radix/themes/typography/code.py
+++ b/reflex/components/radix/themes/typography/code.py
@@ -23,7 +23,7 @@ from .base import (
 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 d20bc22c8..7cd09e92e 100644
--- a/reflex/components/radix/themes/typography/heading.py
+++ b/reflex/components/radix/themes/typography/heading.py
@@ -24,7 +24,7 @@ from .base import (
 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 c358e4582..0235e4fcc 100644
--- a/reflex/components/radix/themes/typography/link.py
+++ b/reflex/components/radix/themes/typography/link.py
@@ -31,7 +31,7 @@ next_link = NextLink.create()
 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 1706c2dff..d7cd1c8d6 100644
--- a/reflex/components/radix/themes/typography/text.py
+++ b/reflex/components/radix/themes/typography/text.py
@@ -46,7 +46,7 @@ LiteralType = Literal[
 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 516498d0d..13beb8b5b 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 1150c90f8..e7bf110a1 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -87,7 +87,7 @@ class Axis(Recharts):
 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 @@ class Cartesian(Recharts):
 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 @@ class ReferenceDot(Reference):
 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 6640391ad..fcb9b689c 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -119,7 +119,7 @@ class ChartBase(RechartsCharts):
 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 @@ class PieChart(ChartBase):
 class RadarChart(ChartBase):
     """A Radar chart component in Recharts."""
 
-    tag = "RadarChart"
+    tag: str = "RadarChart"
 
     alias = "RechartsRadarChart"
 
@@ -327,7 +327,7 @@ class RadarChart(ChartBase):
 class RadialBarChart(ChartBase):
     """A RadialBar chart component in Recharts."""
 
-    tag = "RadialBarChart"
+    tag: str = "RadialBarChart"
 
     alias = "RechartsRadialBarChart"
 
@@ -385,7 +385,7 @@ class RadialBarChart(ChartBase):
 class ScatterChart(ChartBase):
     """A Scatter chart component in Recharts."""
 
-    tag = "ScatterChart"
+    tag: str = "ScatterChart"
 
     alias = "RechartsScatterChart"
 
@@ -423,7 +423,7 @@ class ScatterChart(ChartBase):
 class FunnelChart(RechartsCharts):
     """A Funnel chart component in Recharts."""
 
-    tag = "FunnelChart"
+    tag: str = "FunnelChart"
 
     alias = "RechartsFunnelChart"
 
@@ -474,7 +474,7 @@ class FunnelChart(RechartsCharts):
 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 70a17cdf0..19c7b5749 100644
--- a/reflex/components/recharts/general.py
+++ b/reflex/components/recharts/general.py
@@ -20,7 +20,7 @@ from .recharts import (
 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 @@ class Legend(Recharts):
 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 ea3d46f73..b47dc5d7f 100644
--- a/reflex/components/recharts/polar.py
+++ b/reflex/components/recharts/polar.py
@@ -18,7 +18,7 @@ from .recharts import (
 class Pie(Recharts):
     """A Pie chart component in Recharts."""
 
-    tag = "Pie"
+    tag: str = "Pie"
 
     alias = "RechartsPie"
 
@@ -92,7 +92,7 @@ class Pie(Recharts):
 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 @@ class RadialBar(Recharts):
 class PolarAngleAxis(Recharts):
     """A PolarAngleAxis component in Recharts."""
 
-    tag = "PolarAngleAxis"
+    tag: str = "PolarAngleAxis"
 
     alias = "RechartsPolarAngleAxis"
 
@@ -236,7 +236,7 @@ class PolarAngleAxis(Recharts):
 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 2b7198557..dd7f9306b 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 4918f37c4..eef2d1dc6 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 test_component_event_trigger_arbitrary_args():
 
     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 @@ def test_rename_props():
         _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 @@ def test_deprecated_props(capsys):
     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 0da6c11f9..d88a82f1f 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()}