diff --git a/Leaflet.groupedlayercontrol/example/advanced.html b/Leaflet.groupedlayercontrol/example/advanced.html
new file mode 100644
index 0000000..3297190
--- /dev/null
+++ b/Leaflet.groupedlayercontrol/example/advanced.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Advanced Example</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+  <link rel="stylesheet" href="../src/leaflet.groupedlayercontrol.css" />
+</head>
+<body>
+  <div id="map" style="width: 600px; height: 400px"></div>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+  <script src="../src/leaflet.groupedlayercontrol.js"></script>
+  <script src="exampledata.js"></script>
+  <script>
+    var map = L.map('map', {
+      center: [39.73, -104.99],
+      zoom: 10,
+      layers: [ExampleData.Basemaps.Grayscale, ExampleData.LayerGroups.cities]
+    });
+
+    // Overlay layers are grouped
+    var groupedOverlays = {
+      "Landmarks": {
+        "Cities": ExampleData.LayerGroups.cities,
+        "Restaurants": ExampleData.LayerGroups.restaurants
+      },
+      "Random": {
+        "Dogs": ExampleData.LayerGroups.dogs,
+        "Cats": ExampleData.LayerGroups.cats
+      }
+    };
+
+    var options = {
+      // Make the "Landmarks" group exclusive (use radio inputs)
+      exclusiveGroups: ["Landmarks"],
+      // Show a checkbox next to non-exclusive group labels for toggling all
+      groupCheckboxes: ["Random"]
+    };
+
+    // Use the custom grouped layer control, not "L.control.layers"
+    var layerControl = L.control.groupedLayers(ExampleData.Basemaps, groupedOverlays, options);
+    map.addControl(layerControl);
+
+    // Remove and add a layer
+    //layerControl.removeLayer(cities);
+    //layerControl.addOverlay(cities, "Cities", "New Category");
+  </script>
+</body>
+</html>
diff --git a/Leaflet.groupedlayercontrol/example/basic.html b/Leaflet.groupedlayercontrol/example/basic.html
new file mode 100644
index 0000000..f19329a
--- /dev/null
+++ b/Leaflet.groupedlayercontrol/example/basic.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Basic Example</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+  <link rel="stylesheet" href="../src/leaflet.groupedlayercontrol.css" />
+</head>
+<body>
+  <div id="map" style="width: 600px; height: 400px"></div>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+  <script src="../src/leaflet.groupedlayercontrol.js"></script>
+  <script src="exampledata.js"></script>
+  <script>
+    var map = L.map('map', {
+      center: [39.73, -104.99],
+      zoom: 10,
+      layers: [ExampleData.Basemaps.Grayscale, ExampleData.LayerGroups.cities]
+    });
+
+    // Overlay layers are grouped
+    var groupedOverlays = {
+      "Landmarks": {
+        "Cities": ExampleData.LayerGroups.cities,
+        "Restaurants": ExampleData.LayerGroups.restaurants
+      },
+      "Random": {
+        "Dogs": ExampleData.LayerGroups.dogs,
+        "Cats": ExampleData.LayerGroups.cats
+      }
+    };
+
+    // Use the custom grouped layer control, not "L.control.layers"
+    L.control.groupedLayers(ExampleData.Basemaps, groupedOverlays).addTo(map);
+  </script>
+</body>
+</html>
diff --git a/Leaflet.groupedlayercontrol/example/exampledata.js b/Leaflet.groupedlayercontrol/example/exampledata.js
new file mode 100644
index 0000000..9af334a
--- /dev/null
+++ b/Leaflet.groupedlayercontrol/example/exampledata.js
@@ -0,0 +1,40 @@
+(function() {
+
+  var basemaps = {
+    Grayscale: L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
+      maxZoom: 18,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }),
+    Streets: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    })
+  };
+
+  var groups = {
+    cities: new L.LayerGroup(),
+    restaurants: new L.LayerGroup(),
+    dogs: new L.LayerGroup(),
+    cats: new L.LayerGroup()
+  };
+
+  L.marker([39.61, -105.02]).bindPopup('Littleton, CO.').addTo(groups.cities);
+  L.marker([39.74, -104.99]).bindPopup('Denver, CO.').addTo(groups.cities);
+  L.marker([39.73, -104.8]).bindPopup('Aurora, CO.').addTo(groups.cities);
+  L.marker([39.77, -105.23]).bindPopup('Golden, CO.').addTo(groups.cities);
+
+  L.marker([39.69, -104.85]).bindPopup('A restaurant').addTo(groups.restaurants);
+  L.marker([39.69, -105.12]).bindPopup('A restaurant').addTo(groups.restaurants);
+
+  L.marker([39.79, -104.95]).bindPopup('A dog').addTo(groups.dogs);
+  L.marker([39.79, -105.22]).bindPopup('A dog').addTo(groups.dogs);
+
+  L.marker([39.59, -104.75]).bindPopup('A cat').addTo(groups.cats);
+  L.marker([39.59, -105.02]).bindPopup('A cat').addTo(groups.cats);
+
+  window.ExampleData = {
+    LayerGroups: groups,
+    Basemaps: basemaps
+  };
+
+}());
