diff --git a/reflex/components/base/document.py b/reflex/components/base/document.py
index e5500530a..727438186 100644
--- a/reflex/components/base/document.py
+++ b/reflex/components/base/document.py
@@ -8,7 +8,7 @@ from reflex.components.component import Component
 class NextDocumentLib(Component):
     """Root document components."""
 
-    library = "next/document"
+    library: str = "next/document"
 
 
 class Html(NextDocumentLib):
diff --git a/reflex/components/base/fragment.py b/reflex/components/base/fragment.py
index 22e9d797a..60357cb55 100644
--- a/reflex/components/base/fragment.py
+++ b/reflex/components/base/fragment.py
@@ -5,5 +5,5 @@ from reflex.components.component import Component
 class Fragment(Component):
     """A React fragment to return multiple components from a function without wrapping it in a container."""
 
-    library = "react"
+    library: str = "react"
     tag: str = "Fragment"
diff --git a/reflex/components/base/head.py b/reflex/components/base/head.py
index cd9a3d1b6..d63018946 100644
--- a/reflex/components/base/head.py
+++ b/reflex/components/base/head.py
@@ -6,7 +6,7 @@ from reflex.components.component import Component, MemoizationLeaf
 class NextHeadLib(Component):
     """Header components."""
 
-    library = "next/head"
+    library: str = "next/head"
 
 
 class Head(NextHeadLib, MemoizationLeaf):
diff --git a/reflex/components/base/script.py b/reflex/components/base/script.py
index f3d2425bc..77354612e 100644
--- a/reflex/components/base/script.py
+++ b/reflex/components/base/script.py
@@ -19,7 +19,7 @@ class Script(Component):
     HTML <script> tag which does not work when rendering a component.
     """
 
-    library = "next/script"
+    library: str = "next/script"
     tag: str = "Script"
     is_default: bool = True
 
diff --git a/reflex/components/chakra/base.py b/reflex/components/chakra/base.py
index fdfd6c3dd..a51aae7b7 100644
--- a/reflex/components/chakra/base.py
+++ b/reflex/components/chakra/base.py
@@ -12,7 +12,7 @@ from reflex.vars import Var
 class ChakraComponent(Component):
     """A component that wraps a Chakra component."""
 
-    library = "@chakra-ui/react@2.6.1"
+    library: str = "@chakra-ui/react@2.6.1"
     lib_dependencies: List[str] = [
         "@chakra-ui/system@2.5.7",
         "framer-motion@10.16.4",
@@ -92,7 +92,7 @@ chakra_provider = ChakraProvider.create()
 class ChakraColorModeProvider(Component):
     """Next-themes integration for chakra colorModeProvider."""
 
-    library = "/components/reflex/chakra_color_mode_provider.js"
+    library: str = "/components/reflex/chakra_color_mode_provider.js"
     tag: str = "ChakraColorModeProvider"
     is_default: bool = True
 
diff --git a/reflex/components/chakra/forms/iconbutton.py b/reflex/components/chakra/forms/iconbutton.py
index 2f5e2c6ce..857f6fb23 100644
--- a/reflex/components/chakra/forms/iconbutton.py
+++ b/reflex/components/chakra/forms/iconbutton.py
@@ -10,7 +10,7 @@ class IconButton(Text):
     """A button with an icon."""
 
     tag: str = "IconButton"
-    library = "@chakra-ui/button@2.1.0"
+    library: str = "@chakra-ui/button@2.1.0"
 
     # The type of button.
     type: Optional[Var[str]] = None
diff --git a/reflex/components/chakra/forms/multiselect.py b/reflex/components/chakra/forms/multiselect.py
index d5d0272af..1d425ab54 100644
--- a/reflex/components/chakra/forms/multiselect.py
+++ b/reflex/components/chakra/forms/multiselect.py
@@ -46,7 +46,7 @@ class Select(Component):
     Props added by chakra-react-select are marked with "[chakra]".
     """
 
-    library = "chakra-react-select@4.7.5"
+    library: str = "chakra-react-select@4.7.5"
     tag: str = "Select"
     alias = "MultiSelect"
 
diff --git a/reflex/components/chakra/media/icon.py b/reflex/components/chakra/media/icon.py
index 3a2b064c9..8dcd2974a 100644
--- a/reflex/components/chakra/media/icon.py
+++ b/reflex/components/chakra/media/icon.py
@@ -8,7 +8,7 @@ from reflex.utils import format
 class ChakraIconComponent(ChakraComponent):
     """A component that wraps a Chakra icon component."""
 
-    library = "@chakra-ui/icons@2.0.19"
+    library: str = "@chakra-ui/icons@2.0.19"
 
 
 class Icon(ChakraIconComponent):
diff --git a/reflex/components/core/client_side_routing.py b/reflex/components/core/client_side_routing.py
index 65530a880..297be2ead 100644
--- a/reflex/components/core/client_side_routing.py
+++ b/reflex/components/core/client_side_routing.py
@@ -20,7 +20,7 @@ route_not_found: Var = Var.create_safe(constants.ROUTE_NOT_FOUND)
 class ClientSideRouting(Component):
     """The client-side routing component."""
 
-    library = "/utils/client_side_routing"
+    library: str = "/utils/client_side_routing"
     tag: str = "useClientSideRouting"
 
     def _get_hooks(self) -> str:
@@ -61,7 +61,7 @@ def wait_for_client_redirect(component) -> Component:
 class Default404Page(Component):
     """The NextJS default 404 page."""
 
-    library = "next/error"
+    library: str = "next/error"
     tag: str = "Error"
     is_default: bool = True
 
diff --git a/reflex/components/core/debounce.py b/reflex/components/core/debounce.py
index 7237b9610..497f75ee4 100644
--- a/reflex/components/core/debounce.py
+++ b/reflex/components/core/debounce.py
@@ -18,7 +18,7 @@ class DebounceInput(Component):
     is experiencing high latency.
     """
 
-    library = "react-debounce-input@3.3.0"
+    library: str = "react-debounce-input@3.3.0"
     tag: str = "DebounceInput"
 
     # Minimum input characters before triggering the on_change event
diff --git a/reflex/components/core/upload.py b/reflex/components/core/upload.py
index d5f4ca206..823e76f4a 100644
--- a/reflex/components/core/upload.py
+++ b/reflex/components/core/upload.py
@@ -164,7 +164,7 @@ class UploadFilesProvider(Component):
 class Upload(MemoizationLeaf):
     """A file upload component."""
 
-    library = "react-dropzone@14.2.3"
+    library: str = "react-dropzone@14.2.3"
 
     tag: str = "ReactDropzone"
 
diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
index d0ed49395..7f106292e 100644
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@@ -348,7 +348,7 @@ LiteralCodeLanguage = Literal[
 class CodeBlock(Component):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.5.0"
+    library: str = "react-syntax-highlighter@15.5.0"
 
     tag: str = "PrismAsyncLight"
 
diff --git a/reflex/components/gridjs/datatable.py b/reflex/components/gridjs/datatable.py
index b21ddffec..09130d008 100644
--- a/reflex/components/gridjs/datatable.py
+++ b/reflex/components/gridjs/datatable.py
@@ -13,7 +13,7 @@ from reflex.vars import BaseVar, ComputedVar, Var
 class Gridjs(Component):
     """A component that wraps a nivo bar component."""
 
-    library = "gridjs-react@6.0.1"
+    library: str = "gridjs-react@6.0.1"
 
     lib_dependencies: List[str] = ["gridjs@6.0.6"]
 
diff --git a/reflex/components/lucide/icon.py b/reflex/components/lucide/icon.py
index 8ab825738..646dfb874 100644
--- a/reflex/components/lucide/icon.py
+++ b/reflex/components/lucide/icon.py
@@ -11,7 +11,7 @@ from reflex.vars import Var
 class LucideIconComponent(Component):
     """Lucide Icon Component."""
 
-    library = "lucide-react@0.314.0"
+    library: str = "lucide-react@0.314.0"
 
 
 class Icon(LucideIconComponent):
diff --git a/reflex/components/markdown/markdown.py b/reflex/components/markdown/markdown.py
index d19435ac2..f16a0535c 100644
--- a/reflex/components/markdown/markdown.py
+++ b/reflex/components/markdown/markdown.py
@@ -75,7 +75,7 @@ def get_base_component_map() -> dict[str, Callable]:
 class Markdown(Component):
     """A markdown component."""
 
-    library = "react-markdown@8.0.7"
+    library: str = "react-markdown@8.0.7"
 
     tag: str = "ReactMarkdown"
 
diff --git a/reflex/components/next/image.py b/reflex/components/next/image.py
index 521f0988e..e8c6aca33 100644
--- a/reflex/components/next/image.py
+++ b/reflex/components/next/image.py
@@ -11,7 +11,7 @@ class Image(NextComponent):
     """Display an image."""
 
     tag: str = "Image"
-    library = "next/image"
+    library: str = "next/image"
     is_default: bool = True
 
     # This can be either an absolute external URL, or an internal path
diff --git a/reflex/components/next/link.py b/reflex/components/next/link.py
index fb8b46f24..fdc60b204 100644
--- a/reflex/components/next/link.py
+++ b/reflex/components/next/link.py
@@ -9,7 +9,7 @@ from reflex.vars import Var
 class NextLink(Component):
     """Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>."""
 
-    library = "next/link"
+    library: str = "next/link"
 
     tag: str = "NextLink"
 
diff --git a/reflex/components/next/video.py b/reflex/components/next/video.py
index 6565f2f45..79ce3c34e 100644
--- a/reflex/components/next/video.py
+++ b/reflex/components/next/video.py
@@ -11,7 +11,7 @@ class Video(NextComponent):
     """A video component from NextJS."""
 
     tag: str = "Video"
-    library = "next-video"
+    library: str = "next-video"
     is_default: bool = True
     # the URL
     src: Optional[Var[str]] = None
diff --git a/reflex/components/plotly/plotly.py b/reflex/components/plotly/plotly.py
index 74ee11a90..bf3775ba7 100644
--- a/reflex/components/plotly/plotly.py
+++ b/reflex/components/plotly/plotly.py
@@ -13,7 +13,7 @@ except ImportError:
 class PlotlyLib(NoSSRComponent):
     """A component that wraps a plotly lib."""
 
-    library = "react-plotly.js@2.6.0"
+    library: str = "react-plotly.js@2.6.0"
 
     lib_dependencies: List[str] = ["plotly.js@2.22.0"]
 
diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
index 5d6690a93..897e076d7 100644
--- a/reflex/components/radix/primitives/accordion.py
+++ b/reflex/components/radix/primitives/accordion.py
@@ -299,7 +299,7 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) ->
 class AccordionComponent(RadixPrimitiveComponent):
     """Base class for all @radix-ui/accordion components."""
 
-    library = "@radix-ui/react-accordion@^1.1.2"
+    library: str = "@radix-ui/react-accordion@^1.1.2"
 
 
 class AccordionRoot(AccordionComponent):
diff --git a/reflex/components/radix/primitives/drawer.py b/reflex/components/radix/primitives/drawer.py
index 56c97ee5b..5fcde30cd 100644
--- a/reflex/components/radix/primitives/drawer.py
+++ b/reflex/components/radix/primitives/drawer.py
@@ -16,7 +16,7 @@ from reflex.vars import Var
 class DrawerComponent(RadixPrimitiveComponent):
     """A Drawer component."""
 
-    library = "vaul"
+    library: str = "vaul"
 
     lib_dependencies: List[str] = ["@radix-ui/react-dialog@^1.0.5"]
 
diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py
index 8361c6646..822653e04 100644
--- a/reflex/components/radix/primitives/form.py
+++ b/reflex/components/radix/primitives/form.py
@@ -39,7 +39,7 @@ HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
 class FormComponent(RadixPrimitiveComponentWithClassName):
     """Base class for all @radix-ui/react-form components."""
 
-    library = "@radix-ui/react-form@^0.0.3"
+    library: str = "@radix-ui/react-form@^0.0.3"
 
 
 class FormRoot(FormComponent):
diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py
index 1fcb8cb2c..f290c5ca1 100644
--- a/reflex/components/radix/primitives/progress.py
+++ b/reflex/components/radix/primitives/progress.py
@@ -15,7 +15,7 @@ from reflex.vars import Var
 class ProgressComponent(RadixPrimitiveComponentWithClassName):
     """A Progress component."""
 
-    library = "@radix-ui/react-progress@^1.0.3"
+    library: str = "@radix-ui/react-progress@^1.0.3"
 
 
 class ProgressRoot(ProgressComponent):
diff --git a/reflex/components/radix/primitives/slider.py b/reflex/components/radix/primitives/slider.py
index ac70790e0..dfe360b6c 100644
--- a/reflex/components/radix/primitives/slider.py
+++ b/reflex/components/radix/primitives/slider.py
@@ -15,7 +15,7 @@ LiteralSliderDir = Literal["ltr", "rtl"]
 class SliderComponent(RadixPrimitiveComponentWithClassName):
     """Base class for all @radix-ui/react-slider components."""
 
-    library = "@radix-ui/react-slider@^1.1.2"
+    library: str = "@radix-ui/react-slider@^1.1.2"
 
 
 class SliderRoot(SliderComponent):
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index ca5602bb9..d6d82bd1e 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -75,7 +75,7 @@ class CommonMarginProps(Component):
 class RadixThemesComponent(Component):
     """Base class for all @radix-ui/themes components."""
 
-    library = "@radix-ui/themes@^2.0.0"
+    library: str = "@radix-ui/themes@^2.0.0"
 
     # "Fake" prop color_scheme is used to avoid shadowing CSS prop "color".
     _rename_props: Dict[str, str] = {"colorScheme": "color"}
@@ -216,7 +216,7 @@ class ThemePanel(RadixThemesComponent):
 class RadixThemesColorModeProvider(Component):
     """Next-themes integration for radix themes components."""
 
-    library = "/components/reflex/radix_themes_color_mode_provider.js"
+    library: str = "/components/reflex/radix_themes_color_mode_provider.js"
     tag: str = "RadixThemesColorModeProvider"
     is_default: bool = True
 
diff --git a/reflex/components/react_player/react_player.py b/reflex/components/react_player/react_player.py
index 773569504..e8b42f3f1 100644
--- a/reflex/components/react_player/react_player.py
+++ b/reflex/components/react_player/react_player.py
@@ -12,7 +12,7 @@ class ReactPlayer(NoSSRComponent):
     reference: https://github.com/cookpete/react-player.
     """
 
-    library = "react-player@2.12.0"
+    library: str = "react-player@2.12.0"
 
     tag: str = "ReactPlayer"
 
diff --git a/reflex/components/recharts/recharts.py b/reflex/components/recharts/recharts.py
index 28c8a5c8a..8de084883 100644
--- a/reflex/components/recharts/recharts.py
+++ b/reflex/components/recharts/recharts.py
@@ -7,13 +7,13 @@ from reflex.components.component import Component, MemoizationLeaf, NoSSRCompone
 class Recharts(Component):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@2.8.0"
+    library: str = "recharts@2.8.0"
 
 
 class RechartsCharts(NoSSRComponent, MemoizationLeaf):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@2.8.0"
+    library: str = "recharts@2.8.0"
 
 
 LiteralAnimationEasing = Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"]
diff --git a/reflex/components/suneditor/editor.py b/reflex/components/suneditor/editor.py
index 02815fea3..5001accca 100644
--- a/reflex/components/suneditor/editor.py
+++ b/reflex/components/suneditor/editor.py
@@ -73,7 +73,7 @@ class Editor(NoSSRComponent):
     refer to the library docs for a complete list.
     """
 
-    library = "suneditor-react"
+    library: str = "suneditor-react"
 
     tag: str = "SunEditor"
 
diff --git a/tests/components/test_component.py b/tests/components/test_component.py
index eef2d1dc6..4dc55bc8b 100644
--- a/tests/components/test_component.py
+++ b/tests/components/test_component.py
@@ -437,7 +437,7 @@ def test_component_event_trigger_arbitrary_args():
         return [_e.target.value, bravo["nested"], charlie.custom + 42]
 
     class C1(Component):
-        library = "/local"
+        library: str = "/local"
         tag: str = "C1"
 
         def get_event_triggers(self) -> Dict[str, Any]: