diff --git a/.github/workflows/pre-commit.yml b/.github/workflows/pre-commit.yml
new file mode 100644
index 0000000..b6b21f1
--- /dev/null
+++ b/.github/workflows/pre-commit.yml
@@ -0,0 +1,23 @@
+name: pre-commit
+
+on:
+  pull_request:
+    branches: ["main"]
+  push:
+    branches: ["main"]
+
+jobs:
+  pre-commit:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v2
+        with:
+          python-version: "3.12"
+      - run: |
+          pip install pre-commit
+          pip install pyright
+          pre-commit run --all-files
+        env:
+          SKIP: update-pyi-files
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 0000000..cd6b6d8
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,18 @@
+fail_fast: true
+
+repos:
+
+  - repo: https://github.com/charliermarsh/ruff-pre-commit
+    rev: v0.7.0
+    hooks:
+      - id: ruff-format
+        args: [custom_components, monaco_demo]
+      - id: ruff
+        args: ["--fix", "--exit-non-zero-on-fix"]
+
+  - repo: https://github.com/codespell-project/codespell
+    rev: v2.3.0
+    hooks:
+      - id: codespell
+        args: [custom_components, "*_demo"]
+
diff --git a/custom_components/reflex_monaco/__init__.py b/custom_components/reflex_monaco/__init__.py
index 4c9213b..714985b 100644
--- a/custom_components/reflex_monaco/__init__.py
+++ b/custom_components/reflex_monaco/__init__.py
@@ -1 +1,3 @@
-from .monaco import *
\ No newline at end of file
+"""The reflex_monaco component."""
+
+from .monaco import monaco, monaco_diff
diff --git a/custom_components/reflex_monaco/monaco.py b/custom_components/reflex_monaco/monaco.py
index e6e22e0..3d87a45 100644
--- a/custom_components/reflex_monaco/monaco.py
+++ b/custom_components/reflex_monaco/monaco.py
@@ -14,7 +14,7 @@ class MonacoComponent(rx.Component):
     language: rx.Var[str]
 
     # The theme to use for the editor.
-    theme: rx.Var[str] = rx.color_mode_cond("light", "vs-dark")  # type: ignore
+    theme: rx.Var[str] = rx.color_mode_cond("light", "vs-dark")
 
     # The line to jump to in the editor.
     line: rx.Var[int] = rx.Var.create(1)
diff --git a/monaco_demo/monaco_demo/__init__.py b/monaco_demo/monaco_demo/__init__.py
index e69de29..b315ea7 100644
--- a/monaco_demo/monaco_demo/__init__.py
+++ b/monaco_demo/monaco_demo/__init__.py
@@ -0,0 +1 @@
+"""Demo package for reflex-monaco."""
diff --git a/monaco_demo/monaco_demo/monaco_demo.py b/monaco_demo/monaco_demo/monaco_demo.py
index 40a5660..1b5bbd9 100644
--- a/monaco_demo/monaco_demo/monaco_demo.py
+++ b/monaco_demo/monaco_demo/monaco_demo.py
@@ -2,9 +2,8 @@
 
 from typing import Any
 
-from reflex_monaco import monaco, monaco_diff
-
 import reflex as rx
+from reflex_monaco import monaco, monaco_diff
 
 ORIGINAL_CONTENT = """
 # Reflex Monaco Editor Demo
@@ -34,14 +33,17 @@ class FileState(rx.State):
 
     @rx.event
     def load_file_content(self):
+        """Load the file content."""
         self.modified_content = self.original_content
 
     @rx.event
     def on_change(self, value: str):
+        """Update the modified content."""
         self.modified_content = value
 
     @rx.event
     def on_view_change(self, view: str):
+        """Update the active view."""
         self.active_view = view
 
 
@@ -50,6 +52,7 @@ def on_view_change(self, view: str):
 
 
 def edit_view():
+    """The Monaco editor view."""
     return monaco(
         width=MONACO_WIDTH,
         height=MONACO_HEIGHT,
@@ -61,6 +64,7 @@ def edit_view():
 
 
 def diff_view():
+    """The Monaco diff editor view."""
     return monaco_diff(
         width=MONACO_WIDTH,
         height=MONACO_HEIGHT,
@@ -73,6 +77,7 @@ def diff_view():
 
 @rx.page(on_load=FileState.load_file_content)
 def index() -> Any:
+    """The main page."""
     return rx.vstack(
         rx.box(),
         rx.heading(
diff --git a/monaco_demo/rxconfig.py b/monaco_demo/rxconfig.py
index 8613af5..d726025 100644
--- a/monaco_demo/rxconfig.py
+++ b/monaco_demo/rxconfig.py
@@ -1,5 +1,7 @@
+"""Config file for the monaco_demo app."""
+
 import reflex as rx
 
 config = rx.Config(
     app_name="monaco_demo",
-)
\ No newline at end of file
+)
diff --git a/pyproject.toml b/pyproject.toml
index 7363cae..ced1264 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -26,4 +26,19 @@ dev = ["build", "twine"]
 
 
 [tool.setuptools.packages.find]
-where = ["custom_components"]
\ No newline at end of file
+where = ["custom_components"]
+
+
+[tool.ruff]
+target-version = "py310"
+output-format = "concise"
+lint.isort.split-on-trailing-comma = false
+lint.select = ["B", "C4", "E", "ERA", "F", "FURB", "I", "N", "PERF", "PTH", "RUF", "SIM", "T", "TRY", "W"]
+lint.ignore = ["B008", "D205", "E501", "F403", "SIM115", "RUF006", "RUF008", "RUF012", "TRY0"]
+lint.pydocstyle.convention = "google"
+include = ["custom_components/**/*.py", "ag_grid_demo/**/*.py"]
+
+[tool.ruff.lint.per-file-ignores]
+"__init__.py" = ["F401"]
+"env.py" = ["ALL"]
+"*/alembic/*" = ["ALL"]