diff --git a/docs/components_page/__init__.py b/docs/components_page/__init__.py
index 82b6d16b8..f36fb590e 100644
--- a/docs/components_page/__init__.py
+++ b/docs/components_page/__init__.py
@@ -88,6 +88,8 @@ def _get_label(slug):
         return "InputGroup"
     if slug == "list_group":
         return "ListGroup"
+    if slug == "index":
+        return "Components"
     return slug.capitalize()
 
 
@@ -110,7 +112,7 @@ def register_apps():
         "jumbotron": {"markdown_path": COMPONENTS / "jumbotron.md"},
         "layout": {"markdown_path": COMPONENTS / "layout.md"},
         "list_group": {"markdown_path": COMPONENTS / "list_group.md"},
-        "main": {"markdown_path": COMPONENTS / "main.md"},
+        "index": {"markdown_path": COMPONENTS / "index.md"},
         "modal": {
             "markdown_path": COMPONENTS / "modal.md",
             "extra_env_vars": {"LOREM": LOREM},
@@ -163,7 +165,7 @@ def register_apps():
                     "label": _get_label(slug),
                 }
                 for slug in component_bodies
-                if _get_label(slug) != "Main"
+                if slug != "index"
             ],
         },
     ]
@@ -173,9 +175,14 @@ def register_apps():
     template = env.from_string(INDEX_STRING_TEMPLATE)
 
     for slug, kwargs in component_bodies.items():
+        requests_pathname_prefix = (
+            f"/docs/components/{slug}/"
+            if slug != "index"
+            else "/docs/components/"
+        )
         app = dash.Dash(
             external_stylesheets=["/static/loading.css"],
-            requests_pathname_prefix=f"/docs/components/{slug}/",
+            requests_pathname_prefix=requests_pathname_prefix,
             suppress_callback_exceptions=True,
             serve_locally=SERVE_LOCALLY,
             index_string=template.render(
@@ -197,6 +204,9 @@ def register_apps():
             )
         else:
             app.layout = parse(app, **kwargs)
-        routes[f"/docs/components/{slug}"] = app
+        if slug == "index":
+            routes["/docs/components"] = app
+        else:
+            routes[f"/docs/components/{slug}"] = app
 
     return routes
diff --git a/docs/components_page/components/index.md b/docs/components_page/components/index.md
new file mode 100644
index 000000000..2a4a3c90b
--- /dev/null
+++ b/docs/components_page/components/index.md
@@ -0,0 +1,21 @@
+---
+title: Components
+lead: Usage examples for all components in dash-bootstrap-components
+---
+
+The component documentation for _dash-bootstrap-components_ contains many snippets showing example usage, as well as api documentation for each component explaining the different props that you can set.
+
+Example snippets for the different components will look something like this, with tabs to switch between R or Julia versions of the examples.
+
+{{example:components/index/simple.py:layout}}
+
+## Adding the snippets to your app
+
+Note that the contents of each snippet **do not by themselves constitute a working app**. We generally omit boilerplate code such as standard imports and instantiation of the app. In the above example you would additionally need to:
+
+1. import Dash
+2. create a Dash app instance (making sure to link a Bootstrap stylesheet, see the [themes documentation](/docs/themes/) for details)
+3. assign `layout` to the app layout
+4. start the Dash server.
+
+If any of the above steps are unclear, please take a look at the [Quickstart](/docs/quickstart/) instructions for creating a basic app, the [examples](https://github.com/facultyai/dash-bootstrap-components/tree/main/examples) in our GitHub repository, or refer to the official Dash documentation for [Python](https://dash.plotly.com/), [R](https://dashr.plotly.com/), or [Julia](https://dash-julia.plotly.com/).
diff --git a/docs/components_page/components/index/simple.R b/docs/components_page/components/index/simple.R
new file mode 100644
index 000000000..d19304adf
--- /dev/null
+++ b/docs/components_page/components/index/simple.R
@@ -0,0 +1,10 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+layout <- dbcAlert(
+  paste(
+    "This is an example of a component being used in the wild.",
+    "Below me, you can find the code used to create me."
+  ),
+  color = "info"
+)
diff --git a/docs/components_page/components/index/simple.jl b/docs/components_page/components/index/simple.jl
new file mode 100644
index 000000000..cce1ef80d
--- /dev/null
+++ b/docs/components_page/components/index/simple.jl
@@ -0,0 +1,7 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+layout = dbc_alert(
+    "This is an example of a component being used in the wild. " *
+    "Below me, you can find the code used to create me.",
+    color = "info",
+)
diff --git a/docs/components_page/components/index/simple.py b/docs/components_page/components/index/simple.py
new file mode 100644
index 000000000..ba872b27c
--- /dev/null
+++ b/docs/components_page/components/index/simple.py
@@ -0,0 +1,7 @@
+import dash_bootstrap_components as dbc
+
+layout = dbc.Alert(
+    "This is an example of a component being used in the wild. "
+    "Below me, you can find the code used to create me.",
+    color="info",
+)
diff --git a/docs/components_page/components/main.md b/docs/components_page/components/main.md
deleted file mode 100644
index f9f980152..000000000
--- a/docs/components_page/components/main.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Components
-lead: Understand how to use the component pages
----
-
-Each component page includes examples of basic usage, as well as demos where interesting or useful features are brought to the fore.
-
-The first item on the page will always demonstrate a simple use case. If a callback is required for basic functionality, it will be included here too. If not, an example on how to use callbacks (if appropriate to the component) is included below.
-
-{{example:components/main/simple.py:layout}}
-
-
-Each example demonstrates the component in use within an app at the top, then below, the corresponding python code. If it's available, code to create the same component in R or Julia can be seen by clicking the appropriate tabs.
-
-It's important to note that this example is not a fully functioning app, and will only work within a dash app. *You will not be able to run the example as is*.
-
-If you are unsure how to get the examples to work, please take a look at the [Quickstart](/docs/quickstart/) instructions for creating a basic app.
diff --git a/docs/components_page/components/main/simple.R b/docs/components_page/components/main/simple.R
deleted file mode 100644
index 9d6ce3f66..000000000
--- a/docs/components_page/components/main/simple.R
+++ /dev/null
@@ -1,18 +0,0 @@
-library(dashBootstrapComponents)
-library(dashHtmlComponents)
-
-layout <- htmlDiv(
-  list(
-    dbcCard(
-      dbcCardBody(
-        paste(
-          "This is an example of a component being used in the wild.",
-          "Below me, you can find the code used to create me.",
-          sep = "\n"
-        )
-      ),
-      class_name = "mb-3",
-    ),
-    dbcButton("I am a button!", color = "primary")
-  )
-)
diff --git a/docs/components_page/components/main/simple.jl b/docs/components_page/components/main/simple.jl
deleted file mode 100644
index 81ac4e1a0..000000000
--- a/docs/components_page/components/main/simple.jl
+++ /dev/null
@@ -1,12 +0,0 @@
-using DashBootstrapComponents, DashHtmlComponents
-
-layout = html_div([
-    dbc_card(
-        dbc_cardbody(
-            "This is an example of a component being used in the wild.\n" *
-            "Below me, you can find the code used to create me.",
-        ),
-        class_name = "mb-3",
-    ),
-    dbc_button("I am a button!", color = "primary"),
-],)
diff --git a/docs/components_page/components/main/simple.py b/docs/components_page/components/main/simple.py
deleted file mode 100644
index d8e11e90e..000000000
--- a/docs/components_page/components/main/simple.py
+++ /dev/null
@@ -1,15 +0,0 @@
-import dash_bootstrap_components as dbc
-import dash_html_components as html
-
-layout = html.Div(
-    [
-        dbc.Card(
-            dbc.CardBody(
-                "This is an example of a component being used in the wild.\n"
-                "Below me, you can find the code used to create me."
-            ),
-            class_name="mb-3",
-        ),
-        dbc.Button("I am a button!", color="primary"),
-    ],
-)
diff --git a/docs/server.py b/docs/server.py
index df7328a33..2a5875e1b 100644
--- a/docs/server.py
+++ b/docs/server.py
@@ -92,10 +92,6 @@ def faq():
         except TemplateNotFound:
             abort(404)
 
-    @server.route("/docs/components/")
-    def components_index():
-        return redirect("/docs/components/main", 302)
-
     @server.route("/l/components/", defaults={"slug": "main"})
     @server.route("/l/components/<slug>/")
     def components_redirect(slug):