diff --git a/dequal/alts.ts b/dequal/alts.ts
new file mode 100644
index 0000000..8c6c054
--- /dev/null
+++ b/dequal/alts.ts
@@ -0,0 +1,78 @@
+// 227B – 128k op/s
+export function v227(foo, bar) {
+	var keys, ctor;
+	return foo === bar || (
+		foo && bar && (ctor=foo.constructor) === bar.constructor ?
+			ctor === RegExp ? foo.toString() == bar.toString()
+			: ctor === Date ? foo.getTime() == bar.getTime()
+			: ctor === Array ?
+				foo.length === bar.length && foo.every(function (val, idx) {
+					return v227(val, bar[idx]);
+				})
+			: ctor === Object
+				&& (keys=Object.keys(foo)).length === Object.keys(bar).length
+				&& keys.every(function (k) {
+					return k in bar && v227(foo[k], bar[k]);
+				})
+		: (foo !== foo && bar !== bar)
+	);
+}
+
+// 255B – 155k op/s
+export function v255(foo, bar) {
+	var ctor, len, k;
+	if (foo === bar) return true;
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+		if (ctor === Array && (len=foo.length) === bar.length) {
+			while (len-- > 0 && v255(foo[len], bar[len]));
+			return len === -1;
+		}
+		if (ctor === Object) {
+			if (Object.keys(foo).length !== Object.keys(bar).length) return false;
+			for (k in foo) {
+				if (!(k in bar) || !v255(foo[k], bar[k])) return false;
+			}
+			return true;
+		}
+	}
+	return foo !== foo && bar !== bar;
+}
+
+// 246B – 157k op/s
+export function v246(foo, bar) {
+	var ctor, i;
+	if (foo === bar) return true;
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+		if (ctor === Array) {
+			if (foo.length !== bar.length) return false;
+			for (i=0; i < foo.length; i++) if (!v246(foo[i], bar[i])) return false;
+			return true
+		}
+		if (ctor === Object) {
+			if (Object.keys(foo).length !== Object.keys(bar).length) return false;
+			for (i in foo) if (!(i in bar) || !v246(foo[i], bar[i])) return false;
+			return true;
+		}
+	}
+	return foo !== foo && bar !== bar;
+}
+
+// 225B - 97k op/s
+export function v225(foo, bar) {
+	var ctor, keys, len;
+	if (foo === bar) return true;
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+		if (typeof foo === 'object') {
+			if (Object.keys(foo).length !== Object.keys(bar).length) return false;
+			for (len in foo) if (!(len in bar) || !v225(foo[len], bar[len])) return false;
+			return true;
+		}
+	}
+	return foo !== foo && bar !== bar;
+}
diff --git a/dequal/index.ts b/dequal/index.ts
new file mode 100644
index 0000000..d0b1e2d
--- /dev/null
+++ b/dequal/index.ts
@@ -0,0 +1,84 @@
+var has = Object.prototype.hasOwnProperty;
+
+function find(iter, tar, key) {
+	for (key of iter.keys()) {
+		if (dequal(key, tar)) return key;
+	}
+}
+
+export function dequal(foo, bar) {
+	var ctor, len, tmp;
+	if (foo === bar) return true;
+
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+
+		if (ctor === Array) {
+			if ((len=foo.length) === bar.length) {
+				while (len-- && dequal(foo[len], bar[len]));
+			}
+			return len === -1;
+		}
+
+		if (ctor === Set) {
+			if (foo.size !== bar.size) {
+				return false;
+			}
+			for (len of foo) {
+				tmp = len;
+				if (tmp && typeof tmp === 'object') {
+					tmp = find(bar, tmp);
+					if (!tmp) return false;
+				}
+				if (!bar.has(tmp)) return false;
+			}
+			return true;
+		}
+
+		if (ctor === Map) {
+			if (foo.size !== bar.size) {
+				return false;
+			}
+			for (len of foo) {
+				tmp = len[0];
+				if (tmp && typeof tmp === 'object') {
+					tmp = find(bar, tmp);
+					if (!tmp) return false;
+				}
+				if (!dequal(len[1], bar.get(tmp))) {
+					return false;
+				}
+			}
+			return true;
+		}
+
+		if (ctor === ArrayBuffer) {
+			foo = new Uint8Array(foo);
+			bar = new Uint8Array(bar);
+		} else if (ctor === DataView) {
+			if ((len=foo.byteLength) === bar.byteLength) {
+				while (len-- && foo.getInt8(len) === bar.getInt8(len));
+			}
+			return len === -1;
+		}
+
+		if (ArrayBuffer.isView(foo)) {
+			if ((len=foo.byteLength) === bar.byteLength) {
+				while (len-- && foo[len] === bar[len]);
+			}
+			return len === -1;
+		}
+
+		if (!ctor || typeof foo === 'object') {
+			len = 0;
+			for (ctor in foo) {
+				if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
+				if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
+			}
+			return Object.keys(bar).length === len;
+		}
+	}
+
+	return foo !== foo && bar !== bar;
+}
diff --git a/dequal/lite.ts b/dequal/lite.ts
new file mode 100644
index 0000000..5820d67
--- /dev/null
+++ b/dequal/lite.ts
@@ -0,0 +1,29 @@
+var has = Object.prototype.hasOwnProperty;
+
+export function dequal(foo, bar) {
+	var ctor, len;
+	if (foo === bar) return true;
+
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+
+		if (ctor === Array) {
+			if ((len=foo.length) === bar.length) {
+				while (len-- && dequal(foo[len], bar[len]));
+			}
+			return len === -1;
+		}
+
+		if (!ctor || typeof foo === 'object') {
+			len = 0;
+			for (ctor in foo) {
+				if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
+				if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
+			}
+			return Object.keys(bar).length === len;
+		}
+	}
+
+	return foo !== foo && bar !== bar;
+}
diff --git a/design-tokens-cli/chooseTransform.ts b/design-tokens-cli/chooseTransform.ts
new file mode 100644
index 0000000..221084a
--- /dev/null
+++ b/design-tokens-cli/chooseTransform.ts
@@ -0,0 +1,27 @@
+import { toCustomProps } from './transformers/toCustomProps.js';
+import { toScssVars } from './transformers/toScssVars.js';
+import { toESM } from './transformers/toESM.js';
+import { toJSON } from './transformers/toJSON.js';
+
+/**
+ * Convert an object of design token name/value pairs into Scss (Sass) variables
+ * @param {Object} pairs The flattened token key/value pairs
+ * @param {String} as What the tokens should be transformed into
+ * @returns {String}
+ */
+ const chooseTransform = (pairs, as, groupName, config) => {
+  switch (as) {
+    case 'css':
+      return toCustomProps(pairs, config);
+    case 'scss':
+      return toScssVars(pairs, config);
+    case 'mjs' || 'js':
+      return toESM(pairs, groupName, config);
+    case 'json':
+      return toJSON(pairs, config);
+    default: 
+      throw new Error(`The 'as' value ${as} is not recognized.`);
+  }
+}
+
+export { chooseTransform }
\ No newline at end of file
diff --git a/design-tokens-cli/example/tokens-layout/inset.tokens.json b/design-tokens-cli/example/tokens-layout/inset.tokens.json
new file mode 100644
index 0000000..f0159c7
--- /dev/null
+++ b/design-tokens-cli/example/tokens-layout/inset.tokens.json
@@ -0,0 +1,20 @@
+{
+	"inset": {
+		"a": {
+			"$value": {
+				"left": "0",
+				"top": "0",
+				"bottom": "0",
+				"right": "0"
+			}
+		},
+		"b": {
+			"$value": {
+				"left": "50%",
+				"top": "50%",
+				"bottom": "50%",
+				"right": "50%"
+			}
+		}	
+	}
+}
\ No newline at end of file
diff --git a/design-tokens-cli/example/tokens-layout/size.tokens.json b/design-tokens-cli/example/tokens-layout/size.tokens.json
new file mode 100644
index 0000000..9ab9fb6
--- /dev/null
+++ b/design-tokens-cli/example/tokens-layout/size.tokens.json
@@ -0,0 +1,88 @@
+{
+	"sizing": {
+		"relative": {
+			"0": {
+				"$value": "0",
+				"comment": "no spacing, zero."
+			},
+			"25": {
+				"$value": ".0625",
+				"comment": ".0625rem, 1px"
+			},
+			"50": {
+				"$value": ".125rem",
+				"comment": ".125rem, 2px"
+			},
+			"100": {
+				"$value": ".25rem",
+				"comment": ".25rem, 4px."
+			},
+			"200": {
+				"$value": ".5rem",
+				"comment": ".5rem, 8px."
+			},
+			"400": {
+				"$value": "1rem",
+				"comment": "1rem, 16px."
+			},
+			"600": {
+				"$value": "1.5rem",
+				"comment": "1.5rem, 24px."
+			},
+			"800": {
+				"$value": "2rem",
+				"comment": "2rem, 32px."
+			},
+			"1200": {
+				"$value": "3rem",
+				"comment": "3rem, 48px."
+			},
+			"1600": {
+				"$value": "4rem",
+				"comment": "4rem, 64px."
+			}
+		},
+		"absolute": {
+			"0": {
+				"$value": "0",
+				"comment": "no spacing, zero."
+			},
+			"25": {
+				"$value": "1px",
+				"comment": ".0625rem, 1px"
+			},
+			"50": {
+				"$value": "2px",
+				"comment": ".125rem, 2px"
+			},
+			"100": {
+				"$value": "4px",
+				"comment": ".25rem, 4px."
+			},
+			"200": {
+				"$value": "8px",
+				"comment": ".5rem, 8px."
+			},
+			"400": {
+				"$value": "16px",
+				"comment": "1rem, 16px."
+			},
+			"600": {
+				"$value": "24px",
+				"comment": "1.5rem, 24px."
+			},
+			"800": {
+				"$value": "32px",
+				"comment": "2rem, 32px."
+			},
+			"1200": {
+				"$value": "48px",
+				"comment": "3rem, 48px."
+			},
+			"1600": {
+				"$value": "64px",
+				"comment": "4rem, 64px."
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/design-tokens-cli/example/tokens-type/color.tokens b/design-tokens-cli/example/tokens-type/color.tokens
new file mode 100644
index 0000000..95b697c
--- /dev/null
+++ b/design-tokens-cli/example/tokens-type/color.tokens
@@ -0,0 +1,50 @@
+{
+	"color": {
+		"white": {
+			"name": "white",
+			"$value": "#ffffff"
+		},
+		"blanche": {
+			"name": "white",
+			"$value": "{color.white}"
+		},
+		"weiss": {
+			"name": "white",
+			"$value": "{color.blanche}"
+		},
+		"black": {
+			"name": "black",
+			"$value": "#000000"
+		},
+		"grayscale": {
+			"200": {
+				"name": "grayscale-200",
+				"$value": "#f8f8f8"
+			},
+			"300": {
+				"name": "grayscale-300",
+				"$value": "#f3f3f3"
+			},
+			"400": {
+				"name": "grayscale-400",
+				"$value": "#dadada"
+			},
+			"500": {
+				"name": "grayscale-500",
+				"$value": "#999999"
+			},
+			"600": {
+				"name": "grayscale-600",
+				"$value": "#666666"
+			},
+			"700": {
+				"name": "grayscale-700",
+				"$value": "#555555"
+			},
+			"800": {
+				"name": "grayscale-800",
+				"$value": "#222222"
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/design-tokens-cli/example/tokens-type/font-size.tokens.json b/design-tokens-cli/example/tokens-type/font-size.tokens.json
new file mode 100644
index 0000000..ebdf973
--- /dev/null
+++ b/design-tokens-cli/example/tokens-type/font-size.tokens.json
@@ -0,0 +1,40 @@
+{
+	"font-size": {
+		"350": {
+			"$value": ".875rem",
+			"comment": "14px"
+		},
+		"400": {
+			"$value": "1rem",
+			"comment": "16px"
+		},
+		"450": {
+			"$value": "1.125rem",
+			"comment": "18px"
+		},
+		"500": {
+			"$value": "1.25rem",
+			"comment": "20px"
+		},
+		"600": {
+			"$value": "1.5rem",
+			"comment": "24px"
+		},
+		"650": {
+			"$value": "1.875rem",
+			"comment": "28px"
+		},
+		"800": {
+			"$value": "2rem",
+			"comment": "32px"
+		},
+		"875": {
+			"$value": "2.1875rem",
+			"comment": "35px"
+		},
+		"900": {
+			"$value": "2.5rem",
+			"comment": "36px"
+		}
+	}
+}
\ No newline at end of file
diff --git a/design-tokens-cli/example/tokens.config.json b/design-tokens-cli/example/tokens.config.json
new file mode 100644
index 0000000..4833c2d
--- /dev/null
+++ b/design-tokens-cli/example/tokens.config.json
@@ -0,0 +1,48 @@
+{
+  "globalPrefix": "token",
+  "transforms": [
+    {
+      "name": "layout",
+      "from": "example/tokens-layout",
+      "to": [
+        {
+          "as": "scss",
+          "to": "example/output/scss"
+        },
+        {
+          "as": "css",
+          "to": "example/output/css"
+        },
+        {
+          "as": "mjs",
+          "to": "example/output/js"
+        },  
+        {
+          "as": "json",
+          "to": "example/output/json"
+        }  
+      ]
+    },
+    {
+      "from": "example/tokens-type",
+      "to": [
+        {
+          "as": "scss",
+          "to": "example/output/scss"
+        },
+        {
+          "as": "css",
+          "to": "example/output/css"
+        },
+        {
+          "as": "mjs",
+          "to": "example/output/js"
+        },  
+        {
+          "as": "json",
+          "to": "example/output/json"
+        }  
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/design-tokens-cli/filterByGroup.ts b/design-tokens-cli/filterByGroup.ts
new file mode 100644
index 0000000..70c13f7
--- /dev/null
+++ b/design-tokens-cli/filterByGroup.ts
@@ -0,0 +1,17 @@
+/**
+ * Filter an object of token key/values by the group name
+ * @param {Object} tokens The starting object (one level of key/value pairs only)
+ * @returns {Object}
+ */
+const filterByGroup = (tokens, groupName) => {
+  let filtered = Object.keys(tokens)
+    .filter(key => key.startsWith(groupName))
+    .reduce((obj, key) => {
+        return Object.assign(obj, {
+          [key]: tokens[key]
+        });
+    }, {});
+  return filtered;
+}
+
+export { filterByGroup }
\ No newline at end of file
diff --git a/design-tokens-cli/findDuplicates.ts b/design-tokens-cli/findDuplicates.ts
new file mode 100644
index 0000000..28771b0
--- /dev/null
+++ b/design-tokens-cli/findDuplicates.ts
@@ -0,0 +1,10 @@
+/**
+ * Finds duplicates in an array
+ * @param {Array} arr The starting array
+ * @returns {Array}
+ */
+const findDuplicates = arr => {
+  return arr.filter((item, index) => arr.indexOf(item) !== index);
+}
+
+export { findDuplicates }
\ No newline at end of file
diff --git a/design-tokens-cli/findTrueValues.ts b/design-tokens-cli/findTrueValues.ts
new file mode 100644
index 0000000..13bca97
--- /dev/null
+++ b/design-tokens-cli/findTrueValues.ts
@@ -0,0 +1,28 @@
+import { refToName } from "./refToName.js";
+
+/**
+ * Searches through chained references to replace reference with originating value
+ * @param {Object} pairs The flattened token key/value pairs 
+ * @returns {Object}
+ */
+const findTrueValues = groups => {
+  const newGroups = JSON.parse(JSON.stringify(groups));
+  let justPairs = {};
+  Object.keys(newGroups).forEach(group => {
+    Object.assign(justPairs, newGroups[group]);
+  });
+  for (const pair in justPairs) {
+    let val = justPairs[pair];
+    while (val.startsWith('{')) {
+      let name = refToName(justPairs[pair]);
+      if (!justPairs[name]) {
+        throw new Error(`The token reference name '${name}' does not exist.`);
+      }
+      val = justPairs[name];
+    }
+    justPairs[pair] = val;
+  } 
+  return justPairs;
+}
+
+export { findTrueValues }
diff --git a/design-tokens-cli/flattenJSON.ts b/design-tokens-cli/flattenJSON.ts
new file mode 100644
index 0000000..5d52788
--- /dev/null
+++ b/design-tokens-cli/flattenJSON.ts
@@ -0,0 +1,54 @@
+import { sortKeys } from './sortKeys.js';
+
+/**
+ * Create a simple object of design token name/value pairs from sped-adhering design tokens JSON
+ * @param {Array} tokens A standard design tokens object (JSON))
+ * @returns {Object} of token names and values
+ */
+const flattenJSON = tokens => {
+  const existingObjects = [];
+  const path = [];
+  const tokensArrays = [];
+  (function find(tokens) {
+    for (const key of Object.keys(tokens)) {
+      if (key === '$value') {
+        if (typeof tokens[key] === 'string') {
+          path.push(tokens[key]);
+          tokensArrays.push([...path]);
+          path.pop();
+        } else if (typeof tokens[key] === 'object') {
+          let $values = tokens[key];
+          for (const key in $values) {
+            let pathCopy = [...path];
+            pathCopy.push(key);
+            pathCopy.push($values[key]);
+            tokensArrays.push([...pathCopy]);
+          }
+        } else {
+          throw new Error(`$value properties must be strings or objects.`);
+        }
+      }
+      const o = tokens[key];
+      if (o && typeof o === "object" && !Array.isArray(o)) {
+        if (!existingObjects.find(tokens => tokens === o)) {
+          path.push(key);
+          existingObjects.push(o);
+          find(o);
+          path.pop();
+        }
+      }
+    }
+  }(tokens));
+  const newObject = {};
+  tokensArrays.forEach(arr => {
+    const keys = arr.slice(0, -1).map(k => {
+      return k.split(' ').join('-');
+    });
+    const key = keys.join('-');
+    const value = arr.at(-1);
+    newObject[key] = value;
+  });
+  return sortKeys(newObject); 
+}
+
+export { flattenJSON }
\ No newline at end of file
diff --git a/design-tokens-cli/index.ts b/design-tokens-cli/index.ts
new file mode 100755
index 0000000..365ee6d
--- /dev/null
+++ b/design-tokens-cli/index.ts
@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+import { program as cli } from 'commander';
+import { transform } from './utils/transform.js';
+
+cli.description('Process spec-conforming design tokens JSON');
+cli.name('designTokens');
+cli.usage("<command>");
+cli.addHelpCommand(false);
+cli.helpOption(false);
+
+cli
+  .command('transform')
+  .argument('[configPath]', 'The config file path')
+  .action(transform);
+
+cli.parse(process.argv);
\ No newline at end of file
diff --git a/design-tokens-cli/refToName.ts b/design-tokens-cli/refToName.ts
new file mode 100644
index 0000000..d80db4c
--- /dev/null
+++ b/design-tokens-cli/refToName.ts
@@ -0,0 +1,12 @@
+/**
+ * Convert design token references to design token names
+ * @param {String} refString The design tokens reference $value
+ * @returns {String} A design token name (kebab case)
+ */
+const refToName = refString => {
+  const cropped = refString.slice(1,-1).trim();
+  const kebabbed = cropped.split('.').join('-').split(' ').join('-');
+  return kebabbed;
+}
+
+export { refToName }
\ No newline at end of file
diff --git a/design-tokens-cli/sortKeys.ts b/design-tokens-cli/sortKeys.ts
new file mode 100644
index 0000000..8509446
--- /dev/null
+++ b/design-tokens-cli/sortKeys.ts
@@ -0,0 +1,14 @@
+/**
+ * Sort a shallow object alphabetically by key
+ * @param {Object} object A shallow object to be sorted alphabetically, by key 
+ * @returns {Object} 
+ */
+const sortKeys = object => {
+  return Object.keys(object)
+    .sort()
+    .reduce((acc, key) => ({
+        ...acc, [key]: object[key]
+    }), {});
+}
+
+export { sortKeys }
\ No newline at end of file
diff --git a/design-tokens-cli/tests/filterByGroup.test.ts b/design-tokens-cli/tests/filterByGroup.test.ts
new file mode 100644
index 0000000..aea9ac2
--- /dev/null
+++ b/design-tokens-cli/tests/filterByGroup.test.ts
@@ -0,0 +1,14 @@
+'use strict';
+import { filterByGroup } from '../utils/filterByGroup.js';
+
+test('Filters tokens key/value pairs by group name', () => {
+  const tokens = {
+    "color-token-1": "#000",
+    "color-token-2": "#fff",
+    "size-token-1": "1em",
+    "size-token-2": "2em"
+  }
+
+  const filtered = filterByGroup(tokens, 'color');
+  expect(Object.keys(filtered).length).toEqual(2);
+});
\ No newline at end of file
diff --git a/design-tokens-cli/tests/findTrueValues.test.ts b/design-tokens-cli/tests/findTrueValues.test.ts
new file mode 100644
index 0000000..af405d8
--- /dev/null
+++ b/design-tokens-cli/tests/findTrueValues.test.ts
@@ -0,0 +1,15 @@
+'use strict';
+import { findTrueValues } from '../utils/findTrueValues.js';
+
+test('Searches through references to find true value and apply it', () => {
+  const tokens = {
+    'color': {
+      'color-white': '#ffffff',
+      'color-blanche': '{color.white}',
+      'color-weiss': '{color.blanche}'
+    }
+  }
+
+  const resolved = findTrueValues(tokens);
+  expect(resolved['color-weiss']).toBe('#ffffff');
+});
\ No newline at end of file
diff --git a/design-tokens-cli/tests/refToName.test.ts b/design-tokens-cli/tests/refToName.test.ts
new file mode 100644
index 0000000..fa76071
--- /dev/null
+++ b/design-tokens-cli/tests/refToName.test.ts
@@ -0,0 +1,9 @@
+'use strict';
+import { refToName } from "../utils/refToName.js";
+
+test('Converts a reference string to a real token name.', () => {
+  const ref = '{ color.gray scale.0 }';
+
+  const converted = refToName(ref);
+  expect(converted).toBe('color-gray-scale-0');
+});
\ No newline at end of file
diff --git a/design-tokens-cli/tests/sortKeys.test.ts b/design-tokens-cli/tests/sortKeys.test.ts
new file mode 100644
index 0000000..9a7f4bc
--- /dev/null
+++ b/design-tokens-cli/tests/sortKeys.test.ts
@@ -0,0 +1,14 @@
+'use strict';
+import { sortKeys } from "../utils/sortKeys.js";
+
+test('Sorts an object\'s keys alphabetically', () => {
+  const object = {
+    b: true,
+    c: true,
+    z: true,
+    a: true
+  }
+
+  const sorted = sortKeys(object);
+  expect(Object.keys(sorted)[0]).toBe('a');
+});
\ No newline at end of file
diff --git a/design-tokens-cli/tests/toCustomProps.test.ts b/design-tokens-cli/tests/toCustomProps.test.ts
new file mode 100644
index 0000000..0c8a27a
--- /dev/null
+++ b/design-tokens-cli/tests/toCustomProps.test.ts
@@ -0,0 +1,19 @@
+'use strict';
+import { toCustomProps } from "../utils/transformers/toCustomProps.js";
+
+test('Converts tokens to CSS custom properties', () => {
+  const tokens = {
+    'token-color-1': '#000',
+    'token-color-2': '#fff'
+  }
+
+  const expectedString = `
+    :root {
+      --token-color-1: #000;
+      --token-color-2: #fff;
+    }
+  `;
+
+  const returnedString = toCustomProps(tokens);
+  expect(expectedString.replace(/\s/g, '')).toEqual(returnedString.replace(/\s/g, ''));
+});
\ No newline at end of file
diff --git a/design-tokens-cli/tests/toESM.test.ts b/design-tokens-cli/tests/toESM.test.ts
new file mode 100644
index 0000000..7318e7e
--- /dev/null
+++ b/design-tokens-cli/tests/toESM.test.ts
@@ -0,0 +1,21 @@
+'use strict';
+import { toESM } from "../utils/transformers/toESM.js";
+
+test('Converts tokens to ES modules', () => {
+  const tokens = {
+    'token-color-1': '#000',
+    'token-color-2': '#fff'
+  }
+
+  const groupName = 'my-colors';
+
+  const expectedString = `
+    export const myColors = {
+      'token-color-1': '#000',
+      'token-color-2': '#fff'
+    }
+  `;
+
+  const returnedString = toESM(tokens, groupName);
+  expect(expectedString.replace(/\s/g, '')).toEqual(returnedString.replace(/\s/g, ''));
+});
\ No newline at end of file
diff --git a/design-tokens-cli/tests/toJSON.test.ts b/design-tokens-cli/tests/toJSON.test.ts
new file mode 100644
index 0000000..0d1bc5c
--- /dev/null
+++ b/design-tokens-cli/tests/toJSON.test.ts
@@ -0,0 +1,19 @@
+'use strict';
+import { toJSON } from "../utils/transformers/toJSON.js";
+
+test('Converts tokens to (flat) JSON', () => {
+  const tokens = {
+    "token-color-1": "#000",
+    "token-color-2": "#fff"
+  }
+
+  const expectedString = `
+    {
+      "token-color-1": "#000",
+      "token-color-2": "#fff"
+    }
+  `;
+
+  const returnedString = toJSON(tokens);
+  expect(expectedString.replace(/\s/g, '')).toEqual(returnedString.replace(/\s/g, ''));
+});
\ No newline at end of file
diff --git a/design-tokens-cli/tests/toScssVars.test.ts b/design-tokens-cli/tests/toScssVars.test.ts
new file mode 100644
index 0000000..6a18f03
--- /dev/null
+++ b/design-tokens-cli/tests/toScssVars.test.ts
@@ -0,0 +1,17 @@
+'use strict';
+import { toScssVars } from "../utils/transformers/toScssVars.js";
+
+test('Converts tokens to CSS Sass (scss) variables', () => {
+  const tokens = {
+    'token-color-1': '#000',
+    'token-color-2': '#fff'
+  }
+
+  const expectedString = `
+    $token-color-1: #000;
+    $token-color-2: #fff;
+  `;
+
+  const returnedString = toScssVars(tokens);
+  expect(expectedString.replace(/\s/g, '')).toEqual(returnedString.replace(/\s/g, ''));
+});
\ No newline at end of file
diff --git a/design-tokens-cli/transform.ts b/design-tokens-cli/transform.ts
new file mode 100644
index 0000000..f4f1a08
--- /dev/null
+++ b/design-tokens-cli/transform.ts
@@ -0,0 +1,67 @@
+import jetpack from 'fs-jetpack';
+import { findDuplicates } from "./findDuplicates.js";
+import { findTrueValues } from "./findTrueValues.js";
+import { flattenJSON } from './flattenJSON.js';
+import { chooseTransform } from './chooseTransform.js';
+
+const transform = (configPath, options) => {
+  // If no config path argument, look for config file
+  if (!configPath) {
+    configPath = jetpack.find('./', { matching: 'tokens.config.json' })[0];
+  }
+  if (!configPath) {
+    throw new Error('No config file found in current working directory.');
+  }
+
+  // Read the config file as JSON
+  const config = jetpack.read(configPath, 'json');
+
+  config.transforms.forEach(transform => {
+    let from = jetpack.cwd(transform.from);
+    // Keep track of tokens in one object
+    let allTokens = {};
+    from.find({ matching: ['*.tokens.json', '*.tokens'] }).forEach(path => {
+      const json = from.read(path, 'json');
+      let pairs = flattenJSON(json);
+      allTokens[path.split('.')[0]] = pairs;
+    });
+    
+    // Resolve token references
+    const resolvedPairs = findTrueValues(allTokens);
+    // Exit if there are duplicate token names
+    const duplicates = findDuplicates(Object.keys(resolvedPairs));
+    if (duplicates.length) {
+      throw new Error(`You have duplicate token names: ${duplicates.join(', ')}`);
+    }
+
+    // Place true values back into categorized object
+    for (let group in allTokens) {
+      Object.keys(allTokens[group]).forEach(token => {
+        allTokens[group][token] = resolvedPairs[token];
+      });
+    }
+
+    // If the transform has a name, concatenate under name
+    if (transform.name) {
+      transform.to.forEach(format => {
+        let code = chooseTransform(resolvedPairs, format.as, transform.name, config);
+        let formatTo = jetpack.cwd(format.to);
+        let newPath = `${transform.name}.tokens.${format.as}`;
+        formatTo.write(newPath, code);
+      });
+      return;
+    // Otherwise, create separate files after file names
+    } else {
+      for (let group in allTokens) {
+        transform.to.forEach(format => {
+          let code = chooseTransform(allTokens[group], format.as, group, config);
+          let formatTo = jetpack.cwd(format.to);
+          let newPath = `${group}.tokens.${format.as}`;
+          formatTo.write(newPath, code);
+        });        
+      }
+    }
+  });
+}
+
+export { transform }
\ No newline at end of file
diff --git a/design-tokens-cli/transformers/toCustomProps.ts b/design-tokens-cli/transformers/toCustomProps.ts
new file mode 100644
index 0000000..b91eafe
--- /dev/null
+++ b/design-tokens-cli/transformers/toCustomProps.ts
@@ -0,0 +1,18 @@
+/**
+ * Convert an object of design token name/value pairs into CSS custom Properties 
+ * @param {Object} tokensObject 
+ * @returns {String}
+ */
+const toCustomProps = (tokensObject, config, includeRoot = true) => {
+  const prefix = config.globalPrefix ? `${config.globalPrefix}-` : '';
+  let string = '';
+  if (includeRoot) string += ':root {\n';
+  Object.keys(tokensObject).forEach(key => {
+    if (includeRoot) string += ' ';
+    string += `\t--${prefix}${key}: ${tokensObject[key]};\n`;
+  });
+  if (includeRoot) string += '}\n';
+  return string;
+}
+
+export { toCustomProps }
\ No newline at end of file
diff --git a/design-tokens-cli/transformers/toESM.ts b/design-tokens-cli/transformers/toESM.ts
new file mode 100644
index 0000000..215c7c2
--- /dev/null
+++ b/design-tokens-cli/transformers/toESM.ts
@@ -0,0 +1,20 @@
+/**
+ * Convert an object of design token name/value pairs into an ES module
+ * @param {Object} tokensObject 
+ * @returns {String}
+ */
+const toESM = (tokensObject, groupName, config) => {
+  const prefix = config.globalPrefix ? `${config.globalPrefix}-` : '';
+  groupName = groupName.replace(/-./g, x=>x[1].toUpperCase());
+  const keys = Object.keys(tokensObject);
+  let string = '';
+  string += `export const ${groupName} = {\n`;
+  keys.forEach(key => {
+    let comma = (keys.indexOf(key) + 1) === keys.length ? '' : ',';
+    string += `\t'${prefix}${key}': '${tokensObject[key]}'${comma}\n`;
+  });
+  string += `}`;
+  return string;
+}
+
+export { toESM }
\ No newline at end of file
diff --git a/design-tokens-cli/transformers/toJSON.ts b/design-tokens-cli/transformers/toJSON.ts
new file mode 100644
index 0000000..f66909c
--- /dev/null
+++ b/design-tokens-cli/transformers/toJSON.ts
@@ -0,0 +1,15 @@
+/**
+ * Convert an object of design token name/value pairs into JSON (pass through, basically)
+ * @param {Object} tokensObject 
+ * @returns {String}
+ */
+ const toJSON = (tokensObject, config) => {
+  if (config.globalPrefix) {
+    tokensObject = Object.fromEntries(
+      Object.entries(tokensObject).map(([k, v]) => [`${config.globalPrefix}-${k}`, v])
+    )
+  }
+  return JSON.stringify(tokensObject, undefined, '\t');
+}
+
+export { toJSON }
\ No newline at end of file
diff --git a/design-tokens-cli/transformers/toScssVars.ts b/design-tokens-cli/transformers/toScssVars.ts
new file mode 100644
index 0000000..4d3e7ea
--- /dev/null
+++ b/design-tokens-cli/transformers/toScssVars.ts
@@ -0,0 +1,15 @@
+/**
+ * Convert an object of design token name/value pairs into Scss (Sass) variables
+ * @param {Object} tokensObject 
+ * @returns {String}
+ */
+const toScssVars = (tokensObject, config) => {
+  const prefix = config.globalPrefix ? `${config.globalPrefix}-` : '';
+  let string = '';
+  Object.keys(tokensObject).forEach(key => {
+    string += `$${prefix}${key}: ${tokensObject[key]};\n`;
+  });
+  return string;
+}
+
+export { toScssVars }
\ No newline at end of file
diff --git a/dom-helpers/activeElement.ts b/dom-helpers/activeElement.ts
new file mode 100644
index 0000000..6a90b1a
--- /dev/null
+++ b/dom-helpers/activeElement.ts
@@ -0,0 +1,21 @@
+import ownerDocument from './ownerDocument'
+
+/**
+ * Returns the actively focused element safely.
+ *
+ * @param doc the document to check
+ */
+export default function activeElement(doc = ownerDocument()) {
+  // Support: IE 9 only
+  // IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
+  try {
+    const active = doc.activeElement
+    // IE11 returns a seemingly empty object in some cases when accessing
+    // document.activeElement from an <iframe>
+    if (!active || !active.nodeName) return null
+    return active
+  } catch (e) {
+    /* ie throws if no active element */
+    return doc.body
+  }
+}
diff --git a/dom-helpers/addClass.ts b/dom-helpers/addClass.ts
new file mode 100644
index 0000000..4b3d2d3
--- /dev/null
+++ b/dom-helpers/addClass.ts
@@ -0,0 +1,22 @@
+import hasClass from './hasClass'
+
+/**
+ * Adds a CSS class to a given element.
+ * 
+ * @param element the element
+ * @param className the CSS class name
+ */
+export default function addClass(
+  element: Element | SVGElement,
+  className: string
+) {
+  if (element.classList) element.classList.add(className)
+  else if (!hasClass(element, className))
+    if (typeof element.className === 'string')
+      (element as Element).className = `${element.className} ${className}`
+    else
+      element.setAttribute(
+        'class',
+        `${(element.className && element.className.baseVal) || ''} ${className}`
+      )
+}
diff --git a/dom-helpers/addEventListener.ts b/dom-helpers/addEventListener.ts
new file mode 100644
index 0000000..efd162b
--- /dev/null
+++ b/dom-helpers/addEventListener.ts
@@ -0,0 +1,71 @@
+/* eslint-disable no-return-assign */
+import canUseDOM from './canUseDOM'
+
+export let optionsSupported = false
+export let onceSupported = false
+
+try {
+  const options = {
+    get passive() {
+      return (optionsSupported = true)
+    },
+    get once() {
+      // eslint-disable-next-line no-multi-assign
+      return (onceSupported = optionsSupported = true)
+    },
+  }
+  if (canUseDOM) {
+    window.addEventListener('test', options as any, options)
+    window.removeEventListener('test', options as any, true)
+  }
+} catch (e) {
+  /* */
+}
+
+export type EventHandler<K extends keyof HTMLElementEventMap> = (
+  this: HTMLElement,
+  event: HTMLElementEventMap[K]
+) => any
+
+export type TaggedEventHandler<
+  K extends keyof HTMLElementEventMap
+> = EventHandler<K> & { __once?: EventHandler<K> }
+
+/**
+ * An `addEventListener` ponyfill, supports the `once` option
+ * 
+ * @param node the element
+ * @param eventName the event name
+ * @param handle the handler
+ * @param options event options
+ */
+function addEventListener<K extends keyof HTMLElementEventMap>(
+  node: HTMLElement,
+  eventName: K,
+  handler: TaggedEventHandler<K>,
+  options?: boolean | AddEventListenerOptions
+) {
+  if (options && typeof options !== 'boolean' && !onceSupported) {
+    const { once, capture } = options
+    let wrappedHandler = handler
+    if (!onceSupported && once) {
+      wrappedHandler =
+        handler.__once ||
+        function onceHandler(event) {
+          this.removeEventListener(eventName, onceHandler, capture)
+          handler.call(this, event)
+        }
+      handler.__once = wrappedHandler
+    }
+
+    node.addEventListener(
+      eventName,
+      wrappedHandler,
+      optionsSupported ? options : capture
+    )
+  }
+
+  node.addEventListener(eventName, handler, options)
+}
+
+export default addEventListener
diff --git a/dom-helpers/animate.ts b/dom-helpers/animate.ts
new file mode 100644
index 0000000..374ca94
--- /dev/null
+++ b/dom-helpers/animate.ts
@@ -0,0 +1,138 @@
+import { EventHandler } from './addEventListener'
+import css from './css'
+import hyphenate from './hyphenate'
+import isTransform, { TransformValue } from './isTransform'
+import transitionEnd from './transitionEnd'
+import { Property } from './types'
+
+const reset: Partial<Record<Property, string>> = {
+  transition: '',
+  'transition-duration': '',
+  'transition-delay': '',
+  'transition-timing-function': '',
+}
+
+type AnimateProperties = Record<Property | TransformValue, string>
+
+interface Options {
+  node: HTMLElement
+  properties: AnimateProperties
+  duration?: number
+  easing?: string
+  callback?: EventHandler<'transitionend'>
+}
+
+interface Cancel {
+  cancel(): void
+}
+
+// super lean animate function for transitions
+// doesn't support all translations to keep it matching the jquery API
+/**
+ * code in part from: Zepto 1.1.4 | zeptojs.com/license
+ */
+function _animate({
+  node,
+  properties,
+  duration = 200,
+  easing,
+  callback,
+}: Options) {
+  const cssProperties = [] as Property[]
+
+  const cssValues: Partial<Record<Property, string>> = {}
+
+  let transforms = ''
+
+  Object.keys(properties).forEach((key: Property) => {
+    const value = properties[key]
+
+    if (isTransform(key)) transforms += `${key}(${value}) `
+    else {
+      cssValues[key] = value
+      cssProperties.push(hyphenate(key) as Property)
+    }
+  })
+
+  if (transforms) {
+    cssValues.transform = transforms
+    cssProperties.push('transform')
+  }
+
+  function done(this: HTMLElement, event: TransitionEvent) {
+    if (event.target !== event.currentTarget) return
+
+    css(node, reset)
+    if (callback) callback.call(this, event)
+  }
+
+  if (duration > 0) {
+    cssValues.transition = cssProperties.join(', ')
+    cssValues['transition-duration'] = `${duration / 1000}s`
+    cssValues['transition-delay'] = '0s'
+    cssValues['transition-timing-function'] = easing || 'linear'
+  }
+
+  const removeListener = transitionEnd(node, done, duration)
+
+  // eslint-disable-next-line no-unused-expressions
+  node.clientLeft // trigger page reflow
+
+  css(node, cssValues)
+
+  return {
+    cancel() {
+      removeListener()
+      css(node, reset)
+    },
+  }
+}
+
+function animate(options: Options): Cancel
+function animate(
+  node: HTMLElement,
+  properties: AnimateProperties,
+  duration: number
+): Cancel
+function animate(
+  node: HTMLElement,
+  properties: AnimateProperties,
+  duration: number,
+  callback: EventHandler<'transitionend'>
+): Cancel
+function animate(
+  node: HTMLElement,
+  properties: AnimateProperties,
+  duration: number,
+  easing: string,
+  callback: EventHandler<'transitionend'>
+): Cancel
+function animate(
+  nodeOrOptions: HTMLElement | Options,
+  properties?: AnimateProperties,
+  duration?: number,
+  easing?: string | EventHandler<'transitionend'>,
+  callback?: EventHandler<'transitionend'>
+) {
+  if (!('nodeType' in nodeOrOptions)) {
+    return _animate(nodeOrOptions)
+  }
+
+  if (!properties) {
+    throw new Error('must include properties to animate')
+  }
+  if (typeof easing === 'function') {
+    callback = easing
+    easing = ''
+  }
+
+  return _animate({
+    node: nodeOrOptions,
+    properties,
+    duration,
+    easing,
+    callback,
+  })
+}
+
+export default animate
diff --git a/dom-helpers/animationFrame.ts b/dom-helpers/animationFrame.ts
new file mode 100644
index 0000000..7c85699
--- /dev/null
+++ b/dom-helpers/animationFrame.ts
@@ -0,0 +1,45 @@
+import canUseDOM from './canUseDOM'
+
+type Vendor = '' | 'webkit' | 'moz' | 'o' | 'ms'
+
+type RequestAnimationFrame = typeof requestAnimationFrame
+
+/* https://github.com/component/raf */
+let prev = new Date().getTime()
+function fallback(fn: FrameRequestCallback): number {
+  const curr = new Date().getTime()
+  const ms = Math.max(0, 16 - (curr - prev))
+  const handle = setTimeout(fn, ms)
+
+  prev = curr
+  return handle as any
+}
+
+const vendors = ['', 'webkit', 'moz', 'o', 'ms'] as Vendor[]
+let cancelMethod = 'clearTimeout'
+let rafImpl: RequestAnimationFrame = fallback
+
+// eslint-disable-next-line import/no-mutable-exports
+
+const getKey = (vendor: Vendor, k: string) =>
+  `${vendor + (!vendor ? k : k[0].toUpperCase() + k.substr(1))}AnimationFrame`
+
+if (canUseDOM) {
+  vendors.some(vendor => {
+    const rafMethod = getKey(vendor, 'request')
+
+    if (rafMethod in window) {
+      cancelMethod = getKey(vendor, 'cancel')
+      // @ts-ignore
+      rafImpl = cb => window[rafMethod](cb)
+    }
+    return !!rafImpl
+  })
+}
+
+export const cancel = (id: number) => {
+  // @ts-ignore
+  if (typeof window[cancelMethod] === 'function') window[cancelMethod](id)
+}
+
+export const request = rafImpl
diff --git a/dom-helpers/attribute.ts b/dom-helpers/attribute.ts
new file mode 100644
index 0000000..d65b727
--- /dev/null
+++ b/dom-helpers/attribute.ts
@@ -0,0 +1,24 @@
+/**
+ * Gets or sets an attribute of a given element.
+ * 
+ * @param node the element
+ * @param attr the attribute to get or set
+ * @param val the attribute value
+ */
+export default function attribute(
+  node: Element | null,
+  attr: string,
+  val?: string | boolean | null
+): string | null | undefined {
+  if (node) {
+    if (typeof val === 'undefined') {
+      return node.getAttribute(attr);
+    }
+    if (!val && val !== '') {
+      node.removeAttribute(attr);
+    } else {
+      node.setAttribute(attr, String(val));
+    }
+  }
+}
+
diff --git a/dom-helpers/camelize.ts b/dom-helpers/camelize.ts
new file mode 100644
index 0000000..e573f7c
--- /dev/null
+++ b/dom-helpers/camelize.ts
@@ -0,0 +1,5 @@
+const rHyphen = /-(.)/g
+
+export default function camelize(string: string): string {
+  return string.replace(rHyphen, (_, chr) => chr.toUpperCase())
+}
diff --git a/dom-helpers/camelizeStyle.ts b/dom-helpers/camelizeStyle.ts
new file mode 100644
index 0000000..859a2c3
--- /dev/null
+++ b/dom-helpers/camelizeStyle.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright 2014-2015, Facebook, Inc.
+ * All rights reserved.
+ * https://github.com/facebook/react/blob/2aeb8a2a6beb00617a4217f7f8284924fa2ad819/src/vendor/core/camelizeStyleName.js
+ */
+import camelize from './camelize'
+import { CamelProperty, Property } from './types'
+
+const msPattern = /^-ms-/
+
+export default function camelizeStyleName<T extends string = Property>(
+  string: T
+): CamelProperty {
+  return camelize(string.replace(msPattern, 'ms-')) as CamelProperty
+}
diff --git a/dom-helpers/canUseDOM.ts b/dom-helpers/canUseDOM.ts
new file mode 100644
index 0000000..06a4736
--- /dev/null
+++ b/dom-helpers/canUseDOM.ts
@@ -0,0 +1,5 @@
+export default !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)
diff --git a/dom-helpers/childElements.ts b/dom-helpers/childElements.ts
new file mode 100644
index 0000000..06e2534
--- /dev/null
+++ b/dom-helpers/childElements.ts
@@ -0,0 +1,10 @@
+/**
+ * Collects all child elements of an element.
+ * 
+ * @param node the element
+ */
+export default function childElements(
+  node: Element | null
+): Element[] {
+  return node ? Array.from(node.children) : [];
+}
\ No newline at end of file
diff --git a/dom-helpers/childNodes.ts b/dom-helpers/childNodes.ts
new file mode 100644
index 0000000..8ed70e2
--- /dev/null
+++ b/dom-helpers/childNodes.ts
@@ -0,0 +1,12 @@
+const toArray = Function.prototype.bind.call(Function.prototype.call, [].slice)
+
+/**
+ * Collects all child nodes of an element.
+ * 
+ * @param node the node
+ */
+export default function childNodes(
+  node: Element | null
+): Node[] {
+  return node ? toArray(node.childNodes) : [];
+}
\ No newline at end of file
diff --git a/dom-helpers/clear.ts b/dom-helpers/clear.ts
new file mode 100644
index 0000000..5a80f90
--- /dev/null
+++ b/dom-helpers/clear.ts
@@ -0,0 +1,16 @@
+/**
+ * Removes all child nodes from a given node.
+ * 
+ * @param node the node to clear
+ */
+export default function clear(
+  node: Node | null
+): Node | null {
+  if (node) {
+    while (node.firstChild) {
+      node.removeChild(node.firstChild);
+    }
+    return node;
+  }
+  return null;
+}
\ No newline at end of file
diff --git a/dom-helpers/closest.ts b/dom-helpers/closest.ts
new file mode 100644
index 0000000..4e38ff9
--- /dev/null
+++ b/dom-helpers/closest.ts
@@ -0,0 +1,28 @@
+import matches from './matches'
+
+/**
+ * Returns the closest parent element that matches a given selector.
+ * 
+ * @param node the reference element
+ * @param selector the selector to match
+ * @param stopAt stop traversing when this element is found
+ */
+export default function closest(
+  node: Element,
+  selector: string,
+  stopAt?: Element
+): Element | null {
+  if (node.closest && !stopAt) node.closest(selector)
+
+  let nextNode: Element | null = node
+  do {
+    if (matches(nextNode, selector)) return nextNode
+    nextNode = nextNode.parentElement
+  } while (
+    nextNode &&
+    nextNode !== stopAt &&
+    nextNode.nodeType === document.ELEMENT_NODE
+  )
+
+  return null
+}
diff --git a/dom-helpers/collectElements.ts b/dom-helpers/collectElements.ts
new file mode 100644
index 0000000..cf0d61f
--- /dev/null
+++ b/dom-helpers/collectElements.ts
@@ -0,0 +1,17 @@
+type TraverseDirection = 'parentElement' | 'previousElementSibling' | 'nextElementSibling';
+
+export default function collectElements(
+  node: Element | null,
+  direction: TraverseDirection
+): Element[] {
+  let nextNode: Element | null = null;
+  const nodes: Element[] = [];
+  
+  nextNode = node ? node[direction] : null;
+	while (nextNode && nextNode.nodeType !== 9) {
+		nodes.push(nextNode);
+    nextNode = nextNode[direction] || null;
+	}
+
+	return nodes;
+}
\ No newline at end of file
diff --git a/dom-helpers/collectSiblings.ts b/dom-helpers/collectSiblings.ts
new file mode 100644
index 0000000..daf9c9b
--- /dev/null
+++ b/dom-helpers/collectSiblings.ts
@@ -0,0 +1,20 @@
+import matches from './matches';
+
+export default function collectSiblings(
+  node: Element | null,
+  refNode: Element | null = null,
+  selector: string | null = null
+) : Element[] {
+  const siblings: Element[] = [];
+  
+  for (; node; node = node.nextElementSibling) {
+    if (node !== refNode) {
+      if (selector && matches(node, selector)) {
+        break;
+      }
+      siblings.push(node);
+    }
+  }
+  
+  return siblings;
+}
\ No newline at end of file
diff --git a/dom-helpers/contains.ts b/dom-helpers/contains.ts
new file mode 100644
index 0000000..8208c72
--- /dev/null
+++ b/dom-helpers/contains.ts
@@ -0,0 +1,15 @@
+/* eslint-disable no-bitwise, no-cond-assign */
+
+/**
+ * Checks if an element contains another given element.
+ * 
+ * @param context the context element
+ * @param node the element to check
+ */
+export default function contains(context: Element, node: Element) {
+  // HTML DOM and SVG DOM may have different support levels,
+  // so we need to check on context instead of a document root element.
+  if (context.contains) return context.contains(node)
+  if (context.compareDocumentPosition)
+    return context === node || !!(context.compareDocumentPosition(node) & 16)
+}
diff --git a/dom-helpers/css.ts b/dom-helpers/css.ts
new file mode 100644
index 0000000..2602c28
--- /dev/null
+++ b/dom-helpers/css.ts
@@ -0,0 +1,51 @@
+import * as CSS from 'csstype'
+import getComputedStyle from './getComputedStyle'
+import hyphenate from './hyphenateStyle'
+import isTransform from './isTransform'
+import { CamelProperty, HyphenProperty, Property } from './types'
+
+function style(
+  node: HTMLElement,
+  property: Partial<Record<Property, string>>
+): void
+function style<T extends HyphenProperty>(
+  node: HTMLElement,
+  property: T
+): CSS.PropertiesHyphen[T]
+function style<T extends CamelProperty>(
+  node: HTMLElement,
+  property: T
+): CSS.Properties[T]
+function style<T extends Property>(
+  node: HTMLElement,
+  property: T | Record<Property, string | number>
+) {
+  let css = ''
+  let transforms = ''
+
+  if (typeof property === 'string') {
+    return (
+      node.style.getPropertyValue(hyphenate(property)) ||
+      getComputedStyle(node).getPropertyValue(hyphenate(property))
+    )
+  }
+
+  Object.keys(property).forEach((key: Property) => {
+    const value = property[key]
+    if (!value && value !== 0) {
+      node.style.removeProperty(hyphenate(key))
+    } else if (isTransform(key)) {
+      transforms += `${key}(${value}) `
+    } else {
+      css += `${hyphenate(key)}: ${value};`
+    }
+  })
+
+  if (transforms) {
+    css += `transform: ${transforms};`
+  }
+
+  node.style.cssText += `;${css}`
+}
+
+export default style
diff --git a/dom-helpers/filterEventHandler.ts b/dom-helpers/filterEventHandler.ts
new file mode 100644
index 0000000..77b5c2a
--- /dev/null
+++ b/dom-helpers/filterEventHandler.ts
@@ -0,0 +1,16 @@
+import { EventHandler } from './addEventListener'
+import contains from './contains'
+import qsa from './querySelectorAll'
+
+export default function filterEvents<K extends keyof HTMLElementEventMap>(
+  selector: string,
+  handler: EventHandler<K>
+): EventHandler<K> {
+  return function filterHandler(this: HTMLElement, e: HTMLElementEventMap[K]) {
+    const top = e.currentTarget as HTMLElement
+    const target = e.target as HTMLElement
+    const matches = qsa(top, selector)
+
+    if (matches.some(match => contains(match, target))) handler.call(this, e)
+  }
+}
diff --git a/dom-helpers/getComputedStyle.ts b/dom-helpers/getComputedStyle.ts
new file mode 100644
index 0000000..18fe960
--- /dev/null
+++ b/dom-helpers/getComputedStyle.ts
@@ -0,0 +1,14 @@
+import ownerWindow from './ownerWindow'
+
+/**
+ * Returns one or all computed style properties of an element.
+ * 
+ * @param node the element
+ * @param psuedoElement the style property
+ */
+export default function getComputedStyle(
+  node: HTMLElement,
+  psuedoElement?: string
+) {
+  return ownerWindow(node).getComputedStyle(node, psuedoElement)
+}
diff --git a/dom-helpers/getScrollAccessor.ts b/dom-helpers/getScrollAccessor.ts
new file mode 100644
index 0000000..ebd1f85
--- /dev/null
+++ b/dom-helpers/getScrollAccessor.ts
@@ -0,0 +1,26 @@
+import isWindow from './isWindow'
+
+export default function getscrollAccessor(
+  offset: 'pageXOffset' | 'pageYOffset'
+) {
+  const prop: 'scrollLeft' | 'scrollTop' =
+    offset === 'pageXOffset' ? 'scrollLeft' : 'scrollTop'
+
+  function scrollAccessor(node: Element): number
+  function scrollAccessor(node: Element, val: number): undefined
+  function scrollAccessor(node: Element, val?: number) {
+    const win = isWindow(node)
+
+    if (val === undefined) {
+      return win ? win[offset] : node[prop]
+    }
+
+    if (win) {
+      win.scrollTo(win[offset], val)
+    } else {
+      node[prop] = val
+    }
+  }
+
+  return scrollAccessor
+}
diff --git a/dom-helpers/hasClass.ts b/dom-helpers/hasClass.ts
new file mode 100644
index 0000000..7fae1e2
--- /dev/null
+++ b/dom-helpers/hasClass.ts
@@ -0,0 +1,19 @@
+/**
+ * Checks if a given element has a CSS class.
+ * 
+ * @param element the element
+ * @param className the CSS class name
+ */
+export default function hasClass(
+  element: Element | SVGElement,
+  className: string
+) {
+  if (element.classList)
+    return !!className && element.classList.contains(className)
+
+  return (
+    ` ${element.className.baseVal || element.className} `.indexOf(
+      ` ${className} `
+    ) !== -1
+  )
+}
diff --git a/dom-helpers/height.ts b/dom-helpers/height.ts
new file mode 100644
index 0000000..b33c1fd
--- /dev/null
+++ b/dom-helpers/height.ts
@@ -0,0 +1,17 @@
+import getWindow from './isWindow'
+import offset from './offset'
+
+/**
+ * Returns the height of a given element.
+ * 
+ * @param node the element
+ * @param client whether to use `clientHeight` if possible
+ */
+export default function height(node: HTMLElement, client?: boolean) {
+  const win = getWindow(node)
+  return win
+    ? win.innerHeight
+    : client
+    ? node.clientHeight
+    : offset(node).height
+}
diff --git a/dom-helpers/hyphenate.ts b/dom-helpers/hyphenate.ts
new file mode 100644
index 0000000..87a7883
--- /dev/null
+++ b/dom-helpers/hyphenate.ts
@@ -0,0 +1,5 @@
+const rUpper = /([A-Z])/g
+
+export default function hyphenate(string: string) {
+  return string.replace(rUpper, '-$1').toLowerCase()
+}
diff --git a/dom-helpers/hyphenateStyle.ts b/dom-helpers/hyphenateStyle.ts
new file mode 100644
index 0000000..95567e8
--- /dev/null
+++ b/dom-helpers/hyphenateStyle.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright 2013-2014, Facebook, Inc.
+ * All rights reserved.
+ * https://github.com/facebook/react/blob/2aeb8a2a6beb00617a4217f7f8284924fa2ad819/src/vendor/core/hyphenateStyleName.js
+ */
+
+import hyphenate from './hyphenate'
+import { HyphenProperty, Property } from './types'
+
+const msPattern = /^ms-/
+export default function hyphenateStyleName(string: Property): Property {
+  return hyphenate(string).replace(msPattern, '-ms-') as HyphenProperty
+}
diff --git a/dom-helpers/index.ts b/dom-helpers/index.ts
new file mode 100644
index 0000000..3730019
--- /dev/null
+++ b/dom-helpers/index.ts
@@ -0,0 +1,143 @@
+import activeElement from './activeElement'
+import addClass from './addClass'
+import addEventListener from './addEventListener'
+import animate from './animate'
+import {
+  cancel as cancelAnimationFrame,
+  request as requestAnimationFrame,
+} from './animationFrame'
+import attribute from './attribute';
+import childElements from './childElements'
+import clear from './clear'
+import closest from './closest'
+import contains from './contains'
+import childNodes from './childNodes'
+import style from './css'
+import filter from './filterEventHandler'
+import getComputedStyle from './getComputedStyle'
+import hasClass from './hasClass'
+import height from './height'
+import insertAfter from './insertAfter'
+import isInput from './isInput'
+import isVisible from './isVisible'
+import listen from './listen'
+import matches from './matches'
+import nextUntil from './nextUntil'
+import offset from './offset'
+import offsetParent from './offsetParent'
+import ownerDocument from './ownerDocument'
+import ownerWindow from './ownerWindow'
+import parents from './parents'
+import position from './position'
+import prepend from './prepend'
+import querySelectorAll from './querySelectorAll'
+import remove from './remove'
+import removeClass from './removeClass'
+import removeEventListener from './removeEventListener'
+import scrollbarSize from './scrollbarSize'
+import scrollLeft from './scrollLeft'
+import scrollParent from './scrollParent'
+import scrollTo from './scrollTo'
+import scrollTop from './scrollTop'
+import siblings from './siblings'
+import text from './text'
+import toggleClass from './toggleClass'
+import transitionEnd from './transitionEnd'
+import triggerEvent from './triggerEvent'
+import width from './width'
+
+export {
+  addEventListener,
+  removeEventListener,
+  triggerEvent,
+  animate,
+  filter,
+  listen,
+  style,
+  getComputedStyle,
+  attribute,
+  activeElement,
+  ownerDocument,
+  ownerWindow,
+  requestAnimationFrame,
+  cancelAnimationFrame,
+  matches,
+  height,
+  width,
+  offset,
+  offsetParent,
+  position,
+  contains,
+  scrollbarSize,
+  scrollLeft,
+  scrollParent,
+  scrollTo,
+  scrollTop,
+  querySelectorAll,
+  closest,
+  addClass,
+  removeClass,
+  hasClass,
+  toggleClass,
+  transitionEnd,
+  childNodes,
+  childElements,
+  nextUntil,
+  parents,
+  siblings,
+  clear,
+  insertAfter,
+  isInput,
+  isVisible,
+  prepend,
+  remove,
+  text,
+}
+
+export default {
+  addEventListener,
+  removeEventListener,
+  triggerEvent,
+  animate,
+  filter,
+  listen,
+  style,
+  getComputedStyle,
+  attribute,
+  activeElement,
+  ownerDocument,
+  ownerWindow,
+  requestAnimationFrame,
+  cancelAnimationFrame,
+  matches,
+  height,
+  width,
+  offset,
+  offsetParent,
+  position,
+  contains,
+  scrollbarSize,
+  scrollLeft,
+  scrollParent,
+  scrollTo,
+  scrollTop,
+  querySelectorAll,
+  closest,
+  addClass,
+  removeClass,
+  hasClass,
+  toggleClass,
+  transitionEnd,
+  childNodes,
+  childElements,
+  nextUntil,
+  parents,
+  siblings,
+  clear,
+  insertAfter,
+  isInput,
+  isVisible,
+  prepend,
+  remove,
+  text,
+}
diff --git a/dom-helpers/insertAfter.ts b/dom-helpers/insertAfter.ts
new file mode 100644
index 0000000..8526148
--- /dev/null
+++ b/dom-helpers/insertAfter.ts
@@ -0,0 +1,20 @@
+/**
+ * Inserts a node after a given reference node.
+ * 
+ * @param node the node to insert
+ * @param refNode the reference node
+ */
+export default function insertAfter(
+  node: Node | null,
+  refNode: Node | null
+): Node | null {
+  if (node && refNode && refNode.parentNode) {
+    if (refNode.nextSibling) {
+      refNode.parentNode.insertBefore(node, refNode.nextSibling);
+    } else {
+      refNode.parentNode.appendChild(node);
+    }
+    return node;
+  }
+  return null;
+}
\ No newline at end of file
diff --git a/dom-helpers/isDocument.ts b/dom-helpers/isDocument.ts
new file mode 100644
index 0000000..753635e
--- /dev/null
+++ b/dom-helpers/isDocument.ts
@@ -0,0 +1,5 @@
+export default function isDocument(
+  element: Element | Document | Window
+): element is Document {
+  return 'nodeType' in element && element.nodeType === document.DOCUMENT_NODE
+}
diff --git a/dom-helpers/isInput.ts b/dom-helpers/isInput.ts
new file mode 100644
index 0000000..78bf032
--- /dev/null
+++ b/dom-helpers/isInput.ts
@@ -0,0 +1,12 @@
+const regExpInputs = /^(?:input|select|textarea|button)$/i;
+
+/**
+ * Checks if a given element is an input (input, select, textarea or button).
+ * 
+ * @param node the element to check
+ */
+export default function isInput(
+  node: Element | null
+): boolean {
+  return node ? regExpInputs.test(node.nodeName) : false;
+}
\ No newline at end of file
diff --git a/dom-helpers/isTransform.ts b/dom-helpers/isTransform.ts
new file mode 100644
index 0000000..26910bd
--- /dev/null
+++ b/dom-helpers/isTransform.ts
@@ -0,0 +1,28 @@
+const supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i
+
+export type TransformValue =
+  | 'translate'
+  | 'translateY'
+  | 'translateX'
+  | 'translateZ'
+  | 'translate3d'
+  | 'rotate'
+  | 'rotateY'
+  | 'rotateX'
+  | 'rotateZ'
+  | 'rotate3d'
+  | 'scale'
+  | 'scaleY'
+  | 'scaleX'
+  | 'scaleZ'
+  | 'scale3d'
+  | 'matrix'
+  | 'matrix3d'
+  | 'perspective'
+  | 'skew'
+  | 'skewY'
+  | 'skewX'
+
+export default function isTransform(value: string): value is TransformValue {
+  return !!(value && supportedTransforms.test(value))
+}
diff --git a/dom-helpers/isVisible.ts b/dom-helpers/isVisible.ts
new file mode 100644
index 0000000..1710c8f
--- /dev/null
+++ b/dom-helpers/isVisible.ts
@@ -0,0 +1,10 @@
+/**
+ * Checks if a given element is currently visible.
+ * 
+ * @param node the element to check
+ */
+export default function isVisible(
+  node: HTMLElement | null
+) : boolean {
+  return node ? !!(node.offsetWidth || node.offsetHeight || node.getClientRects().length) : false;
+}
\ No newline at end of file
diff --git a/dom-helpers/isWindow.ts b/dom-helpers/isWindow.ts
new file mode 100644
index 0000000..e57737d
--- /dev/null
+++ b/dom-helpers/isWindow.ts
@@ -0,0 +1,10 @@
+import isDocument from './isDocument'
+
+export default function isWindow(
+  node: Element | Document | Window
+): Window | false {
+  if ('window' in node && node.window === node) return node
+  if (isDocument(node)) return node.defaultView || false
+
+  return false
+}
diff --git a/dom-helpers/listen.ts b/dom-helpers/listen.ts
new file mode 100644
index 0000000..9c29859
--- /dev/null
+++ b/dom-helpers/listen.ts
@@ -0,0 +1,16 @@
+import addEventListener, { EventHandler } from './addEventListener'
+import removeEventListener from './removeEventListener'
+
+function listen<K extends keyof HTMLElementEventMap>(
+  node: HTMLElement,
+  eventName: K,
+  handler: EventHandler<K>,
+  options?: boolean | AddEventListenerOptions
+) {
+  addEventListener(node, eventName, handler, options)
+  return () => {
+    removeEventListener(node, eventName, handler, options)
+  }
+}
+
+export default listen
diff --git a/dom-helpers/matches.ts b/dom-helpers/matches.ts
new file mode 100644
index 0000000..02cf44e
--- /dev/null
+++ b/dom-helpers/matches.ts
@@ -0,0 +1,23 @@
+let matchesImpl: (node: Element, selector: string) => boolean
+
+/**
+ * Checks if a given element matches a selector.
+ * 
+ * @param node the element
+ * @param selector the selector
+ */
+export default function matches(node: Element, selector: string) {
+  if (!matchesImpl) {
+    const body: any = document.body
+    const nativeMatch =
+      body.matches ||
+      body.matchesSelector ||
+      body.webkitMatchesSelector ||
+      body.mozMatchesSelector ||
+      body.msMatchesSelector
+
+    matchesImpl = (n: Element, s: string) => nativeMatch.call(n, s)
+  }
+
+  return matchesImpl(node, selector)
+}
diff --git a/dom-helpers/nextUntil.ts b/dom-helpers/nextUntil.ts
new file mode 100644
index 0000000..3e300f3
--- /dev/null
+++ b/dom-helpers/nextUntil.ts
@@ -0,0 +1,14 @@
+import collectSiblings from './collectSiblings';
+
+/**
+ * Collects all next sibling elements of an element until a given selector is matched.
+ * 
+ * @param node the referene node
+ * @param selector the selector to match
+ */
+export default function nextUntil(
+  node: Element | null,
+  selector: string
+): Element[] {
+  return collectSiblings(node, node, selector);
+}
\ No newline at end of file
diff --git a/dom-helpers/offset.ts b/dom-helpers/offset.ts
new file mode 100644
index 0000000..9206501
--- /dev/null
+++ b/dom-helpers/offset.ts
@@ -0,0 +1,31 @@
+import contains from './contains'
+import ownerDocument from './ownerDocument'
+import scrollLeft from './scrollLeft'
+import scrollTop from './scrollTop'
+
+/**
+ * Returns the offset of a given element, including top and left positions, width and height.
+ * 
+ * @param node the element
+ */
+export default function offset(node: HTMLElement) {
+  const doc = ownerDocument(node)
+
+  let box = { top: 0, left: 0, height: 0, width: 0 }
+  const docElem = doc && doc.documentElement
+
+  // Make sure it's not a disconnected DOM node
+  if (!docElem || !contains(docElem, node)) return box
+
+  if (node.getBoundingClientRect !== undefined)
+    box = node.getBoundingClientRect()
+
+  box = {
+    top: box.top + scrollTop(docElem) - (docElem.clientTop || 0),
+    left: box.left + scrollLeft(docElem) - (docElem.clientLeft || 0),
+    width: box.width,
+    height: box.height,
+  }
+
+  return box
+}
diff --git a/dom-helpers/offsetParent.ts b/dom-helpers/offsetParent.ts
new file mode 100644
index 0000000..c8ef207
--- /dev/null
+++ b/dom-helpers/offsetParent.ts
@@ -0,0 +1,20 @@
+import css from './css'
+import ownerDocument from './ownerDocument'
+
+const isHTMLElement = (e: Element | null): e is HTMLElement =>
+  !!e && 'offsetParent' in e
+
+export default function offsetParent(node: HTMLElement): HTMLElement {
+  const doc = ownerDocument(node)
+  let parent = node && node.offsetParent
+
+  while (
+    isHTMLElement(parent) &&
+    parent.nodeName !== 'HTML' &&
+    css(parent, 'position') === 'static'
+  ) {
+    parent = parent.offsetParent
+  }
+
+  return (parent || doc.documentElement) as HTMLElement
+}
diff --git a/dom-helpers/ownerDocument.ts b/dom-helpers/ownerDocument.ts
new file mode 100644
index 0000000..ff15c2f
--- /dev/null
+++ b/dom-helpers/ownerDocument.ts
@@ -0,0 +1,8 @@
+/**
+ * Returns the owner document of a given element.
+ * 
+ * @param node the element
+ */
+export default function ownerDocument(node?: Element) {
+  return (node && node.ownerDocument) || document
+}
diff --git a/dom-helpers/ownerWindow.ts b/dom-helpers/ownerWindow.ts
new file mode 100644
index 0000000..6447078
--- /dev/null
+++ b/dom-helpers/ownerWindow.ts
@@ -0,0 +1,11 @@
+import ownerDocument from './ownerDocument'
+
+/**
+ * Returns the owner window of a given element.
+ * 
+ * @param node the element
+ */
+export default function ownerWindow(node?: Element): Window {
+  const doc = ownerDocument(node)
+  return (doc && doc.defaultView) || window
+}
diff --git a/dom-helpers/parents.ts b/dom-helpers/parents.ts
new file mode 100644
index 0000000..cba3389
--- /dev/null
+++ b/dom-helpers/parents.ts
@@ -0,0 +1,12 @@
+import collectElements from './collectElements';
+
+/**
+ * Collects all parent elements of a given element.
+ * 
+ * @param node the element
+ */
+export default function parents(
+  node: Element | null
+): Element[] {
+  return collectElements(node, 'parentElement');
+}
\ No newline at end of file
diff --git a/dom-helpers/position.ts b/dom-helpers/position.ts
new file mode 100644
index 0000000..8aeed09
--- /dev/null
+++ b/dom-helpers/position.ts
@@ -0,0 +1,46 @@
+import css from './css'
+import getOffset from './offset'
+import getOffsetParent from './offsetParent'
+import scrollLeft from './scrollLeft'
+import scrollTop from './scrollTop'
+
+const nodeName = (node: Element) => node.nodeName && node.nodeName.toLowerCase()
+
+/**
+ * Returns the relative position of a given element.
+ * 
+ * @param node the element
+ * @param offsetParent the offset parent
+ */
+export default function position(
+  node: HTMLElement,
+  offsetParent?: HTMLElement
+) {
+  let parentOffset = { top: 0, left: 0 }
+  let offset
+
+  // Fixed elements are offset from window (parentOffset = {top:0, left: 0},
+  // because it is its only offset parent
+  if (css(node, 'position') === 'fixed') {
+    offset = node.getBoundingClientRect()
+  } else {
+    const parent: HTMLElement = offsetParent || getOffsetParent(node)
+    offset = getOffset(node)
+
+    if (nodeName(parent) !== 'html') parentOffset = getOffset(parent)
+    const borderTop = String(css(parent, 'borderTopWidth') || 0)
+    parentOffset.top += parseInt(borderTop, 10) - scrollTop(parent) || 0
+
+    const borderLeft = String(css(parent, 'borderLeftWidth') || 0)
+    parentOffset.left += parseInt(borderLeft, 10) - scrollLeft(parent) || 0
+  }
+
+  const marginTop = String(css(node, 'marginTop') || 0)
+  const marginLeft = String(css(node, 'marginLeft') || 0)
+  // Subtract parent offsets and node margins
+  return {
+    ...offset,
+    top: offset.top - parentOffset.top - (parseInt(marginTop, 10) || 0),
+    left: offset.left - parentOffset.left - (parseInt(marginLeft, 10) || 0),
+  }
+}
diff --git a/dom-helpers/prepend.ts b/dom-helpers/prepend.ts
new file mode 100644
index 0000000..e7a6627
--- /dev/null
+++ b/dom-helpers/prepend.ts
@@ -0,0 +1,20 @@
+/**
+ * Insert a given element as the first child of a parent element.
+ * 
+ * @param node the element to prepend
+ * @param parent the parent element
+ */
+export default function prepend(
+  node: Element | null,
+  parent: Element | null
+): Element | null {
+  if (node && parent) {
+    if (parent.firstElementChild) {
+      parent.insertBefore(node, parent.firstElementChild);
+    } else {
+      parent.appendChild(node);
+    }
+    return node;
+  }
+  return null;
+}
\ No newline at end of file
diff --git a/dom-helpers/querySelectorAll.ts b/dom-helpers/querySelectorAll.ts
new file mode 100644
index 0000000..667ae83
--- /dev/null
+++ b/dom-helpers/querySelectorAll.ts
@@ -0,0 +1,14 @@
+const toArray = Function.prototype.bind.call(Function.prototype.call, [].slice)
+
+/**
+ * Runs `querySelectorAll` on a given element.
+ * 
+ * @param element the element
+ * @param selector the selector
+ */
+export default function qsa(
+  element: HTMLElement | Document,
+  selector: string
+): HTMLElement[] {
+  return toArray(element.querySelectorAll(selector))
+}
diff --git a/dom-helpers/remove.ts b/dom-helpers/remove.ts
new file mode 100644
index 0000000..386246c
--- /dev/null
+++ b/dom-helpers/remove.ts
@@ -0,0 +1,14 @@
+/**
+ * Removes a given node from the DOM.
+ * 
+ * @param node the node to remove
+ */
+export default function remove(
+  node: Node | null
+): Node | null {
+  if (node && node.parentNode) {
+    node.parentNode.removeChild(node);
+    return node;
+  }
+  return null;
+}
\ No newline at end of file
diff --git a/dom-helpers/removeClass.ts b/dom-helpers/removeClass.ts
new file mode 100644
index 0000000..d4ef7c1
--- /dev/null
+++ b/dom-helpers/removeClass.ts
@@ -0,0 +1,34 @@
+function replaceClassName(origClass: string, classToRemove: string) {
+  return origClass
+    .replace(new RegExp(`(^|\\s)${classToRemove}(?:\\s|$)`, 'g'), '$1')
+    .replace(/\s+/g, ' ')
+    .replace(/^\s*|\s*$/g, '')
+}
+
+/**
+ * Removes a CSS class from a given element.
+ * 
+ * @param element the element
+ * @param className the CSS class name
+ */
+export default function removeClass(
+  element: Element | SVGElement,
+  className: string
+) {
+  if (element.classList) {
+    element.classList.remove(className)
+  } else if (typeof element.className === 'string') {
+    (element as Element).className = replaceClassName(
+      element.className,
+      className
+    )
+  } else {
+    element.setAttribute(
+      'class',
+      replaceClassName(
+        (element.className && element.className.baseVal) || '',
+        className
+      )
+    )
+  }
+}
diff --git a/dom-helpers/removeEventListener.ts b/dom-helpers/removeEventListener.ts
new file mode 100644
index 0000000..1e4f07e
--- /dev/null
+++ b/dom-helpers/removeEventListener.ts
@@ -0,0 +1,27 @@
+import { TaggedEventHandler } from './addEventListener'
+
+/**
+ * A `removeEventListener` ponyfill
+ * 
+ * @param node the element
+ * @param eventName the event name
+ * @param handle the handler
+ * @param options event options
+ */
+
+function removeEventListener<K extends keyof HTMLElementEventMap>(
+  node: HTMLElement,
+  eventName: K,
+  handler: TaggedEventHandler<K>,
+  options?: boolean | EventListenerOptions
+) {
+  const capture =
+    options && typeof options !== 'boolean' ? options.capture : options
+
+  node.removeEventListener(eventName, handler, capture)
+  if (handler.__once) {
+    node.removeEventListener(eventName, handler.__once, capture)
+  }
+}
+
+export default removeEventListener
diff --git a/dom-helpers/scrollLeft.ts b/dom-helpers/scrollLeft.ts
new file mode 100644
index 0000000..be5001a
--- /dev/null
+++ b/dom-helpers/scrollLeft.ts
@@ -0,0 +1,9 @@
+import getScrollAccessor from './getScrollAccessor'
+
+/**
+ * Gets or sets the scroll left position of a given element.
+ * 
+ * @param node the element
+ * @param val the position to set
+ */
+ export default getScrollAccessor('pageXOffset')
diff --git a/dom-helpers/scrollParent.ts b/dom-helpers/scrollParent.ts
new file mode 100644
index 0000000..f9d39e6
--- /dev/null
+++ b/dom-helpers/scrollParent.ts
@@ -0,0 +1,42 @@
+/* eslint-disable no-cond-assign, no-continue */
+
+import css from './css'
+import height from './height'
+import isDocument from './isDocument'
+
+/**
+ * Find the first scrollable parent of an element.
+ *
+ * @param element Starting element
+ * @param firstPossible Stop at the first scrollable parent, even if it's not currently scrollable
+ */
+export default function scrollParent(
+  element: HTMLElement,
+  firstPossible?: boolean
+) {
+  const position = css(element, 'position')
+  const excludeStatic = position === 'absolute'
+  const ownerDoc = element.ownerDocument
+
+  if (position === 'fixed') return ownerDoc || document
+
+  // @ts-ignore
+  while ((element = element.parentNode) && !isDocument(element)) {
+    const isStatic = excludeStatic && css(element, 'position') === 'static'
+    const style =
+      (css(element, 'overflow') || '') +
+      (css(element, 'overflow-y') || '') +
+      css(element, 'overflow-x')
+
+    if (isStatic) continue
+
+    if (
+      /(auto|scroll)/.test(style) &&
+      (firstPossible || height(element) < element!.scrollHeight)
+    ) {
+      return element
+    }
+  }
+
+  return ownerDoc || document
+}
diff --git a/dom-helpers/scrollTo.ts b/dom-helpers/scrollTo.ts
new file mode 100644
index 0000000..cf3866f
--- /dev/null
+++ b/dom-helpers/scrollTo.ts
@@ -0,0 +1,47 @@
+/* eslint-disable no-nested-ternary */
+
+import { cancel, request } from './animationFrame'
+import height from './height'
+import getWindow from './isWindow'
+import getOffset from './offset'
+import getScrollParent from './scrollParent'
+import scrollTop from './scrollTop'
+
+export default function scrollTo(
+  selected: HTMLElement,
+  scrollParent?: HTMLElement
+) {
+  let offset = getOffset(selected)
+  let poff = { top: 0, left: 0 }
+
+  if (!selected) return undefined
+
+  const list = scrollParent || (getScrollParent(selected) as HTMLElement)
+  const isWin = getWindow(list)
+  let listScrollTop = scrollTop(list)
+
+  const listHeight = height(list, true)
+
+  if (!isWin) poff = getOffset(list)
+
+  offset = {
+    top: offset.top - poff.top,
+    left: offset.left - poff.left,
+    height: offset.height,
+    width: offset.width,
+  }
+
+  const selectedHeight = offset.height
+  const selectedTop = offset.top + (isWin ? 0 : listScrollTop)
+  const bottom = selectedTop + selectedHeight
+
+  listScrollTop =
+    listScrollTop > selectedTop
+      ? selectedTop
+      : bottom > listScrollTop + listHeight
+      ? bottom - listHeight
+      : listScrollTop
+
+  const id = request(() => scrollTop(list, listScrollTop))
+  return () => cancel(id)
+}
diff --git a/dom-helpers/scrollTop.ts b/dom-helpers/scrollTop.ts
new file mode 100644
index 0000000..3139fe9
--- /dev/null
+++ b/dom-helpers/scrollTop.ts
@@ -0,0 +1,9 @@
+import getScrollAccessor from './getScrollAccessor'
+
+/**
+ * Gets or sets the scroll top position of a given element.
+ * 
+ * @param node the element
+ * @param val the position to set
+ */
+export default getScrollAccessor('pageYOffset')
diff --git a/dom-helpers/scrollbarSize.ts b/dom-helpers/scrollbarSize.ts
new file mode 100644
index 0000000..8514c06
--- /dev/null
+++ b/dom-helpers/scrollbarSize.ts
@@ -0,0 +1,23 @@
+import canUseDOM from './canUseDOM'
+
+let size: number
+
+export default function scrollbarSize(recalc?: boolean) {
+  if ((!size && size !== 0) || recalc) {
+    if (canUseDOM) {
+      const scrollDiv = document.createElement('div')
+
+      scrollDiv.style.position = 'absolute'
+      scrollDiv.style.top = '-9999px'
+      scrollDiv.style.width = '50px'
+      scrollDiv.style.height = '50px'
+      scrollDiv.style.overflow = 'scroll'
+
+      document.body.appendChild(scrollDiv)
+      size = scrollDiv.offsetWidth - scrollDiv.clientWidth
+      document.body.removeChild(scrollDiv)
+    }
+  }
+
+  return size
+}
diff --git a/dom-helpers/siblings.ts b/dom-helpers/siblings.ts
new file mode 100644
index 0000000..46f071e
--- /dev/null
+++ b/dom-helpers/siblings.ts
@@ -0,0 +1,12 @@
+import collectSiblings from './collectSiblings';
+
+/**
+ * Collects all previous and next sibling elements of a given element.
+ * 
+ * @param node the element
+ */
+export default function siblings(
+  node: Element | null
+): Element[] {
+  return collectSiblings(node && node.parentElement ? node.parentElement.firstElementChild : null, node);
+}
\ No newline at end of file
diff --git a/dom-helpers/text.ts b/dom-helpers/text.ts
new file mode 100644
index 0000000..5b1b332
--- /dev/null
+++ b/dom-helpers/text.ts
@@ -0,0 +1,30 @@
+const regExpNbspEntity = /&nbsp;/gi;
+const regExpNbspHex = /\xA0/g;
+const regExpSpaces = /\s+([^\s])/gm;
+
+/**
+ * Collects the text content of a given element.
+ * 
+ * @param node the element
+ * @param trim whether to remove trailing whitespace chars
+ * @param singleSpaces whether to convert multiple whitespace chars into a single space character
+ */
+export default function text(
+  node: HTMLElement | null,
+  trim = true,
+  singleSpaces = true
+): string {
+  let elementText: string | null = '';
+  
+  if (node) {
+    elementText = (node.textContent || '').replace(regExpNbspEntity, ' ').replace(regExpNbspHex, ' ');
+    if (trim) {
+      elementText = elementText.trim();
+    }
+    if (singleSpaces) {
+      elementText = elementText.replace(regExpSpaces, ' $1');
+    }    
+  }
+  
+  return elementText;
+}
\ No newline at end of file
diff --git a/dom-helpers/toggleClass.ts b/dom-helpers/toggleClass.ts
new file mode 100644
index 0000000..070d998
--- /dev/null
+++ b/dom-helpers/toggleClass.ts
@@ -0,0 +1,18 @@
+import addClass from './addClass'
+import hasClass from './hasClass'
+import removeClass from './removeClass'
+
+/**
+ * Toggles a CSS class on a given element.
+ * 
+ * @param element the element
+ * @param className the CSS class name
+ */
+export default function toggleClass(
+  element: Element | SVGElement,
+  className: string
+) {
+  if (element.classList) element.classList.toggle(className)
+  else if (hasClass(element, className)) removeClass(element, className)
+  else addClass(element, className)
+}
diff --git a/dom-helpers/transitionEnd.ts b/dom-helpers/transitionEnd.ts
new file mode 100644
index 0000000..cef860e
--- /dev/null
+++ b/dom-helpers/transitionEnd.ts
@@ -0,0 +1,55 @@
+import css from './css'
+import listen from './listen'
+import triggerEvent from './triggerEvent';
+
+export type Listener = (this: HTMLElement, ev: TransitionEvent) => any
+
+function parseDuration(node: HTMLElement) {
+  const str = css(node, 'transitionDuration') || ''
+
+  const mult = str.indexOf('ms') === -1 ? 1000 : 1
+  return parseFloat(str) * mult
+}
+
+function emulateTransitionEnd(
+  element: HTMLElement,
+  duration: number,
+  padding = 5
+) {
+  let called = false
+
+  const handle = setTimeout(() => {
+    if (!called) triggerEvent(element, 'transitionend', true);
+  }, duration + padding)
+
+  const remove = listen(
+    element,
+    'transitionend',
+    () => {
+      called = true
+    },
+    { once: true }
+  )
+
+  return () => {
+    clearTimeout(handle)
+    remove()
+  }
+}
+
+export default function transitionEnd(
+  element: HTMLElement,
+  handler: Listener,
+  duration?: number | null,
+  padding?: number
+) {
+  if (duration == null) duration = parseDuration(element) || 0
+  const removeEmulate = emulateTransitionEnd(element, duration, padding)
+
+  const remove = listen(element, 'transitionend', handler)
+
+  return () => {
+    removeEmulate()
+    remove()
+  }
+}
diff --git a/dom-helpers/triggerEvent.ts b/dom-helpers/triggerEvent.ts
new file mode 100644
index 0000000..46e589c
--- /dev/null
+++ b/dom-helpers/triggerEvent.ts
@@ -0,0 +1,21 @@
+/**
+ * Triggers an event on a given element.
+ * 
+ * @param node the element
+ * @param eventName the event name to trigger
+ * @param bubbles whether the event should bubble up
+ * @param cancelable whether the event should be cancelable
+ */
+export default function triggerEvent<K extends keyof HTMLElementEventMap>(
+  node: HTMLElement | null,
+  eventName: K,
+  bubbles = false,
+  cancelable = true
+) {
+  if (node) {
+    const event: Event = document.createEvent('HTMLEvents');
+    
+    event.initEvent(eventName, bubbles, cancelable);
+    node.dispatchEvent(event);
+  }
+}
\ No newline at end of file
diff --git a/dom-helpers/types.d.ts b/dom-helpers/types.d.ts
new file mode 100644
index 0000000..1a9d972
--- /dev/null
+++ b/dom-helpers/types.d.ts
@@ -0,0 +1,8 @@
+import * as CSS from 'csstype'
+
+type Styles = keyof CSSStyleDeclaration
+
+export type HyphenProperty = keyof CSS.PropertiesHyphen
+export type CamelProperty = keyof CSS.Properties
+
+export type Property = HyphenProperty | CamelProperty
diff --git a/dom-helpers/width.ts b/dom-helpers/width.ts
new file mode 100644
index 0000000..11abde8
--- /dev/null
+++ b/dom-helpers/width.ts
@@ -0,0 +1,13 @@
+import getWindow from './isWindow'
+import offset from './offset'
+
+/**
+ * Returns the width of a given element.
+ * 
+ * @param node the element
+ * @param client whether to use `clientWidth` if possible
+ */
+export default function getWidth(node: HTMLElement, client?: boolean) {
+  const win = getWindow(node)
+  return win ? win.innerWidth : client ? node.clientWidth : offset(node).width
+}
diff --git a/hooks/globals.d.ts b/hooks/globals.d.ts
new file mode 100644
index 0000000..9d32ba0
--- /dev/null
+++ b/hooks/globals.d.ts
@@ -0,0 +1,68 @@
+interface Window {
+  ResizeObserver: ResizeObserver
+}
+
+/**
+ * The ResizeObserver interface is used to observe changes to Element's content
+ * rect.
+ *
+ * It is modeled after MutationObserver and IntersectionObserver.
+ */
+interface ResizeObserver {
+  new (callback: ResizeObserverCallback)
+
+  /**
+   * Adds target to the list of observed elements.
+   */
+  observe: (target: Element) => void
+
+  /**
+   * Removes target from the list of observed elements.
+   */
+  unobserve: (target: Element) => void
+
+  /**
+   * Clears both the observationTargets and activeTargets lists.
+   */
+  disconnect: () => void
+}
+
+/**
+ * This callback delivers ResizeObserver's notifications. It is invoked by a
+ * broadcast active observations algorithm.
+ */
+interface ResizeObserverCallback {
+  (entries: ResizeObserverEntry[], observer: ResizeObserver): void
+}
+
+interface ResizeObserverEntry {
+  /**
+   * @param target The Element whose size has changed.
+   */
+  new (target: Element)
+
+  /**
+   * The Element whose size has changed.
+   */
+  readonly target: Element
+
+  /**
+   * Element's content rect when ResizeObserverCallback is invoked.
+   */
+  readonly contentRect: DOMRectReadOnly
+}
+
+interface DOMRectReadOnly {
+  fromRect(other: DOMRectInit | undefined): DOMRectReadOnly
+
+  readonly x: number
+  readonly y: number
+  readonly width: number
+  readonly height: number
+  readonly top: number
+  readonly right: number
+  readonly bottom: number
+  readonly left: number
+
+  toJSON: () => any
+}
diff --git a/hooks/index.ts b/hooks/index.ts
new file mode 100644
index 0000000..14368af
--- /dev/null
+++ b/hooks/index.ts
@@ -0,0 +1,29 @@
+import useCallbackRef from './useCallbackRef'
+import useCommittedRef from './useCommittedRef'
+import useEventCallback from './useEventCallback'
+import useEventListener from './useEventListener'
+import useGlobalListener from './useGlobalListener'
+import useInterval from './useInterval'
+import useRafInterval from './useRafInterval'
+import useMergeState from './useMergeState'
+import useMergeStateFromProps from './useMergeStateFromProps'
+import useMounted from './useMounted'
+import usePrevious from './usePrevious'
+import useImage from './useImage'
+import useResizeObserver from './useResizeObserver'
+
+export {
+  useCallbackRef,
+  useCommittedRef,
+  useEventCallback,
+  useEventListener,
+  useGlobalListener,
+  useInterval,
+  useRafInterval,
+  useMergeState,
+  useMergeStateFromProps,
+  useMounted,
+  usePrevious,
+  useImage,
+  useResizeObserver,
+}
diff --git a/hooks/useAnimationFrame.ts b/hooks/useAnimationFrame.ts
new file mode 100644
index 0000000..47b0be9
--- /dev/null
+++ b/hooks/useAnimationFrame.ts
@@ -0,0 +1,76 @@
+import { useRef } from 'react'
+import useMounted from './useMounted'
+import useStableMemo from './useStableMemo'
+import useWillUnmount from './useWillUnmount'
+
+export interface UseAnimationFrameReturn {
+  cancel(): void
+
+  /**
+   * Request for the provided callback to be called on the next animation frame.
+   * Previously registered callbacks will be cancelled
+   */
+  request(callback: FrameRequestCallback): void
+
+  /**
+   * Request for the provided callback to be called on the next animation frame.
+   * Previously registered callbacks can be cancelled by providing `cancelPrevious`
+   */
+  request(cancelPrevious: boolean, callback: FrameRequestCallback): void
+}
+/**
+ * Returns a controller object for requesting and cancelling an animation freame that is properly cleaned up
+ * once the component unmounts. New requests cancel and replace existing ones.
+ *
+ * ```ts
+ * const [style, setStyle] = useState({});
+ * const animationFrame = useAnimationFrame();
+ *
+ * const handleMouseMove = (e) => {
+ *   animationFrame.request(() => {
+ *     setStyle({ top: e.clientY, left: e.clientY })
+ *   })
+ * }
+ *
+ * const handleMouseUp = () => {
+ *   animationFrame.cancel()
+ * }
+ *
+ * return (
+ *   <div onMouseUp={handleMouseUp} onMouseMove={handleMouseMove}>
+ *     <Ball style={style} />
+ *   </div>
+ * )
+ * ```
+ */
+export default function useAnimationFrame(): UseAnimationFrameReturn {
+  const isMounted = useMounted()
+  const handle = useRef<number | undefined>()
+
+  const cancel = () => {
+    if (handle.current != null) {
+      cancelAnimationFrame(handle.current)
+    }
+  }
+
+  useWillUnmount(cancel)
+
+  return useStableMemo(
+    () => ({
+      request(
+        cancelPrevious: boolean | FrameRequestCallback,
+        fn?: FrameRequestCallback,
+      ) {
+        if (!isMounted()) return
+
+        if (cancelPrevious) cancel()
+
+        handle.current = requestAnimationFrame(
+          fn || (cancelPrevious as FrameRequestCallback),
+        )
+      },
+      cancel,
+    }),
+    [],
+  )
+}
diff --git a/hooks/useBreakpoint.ts b/hooks/useBreakpoint.ts
new file mode 100644
index 0000000..717d05d
--- /dev/null
+++ b/hooks/useBreakpoint.ts
@@ -0,0 +1,161 @@
+import useMediaQuery from './useMediaQuery'
+import { useMemo } from 'react'
+
+export type BreakpointDirection = 'up' | 'down' | true
+
+export type BreakpointMap<TKey extends string> = Partial<
+  Record<TKey, BreakpointDirection>
+>
+
+/**
+ * Create a responsive hook we a set of breakpoint names and widths.
+ * You can use any valid css units as well as a numbers (for pixels).
+ *
+ * **NOTE:** The object key order is important! it's assumed to be in order from smallest to largest
+ *
+ * ```ts
+ * const useBreakpoint = createBreakpointHook({
+ *  xs: 0,
+ *  sm: 576,
+ *  md: 768,
+ *  lg: 992,
+ *  xl: 1200,
+ * })
+ * ```
+ *
+ * **Watch out!** using string values will sometimes construct media queries using css `calc()` which
+ * is NOT supported in media queries by all browsers at the moment. use numbers for
+ * the widest range of browser support.
+ *
+ * @param breakpointValues A object hash of names to breakpoint dimensions
+ */
+export function createBreakpointHook<TKey extends string>(
+  breakpointValues: Record<TKey, string | number>,
+) {
+  const names = Object.keys(breakpointValues) as TKey[]
+
+  function and(query: string, next: string) {
+    if (query === next) {
+      return next
+    }
+    return query ? `${query} and ${next}` : next
+  }
+
+  function getNext(breakpoint: TKey) {
+    return names[Math.min(names.indexOf(breakpoint) + 1, names.length - 1)]
+  }
+
+  function getMaxQuery(breakpoint: TKey) {
+    const next = getNext(breakpoint)
+    let value = breakpointValues[next]
+
+    if (typeof value === 'number') value = `${value - 0.2}px`
+    else value = `calc(${value} - 0.2px)`
+
+    return `(max-width: ${value})`
+  }
+
+  function getMinQuery(breakpoint: TKey) {
+    let value = breakpointValues[breakpoint]
+    if (typeof value === 'number') {
+      value = `${value}px`
+    }
+    return `(min-width: ${value})`
+  }
+
+  /**
+   * Match a set of breakpoints
+   *
+   * ```tsx
+   * const MidSizeOnly = () => {
+   *   const isMid = useBreakpoint({ lg: 'down', sm: 'up' });
+   *
+   *   if (isMid) return <div>On a Reasonable sized Screen!</div>
+   *   return null;
+   * }
+   * ```
+   * @param breakpointMap An object map of breakpoints and directions, queries are constructed using "and" to join
+   * breakpoints together
+   * @param window Optionally specify the target window to match against (useful when rendering into iframes)
+   */
+  function useBreakpoint(
+    breakpointMap: BreakpointMap<TKey>,
+    window?: Window,
+  ): boolean
+  /**
+   * Match a single breakpoint exactly, up, or down.
+   *
+   * ```tsx
+   * const PhoneOnly = () => {
+   *   const isSmall = useBreakpoint('sm', 'down');
+   *
+   *   if (isSmall) return <div>On a Small Screen!</div>
+   *   return null;
+   * }
+   * ```
+   *
+   * @param breakpoint The breakpoint key
+   * @param direction A direction 'up' for a max, 'down' for min, true to match only the breakpoint
+   * @param window Optionally specify the target window to match against (useful when rendering into iframes)
+   */
+  function useBreakpoint(
+    breakpoint: TKey,
+    direction?: BreakpointDirection,
+    window?: Window,
+  ): boolean
+  function useBreakpoint(
+    breakpointOrMap: TKey | BreakpointMap<TKey>,
+    direction?: BreakpointDirection | Window,
+    window?: Window,
+  ): boolean {
+    let breakpointMap: BreakpointMap<TKey>
+
+    if (typeof breakpointOrMap === 'object') {
+      breakpointMap = breakpointOrMap
+      window = direction as Window
+      direction = true
+    } else {
+      direction = direction || true
+      breakpointMap = { [breakpointOrMap]: direction } as Record<
+        TKey,
+        BreakpointDirection
+      >
+    }
+
+    let query = useMemo(
+      () =>
+        Object.entries(breakpointMap).reduce(
+          (query, [key, direction]: [TKey, BreakpointDirection]) => {
+            if (direction === 'up' || direction === true) {
+              query = and(query, getMinQuery(key))
+            }
+            if (direction === 'down' || direction === true) {
+              query = and(query, getMaxQuery(key))
+            }
+
+            return query
+          },
+          '',
+        ),
+      [JSON.stringify(breakpointMap)],
+    )
+
+    return useMediaQuery(query, window)
+  }
+
+  return useBreakpoint
+}
+
+export type DefaultBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+export type DefaultBreakpointMap = BreakpointMap<DefaultBreakpoints>
+
+const useBreakpoint = createBreakpointHook<DefaultBreakpoints>({
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400,
+})
+
+export default useBreakpoint
diff --git a/hooks/useCallbackRef.ts b/hooks/useCallbackRef.ts
new file mode 100644
index 0000000..6587b59
--- /dev/null
+++ b/hooks/useCallbackRef.ts
@@ -0,0 +1,32 @@
+import { useState } from 'react'
+
+/**
+ * A convenience hook around `useState` designed to be paired with
+ * the component [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) api.
+ * Callback refs are useful over `useRef()` when you need to respond to the ref being set
+ * instead of lazily accessing it in an effect.
+ *
+ * ```ts
+ * const [element, attachRef] = useCallbackRef<HTMLDivElement>()
+ *
+ * useEffect(() => {
+ *   if (!element) return
+ *
+ *   const calendar = new FullCalendar.Calendar(element)
+ *
+ *   return () => {
+ *     calendar.destroy()
+ *   }
+ * }, [element])
+ *
+ * return <div ref={attachRef} />
+ * ```
+ *
+ * @category refs
+ */
+export default function useCallbackRef<TValue = unknown>(): [
+  TValue | null,
+  (ref: TValue | null) => void,
+] {
+  return useState<TValue | null>(null)
+}
diff --git a/hooks/useCommittedRef.ts b/hooks/useCommittedRef.ts
new file mode 100644
index 0000000..0be6182
--- /dev/null
+++ b/hooks/useCommittedRef.ts
@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * Creates a `Ref` whose value is updated in an effect, ensuring the most recent
+ * value is the one rendered with. Generally only required for Concurrent mode usage
+ * where previous work in `render()` may be discarded before being used.
+ *
+ * This is safe to access in an event handler.
+ *
+ * @param value The `Ref` value
+ */
+function useCommittedRef<TValue>(
+  value: TValue,
+): React.MutableRefObject<TValue> {
+  const ref = useRef(value)
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+  return ref
+}
+
+export default useCommittedRef
diff --git a/hooks/useCustomEffect.ts b/hooks/useCustomEffect.ts
new file mode 100644
index 0000000..b1cabcd
--- /dev/null
+++ b/hooks/useCustomEffect.ts
@@ -0,0 +1,93 @@
+import {
+  DependencyList,
+  EffectCallback,
+  useRef,
+  useEffect,
+  useDebugValue,
+} from 'react'
+import useWillUnmount from './useWillUnmount'
+import useMounted from './useMounted'
+
+export type EffectHook = (effect: EffectCallback, deps?: DependencyList) => void
+
+export type IsEqual<TDeps extends DependencyList> = (
+  nextDeps: TDeps,
+  prevDeps: TDeps,
+) => boolean
+
+export type CustomEffectOptions<TDeps extends DependencyList> = {
+  isEqual: IsEqual<TDeps>
+  effectHook?: EffectHook
+}
+
+type CleanUp = {
+  (): void
+  cleanup?: ReturnType<EffectCallback>
+}
+
+/**
+ * a useEffect() hook with customized depedency comparision
+ *
+ * @param effect The effect callback
+ * @param dependencies A list of dependencies
+ * @param isEqual A function comparing the next and previous dependencyLists
+ */
+function useCustomEffect<TDeps extends DependencyList = DependencyList>(
+  effect: EffectCallback,
+  dependencies: TDeps,
+  isEqual: IsEqual<TDeps>,
+): void
+/**
+ * a useEffect() hook with customized depedency comparision
+ *
+ * @param effect The effect callback
+ * @param dependencies A list of dependencies
+ * @param options
+ * @param options.isEqual A function comparing the next and previous dependencyLists
+ * @param options.effectHook the underlying effect hook used, defaults to useEffect
+ */
+function useCustomEffect<TDeps extends DependencyList = DependencyList>(
+  effect: EffectCallback,
+  dependencies: TDeps,
+  options: CustomEffectOptions<TDeps>,
+): void
+function useCustomEffect<TDeps extends DependencyList = DependencyList>(
+  effect: EffectCallback,
+  dependencies: TDeps,
+  isEqualOrOptions: IsEqual<TDeps> | CustomEffectOptions<TDeps>,
+) {
+  const isMounted = useMounted()
+  const { isEqual, effectHook = useEffect } =
+    typeof isEqualOrOptions === 'function'
+      ? { isEqual: isEqualOrOptions }
+      : isEqualOrOptions
+
+  const dependenciesRef = useRef<TDeps>()
+  dependenciesRef.current = dependencies
+
+  const cleanupRef = useRef<CleanUp | null>(null)
+
+  effectHook(() => {
+    // If the ref the is `null` it's either the first effect or the last effect
+    // ran and was cleared, meaning _this_ update should run, b/c the equality
+    // check failed on in the cleanup of the last effect.
+    if (cleanupRef.current === null) {
+      const cleanup = effect()
+
+      cleanupRef.current = () => {
+        if (isMounted() && isEqual(dependenciesRef.current!, dependencies)) {
+          return
+        }
+
+        cleanupRef.current = null
+        if (cleanup) cleanup()
+      }
+    }
+
+    return cleanupRef.current
+  })
+
+  useDebugValue(effect)
+}
+
+export default useCustomEffect
diff --git a/hooks/useDebouncedCallback.ts b/hooks/useDebouncedCallback.ts
new file mode 100644
index 0000000..e0bd617
--- /dev/null
+++ b/hooks/useDebouncedCallback.ts
@@ -0,0 +1,186 @@
+import { useMemo, useRef } from 'react'
+import useTimeout from './useTimeout'
+import useEventCallback from './useEventCallback'
+import useWillUnmount from './useWillUnmount'
+
+export interface UseDebouncedCallbackOptions {
+  wait: number
+  leading?: boolean
+  trailing?: boolean
+  maxWait?: number
+}
+
+export interface UseDebouncedCallbackOptionsLeading
+  extends UseDebouncedCallbackOptions {
+  leading: true
+}
+
+/**
+ * Creates a debounced function that will invoke the input function after the
+ * specified wait.
+ *
+ * > Heads up! debounced functions are not pure since they are called in a timeout
+ * > Don't call them inside render.
+ *
+ * @param fn a function that will be debounced
+ * @param waitOrOptions a wait in milliseconds or a debounce configuration
+ */
+function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
+  fn: TCallback,
+  options: UseDebouncedCallbackOptionsLeading,
+): (...args: Parameters<TCallback>) => ReturnType<TCallback>
+
+/**
+ * Creates a debounced function that will invoke the input function after the
+ * specified wait.
+ *
+ * > Heads up! debounced functions are not pure since they are called in a timeout
+ * > Don't call them inside render.
+ *
+ * @param fn a function that will be debounced
+ * @param waitOrOptions a wait in milliseconds or a debounce configuration
+ */
+function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
+  fn: TCallback,
+  waitOrOptions: number | UseDebouncedCallbackOptions,
+): (...args: Parameters<TCallback>) => ReturnType<TCallback> | undefined
+
+function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
+  fn: TCallback,
+  waitOrOptions: number | UseDebouncedCallbackOptions,
+): (...args: Parameters<TCallback>) => ReturnType<TCallback> | undefined {
+  const lastCallTimeRef = useRef<number | null>(null)
+  const lastInvokeTimeRef = useRef(0)
+  const returnValueRef = useRef<ReturnType<TCallback>>()
+
+  const isTimerSetRef = useRef(false)
+  const lastArgsRef = useRef<unknown[] | null>(null)
+  // Use any to bypass type issue with setTimeout.
+  const timerRef = useRef<any>(0)
+
+  const handleCallback = useEventCallback(fn)
+
+  const {
+    wait,
+    maxWait,
+    leading = false,
+    trailing = true,
+  } = typeof waitOrOptions === 'number'
+    ? ({ wait: waitOrOptions } as UseDebouncedCallbackOptions)
+    : waitOrOptions
+
+  const timeout = useTimeout()
+
+  useWillUnmount(() => {
+    clearTimeout(timerRef.current)
+    isTimerSetRef.current = false
+  })
+
+  return useMemo(() => {
+    const hasMaxWait = !!maxWait
+
+    function leadingEdge(time: number) {
+      // Reset any `maxWait` timer.
+      lastInvokeTimeRef.current = time
+
+      // Start the timer for the trailing edge.
+      isTimerSetRef.current = true
+      timeout.set(timerExpired, wait)
+
+      if (!leading) {
+        return returnValueRef.current
+      }
+
+      return invokeFunc(time)
+    }
+
+    function trailingEdge(time: number) {
+      isTimerSetRef.current = false
+
+      // Only invoke if we have `lastArgs` which means `func` has been
+      // debounced at least once.
+      if (trailing && lastArgsRef.current) {
+        return invokeFunc(time)
+      }
+
+      lastArgsRef.current = null
+      return returnValueRef.current
+    }
+
+    function timerExpired() {
+      var time = Date.now()
+
+      if (shouldInvoke(time)) {
+        return trailingEdge(time)
+      }
+
+      const timeSinceLastCall = time - (lastCallTimeRef.current ?? 0)
+      const timeSinceLastInvoke = time - lastInvokeTimeRef.current
+      const timeWaiting = wait - timeSinceLastCall
+
+      // Restart the timer.
+      timeout.set(
+        timerExpired,
+        hasMaxWait
+          ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
+          : timeWaiting,
+      )
+    }
+
+    function invokeFunc(time: number) {
+      const args = lastArgsRef.current ?? []
+
+      lastArgsRef.current = null
+      lastInvokeTimeRef.current = time
+
+      const retValue = handleCallback(...args)
+      returnValueRef.current = retValue
+      return retValue
+    }
+
+    function shouldInvoke(time: number) {
+      const timeSinceLastCall = time - (lastCallTimeRef.current ?? 0)
+      const timeSinceLastInvoke = time - lastInvokeTimeRef.current
+
+      // Either this is the first call, activity has stopped and we're at the
+      // trailing edge, the system time has gone backwards and we're treating
+      // it as the trailing edge, or we've hit the `maxWait` limit.
+      return (
+        lastCallTimeRef.current === null ||
+        timeSinceLastCall >= wait ||
+        timeSinceLastCall < 0 ||
+        (hasMaxWait && timeSinceLastInvoke >= maxWait)
+      )
+    }
+
+    return (...args: any[]) => {
+      const time = Date.now()
+      const isInvoking = shouldInvoke(time)
+
+      lastArgsRef.current = args
+      lastCallTimeRef.current = time
+
+      if (isInvoking) {
+        if (!isTimerSetRef.current) {
+          return leadingEdge(lastCallTimeRef.current)
+        }
+
+        if (hasMaxWait) {
+          // Handle invocations in a tight loop.
+          isTimerSetRef.current = true
+          timerRef.current = setTimeout(timerExpired, wait)
+          return invokeFunc(lastCallTimeRef.current)
+        }
+      }
+
+      if (!isTimerSetRef.current) {
+        isTimerSetRef.current = true
+        timerRef.current = setTimeout(timerExpired, wait)
+      }
+
+      return returnValueRef.current
+    }
+  }, [handleCallback, wait, maxWait, leading, trailing])
+}
+
+export default useDebouncedCallback
diff --git a/hooks/useDebouncedState.ts b/hooks/useDebouncedState.ts
new file mode 100644
index 0000000..af02018
--- /dev/null
+++ b/hooks/useDebouncedState.ts
@@ -0,0 +1,32 @@
+import { useState, Dispatch, SetStateAction } from 'react'
+import useDebouncedCallback, {
+  UseDebouncedCallbackOptions,
+} from './useDebouncedCallback'
+
+/**
+ * Similar to `useState`, except the setter function is debounced by
+ * the specified delay. Unlike `useState`, the returned setter is not "pure" having
+ * the side effect of scheduling an update in a timeout, which makes it unsafe to call
+ * inside of the component render phase.
+ *
+ * ```ts
+ * const [value, setValue] = useDebouncedState('test', 500)
+ *
+ * setValue('test2')
+ * ```
+ *
+ * @param initialState initial state value
+ * @param delayOrOptions The milliseconds delay before a new value is set, or options object
+ */
+export default function useDebouncedState<T>(
+  initialState: T | (() => T),
+  delayOrOptions: number | UseDebouncedCallbackOptions,
+): [T, Dispatch<SetStateAction<T>>] {
+  const [state, setState] = useState(initialState)
+
+  const debouncedSetState = useDebouncedCallback<Dispatch<SetStateAction<T>>>(
+    setState,
+    delayOrOptions,
+  )
+  return [state, debouncedSetState]
+}
diff --git a/hooks/useDebouncedValue.ts b/hooks/useDebouncedValue.ts
new file mode 100644
index 0000000..37e4565
--- /dev/null
+++ b/hooks/useDebouncedValue.ts
@@ -0,0 +1,48 @@
+import { useEffect, useDebugValue, useRef } from 'react'
+import useDebouncedState from './useDebouncedState'
+import { UseDebouncedCallbackOptions } from './useDebouncedCallback'
+
+const defaultIsEqual = (a: any, b: any) => a === b
+
+export type UseDebouncedValueOptions = UseDebouncedCallbackOptions & {
+  isEqual?: (a: any, b: any) => boolean
+}
+
+/**
+ * Debounce a value change by a specified number of milliseconds. Useful
+ * when you want need to trigger a change based on a value change, but want
+ * to defer changes until the changes reach some level of infrequency.
+ *
+ * @param value
+ * @param waitOrOptions
+ * @returns
+ */
+function useDebouncedValue<TValue>(
+  value: TValue,
+  waitOrOptions: number | UseDebouncedValueOptions = 500,
+): TValue {
+  const previousValueRef = useRef<TValue | null>(value)
+
+  const isEqual =
+    typeof waitOrOptions === 'object'
+      ? waitOrOptions.isEqual || defaultIsEqual
+      : defaultIsEqual
+
+  const [debouncedValue, setDebouncedValue] = useDebouncedState(
+    value,
+    waitOrOptions,
+  )
+
+  useDebugValue(debouncedValue)
+
+  useEffect(() => {
+    if (!isEqual || !isEqual(previousValueRef.current, value)) {
+      previousValueRef.current = value
+      setDebouncedValue(value)
+    }
+  })
+
+  return debouncedValue
+}
+
+export default useDebouncedValue
diff --git a/hooks/useEventCallback.ts b/hooks/useEventCallback.ts
new file mode 100644
index 0000000..b6f85d2
--- /dev/null
+++ b/hooks/useEventCallback.ts
@@ -0,0 +1,14 @@
+import { useEffect, useCallback, useRef } from 'react'
+import useCommittedRef from './useCommittedRef'
+
+export default function useEventCallback<
+  TCallback extends (...args: any[]) => any
+>(fn?: TCallback | null): TCallback {
+  const ref = useCommittedRef(fn)
+  return useCallback(
+    function(...args: any[]) {
+      return ref.current && ref.current(...args)
+    },
+    [ref],
+  ) as any
+}
diff --git a/hooks/useEventListener.ts b/hooks/useEventListener.ts
new file mode 100644
index 0000000..705a892
--- /dev/null
+++ b/hooks/useEventListener.ts
@@ -0,0 +1,37 @@
+import { useEffect } from 'react'
+
+import useEventCallback from './useEventCallback'
+
+type EventHandler<T, K extends keyof DocumentEventMap> = (
+  this: T,
+  ev: DocumentEventMap[K],
+) => any
+
+/**
+ * Attaches an event handler outside directly to specified DOM element
+ * bypassing the react synthetic event system.
+ *
+ * @param element The target to listen for events on
+ * @param event The DOM event name
+ * @param handler An event handler
+ * @param capture Whether or not to listen during the capture event phase
+ */
+export default function useEventListener<
+  T extends Element | Document | Window,
+  K extends keyof DocumentEventMap
+>(
+  eventTarget: T | (() => T),
+  event: K,
+  listener: EventHandler<T, K>,
+  capture: boolean | AddEventListenerOptions = false,
+) {
+  const handler = useEventCallback(listener)
+
+  useEffect(() => {
+    const target =
+      typeof eventTarget === 'function' ? eventTarget() : eventTarget
+
+    target.addEventListener(event, handler, capture)
+    return () => target.removeEventListener(event, handler, capture)
+  }, [eventTarget])
+}
diff --git a/hooks/useFocusManager.ts b/hooks/useFocusManager.ts
new file mode 100644
index 0000000..8219284
--- /dev/null
+++ b/hooks/useFocusManager.ts
@@ -0,0 +1,115 @@
+import { useCallback, useMemo, useRef } from 'react'
+import useEventCallback from './useEventCallback'
+import useMounted from './useMounted'
+
+export interface FocusManagerOptions {
+  /**
+   * A callback fired when focus shifts. returning `false` will prevent
+   * handling the focus event
+   */
+  willHandle?(focused: boolean, event: React.FocusEvent): boolean | void
+
+  /**
+   * A callback fired after focus is handled but before onChange is called
+   */
+  didHandle?(focused: boolean, event: React.FocusEvent): void
+
+  /**
+   * A callback fired after focus has changed
+   */
+  onChange?(focused: boolean, event: React.FocusEvent): void
+
+  /**
+   * When true, the event handlers will not report focus changes
+   */
+  isDisabled: () => boolean
+}
+
+export interface FocusController {
+  onBlur: (event: any) => void
+  onFocus: (event: any) => void
+}
+/**
+ * useFocusManager provides a way to track and manage focus as it moves around
+ * a container element. An `onChange` is fired when focus enters or leaves the
+ * element, but not when it moves around inside the element, similar to
+ * `pointerenter` and `pointerleave` DOM events.
+ *
+ * ```tsx
+ * const [focused, setFocusState] = useState(false)
+ *
+ * const { onBlur, onFocus } = useFocusManager({
+ *   onChange: nextFocused => setFocusState(nextFocused)
+ * })
+ *
+ * return (
+ *   <div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}>
+ *     {String(focused)}
+ *     <input />
+ *     <input />
+ *
+ *     <button>A button</button>
+ *   </div>
+ * ```
+ *
+ * @returns a memoized FocusController containing event handlers
+ */
+export default function useFocusManager(
+  opts: FocusManagerOptions,
+): FocusController {
+  const isMounted = useMounted()
+
+  const lastFocused = useRef<boolean | undefined>()
+  const handle = useRef<number | undefined>()
+
+  const willHandle = useEventCallback(opts.willHandle)
+  const didHandle = useEventCallback(opts.didHandle)
+  const onChange = useEventCallback(opts.onChange)
+  const isDisabled = useEventCallback(opts.isDisabled)
+
+  const handleChange = useCallback(
+    (focused: boolean, event: React.FocusEvent) => {
+      if (focused !== lastFocused.current) {
+        didHandle?.(focused, event)
+
+        // only fire a change when unmounted if its a blur
+        if (isMounted() || !focused) {
+          lastFocused.current = focused
+          onChange?.(focused, event)
+        }
+      }
+    },
+    [isMounted, didHandle, onChange, lastFocused],
+  )
+
+  const handleFocusChange = useCallback(
+    (focused: boolean, event: React.FocusEvent) => {
+      if (isDisabled()) return
+      if (event && event.persist) event.persist()
+
+      if (willHandle?.(focused, event) === false) {
+        return
+      }
+      clearTimeout(handle.current)
+
+      if (focused) {
+        handleChange(focused, event)
+      } else {
+        handle.current = window.setTimeout(() => handleChange(focused, event))
+      }
+    },
+    [willHandle, handleChange],
+  )
+
+  return useMemo(
+    () => ({
+      onBlur: (event: React.FocusEvent) => {
+        handleFocusChange(false, event)
+      },
+      onFocus: (event: React.FocusEvent) => {
+        handleFocusChange(true, event)
+      },
+    }),
+    [handleFocusChange],
+  )
+}
diff --git a/hooks/useForceUpdate.ts b/hooks/useForceUpdate.ts
new file mode 100644
index 0000000..ab633df
--- /dev/null
+++ b/hooks/useForceUpdate.ts
@@ -0,0 +1,24 @@
+import { useReducer } from 'react'
+
+/**
+ * Returns a function that triggers a component update. the hook equivalent to
+ * `this.forceUpdate()` in a class component. In most cases using a state value directly
+ * is preferable but may be required in some advanced usages of refs for interop or
+ * when direct DOM manipulation is required.
+ *
+ * ```ts
+ * const forceUpdate = useForceUpdate();
+ *
+ * const updateOnClick = useCallback(() => {
+ *  forceUpdate()
+ * }, [forceUpdate])
+ *
+ * return <button type="button" onClick={updateOnClick}>Hi there</button>
+ * ```
+ */
+export default function useForceUpdate(): () => void {
+  // The toggling state value is designed to defeat React optimizations for skipping
+  // updates when they are strictly equal to the last state value
+  const [, dispatch] = useReducer((state: boolean) => !state, false)
+  return dispatch as () => void
+}
diff --git a/hooks/useGlobalListener.ts b/hooks/useGlobalListener.ts
new file mode 100644
index 0000000..f2e6243
--- /dev/null
+++ b/hooks/useGlobalListener.ts
@@ -0,0 +1,31 @@
+import useEventListener from './useEventListener'
+import { useCallback } from 'react'
+
+type DocumentEventHandler<K extends keyof DocumentEventMap> = (
+  this: Document,
+  ev: DocumentEventMap[K],
+) => any
+
+/**
+ * Attaches an event handler outside directly to the `document`,
+ * bypassing the react synthetic event system.
+ *
+ * ```ts
+ * useGlobalListener('keydown', (event) => {
+ *  console.log(event.key)
+ * })
+ * ```
+ *
+ * @param event The DOM event name
+ * @param handler An event handler
+ * @param capture Whether or not to listen during the capture event phase
+ */
+export default function useGlobalListener<K extends keyof DocumentEventMap>(
+  event: K,
+  handler: DocumentEventHandler<K>,
+  capture: boolean | AddEventListenerOptions = false,
+) {
+  const documentTarget = useCallback(() => document, [])
+
+  return useEventListener(documentTarget, event, handler, capture)
+}
diff --git a/hooks/useImage.ts b/hooks/useImage.ts
new file mode 100644
index 0000000..1261bdb
--- /dev/null
+++ b/hooks/useImage.ts
@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react'
+
+type State = {
+  image: HTMLImageElement | null
+  error: unknown | null
+}
+
+/**
+ * Fetch and load an image for programatic use such as in a `<canvas>` element.
+ *
+ * @param imageOrUrl The `HtmlImageElement` or image url to load
+ * @param crossOrigin The `crossorigin` attribute to set
+ *
+ * ```ts
+ * const { image, error } = useImage('/static/kittens.png')
+ * const ref = useRef<HTMLCanvasElement>()
+ *
+ * useEffect(() => {
+ *   const ctx = ref.current.getContext('2d')
+ *
+ *   if (image) {
+ *     ctx.drawImage(image, 0, 0)
+ *   }
+ * }, [ref, image])
+ *
+ * return (
+ *   <>
+ *     {error && "there was a problem loading the image"}
+ *     <canvas ref={ref} />
+ *   </>
+ * ```
+ */
+export default function useImage(
+  imageOrUrl?: string | HTMLImageElement | null | undefined,
+  crossOrigin?: 'anonymous' | 'use-credentials' | string,
+) {
+  const [state, setState] = useState<State>({
+    image: null,
+    error: null,
+  })
+
+  useEffect(() => {
+    if (!imageOrUrl) return undefined
+
+    let image: HTMLImageElement
+
+    if (typeof imageOrUrl === 'string') {
+      image = new Image()
+      if (crossOrigin) image.crossOrigin = crossOrigin
+      image.src = imageOrUrl
+    } else {
+      image = imageOrUrl
+
+      if (image.complete && image.naturalHeight > 0) {
+        setState({ image, error: null })
+        return
+      }
+    }
+
+    function onLoad() {
+      setState({ image, error: null })
+    }
+
+    function onError(error: ErrorEvent) {
+      setState({ image, error })
+    }
+
+    image.addEventListener('load', onLoad)
+    image.addEventListener('error', onError)
+
+    return () => {
+      image.removeEventListener('load', onLoad)
+      image.removeEventListener('error', onError)
+    }
+  }, [imageOrUrl, crossOrigin])
+
+  return state
+}
diff --git a/hooks/useImmediateUpdateEffect.ts b/hooks/useImmediateUpdateEffect.ts
new file mode 100644
index 0000000..526210b
--- /dev/null
+++ b/hooks/useImmediateUpdateEffect.ts
@@ -0,0 +1,3 @@
+import useUpdateImmediateEffect from './useUpdateImmediateEffect'
+
+export default useUpdateImmediateEffect
diff --git a/hooks/useIntersectionObserver.ts b/hooks/useIntersectionObserver.ts
new file mode 100644
index 0000000..984768d
--- /dev/null
+++ b/hooks/useIntersectionObserver.ts
@@ -0,0 +1,86 @@
+import { useState } from 'react'
+
+import useStableMemo from './useStableMemo'
+import useEffect from './useIsomorphicEffect'
+import useEventCallback from './useEventCallback'
+
+/**
+ * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
+ * a DOM Element that returns it's entries as they arrive.
+ *
+ * @param element The DOM element to observe
+ * @param init IntersectionObserver options with a notable change,
+ * unlike a plain IntersectionObserver `root: null` means "not provided YET",
+ * and the hook will wait until it receives a non-null value to set up the observer.
+ * This change allows for easier syncing of element and root values in a React
+ * context.
+ */
+function useIntersectionObserver<TElement extends Element>(
+  element: TElement | null | undefined,
+  options?: IntersectionObserverInit,
+): IntersectionObserverEntry[]
+/**
+ * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
+ * a DOM Element. This overload does not trigger component updates when receiving new
+ * entries. This allows for finer grained performance optimizations by the consumer.
+ *
+ * @param element The DOM element to observe
+ * @param callback A listener for intersection updates.
+ * @param init IntersectionObserver options with a notable change,
+ * unlike a plain IntersectionObserver `root: null` means "not provided YET",
+ * and the hook will wait until it receives a non-null value to set up the observer.
+ * This change allows for easier syncing of element and root values in a React
+ * context.
+ *
+ */
+function useIntersectionObserver<TElement extends Element>(
+  element: TElement | null | undefined,
+  callback: IntersectionObserverCallback,
+  options?: IntersectionObserverInit,
+): void
+function useIntersectionObserver<TElement extends Element>(
+  element: TElement | null | undefined,
+  callbackOrOptions?: IntersectionObserverCallback | IntersectionObserverInit,
+  maybeOptions?: IntersectionObserverInit,
+): void | IntersectionObserverEntry[] {
+  let callback: IntersectionObserverCallback | undefined
+  let options: IntersectionObserverInit
+  if (typeof callbackOrOptions === 'function') {
+    callback = callbackOrOptions
+    options = maybeOptions || {}
+  } else {
+    options = callbackOrOptions || {}
+  }
+  const { threshold, root, rootMargin } = options
+  const [entries, setEntry] = useState<IntersectionObserverEntry[] | null>(null)
+
+  const handler = useEventCallback(callback || setEntry)
+
+  // We wait for element to exist before constructing
+  const observer = useStableMemo(
+    () =>
+      root !== null &&
+      typeof IntersectionObserver !== 'undefined' &&
+      new IntersectionObserver(handler, {
+        threshold,
+        root,
+        rootMargin,
+      }),
+
+    [handler, root, rootMargin, threshold && JSON.stringify(threshold)],
+  )
+
+  useEffect(() => {
+    if (!element || !observer) return
+
+    observer.observe(element)
+
+    return () => {
+      observer.unobserve(element)
+    }
+  }, [observer, element])
+
+  return callback ? undefined : entries || []
+}
+
+export default useIntersectionObserver
diff --git a/hooks/useInterval.ts b/hooks/useInterval.ts
new file mode 100644
index 0000000..bca4104
--- /dev/null
+++ b/hooks/useInterval.ts
@@ -0,0 +1,104 @@
+import { useEffect } from 'react'
+import useCommittedRef from './useCommittedRef'
+
+/**
+ * Creates a `setInterval` that is properly cleaned up when a component unmounted
+ *
+ * ```tsx
+ *  function Timer() {
+ *    const [timer, setTimer] = useState(0)
+ *    useInterval(() => setTimer(i => i + 1), 1000)
+ *
+ *    return <span>{timer} seconds past</span>
+ *  }
+ * ```
+ *
+ * @param fn an function run on each interval
+ * @param ms The milliseconds duration of the interval
+ */
+function useInterval(fn: () => void, ms: number): void
+
+/**
+ * Creates a pausable `setInterval` that is properly cleaned up when a component unmounted
+ *
+ * ```tsx
+ *  const [paused, setPaused] = useState(false)
+ *  const [timer, setTimer] = useState(0)
+ *
+ *  useInterval(() => setTimer(i => i + 1), 1000, paused)
+ *
+ *  return (
+ *    <span>
+ *      {timer} seconds past
+ *
+ *      <button onClick={() => setPaused(p => !p)}>{paused ? 'Play' : 'Pause' }</button>
+ *    </span>
+ * )
+ * ```
+ *
+ * @param fn an function run on each interval
+ * @param ms The milliseconds duration of the interval
+ * @param paused Whether or not the interval is currently running
+ */
+function useInterval(fn: () => void, ms: number, paused: boolean): void
+
+/**
+ * Creates a pausable `setInterval` that _fires_ immediately and is
+ * properly cleaned up when a component unmounted
+ *
+ * ```tsx
+ *  const [timer, setTimer] = useState(-1)
+ *  useInterval(() => setTimer(i => i + 1), 1000, false, true)
+ *
+ *  // will update to 0 on the first effect
+ *  return <span>{timer} seconds past</span>
+ * ```
+ *
+ * @param fn an function run on each interval
+ * @param ms The milliseconds duration of the interval
+ * @param paused Whether or not the interval is currently running
+ * @param runImmediately Whether to run the function immediately on mount or unpause
+ * rather than waiting for the first interval to elapse
+ *
+
+ */
+function useInterval(
+  fn: () => void,
+  ms: number,
+  paused: boolean,
+  runImmediately: boolean,
+): void
+
+function useInterval(
+  fn: () => void,
+  ms: number,
+  paused: boolean = false,
+  runImmediately: boolean = false,
+): void {
+  let handle: number
+  const fnRef = useCommittedRef(fn)
+  // this ref is necessary b/c useEffect will sometimes miss a paused toggle
+  // orphaning a setTimeout chain in the aether, so relying on it's refresh logic is not reliable.
+  const pausedRef = useCommittedRef(paused)
+  const tick = () => {
+    if (pausedRef.current) return
+    fnRef.current()
+    schedule() // eslint-disable-line no-use-before-define
+  }
+
+  const schedule = () => {
+    clearTimeout(handle)
+    handle = setTimeout(tick, ms) as any
+  }
+
+  useEffect(() => {
+    if (runImmediately) {
+      tick()
+    } else {
+      schedule()
+    }
+    return () => clearTimeout(handle)
+  }, [paused, runImmediately])
+}
+
+export default useInterval
diff --git a/hooks/useIsInitialRenderRef.ts b/hooks/useIsInitialRenderRef.ts
new file mode 100644
index 0000000..4ec4161
--- /dev/null
+++ b/hooks/useIsInitialRenderRef.ts
@@ -0,0 +1,31 @@
+import { useEffect, useLayoutEffect, useRef } from 'react'
+
+/**
+ * Returns ref that is `true` on the initial render and `false` on subsequent renders. It
+ * is StrictMode safe, so will reset correctly if the component is unmounted and remounted.
+ *
+ * This hook *must* be used before any effects that read it's value to be accurate.
+ */
+export default function useIsInitialRenderRef() {
+  const effectCount = useRef(0)
+  const isInitialRenderRef = useRef(true)
+
+  useLayoutEffect(() => {
+    effectCount.current += 1
+
+    if (effectCount.current >= 2) {
+      isInitialRenderRef.current = false
+    }
+  })
+
+  // Strict mode handling in React 18
+  useEffect(
+    () => () => {
+      effectCount.current = 0
+      isInitialRenderRef.current = true
+    },
+    [],
+  )
+
+  return isInitialRenderRef
+}
diff --git a/hooks/useIsomorphicEffect.ts b/hooks/useIsomorphicEffect.ts
new file mode 100644
index 0000000..2848107
--- /dev/null
+++ b/hooks/useIsomorphicEffect.ts
@@ -0,0 +1,20 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+const isReactNative =
+  typeof global !== 'undefined' &&
+  // @ts-ignore
+  global.navigator &&
+  // @ts-ignore
+  global.navigator.product === 'ReactNative'
+
+const isDOM = typeof document !== 'undefined'
+
+/**
+ * Is `useLayoutEffect` in a DOM or React Native environment, otherwise resolves to useEffect
+ * Only useful to avoid the console warning.
+ *
+ * PREFER `useEffect` UNLESS YOU KNOW WHAT YOU ARE DOING.
+ *
+ * @category effects
+ */
+export default isDOM || isReactNative ? useLayoutEffect : useEffect
diff --git a/hooks/useMap.ts b/hooks/useMap.ts
new file mode 100644
index 0000000..e241ddf
--- /dev/null
+++ b/hooks/useMap.ts
@@ -0,0 +1,64 @@
+import useForceUpdate from './useForceUpdate'
+import useStableMemo from './useStableMemo'
+
+export class ObservableMap<K, V> extends Map<K, V> {
+  private readonly listener: (map: ObservableMap<K, V>) => void
+
+  constructor(
+    listener: (map: ObservableMap<K, V>) => void,
+    init?: Iterable<Readonly<[K, V]>>,
+  ) {
+    super(init as any)
+
+    this.listener = listener
+  }
+
+  set(key: K, value: V): this {
+    super.set(key, value)
+    // When initializing the Map, the base Map calls this.set() before the
+    // listener is assigned so it will be undefined
+    if (this.listener) this.listener(this)
+    return this
+  }
+
+  delete(key: K): boolean {
+    let result = super.delete(key)
+    this.listener(this)
+    return result
+  }
+
+  clear(): void {
+    super.clear()
+    this.listener(this)
+  }
+}
+
+/**
+ * Create and return a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) that triggers rerenders when it's updated.
+ *
+ * ```tsx
+ * const customerAges = useMap<number>([
+ *  ['john', 24],
+ *  ['betsy', 25]
+ * ]);
+ *
+ * return (
+ *  <>
+ *    {Array.from(ids, ([name, age]) => (
+ *      <div>
+ *        {name}: {age}. <button onClick={() => ids.delete(name)}>X</button>
+ *      </div>
+ *    )}
+ *  </>
+ * )
+ * ```
+ *
+ * @param init initial Map entries
+ */
+function useMap<K, V>(init?: Iterable<Readonly<[K, V]>>) {
+  const forceUpdate = useForceUpdate()
+
+  return useStableMemo(() => new ObservableMap<K, V>(forceUpdate, init), [])
+}
+
+export default useMap
diff --git a/hooks/useMediaQuery.tsx b/hooks/useMediaQuery.tsx
new file mode 100644
index 0000000..325be12
--- /dev/null
+++ b/hooks/useMediaQuery.tsx
@@ -0,0 +1,89 @@
+import useEffect from './useIsomorphicEffect'
+import { useState } from 'react'
+
+interface RefCountedMediaQueryList extends MediaQueryList {
+  refCount: number
+}
+const matchersByWindow = new WeakMap<
+  Window,
+  Map<string, RefCountedMediaQueryList>
+>()
+
+const getMatcher = (
+  query: string | null,
+  targetWindow?: Window,
+): RefCountedMediaQueryList | undefined => {
+  if (!query || !targetWindow) return undefined
+
+  const matchers =
+    matchersByWindow.get(targetWindow) ||
+    new Map<string, RefCountedMediaQueryList>()
+
+  matchersByWindow.set(targetWindow, matchers)
+
+  let mql = matchers.get(query)
+  if (!mql) {
+    mql = targetWindow.matchMedia(query) as RefCountedMediaQueryList
+    mql.refCount = 0
+    matchers.set(mql.media, mql)
+  }
+  return mql
+}
+/**
+ * Match a media query and get updates as the match changes. The media string is
+ * passed directly to `window.matchMedia` and run as a Layout Effect, so initial
+ * matches are returned before the browser has a chance to paint.
+ *
+ * ```tsx
+ * function Page() {
+ *   const isWide = useMediaQuery('min-width: 1000px')
+ *
+ *   return isWide ? "very wide" : 'not so wide'
+ * }
+ * ```
+ *
+ * Media query lists are also reused globally, hook calls for the same query
+ * will only create a matcher once under the hood.
+ *
+ * @param query A media query
+ * @param targetWindow The window to match against, uses the globally available one as a default.
+ */
+export default function useMediaQuery(
+  query: string | null,
+  targetWindow: Window | undefined = typeof window === 'undefined'
+    ? undefined
+    : window,
+) {
+  const mql = getMatcher(query, targetWindow)
+
+  const [matches, setMatches] = useState(() => (mql ? mql.matches : false))
+
+  useEffect(() => {
+    let mql = getMatcher(query, targetWindow)
+    if (!mql) {
+      return setMatches(false)
+    }
+
+    let matchers = matchersByWindow.get(targetWindow!)
+
+    const handleChange = () => {
+      setMatches(mql!.matches)
+    }
+
+    mql.refCount++
+    mql.addListener(handleChange)
+
+    handleChange()
+
+    return () => {
+      mql!.removeListener(handleChange)
+      mql!.refCount--
+      if (mql!.refCount <= 0) {
+        matchers?.delete(mql!.media)
+      }
+      mql = undefined
+    }
+  }, [query])
+
+  return matches
+}
diff --git a/hooks/useMergeState.ts b/hooks/useMergeState.ts
new file mode 100644
index 0000000..d7280fc
--- /dev/null
+++ b/hooks/useMergeState.ts
@@ -0,0 +1,48 @@
+import { useCallback, useState } from 'react'
+
+type Updater<TState> = (state: TState) => Partial<TState> | null
+
+/**
+ * Updates state, partial updates are merged into existing state values
+ */
+export type MergeStateSetter<TState> = (
+  update: Updater<TState> | Partial<TState> | null,
+) => void
+
+/**
+ * Mimics a React class component's state model, of having a single unified
+ * `state` object and an updater that merges updates into the existing state, as
+ * opposed to replacing it.
+ *
+ * ```js
+ * const [state, setState] = useMergeState({ name: 'Betsy', age: 24 })
+ *
+ * setState({ name: 'Johan' }) // { name: 'Johan', age: 24 }
+ *
+ * setState(state => ({ age: state.age + 10 })) // { name: 'Johan', age: 34 }
+ * ```
+ *
+ * @param initialState The initial state object
+ */
+export default function useMergeState<TState extends {}>(
+  initialState: TState | (() =>  TState),
+): [TState, MergeStateSetter<TState>] {
+  const [state, setState] = useState<TState>(initialState)
+
+  const updater = useCallback(
+    (update: Updater<TState> | Partial<TState> | null) => {
+      if (update === null) return
+      if (typeof update === 'function') {
+        setState(state => {
+          const nextState = update(state)
+          return nextState == null ? state : { ...state, ...nextState }
+        })
+      } else {
+        setState(state => ({ ...state, ...update }))
+      }
+    },
+    [setState],
+  )
+
+  return [state, updater]
+}
diff --git a/hooks/useMergeStateFromProps.ts b/hooks/useMergeStateFromProps.ts
new file mode 100644
index 0000000..4ab0279
--- /dev/null
+++ b/hooks/useMergeStateFromProps.ts
@@ -0,0 +1,20 @@
+import useMergeState, { MergeStateSetter } from './useMergeState'
+
+type Mapper<TProps, TState> = (
+  props: TProps,
+  state: TState,
+) => null | Partial<TState>
+
+export default function useMergeStateFromProps<TProps, TState extends {}>(
+  props: TProps,
+  gDSFP: Mapper<TProps, TState>,
+  initialState: TState,
+): [TState, MergeStateSetter<TState>] {
+  const [state, setState] = useMergeState<TState>(initialState)
+
+  const nextState = gDSFP(props, state)
+
+  if (nextState !== null) setState(nextState)
+
+  return [state, setState]
+}
diff --git a/hooks/useMergedRefs.ts b/hooks/useMergedRefs.ts
new file mode 100644
index 0000000..cadfc3b
--- /dev/null
+++ b/hooks/useMergedRefs.ts
@@ -0,0 +1,42 @@
+import { useMemo } from 'react'
+
+type CallbackRef<T> = (ref: T | null) => void
+type Ref<T> = React.MutableRefObject<T> | CallbackRef<T>
+
+const toFnRef = <T>(ref?: Ref<T> | null) =>
+  !ref || typeof ref === 'function'
+    ? ref
+    : (value: T) => {
+        ref.current = value
+      }
+
+export function mergeRefs<T>(refA?: Ref<T> | null, refB?: Ref<T> | null) {
+  const a = toFnRef(refA)
+  const b = toFnRef(refB)
+  return (value: T | null) => {
+    if (a) a(value)
+    if (b) b(value)
+  }
+}
+
+/**
+ * Create and returns a single callback ref composed from two other Refs.
+ *
+ * ```tsx
+ * const Button = React.forwardRef((props, ref) => {
+ *   const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
+ *   const mergedRef = useMergedRefs(ref, attachRef);
+ *
+ *   return <button ref={mergedRef} {...props}/>
+ * })
+ * ```
+ *
+ * @param refA A Callback or mutable Ref
+ * @param refB A Callback or mutable Ref
+ * @category refs
+ */
+function useMergedRefs<T>(refA?: Ref<T> | null, refB?: Ref<T> | null) {
+  return useMemo(() => mergeRefs(refA, refB), [refA, refB])
+}
+
+export default useMergedRefs
diff --git a/hooks/useMountEffect.ts b/hooks/useMountEffect.ts
new file mode 100644
index 0000000..a4ed27f
--- /dev/null
+++ b/hooks/useMountEffect.ts
@@ -0,0 +1,24 @@
+import { useEffect, EffectCallback } from 'react'
+
+/**
+ * Run's an effect on mount, and is cleaned up on unmount. Generally
+ * useful for interop with non-react plugins or components
+ *
+ * ```ts
+ *  useMountEffect(() => {
+ *    const plugin = $.myPlugin(ref.current)
+ *
+ *    return () => {
+ *      plugin.destroy()
+ *    }
+ *  })
+ * ```
+ * @param effect An effect to run on mount
+ *
+ *  @category effects
+ */
+function useMountEffect(effect: EffectCallback) {
+  return useEffect(effect, [])
+}
+
+export default useMountEffect
diff --git a/hooks/useMounted.ts b/hooks/useMounted.ts
new file mode 100644
index 0000000..f19c4b0
--- /dev/null
+++ b/hooks/useMounted.ts
@@ -0,0 +1,33 @@
+import { useRef, useEffect } from 'react'
+
+/**
+ * Track whether a component is current mounted. Generally less preferable than
+ * properlly canceling effects so they don't run after a component is unmounted,
+ * but helpful in cases where that isn't feasible, such as a `Promise` resolution.
+ *
+ * @returns a function that returns the current isMounted state of the component
+ *
+ * ```ts
+ * const [data, setData] = useState(null)
+ * const isMounted = useMounted()
+ *
+ * useEffect(() => {
+ *   fetchdata().then((newData) => {
+ *      if (isMounted()) {
+ *        setData(newData);
+ *      }
+ *   })
+ * })
+ * ```
+ */
+export default function useMounted(): () => boolean {
+  const mounted = useRef(true)
+  const isMounted = useRef(() => mounted.current)
+  useEffect(() => {
+    mounted.current = true
+    return () => {
+      mounted.current = false
+    }
+  }, [])
+  return isMounted.current
+}
diff --git a/hooks/useMutationObserver.ts b/hooks/useMutationObserver.ts
new file mode 100644
index 0000000..47a1c45
--- /dev/null
+++ b/hooks/useMutationObserver.ts
@@ -0,0 +1,98 @@
+import useCustomEffect from './useCustomEffect'
+import { dequal } from 'dequal'
+import useImmediateUpdateEffect from './useImmediateUpdateEffect'
+import useEventCallback from './useEventCallback'
+import { useState } from 'react'
+
+type Deps = [Element | null | undefined, MutationObserverInit]
+
+function isDepsEqual(
+  [nextElement, nextConfig]: Deps,
+  [prevElement, prevConfig]: Deps,
+) {
+  return nextElement === prevElement && dequal(nextConfig, prevConfig)
+}
+
+/**
+ * Observe mutations on a DOM node or tree of DOM nodes.
+ * Depends on the `MutationObserver` api.
+ *
+ * ```tsx
+ * const [element, attachRef] = useCallbackRef(null);
+ *
+ * useMutationObserver(element, { subtree: true }, (records) => {
+ *
+ * });
+ *
+ * return (
+ *   <div ref={attachRef} />
+ * )
+ * ```
+ *
+ * @param element The DOM element to observe
+ * @param config The observer configuration
+ * @param callback A callback fired when a mutation occurs
+ */
+function useMutationObserver(
+  element: Element | null | undefined,
+  config: MutationObserverInit,
+  callback: MutationCallback,
+): void
+/**
+ * Observe mutations on a DOM node or tree of DOM nodes.
+ * use a `MutationObserver` and return records as the are received.
+ *
+ * ```tsx
+ * const [element, attachRef] = useCallbackRef(null);
+ *
+ * const records = useMutationObserver(element, { subtree: true });
+ *
+ * return (
+ *   <div ref={attachRef} />
+ * )
+ * ```
+ *
+ * @param element The DOM element to observe
+ * @param config The observer configuration
+ */
+function useMutationObserver(
+  element: Element | null | undefined,
+  config: MutationObserverInit,
+): MutationRecord[]
+function useMutationObserver(
+  element: Element | null | undefined,
+  config: MutationObserverInit,
+  callback?: MutationCallback,
+): MutationRecord[] | void {
+  const [records, setRecords] = useState<MutationRecord[] | null>(null)
+  const handler = useEventCallback(callback || setRecords)
+
+  useCustomEffect(
+    () => {
+      if (!element) return
+
+      // The behavior around reusing mutation observers is confusing
+      // observing again _should_ disable the last listener but doesn't
+      // seem to always be the case, maybe just in JSDOM? In any case the cost
+      // to redeclaring it is gonna be fairly low anyway, so make it simple
+      const observer = new MutationObserver(handler)
+
+      observer.observe(element, config)
+
+      return () => {
+        observer.disconnect()
+      }
+    },
+    [element, config],
+    {
+      isEqual: isDepsEqual,
+      // Intentionally done in render, otherwise observer will miss any
+      // changes made to the DOM during this update
+      effectHook: useImmediateUpdateEffect,
+    },
+  )
+
+  return callback ? void 0 : records || []
+}
+
+export default useMutationObserver
diff --git a/hooks/usePrevious.ts b/hooks/usePrevious.ts
new file mode 100644
index 0000000..3ec8793
--- /dev/null
+++ b/hooks/usePrevious.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * Store the last of some value. Tracked via a `Ref` only updating it
+ * after the component renders.
+ *
+ * Helpful if you need to compare a prop value to it's previous value during render.
+ *
+ * ```ts
+ * function Component(props) {
+ *   const lastProps = usePrevious(props)
+ *
+ *   if (lastProps.foo !== props.foo)
+ *     resetValueFromProps(props.foo)
+ * }
+ * ```
+ *
+ * @param value the value to track
+ */
+export default function usePrevious<T>(value: T): T | null {
+  const ref = useRef<T | null>(null)
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}
diff --git a/hooks/useRafInterval.ts b/hooks/useRafInterval.ts
new file mode 100644
index 0000000..d814624
--- /dev/null
+++ b/hooks/useRafInterval.ts
@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+
+import useCommittedRef from './useCommittedRef'
+
+function useRafInterval(fn: () => void, ms: number): void
+function useRafInterval(
+  fn: () => void,
+  ms: number,
+  paused: boolean = false,
+): void {
+  let handle: number
+  let start = new Date().getTime()
+
+  const fnRef = useCommittedRef(fn)
+  // this ref is necessary b/c useEffect will sometimes miss a paused toggle
+  // orphaning a setTimeout chain in the aether, so relying on it's refresh logic is not reliable.
+  const pausedRef = useCommittedRef(paused)
+
+  function loop() {
+    const current = new Date().getTime()
+    const delta = current - start
+
+    if (pausedRef.current) return
+
+    if (delta >= ms && fnRef.current) {
+      fnRef.current()
+      start = new Date().getTime()
+    }
+
+    cancelAnimationFrame(handle)
+    handle = requestAnimationFrame(loop)
+  }
+
+  useEffect(() => {
+    handle = requestAnimationFrame(loop)
+    return () => cancelAnimationFrame(handle)
+  }, [])
+}
+
+export default useRafInterval
diff --git a/hooks/useRefWithInitialValueFactory.ts b/hooks/useRefWithInitialValueFactory.ts
new file mode 100644
index 0000000..5ee0203
--- /dev/null
+++ b/hooks/useRefWithInitialValueFactory.ts
@@ -0,0 +1,25 @@
+import { useRef } from 'react'
+
+const dft: unique symbol = Symbol('default value sigil')
+
+/**
+ * Exactly the same as `useRef` except that the initial value is set via a
+ * factory function. Useful when the default is relatively costly to construct.
+ *
+ *  ```ts
+ *  const ref = useRefWithInitialValueFactory<ExpensiveValue>(() => constructExpensiveValue())
+ *
+ *  ```
+ *
+ * @param initialValueFactory A factory function returning the ref's default value
+ * @category refs
+ */
+export default function useRefWithInitialValueFactory<T>(
+  initialValueFactory: () => T,
+) {
+  const ref = useRef<T>(dft as T)
+  if (ref.current === dft) {
+    ref.current = initialValueFactory()
+  }
+  return ref
+}
diff --git a/hooks/useResizeObserver.ts b/hooks/useResizeObserver.ts
new file mode 100644
index 0000000..234a453
--- /dev/null
+++ b/hooks/useResizeObserver.ts
@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import useEffect from './useIsomorphicEffect'
+
+export interface Rect {
+  width: number
+  height: number
+  x?: number
+  y?: number
+}
+
+type Handler = (contentRect: Rect) => void
+
+const targetMap = new WeakMap<Element, Handler>()
+let resizeObserver: ResizeObserver
+
+function getResizeObserver() {
+  // eslint-disable-next-line no-return-assign
+  return (resizeObserver =
+    resizeObserver ||
+    new window.ResizeObserver((entries: ResizeObserverEntry[]) => {
+      entries.forEach(entry => {
+        const handler = targetMap.get(entry.target)
+        if (handler) handler(entry.contentRect)
+      })
+    }))
+}
+
+/**
+ * Efficiently observe size changes on an element. Depends on the `ResizeObserver` api,
+ * and polyfills are needed in older browsers.
+ *
+ * ```ts
+ * const [ref, attachRef] = useCallbackRef(null);
+ *
+ * const rect = useResizeObserver(ref);
+ *
+ * return (
+ *  <div ref={attachRef}>
+ *    {JSON.stringify(rect)}
+ *  </div>
+ * )
+ * ```
+ *
+ * @param element The DOM element to observe
+ */
+export default function useResizeObserver<TElement extends Element>(
+  element: TElement | null | undefined,
+): Rect | null {
+  const [rect, setRect] = useState<Rect | null>(null)
+
+  useEffect(() => {
+    if (!element) return
+
+    getResizeObserver().observe(element)
+
+    setRect(element.getBoundingClientRect())
+
+    targetMap.set(element, rect => {
+      setRect(rect)
+    })
+
+    return () => {
+      targetMap.delete(element)
+    }
+  }, [element])
+
+  return rect
+}
diff --git a/hooks/useSafeState.ts b/hooks/useSafeState.ts
new file mode 100644
index 0000000..531ebd3
--- /dev/null
+++ b/hooks/useSafeState.ts
@@ -0,0 +1,41 @@
+import { Dispatch, SetStateAction, useCallback } from 'react'
+import useMounted from './useMounted'
+import { AsyncSetState } from './useStateAsync'
+
+type StateSetter<TState> = Dispatch<SetStateAction<TState>>
+
+/**
+ * `useSafeState` takes the return value of a `useState` hook and wraps the
+ * setter to prevent updates onces the component has unmounted. Can used
+ * with `useMergeState` and `useStateAsync` as well
+ *
+ * @param state The return value of a useStateHook
+ *
+ * ```ts
+ * const [show, setShow] = useSafeState(useState(true));
+ * ```
+ */
+function useSafeState<TState>(
+  state: [TState, AsyncSetState<TState>],
+): [TState, (stateUpdate: React.SetStateAction<TState>) => Promise<void>]
+function useSafeState<TState>(
+  state: [TState, StateSetter<TState>],
+): [TState, StateSetter<TState>]
+function useSafeState<TState>(
+  state: [TState, StateSetter<TState> | AsyncSetState<TState>],
+): [TState, StateSetter<TState> | AsyncSetState<TState>] {
+  const isMounted = useMounted()
+
+  return [
+    state[0],
+    useCallback(
+      (nextState: SetStateAction<TState>) => {
+        if (!isMounted()) return
+        return state[1](nextState)
+      },
+      [isMounted, state[1]],
+    ),
+  ]
+}
+
+export default useSafeState
diff --git a/hooks/useSet.ts b/hooks/useSet.ts
new file mode 100644
index 0000000..9840028
--- /dev/null
+++ b/hooks/useSet.ts
@@ -0,0 +1,57 @@
+import useForceUpdate from './useForceUpdate'
+import useStableMemo from './useStableMemo'
+
+export class ObservableSet<V> extends Set<V> {
+  private readonly listener: (map: ObservableSet<V>) => void
+
+  constructor(listener: (map: ObservableSet<V>) => void, init?: Iterable<V>) {
+    super(init as any)
+
+    this.listener = listener
+  }
+
+  add(value: V): this {
+    super.add(value)
+    // When initializing the Set, the base Set calls this.add() before the
+    // listener is assigned so it will be undefined
+    if (this.listener) this.listener(this)
+    return this
+  }
+
+  delete(value: V): boolean {
+    const result = super.delete(value)
+    this.listener(this)
+    return result
+  }
+
+  clear(): void {
+    super.clear()
+    this.listener(this)
+  }
+}
+
+/**
+ * Create and return a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) that triggers rerenders when it's updated.
+ *
+ * ```ts
+ * const ids = useSet<number>([1,2,3,4]);
+ *
+ * return (
+ *  <>
+ *    {Array.from(ids, id => (
+ *      <div>
+ *        id: {id}. <button onClick={() => ids.delete(id)}>X</button>
+ *      </div>
+ *    )}
+ *  </>
+ * )
+ * ```
+ *
+ * @param init initial Set values
+ */
+function useSet<V>(init?: Iterable<V>): ObservableSet<V> {
+  const forceUpdate = useForceUpdate()
+  return useStableMemo(() => new ObservableSet<V>(forceUpdate, init), [])
+}
+
+export default useSet
diff --git a/hooks/useStableMemo.ts b/hooks/useStableMemo.ts
new file mode 100644
index 0000000..094630d
--- /dev/null
+++ b/hooks/useStableMemo.ts
@@ -0,0 +1,54 @@
+import { DependencyList, useRef } from 'react'
+
+function isEqual(a: DependencyList, b: DependencyList) {
+  if (a.length !== b.length) return false
+
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false
+    }
+  }
+  return true
+}
+
+type DepsCache<T> = {
+  deps?: DependencyList
+  result: T
+}
+
+/**
+ * Identical to `useMemo` _except_ that it provides a semantic guarantee that
+ * values will not be invalidated unless the dependencies change. This is unlike
+ * the built in `useMemo` which may discard memoized values for performance reasons.
+ *
+ * @param factory A function that returns a value to be memoized
+ * @param deps A dependency array
+ */
+export default function useStableMemo<T>(
+  factory: () => T,
+  deps?: DependencyList,
+): T {
+  let isValid: boolean = true
+
+  const valueRef = useRef<DepsCache<T>>()
+  // initial hook call
+  if (!valueRef.current) {
+    valueRef.current = {
+      deps,
+      result: factory(),
+    }
+    // subsequent calls
+  } else {
+    isValid = !!(
+      deps &&
+      valueRef.current.deps &&
+      isEqual(deps, valueRef.current.deps)
+    )
+  }
+
+  const cache = isValid ? valueRef.current : { deps, result: factory() }
+  // must update immediately so any sync renders here don't cause an infinite loop
+  valueRef.current = cache
+
+  return cache.result
+}
diff --git a/hooks/useStateAsync.ts b/hooks/useStateAsync.ts
new file mode 100644
index 0000000..fed1efc
--- /dev/null
+++ b/hooks/useStateAsync.ts
@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+type Updater<TState> = (state: TState) => TState
+
+export type AsyncSetState<TState> = (
+  stateUpdate: React.SetStateAction<TState>,
+) => Promise<TState>
+
+/**
+ * A hook that mirrors `useState` in function and API, expect that setState
+ * calls return a promise that resolves after the state has been set (in an effect).
+ *
+ * This is _similar_ to the second callback in classy setState calls, but fires later.
+ *
+ * ```ts
+ * const [counter, setState] = useStateAsync(1);
+ *
+ * const handleIncrement = async () => {
+ *   await setState(2);
+ *   doWorkRequiringCurrentState()
+ * }
+ * ```
+ *
+ * @param initialState initialize with some state value same as `useState`
+ */
+export default function useStateAsync<TState>(
+  initialState: TState | (() => TState),
+): [TState, AsyncSetState<TState>] {
+  const [state, setState] = useState(initialState)
+  const resolvers = useRef<((state: TState) => void)[]>([])
+
+  useEffect(() => {
+    resolvers.current.forEach(resolve => resolve(state))
+    resolvers.current.length = 0
+  }, [state])
+
+  const setStateAsync = useCallback(
+    (update: Updater<TState> | TState) => {
+      return new Promise<TState>((resolve, reject) => {
+        setState(prevState => {
+          try {
+            let nextState: TState
+            // ugly instanceof for typescript
+            if (update instanceof Function) {
+              nextState = update(prevState)
+            } else {
+              nextState = update
+            }
+
+            // If state does not change, we must resolve the promise because
+            // react won't re-render and effect will not resolve. If there are already
+            // resolvers queued, then it should be safe to assume an update will happen
+            if (!resolvers.current.length && Object.is(nextState, prevState)) {
+              resolve(nextState)
+            } else {
+              resolvers.current.push(resolve)
+            }
+            return nextState
+          } catch (e) {
+            reject(e)
+            throw e
+          }
+        })
+      })
+    },
+    [setState],
+  )
+  return [state, setStateAsync]
+}
diff --git a/hooks/useThrottledEventHandler.ts b/hooks/useThrottledEventHandler.ts
new file mode 100644
index 0000000..0ab71cf
--- /dev/null
+++ b/hooks/useThrottledEventHandler.ts
@@ -0,0 +1,95 @@
+import { useRef, SyntheticEvent } from 'react'
+import useMounted from './useMounted'
+import useEventCallback from './useEventCallback'
+
+const isSyntheticEvent = (event: any): event is SyntheticEvent =>
+  typeof event.persist === 'function'
+
+export type ThrottledHandler<TEvent> = ((event: TEvent) => void) & {
+  clear(): void
+}
+
+/**
+ * Creates a event handler function throttled by `requestAnimationFrame` that
+ * returns the **most recent** event. Useful for noisy events that update react state.
+ *
+ * ```tsx
+ * function Component() {
+ *   const [position, setPosition] = useState();
+ *   const handleMove = useThrottledEventHandler<React.PointerEvent>(
+ *     (event) => {
+ *       setPosition({
+ *         top: event.clientX,
+ *         left: event.clientY,
+ *       })
+ *     }
+ *   )
+ *
+ *   return (
+ *     <div onPointerMove={handleMove}>
+ *        <div style={position} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @param handler An event handler function
+ * @typeParam TEvent The event object passed to the handler function
+ * @returns The event handler with a `clear` method attached for clearing any in-flight handler calls
+ *
+ */
+export default function useThrottledEventHandler<
+  TEvent extends object = SyntheticEvent
+>(handler: (event: TEvent) => void): ThrottledHandler<TEvent> {
+  const isMounted = useMounted()
+  const eventHandler = useEventCallback(handler)
+
+  const nextEventInfoRef = useRef<{
+    event: TEvent | null
+    handle: null | number
+  }>({
+    event: null,
+    handle: null,
+  })
+
+  const clear = () => {
+    cancelAnimationFrame(nextEventInfoRef.current.handle!)
+    nextEventInfoRef.current.handle = null
+  }
+
+  const handlePointerMoveAnimation = () => {
+    const { current: next } = nextEventInfoRef
+
+    if (next.handle && next.event) {
+      if (isMounted()) {
+        next.handle = null
+        eventHandler(next.event)
+      }
+    }
+    next.event = null
+  }
+
+  const throttledHandler = (event: TEvent) => {
+    if (!isMounted()) return
+
+    if (isSyntheticEvent(event)) {
+      event.persist()
+    }
+    // Special handling for a React.Konva event which reuses the
+    // event object as it bubbles, setting target
+    else if ('evt' in event) {
+      event = { ...event }
+    }
+
+    nextEventInfoRef.current.event = event
+    if (!nextEventInfoRef.current.handle) {
+      nextEventInfoRef.current.handle = requestAnimationFrame(
+        handlePointerMoveAnimation,
+      )
+    }
+  }
+
+  throttledHandler.clear = clear
+
+  return throttledHandler
+}
diff --git a/hooks/useTimeout.ts b/hooks/useTimeout.ts
new file mode 100644
index 0000000..1c61d72
--- /dev/null
+++ b/hooks/useTimeout.ts
@@ -0,0 +1,79 @@
+import { MutableRefObject, useMemo, useRef } from 'react'
+import useMounted from './useMounted'
+import useWillUnmount from './useWillUnmount'
+
+/*
+ * Browsers including Internet Explorer, Chrome, Safari, and Firefox store the
+ * delay as a 32-bit signed integer internally. This causes an integer overflow
+ * when using delays larger than 2,147,483,647 ms (about 24.8 days),
+ * resulting in the timeout being executed immediately.
+ *
+ * via: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+ */
+const MAX_DELAY_MS = 2 ** 31 - 1
+
+function setChainedTimeout(
+  handleRef: MutableRefObject<any>,
+  fn: () => void,
+  timeoutAtMs: number,
+) {
+  const delayMs = timeoutAtMs - Date.now()
+
+  handleRef.current =
+    delayMs <= MAX_DELAY_MS
+      ? setTimeout(fn, delayMs)
+      : setTimeout(
+          () => setChainedTimeout(handleRef, fn, timeoutAtMs),
+          MAX_DELAY_MS,
+        )
+}
+
+/**
+ * Returns a controller object for setting a timeout that is properly cleaned up
+ * once the component unmounts. New timeouts cancel and replace existing ones.
+ *
+ *
+ *
+ * ```tsx
+ * const { set, clear } = useTimeout();
+ * const [hello, showHello] = useState(false);
+ * //Display hello after 5 seconds
+ * set(() => showHello(true), 5000);
+ * return (
+ *   <div className="App">
+ *     {hello ? <h3>Hello</h3> : null}
+ *   </div>
+ * );
+ * ```
+ */
+export default function useTimeout() {
+  const isMounted = useMounted()
+
+  // types are confused between node and web here IDK
+  const handleRef = useRef<any>()
+
+  useWillUnmount(() => clearTimeout(handleRef.current))
+
+  return useMemo(() => {
+    const clear = () => clearTimeout(handleRef.current)
+
+    function set(fn: () => void, delayMs = 0): void {
+      if (!isMounted()) return
+
+      clear()
+
+      if (delayMs <= MAX_DELAY_MS) {
+        // For simplicity, if the timeout is short, just set a normal timeout.
+        handleRef.current = setTimeout(fn, delayMs)
+      } else {
+        setChainedTimeout(handleRef, fn, Date.now() + delayMs)
+      }
+    }
+
+    return {
+      set,
+      clear,
+      handleRef,
+    }
+  }, [])
+}
diff --git a/hooks/useToggleState.ts b/hooks/useToggleState.ts
new file mode 100644
index 0000000..e69ba86
--- /dev/null
+++ b/hooks/useToggleState.ts
@@ -0,0 +1,31 @@
+import { useReducer, Reducer } from 'react'
+
+/**
+ * Create a state setter pair for a boolean value that can be "switched".
+ * Unlike `useState(false)`, `useToggleState` will automatically flip the state
+ * value when its setter is called with no argument.
+ *
+ * @param initialState The initial boolean value
+ * @returns A tuple of the current state and a setter
+ *
+ * ```jsx
+ * const [show, toggleShow] = useToggleState(false)
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => toggleShow()}>
+ *       Toggle
+ *     <button>
+ *
+ *     {show && <strong>Now you can see me</strong>}
+ *   </>
+ * )
+ *
+ * ```
+ */
+export default function useToggleState(initialState: boolean = false) {
+  return useReducer<Reducer<boolean, boolean | undefined>>(
+    (state: boolean, action?: boolean) => (action == null ? !state : action),
+    initialState,
+  ) as [boolean, (value?: boolean) => void]
+}
diff --git a/hooks/useUpdateEffect.ts b/hooks/useUpdateEffect.ts
new file mode 100644
index 0000000..7e56ffe
--- /dev/null
+++ b/hooks/useUpdateEffect.ts
@@ -0,0 +1,34 @@
+import { useEffect, EffectCallback, DependencyList, useRef } from 'react'
+
+/**
+ * Runs an effect only when the dependencies have changed, skipping the
+ * initial "on mount" run. Caution, if the dependency list never changes,
+ * the effect is **never run**
+ *
+ * ```ts
+ *  const ref = useRef<HTMLInput>(null);
+ *
+ *  // focuses an element only if the focus changes, and not on mount
+ *  useUpdateEffect(() => {
+ *    const element = ref.current?.children[focusedIdx] as HTMLElement
+ *
+ *    element?.focus()
+ *
+ *  }, [focusedIndex])
+ * ```
+ * @param effect An effect to run on mount
+ *
+ * @category effects
+ */
+function useUpdateEffect(fn: EffectCallback, deps: DependencyList) {
+  const isFirst = useRef(true)
+  useEffect(() => {
+    if (isFirst.current) {
+      isFirst.current = false
+      return
+    }
+    return fn()
+  }, deps)
+}
+
+export default useUpdateEffect
diff --git a/hooks/useUpdateImmediateEffect.ts b/hooks/useUpdateImmediateEffect.ts
new file mode 100644
index 0000000..d282ae3
--- /dev/null
+++ b/hooks/useUpdateImmediateEffect.ts
@@ -0,0 +1,43 @@
+import { DependencyList, useRef, EffectCallback } from 'react'
+import useStableMemo from './useStableMemo'
+import useWillUnmount from './useWillUnmount'
+
+/**
+ * An _immediate_ effect that runs an effect callback when its dependency array
+ * changes. This is helpful for updates should must run during render, most
+ * commonly state derived from props; a more ergonomic version of https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
+ *
+ * ```ts
+ * function Example({ value }) {
+ *   const [intermediaryValue, setValue] = useState(value);
+ *
+ *   useUpdateImmediateEffect(() => {
+ *     setValue(value)
+ *   }, [value])
+ * ```
+ *
+ * @category effects
+ */
+function useUpdateImmediateEffect(
+  effect: EffectCallback,
+  deps: DependencyList,
+) {
+  const firstRef = useRef(true)
+  const tearDown = useRef<ReturnType<EffectCallback>>()
+
+  useWillUnmount(() => {
+    if (tearDown.current) tearDown.current()
+  })
+
+  useStableMemo(() => {
+    if (firstRef.current) {
+      firstRef.current = false
+      return
+    }
+
+    if (tearDown.current) tearDown.current()
+    tearDown.current = effect()
+  }, deps)
+}
+
+export default useUpdateImmediateEffect
diff --git a/hooks/useUpdateLayoutEffect.ts b/hooks/useUpdateLayoutEffect.ts
new file mode 100644
index 0000000..49b1c57
--- /dev/null
+++ b/hooks/useUpdateLayoutEffect.ts
@@ -0,0 +1,34 @@
+import { useLayoutEffect, EffectCallback, DependencyList, useRef } from 'react'
+
+/**
+ * Runs a layout effect only when the dependencies have changed, skipping the
+ * initial "on mount" run. Caution, if the dependency list never changes,
+ * the effect is **never run**
+ *
+ * ```ts
+ *  const ref = useRef<HTMLInput>(null);
+ *
+ *  // focuses an element only if the focus changes, and not on mount
+ *  useUpdateLayoutEffect(() => {
+ *    const element = ref.current?.children[focusedIdx] as HTMLElement
+ *
+ *    element?.focus()
+ *
+ *  }, [focusedIndex])
+ * ```
+ * @param effect An effect to run on mount
+ *
+ * @category effects
+ */
+function useUpdateLayoutEffect(fn: EffectCallback, deps: DependencyList) {
+  const isFirst = useRef(true)
+  useLayoutEffect(() => {
+    if (isFirst.current) {
+      isFirst.current = false
+      return
+    }
+    return fn()
+  }, deps)
+}
+
+export default useUpdateLayoutEffect
diff --git a/hooks/useUpdatedRef.ts b/hooks/useUpdatedRef.ts
new file mode 100644
index 0000000..b2b5b78
--- /dev/null
+++ b/hooks/useUpdatedRef.ts
@@ -0,0 +1,13 @@
+import { useRef } from 'react'
+
+/**
+ * Returns a ref that is immediately updated with the new value
+ *
+ * @param value The Ref value
+ * @category refs
+ */
+export default function useUpdatedRef<T>(value: T) {
+  const valueRef = useRef<T>(value)
+  valueRef.current = value
+  return valueRef
+}
diff --git a/hooks/useWillUnmount.ts b/hooks/useWillUnmount.ts
new file mode 100644
index 0000000..b3bbf56
--- /dev/null
+++ b/hooks/useWillUnmount.ts
@@ -0,0 +1,14 @@
+import useUpdatedRef from './useUpdatedRef'
+import { useEffect } from 'react'
+
+/**
+ * Attach a callback that fires when a component unmounts
+ *
+ * @param fn Handler to run when the component unmounts
+ * @category effects
+ */
+export default function useWillUnmount(fn: () => void) {
+  const onUnmount = useUpdatedRef(fn)
+
+  useEffect(() => () => onUnmount.current(), [])
+}
diff --git a/invariant/index.ts b/invariant/index.ts
new file mode 100644
index 0000000..21a140d
--- /dev/null
+++ b/invariant/index.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+/**
+ * Use invariant() to assert state which your program assumes to be true.
+ *
+ * Provide sprintf-style format (only %s is supported) and arguments
+ * to provide information about what broke and what you were
+ * expecting.
+ *
+ * The invariant message will be stripped in production, but the invariant
+ * will remain to ensure logic does not differ in production.
+ */
+
+var NODE_ENV = process.env.NODE_ENV;
+
+var invariant = function(condition, format, a, b, c, d, e, f) {
+  if (NODE_ENV !== 'production') {
+    if (format === undefined) {
+      throw new Error('invariant requires an error message argument');
+    }
+  }
+
+  if (!condition) {
+    var error;
+    if (format === undefined) {
+      error = new Error(
+        'Minified exception occurred; use the non-minified dev environment ' +
+        'for the full error message and additional helpful warnings.'
+      );
+    } else {
+      var args = [a, b, c, d, e, f];
+      var argIndex = 0;
+      error = new Error(
+        format.replace(/%s/g, function() { return args[argIndex++]; })
+      );
+      error.name = 'Invariant Violation';
+    }
+
+    error.framesToPop = 1; // we don't care about invariant's own frame
+    throw error;
+  }
+};
+
+export default invariant
\ No newline at end of file
diff --git a/license.txt b/license.txt
index 1ea4706..bfcbcf8 100644
--- a/license.txt
+++ b/license.txt
@@ -1,9 +1,16 @@
 MIT License - Copyright (c) 2024 Tangible
 
-This software includes a fork of:
+This software includes parts of the following libraries. MIT license unless otherwise noted.
 
-https://github.com/twbs/bootstrap
-MIT License - Copyright (c) 2011-2024 The Bootstrap Authors
+- https://github.com/BerkeleyTrue/warning Copyright (c) Facebook, Inc.
+- https://github.com/jquense/react-common-hooks Copyright (c) Jason Quense
+- https://github.com/jquense/uncontrollable Copyright (c) Jason Quense
+- https://github.com/lukeed/dequal Copyright (c) Luke Edwards
+- https://github.com/react-bootstrap/dom-helpers Copyright (c) 2015 Jason Quense
+- https://github.com/react-bootstrap/prop-types-extra Copyright (c) 2015 react-bootstrap
+- https://github.com/react-bootstrap/react-bootstrap Copyright (c) Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
+- https://github.com/twbs/bootstrap Copyright (c) The Bootstrap Authors
+- https://github.com/zertosh/invariant Copyright (c) Facebook, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/package.json b/package.json
index 1cecd69..1413862 100644
--- a/package.json
+++ b/package.json
@@ -14,24 +14,33 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8"
+    "@popperjs/core": "^2.11.8",
+    "classnames": "^2.5.1",
+    "prop-types": "^15.8.1",
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@docusaurus/core": "3.5.2",
-    "@docusaurus/preset-classic": "3.5.2",
-    "@mdx-js/react": "^3.0.0",
-    "clsx": "^2.0.0",
-    "prism-react-renderer": "^2.3.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "@docusaurus/module-type-aliases": "3.5.2",
+    "@docusaurus/preset-classic": "3.5.2",
     "@docusaurus/tsconfig": "3.5.2",
     "@docusaurus/types": "3.5.2",
-    "@tangible/roller": "^2.1.0",
+    "@mdx-js/react": "^3.0.1",
+    "@tangible/roller": "^2.1.1",
+    "@types/react": "^18.3.11",
+    "@types/react-transition-group": "^4.4.11",
+    "clsx": "^2.1.1",
     "docusaurus-lunr-search": "^3.5.0",
     "docusaurus-plugin-sass": "^0.2.5",
-    "sass": "1.69.5",
-    "typescript": "~5.5.2"
+    "prism-react-renderer": "^2.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "1.79.5",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "browserslist": {
     "production": [
diff --git a/prop-types-extra/all.ts b/prop-types-extra/all.ts
new file mode 100644
index 0000000..78a891e
--- /dev/null
+++ b/prop-types-extra/all.ts
@@ -0,0 +1,22 @@
+import createChainableTypeChecker from './utils/createChainableTypeChecker';
+
+export default function all(...validators) {
+  function allPropTypes(...args) {
+    let error = null;
+
+    validators.forEach((validator) => {
+      if (error != null) {
+        return;
+      }
+
+      const result = validator(...args);
+      if (result != null) {
+        error = result;
+      }
+    });
+
+    return error;
+  }
+
+  return createChainableTypeChecker(allPropTypes);
+}
diff --git a/prop-types-extra/componentOrElement.ts b/prop-types-extra/componentOrElement.ts
new file mode 100644
index 0000000..bdbf47c
--- /dev/null
+++ b/prop-types-extra/componentOrElement.ts
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import createChainableTypeChecker from './utils/createChainableTypeChecker';
+
+function validate(props, propName, componentName, location, propFullName) {
+  const propValue = props[propName];
+  const propType = typeof propValue;
+
+  if (React.isValidElement(propValue)) {
+    return new Error(
+      `Invalid ${location} \`${propFullName}\` of type ReactElement `
+      + `supplied to \`${componentName}\`, expected a ReactComponent or a `
+      + 'DOMElement. You can usually obtain a ReactComponent or DOMElement '
+      + 'from a ReactElement by attaching a ref to it.',
+    );
+  }
+
+  if (
+    (propType !== 'object' || typeof propValue.render !== 'function')
+    && propValue.nodeType !== 1
+  ) {
+    return new Error(
+      `Invalid ${location} \`${propFullName}\` of value \`${propValue}\` `
+      + `supplied to \`${componentName}\`, expected a ReactComponent or a `
+      + 'DOMElement.',
+    );
+  }
+
+  return null;
+}
+
+export default createChainableTypeChecker(validate);
diff --git a/prop-types-extra/deprecated.ts b/prop-types-extra/deprecated.ts
new file mode 100644
index 0000000..45ba5af
--- /dev/null
+++ b/prop-types-extra/deprecated.ts
@@ -0,0 +1,34 @@
+import warning from 'warning';
+
+let warned = {};
+
+export default function deprecated(validator, reason) {
+  return function validate(
+    props, propName, componentName, location, propFullName, ...args
+  ) {
+    const componentNameSafe = componentName || '<<anonymous>>';
+    const propFullNameSafe = propFullName || propName;
+
+    if (props[propName] != null) {
+      const messageKey = `${componentName}.${propName}`;
+
+      warning(warned[messageKey],
+        `The ${location} \`${propFullNameSafe}\` of `
+        + `\`${componentNameSafe}\` is deprecated. ${reason}.`);
+
+      warned[messageKey] = true;
+    }
+
+    return validator(
+      props, propName, componentName, location, propFullName, ...args,
+    );
+  };
+}
+
+/* eslint-disable no-underscore-dangle */
+function _resetWarned() {
+  warned = {};
+}
+
+deprecated._resetWarned = _resetWarned;
+/* eslint-enable no-underscore-dangle */
diff --git a/prop-types-extra/elementType.ts b/prop-types-extra/elementType.ts
new file mode 100644
index 0000000..7fbc306
--- /dev/null
+++ b/prop-types-extra/elementType.ts
@@ -0,0 +1,28 @@
+import React from 'react';
+import { isValidElementType } from 'react-is';
+
+import createChainableTypeChecker from './utils/createChainableTypeChecker';
+
+function elementType(props, propName, componentName, location, propFullName) {
+  const propValue = props[propName];
+
+  if (React.isValidElement(propValue)) {
+    return new Error(
+      `Invalid ${location} \`${propFullName}\` of type ReactElement `
+      + `supplied to \`${componentName}\`,expected an element type (a string `
+      + ', component class, or function component).',
+    );
+  }
+
+  if (!isValidElementType(propValue)) {
+    return new Error(
+      `Invalid ${location} \`${propFullName}\` of value \`${propValue}\` `
+      + `supplied to \`${componentName}\`, expected an element type (a string `
+      + ', component class, or function component).',
+    );
+  }
+
+  return null;
+}
+
+export default createChainableTypeChecker(elementType);
diff --git a/prop-types-extra/index.ts b/prop-types-extra/index.ts
new file mode 100644
index 0000000..2b17329
--- /dev/null
+++ b/prop-types-extra/index.ts
@@ -0,0 +1,13 @@
+import all from './all';
+import componentOrElement from './componentOrElement';
+import deprecated from './deprecated';
+import elementType from './elementType';
+import isRequiredForA11y from './isRequiredForA11y';
+
+export {
+  all,
+  componentOrElement,
+  deprecated,
+  elementType,
+  isRequiredForA11y,
+};
diff --git a/prop-types-extra/isRequiredForA11y.ts b/prop-types-extra/isRequiredForA11y.ts
new file mode 100644
index 0000000..e6f682a
--- /dev/null
+++ b/prop-types-extra/isRequiredForA11y.ts
@@ -0,0 +1,20 @@
+export default function isRequiredForA11y(validator) {
+  return function validate(
+    props, propName, componentName, location, propFullName, ...args
+  ) {
+    const componentNameSafe = componentName || '<<anonymous>>';
+    const propFullNameSafe = propFullName || propName;
+
+    if (props[propName] == null) {
+      return new Error(
+        `The ${location} \`${propFullNameSafe}\` is required to make `
+        + `\`${componentNameSafe}\` accessible for users of assistive `
+        + 'technologies such as screen readers.',
+      );
+    }
+
+    return validator(
+      props, propName, componentName, location, propFullName, ...args,
+    );
+  };
+}
diff --git a/prop-types-extra/utils/createChainableTypeChecker.ts b/prop-types-extra/utils/createChainableTypeChecker.ts
new file mode 100644
index 0000000..c9c4540
--- /dev/null
+++ b/prop-types-extra/utils/createChainableTypeChecker.ts
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+// Mostly taken from ReactPropTypes.
+
+export default function createChainableTypeChecker(validate) {
+  function checkType(
+    isRequired,
+    props,
+    propName,
+    componentName,
+    location,
+    propFullName,
+    ...args
+  ) {
+    const componentNameSafe = componentName || '<<anonymous>>';
+    const propFullNameSafe = propFullName || propName;
+
+    if (props[propName] == null) {
+      if (isRequired) {
+        return new Error(
+          `Required ${location} \`${propFullNameSafe}\` was not specified `
+          + `in \`${componentNameSafe}\`.`,
+        );
+      }
+
+      return null;
+    }
+
+    return validate(
+      props,
+      propName,
+      componentNameSafe,
+      location,
+      propFullNameSafe,
+      ...args,
+    );
+  }
+
+  const chainedCheckType = checkType.bind(null, false);
+  chainedCheckType.isRequired = checkType.bind(null, true);
+
+  return chainedCheckType;
+}
diff --git a/react-examples/Accordion/AllCollapse.tsx b/react-examples/Accordion/AllCollapse.tsx
new file mode 100644
index 0000000..86e9718
--- /dev/null
+++ b/react-examples/Accordion/AllCollapse.tsx
@@ -0,0 +1,34 @@
+import Accordion from 'react-bootstrap/Accordion';
+
+function AllCollapseExample() {
+  return (
+    <Accordion>
+      <Accordion.Item eventKey="0">
+        <Accordion.Header>Accordion Item #1</Accordion.Header>
+        <Accordion.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Accordion.Body>
+      </Accordion.Item>
+      <Accordion.Item eventKey="1">
+        <Accordion.Header>Accordion Item #2</Accordion.Header>
+        <Accordion.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Accordion.Body>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
+
+export default AllCollapseExample;
diff --git a/react-examples/Accordion/AlwaysOpen.tsx b/react-examples/Accordion/AlwaysOpen.tsx
new file mode 100644
index 0000000..12f63fb
--- /dev/null
+++ b/react-examples/Accordion/AlwaysOpen.tsx
@@ -0,0 +1,34 @@
+import Accordion from 'react-bootstrap/Accordion';
+
+function AlwaysOpenExample() {
+  return (
+    <Accordion defaultActiveKey={['0']} alwaysOpen>
+      <Accordion.Item eventKey="0">
+        <Accordion.Header>Accordion Item #1</Accordion.Header>
+        <Accordion.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Accordion.Body>
+      </Accordion.Item>
+      <Accordion.Item eventKey="1">
+        <Accordion.Header>Accordion Item #2</Accordion.Header>
+        <Accordion.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Accordion.Body>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
+
+export default AlwaysOpenExample;
diff --git a/react-examples/Accordion/Basic.tsx b/react-examples/Accordion/Basic.tsx
new file mode 100644
index 0000000..67ae62e
--- /dev/null
+++ b/react-examples/Accordion/Basic.tsx
@@ -0,0 +1,34 @@
+import Accordion from 'react-bootstrap/Accordion';
+
+function BasicExample() {
+  return (
+    <Accordion defaultActiveKey="0">
+      <Accordion.Item eventKey="0">
+        <Accordion.Header>Accordion Item #1</Accordion.Header>
+        <Accordion.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Accordion.Body>
+      </Accordion.Item>
+      <Accordion.Item eventKey="1">
+        <Accordion.Header>Accordion Item #2</Accordion.Header>
+        <Accordion.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Accordion.Body>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Accordion/ContextAwareToggle.tsx b/react-examples/Accordion/ContextAwareToggle.tsx
new file mode 100644
index 0000000..5bf45fe
--- /dev/null
+++ b/react-examples/Accordion/ContextAwareToggle.tsx
@@ -0,0 +1,54 @@
+import { useContext } from 'react';
+import Accordion from 'react-bootstrap/Accordion';
+import AccordionContext from 'react-bootstrap/AccordionContext';
+import { useAccordionButton } from 'react-bootstrap/AccordionButton';
+import Card from 'react-bootstrap/Card';
+
+const PINK = 'rgba(255, 192, 203, 0.6)';
+const BLUE = 'rgba(0, 0, 255, 0.6)';
+
+function ContextAwareToggle({ children, eventKey, callback }) {
+  const { activeEventKey } = useContext(AccordionContext);
+
+  const decoratedOnClick = useAccordionButton(
+    eventKey,
+    () => callback && callback(eventKey),
+  );
+
+  const isCurrentEventKey = activeEventKey === eventKey;
+
+  return (
+    <button
+      type="button"
+      style={{ backgroundColor: isCurrentEventKey ? PINK : BLUE }}
+      onClick={decoratedOnClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Example() {
+  return (
+    <Accordion defaultActiveKey="0">
+      <Card>
+        <Card.Header>
+          <ContextAwareToggle eventKey="0">Click me!</ContextAwareToggle>
+        </Card.Header>
+        <Accordion.Collapse eventKey="0">
+          <Card.Body>Hello! I am the body</Card.Body>
+        </Accordion.Collapse>
+      </Card>
+      <Card>
+        <Card.Header>
+          <ContextAwareToggle eventKey="1">Click me!</ContextAwareToggle>
+        </Card.Header>
+        <Accordion.Collapse eventKey="1">
+          <Card.Body>Hello! I am another body</Card.Body>
+        </Accordion.Collapse>
+      </Card>
+    </Accordion>
+  );
+}
+
+render(<Example />);
diff --git a/react-examples/Accordion/CustomToggle.tsx b/react-examples/Accordion/CustomToggle.tsx
new file mode 100644
index 0000000..e8b0369
--- /dev/null
+++ b/react-examples/Accordion/CustomToggle.tsx
@@ -0,0 +1,44 @@
+import Accordion from 'react-bootstrap/Accordion';
+import { useAccordionButton } from 'react-bootstrap/AccordionButton';
+import Card from 'react-bootstrap/Card';
+
+function CustomToggle({ children, eventKey }) {
+  const decoratedOnClick = useAccordionButton(eventKey, () =>
+    console.log('totally custom!'),
+  );
+
+  return (
+    <button
+      type="button"
+      style={{ backgroundColor: 'pink' }}
+      onClick={decoratedOnClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Example() {
+  return (
+    <Accordion defaultActiveKey="0">
+      <Card>
+        <Card.Header>
+          <CustomToggle eventKey="0">Click me!</CustomToggle>
+        </Card.Header>
+        <Accordion.Collapse eventKey="0">
+          <Card.Body>Hello! I'm the body</Card.Body>
+        </Accordion.Collapse>
+      </Card>
+      <Card>
+        <Card.Header>
+          <CustomToggle eventKey="1">Click me!</CustomToggle>
+        </Card.Header>
+        <Accordion.Collapse eventKey="1">
+          <Card.Body>Hello! I'm another body</Card.Body>
+        </Accordion.Collapse>
+      </Card>
+    </Accordion>
+  );
+}
+
+render(<Example />);
diff --git a/react-examples/Accordion/Flush.tsx b/react-examples/Accordion/Flush.tsx
new file mode 100644
index 0000000..19a8106
--- /dev/null
+++ b/react-examples/Accordion/Flush.tsx
@@ -0,0 +1,34 @@
+import Accordion from 'react-bootstrap/Accordion';
+
+function FlushExample() {
+  return (
+    <Accordion defaultActiveKey="0" flush>
+      <Accordion.Item eventKey="0">
+        <Accordion.Header>Accordion Item #1</Accordion.Header>
+        <Accordion.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Accordion.Body>
+      </Accordion.Item>
+      <Accordion.Item eventKey="1">
+        <Accordion.Header>Accordion Item #2</Accordion.Header>
+        <Accordion.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Accordion.Body>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
+
+export default FlushExample;
diff --git a/react-examples/Alert/AdditionalContent.tsx b/react-examples/Alert/AdditionalContent.tsx
new file mode 100644
index 0000000..6701b98
--- /dev/null
+++ b/react-examples/Alert/AdditionalContent.tsx
@@ -0,0 +1,21 @@
+import Alert from 'react-bootstrap/Alert';
+
+function AdditionalContentExample() {
+  return (
+    <Alert variant="success">
+      <Alert.Heading>Hey, nice to see you</Alert.Heading>
+      <p>
+        Aww yeah, you successfully read this important alert message. This
+        example text is going to run a bit longer so that you can see how
+        spacing within an alert works with this kind of content.
+      </p>
+      <hr />
+      <p className="mb-0">
+        Whenever you need to, be sure to use margin utilities to keep things
+        nice and tidy.
+      </p>
+    </Alert>
+  );
+}
+
+export default AdditionalContentExample;
diff --git a/react-examples/Alert/Basic.tsx b/react-examples/Alert/Basic.tsx
new file mode 100644
index 0000000..650babc
--- /dev/null
+++ b/react-examples/Alert/Basic.tsx
@@ -0,0 +1,24 @@
+import Alert from 'react-bootstrap/Alert';
+
+function BasicExample() {
+  return (
+    <>
+      {[
+        'primary',
+        'secondary',
+        'success',
+        'danger',
+        'warning',
+        'info',
+        'light',
+        'dark',
+      ].map((variant) => (
+        <Alert key={variant} variant={variant}>
+          This is a {variant} alert—check it out!
+        </Alert>
+      ))}
+    </>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Alert/Dismissible.tsx b/react-examples/Alert/Dismissible.tsx
new file mode 100644
index 0000000..62f36f4
--- /dev/null
+++ b/react-examples/Alert/Dismissible.tsx
@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import Alert from 'react-bootstrap/Alert';
+import Button from 'react-bootstrap/Button';
+
+function AlertDismissibleExample() {
+  const [show, setShow] = useState(true);
+
+  if (show) {
+    return (
+      <Alert variant="danger" onClose={() => setShow(false)} dismissible>
+        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
+        <p>
+          Change this and that and try again. Duis mollis, est non commodo
+          luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+          Cras mattis consectetur purus sit amet fermentum.
+        </p>
+      </Alert>
+    );
+  }
+  return <Button onClick={() => setShow(true)}>Show Alert</Button>;
+}
+
+export default AlertDismissibleExample;
diff --git a/react-examples/Alert/DismissibleControlled.tsx b/react-examples/Alert/DismissibleControlled.tsx
new file mode 100644
index 0000000..9f3818e
--- /dev/null
+++ b/react-examples/Alert/DismissibleControlled.tsx
@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import Alert from 'react-bootstrap/Alert';
+import Button from 'react-bootstrap/Button';
+
+function AlertDismissible() {
+  const [show, setShow] = useState(true);
+
+  return (
+    <>
+      <Alert show={show} variant="success">
+        <Alert.Heading>My Alert</Alert.Heading>
+        <p>
+          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
+          lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
+          fermentum.
+        </p>
+        <hr />
+        <div className="d-flex justify-content-end">
+          <Button onClick={() => setShow(false)} variant="outline-success">
+            Close me
+          </Button>
+        </div>
+      </Alert>
+
+      {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
+    </>
+  );
+}
+
+export default AlertDismissible;
diff --git a/react-examples/Alert/Link.tsx b/react-examples/Alert/Link.tsx
new file mode 100644
index 0000000..9ddbb22
--- /dev/null
+++ b/react-examples/Alert/Link.tsx
@@ -0,0 +1,26 @@
+import Alert from 'react-bootstrap/Alert';
+
+function LinksExample() {
+  return (
+    <>
+      {[
+        'primary',
+        'secondary',
+        'success',
+        'danger',
+        'warning',
+        'info',
+        'light',
+        'dark',
+      ].map((variant) => (
+        <Alert key={variant} variant={variant}>
+          This is a {variant} alert with{' '}
+          <Alert.Link href="#">an example link</Alert.Link>. Give it a click if
+          you like.
+        </Alert>
+      ))}
+    </>
+  );
+}
+
+export default LinksExample;
diff --git a/react-examples/AsProp.tsx b/react-examples/AsProp.tsx
new file mode 100644
index 0000000..c1fba20
--- /dev/null
+++ b/react-examples/AsProp.tsx
@@ -0,0 +1,8 @@
+<Stack direction="horizontal" gap={2}>
+  <Button as="a" variant="primary">
+    Button as link
+  </Button>
+  <Button as="a" variant="success">
+    Button as link
+  </Button>
+</Stack>;
diff --git a/react-examples/AsPropComponent.tsx b/react-examples/AsPropComponent.tsx
new file mode 100644
index 0000000..470c8bc
--- /dev/null
+++ b/react-examples/AsPropComponent.tsx
@@ -0,0 +1,17 @@
+import Badge from 'react-bootstrap/Badge';
+import Button from 'react-bootstrap/Button';
+
+function Example() {
+  return (
+    <div>
+      <h1>
+        Example heading
+        <Badge bg="secondary" as={Button}>
+          New
+        </Badge>
+      </h1>
+    </div>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Badge/Basic.tsx b/react-examples/Badge/Basic.tsx
new file mode 100644
index 0000000..9f6a6a6
--- /dev/null
+++ b/react-examples/Badge/Basic.tsx
@@ -0,0 +1,28 @@
+import Badge from 'react-bootstrap/Badge';
+
+function BasicExample() {
+  return (
+    <div>
+      <h1>
+        Example heading <Badge bg="secondary">New</Badge>
+      </h1>
+      <h2>
+        Example heading <Badge bg="secondary">New</Badge>
+      </h2>
+      <h3>
+        Example heading <Badge bg="secondary">New</Badge>
+      </h3>
+      <h4>
+        Example heading <Badge bg="secondary">New</Badge>
+      </h4>
+      <h5>
+        Example heading <Badge bg="secondary">New</Badge>
+      </h5>
+      <h6>
+        Example heading <Badge bg="secondary">New</Badge>
+      </h6>
+    </div>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Badge/Button.tsx b/react-examples/Badge/Button.tsx
new file mode 100644
index 0000000..d3c1fb6
--- /dev/null
+++ b/react-examples/Badge/Button.tsx
@@ -0,0 +1,13 @@
+import Badge from 'react-bootstrap/Badge';
+import Button from 'react-bootstrap/Button';
+
+function ButtonExample() {
+  return (
+    <Button variant="primary">
+      Profile <Badge bg="secondary">9</Badge>
+      <span className="visually-hidden">unread messages</span>
+    </Button>
+  );
+}
+
+export default ButtonExample;
diff --git a/react-examples/Badge/Pill.tsx b/react-examples/Badge/Pill.tsx
new file mode 100644
index 0000000..d384f28
--- /dev/null
+++ b/react-examples/Badge/Pill.tsx
@@ -0,0 +1,35 @@
+import Badge from 'react-bootstrap/Badge';
+import Stack from 'react-bootstrap/Stack';
+
+function PillExample() {
+  return (
+    <Stack direction="horizontal" gap={2}>
+      <Badge pill bg="primary">
+        Primary
+      </Badge>
+      <Badge pill bg="secondary">
+        Secondary
+      </Badge>
+      <Badge pill bg="success">
+        Success
+      </Badge>
+      <Badge pill bg="danger">
+        Danger
+      </Badge>
+      <Badge pill bg="warning" text="dark">
+        Warning
+      </Badge>
+      <Badge pill bg="info">
+        Info
+      </Badge>
+      <Badge pill bg="light" text="dark">
+        Light
+      </Badge>
+      <Badge pill bg="dark">
+        Dark
+      </Badge>
+    </Stack>
+  );
+}
+
+export default PillExample;
diff --git a/react-examples/Badge/Variations.tsx b/react-examples/Badge/Variations.tsx
new file mode 100644
index 0000000..dfbeed8
--- /dev/null
+++ b/react-examples/Badge/Variations.tsx
@@ -0,0 +1,23 @@
+import Badge from 'react-bootstrap/Badge';
+import Stack from 'react-bootstrap/Stack';
+
+function VariationsExample() {
+  return (
+    <Stack direction="horizontal" gap={2}>
+      <Badge bg="primary">Primary</Badge>
+      <Badge bg="secondary">Secondary</Badge>
+      <Badge bg="success">Success</Badge>
+      <Badge bg="danger">Danger</Badge>
+      <Badge bg="warning" text="dark">
+        Warning
+      </Badge>
+      <Badge bg="info">Info</Badge>
+      <Badge bg="light" text="dark">
+        Light
+      </Badge>
+      <Badge bg="dark">Dark</Badge>
+    </Stack>
+  );
+}
+
+export default VariationsExample;
diff --git a/react-examples/Breadcrumb.tsx b/react-examples/Breadcrumb.tsx
new file mode 100644
index 0000000..a2f76bd
--- /dev/null
+++ b/react-examples/Breadcrumb.tsx
@@ -0,0 +1,15 @@
+import Breadcrumb from 'react-bootstrap/Breadcrumb';
+
+function BreadcrumbExample() {
+  return (
+    <Breadcrumb>
+      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
+      <Breadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/">
+        Library
+      </Breadcrumb.Item>
+      <Breadcrumb.Item active>Data</Breadcrumb.Item>
+    </Breadcrumb>
+  );
+}
+
+export default BreadcrumbExample;
diff --git a/react-examples/Button/Active.tsx b/react-examples/Button/Active.tsx
new file mode 100644
index 0000000..99a1671
--- /dev/null
+++ b/react-examples/Button/Active.tsx
@@ -0,0 +1,16 @@
+import Button from 'react-bootstrap/Button';
+
+function ActiveExample() {
+  return (
+    <>
+      <Button variant="primary" size="lg" active>
+        Primary button
+      </Button>{' '}
+      <Button variant="secondary" size="lg" active>
+        Button
+      </Button>
+    </>
+  );
+}
+
+export default ActiveExample;
diff --git a/react-examples/Button/Block.tsx b/react-examples/Button/Block.tsx
new file mode 100644
index 0000000..d6382d1
--- /dev/null
+++ b/react-examples/Button/Block.tsx
@@ -0,0 +1,16 @@
+import Button from 'react-bootstrap/Button';
+
+function BlockExample() {
+  return (
+    <div className="d-grid gap-2">
+      <Button variant="primary" size="lg">
+        Block level button
+      </Button>
+      <Button variant="secondary" size="lg">
+        Block level button
+      </Button>
+    </div>
+  );
+}
+
+export default BlockExample;
diff --git a/react-examples/Button/Disabled.tsx b/react-examples/Button/Disabled.tsx
new file mode 100644
index 0000000..8c29535
--- /dev/null
+++ b/react-examples/Button/Disabled.tsx
@@ -0,0 +1,19 @@
+import Button from 'react-bootstrap/Button';
+
+function DisabledExample() {
+  return (
+    <>
+      <Button variant="primary" size="lg" disabled>
+        Primary button
+      </Button>{' '}
+      <Button variant="secondary" size="lg" disabled>
+        Button
+      </Button>{' '}
+      <Button href="#" variant="secondary" size="lg" disabled>
+        Link
+      </Button>
+    </>
+  );
+}
+
+export default DisabledExample;
diff --git a/react-examples/Button/Loading.tsx b/react-examples/Button/Loading.tsx
new file mode 100644
index 0000000..20577d2
--- /dev/null
+++ b/react-examples/Button/Loading.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+
+function LoadingButton() {
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    function simulateNetworkRequest() {
+      return new Promise((resolve) => setTimeout(resolve, 2000));
+    }
+
+    if (isLoading) {
+      simulateNetworkRequest().then(() => {
+        setLoading(false);
+      });
+    }
+  }, [isLoading]);
+
+  const handleClick = () => setLoading(true);
+
+  return (
+    <Button
+      variant="primary"
+      disabled={isLoading}
+      onClick={!isLoading ? handleClick : null}
+    >
+      {isLoading ? 'Loading…' : 'Click to load'}
+    </Button>
+  );
+}
+
+export default LoadingButton;
diff --git a/react-examples/Button/OutlineTypes.tsx b/react-examples/Button/OutlineTypes.tsx
new file mode 100644
index 0000000..b0b61fc
--- /dev/null
+++ b/react-examples/Button/OutlineTypes.tsx
@@ -0,0 +1,18 @@
+import Button from 'react-bootstrap/Button';
+
+function OutlineTypesExample() {
+  return (
+    <>
+      <Button variant="outline-primary">Primary</Button>{' '}
+      <Button variant="outline-secondary">Secondary</Button>{' '}
+      <Button variant="outline-success">Success</Button>{' '}
+      <Button variant="outline-warning">Warning</Button>{' '}
+      <Button variant="outline-danger">Danger</Button>{' '}
+      <Button variant="outline-info">Info</Button>{' '}
+      <Button variant="outline-light">Light</Button>{' '}
+      <Button variant="outline-dark">Dark</Button>
+    </>
+  );
+}
+
+export default OutlineTypesExample;
diff --git a/react-examples/Button/Sizes.tsx b/react-examples/Button/Sizes.tsx
new file mode 100644
index 0000000..01d4b81
--- /dev/null
+++ b/react-examples/Button/Sizes.tsx
@@ -0,0 +1,26 @@
+import Button from 'react-bootstrap/Button';
+
+function SizesExample() {
+  return (
+    <>
+      <div className="mb-2">
+        <Button variant="primary" size="lg">
+          Large button
+        </Button>{' '}
+        <Button variant="secondary" size="lg">
+          Large button
+        </Button>
+      </div>
+      <div>
+        <Button variant="primary" size="sm">
+          Small button
+        </Button>{' '}
+        <Button variant="secondary" size="sm">
+          Small button
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export default SizesExample;
diff --git a/react-examples/Button/TagTypes.tsx b/react-examples/Button/TagTypes.tsx
new file mode 100644
index 0000000..d1e89e2
--- /dev/null
+++ b/react-examples/Button/TagTypes.tsx
@@ -0,0 +1,14 @@
+import Button from 'react-bootstrap/Button';
+
+function TagTypesExample() {
+  return (
+    <>
+      <Button href="#">Link</Button> <Button type="submit">Button</Button>{' '}
+      <Button as="input" type="button" value="Input" />{' '}
+      <Button as="input" type="submit" value="Submit" />{' '}
+      <Button as="input" type="reset" value="Reset" />
+    </>
+  );
+}
+
+export default TagTypesExample;
diff --git a/react-examples/Button/ToggleButton.tsx b/react-examples/Button/ToggleButton.tsx
new file mode 100644
index 0000000..82179bb
--- /dev/null
+++ b/react-examples/Button/ToggleButton.tsx
@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import ToggleButton from 'react-bootstrap/ToggleButton';
+
+function ToggleButtonExample() {
+  const [checked, setChecked] = useState(false);
+  const [radioValue, setRadioValue] = useState('1');
+
+  const radios = [
+    { name: 'Active', value: '1' },
+    { name: 'Radio', value: '2' },
+    { name: 'Radio', value: '3' },
+  ];
+
+  return (
+    <>
+      <ButtonGroup className="mb-2">
+        <ToggleButton
+          id="toggle-check"
+          type="checkbox"
+          variant="secondary"
+          checked={checked}
+          value="1"
+          onChange={(e) => setChecked(e.currentTarget.checked)}
+        >
+          Checked
+        </ToggleButton>
+      </ButtonGroup>
+      <br />
+      <ButtonGroup className="mb-2">
+        {radios.map((radio, idx) => (
+          <ToggleButton
+            key={idx}
+            id={`radio-${idx}`}
+            type="radio"
+            variant="secondary"
+            name="radio"
+            value={radio.value}
+            checked={radioValue === radio.value}
+            onChange={(e) => setRadioValue(e.currentTarget.value)}
+          >
+            {radio.name}
+          </ToggleButton>
+        ))}
+      </ButtonGroup>
+      <br />
+      <ToggleButton
+        className="mb-2"
+        id="toggle-check"
+        type="checkbox"
+        variant="outline-primary"
+        checked={checked}
+        value="1"
+        onChange={(e) => setChecked(e.currentTarget.checked)}
+      >
+        Checked
+      </ToggleButton>
+      <br />
+      <ButtonGroup>
+        {radios.map((radio, idx) => (
+          <ToggleButton
+            key={idx}
+            id={`radio-${idx}`}
+            type="radio"
+            variant={idx % 2 ? 'outline-success' : 'outline-danger'}
+            name="radio"
+            value={radio.value}
+            checked={radioValue === radio.value}
+            onChange={(e) => setRadioValue(e.currentTarget.value)}
+          >
+            {radio.name}
+          </ToggleButton>
+        ))}
+      </ButtonGroup>
+    </>
+  );
+}
+
+export default ToggleButtonExample;
diff --git a/react-examples/Button/ToggleButtonGroupControlled.tsx b/react-examples/Button/ToggleButtonGroupControlled.tsx
new file mode 100644
index 0000000..53422a7
--- /dev/null
+++ b/react-examples/Button/ToggleButtonGroupControlled.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import ToggleButton from 'react-bootstrap/ToggleButton';
+import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
+
+function ToggleButtonGroupControlled() {
+  const [value, setValue] = useState([1, 3]);
+
+  /*
+   * The second argument that will be passed to
+   * `handleChange` from `ToggleButtonGroup`
+   * is the SyntheticEvent object, but we are
+   * not using it in this example so we will omit it.
+   */
+  const handleChange = (val) => setValue(val);
+
+  return (
+    <ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}>
+      <ToggleButton id="tbg-btn-1" value={1}>
+        Option 1
+      </ToggleButton>
+      <ToggleButton id="tbg-btn-2" value={2}>
+        Option 2
+      </ToggleButton>
+      <ToggleButton id="tbg-btn-3" value={3}>
+        Option 3
+      </ToggleButton>
+    </ToggleButtonGroup>
+  );
+}
+
+export default ToggleButtonGroupControlled;
diff --git a/react-examples/Button/ToggleButtonGroupUncontrolled.tsx b/react-examples/Button/ToggleButtonGroupUncontrolled.tsx
new file mode 100644
index 0000000..c0e3e62
--- /dev/null
+++ b/react-examples/Button/ToggleButtonGroupUncontrolled.tsx
@@ -0,0 +1,34 @@
+import ToggleButton from 'react-bootstrap/ToggleButton';
+import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
+
+function ToggleButtonGroupUncontrolled() {
+  return (
+    <>
+      <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="mb-2">
+        <ToggleButton id="tbg-check-1" value={1}>
+          Checkbox 1 (pre-checked)
+        </ToggleButton>
+        <ToggleButton id="tbg-check-2" value={2}>
+          Checkbox 2
+        </ToggleButton>
+        <ToggleButton id="tbg-check-3" value={3}>
+          Checkbox 3 (pre-checked)
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <br />
+      <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
+        <ToggleButton id="tbg-radio-1" value={1}>
+          Radio 1 (pre-checked)
+        </ToggleButton>
+        <ToggleButton id="tbg-radio-2" value={2}>
+          Radio 2
+        </ToggleButton>
+        <ToggleButton id="tbg-radio-3" value={3}>
+          Radio 3
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </>
+  );
+}
+
+export default ToggleButtonGroupUncontrolled;
diff --git a/react-examples/Button/Types.tsx b/react-examples/Button/Types.tsx
new file mode 100644
index 0000000..465bc47
--- /dev/null
+++ b/react-examples/Button/Types.tsx
@@ -0,0 +1,19 @@
+import Button from 'react-bootstrap/Button';
+
+function TypesExample() {
+  return (
+    <>
+      <Button variant="primary">Primary</Button>{' '}
+      <Button variant="secondary">Secondary</Button>{' '}
+      <Button variant="success">Success</Button>{' '}
+      <Button variant="warning">Warning</Button>{' '}
+      <Button variant="danger">Danger</Button>{' '}
+      <Button variant="info">Info</Button>{' '}
+      <Button variant="light">Light</Button>{' '}
+      <Button variant="dark">Dark</Button>
+      <Button variant="link">Link</Button>
+    </>
+  );
+}
+
+export default TypesExample;
diff --git a/react-examples/ButtonGroup/Basic.tsx b/react-examples/ButtonGroup/Basic.tsx
new file mode 100644
index 0000000..0c2dbdc
--- /dev/null
+++ b/react-examples/ButtonGroup/Basic.tsx
@@ -0,0 +1,14 @@
+import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+
+function BasicExample() {
+  return (
+    <ButtonGroup aria-label="Basic example">
+      <Button variant="secondary">Left</Button>
+      <Button variant="secondary">Middle</Button>
+      <Button variant="secondary">Right</Button>
+    </ButtonGroup>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/ButtonGroup/Nested.tsx b/react-examples/ButtonGroup/Nested.tsx
new file mode 100644
index 0000000..c97158d
--- /dev/null
+++ b/react-examples/ButtonGroup/Nested.tsx
@@ -0,0 +1,19 @@
+import Button from 'react-bootstrap/Button';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function NestedExample() {
+  return (
+    <ButtonGroup>
+      <Button>1</Button>
+      <Button>2</Button>
+
+      <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-nested-dropdown">
+        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
+        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
+      </DropdownButton>
+    </ButtonGroup>
+  );
+}
+
+export default NestedExample;
diff --git a/react-examples/ButtonGroup/Sizes.tsx b/react-examples/ButtonGroup/Sizes.tsx
new file mode 100644
index 0000000..aa24175
--- /dev/null
+++ b/react-examples/ButtonGroup/Sizes.tsx
@@ -0,0 +1,28 @@
+import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+
+function SizesExample() {
+  return (
+    <>
+      <ButtonGroup size="lg" className="mb-2">
+        <Button>Left</Button>
+        <Button>Middle</Button>
+        <Button>Right</Button>
+      </ButtonGroup>
+      <br />
+      <ButtonGroup className="mb-2">
+        <Button>Left</Button>
+        <Button>Middle</Button>
+        <Button>Right</Button>
+      </ButtonGroup>
+      <br />
+      <ButtonGroup size="sm">
+        <Button>Left</Button>
+        <Button>Middle</Button>
+        <Button>Right</Button>
+      </ButtonGroup>
+    </>
+  );
+}
+
+export default SizesExample;
diff --git a/react-examples/ButtonGroup/Toolbar.tsx b/react-examples/ButtonGroup/Toolbar.tsx
new file mode 100644
index 0000000..12497f8
--- /dev/null
+++ b/react-examples/ButtonGroup/Toolbar.tsx
@@ -0,0 +1,52 @@
+import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function ToolbarExample() {
+  return (
+    <>
+      <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups">
+        <ButtonGroup className="me-2" aria-label="First group">
+          <Button variant="secondary">1</Button>{' '}
+          <Button variant="secondary">2</Button>{' '}
+          <Button variant="secondary">3</Button>{' '}
+          <Button variant="secondary">4</Button>
+        </ButtonGroup>
+        <InputGroup>
+          <InputGroup.Text id="btnGroupAddon">@</InputGroup.Text>
+          <Form.Control
+            type="text"
+            placeholder="Input group example"
+            aria-label="Input group example"
+            aria-describedby="btnGroupAddon"
+          />
+        </InputGroup>
+      </ButtonToolbar>
+
+      <ButtonToolbar
+        className="justify-content-between"
+        aria-label="Toolbar with Button groups"
+      >
+        <ButtonGroup aria-label="First group">
+          <Button variant="secondary">1</Button>{' '}
+          <Button variant="secondary">2</Button>{' '}
+          <Button variant="secondary">3</Button>{' '}
+          <Button variant="secondary">4</Button>
+        </ButtonGroup>
+        <InputGroup>
+          <InputGroup.Text id="btnGroupAddon2">@</InputGroup.Text>
+          <Form.Control
+            type="text"
+            placeholder="Input group example"
+            aria-label="Input group example"
+            aria-describedby="btnGroupAddon2"
+          />
+        </InputGroup>
+      </ButtonToolbar>
+    </>
+  );
+}
+
+export default ToolbarExample;
diff --git a/react-examples/ButtonGroup/ToolbarBasic.tsx b/react-examples/ButtonGroup/ToolbarBasic.tsx
new file mode 100644
index 0000000..b7a5c8c
--- /dev/null
+++ b/react-examples/ButtonGroup/ToolbarBasic.tsx
@@ -0,0 +1,22 @@
+import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
+
+function ToolbarBasicExample() {
+  return (
+    <ButtonToolbar aria-label="Toolbar with button groups">
+      <ButtonGroup className="me-2" aria-label="First group">
+        <Button>1</Button> <Button>2</Button> <Button>3</Button>{' '}
+        <Button>4</Button>
+      </ButtonGroup>
+      <ButtonGroup className="me-2" aria-label="Second group">
+        <Button>5</Button> <Button>6</Button> <Button>7</Button>
+      </ButtonGroup>
+      <ButtonGroup aria-label="Third group">
+        <Button>8</Button>
+      </ButtonGroup>
+    </ButtonToolbar>
+  );
+}
+
+export default ToolbarBasicExample;
diff --git a/react-examples/ButtonGroup/Vertical.tsx b/react-examples/ButtonGroup/Vertical.tsx
new file mode 100644
index 0000000..15afff3
--- /dev/null
+++ b/react-examples/ButtonGroup/Vertical.tsx
@@ -0,0 +1,45 @@
+import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+
+function VerticalExample() {
+  return (
+    <ButtonGroup vertical>
+      <Button>Button</Button>
+      <Button>Button</Button>
+
+      <DropdownButton
+        as={ButtonGroup}
+        title="Dropdown"
+        id="bg-vertical-dropdown-1"
+      >
+        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
+        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
+      </DropdownButton>
+
+      <Button>Button</Button>
+      <Button>Button</Button>
+
+      <DropdownButton
+        as={ButtonGroup}
+        title="Dropdown"
+        id="bg-vertical-dropdown-2"
+      >
+        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
+        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
+      </DropdownButton>
+
+      <DropdownButton
+        as={ButtonGroup}
+        title="Dropdown"
+        id="bg-vertical-dropdown-3"
+      >
+        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
+        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
+      </DropdownButton>
+    </ButtonGroup>
+  );
+}
+
+export default VerticalExample;
diff --git a/react-examples/Card/Basic.tsx b/react-examples/Card/Basic.tsx
new file mode 100644
index 0000000..f30375a
--- /dev/null
+++ b/react-examples/Card/Basic.tsx
@@ -0,0 +1,20 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+
+function BasicExample() {
+  return (
+    <Card style={{ width: '18rem' }}>
+      <Card.Img variant="top" src="holder.js/100px180" />
+      <Card.Body>
+        <Card.Title>Card Title</Card.Title>
+        <Card.Text>
+          Some quick example text to build on the card title and make up the
+          bulk of the card's content.
+        </Card.Text>
+        <Button variant="primary">Go somewhere</Button>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Card/BgColor.tsx b/react-examples/Card/BgColor.tsx
new file mode 100644
index 0000000..779606d
--- /dev/null
+++ b/react-examples/Card/BgColor.tsx
@@ -0,0 +1,37 @@
+import Card from 'react-bootstrap/Card';
+
+function BgColorExample() {
+  return (
+    <>
+      {[
+        'Primary',
+        'Secondary',
+        'Success',
+        'Danger',
+        'Warning',
+        'Info',
+        'Light',
+        'Dark',
+      ].map((variant) => (
+        <Card
+          bg={variant.toLowerCase()}
+          key={variant}
+          text={variant.toLowerCase() === 'light' ? 'dark' : 'white'}
+          style={{ width: '18rem' }}
+          className="mb-2"
+        >
+          <Card.Header>Header</Card.Header>
+          <Card.Body>
+            <Card.Title>{variant} Card Title </Card.Title>
+            <Card.Text>
+              Some quick example text to build on the card title and make up the
+              bulk of the card's content.
+            </Card.Text>
+          </Card.Body>
+        </Card>
+      ))}
+    </>
+  );
+}
+
+export default BgColorExample;
diff --git a/react-examples/Card/BodyOnly.tsx b/react-examples/Card/BodyOnly.tsx
new file mode 100644
index 0000000..c84aa0b
--- /dev/null
+++ b/react-examples/Card/BodyOnly.tsx
@@ -0,0 +1,11 @@
+import Card from 'react-bootstrap/Card';
+
+function BodyOnlyExample() {
+  return (
+    <Card>
+      <Card.Body>This is some text within a card body.</Card.Body>
+    </Card>
+  );
+}
+
+export default BodyOnlyExample;
diff --git a/react-examples/Card/BodyShorthand.tsx b/react-examples/Card/BodyShorthand.tsx
new file mode 100644
index 0000000..315b746
--- /dev/null
+++ b/react-examples/Card/BodyShorthand.tsx
@@ -0,0 +1,7 @@
+import Card from 'react-bootstrap/Card';
+
+function BodyShorthandExample() {
+  return <Card body>This is some text within a card body.</Card>;
+}
+
+export default BodyShorthandExample;
diff --git a/react-examples/Card/Border.tsx b/react-examples/Card/Border.tsx
new file mode 100644
index 0000000..f12456b
--- /dev/null
+++ b/react-examples/Card/Border.tsx
@@ -0,0 +1,105 @@
+import Card from 'react-bootstrap/Card';
+
+function BorderExample() {
+  return (
+    <>
+      <Card border="primary" style={{ width: '18rem' }}>
+        <Card.Header>Header</Card.Header>
+        <Card.Body>
+          <Card.Title>Primary Card Title</Card.Title>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+      <br />
+
+      <Card border="secondary" style={{ width: '18rem' }}>
+        <Card.Header>Header</Card.Header>
+        <Card.Body>
+          <Card.Title>Secondary Card Title</Card.Title>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+      <br />
+
+      <Card border="success" style={{ width: '18rem' }}>
+        <Card.Header>Header</Card.Header>
+        <Card.Body>
+          <Card.Title>Success Card Title</Card.Title>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+      <br />
+
+      <Card border="danger" style={{ width: '18rem' }}>
+        <Card.Header>Header</Card.Header>
+        <Card.Body>
+          <Card.Title>Danger Card Title</Card.Title>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+      <br />
+
+      <Card border="warning" style={{ width: '18rem' }}>
+        <Card.Header>Header</Card.Header>
+        <Card.Body>
+          <Card.Title>Warning Card Title</Card.Title>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+      <br />
+
+      <Card border="info" style={{ width: '18rem' }}>
+        <Card.Header>Header</Card.Header>
+        <Card.Body>
+          <Card.Title>Info Card Title</Card.Title>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+      <br />
+
+      <Card border="dark" style={{ width: '18rem' }}>
+        <Card.Header>Header</Card.Header>
+        <Card.Body>
+          <Card.Title>Dark Card Title</Card.Title>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+      <br />
+
+      <Card border="light" style={{ width: '18rem' }}>
+        <Card.Header>Header</Card.Header>
+        <Card.Body>
+          <Card.Title>Light Card Title</Card.Title>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+      <br />
+    </>
+  );
+}
+
+export default BorderExample;
diff --git a/react-examples/Card/Grid.tsx b/react-examples/Card/Grid.tsx
new file mode 100644
index 0000000..f086922
--- /dev/null
+++ b/react-examples/Card/Grid.tsx
@@ -0,0 +1,27 @@
+import Card from 'react-bootstrap/Card';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+
+function GridExample() {
+  return (
+    <Row xs={1} md={2} className="g-4">
+      {Array.from({ length: 4 }).map((_, idx) => (
+        <Col key={idx}>
+          <Card>
+            <Card.Img variant="top" src="holder.js/100px160" />
+            <Card.Body>
+              <Card.Title>Card title</Card.Title>
+              <Card.Text>
+                This is a longer card with supporting text below as a natural
+                lead-in to additional content. This content is a little bit
+                longer.
+              </Card.Text>
+            </Card.Body>
+          </Card>
+        </Col>
+      ))}
+    </Row>
+  );
+}
+
+export default GridExample;
diff --git a/react-examples/Card/Group.tsx b/react-examples/Card/Group.tsx
new file mode 100644
index 0000000..f462043
--- /dev/null
+++ b/react-examples/Card/Group.tsx
@@ -0,0 +1,51 @@
+import Card from 'react-bootstrap/Card';
+import CardGroup from 'react-bootstrap/CardGroup';
+
+function GroupExample() {
+  return (
+    <CardGroup>
+      <Card>
+        <Card.Img variant="top" src="holder.js/100px160" />
+        <Card.Body>
+          <Card.Title>Card title</Card.Title>
+          <Card.Text>
+            This is a wider card with supporting text below as a natural lead-in
+            to additional content. This content is a little bit longer.
+          </Card.Text>
+        </Card.Body>
+        <Card.Footer>
+          <small className="text-muted">Last updated 3 mins ago</small>
+        </Card.Footer>
+      </Card>
+      <Card>
+        <Card.Img variant="top" src="holder.js/100px160" />
+        <Card.Body>
+          <Card.Title>Card title</Card.Title>
+          <Card.Text>
+            This card has supporting text below as a natural lead-in to
+            additional content.{' '}
+          </Card.Text>
+        </Card.Body>
+        <Card.Footer>
+          <small className="text-muted">Last updated 3 mins ago</small>
+        </Card.Footer>
+      </Card>
+      <Card>
+        <Card.Img variant="top" src="holder.js/100px160" />
+        <Card.Body>
+          <Card.Title>Card title</Card.Title>
+          <Card.Text>
+            This is a wider card with supporting text below as a natural lead-in
+            to additional content. This card has even longer content than the
+            first to show that equal height action.
+          </Card.Text>
+        </Card.Body>
+        <Card.Footer>
+          <small className="text-muted">Last updated 3 mins ago</small>
+        </Card.Footer>
+      </Card>
+    </CardGroup>
+  );
+}
+
+export default GroupExample;
diff --git a/react-examples/Card/HeaderAndFooter.tsx b/react-examples/Card/HeaderAndFooter.tsx
new file mode 100644
index 0000000..c9c01e7
--- /dev/null
+++ b/react-examples/Card/HeaderAndFooter.tsx
@@ -0,0 +1,20 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+
+function HeaderAndFooterExample() {
+  return (
+    <Card className="text-center">
+      <Card.Header>Featured</Card.Header>
+      <Card.Body>
+        <Card.Title>Special title treatment</Card.Title>
+        <Card.Text>
+          With supporting text below as a natural lead-in to additional content.
+        </Card.Text>
+        <Button variant="primary">Go somewhere</Button>
+      </Card.Body>
+      <Card.Footer className="text-muted">2 days ago</Card.Footer>
+    </Card>
+  );
+}
+
+export default HeaderAndFooterExample;
diff --git a/react-examples/Card/ImageAndText.tsx b/react-examples/Card/ImageAndText.tsx
new file mode 100644
index 0000000..eeef9ca
--- /dev/null
+++ b/react-examples/Card/ImageAndText.tsx
@@ -0,0 +1,29 @@
+import Card from 'react-bootstrap/Card';
+
+function ImageAndTextExample() {
+  return (
+    <>
+      <Card>
+        <Card.Img variant="top" src="holder.js/100px180" />
+        <Card.Body>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+      <br />
+      <Card>
+        <Card.Body>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+        </Card.Body>
+        <Card.Img variant="bottom" src="holder.js/100px180" />
+      </Card>
+    </>
+  );
+}
+
+export default ImageAndTextExample;
diff --git a/react-examples/Card/ImgOverlay.tsx b/react-examples/Card/ImgOverlay.tsx
new file mode 100644
index 0000000..0f3f44c
--- /dev/null
+++ b/react-examples/Card/ImgOverlay.tsx
@@ -0,0 +1,19 @@
+import Card from 'react-bootstrap/Card';
+
+function ImgOverlayExample() {
+  return (
+    <Card className="bg-dark text-white">
+      <Card.Img src="holder.js/100px270" alt="Card image" />
+      <Card.ImgOverlay>
+        <Card.Title>Card title</Card.Title>
+        <Card.Text>
+          This is a wider card with supporting text below as a natural lead-in
+          to additional content. This content is a little bit longer.
+        </Card.Text>
+        <Card.Text>Last updated 3 mins ago</Card.Text>
+      </Card.ImgOverlay>
+    </Card>
+  );
+}
+
+export default ImgOverlayExample;
diff --git a/react-examples/Card/KitchenSink.tsx b/react-examples/Card/KitchenSink.tsx
new file mode 100644
index 0000000..2b60c0f
--- /dev/null
+++ b/react-examples/Card/KitchenSink.tsx
@@ -0,0 +1,28 @@
+import Card from 'react-bootstrap/Card';
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function KitchenSinkExample() {
+  return (
+    <Card style={{ width: '18rem' }}>
+      <Card.Img variant="top" src="holder.js/100px180?text=Image cap" />
+      <Card.Body>
+        <Card.Title>Card Title</Card.Title>
+        <Card.Text>
+          Some quick example text to build on the card title and make up the
+          bulk of the card's content.
+        </Card.Text>
+      </Card.Body>
+      <ListGroup className="list-group-flush">
+        <ListGroup.Item>Cras justo odio</ListGroup.Item>
+        <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
+        <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
+      </ListGroup>
+      <Card.Body>
+        <Card.Link href="#">Card Link</Card.Link>
+        <Card.Link href="#">Another Link</Card.Link>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default KitchenSinkExample;
diff --git a/react-examples/Card/ListGroupWithHeader.tsx b/react-examples/Card/ListGroupWithHeader.tsx
new file mode 100644
index 0000000..36acd70
--- /dev/null
+++ b/react-examples/Card/ListGroupWithHeader.tsx
@@ -0,0 +1,17 @@
+import Card from 'react-bootstrap/Card';
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function ListGroupWithHeaderExample() {
+  return (
+    <Card style={{ width: '18rem' }}>
+      <Card.Header>Featured</Card.Header>
+      <ListGroup variant="flush">
+        <ListGroup.Item>Cras justo odio</ListGroup.Item>
+        <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
+        <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
+      </ListGroup>
+    </Card>
+  );
+}
+
+export default ListGroupWithHeaderExample;
diff --git a/react-examples/Card/ListGroups.tsx b/react-examples/Card/ListGroups.tsx
new file mode 100644
index 0000000..10f664f
--- /dev/null
+++ b/react-examples/Card/ListGroups.tsx
@@ -0,0 +1,16 @@
+import Card from 'react-bootstrap/Card';
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function ListGroupExample() {
+  return (
+    <Card style={{ width: '18rem' }}>
+      <ListGroup variant="flush">
+        <ListGroup.Item>Cras justo odio</ListGroup.Item>
+        <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
+        <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
+      </ListGroup>
+    </Card>
+  );
+}
+
+export default ListGroupExample;
diff --git a/react-examples/Card/NavPills.tsx b/react-examples/Card/NavPills.tsx
new file mode 100644
index 0000000..3415575
--- /dev/null
+++ b/react-examples/Card/NavPills.tsx
@@ -0,0 +1,34 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+import Nav from 'react-bootstrap/Nav';
+
+function NavPillsExample() {
+  return (
+    <Card>
+      <Card.Header>
+        <Nav variant="pills" defaultActiveKey="#first">
+          <Nav.Item>
+            <Nav.Link href="#first">Active</Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link href="#link">Link</Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link href="#disabled" disabled>
+              Disabled
+            </Nav.Link>
+          </Nav.Item>
+        </Nav>
+      </Card.Header>
+      <Card.Body>
+        <Card.Title>Special title treatment</Card.Title>
+        <Card.Text>
+          With supporting text below as a natural lead-in to additional content.
+        </Card.Text>
+        <Button variant="primary">Go somewhere</Button>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default NavPillsExample;
diff --git a/react-examples/Card/NavTabs.tsx b/react-examples/Card/NavTabs.tsx
new file mode 100644
index 0000000..76bdbb3
--- /dev/null
+++ b/react-examples/Card/NavTabs.tsx
@@ -0,0 +1,34 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+import Nav from 'react-bootstrap/Nav';
+
+function NavTabsExample() {
+  return (
+    <Card>
+      <Card.Header>
+        <Nav variant="tabs" defaultActiveKey="#first">
+          <Nav.Item>
+            <Nav.Link href="#first">Active</Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link href="#link">Link</Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link href="#disabled" disabled>
+              Disabled
+            </Nav.Link>
+          </Nav.Item>
+        </Nav>
+      </Card.Header>
+      <Card.Body>
+        <Card.Title>Special title treatment</Card.Title>
+        <Card.Text>
+          With supporting text below as a natural lead-in to additional content.
+        </Card.Text>
+        <Button variant="primary">Go somewhere</Button>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default NavTabsExample;
diff --git a/react-examples/Card/Text.tsx b/react-examples/Card/Text.tsx
new file mode 100644
index 0000000..7580531
--- /dev/null
+++ b/react-examples/Card/Text.tsx
@@ -0,0 +1,20 @@
+import Card from 'react-bootstrap/Card';
+
+function TextExample() {
+  return (
+    <Card style={{ width: '18rem' }}>
+      <Card.Body>
+        <Card.Title>Card Title</Card.Title>
+        <Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
+        <Card.Text>
+          Some quick example text to build on the card title and make up the
+          bulk of the card's content.
+        </Card.Text>
+        <Card.Link href="#">Card Link</Card.Link>
+        <Card.Link href="#">Another Link</Card.Link>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default TextExample;
diff --git a/react-examples/Card/WithHeader.tsx b/react-examples/Card/WithHeader.tsx
new file mode 100644
index 0000000..2b65bbf
--- /dev/null
+++ b/react-examples/Card/WithHeader.tsx
@@ -0,0 +1,19 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+
+function WithHeaderExample() {
+  return (
+    <Card>
+      <Card.Header>Featured</Card.Header>
+      <Card.Body>
+        <Card.Title>Special title treatment</Card.Title>
+        <Card.Text>
+          With supporting text below as a natural lead-in to additional content.
+        </Card.Text>
+        <Button variant="primary">Go somewhere</Button>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default WithHeaderExample;
diff --git a/react-examples/Card/WithHeaderAndQuote.tsx b/react-examples/Card/WithHeaderAndQuote.tsx
new file mode 100644
index 0000000..2f84657
--- /dev/null
+++ b/react-examples/Card/WithHeaderAndQuote.tsx
@@ -0,0 +1,23 @@
+import Card from 'react-bootstrap/Card';
+
+function WithHeaderAndQuoteExample() {
+  return (
+    <Card>
+      <Card.Header>Quote</Card.Header>
+      <Card.Body>
+        <blockquote className="blockquote mb-0">
+          <p>
+            {' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+            posuere erat a ante.{' '}
+          </p>
+          <footer className="blockquote-footer">
+            Someone famous in <cite title="Source Title">Source Title</cite>
+          </footer>
+        </blockquote>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default WithHeaderAndQuoteExample;
diff --git a/react-examples/Card/WithHeaderStyled.tsx b/react-examples/Card/WithHeaderStyled.tsx
new file mode 100644
index 0000000..456fba1
--- /dev/null
+++ b/react-examples/Card/WithHeaderStyled.tsx
@@ -0,0 +1,19 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+
+function WithHeaderStyledExample() {
+  return (
+    <Card>
+      <Card.Header as="h5">Featured</Card.Header>
+      <Card.Body>
+        <Card.Title>Special title treatment</Card.Title>
+        <Card.Text>
+          With supporting text below as a natural lead-in to additional content.
+        </Card.Text>
+        <Button variant="primary">Go somewhere</Button>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default WithHeaderStyledExample;
diff --git a/react-examples/Carousel/CarouselFade.tsx b/react-examples/Carousel/CarouselFade.tsx
new file mode 100644
index 0000000..fc0d017
--- /dev/null
+++ b/react-examples/Carousel/CarouselFade.tsx
@@ -0,0 +1,34 @@
+import Carousel from 'react-bootstrap/Carousel';
+import ExampleCarouselImage from 'components/ExampleCarouselImage';
+
+function CarouselFadeExample() {
+  return (
+    <Carousel fade>
+      <Carousel.Item>
+        <ExampleCarouselImage text="First slide" />
+        <Carousel.Caption>
+          <h3>First slide label</h3>
+          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <ExampleCarouselImage text="Second slide" />
+        <Carousel.Caption>
+          <h3>Second slide label</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <ExampleCarouselImage text="Third slide" />
+        <Carousel.Caption>
+          <h3>Third slide label</h3>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
+          </p>
+        </Carousel.Caption>
+      </Carousel.Item>
+    </Carousel>
+  );
+}
+
+export default CarouselFadeExample;
diff --git a/react-examples/Carousel/Controlled.tsx b/react-examples/Carousel/Controlled.tsx
new file mode 100644
index 0000000..c0a748d
--- /dev/null
+++ b/react-examples/Carousel/Controlled.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import Carousel from 'react-bootstrap/Carousel';
+import ExampleCarouselImage from 'components/ExampleCarouselImage';
+
+function ControlledCarousel() {
+  const [index, setIndex] = useState(0);
+
+  const handleSelect = (selectedIndex) => {
+    setIndex(selectedIndex);
+  };
+
+  return (
+    <Carousel activeIndex={index} onSelect={handleSelect}>
+      <Carousel.Item>
+        <ExampleCarouselImage text="First slide" />
+        <Carousel.Caption>
+          <h3>First slide label</h3>
+          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <ExampleCarouselImage text="Second slide" />
+        <Carousel.Caption>
+          <h3>Second slide label</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <ExampleCarouselImage text="Third slide" />
+        <Carousel.Caption>
+          <h3>Third slide label</h3>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
+          </p>
+        </Carousel.Caption>
+      </Carousel.Item>
+    </Carousel>
+  );
+}
+
+export default ControlledCarousel;
diff --git a/react-examples/Carousel/DarkVariant.tsx b/react-examples/Carousel/DarkVariant.tsx
new file mode 100644
index 0000000..44158cb
--- /dev/null
+++ b/react-examples/Carousel/DarkVariant.tsx
@@ -0,0 +1,45 @@
+import Carousel from 'react-bootstrap/Carousel';
+
+function DarkVariantExample() {
+  return (
+    <Carousel data-bs-theme="dark">
+      <Carousel.Item>
+        <img
+          className="d-block w-100"
+          src="holder.js/800x400?text=First slide&bg=f5f5f5"
+          alt="First slide"
+        />
+        <Carousel.Caption>
+          <h5>First slide label</h5>
+          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <img
+          className="d-block w-100"
+          src="holder.js/800x400?text=Second slide&bg=eee"
+          alt="Second slide"
+        />
+        <Carousel.Caption>
+          <h5>Second slide label</h5>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <img
+          className="d-block w-100"
+          src="holder.js/800x400?text=Third slide&bg=e5e5e5"
+          alt="Third slide"
+        />
+        <Carousel.Caption>
+          <h5>Third slide label</h5>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
+          </p>
+        </Carousel.Caption>
+      </Carousel.Item>
+    </Carousel>
+  );
+}
+
+export default DarkVariantExample;
diff --git a/react-examples/Carousel/IndividualIntervals.tsx b/react-examples/Carousel/IndividualIntervals.tsx
new file mode 100644
index 0000000..4d77670
--- /dev/null
+++ b/react-examples/Carousel/IndividualIntervals.tsx
@@ -0,0 +1,34 @@
+import Carousel from 'react-bootstrap/Carousel';
+import ExampleCarouselImage from 'components/ExampleCarouselImage';
+
+function IndividualIntervalsExample() {
+  return (
+    <Carousel>
+      <Carousel.Item interval={1000}>
+        <ExampleCarouselImage text="First slide" />
+        <Carousel.Caption>
+          <h3>First slide label</h3>
+          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item interval={500}>
+        <ExampleCarouselImage text="Second slide" />
+        <Carousel.Caption>
+          <h3>Second slide label</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <ExampleCarouselImage text="Third slide" />
+        <Carousel.Caption>
+          <h3>Third slide label</h3>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
+          </p>
+        </Carousel.Caption>
+      </Carousel.Item>
+    </Carousel>
+  );
+}
+
+export default IndividualIntervalsExample;
diff --git a/react-examples/Carousel/NoTransition.tsx b/react-examples/Carousel/NoTransition.tsx
new file mode 100644
index 0000000..19142c3
--- /dev/null
+++ b/react-examples/Carousel/NoTransition.tsx
@@ -0,0 +1,34 @@
+import Carousel from 'react-bootstrap/Carousel';
+import ExampleCarouselImage from 'components/ExampleCarouselImage';
+
+function NoTransitionExample() {
+  return (
+    <Carousel slide={false}>
+      <Carousel.Item>
+        <ExampleCarouselImage text="First slide" />
+        <Carousel.Caption>
+          <h3>First slide label</h3>
+          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <ExampleCarouselImage text="Second slide" />
+        <Carousel.Caption>
+          <h3>Second slide label</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <ExampleCarouselImage text="Third slide" />
+        <Carousel.Caption>
+          <h3>Third slide label</h3>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
+          </p>
+        </Carousel.Caption>
+      </Carousel.Item>
+    </Carousel>
+  );
+}
+
+export default NoTransitionExample;
diff --git a/react-examples/Carousel/Uncontrolled.tsx b/react-examples/Carousel/Uncontrolled.tsx
new file mode 100644
index 0000000..fb638b3
--- /dev/null
+++ b/react-examples/Carousel/Uncontrolled.tsx
@@ -0,0 +1,34 @@
+import Carousel from 'react-bootstrap/Carousel';
+import ExampleCarouselImage from 'components/ExampleCarouselImage';
+
+function UncontrolledExample() {
+  return (
+    <Carousel>
+      <Carousel.Item>
+        <ExampleCarouselImage text="First slide" />
+        <Carousel.Caption>
+          <h3>First slide label</h3>
+          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <ExampleCarouselImage text="Second slide" />
+        <Carousel.Caption>
+          <h3>Second slide label</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+      <Carousel.Item>
+        <ExampleCarouselImage text="Third slide" />
+        <Carousel.Caption>
+          <h3>Third slide label</h3>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
+          </p>
+        </Carousel.Caption>
+      </Carousel.Item>
+    </Carousel>
+  );
+}
+
+export default UncontrolledExample;
diff --git a/react-examples/CloseButton/Basic.tsx b/react-examples/CloseButton/Basic.tsx
new file mode 100644
index 0000000..7b11df6
--- /dev/null
+++ b/react-examples/CloseButton/Basic.tsx
@@ -0,0 +1,7 @@
+import CloseButton from 'react-bootstrap/CloseButton';
+
+function BasicExample() {
+  return <CloseButton />;
+}
+
+export default BasicExample;
diff --git a/react-examples/CloseButton/Disabled.tsx b/react-examples/CloseButton/Disabled.tsx
new file mode 100644
index 0000000..ece8068
--- /dev/null
+++ b/react-examples/CloseButton/Disabled.tsx
@@ -0,0 +1,7 @@
+import CloseButton from 'react-bootstrap/CloseButton';
+
+function DisabledExample() {
+  return <CloseButton disabled />;
+}
+
+export default DisabledExample;
diff --git a/react-examples/CloseButton/Labelled.tsx b/react-examples/CloseButton/Labelled.tsx
new file mode 100644
index 0000000..c46c475
--- /dev/null
+++ b/react-examples/CloseButton/Labelled.tsx
@@ -0,0 +1,7 @@
+import CloseButton from 'react-bootstrap/CloseButton';
+
+function LabelledExample() {
+  return <CloseButton aria-label="Hide" />;
+}
+
+export default LabelledExample;
diff --git a/react-examples/CloseButton/Variants.tsx b/react-examples/CloseButton/Variants.tsx
new file mode 100644
index 0000000..2f10e97
--- /dev/null
+++ b/react-examples/CloseButton/Variants.tsx
@@ -0,0 +1,12 @@
+import CloseButton from 'react-bootstrap/CloseButton';
+
+function VariantsExample() {
+  return (
+    <div data-bs-theme="dark" className='bg-dark p-2'>
+      <CloseButton />
+      <CloseButton disabled />
+    </div>
+  );
+}
+
+export default VariantsExample;
diff --git a/react-examples/Collapse.tsx b/react-examples/Collapse.tsx
new file mode 100644
index 0000000..02f53b4
--- /dev/null
+++ b/react-examples/Collapse.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Collapse from 'react-bootstrap/Collapse';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        onClick={() => setOpen(!open)}
+        aria-controls="example-collapse-text"
+        aria-expanded={open}
+      >
+        click
+      </Button>
+      <Collapse in={open}>
+        <div id="example-collapse-text">
+          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
+          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
+          labore wes anderson cred nesciunt sapiente ea proident.
+        </div>
+      </Collapse>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/CollapseHorizontal.tsx b/react-examples/CollapseHorizontal.tsx
new file mode 100644
index 0000000..5acad54
--- /dev/null
+++ b/react-examples/CollapseHorizontal.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+import Collapse from 'react-bootstrap/Collapse';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        onClick={() => setOpen(!open)}
+        aria-controls="example-collapse-text"
+        aria-expanded={open}
+      >
+        click
+      </Button>
+      <div style={{ minHeight: '150px' }}>
+        <Collapse in={open} dimension="width">
+          <div id="example-collapse-text">
+            <Card body style={{ width: '400px' }}>
+              Anim pariatur cliche reprehenderit, enim eiusmod high life
+              accusamus terry richardson ad squid. Nihil anim keffiyeh
+              helvetica, craft beer labore wes anderson cred nesciunt sapiente
+              ea proident.
+            </Card>
+          </div>
+        </Collapse>
+      </div>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/ColorMode.tsx b/react-examples/ColorMode.tsx
new file mode 100644
index 0000000..96752bd
--- /dev/null
+++ b/react-examples/ColorMode.tsx
@@ -0,0 +1,42 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+
+function Example() {
+  return (
+    <Stack direction="horizontal" gap={3}>
+      <DropdownButton
+        id="dropdown-button-dark-example2"
+        variant="secondary"
+        title="Light dropdown"
+        className="mt-2"
+        data-bs-theme="light"
+      >
+        <Dropdown.Item href="#/action-1" active>
+          Action
+        </Dropdown.Item>
+        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+        <Dropdown.Divider />
+        <Dropdown.Item href="#/action-4">Separated link</Dropdown.Item>
+      </DropdownButton>
+
+      <DropdownButton
+        id="dropdown-button-dark-example2"
+        variant="secondary"
+        title="Dark dropdown"
+        className="mt-2"
+        data-bs-theme="dark"
+      >
+        <Dropdown.Item href="#/action-1" active>
+          Action
+        </Dropdown.Item>
+        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+        <Dropdown.Divider />
+        <Dropdown.Item href="#/action-4">Separated link</Dropdown.Item>
+      </DropdownButton>
+    </Stack>
+  );
+}
+
+export default ColorMode;
diff --git a/react-examples/CustomBreakpoints.tsx b/react-examples/CustomBreakpoints.tsx
new file mode 100644
index 0000000..6aa1bd9
--- /dev/null
+++ b/react-examples/CustomBreakpoints.tsx
@@ -0,0 +1,6 @@
+<ThemeProvider
+  breakpoints={['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs']}
+  minBreakpoint="xxs"
+>
+  <div>Your app...</div>
+</ThemeProvider>;
diff --git a/react-examples/Dropdown/AutoClose.tsx b/react-examples/Dropdown/AutoClose.tsx
new file mode 100644
index 0000000..0a39627
--- /dev/null
+++ b/react-examples/Dropdown/AutoClose.tsx
@@ -0,0 +1,57 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function AutoCloseExample() {
+  return (
+    <>
+      <Dropdown className="d-inline mx-2">
+        <Dropdown.Toggle id="dropdown-autoclose-true">
+          Default Dropdown
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Dropdown className="d-inline mx-2" autoClose="inside">
+        <Dropdown.Toggle id="dropdown-autoclose-inside">
+          Clickable Outside
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Dropdown className="d-inline mx-2" autoClose="outside">
+        <Dropdown.Toggle id="dropdown-autoclose-outside">
+          Clickable Inside
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Dropdown className="d-inline mx-2" autoClose={false}>
+        <Dropdown.Toggle id="dropdown-autoclose-false">
+          Manual Close
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+          <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+}
+
+export default AutoCloseExample;
diff --git a/react-examples/Dropdown/Basic.tsx b/react-examples/Dropdown/Basic.tsx
new file mode 100644
index 0000000..ca34381
--- /dev/null
+++ b/react-examples/Dropdown/Basic.tsx
@@ -0,0 +1,19 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function BasicExample() {
+  return (
+    <Dropdown>
+      <Dropdown.Toggle variant="success" id="dropdown-basic">
+        Dropdown Button
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
+        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Dropdown/BasicButton.tsx b/react-examples/Dropdown/BasicButton.tsx
new file mode 100644
index 0000000..5acac9f
--- /dev/null
+++ b/react-examples/Dropdown/BasicButton.tsx
@@ -0,0 +1,14 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+
+function BasicButtonExample() {
+  return (
+    <DropdownButton id="dropdown-basic-button" title="Dropdown button">
+      <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
+      <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+      <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+    </DropdownButton>
+  );
+}
+
+export default BasicButtonExample;
diff --git a/react-examples/Dropdown/ButtonCustom.tsx b/react-examples/Dropdown/ButtonCustom.tsx
new file mode 100644
index 0000000..8f1eea9
--- /dev/null
+++ b/react-examples/Dropdown/ButtonCustom.tsx
@@ -0,0 +1,37 @@
+import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function ButtonCustomExample() {
+  return (
+    <>
+      <Dropdown as={ButtonGroup}>
+        <Dropdown.Toggle id="dropdown-custom-1">Pow! Zoom!</Dropdown.Toggle>
+        <Dropdown.Menu className="super-colors">
+          <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+          <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+          <Dropdown.Item eventKey="3" active>
+            Active Item
+          </Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>{' '}
+      <Dropdown as={ButtonGroup}>
+        <Button variant="info">mix it up style-wise</Button>
+        <Dropdown.Toggle split variant="success" id="dropdown-custom-2" />
+        <Dropdown.Menu className="super-colors">
+          <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+          <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+          <Dropdown.Item eventKey="3" active>
+            Active Item
+          </Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+}
+
+export default ButtonCustomExample;
diff --git a/react-examples/Dropdown/ButtonCustomMenu.tsx b/react-examples/Dropdown/ButtonCustomMenu.tsx
new file mode 100644
index 0000000..c95c879
--- /dev/null
+++ b/react-examples/Dropdown/ButtonCustomMenu.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import Dropdown from 'react-bootstrap/Dropdown';
+import Form from 'react-bootstrap/Form';
+
+// The forwardRef is important!!
+// Dropdown needs access to the DOM node in order to position the Menu
+const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
+  <a
+    href=""
+    ref={ref}
+    onClick={(e) => {
+      e.preventDefault();
+      onClick(e);
+    }}
+  >
+    {children}
+    &#x25bc;
+  </a>
+));
+
+// forwardRef again here!
+// Dropdown needs access to the DOM of the Menu to measure it
+const CustomMenu = React.forwardRef(
+  ({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <div
+        ref={ref}
+        style={style}
+        className={className}
+        aria-labelledby={labeledBy}
+      >
+        <Form.Control
+          autoFocus
+          className="mx-3 my-2 w-auto"
+          placeholder="Type to filter..."
+          onChange={(e) => setValue(e.target.value)}
+          value={value}
+        />
+        <ul className="list-unstyled">
+          {React.Children.toArray(children).filter(
+            (child) =>
+              !value || child.props.children.toLowerCase().startsWith(value),
+          )}
+        </ul>
+      </div>
+    );
+  },
+);
+
+render(
+  <Dropdown>
+    <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
+      Custom toggle
+    </Dropdown.Toggle>
+
+    <Dropdown.Menu as={CustomMenu}>
+      <Dropdown.Item eventKey="1">Red</Dropdown.Item>
+      <Dropdown.Item eventKey="2">Blue</Dropdown.Item>
+      <Dropdown.Item eventKey="3" active>
+        Orange
+      </Dropdown.Item>
+      <Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>,
+);
diff --git a/react-examples/Dropdown/ButtonDark.tsx b/react-examples/Dropdown/ButtonDark.tsx
new file mode 100644
index 0000000..5ff63ce
--- /dev/null
+++ b/react-examples/Dropdown/ButtonDark.tsx
@@ -0,0 +1,42 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+
+function ButtonDarkExample() {
+  return (
+    <>
+      <Dropdown data-bs-theme="dark">
+        <Dropdown.Toggle id="dropdown-button-dark-example1" variant="secondary">
+          Dropdown Button
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu>
+          <Dropdown.Item href="#/action-1" active>
+            Action
+          </Dropdown.Item>
+          <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+          <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item href="#/action-4">Separated link</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <DropdownButton
+        id="dropdown-button-dark-example2"
+        variant="secondary"
+        title="Dropdown button"
+        className="mt-2"
+        data-bs-theme="dark"
+      >
+        <Dropdown.Item href="#/action-1" active>
+          Action
+        </Dropdown.Item>
+        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+        <Dropdown.Divider />
+        <Dropdown.Item href="#/action-4">Separated link</Dropdown.Item>
+      </DropdownButton>
+    </>
+  );
+}
+
+export default ButtonDarkExample;
diff --git a/react-examples/Dropdown/ButtonSizes.tsx b/react-examples/Dropdown/ButtonSizes.tsx
new file mode 100644
index 0000000..d011e64
--- /dev/null
+++ b/react-examples/Dropdown/ButtonSizes.tsx
@@ -0,0 +1,48 @@
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+import SplitButton from 'react-bootstrap/SplitButton';
+
+function ButtonSizesExample() {
+  return (
+    <>
+      <div className="mb-2">
+        {[DropdownButton, SplitButton].map((DropdownType, idx) => (
+          <DropdownType
+            as={ButtonGroup}
+            key={idx}
+            id={`dropdown-button-drop-${idx}`}
+            size="lg"
+            title="Drop large"
+          >
+            <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+            <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+            <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+          </DropdownType>
+        ))}
+      </div>
+      <div>
+        {[DropdownButton, SplitButton].map((DropdownType, idx) => (
+          <DropdownType
+            as={ButtonGroup}
+            key={idx}
+            id={`dropdown-button-drop-${idx}`}
+            size="sm"
+            variant="secondary"
+            title="Drop small"
+          >
+            <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+            <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+            <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+          </DropdownType>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default ButtonSizesExample;
diff --git a/react-examples/Dropdown/DropDirections.tsx b/react-examples/Dropdown/DropDirections.tsx
new file mode 100644
index 0000000..ed5c19d
--- /dev/null
+++ b/react-examples/Dropdown/DropDirections.tsx
@@ -0,0 +1,52 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+import SplitButton from 'react-bootstrap/SplitButton';
+
+function DropDirectioExample() {
+  return (
+    <>
+      <div className="mb-2">
+        {['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
+          (direction) => (
+            <DropdownButton
+              as={ButtonGroup}
+              key={direction}
+              id={`dropdown-button-drop-${direction}`}
+              drop={direction}
+              variant="secondary"
+              title={` Drop ${direction} `}
+            >
+              <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+              <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+              <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+              <Dropdown.Divider />
+              <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+            </DropdownButton>
+          ),
+        )}
+      </div>
+
+      <div>
+        {['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
+          (direction) => (
+            <SplitButton
+              key={direction}
+              id={`dropdown-button-drop-${direction}`}
+              drop={direction}
+              variant="secondary"
+              title={`Drop ${direction}`}
+            >
+              <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+              <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+              <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+              <Dropdown.Divider />
+              <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+            </SplitButton>
+          ),
+        )}
+      </div>
+    </>
+  );
+}
+
+export default DropDirectioExample;
diff --git a/react-examples/Dropdown/DropdownItemTags.tsx b/react-examples/Dropdown/DropdownItemTags.tsx
new file mode 100644
index 0000000..9c99bcf
--- /dev/null
+++ b/react-examples/Dropdown/DropdownItemTags.tsx
@@ -0,0 +1,15 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+
+function DropdownItemTagsExample() {
+  return (
+    <DropdownButton id="dropdown-item-button" title="Dropdown button">
+      <Dropdown.ItemText>Dropdown item text</Dropdown.ItemText>
+      <Dropdown.Item as="button">Action</Dropdown.Item>
+      <Dropdown.Item as="button">Another action</Dropdown.Item>
+      <Dropdown.Item as="button">Something else</Dropdown.Item>
+    </DropdownButton>
+  );
+}
+
+export default DropdownItemTagsExample;
diff --git a/react-examples/Dropdown/MenuAlignEnd.tsx b/react-examples/Dropdown/MenuAlignEnd.tsx
new file mode 100644
index 0000000..99757a5
--- /dev/null
+++ b/react-examples/Dropdown/MenuAlignEnd.tsx
@@ -0,0 +1,20 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+
+function MenuAlignEndExample() {
+  return (
+    <DropdownButton
+      align="end"
+      title="Dropdown end"
+      id="dropdown-menu-align-end"
+    >
+      <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+      <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+      <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+      <Dropdown.Divider />
+      <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+    </DropdownButton>
+  );
+}
+
+export default MenuAlignEndExample;
diff --git a/react-examples/Dropdown/MenuAlignResponsive.tsx b/react-examples/Dropdown/MenuAlignResponsive.tsx
new file mode 100644
index 0000000..a4f8b87
--- /dev/null
+++ b/react-examples/Dropdown/MenuAlignResponsive.tsx
@@ -0,0 +1,33 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+import SplitButton from 'react-bootstrap/SplitButton';
+
+function MenuAlignResponsiveExample() {
+  return (
+    <>
+      <div>
+        <DropdownButton
+          as={ButtonGroup}
+          align={{ lg: 'end' }}
+          title="Left-aligned but right aligned when large screen"
+          id="dropdown-menu-align-responsive-1"
+        >
+          <Dropdown.Item eventKey="1">Action 1</Dropdown.Item>
+          <Dropdown.Item eventKey="2">Action 2</Dropdown.Item>
+        </DropdownButton>
+      </div>
+      <div className="mt-2">
+        <SplitButton
+          align={{ lg: 'start' }}
+          title="Right-aligned but left aligned when large screen"
+          id="dropdown-menu-align-responsive-2"
+        >
+          <Dropdown.Item eventKey="1">Action 1</Dropdown.Item>
+          <Dropdown.Item eventKey="2">Action 2</Dropdown.Item>
+        </SplitButton>
+      </div>
+    </>
+  );
+}
+
+export default MenuAlignResponsiveExample;
diff --git a/react-examples/Dropdown/MenuDividers.tsx b/react-examples/Dropdown/MenuDividers.tsx
new file mode 100644
index 0000000..26211c7
--- /dev/null
+++ b/react-examples/Dropdown/MenuDividers.tsx
@@ -0,0 +1,15 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function MenuDividersExample() {
+  return (
+    <Dropdown.Menu show>
+      <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+      <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+      <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+      <Dropdown.Divider />
+      <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+    </Dropdown.Menu>
+  );
+}
+
+export default MenuDividersExample;
diff --git a/react-examples/Dropdown/MenuHeaders.tsx b/react-examples/Dropdown/MenuHeaders.tsx
new file mode 100644
index 0000000..4e28161
--- /dev/null
+++ b/react-examples/Dropdown/MenuHeaders.tsx
@@ -0,0 +1,13 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function MenuHeadersExample() {
+  return (
+    <Dropdown.Menu show>
+      <Dropdown.Header>Dropdown header</Dropdown.Header>
+      <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+      <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+    </Dropdown.Menu>
+  );
+}
+
+export default MenuHeadersExample;
diff --git a/react-examples/Dropdown/NavbarDark.tsx b/react-examples/Dropdown/NavbarDark.tsx
new file mode 100644
index 0000000..de70cbc
--- /dev/null
+++ b/react-examples/Dropdown/NavbarDark.tsx
@@ -0,0 +1,36 @@
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+
+function NavbarDarkExample() {
+  return (
+    <Navbar variant="dark" bg="dark" expand="lg">
+      <Container fluid>
+        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
+        <Navbar.Toggle aria-controls="navbar-dark-example" />
+        <Navbar.Collapse id="navbar-dark-example">
+          <Nav>
+            <NavDropdown
+              id="nav-dropdown-dark-example"
+              title="Dropdown"
+              menuVariant="dark"
+            >
+              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.2">
+                Another action
+              </NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
+              <NavDropdown.Divider />
+              <NavDropdown.Item href="#action/3.4">
+                Separated link
+              </NavDropdown.Item>
+            </NavDropdown>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default NavbarDarkExample;
diff --git a/react-examples/Dropdown/SplitBasic.tsx b/react-examples/Dropdown/SplitBasic.tsx
new file mode 100644
index 0000000..38e1d22
--- /dev/null
+++ b/react-examples/Dropdown/SplitBasic.tsx
@@ -0,0 +1,21 @@
+import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function SplitBasicExample() {
+  return (
+    <Dropdown as={ButtonGroup}>
+      <Button variant="success">Split Button</Button>
+
+      <Dropdown.Toggle split variant="success" id="dropdown-split-basic" />
+
+      <Dropdown.Menu>
+        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
+        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+export default SplitBasicExample;
diff --git a/react-examples/Dropdown/SplitVariants.tsx b/react-examples/Dropdown/SplitVariants.tsx
new file mode 100644
index 0000000..1fedbd2
--- /dev/null
+++ b/react-examples/Dropdown/SplitVariants.tsx
@@ -0,0 +1,29 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import SplitButton from 'react-bootstrap/SplitButton';
+
+function SplitVariantExample() {
+  return (
+    <>
+      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
+        (variant) => (
+          <SplitButton
+            key={variant}
+            id={`dropdown-split-variants-${variant}`}
+            variant={variant.toLowerCase()}
+            title={variant}
+          >
+            <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+            <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+            <Dropdown.Item eventKey="3" active>
+              Active Item
+            </Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+          </SplitButton>
+        ),
+      )}
+    </>
+  );
+}
+
+export default SplitVariantExample;
diff --git a/react-examples/Dropdown/Variants.tsx b/react-examples/Dropdown/Variants.tsx
new file mode 100644
index 0000000..6f0bc13
--- /dev/null
+++ b/react-examples/Dropdown/Variants.tsx
@@ -0,0 +1,31 @@
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+
+function VariantsExample() {
+  return (
+    <>
+      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
+        (variant) => (
+          <DropdownButton
+            as={ButtonGroup}
+            key={variant}
+            id={`dropdown-variants-${variant}`}
+            variant={variant.toLowerCase()}
+            title={variant}
+          >
+            <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+            <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+            <Dropdown.Item eventKey="3" active>
+              Active Item
+            </Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+          </DropdownButton>
+        ),
+      )}
+    </>
+  );
+}
+
+export default VariantsExample;
diff --git a/react-examples/Fade.tsx b/react-examples/Fade.tsx
new file mode 100644
index 0000000..5b9ab08
--- /dev/null
+++ b/react-examples/Fade.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Fade from 'react-bootstrap/Fade';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        onClick={() => setOpen(!open)}
+        aria-controls="example-fade-text"
+        aria-expanded={open}
+      >
+        Toggle text
+      </Button>
+      <Fade in={open}>
+        <div id="example-fade-text">
+          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
+          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
+          labore wes anderson cred nesciunt sapiente ea proident.
+        </div>
+      </Fade>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Figure.tsx b/react-examples/Figure.tsx
new file mode 100644
index 0000000..6ae01a0
--- /dev/null
+++ b/react-examples/Figure.tsx
@@ -0,0 +1,19 @@
+import Figure from 'react-bootstrap/Figure';
+
+function FigureExample() {
+  return (
+    <Figure>
+      <Figure.Image
+        width={171}
+        height={180}
+        alt="171x180"
+        src="holder.js/171x180"
+      />
+      <Figure.Caption>
+        Nulla vitae elit libero, a pharetra augue mollis interdum.
+      </Figure.Caption>
+    </Figure>
+  );
+}
+
+export default FigureExample;
diff --git a/react-examples/Form/Basic.tsx b/react-examples/Form/Basic.tsx
new file mode 100644
index 0000000..e40ac80
--- /dev/null
+++ b/react-examples/Form/Basic.tsx
@@ -0,0 +1,29 @@
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+
+function BasicExample() {
+  return (
+    <Form>
+      <Form.Group className="mb-3" controlId="formBasicEmail">
+        <Form.Label>Email address</Form.Label>
+        <Form.Control type="email" placeholder="Enter email" />
+        <Form.Text className="text-muted">
+          We'll never share your email with anyone else.
+        </Form.Text>
+      </Form.Group>
+
+      <Form.Group className="mb-3" controlId="formBasicPassword">
+        <Form.Label>Password</Form.Label>
+        <Form.Control type="password" placeholder="Password" />
+      </Form.Group>
+      <Form.Group className="mb-3" controlId="formBasicCheckbox">
+        <Form.Check type="checkbox" label="Check me out" />
+      </Form.Group>
+      <Button variant="primary" type="submit">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Form/Check.tsx b/react-examples/Form/Check.tsx
new file mode 100644
index 0000000..a690ac0
--- /dev/null
+++ b/react-examples/Form/Check.tsx
@@ -0,0 +1,26 @@
+import Form from 'react-bootstrap/Form';
+
+function CheckExample() {
+  return (
+    <Form>
+      {['checkbox', 'radio'].map((type) => (
+        <div key={`default-${type}`} className="mb-3">
+          <Form.Check // prettier-ignore
+            type={type}
+            id={`default-${type}`}
+            label={`default ${type}`}
+          />
+
+          <Form.Check
+            disabled
+            type={type}
+            label={`disabled ${type}`}
+            id={`disabled-default-${type}`}
+          />
+        </div>
+      ))}
+    </Form>
+  );
+}
+
+export default CheckExample;
diff --git a/react-examples/Form/CheckApi.tsx b/react-examples/Form/CheckApi.tsx
new file mode 100644
index 0000000..e51775a
--- /dev/null
+++ b/react-examples/Form/CheckApi.tsx
@@ -0,0 +1,21 @@
+import Form from 'react-bootstrap/Form';
+
+function CheckApiExample() {
+  return (
+    <Form>
+      {['checkbox', 'radio'].map((type) => (
+        <div key={type} className="mb-3">
+          <Form.Check type={type} id={`check-api-${type}`}>
+            <Form.Check.Input type={type} isValid />
+            <Form.Check.Label>{`Custom api ${type}`}</Form.Check.Label>
+            <Form.Control.Feedback type="valid">
+              You did it!
+            </Form.Control.Feedback>
+          </Form.Check>
+        </div>
+      ))}
+    </Form>
+  );
+}
+
+export default CheckApiExample;
diff --git a/react-examples/Form/CheckInline.tsx b/react-examples/Form/CheckInline.tsx
new file mode 100644
index 0000000..ad92a45
--- /dev/null
+++ b/react-examples/Form/CheckInline.tsx
@@ -0,0 +1,35 @@
+import Form from 'react-bootstrap/Form';
+
+function CheckInlineExample() {
+  return (
+    <Form>
+      {['checkbox', 'radio'].map((type) => (
+        <div key={`inline-${type}`} className="mb-3">
+          <Form.Check
+            inline
+            label="1"
+            name="group1"
+            type={type}
+            id={`inline-${type}-1`}
+          />
+          <Form.Check
+            inline
+            label="2"
+            name="group1"
+            type={type}
+            id={`inline-${type}-2`}
+          />
+          <Form.Check
+            inline
+            disabled
+            label="3 (disabled)"
+            type={type}
+            id={`inline-${type}-3`}
+          />
+        </div>
+      ))}
+    </Form>
+  );
+}
+
+export default CheckInlineExample;
diff --git a/react-examples/Form/CheckReverse.tsx b/react-examples/Form/CheckReverse.tsx
new file mode 100644
index 0000000..7c3e541
--- /dev/null
+++ b/react-examples/Form/CheckReverse.tsx
@@ -0,0 +1,35 @@
+import Form from 'react-bootstrap/Form';
+
+function CheckReverseExample() {
+  return (
+    <Form>
+      {['checkbox', 'radio'].map((type) => (
+        <div key={`reverse-${type}`} className="mb-3">
+          <Form.Check
+            reverse
+            label="1"
+            name="group1"
+            type={type}
+            id={`reverse-${type}-1`}
+          />
+          <Form.Check
+            reverse
+            label="2"
+            name="group1"
+            type={type}
+            id={`reverse-${type}-2`}
+          />
+          <Form.Check
+            reverse
+            disabled
+            label="3 (disabled)"
+            type={type}
+            id={`reverse-${type}-3`}
+          />
+        </div>
+      ))}
+    </Form>
+  );
+}
+
+export default CheckReverseExample;
diff --git a/react-examples/Form/ColorPicker.tsx b/react-examples/Form/ColorPicker.tsx
new file mode 100644
index 0000000..7f7480c
--- /dev/null
+++ b/react-examples/Form/ColorPicker.tsx
@@ -0,0 +1,17 @@
+import Form from 'react-bootstrap/Form';
+
+function ColorPickerExample() {
+  return (
+    <>
+      <Form.Label htmlFor="exampleColorInput">Color picker</Form.Label>
+      <Form.Control
+        type="color"
+        id="exampleColorInput"
+        defaultValue="#563d7c"
+        title="Choose your color"
+      />
+    </>
+  );
+}
+
+export default ColorPickerExample;
diff --git a/react-examples/Form/FormControlDisabled.tsx b/react-examples/Form/FormControlDisabled.tsx
new file mode 100644
index 0000000..4a55358
--- /dev/null
+++ b/react-examples/Form/FormControlDisabled.tsx
@@ -0,0 +1,24 @@
+import Form from 'react-bootstrap/Form';
+
+function FormControlDisabledExample() {
+  return (
+    <>
+      <Form.Control
+        type="text"
+        placeholder="Disabled input"
+        aria-label="Disabled input example"
+        disabled
+        readOnly
+      />
+      <br />
+      <Form.Control
+        type="text"
+        placeholder="Disabled readonly input"
+        aria-label="Disabled input example"
+        readOnly
+      />
+    </>
+  );
+}
+
+export default FormControlDisabledExample;
diff --git a/react-examples/Form/FormDisabled.tsx b/react-examples/Form/FormDisabled.tsx
new file mode 100644
index 0000000..0eaf170
--- /dev/null
+++ b/react-examples/Form/FormDisabled.tsx
@@ -0,0 +1,31 @@
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+
+function FormDisabledExample() {
+  return (
+    <Form>
+      <fieldset disabled>
+        <Form.Group className="mb-3">
+          <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label>
+          <Form.Control id="disabledTextInput" placeholder="Disabled input" />
+        </Form.Group>
+        <Form.Group className="mb-3">
+          <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label>
+          <Form.Select id="disabledSelect">
+            <option>Disabled select</option>
+          </Form.Select>
+        </Form.Group>
+        <Form.Group className="mb-3">
+          <Form.Check
+            type="checkbox"
+            id="disabledFieldsetCheck"
+            label="Can't check this"
+          />
+        </Form.Group>
+        <Button type="submit">Submit</Button>
+      </fieldset>
+    </Form>
+  );
+}
+
+export default FormDisabledExample;
diff --git a/react-examples/Form/FormDisabledInputs.tsx b/react-examples/Form/FormDisabledInputs.tsx
new file mode 100644
index 0000000..d8ec2a5
--- /dev/null
+++ b/react-examples/Form/FormDisabledInputs.tsx
@@ -0,0 +1,23 @@
+import Form from 'react-bootstrap/Form';
+
+function FormDisabledInputExample() {
+  return (
+    <>
+      <Form.Group className="mb-3">
+        <Form.Label>Disabled input</Form.Label>
+        <Form.Control placeholder="Disabled input" disabled />
+      </Form.Group>
+      <Form.Group className="mb-3">
+        <Form.Label>Disabled select menu</Form.Label>
+        <Form.Select disabled>
+          <option>Disabled select</option>
+        </Form.Select>
+      </Form.Group>
+      <Form.Group className="mb-3">
+        <Form.Check type="checkbox" label="Can't check this" disabled />
+      </Form.Group>
+    </>
+  );
+}
+
+export default FormDisabledInputExample;
diff --git a/react-examples/Form/FormFile.tsx b/react-examples/Form/FormFile.tsx
new file mode 100644
index 0000000..c41cc3c
--- /dev/null
+++ b/react-examples/Form/FormFile.tsx
@@ -0,0 +1,30 @@
+import Form from 'react-bootstrap/Form';
+
+function FormFileExample() {
+  return (
+    <>
+      <Form.Group controlId="formFile" className="mb-3">
+        <Form.Label>Default file input example</Form.Label>
+        <Form.Control type="file" />
+      </Form.Group>
+      <Form.Group controlId="formFileMultiple" className="mb-3">
+        <Form.Label>Multiple files input example</Form.Label>
+        <Form.Control type="file" multiple />
+      </Form.Group>
+      <Form.Group controlId="formFileDisabled" className="mb-3">
+        <Form.Label>Disabled file input example</Form.Label>
+        <Form.Control type="file" disabled />
+      </Form.Group>
+      <Form.Group controlId="formFileSm" className="mb-3">
+        <Form.Label>Small file input example</Form.Label>
+        <Form.Control type="file" size="sm" />
+      </Form.Group>
+      <Form.Group controlId="formFileLg" className="mb-3">
+        <Form.Label>Large file input example</Form.Label>
+        <Form.Control type="file" size="lg" />
+      </Form.Group>
+    </>
+  );
+}
+
+export default FormFileExample;
diff --git a/react-examples/Form/FormFloatingBasic.tsx b/react-examples/Form/FormFloatingBasic.tsx
new file mode 100644
index 0000000..cc9637f
--- /dev/null
+++ b/react-examples/Form/FormFloatingBasic.tsx
@@ -0,0 +1,21 @@
+import FloatingLabel from 'react-bootstrap/FloatingLabel';
+import Form from 'react-bootstrap/Form';
+
+function FormFloatingBasicExample() {
+  return (
+    <>
+      <FloatingLabel
+        controlId="floatingInput"
+        label="Email address"
+        className="mb-3"
+      >
+        <Form.Control type="email" placeholder="name@example.com" />
+      </FloatingLabel>
+      <FloatingLabel controlId="floatingPassword" label="Password">
+        <Form.Control type="password" placeholder="Password" />
+      </FloatingLabel>
+    </>
+  );
+}
+
+export default FormFloatingBasicExample;
diff --git a/react-examples/Form/FormFloatingCustom.tsx b/react-examples/Form/FormFloatingCustom.tsx
new file mode 100644
index 0000000..4618b3a
--- /dev/null
+++ b/react-examples/Form/FormFloatingCustom.tsx
@@ -0,0 +1,26 @@
+import Form from 'react-bootstrap/Form';
+
+function FormFloatingCustom() {
+  return (
+    <>
+      <Form.Floating className="mb-3">
+        <Form.Control
+          id="floatingInputCustom"
+          type="email"
+          placeholder="name@example.com"
+        />
+        <label htmlFor="floatingInputCustom">Email address</label>
+      </Form.Floating>
+      <Form.Floating>
+        <Form.Control
+          id="floatingPasswordCustom"
+          type="password"
+          placeholder="Password"
+        />
+        <label htmlFor="floatingPasswordCustom">Password</label>
+      </Form.Floating>
+    </>
+  );
+}
+
+export default FormFloatingCustom;
diff --git a/react-examples/Form/FormFloatingLayout.tsx b/react-examples/Form/FormFloatingLayout.tsx
new file mode 100644
index 0000000..553dadf
--- /dev/null
+++ b/react-examples/Form/FormFloatingLayout.tsx
@@ -0,0 +1,31 @@
+import Col from 'react-bootstrap/Col';
+import FloatingLabel from 'react-bootstrap/FloatingLabel';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+
+function FormFloatingLayoutExample() {
+  return (
+    <Row className="g-2">
+      <Col md>
+        <FloatingLabel controlId="floatingInputGrid" label="Email address">
+          <Form.Control type="email" placeholder="name@example.com" />
+        </FloatingLabel>
+      </Col>
+      <Col md>
+        <FloatingLabel
+          controlId="floatingSelectGrid"
+          label="Works with selects"
+        >
+          <Form.Select aria-label="Floating label select example">
+            <option>Open this select menu</option>
+            <option value="1">One</option>
+            <option value="2">Two</option>
+            <option value="3">Three</option>
+          </Form.Select>
+        </FloatingLabel>
+      </Col>
+    </Row>
+  );
+}
+
+export default FormFloatingLayoutExample;
diff --git a/react-examples/Form/FormFloatingSelect.tsx b/react-examples/Form/FormFloatingSelect.tsx
new file mode 100644
index 0000000..8d62714
--- /dev/null
+++ b/react-examples/Form/FormFloatingSelect.tsx
@@ -0,0 +1,17 @@
+import FloatingLabel from 'react-bootstrap/FloatingLabel';
+import Form from 'react-bootstrap/Form';
+
+function FormFloatingSelectExample() {
+  return (
+    <FloatingLabel controlId="floatingSelect" label="Works with selects">
+      <Form.Select aria-label="Floating label select example">
+        <option>Open this select menu</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </Form.Select>
+    </FloatingLabel>
+  );
+}
+
+export default FormFloatingSelectExample;
diff --git a/react-examples/Form/FormFloatingTextarea.tsx b/react-examples/Form/FormFloatingTextarea.tsx
new file mode 100644
index 0000000..dfa548f
--- /dev/null
+++ b/react-examples/Form/FormFloatingTextarea.tsx
@@ -0,0 +1,25 @@
+import FloatingLabel from 'react-bootstrap/FloatingLabel';
+import Form from 'react-bootstrap/Form';
+
+function FormFloatingTextareaExample() {
+  return (
+    <>
+      <FloatingLabel
+        controlId="floatingTextarea"
+        label="Comments"
+        className="mb-3"
+      >
+        <Form.Control as="textarea" placeholder="Leave a comment here" />
+      </FloatingLabel>
+      <FloatingLabel controlId="floatingTextarea2" label="Comments">
+        <Form.Control
+          as="textarea"
+          placeholder="Leave a comment here"
+          style={{ height: '100px' }}
+        />
+      </FloatingLabel>
+    </>
+  );
+}
+
+export default FormFloatingTextareaExample;
diff --git a/react-examples/Form/FormGroup.tsx b/react-examples/Form/FormGroup.tsx
new file mode 100644
index 0000000..bc5ff70
--- /dev/null
+++ b/react-examples/Form/FormGroup.tsx
@@ -0,0 +1,18 @@
+import Form from 'react-bootstrap/Form';
+
+function FormGroupExample() {
+  return (
+    <Form>
+      <Form.Group className="mb-3" controlId="formGroupEmail">
+        <Form.Label>Email address</Form.Label>
+        <Form.Control type="email" placeholder="Enter email" />
+      </Form.Group>
+      <Form.Group className="mb-3" controlId="formGroupPassword">
+        <Form.Label>Password</Form.Label>
+        <Form.Control type="password" placeholder="Password" />
+      </Form.Group>
+    </Form>
+  );
+}
+
+export default FormGroupExample;
diff --git a/react-examples/Form/FormLabelSizing.tsx b/react-examples/Form/FormLabelSizing.tsx
new file mode 100644
index 0000000..ca5458b
--- /dev/null
+++ b/react-examples/Form/FormLabelSizing.tsx
@@ -0,0 +1,38 @@
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+
+function FormLabelSizingExample() {
+  return (
+    <>
+      <Row>
+        <Form.Label column="lg" lg={2}>
+          Large Text
+        </Form.Label>
+        <Col>
+          <Form.Control size="lg" type="text" placeholder="Large text" />
+        </Col>
+      </Row>
+      <br />
+      <Row>
+        <Form.Label column lg={2}>
+          Normal Text
+        </Form.Label>
+        <Col>
+          <Form.Control type="text" placeholder="Normal text" />
+        </Col>
+      </Row>
+      <br />
+      <Row>
+        <Form.Label column="sm" lg={2}>
+          Small Text
+        </Form.Label>
+        <Col>
+          <Form.Control size="sm" type="text" placeholder="Small text" />
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default FormLabelSizingExample;
diff --git a/react-examples/Form/FormText.tsx b/react-examples/Form/FormText.tsx
new file mode 100644
index 0000000..d7b921f
--- /dev/null
+++ b/react-examples/Form/FormText.tsx
@@ -0,0 +1,20 @@
+import Form from 'react-bootstrap/Form';
+
+function FormTextExample() {
+  return (
+    <>
+      <Form.Label htmlFor="inputPassword5">Password</Form.Label>
+      <Form.Control
+        type="password"
+        id="inputPassword5"
+        aria-describedby="passwordHelpBlock"
+      />
+      <Form.Text id="passwordHelpBlock" muted>
+        Your password must be 8-20 characters long, contain letters and numbers,
+        and must not contain spaces, special characters, or emoji.
+      </Form.Text>
+    </>
+  );
+}
+
+export default FormTextExample;
diff --git a/react-examples/Form/GridAutoSizing.tsx b/react-examples/Form/GridAutoSizing.tsx
new file mode 100644
index 0000000..9afa514
--- /dev/null
+++ b/react-examples/Form/GridAutoSizing.tsx
@@ -0,0 +1,48 @@
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+import Row from 'react-bootstrap/Row';
+
+function GridAutoSizingExample() {
+  return (
+    <Form>
+      <Row className="align-items-center">
+        <Col xs="auto">
+          <Form.Label htmlFor="inlineFormInput" visuallyHidden>
+            Name
+          </Form.Label>
+          <Form.Control
+            className="mb-2"
+            id="inlineFormInput"
+            placeholder="Jane Doe"
+          />
+        </Col>
+        <Col xs="auto">
+          <Form.Label htmlFor="inlineFormInputGroup" visuallyHidden>
+            Username
+          </Form.Label>
+          <InputGroup className="mb-2">
+            <InputGroup.Text>@</InputGroup.Text>
+            <Form.Control id="inlineFormInputGroup" placeholder="Username" />
+          </InputGroup>
+        </Col>
+        <Col xs="auto">
+          <Form.Check
+            type="checkbox"
+            id="autoSizingCheck"
+            className="mb-2"
+            label="Remember me"
+          />
+        </Col>
+        <Col xs="auto">
+          <Button type="submit" className="mb-2">
+            Submit
+          </Button>
+        </Col>
+      </Row>
+    </Form>
+  );
+}
+
+export default GridAutoSizingExample;
diff --git a/react-examples/Form/GridAutoSizingColMix.tsx b/react-examples/Form/GridAutoSizingColMix.tsx
new file mode 100644
index 0000000..fd967a8
--- /dev/null
+++ b/react-examples/Form/GridAutoSizingColMix.tsx
@@ -0,0 +1,44 @@
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+import Row from 'react-bootstrap/Row';
+
+function GridAutoSizingColMixExample() {
+  return (
+    <Form>
+      <Row className="align-items-center">
+        <Col sm={3} className="my-1">
+          <Form.Label htmlFor="inlineFormInputName" visuallyHidden>
+            Name
+          </Form.Label>
+          <Form.Control id="inlineFormInputName" placeholder="Jane Doe" />
+        </Col>
+        <Col sm={3} className="my-1">
+          <Form.Label htmlFor="inlineFormInputGroupUsername" visuallyHidden>
+            Username
+          </Form.Label>
+          <InputGroup>
+            <InputGroup.Text>@</InputGroup.Text>
+            <Form.Control
+              id="inlineFormInputGroupUsername"
+              placeholder="Username"
+            />
+          </InputGroup>
+        </Col>
+        <Col xs="auto" className="my-1">
+          <Form.Check
+            type="checkbox"
+            id="autoSizingCheck2"
+            label="Remember me"
+          />
+        </Col>
+        <Col xs="auto" className="my-1">
+          <Button type="submit">Submit</Button>
+        </Col>
+      </Row>
+    </Form>
+  );
+}
+
+export default GridAutoSizingColMixExample;
diff --git a/react-examples/Form/GridBasic.tsx b/react-examples/Form/GridBasic.tsx
new file mode 100644
index 0000000..4a2ec34
--- /dev/null
+++ b/react-examples/Form/GridBasic.tsx
@@ -0,0 +1,20 @@
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+
+function GridBasicExample() {
+  return (
+    <Form>
+      <Row>
+        <Col>
+          <Form.Control placeholder="First name" />
+        </Col>
+        <Col>
+          <Form.Control placeholder="Last name" />
+        </Col>
+      </Row>
+    </Form>
+  );
+}
+
+export default GridBasicExample;
diff --git a/react-examples/Form/GridColSizes.tsx b/react-examples/Form/GridColSizes.tsx
new file mode 100644
index 0000000..1eedbf6
--- /dev/null
+++ b/react-examples/Form/GridColSizes.tsx
@@ -0,0 +1,23 @@
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+
+function GridColSizesExample() {
+  return (
+    <Form>
+      <Row>
+        <Col xs={7}>
+          <Form.Control placeholder="City" />
+        </Col>
+        <Col>
+          <Form.Control placeholder="State" />
+        </Col>
+        <Col>
+          <Form.Control placeholder="Zip" />
+        </Col>
+      </Row>
+    </Form>
+  );
+}
+
+export default GridColSizesExample;
diff --git a/react-examples/Form/GridComplex.tsx b/react-examples/Form/GridComplex.tsx
new file mode 100644
index 0000000..a35edd5
--- /dev/null
+++ b/react-examples/Form/GridComplex.tsx
@@ -0,0 +1,62 @@
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+
+function GridComplexExample() {
+  return (
+    <Form>
+      <Row className="mb-3">
+        <Form.Group as={Col} controlId="formGridEmail">
+          <Form.Label>Email</Form.Label>
+          <Form.Control type="email" placeholder="Enter email" />
+        </Form.Group>
+
+        <Form.Group as={Col} controlId="formGridPassword">
+          <Form.Label>Password</Form.Label>
+          <Form.Control type="password" placeholder="Password" />
+        </Form.Group>
+      </Row>
+
+      <Form.Group className="mb-3" controlId="formGridAddress1">
+        <Form.Label>Address</Form.Label>
+        <Form.Control placeholder="1234 Main St" />
+      </Form.Group>
+
+      <Form.Group className="mb-3" controlId="formGridAddress2">
+        <Form.Label>Address 2</Form.Label>
+        <Form.Control placeholder="Apartment, studio, or floor" />
+      </Form.Group>
+
+      <Row className="mb-3">
+        <Form.Group as={Col} controlId="formGridCity">
+          <Form.Label>City</Form.Label>
+          <Form.Control />
+        </Form.Group>
+
+        <Form.Group as={Col} controlId="formGridState">
+          <Form.Label>State</Form.Label>
+          <Form.Select defaultValue="Choose...">
+            <option>Choose...</option>
+            <option>...</option>
+          </Form.Select>
+        </Form.Group>
+
+        <Form.Group as={Col} controlId="formGridZip">
+          <Form.Label>Zip</Form.Label>
+          <Form.Control />
+        </Form.Group>
+      </Row>
+
+      <Form.Group className="mb-3" id="formGridCheckbox">
+        <Form.Check type="checkbox" label="Check me out" />
+      </Form.Group>
+
+      <Button variant="primary" type="submit">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+
+export default GridComplexExample;
diff --git a/react-examples/Form/Horizontal.tsx b/react-examples/Form/Horizontal.tsx
new file mode 100644
index 0000000..8800f87
--- /dev/null
+++ b/react-examples/Form/Horizontal.tsx
@@ -0,0 +1,68 @@
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+
+function HorizontalExample() {
+  return (
+    <Form>
+      <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
+        <Form.Label column sm={2}>
+          Email
+        </Form.Label>
+        <Col sm={10}>
+          <Form.Control type="email" placeholder="Email" />
+        </Col>
+      </Form.Group>
+
+      <Form.Group as={Row} className="mb-3" controlId="formHorizontalPassword">
+        <Form.Label column sm={2}>
+          Password
+        </Form.Label>
+        <Col sm={10}>
+          <Form.Control type="password" placeholder="Password" />
+        </Col>
+      </Form.Group>
+      <fieldset>
+        <Form.Group as={Row} className="mb-3">
+          <Form.Label as="legend" column sm={2}>
+            Radios
+          </Form.Label>
+          <Col sm={10}>
+            <Form.Check
+              type="radio"
+              label="first radio"
+              name="formHorizontalRadios"
+              id="formHorizontalRadios1"
+            />
+            <Form.Check
+              type="radio"
+              label="second radio"
+              name="formHorizontalRadios"
+              id="formHorizontalRadios2"
+            />
+            <Form.Check
+              type="radio"
+              label="third radio"
+              name="formHorizontalRadios"
+              id="formHorizontalRadios3"
+            />
+          </Col>
+        </Form.Group>
+      </fieldset>
+      <Form.Group as={Row} className="mb-3" controlId="formHorizontalCheck">
+        <Col sm={{ span: 10, offset: 2 }}>
+          <Form.Check label="Remember me" />
+        </Col>
+      </Form.Group>
+
+      <Form.Group as={Row} className="mb-3">
+        <Col sm={{ span: 10, offset: 2 }}>
+          <Button type="submit">Sign in</Button>
+        </Col>
+      </Form.Group>
+    </Form>
+  );
+}
+
+export default HorizontalExample;
diff --git a/react-examples/Form/InputReadOnly.tsx b/react-examples/Form/InputReadOnly.tsx
new file mode 100644
index 0000000..b3f7194
--- /dev/null
+++ b/react-examples/Form/InputReadOnly.tsx
@@ -0,0 +1,9 @@
+import Form from 'react-bootstrap/Form';
+
+function InputReadOnlyExample() {
+  return (
+    <Form.Control type="text" placeholder="Readonly input here..." readOnly />
+  );
+}
+
+export default InputReadOnlyExample;
diff --git a/react-examples/Form/InputSizes.tsx b/react-examples/Form/InputSizes.tsx
new file mode 100644
index 0000000..dee95a2
--- /dev/null
+++ b/react-examples/Form/InputSizes.tsx
@@ -0,0 +1,15 @@
+import Form from 'react-bootstrap/Form';
+
+function InputSizesExample() {
+  return (
+    <>
+      <Form.Control size="lg" type="text" placeholder="Large text" />
+      <br />
+      <Form.Control type="text" placeholder="Normal text" />
+      <br />
+      <Form.Control size="sm" type="text" placeholder="Small text" />
+    </>
+  );
+}
+
+export default InputSizesExample;
diff --git a/react-examples/Form/NoLabels.tsx b/react-examples/Form/NoLabels.tsx
new file mode 100644
index 0000000..7e3857d
--- /dev/null
+++ b/react-examples/Form/NoLabels.tsx
@@ -0,0 +1,12 @@
+import Form from 'react-bootstrap/Form';
+
+function NoLabelExample() {
+  return (
+    <>
+      <Form.Check aria-label="option 1" />
+      <Form.Check type="radio" aria-label="radio 1" />
+    </>
+  );
+}
+
+export default NoLabelExample;
diff --git a/react-examples/Form/Plaintext.tsx b/react-examples/Form/Plaintext.tsx
new file mode 100644
index 0000000..053b35f
--- /dev/null
+++ b/react-examples/Form/Plaintext.tsx
@@ -0,0 +1,29 @@
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+
+function PlaintextExample() {
+  return (
+    <Form>
+      <Form.Group as={Row} className="mb-3" controlId="formPlaintextEmail">
+        <Form.Label column sm="2">
+          Email
+        </Form.Label>
+        <Col sm="10">
+          <Form.Control plaintext readOnly defaultValue="email@example.com" />
+        </Col>
+      </Form.Group>
+
+      <Form.Group as={Row} className="mb-3" controlId="formPlaintextPassword">
+        <Form.Label column sm="2">
+          Password
+        </Form.Label>
+        <Col sm="10">
+          <Form.Control type="password" placeholder="Password" />
+        </Col>
+      </Form.Group>
+    </Form>
+  );
+}
+
+export default PlaintextExample;
diff --git a/react-examples/Form/Range.tsx b/react-examples/Form/Range.tsx
new file mode 100644
index 0000000..5fae09d
--- /dev/null
+++ b/react-examples/Form/Range.tsx
@@ -0,0 +1,12 @@
+import Form from 'react-bootstrap/Form';
+
+function RangeExample() {
+  return (
+    <>
+      <Form.Label>Range</Form.Label>
+      <Form.Range />
+    </>
+  );
+}
+
+export default RangeExample;
diff --git a/react-examples/Form/SelectBasic.tsx b/react-examples/Form/SelectBasic.tsx
new file mode 100644
index 0000000..528a0f8
--- /dev/null
+++ b/react-examples/Form/SelectBasic.tsx
@@ -0,0 +1,14 @@
+import Form from 'react-bootstrap/Form';
+
+function SelectBasicExample() {
+  return (
+    <Form.Select aria-label="Default select example">
+      <option>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </Form.Select>
+  );
+}
+
+export default SelectBasicExample;
diff --git a/react-examples/Form/SelectSizes.tsx b/react-examples/Form/SelectSizes.tsx
new file mode 100644
index 0000000..aed8ccc
--- /dev/null
+++ b/react-examples/Form/SelectSizes.tsx
@@ -0,0 +1,21 @@
+import Form from 'react-bootstrap/Form';
+
+function SelectSizesExample() {
+  return (
+    <>
+      <Form.Select size="lg">
+        <option>Large select</option>
+      </Form.Select>
+      <br />
+      <Form.Select>
+        <option>Default select</option>
+      </Form.Select>
+      <br />
+      <Form.Select size="sm">
+        <option>Small select</option>
+      </Form.Select>
+    </>
+  );
+}
+
+export default SelectSizesExample;
diff --git a/react-examples/Form/Switch.tsx b/react-examples/Form/Switch.tsx
new file mode 100644
index 0000000..44eee8a
--- /dev/null
+++ b/react-examples/Form/Switch.tsx
@@ -0,0 +1,21 @@
+import Form from 'react-bootstrap/Form';
+
+function SwitchExample() {
+  return (
+    <Form>
+      <Form.Check // prettier-ignore
+        type="switch"
+        id="custom-switch"
+        label="Check this switch"
+      />
+      <Form.Check // prettier-ignore
+        disabled
+        type="switch"
+        label="disabled switch"
+        id="disabled-custom-switch"
+      />
+    </Form>
+  );
+}
+
+export default SwitchExample;
diff --git a/react-examples/Form/TextControls.tsx b/react-examples/Form/TextControls.tsx
new file mode 100644
index 0000000..6dfc81c
--- /dev/null
+++ b/react-examples/Form/TextControls.tsx
@@ -0,0 +1,18 @@
+import Form from 'react-bootstrap/Form';
+
+function TextControlsExample() {
+  return (
+    <Form>
+      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+        <Form.Label>Email address</Form.Label>
+        <Form.Control type="email" placeholder="name@example.com" />
+      </Form.Group>
+      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
+        <Form.Label>Example textarea</Form.Label>
+        <Form.Control as="textarea" rows={3} />
+      </Form.Group>
+    </Form>
+  );
+}
+
+export default TextControlsExample;
diff --git a/react-examples/Form/ValidationFormik.tsx b/react-examples/Form/ValidationFormik.tsx
new file mode 100644
index 0000000..3756d75
--- /dev/null
+++ b/react-examples/Form/ValidationFormik.tsx
@@ -0,0 +1,146 @@
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+import Row from 'react-bootstrap/Row';
+import * as formik from 'formik';
+import * as yup from 'yup';
+
+function FormExample() {
+  const { Formik } = formik;
+
+  const schema = yup.object().shape({
+    firstName: yup.string().required(),
+    lastName: yup.string().required(),
+    username: yup.string().required(),
+    city: yup.string().required(),
+    state: yup.string().required(),
+    zip: yup.string().required(),
+    terms: yup.bool().required().oneOf([true], 'Terms must be accepted'),
+  });
+
+  return (
+    <Formik
+      validationSchema={schema}
+      onSubmit={console.log}
+      initialValues={{
+        firstName: 'Mark',
+        lastName: 'Otto',
+        username: '',
+        city: '',
+        state: '',
+        zip: '',
+        terms: false,
+      }}
+    >
+      {({ handleSubmit, handleChange, values, touched, errors }) => (
+        <Form noValidate onSubmit={handleSubmit}>
+          <Row className="mb-3">
+            <Form.Group as={Col} md="4" controlId="validationFormik01">
+              <Form.Label>First name</Form.Label>
+              <Form.Control
+                type="text"
+                name="firstName"
+                value={values.firstName}
+                onChange={handleChange}
+                isValid={touched.firstName && !errors.firstName}
+              />
+              <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group as={Col} md="4" controlId="validationFormik02">
+              <Form.Label>Last name</Form.Label>
+              <Form.Control
+                type="text"
+                name="lastName"
+                value={values.lastName}
+                onChange={handleChange}
+                isValid={touched.lastName && !errors.lastName}
+              />
+
+              <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group as={Col} md="4" controlId="validationFormikUsername">
+              <Form.Label>Username</Form.Label>
+              <InputGroup hasValidation>
+                <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
+                <Form.Control
+                  type="text"
+                  placeholder="Username"
+                  aria-describedby="inputGroupPrepend"
+                  name="username"
+                  value={values.username}
+                  onChange={handleChange}
+                  isInvalid={!!errors.username}
+                />
+                <Form.Control.Feedback type="invalid">
+                  {errors.username}
+                </Form.Control.Feedback>
+              </InputGroup>
+            </Form.Group>
+          </Row>
+          <Row className="mb-3">
+            <Form.Group as={Col} md="6" controlId="validationFormik03">
+              <Form.Label>City</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="City"
+                name="city"
+                value={values.city}
+                onChange={handleChange}
+                isInvalid={!!errors.city}
+              />
+
+              <Form.Control.Feedback type="invalid">
+                {errors.city}
+              </Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group as={Col} md="3" controlId="validationFormik04">
+              <Form.Label>State</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="State"
+                name="state"
+                value={values.state}
+                onChange={handleChange}
+                isInvalid={!!errors.state}
+              />
+              <Form.Control.Feedback type="invalid">
+                {errors.state}
+              </Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group as={Col} md="3" controlId="validationFormik05">
+              <Form.Label>Zip</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="Zip"
+                name="zip"
+                value={values.zip}
+                onChange={handleChange}
+                isInvalid={!!errors.zip}
+              />
+
+              <Form.Control.Feedback type="invalid">
+                {errors.zip}
+              </Form.Control.Feedback>
+            </Form.Group>
+          </Row>
+          <Form.Group className="mb-3">
+            <Form.Check
+              required
+              name="terms"
+              label="Agree to terms and conditions"
+              onChange={handleChange}
+              isInvalid={!!errors.terms}
+              feedback={errors.terms}
+              feedbackType="invalid"
+              id="validationFormik0"
+            />
+          </Form.Group>
+          <Button type="submit">Submit form</Button>
+        </Form>
+      )}
+    </Formik>
+  );
+}
+
+export default FormExample;
diff --git a/react-examples/Form/ValidationInputGroup.tsx b/react-examples/Form/ValidationInputGroup.tsx
new file mode 100644
index 0000000..022191a
--- /dev/null
+++ b/react-examples/Form/ValidationInputGroup.tsx
@@ -0,0 +1,16 @@
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function ValidationInputGroupExample() {
+  return (
+    <InputGroup hasValidation>
+      <InputGroup.Text>@</InputGroup.Text>
+      <Form.Control type="text" required isInvalid />
+      <Form.Control.Feedback type="invalid">
+        Please choose a username.
+      </Form.Control.Feedback>
+    </InputGroup>
+  );
+}
+
+export default ValidationInputGroupExample;
diff --git a/react-examples/Form/ValidationNative.tsx b/react-examples/Form/ValidationNative.tsx
new file mode 100644
index 0000000..c33d307
--- /dev/null
+++ b/react-examples/Form/ValidationNative.tsx
@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+import Row from 'react-bootstrap/Row';
+
+function FormExample() {
+  const [validated, setValidated] = useState(false);
+
+  const handleSubmit = (event) => {
+    const form = event.currentTarget;
+    if (form.checkValidity() === false) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    setValidated(true);
+  };
+
+  return (
+    <Form noValidate validated={validated} onSubmit={handleSubmit}>
+      <Row className="mb-3">
+        <Form.Group as={Col} md="4" controlId="validationCustom01">
+          <Form.Label>First name</Form.Label>
+          <Form.Control
+            required
+            type="text"
+            placeholder="First name"
+            defaultValue="Mark"
+          />
+          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group as={Col} md="4" controlId="validationCustom02">
+          <Form.Label>Last name</Form.Label>
+          <Form.Control
+            required
+            type="text"
+            placeholder="Last name"
+            defaultValue="Otto"
+          />
+          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group as={Col} md="4" controlId="validationCustomUsername">
+          <Form.Label>Username</Form.Label>
+          <InputGroup hasValidation>
+            <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
+            <Form.Control
+              type="text"
+              placeholder="Username"
+              aria-describedby="inputGroupPrepend"
+              required
+            />
+            <Form.Control.Feedback type="invalid">
+              Please choose a username.
+            </Form.Control.Feedback>
+          </InputGroup>
+        </Form.Group>
+      </Row>
+      <Row className="mb-3">
+        <Form.Group as={Col} md="6" controlId="validationCustom03">
+          <Form.Label>City</Form.Label>
+          <Form.Control type="text" placeholder="City" required />
+          <Form.Control.Feedback type="invalid">
+            Please provide a valid city.
+          </Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group as={Col} md="3" controlId="validationCustom04">
+          <Form.Label>State</Form.Label>
+          <Form.Control type="text" placeholder="State" required />
+          <Form.Control.Feedback type="invalid">
+            Please provide a valid state.
+          </Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group as={Col} md="3" controlId="validationCustom05">
+          <Form.Label>Zip</Form.Label>
+          <Form.Control type="text" placeholder="Zip" required />
+          <Form.Control.Feedback type="invalid">
+            Please provide a valid zip.
+          </Form.Control.Feedback>
+        </Form.Group>
+      </Row>
+      <Form.Group className="mb-3">
+        <Form.Check
+          required
+          label="Agree to terms and conditions"
+          feedback="You must agree before submitting."
+          feedbackType="invalid"
+        />
+      </Form.Group>
+      <Button type="submit">Submit form</Button>
+    </Form>
+  );
+}
+
+export default FormExample;
diff --git a/react-examples/Form/ValidationTooltips.tsx b/react-examples/Form/ValidationTooltips.tsx
new file mode 100644
index 0000000..954dd51
--- /dev/null
+++ b/react-examples/Form/ValidationTooltips.tsx
@@ -0,0 +1,187 @@
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+import Row from 'react-bootstrap/Row';
+import * as formik from 'formik';
+import * as yup from 'yup';
+
+function FormExample() {
+  const { Formik } = formik;
+
+  const schema = yup.object().shape({
+    firstName: yup.string().required(),
+    lastName: yup.string().required(),
+    username: yup.string().required(),
+    city: yup.string().required(),
+    state: yup.string().required(),
+    zip: yup.string().required(),
+    file: yup.mixed().required(),
+    terms: yup.bool().required().oneOf([true], 'terms must be accepted'),
+  });
+
+  return (
+    <Formik
+      validationSchema={schema}
+      onSubmit={console.log}
+      initialValues={{
+        firstName: 'Mark',
+        lastName: 'Otto',
+        username: '',
+        city: '',
+        state: '',
+        zip: '',
+        file: null,
+        terms: false,
+      }}
+    >
+      {({ handleSubmit, handleChange, values, touched, errors }) => (
+        <Form noValidate onSubmit={handleSubmit}>
+          <Row className="mb-3">
+            <Form.Group
+              as={Col}
+              md="4"
+              controlId="validationFormik101"
+              className="position-relative"
+            >
+              <Form.Label>First name</Form.Label>
+              <Form.Control
+                type="text"
+                name="firstName"
+                value={values.firstName}
+                onChange={handleChange}
+                isValid={touched.firstName && !errors.firstName}
+              />
+              <Form.Control.Feedback tooltip>Looks good!</Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group
+              as={Col}
+              md="4"
+              controlId="validationFormik102"
+              className="position-relative"
+            >
+              <Form.Label>Last name</Form.Label>
+              <Form.Control
+                type="text"
+                name="lastName"
+                value={values.lastName}
+                onChange={handleChange}
+                isValid={touched.lastName && !errors.lastName}
+              />
+
+              <Form.Control.Feedback tooltip>Looks good!</Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group as={Col} md="4" controlId="validationFormikUsername2">
+              <Form.Label>Username</Form.Label>
+              <InputGroup hasValidation>
+                <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
+                <Form.Control
+                  type="text"
+                  placeholder="Username"
+                  aria-describedby="inputGroupPrepend"
+                  name="username"
+                  value={values.username}
+                  onChange={handleChange}
+                  isInvalid={!!errors.username}
+                />
+                <Form.Control.Feedback type="invalid" tooltip>
+                  {errors.username}
+                </Form.Control.Feedback>
+              </InputGroup>
+            </Form.Group>
+          </Row>
+          <Row className="mb-3">
+            <Form.Group
+              as={Col}
+              md="6"
+              controlId="validationFormik103"
+              className="position-relative"
+            >
+              <Form.Label>City</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="City"
+                name="city"
+                value={values.city}
+                onChange={handleChange}
+                isInvalid={!!errors.city}
+              />
+
+              <Form.Control.Feedback type="invalid" tooltip>
+                {errors.city}
+              </Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group
+              as={Col}
+              md="3"
+              controlId="validationFormik104"
+              className="position-relative"
+            >
+              <Form.Label>State</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="State"
+                name="state"
+                value={values.state}
+                onChange={handleChange}
+                isInvalid={!!errors.state}
+              />
+              <Form.Control.Feedback type="invalid" tooltip>
+                {errors.state}
+              </Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group
+              as={Col}
+              md="3"
+              controlId="validationFormik105"
+              className="position-relative"
+            >
+              <Form.Label>Zip</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="Zip"
+                name="zip"
+                value={values.zip}
+                onChange={handleChange}
+                isInvalid={!!errors.zip}
+              />
+
+              <Form.Control.Feedback type="invalid" tooltip>
+                {errors.zip}
+              </Form.Control.Feedback>
+            </Form.Group>
+          </Row>
+          <Form.Group className="position-relative mb-3">
+            <Form.Label>File</Form.Label>
+            <Form.Control
+              type="file"
+              required
+              name="file"
+              onChange={handleChange}
+              isInvalid={!!errors.file}
+            />
+            <Form.Control.Feedback type="invalid" tooltip>
+              {errors.file}
+            </Form.Control.Feedback>
+          </Form.Group>
+          <Form.Group className="position-relative mb-3">
+            <Form.Check
+              required
+              name="terms"
+              label="Agree to terms and conditions"
+              onChange={handleChange}
+              isInvalid={!!errors.terms}
+              feedback={errors.terms}
+              feedbackType="invalid"
+              id="validationFormik106"
+              feedbackTooltip
+            />
+          </Form.Group>
+          <Button type="submit">Submit form</Button>
+        </Form>
+      )}
+    </Formik>
+  );
+}
+
+export default FormExample;
diff --git a/react-examples/Grid/AutoLayout.tsx b/react-examples/Grid/AutoLayout.tsx
new file mode 100644
index 0000000..363fb96
--- /dev/null
+++ b/react-examples/Grid/AutoLayout.tsx
@@ -0,0 +1,21 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function AutoLayoutExample() {
+  return (
+    <Container>
+      <Row>
+        <Col>1 of 2</Col>
+        <Col>2 of 2</Col>
+      </Row>
+      <Row>
+        <Col>1 of 3</Col>
+        <Col>2 of 3</Col>
+        <Col>3 of 3</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default AutoLayoutExample;
diff --git a/react-examples/Grid/AutoLayoutSizing.tsx b/react-examples/Grid/AutoLayoutSizing.tsx
new file mode 100644
index 0000000..174a610
--- /dev/null
+++ b/react-examples/Grid/AutoLayoutSizing.tsx
@@ -0,0 +1,22 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function AutoLayoutSizingExample() {
+  return (
+    <Container>
+      <Row>
+        <Col>1 of 3</Col>
+        <Col xs={6}>2 of 3 (wider)</Col>
+        <Col>3 of 3</Col>
+      </Row>
+      <Row>
+        <Col>1 of 3</Col>
+        <Col xs={5}>2 of 3 (wider)</Col>
+        <Col>3 of 3</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default AutoLayoutSizingExample;
diff --git a/react-examples/Grid/AutoLayoutVariable.tsx b/react-examples/Grid/AutoLayoutVariable.tsx
new file mode 100644
index 0000000..efa3aa1
--- /dev/null
+++ b/react-examples/Grid/AutoLayoutVariable.tsx
@@ -0,0 +1,28 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function AutoLayoutVariableExample() {
+  return (
+    <Container>
+      <Row className="justify-content-md-center">
+        <Col xs lg="2">
+          1 of 3
+        </Col>
+        <Col md="auto">Variable width content</Col>
+        <Col xs lg="2">
+          3 of 3
+        </Col>
+      </Row>
+      <Row>
+        <Col>1 of 3</Col>
+        <Col md="auto">Variable width content</Col>
+        <Col xs lg="2">
+          3 of 3
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default AutoLayoutVariableExample;
diff --git a/react-examples/Grid/Container.tsx b/react-examples/Grid/Container.tsx
new file mode 100644
index 0000000..982875a
--- /dev/null
+++ b/react-examples/Grid/Container.tsx
@@ -0,0 +1,15 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function ContainerExample() {
+  return (
+    <Container>
+      <Row>
+        <Col>1 of 1</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default ContainerExample;
diff --git a/react-examples/Grid/ContainerFluid.tsx b/react-examples/Grid/ContainerFluid.tsx
new file mode 100644
index 0000000..4f26e1a
--- /dev/null
+++ b/react-examples/Grid/ContainerFluid.tsx
@@ -0,0 +1,15 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function ContainerFluidExample() {
+  return (
+    <Container fluid>
+      <Row>
+        <Col>1 of 1</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default ContainerFluidExample;
diff --git a/react-examples/Grid/ContainerFluidBreakpoint.tsx b/react-examples/Grid/ContainerFluidBreakpoint.tsx
new file mode 100644
index 0000000..2c79de6
--- /dev/null
+++ b/react-examples/Grid/ContainerFluidBreakpoint.tsx
@@ -0,0 +1,15 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function ContainerFluidBreakpointExample() {
+  return (
+    <Container fluid="md">
+      <Row>
+        <Col>1 of 1</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default ContainerFluidBreakpointExample;
diff --git a/react-examples/Grid/Offsetting.tsx b/react-examples/Grid/Offsetting.tsx
new file mode 100644
index 0000000..66ead71
--- /dev/null
+++ b/react-examples/Grid/Offsetting.tsx
@@ -0,0 +1,23 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function OffsettingExample() {
+  return (
+    <Container>
+      <Row>
+        <Col md={4}>md=4</Col>
+        <Col md={{ span: 4, offset: 4 }}>{`md={{ span: 4, offset: 4 }}`}</Col>
+      </Row>
+      <Row>
+        <Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
+        <Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
+      </Row>
+      <Row>
+        <Col md={{ span: 6, offset: 3 }}>{`md={{ span: 6, offset: 3 }}`}</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default OffsettingExample;
diff --git a/react-examples/Grid/Ordering.tsx b/react-examples/Grid/Ordering.tsx
new file mode 100644
index 0000000..33b8aa7
--- /dev/null
+++ b/react-examples/Grid/Ordering.tsx
@@ -0,0 +1,17 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function OrderingExample() {
+  return (
+    <Container>
+      <Row>
+        <Col xs>First, but unordered</Col>
+        <Col xs={{ order: 5 }}>Second, but last</Col>
+        <Col xs={{ order: 0 }}>Third, but second</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default OrderingExample;
diff --git a/react-examples/Grid/OrderingFirstLast.tsx b/react-examples/Grid/OrderingFirstLast.tsx
new file mode 100644
index 0000000..a3f5238
--- /dev/null
+++ b/react-examples/Grid/OrderingFirstLast.tsx
@@ -0,0 +1,17 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function OrderingFirstLastExample() {
+  return (
+    <Container>
+      <Row>
+        <Col xs={{ order: 'last' }}>First, but last</Col>
+        <Col xs>Second, but unordered</Col>
+        <Col xs={{ order: 'first' }}>Third, but first</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default OrderingFirstLastExample;
diff --git a/react-examples/Grid/Responsive.tsx b/react-examples/Grid/Responsive.tsx
new file mode 100644
index 0000000..f0ff38e
--- /dev/null
+++ b/react-examples/Grid/Responsive.tsx
@@ -0,0 +1,40 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function ResponsiveExample() {
+  return (
+    <Container>
+      {/* Stack the columns on mobile by making one full-width and the other half-width */}
+      <Row>
+        <Col xs={12} md={8}>
+          xs=12 md=8
+        </Col>
+        <Col xs={6} md={4}>
+          xs=6 md=4
+        </Col>
+      </Row>
+
+      {/* Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop */}
+      <Row>
+        <Col xs={6} md={4}>
+          xs=6 md=4
+        </Col>
+        <Col xs={6} md={4}>
+          xs=6 md=4
+        </Col>
+        <Col xs={6} md={4}>
+          xs=6 md=4
+        </Col>
+      </Row>
+
+      {/* Columns are always 50% wide, on mobile and desktop */}
+      <Row>
+        <Col xs={6}>xs=6</Col>
+        <Col xs={6}>xs=6</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default ResponsiveExample;
diff --git a/react-examples/Grid/ResponsiveAuto.tsx b/react-examples/Grid/ResponsiveAuto.tsx
new file mode 100644
index 0000000..e13cf4b
--- /dev/null
+++ b/react-examples/Grid/ResponsiveAuto.tsx
@@ -0,0 +1,21 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function ResponsiveAutoExample() {
+  return (
+    <Container>
+      <Row>
+        <Col sm={8}>sm=8</Col>
+        <Col sm={4}>sm=4</Col>
+      </Row>
+      <Row>
+        <Col sm>sm=true</Col>
+        <Col sm>sm=true</Col>
+        <Col sm>sm=true</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default ResponsiveAutoExample;
diff --git a/react-examples/Grid/RowColLayout.tsx b/react-examples/Grid/RowColLayout.tsx
new file mode 100644
index 0000000..a5c6b98
--- /dev/null
+++ b/react-examples/Grid/RowColLayout.tsx
@@ -0,0 +1,26 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function RowColLayoutExample() {
+  return (
+    <Container>
+      <Row xs={2} md={4} lg={6}>
+        <Col>1 of 2</Col>
+        <Col>2 of 2</Col>
+      </Row>
+      <Row xs={1} md={2}>
+        <Col>1 of 3</Col>
+        <Col>2 of 3</Col>
+        <Col>3 of 3</Col>
+      </Row>
+      <Row xs="auto">
+        <Col>1 of 3</Col>
+        <Col>2 of 3</Col>
+        <Col>3 of 3</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default RowColLayoutExample;
diff --git a/react-examples/Grid/RowColLayoutColWidthBreakpoint.tsx b/react-examples/Grid/RowColLayoutColWidthBreakpoint.tsx
new file mode 100644
index 0000000..ecdd074
--- /dev/null
+++ b/react-examples/Grid/RowColLayoutColWidthBreakpoint.tsx
@@ -0,0 +1,17 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function RowColLayoutColWidthBreakpointExample() {
+  return (
+    <Container>
+      <Row md={4}>
+        <Col>1 of 3</Col>
+        <Col xs={6}>2 of 3</Col>
+        <Col>3 of 3</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default RowColLayoutColWidthBreakpointExample;
diff --git a/react-examples/Image/Fluid.tsx b/react-examples/Image/Fluid.tsx
new file mode 100644
index 0000000..13cd4a2
--- /dev/null
+++ b/react-examples/Image/Fluid.tsx
@@ -0,0 +1,7 @@
+import Image from 'react-bootstrap/Image';
+
+function FluidExample() {
+  return <Image src="holder.js/100px250" fluid />;
+}
+
+export default FluidExample;
diff --git a/react-examples/Image/Shape.tsx b/react-examples/Image/Shape.tsx
new file mode 100644
index 0000000..7a4c5f1
--- /dev/null
+++ b/react-examples/Image/Shape.tsx
@@ -0,0 +1,24 @@
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
+import Image from 'react-bootstrap/Image';
+import Row from 'react-bootstrap/Row';
+
+function ShapeExample() {
+  return (
+    <Container>
+      <Row>
+        <Col xs={6} md={4}>
+          <Image src="holder.js/171x180" rounded />
+        </Col>
+        <Col xs={6} md={4}>
+          <Image src="holder.js/171x180" roundedCircle />
+        </Col>
+        <Col xs={6} md={4}>
+          <Image src="holder.js/171x180" thumbnail />
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default ShapeExample;
diff --git a/react-examples/InputGroup/Basic.tsx b/react-examples/InputGroup/Basic.tsx
new file mode 100644
index 0000000..0dbd24f
--- /dev/null
+++ b/react-examples/InputGroup/Basic.tsx
@@ -0,0 +1,47 @@
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function BasicExample() {
+  return (
+    <>
+      <InputGroup className="mb-3">
+        <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
+        <Form.Control
+          placeholder="Username"
+          aria-label="Username"
+          aria-describedby="basic-addon1"
+        />
+      </InputGroup>
+
+      <InputGroup className="mb-3">
+        <Form.Control
+          placeholder="Recipient's username"
+          aria-label="Recipient's username"
+          aria-describedby="basic-addon2"
+        />
+        <InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
+      </InputGroup>
+
+      <Form.Label htmlFor="basic-url">Your vanity URL</Form.Label>
+      <InputGroup className="mb-3">
+        <InputGroup.Text id="basic-addon3">
+          https://example.com/users/
+        </InputGroup.Text>
+        <Form.Control id="basic-url" aria-describedby="basic-addon3" />
+      </InputGroup>
+
+      <InputGroup className="mb-3">
+        <InputGroup.Text>$</InputGroup.Text>
+        <Form.Control aria-label="Amount (to the nearest dollar)" />
+        <InputGroup.Text>.00</InputGroup.Text>
+      </InputGroup>
+
+      <InputGroup>
+        <InputGroup.Text>With textarea</InputGroup.Text>
+        <Form.Control as="textarea" aria-label="With textarea" />
+      </InputGroup>
+    </>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/InputGroup/ButtonDropdowns.tsx b/react-examples/InputGroup/ButtonDropdowns.tsx
new file mode 100644
index 0000000..c8c0676
--- /dev/null
+++ b/react-examples/InputGroup/ButtonDropdowns.tsx
@@ -0,0 +1,71 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function ButtonDropdownsExample() {
+  return (
+    <>
+      <InputGroup className="mb-3">
+        <DropdownButton
+          variant="outline-secondary"
+          title="Dropdown"
+          id="input-group-dropdown-1"
+        >
+          <Dropdown.Item href="#">Action</Dropdown.Item>
+          <Dropdown.Item href="#">Another action</Dropdown.Item>
+          <Dropdown.Item href="#">Something else here</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item href="#">Separated link</Dropdown.Item>
+        </DropdownButton>
+        <Form.Control aria-label="Text input with dropdown button" />
+      </InputGroup>
+
+      <InputGroup className="mb-3">
+        <Form.Control aria-label="Text input with dropdown button" />
+
+        <DropdownButton
+          variant="outline-secondary"
+          title="Dropdown"
+          id="input-group-dropdown-2"
+          align="end"
+        >
+          <Dropdown.Item href="#">Action</Dropdown.Item>
+          <Dropdown.Item href="#">Another action</Dropdown.Item>
+          <Dropdown.Item href="#">Something else here</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item href="#">Separated link</Dropdown.Item>
+        </DropdownButton>
+      </InputGroup>
+
+      <InputGroup>
+        <DropdownButton
+          variant="outline-secondary"
+          title="Dropdown"
+          id="input-group-dropdown-3"
+        >
+          <Dropdown.Item href="#">Action</Dropdown.Item>
+          <Dropdown.Item href="#">Another action</Dropdown.Item>
+          <Dropdown.Item href="#">Something else here</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item href="#">Separated link</Dropdown.Item>
+        </DropdownButton>
+        <Form.Control aria-label="Text input with 2 dropdown buttons" />
+        <DropdownButton
+          variant="outline-secondary"
+          title="Dropdown"
+          id="input-group-dropdown-4"
+          align="end"
+        >
+          <Dropdown.Item href="#">Action</Dropdown.Item>
+          <Dropdown.Item href="#">Another action</Dropdown.Item>
+          <Dropdown.Item href="#">Something else here</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item href="#">Separated link</Dropdown.Item>
+        </DropdownButton>
+      </InputGroup>
+    </>
+  );
+}
+
+export default ButtonDropdownsExample;
diff --git a/react-examples/InputGroup/Buttons.tsx b/react-examples/InputGroup/Buttons.tsx
new file mode 100644
index 0000000..b319974
--- /dev/null
+++ b/react-examples/InputGroup/Buttons.tsx
@@ -0,0 +1,47 @@
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function ButtonsExample() {
+  return (
+    <>
+      <InputGroup className="mb-3">
+        <Button variant="outline-secondary" id="button-addon1">
+          Button
+        </Button>
+        <Form.Control
+          aria-label="Example text with button addon"
+          aria-describedby="basic-addon1"
+        />
+      </InputGroup>
+
+      <InputGroup className="mb-3">
+        <Form.Control
+          placeholder="Recipient's username"
+          aria-label="Recipient's username"
+          aria-describedby="basic-addon2"
+        />
+        <Button variant="outline-secondary" id="button-addon2">
+          Button
+        </Button>
+      </InputGroup>
+
+      <InputGroup className="mb-3">
+        <Button variant="outline-secondary">Button</Button>
+        <Button variant="outline-secondary">Button</Button>
+        <Form.Control aria-label="Example text with two button addons" />
+      </InputGroup>
+
+      <InputGroup>
+        <Form.Control
+          placeholder="Recipient's username"
+          aria-label="Recipient's username with two button addons"
+        />
+        <Button variant="outline-secondary">Button</Button>
+        <Button variant="outline-secondary">Button</Button>
+      </InputGroup>
+    </>
+  );
+}
+
+export default ButtonsExample;
diff --git a/react-examples/InputGroup/Checkboxes.tsx b/react-examples/InputGroup/Checkboxes.tsx
new file mode 100644
index 0000000..e85b545
--- /dev/null
+++ b/react-examples/InputGroup/Checkboxes.tsx
@@ -0,0 +1,19 @@
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function CheckboxesExample() {
+  return (
+    <>
+      <InputGroup className="mb-3">
+        <InputGroup.Checkbox aria-label="Checkbox for following text input" />
+        <Form.Control aria-label="Text input with checkbox" />
+      </InputGroup>
+      <InputGroup>
+        <InputGroup.Radio aria-label="Radio button for following text input" />
+        <Form.Control aria-label="Text input with radio button" />
+      </InputGroup>
+    </>
+  );
+}
+
+export default CheckboxesExample;
diff --git a/react-examples/InputGroup/MultipleAddons.tsx b/react-examples/InputGroup/MultipleAddons.tsx
new file mode 100644
index 0000000..dea8cf1
--- /dev/null
+++ b/react-examples/InputGroup/MultipleAddons.tsx
@@ -0,0 +1,21 @@
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function MultipleAddonsExample() {
+  return (
+    <>
+      <InputGroup className="mb-3">
+        <InputGroup.Text>$</InputGroup.Text>
+        <InputGroup.Text>0.00</InputGroup.Text>
+        <Form.Control aria-label="Dollar amount (with dot and two decimal places)" />
+      </InputGroup>
+      <InputGroup>
+        <Form.Control aria-label="Dollar amount (with dot and two decimal places)" />
+        <InputGroup.Text>$</InputGroup.Text>
+        <InputGroup.Text>0.00</InputGroup.Text>
+      </InputGroup>
+    </>
+  );
+}
+
+export default MultipleAddonsExample;
diff --git a/react-examples/InputGroup/MultipleInputs.tsx b/react-examples/InputGroup/MultipleInputs.tsx
new file mode 100644
index 0000000..fbc4ac1
--- /dev/null
+++ b/react-examples/InputGroup/MultipleInputs.tsx
@@ -0,0 +1,14 @@
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function MultipleInputsExample() {
+  return (
+    <InputGroup className="mb-3">
+      <InputGroup.Text>First and last name</InputGroup.Text>
+      <Form.Control aria-label="First name" />
+      <Form.Control aria-label="Last name" />
+    </InputGroup>
+  );
+}
+
+export default MultipleInputsExample;
diff --git a/react-examples/InputGroup/SegmentedButtonDropdowns.tsx b/react-examples/InputGroup/SegmentedButtonDropdowns.tsx
new file mode 100644
index 0000000..26d4aef
--- /dev/null
+++ b/react-examples/InputGroup/SegmentedButtonDropdowns.tsx
@@ -0,0 +1,43 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+import SplitButton from 'react-bootstrap/SplitButton';
+
+function SegmentedButtonDropdownsExample() {
+  return (
+    <>
+      <InputGroup className="mb-3">
+        <SplitButton
+          variant="outline-secondary"
+          title="Action"
+          id="segmented-button-dropdown-1"
+        >
+          <Dropdown.Item href="#">Action</Dropdown.Item>
+          <Dropdown.Item href="#">Another action</Dropdown.Item>
+          <Dropdown.Item href="#">Something else here</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item href="#">Separated link</Dropdown.Item>
+        </SplitButton>
+        <Form.Control aria-label="Text input with dropdown button" />
+      </InputGroup>
+
+      <InputGroup className="mb-3">
+        <Form.Control aria-label="Text input with dropdown button" />
+        <SplitButton
+          variant="outline-secondary"
+          title="Action"
+          id="segmented-button-dropdown-2"
+          alignRight
+        >
+          <Dropdown.Item href="#">Action</Dropdown.Item>
+          <Dropdown.Item href="#">Another action</Dropdown.Item>
+          <Dropdown.Item href="#">Something else here</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item href="#">Separated link</Dropdown.Item>
+        </SplitButton>
+      </InputGroup>
+    </>
+  );
+}
+
+export default SegmentedButtonDropdownsExample;
diff --git a/react-examples/InputGroup/Sizes.tsx b/react-examples/InputGroup/Sizes.tsx
new file mode 100644
index 0000000..82934c1
--- /dev/null
+++ b/react-examples/InputGroup/Sizes.tsx
@@ -0,0 +1,36 @@
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function SizesExample() {
+  return (
+    <>
+      <InputGroup size="sm" className="mb-3">
+        <InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text>
+        <Form.Control
+          aria-label="Small"
+          aria-describedby="inputGroup-sizing-sm"
+        />
+      </InputGroup>
+      <br />
+      <InputGroup className="mb-3">
+        <InputGroup.Text id="inputGroup-sizing-default">
+          Default
+        </InputGroup.Text>
+        <Form.Control
+          aria-label="Default"
+          aria-describedby="inputGroup-sizing-default"
+        />
+      </InputGroup>
+      <br />
+      <InputGroup size="lg">
+        <InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text>
+        <Form.Control
+          aria-label="Large"
+          aria-describedby="inputGroup-sizing-sm"
+        />
+      </InputGroup>
+    </>
+  );
+}
+
+export default SizesExample;
diff --git a/react-examples/ListGroup/Active.tsx b/react-examples/ListGroup/Active.tsx
new file mode 100644
index 0000000..f53a538
--- /dev/null
+++ b/react-examples/ListGroup/Active.tsx
@@ -0,0 +1,18 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function ActiveExample() {
+  return (
+    <ListGroup as="ul">
+      <ListGroup.Item as="li" active>
+        Cras justo odio
+      </ListGroup.Item>
+      <ListGroup.Item as="li">Dapibus ac facilisis in</ListGroup.Item>
+      <ListGroup.Item as="li" disabled>
+        Morbi leo risus
+      </ListGroup.Item>
+      <ListGroup.Item as="li">Porta ac consectetur ac</ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default ActiveExample;
diff --git a/react-examples/ListGroup/Buttons.tsx b/react-examples/ListGroup/Buttons.tsx
new file mode 100644
index 0000000..7b9a55f
--- /dev/null
+++ b/react-examples/ListGroup/Buttons.tsx
@@ -0,0 +1,19 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function ButtonExample() {
+  const alertClicked = () => {
+    alert('You clicked the third ListGroupItem');
+  };
+
+  return (
+    <ListGroup>
+      <ListGroup.Item action>Link 1</ListGroup.Item>
+      <ListGroup.Item action>Link 2</ListGroup.Item>
+      <ListGroup.Item action onClick={alertClicked}>
+        Trigger an alert
+      </ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default ButtonExample;
diff --git a/react-examples/ListGroup/Default.tsx b/react-examples/ListGroup/Default.tsx
new file mode 100644
index 0000000..76d655b
--- /dev/null
+++ b/react-examples/ListGroup/Default.tsx
@@ -0,0 +1,15 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function DefaultExample() {
+  return (
+    <ListGroup>
+      <ListGroup.Item>Cras justo odio</ListGroup.Item>
+      <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
+      <ListGroup.Item>Morbi leo risus</ListGroup.Item>
+      <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
+      <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default DefaultExample;
diff --git a/react-examples/ListGroup/Disabled.tsx b/react-examples/ListGroup/Disabled.tsx
new file mode 100644
index 0000000..a244bfd
--- /dev/null
+++ b/react-examples/ListGroup/Disabled.tsx
@@ -0,0 +1,14 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function DisabledExample() {
+  return (
+    <ListGroup>
+      <ListGroup.Item disabled>Cras justo odio</ListGroup.Item>
+      <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
+      <ListGroup.Item>Morbi leo risus</ListGroup.Item>
+      <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default DisabledExample;
diff --git a/react-examples/ListGroup/Flush.tsx b/react-examples/ListGroup/Flush.tsx
new file mode 100644
index 0000000..afbfebf
--- /dev/null
+++ b/react-examples/ListGroup/Flush.tsx
@@ -0,0 +1,14 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function FlushExample() {
+  return (
+    <ListGroup variant="flush">
+      <ListGroup.Item>Cras justo odio</ListGroup.Item>
+      <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
+      <ListGroup.Item>Morbi leo risus</ListGroup.Item>
+      <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default FlushExample;
diff --git a/react-examples/ListGroup/Header.tsx b/react-examples/ListGroup/Header.tsx
new file mode 100644
index 0000000..b995ad8
--- /dev/null
+++ b/react-examples/ListGroup/Header.tsx
@@ -0,0 +1,17 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function HeaderExample() {
+  return (
+    <ListGroup>
+      <ListGroup.Item header="Heading 1">Some body text</ListGroup.Item>
+      <ListGroup.Item header="Heading 2" href="#">
+        Linked item
+      </ListGroup.Item>
+      <ListGroup.Item header="Heading 3" bsStyle="danger">
+        Danger styling
+      </ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default HeaderExample;
diff --git a/react-examples/ListGroup/Horizontal.tsx b/react-examples/ListGroup/Horizontal.tsx
new file mode 100644
index 0000000..0a6a881
--- /dev/null
+++ b/react-examples/ListGroup/Horizontal.tsx
@@ -0,0 +1,14 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function HorizontalExample() {
+  return (
+    <ListGroup horizontal>
+      <ListGroup.Item>This</ListGroup.Item>
+      <ListGroup.Item>ListGroup</ListGroup.Item>
+      <ListGroup.Item>renders</ListGroup.Item>
+      <ListGroup.Item>horizontally!</ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default HorizontalExample;
diff --git a/react-examples/ListGroup/HorizontalResponsive.tsx b/react-examples/ListGroup/HorizontalResponsive.tsx
new file mode 100644
index 0000000..9471849
--- /dev/null
+++ b/react-examples/ListGroup/HorizontalResponsive.tsx
@@ -0,0 +1,18 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function HorizontalResponsiveExample() {
+  return (
+    <>
+      {['sm', 'md', 'lg', 'xl', 'xxl'].map((breakpoint) => (
+        <ListGroup key={breakpoint} horizontal={breakpoint} className="my-2">
+          <ListGroup.Item>This ListGroup</ListGroup.Item>
+          <ListGroup.Item>renders horizontally</ListGroup.Item>
+          <ListGroup.Item>on {breakpoint}</ListGroup.Item>
+          <ListGroup.Item>and above!</ListGroup.Item>
+        </ListGroup>
+      ))}
+    </>
+  );
+}
+
+export default HorizontalResponsiveExample;
diff --git a/react-examples/ListGroup/Linked.tsx b/react-examples/ListGroup/Linked.tsx
new file mode 100644
index 0000000..8aa083c
--- /dev/null
+++ b/react-examples/ListGroup/Linked.tsx
@@ -0,0 +1,23 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function LinkedExample() {
+  const alertClicked = () => {
+    alert('You clicked the third ListGroupItem');
+  };
+
+  return (
+    <ListGroup defaultActiveKey="#link1">
+      <ListGroup.Item action href="#link1">
+        Link 1
+      </ListGroup.Item>
+      <ListGroup.Item action href="#link2" disabled>
+        Link 2
+      </ListGroup.Item>
+      <ListGroup.Item action onClick={alertClicked}>
+        This one is a button
+      </ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default LinkedExample;
diff --git a/react-examples/ListGroup/Numbered.tsx b/react-examples/ListGroup/Numbered.tsx
new file mode 100644
index 0000000..e4e069d
--- /dev/null
+++ b/react-examples/ListGroup/Numbered.tsx
@@ -0,0 +1,13 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function NumberedExample() {
+  return (
+    <ListGroup as="ol" numbered>
+      <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
+      <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
+      <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default NumberedExample;
diff --git a/react-examples/ListGroup/NumberedCustom.tsx b/react-examples/ListGroup/NumberedCustom.tsx
new file mode 100644
index 0000000..7cc1137
--- /dev/null
+++ b/react-examples/ListGroup/NumberedCustom.tsx
@@ -0,0 +1,47 @@
+import Badge from 'react-bootstrap/Badge';
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function DefaultExample() {
+  return (
+    <ListGroup as="ol" numbered>
+      <ListGroup.Item
+        as="li"
+        className="d-flex justify-content-between align-items-start"
+      >
+        <div className="ms-2 me-auto">
+          <div className="fw-bold">Subheading</div>
+          Cras justo odio
+        </div>
+        <Badge bg="primary" pill>
+          14
+        </Badge>
+      </ListGroup.Item>
+      <ListGroup.Item
+        as="li"
+        className="d-flex justify-content-between align-items-start"
+      >
+        <div className="ms-2 me-auto">
+          <div className="fw-bold">Subheading</div>
+          Cras justo odio
+        </div>
+        <Badge bg="primary" pill>
+          14
+        </Badge>
+      </ListGroup.Item>
+      <ListGroup.Item
+        as="li"
+        className="d-flex justify-content-between align-items-start"
+      >
+        <div className="ms-2 me-auto">
+          <div className="fw-bold">Subheading</div>
+          Cras justo odio
+        </div>
+        <Badge bg="primary" pill>
+          14
+        </Badge>
+      </ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default DefaultExample;
diff --git a/react-examples/ListGroup/Style.tsx b/react-examples/ListGroup/Style.tsx
new file mode 100644
index 0000000..8ac7dbb
--- /dev/null
+++ b/react-examples/ListGroup/Style.tsx
@@ -0,0 +1,19 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function StyleExample() {
+  return (
+    <ListGroup>
+      <ListGroup.Item>No style</ListGroup.Item>
+      <ListGroup.Item variant="primary">Primary</ListGroup.Item>
+      <ListGroup.Item variant="secondary">Secondary</ListGroup.Item>
+      <ListGroup.Item variant="success">Success</ListGroup.Item>
+      <ListGroup.Item variant="danger">Danger</ListGroup.Item>
+      <ListGroup.Item variant="warning">Warning</ListGroup.Item>
+      <ListGroup.Item variant="info">Info</ListGroup.Item>
+      <ListGroup.Item variant="light">Light</ListGroup.Item>
+      <ListGroup.Item variant="dark">Dark</ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default StyleExample;
diff --git a/react-examples/ListGroup/StyleActions.tsx b/react-examples/ListGroup/StyleActions.tsx
new file mode 100644
index 0000000..803fa07
--- /dev/null
+++ b/react-examples/ListGroup/StyleActions.tsx
@@ -0,0 +1,33 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function StyleActionsExample() {
+  return (
+    <ListGroup>
+      <ListGroup.Item>No style</ListGroup.Item>
+      <ListGroup.Item variant="primary">Primary</ListGroup.Item>
+      <ListGroup.Item action variant="secondary">
+        Secondary
+      </ListGroup.Item>
+      <ListGroup.Item action variant="success">
+        Success
+      </ListGroup.Item>
+      <ListGroup.Item action variant="danger">
+        Danger
+      </ListGroup.Item>
+      <ListGroup.Item action variant="warning">
+        Warning
+      </ListGroup.Item>
+      <ListGroup.Item action variant="info">
+        Info
+      </ListGroup.Item>
+      <ListGroup.Item action variant="light">
+        Light
+      </ListGroup.Item>
+      <ListGroup.Item action variant="dark">
+        Dark
+      </ListGroup.Item>
+    </ListGroup>
+  );
+}
+
+export default StyleActionsExample;
diff --git a/react-examples/ListGroup/Tabs.tsx b/react-examples/ListGroup/Tabs.tsx
new file mode 100644
index 0000000..6bfe376
--- /dev/null
+++ b/react-examples/ListGroup/Tabs.tsx
@@ -0,0 +1,31 @@
+import Col from 'react-bootstrap/Col';
+import ListGroup from 'react-bootstrap/ListGroup';
+import Row from 'react-bootstrap/Row';
+import Tab from 'react-bootstrap/Tab';
+
+function TabsExample() {
+  return (
+    <Tab.Container id="list-group-tabs-example" defaultActiveKey="#link1">
+      <Row>
+        <Col sm={4}>
+          <ListGroup>
+            <ListGroup.Item action href="#link1">
+              Link 1
+            </ListGroup.Item>
+            <ListGroup.Item action href="#link2">
+              Link 2
+            </ListGroup.Item>
+          </ListGroup>
+        </Col>
+        <Col sm={8}>
+          <Tab.Content>
+            <Tab.Pane eventKey="#link1">Tab pane content 1</Tab.Pane>
+            <Tab.Pane eventKey="#link2">Tab pane content 2</Tab.Pane>
+          </Tab.Content>
+        </Col>
+      </Row>
+    </Tab.Container>
+  );
+}
+
+export default TabsExample;
diff --git a/react-examples/Modal/Basic.tsx b/react-examples/Modal/Basic.tsx
new file mode 100644
index 0000000..88e9a8e
--- /dev/null
+++ b/react-examples/Modal/Basic.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+function Example() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Launch demo modal
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>Woohoo, you are reading this text in a modal!</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleClose}>
+            Save Changes
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Modal/CustomSizing.tsx b/react-examples/Modal/CustomSizing.tsx
new file mode 100644
index 0000000..897e4da
--- /dev/null
+++ b/react-examples/Modal/CustomSizing.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+function Example() {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <Button variant="primary" onClick={() => setShow(true)}>
+        Custom Width Modal
+      </Button>
+
+      <Modal
+        show={show}
+        onHide={() => setShow(false)}
+        dialogClassName="modal-90w"
+        aria-labelledby="example-custom-modal-styling-title"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title id="example-custom-modal-styling-title">
+            Custom Modal Styling
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <p>
+            Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde
+            commodi aspernatur enim, consectetur. Cumque deleniti temporibus
+            ipsam atque a dolores quisquam quisquam adipisci possimus
+            laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod
+            accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia
+            reiciendis porro quo magni incidunt dolore amet atque facilis ipsum
+            deleniti rem!
+          </p>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Modal/DefaultSizing.tsx b/react-examples/Modal/DefaultSizing.tsx
new file mode 100644
index 0000000..11bead8
--- /dev/null
+++ b/react-examples/Modal/DefaultSizing.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+function Example() {
+  const [smShow, setSmShow] = useState(false);
+  const [lgShow, setLgShow] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setSmShow(true)} className="me-2">
+        Small modal
+      </Button>
+      <Button onClick={() => setLgShow(true)}>Large modal</Button>
+      <Modal
+        size="sm"
+        show={smShow}
+        onHide={() => setSmShow(false)}
+        aria-labelledby="example-modal-sizes-title-sm"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title id="example-modal-sizes-title-sm">
+            Small Modal
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>...</Modal.Body>
+      </Modal>
+      <Modal
+        size="lg"
+        show={lgShow}
+        onHide={() => setLgShow(false)}
+        aria-labelledby="example-modal-sizes-title-lg"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title id="example-modal-sizes-title-lg">
+            Large Modal
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>...</Modal.Body>
+      </Modal>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Modal/Focus.tsx b/react-examples/Modal/Focus.tsx
new file mode 100644
index 0000000..169c282
--- /dev/null
+++ b/react-examples/Modal/Focus.tsx
@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import Modal from 'react-bootstrap/Modal';
+
+function Example() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Launch demo modal
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+              <Form.Label>Email address</Form.Label>
+              <Form.Control
+                type="email"
+                placeholder="name@example.com"
+                autoFocus
+              />
+            </Form.Group>
+            <Form.Group
+              className="mb-3"
+              controlId="exampleForm.ControlTextarea1"
+            >
+              <Form.Label>Example textarea</Form.Label>
+              <Form.Control as="textarea" rows={3} />
+            </Form.Group>
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleClose}>
+            Save Changes
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Modal/FullScreen.tsx b/react-examples/Modal/FullScreen.tsx
new file mode 100644
index 0000000..a1b6216
--- /dev/null
+++ b/react-examples/Modal/FullScreen.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+function Example() {
+  const values = [true, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down'];
+  const [fullscreen, setFullscreen] = useState(true);
+  const [show, setShow] = useState(false);
+
+  function handleShow(breakpoint) {
+    setFullscreen(breakpoint);
+    setShow(true);
+  }
+
+  return (
+    <>
+      {values.map((v, idx) => (
+        <Button key={idx} className="me-2 mb-2" onClick={() => handleShow(v)}>
+          Full screen
+          {typeof v === 'string' && `below ${v.split('-')[0]}`}
+        </Button>
+      ))}
+      <Modal show={show} fullscreen={fullscreen} onHide={() => setShow(false)}>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>Modal body content</Modal.Body>
+      </Modal>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Modal/Grid.tsx b/react-examples/Modal/Grid.tsx
new file mode 100644
index 0000000..a32b7df
--- /dev/null
+++ b/react-examples/Modal/Grid.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
+import Modal from 'react-bootstrap/Modal';
+import Row from 'react-bootstrap/Row';
+
+function MydModalWithGrid(props) {
+  return (
+    <Modal {...props} aria-labelledby="contained-modal-title-vcenter">
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Using Grid in Modal
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="grid-example">
+        <Container>
+          <Row>
+            <Col xs={12} md={8}>
+              .col-xs-12 .col-md-8
+            </Col>
+            <Col xs={6} md={4}>
+              .col-xs-6 .col-md-4
+            </Col>
+          </Row>
+
+          <Row>
+            <Col xs={6} md={4}>
+              .col-xs-6 .col-md-4
+            </Col>
+            <Col xs={6} md={4}>
+              .col-xs-6 .col-md-4
+            </Col>
+            <Col xs={6} md={4}>
+              .col-xs-6 .col-md-4
+            </Col>
+          </Row>
+        </Container>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={props.onHide}>Close</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+function App() {
+  const [modalShow, setModalShow] = useState(false);
+
+  return (
+    <>
+      <Button variant="primary" onClick={() => setModalShow(true)}>
+        Launch modal with grid
+      </Button>
+
+      <MydModalWithGrid show={modalShow} onHide={() => setModalShow(false)} />
+    </>
+  );
+}
+
+render(<App />);
diff --git a/react-examples/Modal/Static.tsx b/react-examples/Modal/Static.tsx
new file mode 100644
index 0000000..bbcb06d
--- /dev/null
+++ b/react-examples/Modal/Static.tsx
@@ -0,0 +1,28 @@
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+function StaticExample() {
+  return (
+    <div
+      className="modal show"
+      style={{ display: 'block', position: 'initial' }}
+    >
+      <Modal.Dialog>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal title</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          <p>Modal body text goes here.</p>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button variant="secondary">Close</Button>
+          <Button variant="primary">Save changes</Button>
+        </Modal.Footer>
+      </Modal.Dialog>
+    </div>
+  );
+}
+
+export default StaticExample;
diff --git a/react-examples/Modal/StaticBackdrop.tsx b/react-examples/Modal/StaticBackdrop.tsx
new file mode 100644
index 0000000..80ce691
--- /dev/null
+++ b/react-examples/Modal/StaticBackdrop.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+function Example() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Launch static backdrop modal
+      </Button>
+
+      <Modal
+        show={show}
+        onHide={handleClose}
+        backdrop="static"
+        keyboard={false}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Modal title</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          I will not close if you click outside me. Do not even try to press
+          escape key.
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary">Understood</Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Modal/VerticallyCentered.tsx b/react-examples/Modal/VerticallyCentered.tsx
new file mode 100644
index 0000000..29e5320
--- /dev/null
+++ b/react-examples/Modal/VerticallyCentered.tsx
@@ -0,0 +1,49 @@
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+function MyVerticallyCenteredModal(props) {
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Modal heading
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <h4>Centered Modal</h4>
+        <p>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+          consectetur ac, vestibulum at eros.
+        </p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={props.onHide}>Close</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+function App() {
+  const [modalShow, setModalShow] = React.useState(false);
+
+  return (
+    <>
+      <Button variant="primary" onClick={() => setModalShow(true)}>
+        Launch vertically centered modal
+      </Button>
+
+      <MyVerticallyCenteredModal
+        show={modalShow}
+        onHide={() => setModalShow(false)}
+      />
+    </>
+  );
+}
+
+render(<App />);
diff --git a/react-examples/Modal/WithoutAnimation.tsx b/react-examples/Modal/WithoutAnimation.tsx
new file mode 100644
index 0000000..925dc40
--- /dev/null
+++ b/react-examples/Modal/WithoutAnimation.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+function Example() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Launch demo modal
+      </Button>
+
+      <Modal show={show} onHide={handleClose} animation={false}>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>Woohoo, you are reading this text in a modal!</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleClose}>
+            Save Changes
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Nav/Alignment.tsx b/react-examples/Nav/Alignment.tsx
new file mode 100644
index 0000000..5aa2ffb
--- /dev/null
+++ b/react-examples/Nav/Alignment.tsx
@@ -0,0 +1,43 @@
+import Nav from 'react-bootstrap/Nav';
+
+function AlignmentExample() {
+  return (
+    <>
+      <Nav className="justify-content-center" activeKey="/home">
+        <Nav.Item>
+          <Nav.Link href="/home">Active</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="link-1">Link</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="link-2">Link</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="disabled" disabled>
+            Disabled
+          </Nav.Link>
+        </Nav.Item>
+      </Nav>
+      <p className="text-center mt-4 mb-4">Or right-aligned</p>
+      <Nav className="justify-content-end" activeKey="/home">
+        <Nav.Item>
+          <Nav.Link href="/home">Active</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="link-1">Link</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="link-2">Link</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="disabled" disabled>
+            Disabled
+          </Nav.Link>
+        </Nav.Item>
+      </Nav>
+    </>
+  );
+}
+
+export default AlignmentExample;
diff --git a/react-examples/Nav/Basic.tsx b/react-examples/Nav/Basic.tsx
new file mode 100644
index 0000000..79caada
--- /dev/null
+++ b/react-examples/Nav/Basic.tsx
@@ -0,0 +1,27 @@
+import Nav from 'react-bootstrap/Nav';
+
+function BasicExample() {
+  return (
+    <Nav
+      activeKey="/home"
+      onSelect={(selectedKey) => alert(`selected ${selectedKey}`)}
+    >
+      <Nav.Item>
+        <Nav.Link href="/home">Active</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-1">Link</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-2">Link</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="disabled" disabled>
+          Disabled
+        </Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Nav/Dropdown.tsx b/react-examples/Nav/Dropdown.tsx
new file mode 100644
index 0000000..eea56f1
--- /dev/null
+++ b/react-examples/Nav/Dropdown.tsx
@@ -0,0 +1,35 @@
+import Nav from 'react-bootstrap/Nav';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+
+function NavDropdownExample() {
+  const handleSelect = (eventKey) => alert(`selected ${eventKey}`);
+
+  return (
+    <Nav variant="pills" activeKey="1" onSelect={handleSelect}>
+      <Nav.Item>
+        <Nav.Link eventKey="1" href="#/home">
+          NavLink 1 content
+        </Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="2" title="Item">
+          NavLink 2 content
+        </Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="3" disabled>
+          NavLink 3 content
+        </Nav.Link>
+      </Nav.Item>
+      <NavDropdown title="Dropdown" id="nav-dropdown">
+        <NavDropdown.Item eventKey="4.1">Action</NavDropdown.Item>
+        <NavDropdown.Item eventKey="4.2">Another action</NavDropdown.Item>
+        <NavDropdown.Item eventKey="4.3">Something else here</NavDropdown.Item>
+        <NavDropdown.Divider />
+        <NavDropdown.Item eventKey="4.4">Separated link</NavDropdown.Item>
+      </NavDropdown>
+    </Nav>
+  );
+}
+
+export default NavDropdownExample;
diff --git a/react-examples/Nav/DropdownImpl.tsx b/react-examples/Nav/DropdownImpl.tsx
new file mode 100644
index 0000000..42388be
--- /dev/null
+++ b/react-examples/Nav/DropdownImpl.tsx
@@ -0,0 +1,16 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import NavItem from 'react-bootstrap/NavItem';
+import NavLink from 'react-bootstrap/NavLink';
+
+function DropdownImplExample() {
+  return (
+    <Dropdown as={NavItem}>
+      <Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
+      <Dropdown.Menu>
+        <Dropdown.Item>Hello there!</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+export default DropdownImplExample;
diff --git a/react-examples/Nav/Fill.tsx b/react-examples/Nav/Fill.tsx
new file mode 100644
index 0000000..92d8e4d
--- /dev/null
+++ b/react-examples/Nav/Fill.tsx
@@ -0,0 +1,24 @@
+import Nav from 'react-bootstrap/Nav';
+
+function FillExample() {
+  return (
+    <Nav fill variant="tabs" defaultActiveKey="/home">
+      <Nav.Item>
+        <Nav.Link href="/home">Active</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-1">Loooonger NavLink</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-2">Link</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="disabled" disabled>
+          Disabled
+        </Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+}
+
+export default FillExample;
diff --git a/react-examples/Nav/Justified.tsx b/react-examples/Nav/Justified.tsx
new file mode 100644
index 0000000..99ae1ed
--- /dev/null
+++ b/react-examples/Nav/Justified.tsx
@@ -0,0 +1,24 @@
+import Nav from 'react-bootstrap/Nav';
+
+function JustifiedExample() {
+  return (
+    <Nav justify variant="tabs" defaultActiveKey="/home">
+      <Nav.Item>
+        <Nav.Link href="/home">Active</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-1">Loooonger NavLink</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-2">Link</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="disabled" disabled>
+          Disabled
+        </Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+}
+
+export default JustifiedExample;
diff --git a/react-examples/Nav/List.tsx b/react-examples/Nav/List.tsx
new file mode 100644
index 0000000..31808c4
--- /dev/null
+++ b/react-examples/Nav/List.tsx
@@ -0,0 +1,19 @@
+import Nav from 'react-bootstrap/Nav';
+
+function ListExample() {
+  return (
+    <Nav defaultActiveKey="/home" as="ul">
+      <Nav.Item as="li">
+        <Nav.Link href="/home">Active</Nav.Link>
+      </Nav.Item>
+      <Nav.Item as="li">
+        <Nav.Link eventKey="link-1">Link</Nav.Link>
+      </Nav.Item>
+      <Nav.Item as="li">
+        <Nav.Link eventKey="link-2">Link</Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+}
+
+export default ListExample;
diff --git a/react-examples/Nav/Pills.tsx b/react-examples/Nav/Pills.tsx
new file mode 100644
index 0000000..4e10e33
--- /dev/null
+++ b/react-examples/Nav/Pills.tsx
@@ -0,0 +1,21 @@
+import Nav from 'react-bootstrap/Nav';
+
+function PillsExample() {
+  return (
+    <Nav variant="pills" defaultActiveKey="/home">
+      <Nav.Item>
+        <Nav.Link href="/home">Active</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-1">Option 2</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="disabled" disabled>
+          Disabled
+        </Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+}
+
+export default PillsExample;
diff --git a/react-examples/Nav/Stacked.tsx b/react-examples/Nav/Stacked.tsx
new file mode 100644
index 0000000..b6a212f
--- /dev/null
+++ b/react-examples/Nav/Stacked.tsx
@@ -0,0 +1,16 @@
+import Nav from 'react-bootstrap/Nav';
+
+function StackedExample() {
+  return (
+    <Nav defaultActiveKey="/home" className="flex-column">
+      <Nav.Link href="/home">Active</Nav.Link>
+      <Nav.Link eventKey="link-1">Link</Nav.Link>
+      <Nav.Link eventKey="link-2">Link</Nav.Link>
+      <Nav.Link eventKey="disabled" disabled>
+        Disabled
+      </Nav.Link>
+    </Nav>
+  );
+}
+
+export default StackedExample;
diff --git a/react-examples/Nav/Tabs.tsx b/react-examples/Nav/Tabs.tsx
new file mode 100644
index 0000000..55b0e25
--- /dev/null
+++ b/react-examples/Nav/Tabs.tsx
@@ -0,0 +1,21 @@
+import Nav from 'react-bootstrap/Nav';
+
+function TabsExample() {
+  return (
+    <Nav variant="tabs" defaultActiveKey="/home">
+      <Nav.Item>
+        <Nav.Link href="/home">Active</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-1">Option 2</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="disabled" disabled>
+          Disabled
+        </Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+}
+
+export default TabsExample;
diff --git a/react-examples/Nav/Underline.tsx b/react-examples/Nav/Underline.tsx
new file mode 100644
index 0000000..8d0f421
--- /dev/null
+++ b/react-examples/Nav/Underline.tsx
@@ -0,0 +1,21 @@
+import Nav from 'react-bootstrap/Nav';
+
+function UnderlineExample() {
+  return (
+    <Nav variant="underline" defaultActiveKey="/home">
+      <Nav.Item>
+        <Nav.Link href="/home">Active</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-1">Option 2</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="disabled" disabled>
+          Disabled
+        </Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+}
+
+export default UnderlineExample;
diff --git a/react-examples/Navbar/Basic.tsx b/react-examples/Navbar/Basic.tsx
new file mode 100644
index 0000000..fdc43d7
--- /dev/null
+++ b/react-examples/Navbar/Basic.tsx
@@ -0,0 +1,34 @@
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+
+function BasicExample() {
+  return (
+    <Navbar expand="lg" className="bg-body-tertiary">
+      <Container>
+        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="me-auto">
+            <Nav.Link href="#home">Home</Nav.Link>
+            <Nav.Link href="#link">Link</Nav.Link>
+            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
+              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.2">
+                Another action
+              </NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
+              <NavDropdown.Divider />
+              <NavDropdown.Item href="#action/3.4">
+                Separated link
+              </NavDropdown.Item>
+            </NavDropdown>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Navbar/Brand.tsx b/react-examples/Navbar/Brand.tsx
new file mode 100644
index 0000000..e54a21c
--- /dev/null
+++ b/react-examples/Navbar/Brand.tsx
@@ -0,0 +1,51 @@
+import Container from 'react-bootstrap/Container';
+import Navbar from 'react-bootstrap/Navbar';
+
+function BrandExample() {
+  return (
+    <>
+      <Navbar className="bg-body-tertiary">
+        <Container>
+          <Navbar.Brand href="#home">Brand link</Navbar.Brand>
+        </Container>
+      </Navbar>
+      <br />
+      <Navbar className="bg-body-tertiary">
+        <Container>
+          <Navbar.Brand>Brand text</Navbar.Brand>
+        </Container>
+      </Navbar>
+      <br />
+      <Navbar className="bg-body-tertiary">
+        <Container>
+          <Navbar.Brand href="#home">
+            <img
+              src="/img/logo.svg"
+              width="30"
+              height="30"
+              className="d-inline-block align-top"
+              alt="React Bootstrap logo"
+            />
+          </Navbar.Brand>
+        </Container>
+      </Navbar>
+      <br />
+      <Navbar className="bg-body-tertiary">
+        <Container>
+          <Navbar.Brand href="#home">
+            <img
+              alt=""
+              src="/img/logo.svg"
+              width="30"
+              height="30"
+              className="d-inline-block align-top"
+            />{' '}
+            React Bootstrap
+          </Navbar.Brand>
+        </Container>
+      </Navbar>
+    </>
+  );
+}
+
+export default BrandExample;
diff --git a/react-examples/Navbar/Collapsible.tsx b/react-examples/Navbar/Collapsible.tsx
new file mode 100644
index 0000000..008463d
--- /dev/null
+++ b/react-examples/Navbar/Collapsible.tsx
@@ -0,0 +1,40 @@
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+
+function CollapsibleExample() {
+  return (
+    <Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">
+      <Container>
+        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
+        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+        <Navbar.Collapse id="responsive-navbar-nav">
+          <Nav className="me-auto">
+            <Nav.Link href="#features">Features</Nav.Link>
+            <Nav.Link href="#pricing">Pricing</Nav.Link>
+            <NavDropdown title="Dropdown" id="collapsible-nav-dropdown">
+              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.2">
+                Another action
+              </NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
+              <NavDropdown.Divider />
+              <NavDropdown.Item href="#action/3.4">
+                Separated link
+              </NavDropdown.Item>
+            </NavDropdown>
+          </Nav>
+          <Nav>
+            <Nav.Link href="#deets">More deets</Nav.Link>
+            <Nav.Link eventKey={2} href="#memes">
+              Dank memes
+            </Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default CollapsibleExample;
diff --git a/react-examples/Navbar/ColorSchemes.tsx b/react-examples/Navbar/ColorSchemes.tsx
new file mode 100644
index 0000000..a84ae4d
--- /dev/null
+++ b/react-examples/Navbar/ColorSchemes.tsx
@@ -0,0 +1,45 @@
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+
+function ColorSchemesExample() {
+  return (
+    <>
+      <Navbar bg="dark" data-bs-theme="dark">
+        <Container>
+          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
+          <Nav className="me-auto">
+            <Nav.Link href="#home">Home</Nav.Link>
+            <Nav.Link href="#features">Features</Nav.Link>
+            <Nav.Link href="#pricing">Pricing</Nav.Link>
+          </Nav>
+        </Container>
+      </Navbar>
+      <br />
+      <Navbar bg="primary" data-bs-theme="dark">
+        <Container>
+          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
+          <Nav className="me-auto">
+            <Nav.Link href="#home">Home</Nav.Link>
+            <Nav.Link href="#features">Features</Nav.Link>
+            <Nav.Link href="#pricing">Pricing</Nav.Link>
+          </Nav>
+        </Container>
+      </Navbar>
+
+      <br />
+      <Navbar bg="light" data-bs-theme="light">
+        <Container>
+          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
+          <Nav className="me-auto">
+            <Nav.Link href="#home">Home</Nav.Link>
+            <Nav.Link href="#features">Features</Nav.Link>
+            <Nav.Link href="#pricing">Pricing</Nav.Link>
+          </Nav>
+        </Container>
+      </Navbar>
+    </>
+  );
+}
+
+export default ColorSchemesExample;
diff --git a/react-examples/Navbar/ContainerInside.tsx b/react-examples/Navbar/ContainerInside.tsx
new file mode 100644
index 0000000..853a442
--- /dev/null
+++ b/react-examples/Navbar/ContainerInside.tsx
@@ -0,0 +1,14 @@
+import Container from 'react-bootstrap/Container';
+import Navbar from 'react-bootstrap/Navbar';
+
+function ContainerInsideExample() {
+  return (
+    <Navbar expand="lg" className="bg-body-tertiary">
+      <Container>
+        <Navbar.Brand href="#">Navbar</Navbar.Brand>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default ContainerInsideExample;
diff --git a/react-examples/Navbar/ContainerOutside.tsx b/react-examples/Navbar/ContainerOutside.tsx
new file mode 100644
index 0000000..b832cb5
--- /dev/null
+++ b/react-examples/Navbar/ContainerOutside.tsx
@@ -0,0 +1,16 @@
+import Container from 'react-bootstrap/Container';
+import Navbar from 'react-bootstrap/Navbar';
+
+function ContainerOutsideExample() {
+  return (
+    <Container>
+      <Navbar expand="lg" className="bg-body-tertiary">
+        <Container>
+          <Navbar.Brand href="#">Navbar</Navbar.Brand>
+        </Container>
+      </Navbar>
+    </Container>
+  );
+}
+
+export default ContainerOutsideExample;
diff --git a/react-examples/Navbar/Form.tsx b/react-examples/Navbar/Form.tsx
new file mode 100644
index 0000000..9519a83
--- /dev/null
+++ b/react-examples/Navbar/Form.tsx
@@ -0,0 +1,39 @@
+import Navbar from 'react-bootstrap/Navbar';
+import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+import InputGroup from 'react-bootstrap/InputGroup';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function FormExample() {
+  return (
+    <Navbar className="bg-body-tertiary justify-content-between">
+      <Form inline>
+        <InputGroup>
+          <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
+          <Form.Control
+            placeholder="Username"
+            aria-label="Username"
+            aria-describedby="basic-addon1"
+          />
+        </InputGroup>
+      </Form>
+      <Form inline>
+        <Row>
+          <Col xs="auto">
+            <Form.Control
+              type="text"
+              placeholder="Search"
+              className=" mr-sm-2"
+            />
+          </Col>
+          <Col xs="auto">
+            <Button type="submit">Submit</Button>
+          </Col>
+        </Row>
+      </Form>
+    </Navbar>
+  );
+}
+
+export default FormExample;
diff --git a/react-examples/Navbar/NavScroll.tsx b/react-examples/Navbar/NavScroll.tsx
new file mode 100644
index 0000000..6ad9e1b
--- /dev/null
+++ b/react-examples/Navbar/NavScroll.tsx
@@ -0,0 +1,51 @@
+import Button from 'react-bootstrap/Button';
+import Container from 'react-bootstrap/Container';
+import Form from 'react-bootstrap/Form';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+
+function NavScrollExample() {
+  return (
+    <Navbar expand="lg" className="bg-body-tertiary">
+      <Container fluid>
+        <Navbar.Brand href="#">Navbar scroll</Navbar.Brand>
+        <Navbar.Toggle aria-controls="navbarScroll" />
+        <Navbar.Collapse id="navbarScroll">
+          <Nav
+            className="me-auto my-2 my-lg-0"
+            style={{ maxHeight: '100px' }}
+            navbarScroll
+          >
+            <Nav.Link href="#action1">Home</Nav.Link>
+            <Nav.Link href="#action2">Link</Nav.Link>
+            <NavDropdown title="Link" id="navbarScrollingDropdown">
+              <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
+              <NavDropdown.Item href="#action4">
+                Another action
+              </NavDropdown.Item>
+              <NavDropdown.Divider />
+              <NavDropdown.Item href="#action5">
+                Something else here
+              </NavDropdown.Item>
+            </NavDropdown>
+            <Nav.Link href="#" disabled>
+              Link
+            </Nav.Link>
+          </Nav>
+          <Form className="d-flex">
+            <Form.Control
+              type="search"
+              placeholder="Search"
+              className="me-2"
+              aria-label="Search"
+            />
+            <Button variant="outline-success">Search</Button>
+          </Form>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default NavScrollExample;
diff --git a/react-examples/Navbar/Offcanvas.tsx b/react-examples/Navbar/Offcanvas.tsx
new file mode 100644
index 0000000..e242ca6
--- /dev/null
+++ b/react-examples/Navbar/Offcanvas.tsx
@@ -0,0 +1,63 @@
+import Button from 'react-bootstrap/Button';
+import Container from 'react-bootstrap/Container';
+import Form from 'react-bootstrap/Form';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+
+function OffcanvasExample() {
+  return (
+    <>
+      {[false, 'sm', 'md', 'lg', 'xl', 'xxl'].map((expand) => (
+        <Navbar key={expand} expand={expand} className="bg-body-tertiary mb-3">
+          <Container fluid>
+            <Navbar.Brand href="#">Navbar Offcanvas</Navbar.Brand>
+            <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
+            <Navbar.Offcanvas
+              id={`offcanvasNavbar-expand-${expand}`}
+              aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
+              placement="end"
+            >
+              <Offcanvas.Header closeButton>
+                <Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
+                  Offcanvas
+                </Offcanvas.Title>
+              </Offcanvas.Header>
+              <Offcanvas.Body>
+                <Nav className="justify-content-end flex-grow-1 pe-3">
+                  <Nav.Link href="#action1">Home</Nav.Link>
+                  <Nav.Link href="#action2">Link</Nav.Link>
+                  <NavDropdown
+                    title="Dropdown"
+                    id={`offcanvasNavbarDropdown-expand-${expand}`}
+                  >
+                    <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
+                    <NavDropdown.Item href="#action4">
+                      Another action
+                    </NavDropdown.Item>
+                    <NavDropdown.Divider />
+                    <NavDropdown.Item href="#action5">
+                      Something else here
+                    </NavDropdown.Item>
+                  </NavDropdown>
+                </Nav>
+                <Form className="d-flex">
+                  <Form.Control
+                    type="search"
+                    placeholder="Search"
+                    className="me-2"
+                    aria-label="Search"
+                  />
+                  <Button variant="outline-success">Search</Button>
+                </Form>
+              </Offcanvas.Body>
+            </Navbar.Offcanvas>
+          </Container>
+        </Navbar>
+      ))}
+    </>
+  );
+}
+
+export default OffcanvasExample;
diff --git a/react-examples/Navbar/TextLink.tsx b/react-examples/Navbar/TextLink.tsx
new file mode 100644
index 0000000..bcf2f58
--- /dev/null
+++ b/react-examples/Navbar/TextLink.tsx
@@ -0,0 +1,20 @@
+import Container from 'react-bootstrap/Container';
+import Navbar from 'react-bootstrap/Navbar';
+
+function TextLinkExample() {
+  return (
+    <Navbar className="bg-body-tertiary">
+      <Container>
+        <Navbar.Brand href="#home">Navbar with text</Navbar.Brand>
+        <Navbar.Toggle />
+        <Navbar.Collapse className="justify-content-end">
+          <Navbar.Text>
+            Signed in as: <a href="#login">Mark Otto</a>
+          </Navbar.Text>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default TextLinkExample;
diff --git a/react-examples/Offcanvas/Backdrop.tsx b/react-examples/Offcanvas/Backdrop.tsx
new file mode 100644
index 0000000..d5de777
--- /dev/null
+++ b/react-examples/Offcanvas/Backdrop.tsx
@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+
+const options = [
+  {
+    name: 'Enable backdrop (default)',
+    scroll: false,
+    backdrop: true,
+  },
+  {
+    name: 'Disable backdrop',
+    scroll: false,
+    backdrop: false,
+  },
+  {
+    name: 'Enable body scrolling',
+    scroll: true,
+    backdrop: false,
+  },
+  {
+    name: 'Enable both scrolling & backdrop',
+    scroll: true,
+    backdrop: true,
+  },
+];
+
+function OffCanvasExample({ name, ...props }) {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const toggleShow = () => setShow((s) => !s);
+
+  return (
+    <>
+      <Button variant="primary" onClick={toggleShow} className="me-2">
+        {name}
+      </Button>
+      <Offcanvas show={show} onHide={handleClose} {...props}>
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+          Some text as placeholder. In real life you can have the elements you
+          have chosen. Like, text, images, lists, etc.
+        </Offcanvas.Body>
+      </Offcanvas>
+    </>
+  );
+}
+
+function Example() {
+  return (
+    <>
+      {options.map((props, idx) => (
+        <OffCanvasExample key={idx} {...props} />
+      ))}
+    </>
+  );
+}
+
+render(<Example />);
diff --git a/react-examples/Offcanvas/Basic.tsx b/react-examples/Offcanvas/Basic.tsx
new file mode 100644
index 0000000..3e37494
--- /dev/null
+++ b/react-examples/Offcanvas/Basic.tsx
@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+
+function Example() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Launch
+      </Button>
+
+      <Offcanvas show={show} onHide={handleClose}>
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+          Some text as placeholder. In real life you can have the elements you
+          have chosen. Like, text, images, lists, etc.
+        </Offcanvas.Body>
+      </Offcanvas>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Offcanvas/Placement.tsx b/react-examples/Offcanvas/Placement.tsx
new file mode 100644
index 0000000..eea6ed2
--- /dev/null
+++ b/react-examples/Offcanvas/Placement.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+
+function OffCanvasExample({ name, ...props }) {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow} className="me-2">
+        {name}
+      </Button>
+      <Offcanvas show={show} onHide={handleClose} {...props}>
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+          Some text as placeholder. In real life you can have the elements you
+          have chosen. Like, text, images, lists, etc.
+        </Offcanvas.Body>
+      </Offcanvas>
+    </>
+  );
+}
+
+function Example() {
+  return (
+    <>
+      {['start', 'end', 'top', 'bottom'].map((placement, idx) => (
+        <OffCanvasExample key={idx} placement={placement} name={placement} />
+      ))}
+    </>
+  );
+}
+
+render(<Example />);
diff --git a/react-examples/Offcanvas/Responsive.tsx b/react-examples/Offcanvas/Responsive.tsx
new file mode 100644
index 0000000..6dde84b
--- /dev/null
+++ b/react-examples/Offcanvas/Responsive.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import Alert from 'react-bootstrap/Alert';
+import Button from 'react-bootstrap/Button';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+
+function ResponsiveExample() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" className="d-lg-none" onClick={handleShow}>
+        Launch
+      </Button>
+
+      <Alert variant="info" className="d-none d-lg-block">
+        Resize your browser to show the responsive offcanvas toggle.
+      </Alert>
+
+      <Offcanvas show={show} onHide={handleClose} responsive="lg">
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>Responsive offcanvas</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+          <p className="mb-0">
+            This is content within an <code>.offcanvas-lg</code>.
+          </p>
+        </Offcanvas.Body>
+      </Offcanvas>
+    </>
+  );
+}
+
+export default ResponsiveExample;
diff --git a/react-examples/Offcanvas/StaticBackdrop.tsx b/react-examples/Offcanvas/StaticBackdrop.tsx
new file mode 100644
index 0000000..c22346b
--- /dev/null
+++ b/react-examples/Offcanvas/StaticBackdrop.tsx
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+
+function Example() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Toggle static offcanvas
+      </Button>
+
+      <Offcanvas show={show} onHide={handleClose} backdrop="static">
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+          I will not close if you click outside of me.
+        </Offcanvas.Body>
+      </Offcanvas>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Overlays/Disabled.tsx b/react-examples/Overlays/Disabled.tsx
new file mode 100644
index 0000000..b4ffe57
--- /dev/null
+++ b/react-examples/Overlays/Disabled.tsx
@@ -0,0 +1,17 @@
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+
+function DisabledExample() {
+  return (
+    <OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Tooltip!</Tooltip>}>
+      <span className="d-inline-block">
+        <Button disabled style={{ pointerEvents: 'none' }}>
+          Disabled button
+        </Button>
+      </span>
+    </OverlayTrigger>
+  );
+}
+
+export default DisabledExample;
diff --git a/react-examples/Overlays/Overlay.tsx b/react-examples/Overlays/Overlay.tsx
new file mode 100644
index 0000000..4de6043
--- /dev/null
+++ b/react-examples/Overlays/Overlay.tsx
@@ -0,0 +1,42 @@
+import { useState, useRef } from 'react';
+import Button from 'react-bootstrap/Button';
+import Overlay from 'react-bootstrap/Overlay';
+
+function Example() {
+  const [show, setShow] = useState(false);
+  const target = useRef(null);
+
+  return (
+    <>
+      <Button variant="danger" ref={target} onClick={() => setShow(!show)}>
+        Click me to see
+      </Button>
+      <Overlay target={target.current} show={show} placement="right">
+        {({
+          placement: _placement,
+          arrowProps: _arrowProps,
+          show: _show,
+          popper: _popper,
+          hasDoneInitialMeasure: _hasDoneInitialMeasure,
+          ...props
+        }) => (
+          <div
+            {...props}
+            style={{
+              position: 'absolute',
+              backgroundColor: 'rgba(255, 100, 100, 0.85)',
+              padding: '2px 10px',
+              color: 'white',
+              borderRadius: 3,
+              ...props.style,
+            }}
+          >
+            Simple tooltip
+          </div>
+        )}
+      </Overlay>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Overlays/PopoverBasic.tsx b/react-examples/Overlays/PopoverBasic.tsx
new file mode 100644
index 0000000..49180a9
--- /dev/null
+++ b/react-examples/Overlays/PopoverBasic.tsx
@@ -0,0 +1,21 @@
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+
+const popover = (
+  <Popover id="popover-basic">
+    <Popover.Header as="h3">Popover right</Popover.Header>
+    <Popover.Body>
+      And here's some <strong>amazing</strong> content. It's very engaging.
+      right?
+    </Popover.Body>
+  </Popover>
+);
+
+const Example = () => (
+  <OverlayTrigger trigger="click" placement="right" overlay={popover}>
+    <Button variant="success">Click me to see</Button>
+  </OverlayTrigger>
+);
+
+render(<Example />);
diff --git a/react-examples/Overlays/PopoverContained.tsx b/react-examples/Overlays/PopoverContained.tsx
new file mode 100644
index 0000000..2bd520a
--- /dev/null
+++ b/react-examples/Overlays/PopoverContained.tsx
@@ -0,0 +1,38 @@
+import { useState, useRef } from 'react';
+import Button from 'react-bootstrap/Button';
+import Overlay from 'react-bootstrap/Overlay';
+import Popover from 'react-bootstrap/Popover';
+
+function Example() {
+  const [show, setShow] = useState(false);
+  const [target, setTarget] = useState(null);
+  const ref = useRef(null);
+
+  const handleClick = (event) => {
+    setShow(!show);
+    setTarget(event.target);
+  };
+
+  return (
+    <div ref={ref}>
+      <Button onClick={handleClick}>Holy guacamole!</Button>
+
+      <Overlay
+        show={show}
+        target={target}
+        placement="bottom"
+        container={ref}
+        containerPadding={20}
+      >
+        <Popover id="popover-contained">
+          <Popover.Header as="h3">Popover bottom</Popover.Header>
+          <Popover.Body>
+            <strong>Holy guacamole!</strong> Check this info.
+          </Popover.Body>
+        </Popover>
+      </Overlay>
+    </div>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Overlays/PopoverPositioned.tsx b/react-examples/Overlays/PopoverPositioned.tsx
new file mode 100644
index 0000000..701f8f1
--- /dev/null
+++ b/react-examples/Overlays/PopoverPositioned.tsx
@@ -0,0 +1,29 @@
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+
+function PopoverPositionedExample() {
+  return (
+    <>
+      {['top', 'right', 'bottom', 'left'].map((placement) => (
+        <OverlayTrigger
+          trigger="click"
+          key={placement}
+          placement={placement}
+          overlay={
+            <Popover id={`popover-positioned-${placement}`}>
+              <Popover.Header as="h3">{`Popover ${placement}`}</Popover.Header>
+              <Popover.Body>
+                <strong>Holy guacamole!</strong> Check this info.
+              </Popover.Body>
+            </Popover>
+          }
+        >
+          <Button variant="secondary">Popover on {placement}</Button>
+        </OverlayTrigger>
+      ))}
+    </>
+  );
+}
+
+export default PopoverPositionedExample;
diff --git a/react-examples/Overlays/PopoverPositionedScrolling.tsx b/react-examples/Overlays/PopoverPositionedScrolling.tsx
new file mode 100644
index 0000000..fc626c7
--- /dev/null
+++ b/react-examples/Overlays/PopoverPositionedScrolling.tsx
@@ -0,0 +1,61 @@
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+
+function PopoverPositionedScrollingExample() {
+  const popover = (position) => (
+    <Popover id={`popover-positioned-scrolling-${position}`}>
+      <Popover.Header as="h3">{`Popover ${position}`}</Popover.Header>
+      <Popover.Body>
+        <strong>Holy guacamole!</strong> Check this info.
+      </Popover.Body>
+    </Popover>
+  );
+
+  const popoverLeft = <popover position="left" />;
+
+  const popoverTop = <popover position="top" />;
+
+  const popoverBottom = <popover position="bottom" />;
+
+  const popoverRight = <popover position="right" />;
+
+  return (
+    <div style={{ padding: '100px 0' }}>
+      <OverlayTrigger
+        container={this}
+        trigger="click"
+        placement="left"
+        overlay={popoverLeft}
+      >
+        <Button>Holy guacamole!</Button>
+      </OverlayTrigger>{' '}
+      <OverlayTrigger
+        container={this}
+        trigger="click"
+        placement="top"
+        overlay={popoverTop}
+      >
+        <Button>Holy guacamole!</Button>
+      </OverlayTrigger>{' '}
+      <OverlayTrigger
+        container={this}
+        trigger="click"
+        placement="bottom"
+        overlay={popoverBottom}
+      >
+        <Button>Holy guacamole!</Button>
+      </OverlayTrigger>{' '}
+      <OverlayTrigger
+        container={this}
+        trigger="click"
+        placement="right"
+        overlay={popoverRight}
+      >
+        <Button>Holy guacamole!</Button>
+      </OverlayTrigger>
+    </div>
+  );
+}
+
+export default PopoverPositionedScrollingExample;
diff --git a/react-examples/Overlays/PopoverTriggerBehaviors.tsx b/react-examples/Overlays/PopoverTriggerBehaviors.tsx
new file mode 100644
index 0000000..136a4b7
--- /dev/null
+++ b/react-examples/Overlays/PopoverTriggerBehaviors.tsx
@@ -0,0 +1,50 @@
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+
+function PopoverTriggerBehaviorsExample() {
+  const popover = (triggerBehavior) => (
+    <Popover id={`popover-trigger-${triggerBehavior}`}>
+      <Popover.Header as="h3">Popover bottom</Popover.Header>
+      <Popover.Body>
+        <strong>Holy guacamole!</strong> Check this info.
+      </Popover.Body>
+    </Popover>
+  );
+
+  const popoverClick = <popover triggerBehavior="click" />;
+
+  const popoverHoverFocus = <popover triggerBehavior="hover-focus" />;
+
+  const popoverFocus = <popover triggerBehavior="focus" />;
+
+  const popoverClickRootClose = <popover triggerBehavior="click-root-close" />;
+
+  return (
+    <>
+      <OverlayTrigger trigger="click" placement="bottom" overlay={popoverClick}>
+        <Button>Click</Button>
+      </OverlayTrigger>{' '}
+      <OverlayTrigger
+        trigger={['hover', 'focus']}
+        placement="bottom"
+        overlay={popoverHoverFocus}
+      >
+        <Button>Hover + Focus</Button>
+      </OverlayTrigger>{' '}
+      <OverlayTrigger trigger="focus" placement="bottom" overlay={popoverFocus}>
+        <Button>Focus</Button>
+      </OverlayTrigger>{' '}
+      <OverlayTrigger
+        trigger="click"
+        rootClose
+        placement="bottom"
+        overlay={popoverClickRootClose}
+      >
+        <Button>Click w/rootClose</Button>
+      </OverlayTrigger>
+    </>
+  );
+}
+
+export default PopoverTriggerBehaviorsExample;
diff --git a/react-examples/Overlays/ScheduleUpdate.tsx b/react-examples/Overlays/ScheduleUpdate.tsx
new file mode 100644
index 0000000..abfcc86
--- /dev/null
+++ b/react-examples/Overlays/ScheduleUpdate.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+
+const UpdatingPopover = React.forwardRef(
+  ({ popper, children, show: _, ...props }, ref) => {
+    useEffect(() => {
+      console.log('updating!');
+      popper.scheduleUpdate();
+    }, [children, popper]);
+
+    return (
+      <Popover ref={ref} body {...props}>
+        {children}
+      </Popover>
+    );
+  },
+);
+
+const longContent = `
+  Very long
+  Multiline content
+  that is engaging and what-not
+`;
+const shortContent = 'Short and sweet!';
+
+function Example() {
+  const [content, setContent] = useState(shortContent);
+
+  useEffect(() => {
+    const timerId = setInterval(() => {
+      setContent(content === shortContent ? longContent : shortContent);
+    }, 3000);
+
+    return () => clearInterval(timerId);
+  });
+
+  return (
+    <OverlayTrigger
+      trigger="click"
+      overlay={
+        <UpdatingPopover id="popover-contained">{content}</UpdatingPopover>
+      }
+    >
+      <Button>Holy guacamole!</Button>
+    </OverlayTrigger>
+  );
+}
+
+render(<Example />);
diff --git a/react-examples/Overlays/TooltipInCopy.tsx b/react-examples/Overlays/TooltipInCopy.tsx
new file mode 100644
index 0000000..d79054b
--- /dev/null
+++ b/react-examples/Overlays/TooltipInCopy.tsx
@@ -0,0 +1,37 @@
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+
+function TooltipInCopyExample() {
+  const Link = ({ id, children, title }) => (
+    <OverlayTrigger overlay={<Tooltip id={id}>{title}</Tooltip>}>
+      <a href="#">{children}</a>
+    </OverlayTrigger>
+  );
+
+  return (
+    <p>
+      Tight pants next level keffiyeh{' '}
+      <Link title="Default title" id="t-1">
+        you probably
+      </Link>{' '}
+      haven't heard of them. Farm-to-table seitan, mcsweeney's fixie sustainable
+      quinoa 8-bit american apparel{' '}
+      <Link id="t-2" title="Another one">
+        have a
+      </Link>{' '}
+      terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
+      thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's
+      cleanse vegan chambray. A really ironic artisan{' '}
+      <Link title="Another one here too" id="t-3">
+        whatever keytar
+      </Link>
+      , scenester farm-to-table banksy Austin{' '}
+      <Link title="The last tip!" id="t-4">
+        twitter handle
+      </Link>{' '}
+      freegan cred raw denim single-origin coffee viral.
+    </p>
+  );
+}
+
+export default TooltipInCopyExample;
diff --git a/react-examples/Overlays/TooltipOverlay.tsx b/react-examples/Overlays/TooltipOverlay.tsx
new file mode 100644
index 0000000..94a43db
--- /dev/null
+++ b/react-examples/Overlays/TooltipOverlay.tsx
@@ -0,0 +1,26 @@
+import { useState, useRef } from 'react';
+import Button from 'react-bootstrap/Button';
+import Overlay from 'react-bootstrap/Overlay';
+import Tooltip from 'react-bootstrap/Tooltip';
+
+function Example() {
+  const [show, setShow] = useState(false);
+  const target = useRef(null);
+
+  return (
+    <>
+      <Button ref={target} onClick={() => setShow(!show)}>
+        Click me!
+      </Button>
+      <Overlay target={target.current} show={show} placement="right">
+        {(props) => (
+          <Tooltip id="overlay-example" {...props}>
+            My Tooltip
+          </Tooltip>
+        )}
+      </Overlay>
+    </>
+  );
+}
+
+export default Example;
diff --git a/react-examples/Overlays/TooltipPositioned.tsx b/react-examples/Overlays/TooltipPositioned.tsx
new file mode 100644
index 0000000..c99c35f
--- /dev/null
+++ b/react-examples/Overlays/TooltipPositioned.tsx
@@ -0,0 +1,25 @@
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+
+function TooltipPositionedExample() {
+  return (
+    <>
+      {['top', 'right', 'bottom', 'left'].map((placement) => (
+        <OverlayTrigger
+          key={placement}
+          placement={placement}
+          overlay={
+            <Tooltip id={`tooltip-${placement}`}>
+              Tooltip on <strong>{placement}</strong>.
+            </Tooltip>
+          }
+        >
+          <Button variant="secondary">Tooltip on {placement}</Button>
+        </OverlayTrigger>
+      ))}
+    </>
+  );
+}
+
+export default TooltipPositionedExample;
diff --git a/react-examples/Overlays/Trigger.tsx b/react-examples/Overlays/Trigger.tsx
new file mode 100644
index 0000000..6ae72f5
--- /dev/null
+++ b/react-examples/Overlays/Trigger.tsx
@@ -0,0 +1,23 @@
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+
+function TriggerExample() {
+  const renderTooltip = (props) => (
+    <Tooltip id="button-tooltip" {...props}>
+      Simple tooltip
+    </Tooltip>
+  );
+
+  return (
+    <OverlayTrigger
+      placement="right"
+      delay={{ show: 250, hide: 400 }}
+      overlay={renderTooltip}
+    >
+      <Button variant="success">Hover me to see</Button>
+    </OverlayTrigger>
+  );
+}
+
+export default TriggerExample;
diff --git a/react-examples/Overlays/TriggerRenderProp.tsx b/react-examples/Overlays/TriggerRenderProp.tsx
new file mode 100644
index 0000000..e08e2be
--- /dev/null
+++ b/react-examples/Overlays/TriggerRenderProp.tsx
@@ -0,0 +1,29 @@
+import Button from 'react-bootstrap/Button';
+import Image from 'react-bootstrap/Image';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+
+function TriggerRendererProp() {
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id="button-tooltip-2">Check out this avatar</Tooltip>}
+    >
+      {({ ref, ...triggerHandler }) => (
+        <Button
+          variant="light"
+          {...triggerHandler}
+          className="d-inline-flex align-items-center"
+        >
+          <Image
+            ref={ref}
+            roundedCircle
+            src="holder.js/20x20?text=J&bg=28a745&fg=FFF"
+          />
+          <span className="ms-1">Hover to see</span>
+        </Button>
+      )}
+    </OverlayTrigger>
+  );
+}
+
+export default TriggerRendererProp;
diff --git a/react-examples/Pagination/Advanced.tsx b/react-examples/Pagination/Advanced.tsx
new file mode 100644
index 0000000..aa2823c
--- /dev/null
+++ b/react-examples/Pagination/Advanced.tsx
@@ -0,0 +1,25 @@
+import Pagination from 'react-bootstrap/Pagination';
+
+function AdvancedExample() {
+  return (
+    <Pagination>
+      <Pagination.First />
+      <Pagination.Prev />
+      <Pagination.Item>{1}</Pagination.Item>
+      <Pagination.Ellipsis />
+
+      <Pagination.Item>{10}</Pagination.Item>
+      <Pagination.Item>{11}</Pagination.Item>
+      <Pagination.Item active>{12}</Pagination.Item>
+      <Pagination.Item>{13}</Pagination.Item>
+      <Pagination.Item disabled>{14}</Pagination.Item>
+
+      <Pagination.Ellipsis />
+      <Pagination.Item>{20}</Pagination.Item>
+      <Pagination.Next />
+      <Pagination.Last />
+    </Pagination>
+  );
+}
+
+export default AdvancedExample;
diff --git a/react-examples/Pagination/Basic.tsx b/react-examples/Pagination/Basic.tsx
new file mode 100644
index 0000000..6cdaa6d
--- /dev/null
+++ b/react-examples/Pagination/Basic.tsx
@@ -0,0 +1,25 @@
+import Pagination from 'react-bootstrap/Pagination';
+
+let active = 2;
+let items = [];
+for (let number = 1; number <= 5; number++) {
+  items.push(
+    <Pagination.Item key={number} active={number === active}>
+      {number}
+    </Pagination.Item>,
+  );
+}
+
+const paginationBasic = (
+  <div>
+    <Pagination>{items}</Pagination>
+    <br />
+
+    <Pagination size="lg">{items}</Pagination>
+    <br />
+
+    <Pagination size="sm">{items}</Pagination>
+  </div>
+);
+
+render(paginationBasic);
diff --git a/react-examples/Placeholder/Animation.tsx b/react-examples/Placeholder/Animation.tsx
new file mode 100644
index 0000000..ef8986d
--- /dev/null
+++ b/react-examples/Placeholder/Animation.tsx
@@ -0,0 +1,16 @@
+import Placeholder from 'react-bootstrap/Placeholder';
+
+function AnimationExample() {
+  return (
+    <>
+      <Placeholder as="p" animation="glow">
+        <Placeholder xs={12} />
+      </Placeholder>
+      <Placeholder as="p" animation="wave">
+        <Placeholder xs={12} />
+      </Placeholder>
+    </>
+  );
+}
+
+export default AnimationExample;
diff --git a/react-examples/Placeholder/Card.tsx b/react-examples/Placeholder/Card.tsx
new file mode 100644
index 0000000..09d4fa4
--- /dev/null
+++ b/react-examples/Placeholder/Card.tsx
@@ -0,0 +1,37 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+import Placeholder from 'react-bootstrap/Placeholder';
+
+function CardExample() {
+  return (
+    <div className="d-flex justify-content-around">
+      <Card style={{ width: '18rem' }}>
+        <Card.Img variant="top" src="holder.js/100px180" />
+        <Card.Body>
+          <Card.Title>Card Title</Card.Title>
+          <Card.Text>
+            Some quick example text to build on the card title and make up the
+            bulk of the card's content.
+          </Card.Text>
+          <Button variant="primary">Go somewhere</Button>
+        </Card.Body>
+      </Card>
+
+      <Card style={{ width: '18rem' }}>
+        <Card.Img variant="top" src="holder.js/100px180" />
+        <Card.Body>
+          <Placeholder as={Card.Title} animation="glow">
+            <Placeholder xs={6} />
+          </Placeholder>
+          <Placeholder as={Card.Text} animation="glow">
+            <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={4} />{' '}
+            <Placeholder xs={6} /> <Placeholder xs={8} />
+          </Placeholder>
+          <Placeholder.Button variant="primary" xs={6} />
+        </Card.Body>
+      </Card>
+    </div>
+  );
+}
+
+export default CardExample;
diff --git a/react-examples/Placeholder/Color.tsx b/react-examples/Placeholder/Color.tsx
new file mode 100644
index 0000000..f6ec87d
--- /dev/null
+++ b/react-examples/Placeholder/Color.tsx
@@ -0,0 +1,20 @@
+import Placeholder from 'react-bootstrap/Placeholder';
+
+function ColorExample() {
+  return (
+    <>
+      <Placeholder xs={12} />
+
+      <Placeholder xs={12} bg="primary" />
+      <Placeholder xs={12} bg="secondary" />
+      <Placeholder xs={12} bg="success" />
+      <Placeholder xs={12} bg="danger" />
+      <Placeholder xs={12} bg="warning" />
+      <Placeholder xs={12} bg="info" />
+      <Placeholder xs={12} bg="light" />
+      <Placeholder xs={12} bg="dark" />
+    </>
+  );
+}
+
+export default ColorExample;
diff --git a/react-examples/Placeholder/Example.tsx b/react-examples/Placeholder/Example.tsx
new file mode 100644
index 0000000..513b58d
--- /dev/null
+++ b/react-examples/Placeholder/Example.tsx
@@ -0,0 +1,15 @@
+import Placeholder from 'react-bootstrap/Placeholder';
+
+function BasicExample() {
+  return (
+    <>
+      <p aria-hidden="true">
+        <Placeholder xs={6} />
+      </p>
+
+      <Placeholder.Button xs={4} aria-hidden="true" />
+    </>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Placeholder/Size.tsx b/react-examples/Placeholder/Size.tsx
new file mode 100644
index 0000000..84204e1
--- /dev/null
+++ b/react-examples/Placeholder/Size.tsx
@@ -0,0 +1,14 @@
+import Placeholder from 'react-bootstrap/Placeholder';
+
+function SizeExample() {
+  return (
+    <>
+      <Placeholder xs={12} size="lg" />
+      <Placeholder xs={12} />
+      <Placeholder xs={12} size="sm" />
+      <Placeholder xs={12} size="xs" />
+    </>
+  );
+}
+
+export default SizeExample;
diff --git a/react-examples/Placeholder/Width.tsx b/react-examples/Placeholder/Width.tsx
new file mode 100644
index 0000000..30fff75
--- /dev/null
+++ b/react-examples/Placeholder/Width.tsx
@@ -0,0 +1,12 @@
+import Placeholder from 'react-bootstrap/Placeholder';
+
+function WidthExample() {
+  return (
+    <>
+      <Placeholder xs={6} />
+      <Placeholder className="w-75" /> <Placeholder style={{ width: '25%' }} />
+    </>
+  );
+}
+
+export default WidthExample;
diff --git a/react-examples/ProgressBar/Animated.tsx b/react-examples/ProgressBar/Animated.tsx
new file mode 100644
index 0000000..adfb35a
--- /dev/null
+++ b/react-examples/ProgressBar/Animated.tsx
@@ -0,0 +1,7 @@
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+function AnimatedExample() {
+  return <ProgressBar animated now={45} />;
+}
+
+export default AnimatedExample;
diff --git a/react-examples/ProgressBar/Basic.tsx b/react-examples/ProgressBar/Basic.tsx
new file mode 100644
index 0000000..1016cb9
--- /dev/null
+++ b/react-examples/ProgressBar/Basic.tsx
@@ -0,0 +1,7 @@
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+function BasicExample() {
+  return <ProgressBar now={60} />;
+}
+
+export default BasicExample;
diff --git a/react-examples/ProgressBar/Contextual.tsx b/react-examples/ProgressBar/Contextual.tsx
new file mode 100644
index 0000000..1c57642
--- /dev/null
+++ b/react-examples/ProgressBar/Contextual.tsx
@@ -0,0 +1,14 @@
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+function ContextualExample() {
+  return (
+    <div>
+      <ProgressBar variant="success" now={40} />
+      <ProgressBar variant="info" now={20} />
+      <ProgressBar variant="warning" now={60} />
+      <ProgressBar variant="danger" now={80} />
+    </div>
+  );
+}
+
+export default ContextualExample;
diff --git a/react-examples/ProgressBar/ScreenreaderLabel.tsx b/react-examples/ProgressBar/ScreenreaderLabel.tsx
new file mode 100644
index 0000000..4517873
--- /dev/null
+++ b/react-examples/ProgressBar/ScreenreaderLabel.tsx
@@ -0,0 +1,8 @@
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+function ScreenreaderLabelExample() {
+  const now = 60;
+  return <ProgressBar now={now} label={`${now}%`} visuallyHidden />;
+}
+
+export default ScreenreaderLabelExample;
diff --git a/react-examples/ProgressBar/Stacked.tsx b/react-examples/ProgressBar/Stacked.tsx
new file mode 100644
index 0000000..4774771
--- /dev/null
+++ b/react-examples/ProgressBar/Stacked.tsx
@@ -0,0 +1,13 @@
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+function StackedExample() {
+  return (
+    <ProgressBar>
+      <ProgressBar striped variant="success" now={35} key={1} />
+      <ProgressBar variant="warning" now={20} key={2} />
+      <ProgressBar striped variant="danger" now={10} key={3} />
+    </ProgressBar>
+  );
+}
+
+export default StackedExample;
diff --git a/react-examples/ProgressBar/Striped.tsx b/react-examples/ProgressBar/Striped.tsx
new file mode 100644
index 0000000..c563128
--- /dev/null
+++ b/react-examples/ProgressBar/Striped.tsx
@@ -0,0 +1,14 @@
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+function StripedExample() {
+  return (
+    <div>
+      <ProgressBar striped variant="success" now={40} />
+      <ProgressBar striped variant="info" now={20} />
+      <ProgressBar striped variant="warning" now={60} />
+      <ProgressBar striped variant="danger" now={80} />
+    </div>
+  );
+}
+
+export default StripedExample;
diff --git a/react-examples/ProgressBar/WithLabel.tsx b/react-examples/ProgressBar/WithLabel.tsx
new file mode 100644
index 0000000..f4d0a0b
--- /dev/null
+++ b/react-examples/ProgressBar/WithLabel.tsx
@@ -0,0 +1,8 @@
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+function WithLabelExample() {
+  const now = 60;
+  return <ProgressBar now={now} label={`${now}%`} />;
+}
+
+export default WithLabelExample;
diff --git a/react-examples/Ratio/Custom.tsx b/react-examples/Ratio/Custom.tsx
new file mode 100644
index 0000000..e6ae652
--- /dev/null
+++ b/react-examples/Ratio/Custom.tsx
@@ -0,0 +1,16 @@
+import Ratio from 'react-bootstrap/Ratio';
+
+function CustomExample() {
+  return (
+    <>
+      <Ratio aspectRatio={1 / 2}>
+        <div>2x1</div>
+      </Ratio>
+      <Ratio aspectRatio={50}>
+        <div>2x1</div>
+      </Ratio>
+    </>
+  );
+}
+
+export default CustomExample;
diff --git a/react-examples/Ratio/Default.tsx b/react-examples/Ratio/Default.tsx
new file mode 100644
index 0000000..2144379
--- /dev/null
+++ b/react-examples/Ratio/Default.tsx
@@ -0,0 +1,15 @@
+import Ratio from 'react-bootstrap/Ratio';
+
+function DefaultExample() {
+  return (
+    <>
+      {['1x1', '4x3', '16x9', '21x9'].map((ratio) => (
+        <Ratio key={ratio} aspectRatio={ratio}>
+          <div>{ratio}</div>
+        </Ratio>
+      ))}
+    </>
+  );
+}
+
+export default DefaultExample;
diff --git a/react-examples/Ratio/Example.tsx b/react-examples/Ratio/Example.tsx
new file mode 100644
index 0000000..a3f5f62
--- /dev/null
+++ b/react-examples/Ratio/Example.tsx
@@ -0,0 +1,13 @@
+import Ratio from 'react-bootstrap/Ratio';
+
+function BasicExample() {
+  return (
+    <div style={{ width: 660, height: 'auto' }}>
+      <Ratio aspectRatio="16x9">
+        <embed type="image/svg+xml" src="/img/TheresaKnott_castle.svg" />
+      </Ratio>
+    </div>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Spinner/Basic.tsx b/react-examples/Spinner/Basic.tsx
new file mode 100644
index 0000000..78180c4
--- /dev/null
+++ b/react-examples/Spinner/Basic.tsx
@@ -0,0 +1,11 @@
+import Spinner from 'react-bootstrap/Spinner';
+
+function BasicExample() {
+  return (
+    <Spinner animation="border" role="status">
+      <span className="visually-hidden">Loading...</span>
+    </Spinner>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Spinner/Border.tsx b/react-examples/Spinner/Border.tsx
new file mode 100644
index 0000000..ce94899
--- /dev/null
+++ b/react-examples/Spinner/Border.tsx
@@ -0,0 +1,7 @@
+import Spinner from 'react-bootstrap/Spinner';
+
+function BorderExample() {
+  return <Spinner animation="border" />;
+}
+
+export default BorderExample;
diff --git a/react-examples/Spinner/Buttons.tsx b/react-examples/Spinner/Buttons.tsx
new file mode 100644
index 0000000..304c783
--- /dev/null
+++ b/react-examples/Spinner/Buttons.tsx
@@ -0,0 +1,31 @@
+import Button from 'react-bootstrap/Button';
+import Spinner from 'react-bootstrap/Spinner';
+
+function ButtonExample() {
+  return (
+    <>
+      <Button variant="primary" disabled>
+        <Spinner
+          as="span"
+          animation="border"
+          size="sm"
+          role="status"
+          aria-hidden="true"
+        />
+        <span className="visually-hidden">Loading...</span>
+      </Button>{' '}
+      <Button variant="primary" disabled>
+        <Spinner
+          as="span"
+          animation="grow"
+          size="sm"
+          role="status"
+          aria-hidden="true"
+        />
+        Loading...
+      </Button>
+    </>
+  );
+}
+
+export default ButtonExample;
diff --git a/react-examples/Spinner/Grow.tsx b/react-examples/Spinner/Grow.tsx
new file mode 100644
index 0000000..58ced82
--- /dev/null
+++ b/react-examples/Spinner/Grow.tsx
@@ -0,0 +1,7 @@
+import Spinner from 'react-bootstrap/Spinner';
+
+function GrowExample() {
+  return <Spinner animation="grow" />;
+}
+
+export default GrowExample;
diff --git a/react-examples/Spinner/Sizes.tsx b/react-examples/Spinner/Sizes.tsx
new file mode 100644
index 0000000..7b60df8
--- /dev/null
+++ b/react-examples/Spinner/Sizes.tsx
@@ -0,0 +1,14 @@
+import Spinner from 'react-bootstrap/Spinner';
+
+function SizesExample() {
+  return (
+    <>
+      <Spinner animation="border" size="sm" />
+      <Spinner animation="border" />
+      <Spinner animation="grow" size="sm" />
+      <Spinner animation="grow" />
+    </>
+  );
+}
+
+export default SizesExample;
diff --git a/react-examples/Spinner/Variants.tsx b/react-examples/Spinner/Variants.tsx
new file mode 100644
index 0000000..eb220dc
--- /dev/null
+++ b/react-examples/Spinner/Variants.tsx
@@ -0,0 +1,26 @@
+import Spinner from 'react-bootstrap/Spinner';
+
+function VariantsExample() {
+  return (
+    <>
+      <Spinner animation="border" variant="primary" />
+      <Spinner animation="border" variant="secondary" />
+      <Spinner animation="border" variant="success" />
+      <Spinner animation="border" variant="danger" />
+      <Spinner animation="border" variant="warning" />
+      <Spinner animation="border" variant="info" />
+      <Spinner animation="border" variant="light" />
+      <Spinner animation="border" variant="dark" />
+      <Spinner animation="grow" variant="primary" />
+      <Spinner animation="grow" variant="secondary" />
+      <Spinner animation="grow" variant="success" />
+      <Spinner animation="grow" variant="danger" />
+      <Spinner animation="grow" variant="warning" />
+      <Spinner animation="grow" variant="info" />
+      <Spinner animation="grow" variant="light" />
+      <Spinner animation="grow" variant="dark" />
+    </>
+  );
+}
+
+export default VariantsExample;
diff --git a/react-examples/Stack/Buttons.tsx b/react-examples/Stack/Buttons.tsx
new file mode 100644
index 0000000..fc6599f
--- /dev/null
+++ b/react-examples/Stack/Buttons.tsx
@@ -0,0 +1,13 @@
+import Button from 'react-bootstrap/Button';
+import Stack from 'react-bootstrap/Stack';
+
+function ButtonsExample() {
+  return (
+    <Stack gap={2} className="col-md-5 mx-auto">
+      <Button variant="secondary">Save changes</Button>
+      <Button variant="outline-secondary">Cancel</Button>
+    </Stack>
+  );
+}
+
+export default ButtonsExample;
diff --git a/react-examples/Stack/Form.tsx b/react-examples/Stack/Form.tsx
new file mode 100644
index 0000000..9b6342b
--- /dev/null
+++ b/react-examples/Stack/Form.tsx
@@ -0,0 +1,16 @@
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import Stack from 'react-bootstrap/Stack';
+
+function FormExample() {
+  return (
+    <Stack direction="horizontal" gap={3}>
+      <Form.Control className="me-auto" placeholder="Add your item here..." />
+      <Button variant="secondary">Submit</Button>
+      <div className="vr" />
+      <Button variant="outline-danger">Reset</Button>
+    </Stack>
+  );
+}
+
+export default FormExample;
diff --git a/react-examples/Stack/Horizontal.tsx b/react-examples/Stack/Horizontal.tsx
new file mode 100644
index 0000000..0cd61e5
--- /dev/null
+++ b/react-examples/Stack/Horizontal.tsx
@@ -0,0 +1,13 @@
+import Stack from 'react-bootstrap/Stack';
+
+function HorizontalExample() {
+  return (
+    <Stack direction="horizontal" gap={3}>
+      <div className="p-2">First item</div>
+      <div className="p-2">Second item</div>
+      <div className="p-2">Third item</div>
+    </Stack>
+  );
+}
+
+export default HorizontalExample;
diff --git a/react-examples/Stack/HorizontalMarginStart.tsx b/react-examples/Stack/HorizontalMarginStart.tsx
new file mode 100644
index 0000000..2122c0f
--- /dev/null
+++ b/react-examples/Stack/HorizontalMarginStart.tsx
@@ -0,0 +1,13 @@
+import Stack from 'react-bootstrap/Stack';
+
+function HorizontalMarginStartExample() {
+  return (
+    <Stack direction="horizontal" gap={3}>
+      <div className="p-2">First item</div>
+      <div className="p-2 ms-auto">Second item</div>
+      <div className="p-2">Third item</div>
+    </Stack>
+  );
+}
+
+export default HorizontalMarginStartExample;
diff --git a/react-examples/Stack/HorizontalVerticalRules.tsx b/react-examples/Stack/HorizontalVerticalRules.tsx
new file mode 100644
index 0000000..98a3ab4
--- /dev/null
+++ b/react-examples/Stack/HorizontalVerticalRules.tsx
@@ -0,0 +1,14 @@
+import Stack from 'react-bootstrap/Stack';
+
+function HorizontalVerticalRulesExample() {
+  return (
+    <Stack direction="horizontal" gap={3}>
+      <div className="p-2">First item</div>
+      <div className="p-2 ms-auto">Second item</div>
+      <div className="vr" />
+      <div className="p-2">Third item</div>
+    </Stack>
+  );
+}
+
+export default HorizontalVerticalRulesExample;
diff --git a/react-examples/Stack/Vertical.tsx b/react-examples/Stack/Vertical.tsx
new file mode 100644
index 0000000..f928446
--- /dev/null
+++ b/react-examples/Stack/Vertical.tsx
@@ -0,0 +1,13 @@
+import Stack from 'react-bootstrap/Stack';
+
+function VerticalExample() {
+  return (
+    <Stack gap={3}>
+      <div className="p-2">First item</div>
+      <div className="p-2">Second item</div>
+      <div className="p-2">Third item</div>
+    </Stack>
+  );
+}
+
+export default VerticalExample;
diff --git a/react-examples/Table/Basic.tsx b/react-examples/Table/Basic.tsx
new file mode 100644
index 0000000..cbf04a9
--- /dev/null
+++ b/react-examples/Table/Basic.tsx
@@ -0,0 +1,37 @@
+import Table from 'react-bootstrap/Table';
+
+function BasicExample() {
+  return (
+    <Table striped bordered hover>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td colSpan={2}>Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Table/Dark.tsx b/react-examples/Table/Dark.tsx
new file mode 100644
index 0000000..b2bfa88
--- /dev/null
+++ b/react-examples/Table/Dark.tsx
@@ -0,0 +1,37 @@
+import Table from 'react-bootstrap/Table';
+
+function DarkExample() {
+  return (
+    <Table striped bordered hover variant="dark">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td colSpan={2}>Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
+
+export default DarkExample;
diff --git a/react-examples/Table/Responsive.tsx b/react-examples/Table/Responsive.tsx
new file mode 100644
index 0000000..9d6f7ff
--- /dev/null
+++ b/react-examples/Table/Responsive.tsx
@@ -0,0 +1,38 @@
+import Table from 'react-bootstrap/Table';
+
+function ResponsiveExample() {
+  return (
+    <Table responsive>
+      <thead>
+        <tr>
+          <th>#</th>
+          {Array.from({ length: 12 }).map((_, index) => (
+            <th key={index}>Table heading</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          {Array.from({ length: 12 }).map((_, index) => (
+            <td key={index}>Table cell {index}</td>
+          ))}
+        </tr>
+        <tr>
+          <td>2</td>
+          {Array.from({ length: 12 }).map((_, index) => (
+            <td key={index}>Table cell {index}</td>
+          ))}
+        </tr>
+        <tr>
+          <td>3</td>
+          {Array.from({ length: 12 }).map((_, index) => (
+            <td key={index}>Table cell {index}</td>
+          ))}
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
+
+export default ResponsiveExample;
diff --git a/react-examples/Table/ResponsiveBreakpoints.tsx b/react-examples/Table/ResponsiveBreakpoints.tsx
new file mode 100644
index 0000000..c7eaa06
--- /dev/null
+++ b/react-examples/Table/ResponsiveBreakpoints.tsx
@@ -0,0 +1,178 @@
+import Table from 'react-bootstrap/Table';
+
+function ResponsiveBreakpointsExample() {
+  return (
+    <div>
+      <Table responsive="sm">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+        </tbody>
+      </Table>
+      <Table responsive="md">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+        </tbody>
+      </Table>
+      <Table responsive="lg">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+        </tbody>
+      </Table>
+      <Table responsive="xl">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  );
+}
+
+export default ResponsiveBreakpointsExample;
diff --git a/react-examples/Table/Small.tsx b/react-examples/Table/Small.tsx
new file mode 100644
index 0000000..518d96d
--- /dev/null
+++ b/react-examples/Table/Small.tsx
@@ -0,0 +1,37 @@
+import Table from 'react-bootstrap/Table';
+
+function SmallExample() {
+  return (
+    <Table striped bordered hover size="sm">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td colSpan={2}>Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
+
+export default SmallExample;
diff --git a/react-examples/Table/StripedColumns.tsx b/react-examples/Table/StripedColumns.tsx
new file mode 100644
index 0000000..128207f
--- /dev/null
+++ b/react-examples/Table/StripedColumns.tsx
@@ -0,0 +1,37 @@
+import Table from 'react-bootstrap/Table';
+
+function StripedColumnsExample() {
+  return (
+    <Table striped="columns">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td colSpan={2}>Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
+
+export default StripedColumnsExample;
diff --git a/react-examples/Table/StripedRow.tsx b/react-examples/Table/StripedRow.tsx
new file mode 100644
index 0000000..d1212d1
--- /dev/null
+++ b/react-examples/Table/StripedRow.tsx
@@ -0,0 +1,37 @@
+import Table from 'react-bootstrap/Table';
+
+function StripedRowExample() {
+  return (
+    <Table striped>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td colSpan={2}>Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
+
+export default StripedRowExample;
diff --git a/react-examples/Tabs/Controlled.tsx b/react-examples/Tabs/Controlled.tsx
new file mode 100644
index 0000000..8be6104
--- /dev/null
+++ b/react-examples/Tabs/Controlled.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
+
+function ControlledTabsExample() {
+  const [key, setKey] = useState('home');
+
+  return (
+    <Tabs
+      id="controlled-tab-example"
+      activeKey={key}
+      onSelect={(k) => setKey(k)}
+      className="mb-3"
+    >
+      <Tab eventKey="home" title="Home">
+        Tab content for Home
+      </Tab>
+      <Tab eventKey="profile" title="Profile">
+        Tab content for Profile
+      </Tab>
+      <Tab eventKey="contact" title="Contact" disabled>
+        Tab content for Contact
+      </Tab>
+    </Tabs>
+  );
+}
+
+export default ControlledTabsExample;
diff --git a/react-examples/Tabs/Fill.tsx b/react-examples/Tabs/Fill.tsx
new file mode 100644
index 0000000..8628f18
--- /dev/null
+++ b/react-examples/Tabs/Fill.tsx
@@ -0,0 +1,28 @@
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
+
+function FillExample() {
+  return (
+    <Tabs
+      defaultActiveKey="profile"
+      id="fill-tab-example"
+      className="mb-3"
+      fill
+    >
+      <Tab eventKey="home" title="Home">
+        Tab content for Home
+      </Tab>
+      <Tab eventKey="profile" title="Profile">
+        Tab content for Profile
+      </Tab>
+      <Tab eventKey="longer-tab" title="Loooonger Tab">
+        Tab content for Loooonger Tab
+      </Tab>
+      <Tab eventKey="contact" title="Contact" disabled>
+        Tab content for Contact
+      </Tab>
+    </Tabs>
+  );
+}
+
+export default FillExample;
diff --git a/react-examples/Tabs/Justified.tsx b/react-examples/Tabs/Justified.tsx
new file mode 100644
index 0000000..bd30bbb
--- /dev/null
+++ b/react-examples/Tabs/Justified.tsx
@@ -0,0 +1,28 @@
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
+
+function JustifiedExample() {
+  return (
+    <Tabs
+      defaultActiveKey="profile"
+      id="justify-tab-example"
+      className="mb-3"
+      justify
+    >
+      <Tab eventKey="home" title="Home">
+        Tab content for Home
+      </Tab>
+      <Tab eventKey="profile" title="Profile">
+        Tab content for Profile
+      </Tab>
+      <Tab eventKey="longer-tab" title="Loooonger Tab">
+        Tab content for Loooonger Tab
+      </Tab>
+      <Tab eventKey="contact" title="Contact" disabled>
+        Tab content for Contact
+      </Tab>
+    </Tabs>
+  );
+}
+
+export default JustifiedExample;
diff --git a/react-examples/Tabs/LeftTabs.tsx b/react-examples/Tabs/LeftTabs.tsx
new file mode 100644
index 0000000..ac67177
--- /dev/null
+++ b/react-examples/Tabs/LeftTabs.tsx
@@ -0,0 +1,31 @@
+import Col from 'react-bootstrap/Col';
+import Nav from 'react-bootstrap/Nav';
+import Row from 'react-bootstrap/Row';
+import Tab from 'react-bootstrap/Tab';
+
+function LeftTabsExample() {
+  return (
+    <Tab.Container id="left-tabs-example" defaultActiveKey="first">
+      <Row>
+        <Col sm={3}>
+          <Nav variant="pills" className="flex-column">
+            <Nav.Item>
+              <Nav.Link eventKey="first">Tab 1</Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+              <Nav.Link eventKey="second">Tab 2</Nav.Link>
+            </Nav.Item>
+          </Nav>
+        </Col>
+        <Col sm={9}>
+          <Tab.Content>
+            <Tab.Pane eventKey="first">First tab content</Tab.Pane>
+            <Tab.Pane eventKey="second">Second tab content</Tab.Pane>
+          </Tab.Content>
+        </Col>
+      </Row>
+    </Tab.Container>
+  );
+}
+
+export default LeftTabsExample;
diff --git a/react-examples/Tabs/NoAnimation.tsx b/react-examples/Tabs/NoAnimation.tsx
new file mode 100644
index 0000000..1106674
--- /dev/null
+++ b/react-examples/Tabs/NoAnimation.tsx
@@ -0,0 +1,25 @@
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
+
+function NoAnimationExample() {
+  return (
+    <Tabs
+      defaultActiveKey="home"
+      transition={false}
+      id="noanim-tab-example"
+      className="mb-3"
+    >
+      <Tab eventKey="home" title="Home">
+        Tab content for Home
+      </Tab>
+      <Tab eventKey="profile" title="Profile">
+        Tab content for Profile
+      </Tab>
+      <Tab eventKey="contact" title="Contact" disabled>
+        Tab content for Contact
+      </Tab>
+    </Tabs>
+  );
+}
+
+export default NoAnimationExample;
diff --git a/react-examples/Tabs/Uncontrolled.tsx b/react-examples/Tabs/Uncontrolled.tsx
new file mode 100644
index 0000000..d0ad4b6
--- /dev/null
+++ b/react-examples/Tabs/Uncontrolled.tsx
@@ -0,0 +1,24 @@
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
+
+function UncontrolledExample() {
+  return (
+    <Tabs
+      defaultActiveKey="profile"
+      id="uncontrolled-tab-example"
+      className="mb-3"
+    >
+      <Tab eventKey="home" title="Home">
+        Tab content for Home
+      </Tab>
+      <Tab eventKey="profile" title="Profile">
+        Tab content for Profile
+      </Tab>
+      <Tab eventKey="contact" title="Contact" disabled>
+        Tab content for Contact
+      </Tab>
+    </Tabs>
+  );
+}
+
+export default UncontrolledExample;
diff --git a/react-examples/Theming/Prefixes.tsx b/react-examples/Theming/Prefixes.tsx
new file mode 100644
index 0000000..bcc54cd
--- /dev/null
+++ b/react-examples/Theming/Prefixes.tsx
@@ -0,0 +1,18 @@
+import ThemeProvider from 'react-bootstrap/ThemeProvider';
+import Button from 'react-bootstrap/Button';
+
+function PrefixesExample() {
+  return (
+    <>
+      {/* Hint: inspect the markup to see how the classes differ */}
+      <ThemeProvider prefixes={{ btn: 'my-btn' }}>
+        <Button variant="primary">My Button</Button>
+      </ThemeProvider>
+      <Button bsPrefix="super-btn" variant="primary">
+        Super button
+      </Button>
+    </>
+  );
+}
+
+export default PrefixesExample;
diff --git a/react-examples/Theming/Variants.tsx b/react-examples/Theming/Variants.tsx
new file mode 100644
index 0000000..fee68e3
--- /dev/null
+++ b/react-examples/Theming/Variants.tsx
@@ -0,0 +1,27 @@
+import Button from 'react-bootstrap/Button';
+
+function VariantsExample() {
+  return (
+    <>
+      <style type="text/css">
+        {`
+    .btn-flat {
+      background-color: purple;
+      color: white;
+    }
+
+    .btn-xxl {
+      padding: 1rem 1.5rem;
+      font-size: 1.5rem;
+    }
+    `}
+      </style>
+
+      <Button variant="flat" size="xxl">
+        flat button
+      </Button>
+    </>
+  );
+}
+
+export default VariantsExample;
diff --git a/react-examples/Toast/Autohide.tsx b/react-examples/Toast/Autohide.tsx
new file mode 100644
index 0000000..342a4a6
--- /dev/null
+++ b/react-examples/Toast/Autohide.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import Toast from 'react-bootstrap/Toast';
+
+function AutohideExample() {
+  const [show, setShow] = useState(false);
+
+  return (
+    <Row>
+      <Col xs={6}>
+        <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
+          <Toast.Header>
+            <img
+              src="holder.js/20x20?text=%20"
+              className="rounded me-2"
+              alt=""
+            />
+            <strong className="me-auto">Bootstrap</strong>
+            <small>11 mins ago</small>
+          </Toast.Header>
+          <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
+        </Toast>
+      </Col>
+      <Col xs={6}>
+        <Button onClick={() => setShow(true)}>Show Toast</Button>
+      </Col>
+    </Row>
+  );
+}
+
+export default AutohideExample;
diff --git a/react-examples/Toast/Basic.tsx b/react-examples/Toast/Basic.tsx
new file mode 100644
index 0000000..678219f
--- /dev/null
+++ b/react-examples/Toast/Basic.tsx
@@ -0,0 +1,16 @@
+import Toast from 'react-bootstrap/Toast';
+
+function BasicExample() {
+  return (
+    <Toast>
+      <Toast.Header>
+        <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />
+        <strong className="me-auto">Bootstrap</strong>
+        <small>11 mins ago</small>
+      </Toast.Header>
+      <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
+    </Toast>
+  );
+}
+
+export default BasicExample;
diff --git a/react-examples/Toast/Contextual.tsx b/react-examples/Toast/Contextual.tsx
new file mode 100644
index 0000000..74b176f
--- /dev/null
+++ b/react-examples/Toast/Contextual.tsx
@@ -0,0 +1,39 @@
+import Toast from 'react-bootstrap/Toast';
+
+function ContextualExample() {
+  return (
+    <>
+      {[
+        'Primary',
+        'Secondary',
+        'Success',
+        'Danger',
+        'Warning',
+        'Info',
+        'Light',
+        'Dark',
+      ].map((variant, idx) => (
+        <Toast
+          className="d-inline-block m-1"
+          bg={variant.toLowerCase()}
+          key={idx}
+        >
+          <Toast.Header>
+            <img
+              src="holder.js/20x20?text=%20"
+              className="rounded me-2"
+              alt=""
+            />
+            <strong className="me-auto">Bootstrap</strong>
+            <small>11 mins ago</small>
+          </Toast.Header>
+          <Toast.Body className={variant === 'Dark' && 'text-white'}>
+            Hello, world! This is a toast message.
+          </Toast.Body>
+        </Toast>
+      ))}
+    </>
+  );
+}
+
+export default ContextualExample;
diff --git a/react-examples/Toast/Dismissible.tsx b/react-examples/Toast/Dismissible.tsx
new file mode 100644
index 0000000..7e53054
--- /dev/null
+++ b/react-examples/Toast/Dismissible.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import Toast from 'react-bootstrap/Toast';
+
+function DismissibleExample() {
+  const [showA, setShowA] = useState(true);
+  const [showB, setShowB] = useState(true);
+
+  const toggleShowA = () => setShowA(!showA);
+  const toggleShowB = () => setShowB(!showB);
+
+  return (
+    <Row>
+      <Col md={6} className="mb-2">
+        <Button onClick={toggleShowA} className="mb-2">
+          Toggle Toast <strong>with</strong> Animation
+        </Button>
+        <Toast show={showA} onClose={toggleShowA}>
+          <Toast.Header>
+            <img
+              src="holder.js/20x20?text=%20"
+              className="rounded me-2"
+              alt=""
+            />
+            <strong className="me-auto">Bootstrap</strong>
+            <small>11 mins ago</small>
+          </Toast.Header>
+          <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
+        </Toast>
+      </Col>
+      <Col md={6} className="mb-2">
+        <Button onClick={toggleShowB} className="mb-2">
+          Toggle Toast <strong>without</strong> Animation
+        </Button>
+        <Toast onClose={toggleShowB} show={showB} animation={false}>
+          <Toast.Header>
+            <img
+              src="holder.js/20x20?text=%20"
+              className="rounded me-2"
+              alt=""
+            />
+            <strong className="me-auto">Bootstrap</strong>
+            <small>11 mins ago</small>
+          </Toast.Header>
+          <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
+        </Toast>
+      </Col>
+    </Row>
+  );
+}
+
+export default DismissibleExample;
diff --git a/react-examples/Toast/Placement.tsx b/react-examples/Toast/Placement.tsx
new file mode 100644
index 0000000..0cc59b6
--- /dev/null
+++ b/react-examples/Toast/Placement.tsx
@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import Form from 'react-bootstrap/Form';
+import Toast from 'react-bootstrap/Toast';
+import ToastContainer from 'react-bootstrap/ToastContainer';
+
+function PlacementExample() {
+  const [position, setPosition] = useState('top-start');
+
+  return (
+    <>
+      <div className="mb-3">
+        <label htmlFor="selectToastPlacement">Toast position</label>
+        <Form.Select
+          id="selectToastPlacement"
+          className="mt-2"
+          onChange={(e) => setPosition(e.currentTarget.value)}
+        >
+          {[
+            'top-start',
+            'top-center',
+            'top-end',
+            'middle-start',
+            'middle-center',
+            'middle-end',
+            'bottom-start',
+            'bottom-center',
+            'bottom-end',
+          ].map((p) => (
+            <option key={p} value={p}>
+              {p}
+            </option>
+          ))}
+        </Form.Select>
+      </div>
+
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        className="bg-dark position-relative"
+        style={{ minHeight: '240px' }}
+      >
+        <ToastContainer
+          className="p-3"
+          position={position}
+          style={{ zIndex: 1 }}
+        >
+          <Toast>
+            <Toast.Header closeButton={false}>
+              <img
+                src="holder.js/20x20?text=%20"
+                className="rounded me-2"
+                alt=""
+              />
+              <strong className="me-auto">Bootstrap</strong>
+              <small>11 mins ago</small>
+            </Toast.Header>
+            <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
+          </Toast>
+        </ToastContainer>
+      </div>
+    </>
+  );
+}
+
+export default PlacementExample;
diff --git a/react-examples/Toast/PlacementMulti.tsx b/react-examples/Toast/PlacementMulti.tsx
new file mode 100644
index 0000000..01b305b
--- /dev/null
+++ b/react-examples/Toast/PlacementMulti.tsx
@@ -0,0 +1,42 @@
+import Toast from 'react-bootstrap/Toast';
+import ToastContainer from 'react-bootstrap/ToastContainer';
+
+function PlacementMultiExample() {
+  return (
+    <div
+      aria-live="polite"
+      aria-atomic="true"
+      className="bg-dark position-relative"
+      style={{ minHeight: '240px' }}
+    >
+      <ToastContainer position="top-end" className="p-3" style={{ zIndex: 1 }}>
+        <Toast>
+          <Toast.Header>
+            <img
+              src="holder.js/20x20?text=%20"
+              className="rounded me-2"
+              alt=""
+            />
+            <strong className="me-auto">Bootstrap</strong>
+            <small className="text-muted">just now</small>
+          </Toast.Header>
+          <Toast.Body>See? Just like this.</Toast.Body>
+        </Toast>
+        <Toast>
+          <Toast.Header>
+            <img
+              src="holder.js/20x20?text=%20"
+              className="rounded me-2"
+              alt=""
+            />
+            <strong className="me-auto">Bootstrap</strong>
+            <small className="text-muted">2 seconds ago</small>
+          </Toast.Header>
+          <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
+        </Toast>
+      </ToastContainer>
+    </div>
+  );
+}
+
+export default PlacementMultiExample;
diff --git a/react-examples/Toast/Stacking.tsx b/react-examples/Toast/Stacking.tsx
new file mode 100644
index 0000000..d99808d
--- /dev/null
+++ b/react-examples/Toast/Stacking.tsx
@@ -0,0 +1,27 @@
+import Toast from 'react-bootstrap/Toast';
+import ToastContainer from 'react-bootstrap/ToastContainer';
+
+function StackingExample() {
+  return (
+    <ToastContainer className="position-static">
+      <Toast>
+        <Toast.Header>
+          <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />
+          <strong className="me-auto">Bootstrap</strong>
+          <small className="text-muted">just now</small>
+        </Toast.Header>
+        <Toast.Body>See? Just like this.</Toast.Body>
+      </Toast>
+      <Toast>
+        <Toast.Header>
+          <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />
+          <strong className="me-auto">Bootstrap</strong>
+          <small className="text-muted">2 seconds ago</small>
+        </Toast.Header>
+        <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
+      </Toast>
+    </ToastContainer>
+  );
+}
+
+export default StackingExample;
diff --git a/react/AbstractModalHeader.tsx b/react/AbstractModalHeader.tsx
new file mode 100644
index 0000000..7c35c4b
--- /dev/null
+++ b/react/AbstractModalHeader.tsx
@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import CloseButton, { CloseButtonVariant } from './CloseButton';
+import ModalContext from './ModalContext';
+
+export interface AbstractModalHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  closeLabel?: string;
+  closeVariant?: CloseButtonVariant;
+  closeButton?: boolean;
+  onHide?: () => void;
+}
+
+const propTypes = {
+  /**
+   * Provides an accessible label for the close
+   * button. It is used for Assistive Technology when the label text is not
+   * readable.
+   */
+  closeLabel: PropTypes.string,
+
+  /**
+   * Sets the variant for close button.
+   */
+  closeVariant: PropTypes.oneOf<CloseButtonVariant>(['white']),
+
+  /**
+   * Specify whether the Component should contain a close button
+   */
+  closeButton: PropTypes.bool,
+
+  /**
+   * A Callback fired when the close button is clicked. If used directly inside
+   * a ModalContext, the onHide will automatically be propagated up
+   * to the parent `onHide`.
+   */
+  onHide: PropTypes.func,
+};
+
+const AbstractModalHeader = React.forwardRef<
+  HTMLDivElement,
+  AbstractModalHeaderProps
+>(
+  (
+    {
+      closeLabel = 'Close',
+      closeVariant,
+      closeButton = false,
+      onHide,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const context = useContext(ModalContext);
+
+    const handleClick = useEventCallback(() => {
+      context?.onHide();
+      onHide?.();
+    });
+
+    return (
+      <div ref={ref} {...props}>
+        {children}
+
+        {closeButton && (
+          <CloseButton
+            aria-label={closeLabel}
+            variant={closeVariant}
+            onClick={handleClick}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+AbstractModalHeader.propTypes = propTypes;
+
+export default AbstractModalHeader;
diff --git a/react/Accordion.tsx b/react/Accordion.tsx
new file mode 100644
index 0000000..3da6ce5
--- /dev/null
+++ b/react/Accordion.tsx
@@ -0,0 +1,105 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useUncontrolled } from 'uncontrollable';
+import { useBootstrapPrefix } from './ThemeProvider';
+import AccordionBody from './AccordionBody';
+import AccordionButton from './AccordionButton';
+import AccordionCollapse from './AccordionCollapse';
+import AccordionContext, {
+  AccordionSelectCallback,
+  AccordionEventKey,
+} from './AccordionContext';
+import AccordionHeader from './AccordionHeader';
+import AccordionItem from './AccordionItem';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface AccordionProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>,
+    BsPrefixProps {
+  activeKey?: AccordionEventKey;
+  defaultActiveKey?: AccordionEventKey;
+  onSelect?: AccordionSelectCallback;
+  flush?: boolean;
+  alwaysOpen?: boolean;
+}
+
+const propTypes = {
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+
+  /** @default 'accordion' */
+  bsPrefix: PropTypes.string,
+
+  /** The current active key that corresponds to the currently expanded card */
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+
+  /** The default active key that is expanded on start */
+  defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+
+  /**
+   * Callback fired when the active item changes.
+   *
+   * ```js
+   * (eventKey: string | string[] | null, event: Object) => void
+   * ```
+   *
+   * @controllable activeIndex
+   */
+  onSelect: PropTypes.func,
+
+  /** Renders accordion edge-to-edge with its parent container */
+  flush: PropTypes.bool,
+
+  /** Allow accordion items to stay open when another item is opened */
+  alwaysOpen: PropTypes.bool,
+};
+
+const Accordion: BsPrefixRefForwardingComponent<'div', AccordionProps> =
+  React.forwardRef<HTMLElement, AccordionProps>((props, ref) => {
+    const {
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      activeKey,
+      bsPrefix,
+      className,
+      onSelect,
+      flush,
+      alwaysOpen,
+      ...controlledProps
+    } = useUncontrolled(props, {
+      activeKey: 'onSelect',
+    });
+
+    const prefix = useBootstrapPrefix(bsPrefix, 'accordion');
+    const contextValue = useMemo(
+      () => ({
+        activeEventKey: activeKey,
+        onSelect,
+        alwaysOpen,
+      }),
+      [activeKey, onSelect, alwaysOpen],
+    );
+
+    return (
+      <AccordionContext.Provider value={contextValue}>
+        <Component
+          ref={ref}
+          {...controlledProps}
+          className={classNames(className, prefix, flush && `${prefix}-flush`)}
+        />
+      </AccordionContext.Provider>
+    );
+  }) as typeof Accordion;
+
+Accordion.displayName = 'Accordion';
+Accordion.propTypes = propTypes;
+
+export default Object.assign(Accordion, {
+  Button: AccordionButton,
+  Collapse: AccordionCollapse,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Body: AccordionBody,
+});
diff --git a/react/AccordionBody.tsx b/react/AccordionBody.tsx
new file mode 100644
index 0000000..938b96b
--- /dev/null
+++ b/react/AccordionBody.tsx
@@ -0,0 +1,93 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { TransitionCallbacks } from '@restart/ui/types';
+import { useBootstrapPrefix } from './ThemeProvider';
+import AccordionCollapse from './AccordionCollapse';
+import AccordionItemContext from './AccordionItemContext';
+import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+
+export interface AccordionBodyProps
+  extends BsPrefixProps,
+    TransitionCallbacks,
+    React.HTMLAttributes<HTMLElement> {}
+
+const propTypes = {
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+
+  /** @default 'accordion-body' */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Callback fired before the component expands
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired after the component starts to expand
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired after the component has expanded
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired before the component collapses
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired after the component starts to collapse
+   */
+  onExiting: PropTypes.func,
+  /**
+   * Callback fired after the component has collapsed
+   */
+  onExited: PropTypes.func,
+};
+
+const AccordionBody: BsPrefixRefForwardingComponent<'div', AccordionBodyProps> =
+  React.forwardRef<HTMLElement, AccordionBodyProps>(
+    (
+      {
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        bsPrefix,
+        className,
+        onEnter,
+        onEntering,
+        onEntered,
+        onExit,
+        onExiting,
+        onExited,
+        ...props
+      },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-body');
+      const { eventKey } = useContext(AccordionItemContext);
+
+      return (
+        <AccordionCollapse
+          eventKey={eventKey}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={onEntered}
+          onExit={onExit}
+          onExiting={onExiting}
+          onExited={onExited}
+        >
+          <Component
+            ref={ref}
+            {...props}
+            className={classNames(className, bsPrefix)}
+          />
+        </AccordionCollapse>
+      );
+    },
+  ) as typeof AccordionBody;
+
+AccordionBody.propTypes = propTypes;
+AccordionBody.displayName = 'AccordionBody';
+
+export default AccordionBody;
diff --git a/react/AccordionButton.tsx b/react/AccordionButton.tsx
new file mode 100644
index 0000000..9de3f61
--- /dev/null
+++ b/react/AccordionButton.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { useContext } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import AccordionContext, {
+  isAccordionItemSelected,
+  AccordionEventKey,
+} from './AccordionContext';
+import AccordionItemContext from './AccordionItemContext';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { useBootstrapPrefix } from './ThemeProvider';
+
+type EventHandler = React.EventHandler<React.SyntheticEvent>;
+
+export interface AccordionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    BsPrefixProps {}
+
+const propTypes = {
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+
+  /** @default 'accordion-button' */
+  bsPrefix: PropTypes.string,
+
+  /** A callback function for when this component is clicked */
+  onClick: PropTypes.func,
+};
+
+export function useAccordionButton(
+  eventKey: string,
+  onClick?: EventHandler,
+): EventHandler {
+  const { activeEventKey, onSelect, alwaysOpen } = useContext(AccordionContext);
+
+  return (e) => {
+    /*
+      Compare the event key in context with the given event key.
+      If they are the same, then collapse the component.
+    */
+    let eventKeyPassed: AccordionEventKey =
+      eventKey === activeEventKey ? null : eventKey;
+    if (alwaysOpen) {
+      if (Array.isArray(activeEventKey)) {
+        if (activeEventKey.includes(eventKey)) {
+          eventKeyPassed = activeEventKey.filter((k) => k !== eventKey);
+        } else {
+          eventKeyPassed = [...activeEventKey, eventKey];
+        }
+      } else {
+        // activeEventKey is undefined.
+        eventKeyPassed = [eventKey];
+      }
+    }
+
+    onSelect?.(eventKeyPassed, e);
+    onClick?.(e);
+  };
+}
+
+const AccordionButton: BsPrefixRefForwardingComponent<
+  'div',
+  AccordionButtonProps
+> = React.forwardRef<HTMLButtonElement, AccordionButtonProps>(
+  (
+    {
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'button',
+      bsPrefix,
+      className,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-button');
+    const { eventKey } = useContext(AccordionItemContext);
+    const accordionOnClick = useAccordionButton(eventKey, onClick);
+    const { activeEventKey } = useContext(AccordionContext);
+
+    if (Component === 'button') {
+      props.type = 'button';
+    }
+
+    return (
+      <Component
+        ref={ref}
+        onClick={accordionOnClick}
+        {...props}
+        aria-expanded={
+          Array.isArray(activeEventKey)
+            ? activeEventKey.includes(eventKey)
+            : eventKey === activeEventKey
+        }
+        className={classNames(
+          className,
+          bsPrefix,
+          !isAccordionItemSelected(activeEventKey, eventKey) && 'collapsed',
+        )}
+      />
+    );
+  },
+) as typeof AccordionButton;
+
+AccordionButton.propTypes = propTypes;
+AccordionButton.displayName = 'AccordionButton';
+
+export default AccordionButton;
diff --git a/react/AccordionCollapse.tsx b/react/AccordionCollapse.tsx
new file mode 100644
index 0000000..c187da8
--- /dev/null
+++ b/react/AccordionCollapse.tsx
@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Transition } from 'react-transition-group';
+import { useBootstrapPrefix } from './ThemeProvider';
+import Collapse, { CollapseProps } from './Collapse';
+import AccordionContext, { isAccordionItemSelected } from './AccordionContext';
+import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+
+export interface AccordionCollapseProps extends BsPrefixProps, CollapseProps {
+  eventKey: string;
+}
+
+const propTypes = {
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+
+  /**
+   * A key that corresponds to the toggler that triggers this collapse's expand or collapse.
+   */
+  eventKey: PropTypes.string.isRequired,
+
+  /** Children prop should only contain a single child, and is enforced as such */
+  children: PropTypes.element.isRequired,
+};
+
+/**
+ * This component accepts all of [`Collapse`'s props](/docs/utilities/transitions#collapse-1).
+ */
+const AccordionCollapse: BsPrefixRefForwardingComponent<
+  'div',
+  AccordionCollapseProps
+> = React.forwardRef<Transition<any>, AccordionCollapseProps>(
+  (
+    {
+      as: Component = 'div',
+      bsPrefix,
+      className,
+      children,
+      eventKey,
+      ...props
+    },
+    ref,
+  ) => {
+    const { activeEventKey } = useContext(AccordionContext);
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-collapse');
+
+    return (
+      <Collapse
+        ref={ref}
+        in={isAccordionItemSelected(activeEventKey, eventKey)}
+        {...props}
+        className={classNames(className, bsPrefix)}
+      >
+        <Component>{React.Children.only(children)}</Component>
+      </Collapse>
+    );
+  },
+) as any;
+
+AccordionCollapse.propTypes = propTypes;
+AccordionCollapse.displayName = 'AccordionCollapse';
+
+export default AccordionCollapse;
diff --git a/react/AccordionContext.ts b/react/AccordionContext.ts
new file mode 100644
index 0000000..0b90f5f
--- /dev/null
+++ b/react/AccordionContext.ts
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export type AccordionEventKey = string | string[] | null | undefined;
+
+export declare type AccordionSelectCallback = (
+  eventKey: AccordionEventKey,
+  e: React.SyntheticEvent<unknown>,
+) => void;
+
+export interface AccordionContextValue {
+  activeEventKey?: AccordionEventKey;
+  onSelect?: AccordionSelectCallback;
+  alwaysOpen?: boolean;
+}
+
+export function isAccordionItemSelected(
+  activeEventKey: AccordionEventKey,
+  eventKey: string,
+): boolean {
+  return Array.isArray(activeEventKey)
+    ? activeEventKey.includes(eventKey)
+    : activeEventKey === eventKey;
+}
+
+const context = React.createContext<AccordionContextValue>({});
+context.displayName = 'AccordionContext';
+
+export default context;
diff --git a/react/AccordionHeader.tsx b/react/AccordionHeader.tsx
new file mode 100644
index 0000000..7ea47e5
--- /dev/null
+++ b/react/AccordionHeader.tsx
@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useBootstrapPrefix } from './ThemeProvider';
+import AccordionButton from './AccordionButton';
+import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+
+export interface AccordionHeaderProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const propTypes = {
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+
+  /** @default 'accordion-header' */
+  bsPrefix: PropTypes.string,
+
+  /** Click handler for the `AccordionButton` element */
+  onClick: PropTypes.func,
+};
+
+const AccordionHeader: BsPrefixRefForwardingComponent<
+  'h2',
+  AccordionHeaderProps
+> = React.forwardRef<HTMLElement, AccordionHeaderProps>(
+  (
+    {
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'h2',
+      bsPrefix,
+      className,
+      children,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-header');
+
+    return (
+      <Component
+        ref={ref}
+        {...props}
+        className={classNames(className, bsPrefix)}
+      >
+        <AccordionButton onClick={onClick}>{children}</AccordionButton>
+      </Component>
+    );
+  },
+) as typeof AccordionHeader;
+
+AccordionHeader.propTypes = propTypes;
+AccordionHeader.displayName = 'AccordionHeader';
+
+export default AccordionHeader;
diff --git a/react/AccordionItem.tsx b/react/AccordionItem.tsx
new file mode 100644
index 0000000..8ceb1de
--- /dev/null
+++ b/react/AccordionItem.tsx
@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useBootstrapPrefix } from './ThemeProvider';
+import AccordionItemContext, {
+  AccordionItemContextValue,
+} from './AccordionItemContext';
+import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+
+export interface AccordionItemProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  eventKey: string;
+}
+
+const propTypes = {
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+
+  /** @default 'accordion-item' */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * A unique key used to control this item's collapse/expand.
+   * @required
+   */
+  eventKey: PropTypes.string.isRequired,
+};
+
+const AccordionItem: BsPrefixRefForwardingComponent<'div', AccordionItemProps> =
+  React.forwardRef<HTMLElement, AccordionItemProps>(
+    (
+      {
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        bsPrefix,
+        className,
+        eventKey,
+        ...props
+      },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-item');
+      const contextValue = useMemo<AccordionItemContextValue>(
+        () => ({
+          eventKey,
+        }),
+        [eventKey],
+      );
+
+      return (
+        <AccordionItemContext.Provider value={contextValue}>
+          <Component
+            ref={ref}
+            {...props}
+            className={classNames(className, bsPrefix)}
+          />
+        </AccordionItemContext.Provider>
+      );
+    },
+  ) as typeof AccordionItem;
+
+AccordionItem.propTypes = propTypes;
+AccordionItem.displayName = 'AccordionItem';
+
+export default AccordionItem;
diff --git a/react/AccordionItemContext.ts b/react/AccordionItemContext.ts
new file mode 100644
index 0000000..7bec3e9
--- /dev/null
+++ b/react/AccordionItemContext.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export interface AccordionItemContextValue {
+  eventKey: string;
+}
+
+const context = React.createContext<AccordionItemContextValue>({
+  eventKey: '',
+});
+context.displayName = 'AccordionItemContext';
+
+export default context;
diff --git a/react/Alert.tsx b/react/Alert.tsx
new file mode 100644
index 0000000..fed671c
--- /dev/null
+++ b/react/Alert.tsx
@@ -0,0 +1,141 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { elementType } from 'prop-types-extra';
+import { useUncontrolled } from 'uncontrollable';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import { useBootstrapPrefix } from './ThemeProvider';
+import AlertHeading from './AlertHeading';
+import AlertLink from './AlertLink';
+import Fade from './Fade';
+import CloseButton, { CloseButtonVariant } from './CloseButton';
+import { Variant } from './types';
+import { TransitionType } from './helpers';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  bsPrefix?: string;
+  variant?: Variant;
+  dismissible?: boolean;
+  show?: boolean;
+  onClose?: (a: any, b: any) => void;
+  closeLabel?: string;
+  closeVariant?: CloseButtonVariant;
+  transition?: TransitionType;
+}
+
+const propTypes = {
+  /**
+   * @default 'alert'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The Alert visual variant
+   *
+   * @type {'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'}
+   */
+  variant: PropTypes.string,
+
+  /**
+   * Renders a properly aligned dismiss button, as well as
+   * adding extra horizontal padding to the Alert.
+   */
+  dismissible: PropTypes.bool,
+
+  /**
+   * Controls the visual state of the Alert.
+   *
+   * @controllable onClose
+   */
+  show: PropTypes.bool,
+
+  /**
+   * Callback fired when alert is closed.
+   *
+   * @controllable show
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * Sets the text for alert close button.
+   */
+  closeLabel: PropTypes.string,
+
+  /**
+   * Sets the variant for close button.
+   */
+  closeVariant: PropTypes.oneOf<CloseButtonVariant>(['white']),
+
+  /**
+   * Animate the alert dismissal. Defaults to using `<Fade>` animation or use
+   * `false` to disable. A custom `react-transition-group` Transition can also
+   * be provided.
+   */
+  transition: PropTypes.oneOfType([PropTypes.bool, elementType]),
+};
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (uncontrolledProps: AlertProps, ref) => {
+    const {
+      bsPrefix,
+      show = true,
+      closeLabel = 'Close alert',
+      closeVariant,
+      className,
+      children,
+      variant = 'primary',
+      onClose,
+      dismissible,
+      transition = Fade,
+      ...props
+    } = useUncontrolled(uncontrolledProps, {
+      show: 'onClose',
+    });
+
+    const prefix = useBootstrapPrefix(bsPrefix, 'alert');
+    const handleClose = useEventCallback((e) => {
+      if (onClose) {
+        onClose(false, e);
+      }
+    });
+    const Transition = transition === true ? Fade : transition;
+    const alert = (
+      <div
+        role="alert"
+        {...(!Transition ? props : undefined)}
+        ref={ref}
+        className={classNames(
+          className,
+          prefix,
+          variant && `${prefix}-${variant}`,
+          dismissible && `${prefix}-dismissible`,
+        )}
+      >
+        {dismissible && (
+          <CloseButton
+            onClick={handleClose}
+            aria-label={closeLabel}
+            variant={closeVariant}
+          />
+        )}
+        {children}
+      </div>
+    );
+
+    if (!Transition) return show ? alert : null;
+
+    return (
+      <Transition unmountOnExit {...props} ref={undefined} in={show}>
+        {alert}
+      </Transition>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';
+Alert.propTypes = propTypes;
+
+export default Object.assign(Alert, {
+  Link: AlertLink,
+  Heading: AlertHeading,
+});
diff --git a/react/AlertHeading.tsx b/react/AlertHeading.tsx
new file mode 100644
index 0000000..14ebdf1
--- /dev/null
+++ b/react/AlertHeading.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import divWithClassName from './divWithClassName';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+const DivStyledAsH4 = divWithClassName('h4');
+DivStyledAsH4.displayName = 'DivStyledAsH4';
+
+export interface AlertHeadingProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const AlertHeading: BsPrefixRefForwardingComponent<'div', AlertHeadingProps> =
+  React.forwardRef<HTMLElement, AlertHeadingProps>(
+    ({ className, bsPrefix, as: Component = DivStyledAsH4, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-heading');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof AlertHeading;
+
+AlertHeading.displayName = 'AlertHeading';
+
+export default AlertHeading;
diff --git a/react/AlertLink.tsx b/react/AlertLink.tsx
new file mode 100644
index 0000000..8e28e5e
--- /dev/null
+++ b/react/AlertLink.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Anchor from '@restart/ui/Anchor';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface AlertLinkProps
+  extends BsPrefixProps,
+    React.AnchorHTMLAttributes<HTMLElement> {}
+
+const AlertLink: BsPrefixRefForwardingComponent<'a', AlertLinkProps> =
+  React.forwardRef<HTMLElement, AlertLinkProps>(
+    ({ className, bsPrefix, as: Component = Anchor, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-link');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof AlertLink;
+
+AlertLink.displayName = 'AlertLink';
+
+export default AlertLink;
diff --git a/react/Anchor.tsx b/react/Anchor.tsx
new file mode 100644
index 0000000..e0b4ab8
--- /dev/null
+++ b/react/Anchor.tsx
@@ -0,0 +1,5 @@
+import Anchor, { AnchorProps } from '@restart/ui/Anchor';
+
+export type { AnchorProps };
+
+export default Anchor;
diff --git a/react/Badge.tsx b/react/Badge.tsx
new file mode 100644
index 0000000..36e4ed1
--- /dev/null
+++ b/react/Badge.tsx
@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { Color, Variant } from './types';
+
+export interface BadgeProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  bg?: Variant;
+  pill?: boolean;
+  text?: Color;
+}
+
+const propTypes = {
+  /** @default 'badge' */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The visual style of the badge
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark')}
+   */
+  bg: PropTypes.string,
+
+  /**
+   * Add the `pill` modifier to make badges more rounded with
+   * some additional horizontal padding
+   */
+  pill: PropTypes.bool,
+
+  /**
+   * Sets badge text color
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark')}
+   */
+  text: PropTypes.string,
+
+  /** @default span */
+  as: PropTypes.elementType,
+};
+
+const Badge: BsPrefixRefForwardingComponent<'span', BadgeProps> =
+  React.forwardRef<HTMLElement, BadgeProps>(
+    (
+      {
+        bsPrefix,
+        bg = 'primary',
+        pill = false,
+        text,
+        className,
+        as: Component = 'span',
+        ...props
+      },
+      ref,
+    ) => {
+      const prefix = useBootstrapPrefix(bsPrefix, 'badge');
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          className={classNames(
+            className,
+            prefix,
+            pill && `rounded-pill`,
+            text && `text-${text}`,
+            bg && `bg-${bg}`,
+          )}
+        />
+      );
+    },
+  ) as typeof Badge;
+
+Badge.displayName = 'Badge';
+Badge.propTypes = propTypes;
+
+export default Badge;
diff --git a/react/BootstrapModalManager.tsx b/react/BootstrapModalManager.tsx
new file mode 100644
index 0000000..a98d978
--- /dev/null
+++ b/react/BootstrapModalManager.tsx
@@ -0,0 +1,91 @@
+import addClass from 'dom-helpers/addClass';
+import css from 'dom-helpers/css';
+import qsa from 'dom-helpers/querySelectorAll';
+import removeClass from 'dom-helpers/removeClass';
+import ModalManager, {
+  ContainerState,
+  ModalManagerOptions,
+} from '@restart/ui/ModalManager';
+
+const Selector = {
+  FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
+  STICKY_CONTENT: '.sticky-top',
+  NAVBAR_TOGGLER: '.navbar-toggler',
+};
+
+class BootstrapModalManager extends ModalManager {
+  private adjustAndStore<T extends keyof CSSStyleDeclaration>(
+    prop: T,
+    element: HTMLElement,
+    adjust: number,
+  ) {
+    const actual = element.style[prop];
+    // TODO: DOMStringMap and CSSStyleDeclaration aren't strictly compatible
+    // @ts-ignore
+    element.dataset[prop] = actual;
+    css(element, {
+      [prop]: `${parseFloat(css(element, prop as any)) + adjust}px`,
+    });
+  }
+
+  private restore<T extends keyof CSSStyleDeclaration>(
+    prop: T,
+    element: HTMLElement,
+  ) {
+    const value = element.dataset[prop];
+    if (value !== undefined) {
+      delete element.dataset[prop];
+      css(element, { [prop]: value });
+    }
+  }
+
+  setContainerStyle(containerState: ContainerState) {
+    super.setContainerStyle(containerState);
+
+    const container = this.getElement();
+    addClass(container, 'modal-open');
+
+    if (!containerState.scrollBarWidth) return;
+
+    const paddingProp = this.isRTL ? 'paddingLeft' : 'paddingRight';
+    const marginProp = this.isRTL ? 'marginLeft' : 'marginRight';
+
+    qsa(container, Selector.FIXED_CONTENT).forEach((el) =>
+      this.adjustAndStore(paddingProp, el, containerState.scrollBarWidth),
+    );
+    qsa(container, Selector.STICKY_CONTENT).forEach((el) =>
+      this.adjustAndStore(marginProp, el, -containerState.scrollBarWidth),
+    );
+    qsa(container, Selector.NAVBAR_TOGGLER).forEach((el) =>
+      this.adjustAndStore(marginProp, el, containerState.scrollBarWidth),
+    );
+  }
+
+  removeContainerStyle(containerState: ContainerState) {
+    super.removeContainerStyle(containerState);
+
+    const container = this.getElement();
+    removeClass(container, 'modal-open');
+
+    const paddingProp = this.isRTL ? 'paddingLeft' : 'paddingRight';
+    const marginProp = this.isRTL ? 'marginLeft' : 'marginRight';
+
+    qsa(container, Selector.FIXED_CONTENT).forEach((el) =>
+      this.restore(paddingProp, el),
+    );
+    qsa(container, Selector.STICKY_CONTENT).forEach((el) =>
+      this.restore(marginProp, el),
+    );
+    qsa(container, Selector.NAVBAR_TOGGLER).forEach((el) =>
+      this.restore(marginProp, el),
+    );
+  }
+}
+
+let sharedManager: BootstrapModalManager | undefined;
+export function getSharedManager(options?: ModalManagerOptions) {
+  if (!sharedManager) sharedManager = new BootstrapModalManager(options);
+  return sharedManager;
+}
+
+export default BootstrapModalManager;
diff --git a/react/Breadcrumb.tsx b/react/Breadcrumb.tsx
new file mode 100644
index 0000000..cf70777
--- /dev/null
+++ b/react/Breadcrumb.tsx
@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import BreadcrumbItem from './BreadcrumbItem';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface BreadcrumbProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  label?: string;
+  listProps?: React.OlHTMLAttributes<HTMLOListElement>;
+}
+
+const propTypes = {
+  /**
+   * @default 'breadcrumb'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * ARIA label for the nav element
+   * https://www.w3.org/TR/wai-aria-practices/#breadcrumb
+   */
+  label: PropTypes.string,
+
+  /**
+   * Additional props passed as-is to the underlying `<ol>` element
+   */
+  listProps: PropTypes.object,
+
+  as: PropTypes.elementType,
+};
+
+const Breadcrumb: BsPrefixRefForwardingComponent<'nav', BreadcrumbProps> =
+  React.forwardRef<HTMLElement, BreadcrumbProps>(
+    (
+      {
+        bsPrefix,
+        className,
+        listProps = {},
+        children,
+        label = 'breadcrumb',
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'nav',
+        ...props
+      },
+      ref,
+    ) => {
+      const prefix = useBootstrapPrefix(bsPrefix, 'breadcrumb');
+
+      return (
+        <Component
+          aria-label={label}
+          className={className}
+          ref={ref}
+          {...props}
+        >
+          <ol
+            {...listProps}
+            className={classNames(prefix, listProps?.className)}
+          >
+            {children}
+          </ol>
+        </Component>
+      );
+    },
+  ) as typeof Breadcrumb;
+
+Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.propTypes = propTypes;
+
+export default Object.assign(Breadcrumb, {
+  Item: BreadcrumbItem,
+});
diff --git a/react/BreadcrumbItem.tsx b/react/BreadcrumbItem.tsx
new file mode 100644
index 0000000..1ae367d
--- /dev/null
+++ b/react/BreadcrumbItem.tsx
@@ -0,0 +1,103 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Anchor from '@restart/ui/Anchor';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface BreadcrumbItemProps
+  extends BsPrefixProps,
+    Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  active?: boolean;
+  href?: string;
+  linkAs?: React.ElementType;
+  target?: string;
+  title?: React.ReactNode;
+  linkProps?: Record<string, any>; // the generic is to much work here
+}
+
+const propTypes = {
+  /**
+   * @default 'breadcrumb-item'
+   */
+  bsPrefix: PropTypes.string,
+  /**
+   * Adds a visual "active" state to a Breadcrumb
+   * Item and disables the link.
+   */
+  active: PropTypes.bool,
+  /**
+   * `href` attribute for the inner `a` element
+   */
+  href: PropTypes.string,
+  /**
+   * You can use a custom element type for this component's inner link.
+   */
+  linkAs: PropTypes.elementType,
+  /**
+   * `title` attribute for the inner `a` element
+   */
+  title: PropTypes.node,
+  /**
+   * `target` attribute for the inner `a` element
+   */
+  target: PropTypes.string,
+  /**
+   * Additional props passed as-is to the underlying link for non-active items.
+   */
+  linkProps: PropTypes.object,
+
+  as: PropTypes.elementType,
+};
+
+const BreadcrumbItem: BsPrefixRefForwardingComponent<
+  'li',
+  BreadcrumbItemProps
+> = React.forwardRef<HTMLElement, BreadcrumbItemProps>(
+  (
+    {
+      bsPrefix,
+      active = false,
+      children,
+      className,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'li',
+      linkAs: LinkComponent = Anchor,
+      linkProps = {},
+      href,
+      title,
+      target,
+      ...props
+    },
+    ref,
+  ) => {
+    const prefix = useBootstrapPrefix(bsPrefix, 'breadcrumb-item');
+
+    return (
+      <Component
+        ref={ref}
+        {...props}
+        className={classNames(prefix, className, { active })}
+        aria-current={active ? 'page' : undefined}
+      >
+        {active ? (
+          children
+        ) : (
+          <LinkComponent
+            {...linkProps}
+            href={href}
+            title={title}
+            target={target}
+          >
+            {children}
+          </LinkComponent>
+        )}
+      </Component>
+    );
+  },
+) as typeof BreadcrumbItem;
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.propTypes = propTypes;
+
+export default BreadcrumbItem;
diff --git a/react/Button.tsx b/react/Button.tsx
new file mode 100644
index 0000000..e81c1f1
--- /dev/null
+++ b/react/Button.tsx
@@ -0,0 +1,121 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import {
+  useButtonProps,
+  ButtonProps as BaseButtonProps,
+} from '@restart/ui/Button';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { ButtonVariant } from './types';
+
+export interface ButtonProps
+  extends BaseButtonProps,
+    Omit<BsPrefixProps, 'as'> {
+  active?: boolean;
+  variant?: ButtonVariant;
+  size?: 'sm' | 'lg';
+}
+
+export type CommonButtonProps = 'href' | 'size' | 'variant' | 'disabled';
+
+const propTypes = {
+  /**
+   * @default 'btn'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * One or more button variant combinations
+   *
+   * buttons may be one of a variety of visual variants such as:
+   *
+   * `'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link'`
+   *
+   * as well as "outline" versions (prefixed by 'outline-*')
+   *
+   * `'outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light'`
+   */
+  variant: PropTypes.string,
+
+  /**
+   * Callback fired when the button is clicked.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specifies a large or small button.
+   *
+   * @type ('sm'|'lg')
+   */
+  size: PropTypes.string,
+
+  /** Manually set the visual state of the button to `:active` */
+  active: PropTypes.bool,
+
+  /**
+   * Disables the Button, preventing mouse events,
+   * even if the underlying component is an `<a>` element
+   */
+  disabled: PropTypes.bool,
+
+  /** Providing a `href` will render an `<a>` element, _styled_ as a button. */
+  href: PropTypes.string,
+
+  /**
+   * Defines HTML button type attribute.
+   *
+   * @default 'button'
+   */
+  type: PropTypes.oneOf(['button', 'reset', 'submit', null]),
+
+  as: PropTypes.elementType,
+};
+
+const Button: BsPrefixRefForwardingComponent<'button', ButtonProps> =
+  React.forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+      {
+        as,
+        bsPrefix,
+        variant = 'primary',
+        size,
+        active = false,
+        disabled = false,
+        className,
+        ...props
+      },
+      ref,
+    ) => {
+      const prefix = useBootstrapPrefix(bsPrefix, 'btn');
+      const [buttonProps, { tagName }] = useButtonProps({
+        tagName: as,
+        disabled,
+        ...props,
+      });
+
+      const Component = tagName as React.ElementType;
+
+      return (
+        <Component
+          {...buttonProps}
+          {...props}
+          ref={ref}
+          disabled={disabled}
+          className={classNames(
+            className,
+            prefix,
+            active && 'active',
+            variant && `${prefix}-${variant}`,
+            size && `${prefix}-${size}`,
+            props.href && disabled && 'disabled',
+          )}
+        />
+      );
+    },
+  ) as typeof Button;
+
+Button.displayName = 'Button';
+Button.propTypes = propTypes;
+
+export default Button;
diff --git a/react/ButtonGroup.tsx b/react/ButtonGroup.tsx
new file mode 100644
index 0000000..8ecd8c7
--- /dev/null
+++ b/react/ButtonGroup.tsx
@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface ButtonGroupProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  size?: 'sm' | 'lg';
+  vertical?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default 'btn-group'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Sets the size for all Buttons in the group.
+   *
+   * @type ('sm'|'lg')
+   */
+  size: PropTypes.string,
+
+  /** Make the set of Buttons appear vertically stacked. */
+  vertical: PropTypes.bool,
+
+  /**
+   * An ARIA role describing the button group. Usually the default
+   * "group" role is fine. An `aria-label` or `aria-labelledby`
+   * prop is also recommended.
+   */
+  role: PropTypes.string,
+
+  as: PropTypes.elementType,
+};
+
+const ButtonGroup: BsPrefixRefForwardingComponent<'div', ButtonGroupProps> =
+  React.forwardRef(
+    (
+      {
+        bsPrefix,
+        size,
+        vertical = false,
+        className,
+        role = 'group',
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        ...rest
+      },
+      ref,
+    ) => {
+      const prefix = useBootstrapPrefix(bsPrefix, 'btn-group');
+      let baseClass = prefix;
+
+      if (vertical) baseClass = `${prefix}-vertical`;
+
+      return (
+        <Component
+          {...rest}
+          ref={ref}
+          role={role}
+          className={classNames(
+            className,
+            baseClass,
+            size && `${prefix}-${size}`,
+          )}
+        />
+      );
+    },
+  ) as typeof ButtonGroup;
+
+ButtonGroup.displayName = 'ButtonGroup';
+ButtonGroup.propTypes = propTypes;
+
+export default ButtonGroup;
diff --git a/react/ButtonToolbar.tsx b/react/ButtonToolbar.tsx
new file mode 100644
index 0000000..3feca22
--- /dev/null
+++ b/react/ButtonToolbar.tsx
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+
+import { BsPrefixProps } from './helpers';
+
+export interface ButtonToolbarProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const propTypes = {
+  /**
+   * @default 'btn-toolbar'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The ARIA role describing the button toolbar. Generally the default
+   * "toolbar" role is correct. An `aria-label` or `aria-labelledby`
+   * prop is also recommended.
+   */
+  role: PropTypes.string,
+};
+
+const ButtonToolbar = React.forwardRef<HTMLDivElement, ButtonToolbarProps>(
+  ({ bsPrefix, className, role = 'toolbar', ...props }, ref) => {
+    const prefix = useBootstrapPrefix(bsPrefix, 'btn-toolbar');
+
+    return (
+      <div
+        {...props}
+        ref={ref}
+        className={classNames(className, prefix)}
+        role={role}
+      />
+    );
+  },
+);
+
+ButtonToolbar.displayName = 'ButtonToolbar';
+ButtonToolbar.propTypes = propTypes;
+
+export default ButtonToolbar;
diff --git a/react/Card.tsx b/react/Card.tsx
new file mode 100644
index 0000000..df1f16f
--- /dev/null
+++ b/react/Card.tsx
@@ -0,0 +1,115 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import CardBody from './CardBody';
+import CardFooter from './CardFooter';
+import CardHeader from './CardHeader';
+import CardImg from './CardImg';
+import CardImgOverlay from './CardImgOverlay';
+import CardLink from './CardLink';
+import CardSubtitle from './CardSubtitle';
+import CardText from './CardText';
+import CardTitle from './CardTitle';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { Color, Variant } from './types';
+
+export interface CardProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  bg?: Variant;
+  text?: Color;
+  border?: Variant;
+  body?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default 'card'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Sets card background
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light')}
+   */
+  bg: PropTypes.string,
+
+  /**
+   * Sets card text color
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light'|'white'|'muted')}
+   */
+  text: PropTypes.string,
+
+  /**
+   * Sets card border color
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light')}
+   */
+  border: PropTypes.string,
+
+  /**
+   * When this prop is set, it creates a Card with a Card.Body inside
+   * passing the children directly to it
+   */
+  body: PropTypes.bool,
+
+  as: PropTypes.elementType,
+};
+
+const Card: BsPrefixRefForwardingComponent<'div', CardProps> = React.forwardRef<
+  HTMLElement,
+  CardProps
+>(
+  (
+    {
+      bsPrefix,
+      className,
+      bg,
+      text,
+      border,
+      body = false,
+      children,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      ...props
+    },
+    ref,
+  ) => {
+    const prefix = useBootstrapPrefix(bsPrefix, 'card');
+
+    return (
+      <Component
+        ref={ref}
+        {...props}
+        className={classNames(
+          className,
+          prefix,
+          bg && `bg-${bg}`,
+          text && `text-${text}`,
+          border && `border-${border}`,
+        )}
+      >
+        {body ? <CardBody>{children}</CardBody> : children}
+      </Component>
+    );
+  },
+) as typeof Card;
+
+Card.displayName = 'Card';
+Card.propTypes = propTypes;
+
+export default Object.assign(Card, {
+  Img: CardImg,
+  Title: CardTitle,
+  Subtitle: CardSubtitle,
+  Body: CardBody,
+  Link: CardLink,
+  Text: CardText,
+  Header: CardHeader,
+  Footer: CardFooter,
+  ImgOverlay: CardImgOverlay,
+});
diff --git a/react/CardBody.tsx b/react/CardBody.tsx
new file mode 100644
index 0000000..9b787ff
--- /dev/null
+++ b/react/CardBody.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardBodyProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardBody: BsPrefixRefForwardingComponent<'div', CardBodyProps> =
+  React.forwardRef<HTMLElement, CardBodyProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-body');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof CardBody;
+
+CardBody.displayName = 'CardBody';
+
+export default CardBody;
diff --git a/react/CardFooter.tsx b/react/CardFooter.tsx
new file mode 100644
index 0000000..b92820b
--- /dev/null
+++ b/react/CardFooter.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardFooterProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardFooter: BsPrefixRefForwardingComponent<'div', CardFooterProps> =
+  React.forwardRef<HTMLElement, CardFooterProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-footer');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof CardFooter;
+
+CardFooter.displayName = 'CardFooter';
+
+export default CardFooter;
diff --git a/react/CardGroup.tsx b/react/CardGroup.tsx
new file mode 100644
index 0000000..ed61324
--- /dev/null
+++ b/react/CardGroup.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardGroupProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardGroup: BsPrefixRefForwardingComponent<'div', CardGroupProps> =
+  React.forwardRef<HTMLElement, CardGroupProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-group');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof CardGroup;
+
+CardGroup.displayName = 'CardGroup';
+
+export default CardGroup;
diff --git a/react/CardHeader.tsx b/react/CardHeader.tsx
new file mode 100644
index 0000000..adfcf85
--- /dev/null
+++ b/react/CardHeader.tsx
@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import CardHeaderContext from './CardHeaderContext';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardHeaderProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const propTypes = {
+  /**
+   * @default 'card-header'
+   */
+  bsPrefix: PropTypes.string,
+
+  as: PropTypes.elementType,
+};
+
+const CardHeader: BsPrefixRefForwardingComponent<'div', CardHeaderProps> =
+  React.forwardRef<HTMLElement, CardHeaderProps>(
+    (
+      {
+        bsPrefix,
+        className,
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        ...props
+      },
+      ref,
+    ) => {
+      const prefix = useBootstrapPrefix(bsPrefix, 'card-header');
+      const contextValue = useMemo(
+        () => ({
+          cardHeaderBsPrefix: prefix,
+        }),
+        [prefix],
+      );
+
+      return (
+        <CardHeaderContext.Provider value={contextValue}>
+          <Component
+            ref={ref}
+            {...props}
+            className={classNames(className, prefix)}
+          />
+        </CardHeaderContext.Provider>
+      );
+    },
+  ) as typeof CardHeader;
+
+CardHeader.displayName = 'CardHeader';
+CardHeader.propTypes = propTypes;
+
+export default CardHeader;
diff --git a/react/CardHeaderContext.tsx b/react/CardHeaderContext.tsx
new file mode 100644
index 0000000..1dc1227
--- /dev/null
+++ b/react/CardHeaderContext.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+interface CardHeaderContextValue {
+  cardHeaderBsPrefix: string;
+}
+
+const context = React.createContext<CardHeaderContextValue | null>(null);
+context.displayName = 'CardHeaderContext';
+
+export default context;
diff --git a/react/CardImg.tsx b/react/CardImg.tsx
new file mode 100644
index 0000000..d75ced7
--- /dev/null
+++ b/react/CardImg.tsx
@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardImgProps
+  extends BsPrefixProps,
+    React.ImgHTMLAttributes<HTMLImageElement> {
+  variant?: 'top' | 'bottom' | string;
+}
+
+const propTypes = {
+  /**
+   * @default 'card-img'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Defines image position inside
+   * the card.
+   *
+   * @type {('top'|'bottom')}
+   */
+  variant: PropTypes.oneOf(['top', 'bottom']),
+
+  as: PropTypes.elementType,
+};
+
+const CardImg: BsPrefixRefForwardingComponent<'img', CardImgProps> =
+  React.forwardRef(
+    // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+    (
+      {
+        bsPrefix,
+        className,
+        variant,
+        as: Component = 'img',
+        ...props
+      }: CardImgProps,
+      ref,
+    ) => {
+      const prefix = useBootstrapPrefix(bsPrefix, 'card-img');
+
+      return (
+        <Component
+          ref={ref}
+          className={classNames(
+            variant ? `${prefix}-${variant}` : prefix,
+            className,
+          )}
+          {...props}
+        />
+      );
+    },
+  ) as typeof CardImg;
+CardImg.displayName = 'CardImg';
+CardImg.propTypes = propTypes;
+
+export default CardImg;
diff --git a/react/CardImgOverlay.tsx b/react/CardImgOverlay.tsx
new file mode 100644
index 0000000..614ac40
--- /dev/null
+++ b/react/CardImgOverlay.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardImgOverlayProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardImgOverlay: BsPrefixRefForwardingComponent<
+  'div',
+  CardImgOverlayProps
+> = React.forwardRef<HTMLElement, CardImgOverlayProps>(
+  ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'card-img-overlay');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        {...props}
+      />
+    );
+  },
+) as typeof CardImgOverlay;
+
+CardImgOverlay.displayName = 'CardImgOverlay';
+
+export default CardImgOverlay;
diff --git a/react/CardLink.tsx b/react/CardLink.tsx
new file mode 100644
index 0000000..925f2aa
--- /dev/null
+++ b/react/CardLink.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardLinkProps
+  extends BsPrefixProps,
+    React.AnchorHTMLAttributes<HTMLElement> {}
+
+const CardLink: BsPrefixRefForwardingComponent<'a', CardLinkProps> =
+  React.forwardRef<HTMLElement, CardLinkProps>(
+    ({ className, bsPrefix, as: Component = 'a', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-link');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof CardLink;
+
+CardLink.displayName = 'CardLink';
+
+export default CardLink;
diff --git a/react/CardSubtitle.tsx b/react/CardSubtitle.tsx
new file mode 100644
index 0000000..4bcaa64
--- /dev/null
+++ b/react/CardSubtitle.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import divWithClassName from './divWithClassName';
+
+const DivStyledAsH6 = divWithClassName('h6');
+
+export interface CardSubtitleProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardSubtitle: BsPrefixRefForwardingComponent<'div', CardSubtitleProps> =
+  React.forwardRef<HTMLElement, CardSubtitleProps>(
+    ({ className, bsPrefix, as: Component = DivStyledAsH6, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-subtitle');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof CardSubtitle;
+
+CardSubtitle.displayName = 'CardSubtitle';
+
+export default CardSubtitle;
diff --git a/react/CardText.tsx b/react/CardText.tsx
new file mode 100644
index 0000000..c19d96e
--- /dev/null
+++ b/react/CardText.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardTextProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardText: BsPrefixRefForwardingComponent<'p', CardTextProps> =
+  React.forwardRef<HTMLElement, CardTextProps>(
+    ({ className, bsPrefix, as: Component = 'p', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-text');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof CardText;
+
+CardText.displayName = 'CardText';
+
+export default CardText;
diff --git a/react/CardTitle.tsx b/react/CardTitle.tsx
new file mode 100644
index 0000000..73dde9a
--- /dev/null
+++ b/react/CardTitle.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import divWithClassName from './divWithClassName';
+
+const DivStyledAsH5 = divWithClassName('h5');
+
+export interface CardTitleProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardTitle: BsPrefixRefForwardingComponent<'div', CardTitleProps> =
+  React.forwardRef<HTMLElement, CardTitleProps>(
+    ({ className, bsPrefix, as: Component = DivStyledAsH5, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-title');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof CardTitle;
+
+CardTitle.displayName = 'CardTitle';
+
+export default CardTitle;
diff --git a/react/Carousel.tsx b/react/Carousel.tsx
new file mode 100644
index 0000000..aeadf3b
--- /dev/null
+++ b/react/Carousel.tsx
@@ -0,0 +1,641 @@
+import useEventCallback from '@restart/hooks/useEventCallback';
+import useUpdateEffect from '@restart/hooks/useUpdateEffect';
+import useCommittedRef from '@restart/hooks/useCommittedRef';
+import useTimeout from '@restart/hooks/useTimeout';
+import Anchor from '@restart/ui/Anchor';
+import classNames from 'classnames';
+import { TransitionStatus } from 'react-transition-group/Transition';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useUncontrolled } from 'uncontrollable';
+import CarouselCaption from './CarouselCaption';
+import CarouselItem from './CarouselItem';
+import { map, forEach } from './ElementChildren';
+import { useBootstrapPrefix, useIsRTL } from './ThemeProvider';
+import transitionEndListener from './transitionEndListener';
+import triggerBrowserReflow from './triggerBrowserReflow';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import TransitionWrapper from './TransitionWrapper';
+
+export type CarouselVariant = 'dark' | string;
+
+export interface CarouselRef {
+  element?: HTMLElement;
+  prev: (e?: React.SyntheticEvent) => void;
+  next: (e?: React.SyntheticEvent) => void;
+}
+
+export interface CarouselProps
+  extends BsPrefixProps,
+  Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+  slide?: boolean;
+  fade?: boolean;
+  controls?: boolean;
+  indicators?: boolean;
+  indicatorLabels?: string[];
+  activeIndex?: number;
+  onSelect?: (eventKey: number, event: Record<string, unknown> | null) => void;
+  defaultActiveIndex?: number;
+  onSlide?: (eventKey: number, direction: 'start' | 'end') => void;
+  onSlid?: (eventKey: number, direction: 'start' | 'end') => void;
+  interval?: number | null;
+  keyboard?: boolean;
+  pause?: 'hover' | false;
+  wrap?: boolean;
+  touch?: boolean;
+  prevIcon?: React.ReactNode;
+  prevLabel?: React.ReactNode;
+  nextIcon?: React.ReactNode;
+  nextLabel?: React.ReactNode;
+  variant?: CarouselVariant;
+  ref?: React.Ref<CarouselRef> | React.MutableRefObject<CarouselRef | undefined>
+}
+
+const SWIPE_THRESHOLD = 40;
+
+const propTypes = {
+  /**
+   * @default 'carousel'
+   */
+  bsPrefix: PropTypes.string,
+  as: PropTypes.elementType,
+
+  /**
+   * Enables animation on the Carousel as it transitions between slides.
+   */
+  slide: PropTypes.bool,
+
+  /** Animates slides with a crossfade animation instead of the default slide animation */
+  fade: PropTypes.bool,
+
+  /**
+   * Show the Carousel previous and next arrows for changing the current slide
+   */
+  controls: PropTypes.bool,
+
+  /**
+   * Show a set of slide position indicators
+   */
+  indicators: PropTypes.bool,
+
+  /**
+   * An array of labels for the indicators. Defaults to "Slide #" if not provided.
+   */
+  indicatorLabels: PropTypes.array,
+
+  /**
+   * Controls the current visible slide
+   *
+   * @controllable onSelect
+   */
+  activeIndex: PropTypes.number,
+
+  /**
+   * Callback fired when the active item changes.
+   *
+   * ```js
+   * (eventKey: number, event: Object | null) => void
+   * ```
+   *
+   * @controllable activeIndex
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Callback fired when a slide transition starts.
+   *
+   * ```js
+   * (eventKey: number, direction: 'left' | 'right') => void
+   * ```
+   */
+  onSlide: PropTypes.func,
+
+  /**
+   * Callback fired when a slide transition ends.
+   *
+   * ```js
+   * (eventKey: number, direction: 'left' | 'right') => void
+   * ```
+   */
+  onSlid: PropTypes.func,
+
+  /**
+   * The amount of time to delay between automatically cycling an item. If `null`, carousel will not automatically cycle.
+   */
+  interval: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([null])]),
+
+  /** Whether the carousel should react to keyboard events. */
+  keyboard: PropTypes.bool,
+
+  /**
+   * If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it.
+   *
+   * On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
+   */
+  pause: PropTypes.oneOf(['hover', false]),
+
+  /** Whether the carousel should cycle continuously or have hard stops. */
+  wrap: PropTypes.bool,
+
+  /**
+   * Whether the carousel should support left/right swipe interactions on touchscreen devices.
+   */
+  touch: PropTypes.bool,
+
+  /** Override the default button icon for the "previous" control */
+  prevIcon: PropTypes.node,
+
+  /**
+   * Label shown to screen readers only, can be used to show the previous element
+   * in the carousel.
+   * Set to null to deactivate.
+   */
+  prevLabel: PropTypes.string,
+
+  /** Override the default button icon for the "next" control */
+  nextIcon: PropTypes.node,
+
+  /**
+   * Label shown to screen readers only, can be used to show the next element
+   * in the carousel.
+   * Set to null to deactivate.
+   */
+  nextLabel: PropTypes.string,
+
+  /**
+   * Color variant that controls the colors of the controls, indicators
+   * and captions.
+   */
+  variant: PropTypes.oneOf<CarouselVariant>(['dark']),
+};
+
+function isVisible(element) {
+  if (
+    !element ||
+    !element.style ||
+    !element.parentNode ||
+    !element.parentNode.style
+  ) {
+    return false;
+  }
+
+  const elementStyle = getComputedStyle(element);
+
+  return (
+    elementStyle.display !== 'none' &&
+    elementStyle.visibility !== 'hidden' &&
+    getComputedStyle(element.parentNode).display !== 'none'
+  );
+}
+
+const Carousel: BsPrefixRefForwardingComponent<'div', CarouselProps> =
+  React.forwardRef<CarouselRef, CarouselProps>(
+    ({ defaultActiveIndex = 0, ...uncontrolledProps }, ref) => {
+      const {
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        bsPrefix,
+        slide = true,
+        fade = false,
+        controls = true,
+        indicators = true,
+        indicatorLabels = [],
+        activeIndex,
+        onSelect,
+        onSlide,
+        onSlid,
+        interval = 5000,
+        keyboard = true,
+        onKeyDown,
+        pause = 'hover',
+        onMouseOver,
+        onMouseOut,
+        wrap = true,
+        touch = true,
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        prevIcon = (
+          <span aria-hidden="true" className="carousel-control-prev-icon" />
+        ),
+        prevLabel = 'Previous',
+        nextIcon = (
+          <span aria-hidden="true" className="carousel-control-next-icon" />
+        ),
+        nextLabel = 'Next',
+        variant,
+        className,
+        children,
+        ...props
+      } = useUncontrolled(
+        { defaultActiveIndex, ...uncontrolledProps },
+        {
+          activeIndex: 'onSelect',
+        },
+      );
+
+      const prefix = useBootstrapPrefix(bsPrefix, 'carousel');
+      const isRTL = useIsRTL();
+
+      const nextDirectionRef = useRef<string | null>(null);
+      const [direction, setDirection] = useState('next');
+      const [paused, setPaused] = useState(false);
+      const [isSliding, setIsSliding] = useState(false);
+      const [renderedActiveIndex, setRenderedActiveIndex] = useState<number>(
+        activeIndex || 0,
+      );
+
+      useEffect(() => {
+        if (!isSliding && activeIndex !== renderedActiveIndex) {
+          if (nextDirectionRef.current) {
+            setDirection(nextDirectionRef.current);
+          } else {
+            setDirection(
+              (activeIndex || 0) > renderedActiveIndex ? 'next' : 'prev',
+            );
+          }
+
+          if (slide) {
+            setIsSliding(true);
+          }
+
+          setRenderedActiveIndex(activeIndex || 0);
+        }
+      }, [activeIndex, isSliding, renderedActiveIndex, slide]);
+
+      useEffect(() => {
+        if (nextDirectionRef.current) {
+          nextDirectionRef.current = null;
+        }
+      });
+
+      let numChildren = 0;
+      let activeChildInterval: number | undefined;
+
+      // Iterate to grab all of the children's interval values
+      // (and count them, too)
+      forEach(children, (child, index) => {
+        ++numChildren;
+        if (index === activeIndex) {
+          activeChildInterval = child.props.interval as number | undefined;
+        }
+      });
+
+      const activeChildIntervalRef = useCommittedRef(activeChildInterval);
+
+      const prev = useCallback(
+        (event?) => {
+          if (isSliding) {
+            return;
+          }
+
+          let nextActiveIndex = renderedActiveIndex - 1;
+          if (nextActiveIndex < 0) {
+            if (!wrap) {
+              return;
+            }
+
+            nextActiveIndex = numChildren - 1;
+          }
+
+          nextDirectionRef.current = 'prev';
+          onSelect?.(nextActiveIndex, event);
+        },
+        [isSliding, renderedActiveIndex, onSelect, wrap, numChildren],
+      );
+
+      // This is used in the setInterval, so it should not invalidate.
+      const next = useEventCallback((event?) => {
+        if (isSliding) {
+          return;
+        }
+
+        let nextActiveIndex = renderedActiveIndex + 1;
+        if (nextActiveIndex >= numChildren) {
+          if (!wrap) {
+            return;
+          }
+
+          nextActiveIndex = 0;
+        }
+
+        nextDirectionRef.current = 'next';
+
+        onSelect?.(nextActiveIndex, event);
+      });
+
+      const elementRef = useRef<HTMLElement>();
+
+      useImperativeHandle(ref, () => ({
+        element: elementRef.current,
+        prev,
+        next,
+      }));
+
+      // This is used in the setInterval, so it should not invalidate.
+      const nextWhenVisible = useEventCallback(() => {
+        if (!document.hidden && isVisible(elementRef.current)) {
+          if (isRTL) {
+            prev();
+          } else {
+            next();
+          }
+        }
+      });
+
+      const slideDirection = direction === 'next' ? 'start' : 'end';
+
+      useUpdateEffect(() => {
+        if (slide) {
+          // These callbacks will be handled by the <Transition> callbacks.
+          return;
+        }
+
+        onSlide?.(renderedActiveIndex, slideDirection);
+        onSlid?.(renderedActiveIndex, slideDirection);
+      }, [renderedActiveIndex]);
+
+      const orderClassName = `${prefix}-item-${direction}`;
+      const directionalClassName = `${prefix}-item-${slideDirection}`;
+
+      const handleEnter = useCallback(
+        (node) => {
+          triggerBrowserReflow(node);
+
+          onSlide?.(renderedActiveIndex, slideDirection);
+        },
+        [onSlide, renderedActiveIndex, slideDirection],
+      );
+
+      const handleEntered = useCallback(() => {
+        setIsSliding(false);
+
+        onSlid?.(renderedActiveIndex, slideDirection);
+      }, [onSlid, renderedActiveIndex, slideDirection]);
+
+      const handleKeyDown = useCallback(
+        (event) => {
+          if (keyboard && !/input|textarea/i.test(event.target.tagName)) {
+            switch (event.key) {
+              case 'ArrowLeft':
+                event.preventDefault();
+                if (isRTL) {
+                  next(event);
+                } else {
+                  prev(event);
+                }
+                return;
+              case 'ArrowRight':
+                event.preventDefault();
+                if (isRTL) {
+                  prev(event);
+                } else {
+                  next(event);
+                }
+                return;
+              default:
+            }
+          }
+
+          onKeyDown?.(event);
+        },
+        [keyboard, onKeyDown, prev, next, isRTL],
+      );
+
+      const handleMouseOver = useCallback(
+        (event) => {
+          if (pause === 'hover') {
+            setPaused(true);
+          }
+
+          onMouseOver?.(event);
+        },
+        [pause, onMouseOver],
+      );
+
+      const handleMouseOut = useCallback(
+        (event) => {
+          setPaused(false);
+
+          onMouseOut?.(event);
+        },
+        [onMouseOut],
+      );
+
+      const touchStartXRef = useRef(0);
+      const touchDeltaXRef = useRef(0);
+      const touchUnpauseTimeout = useTimeout();
+
+      const handleTouchStart = useCallback(
+        (event) => {
+          touchStartXRef.current = event.touches[0].clientX;
+          touchDeltaXRef.current = 0;
+
+          if (pause === 'hover') {
+            setPaused(true);
+          }
+
+          onTouchStart?.(event);
+        },
+        [pause, onTouchStart],
+      );
+
+      const handleTouchMove = useCallback(
+        (event) => {
+          if (event.touches && event.touches.length > 1) {
+            touchDeltaXRef.current = 0;
+          } else {
+            touchDeltaXRef.current =
+              event.touches[0].clientX - touchStartXRef.current;
+          }
+
+          onTouchMove?.(event);
+        },
+        [onTouchMove],
+      );
+
+      const handleTouchEnd = useCallback(
+        (event) => {
+          if (touch) {
+            const touchDeltaX = touchDeltaXRef.current;
+
+            if (Math.abs(touchDeltaX) > SWIPE_THRESHOLD) {
+              if (touchDeltaX > 0) {
+                prev(event);
+              } else {
+                next(event);
+              }
+            }
+          }
+
+          if (pause === 'hover') {
+            touchUnpauseTimeout.set(() => {
+              setPaused(false);
+            }, interval || undefined);
+          }
+
+          onTouchEnd?.(event);
+        },
+        [touch, pause, prev, next, touchUnpauseTimeout, interval, onTouchEnd],
+      );
+
+      const shouldPlay = interval != null && !paused && !isSliding;
+
+      const intervalHandleRef = useRef<number | null>();
+
+      useEffect(() => {
+        if (!shouldPlay) {
+          return undefined;
+        }
+
+        const nextFunc = isRTL ? prev : next;
+        intervalHandleRef.current = window.setInterval(
+          document.visibilityState ? nextWhenVisible : nextFunc,
+          activeChildIntervalRef.current ?? interval ?? undefined,
+        );
+
+        return () => {
+          if (intervalHandleRef.current !== null) {
+            clearInterval(intervalHandleRef.current);
+          }
+        };
+      }, [
+        shouldPlay,
+        prev,
+        next,
+        activeChildIntervalRef,
+        interval,
+        nextWhenVisible,
+        isRTL,
+      ]);
+
+      const indicatorOnClicks = useMemo(
+        () =>
+          indicators &&
+          Array.from({ length: numChildren }, (_, index) => (event) => {
+            onSelect?.(index, event);
+          }),
+        [indicators, numChildren, onSelect],
+      );
+
+      return (
+        <Component
+          ref={elementRef}
+          {...props}
+          onKeyDown={handleKeyDown}
+          onMouseOver={handleMouseOver}
+          onMouseOut={handleMouseOut}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          className={classNames(
+            className,
+            prefix,
+            slide && 'slide',
+            fade && `${prefix}-fade`,
+            variant && `${prefix}-${variant}`,
+          )}
+        >
+          {indicators && (
+            <div className={`${prefix}-indicators`}>
+              {map(children, (_, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  data-bs-target="" // Bootstrap requires this in their css.
+                  aria-label={
+                    indicatorLabels?.length
+                      ? indicatorLabels[index]
+                      : `Slide ${index + 1}`
+                  }
+                  className={
+                    index === renderedActiveIndex ? 'active' : undefined
+                  }
+                  onClick={
+                    indicatorOnClicks ? indicatorOnClicks[index] : undefined
+                  }
+                  aria-current={index === renderedActiveIndex}
+                />
+              ))}
+            </div>
+          )}
+
+          <div className={`${prefix}-inner`}>
+            {map(children, (child, index) => {
+              const isActive = index === renderedActiveIndex;
+
+              return slide ? (
+                <TransitionWrapper
+                  in={isActive}
+                  onEnter={isActive ? handleEnter : undefined}
+                  onEntered={isActive ? handleEntered : undefined}
+                  addEndListener={transitionEndListener}
+                >
+                  {(
+                    status: TransitionStatus,
+                    innerProps: Record<string, unknown>,
+                  ) =>
+                    React.cloneElement(child, {
+                      ...innerProps,
+                      className: classNames(
+                        child.props.className,
+                        isActive && status !== 'entered' && orderClassName,
+                        (status === 'entered' || status === 'exiting') &&
+                        'active',
+                        (status === 'entering' || status === 'exiting') &&
+                        directionalClassName,
+                      ),
+                    })
+                  }
+                </TransitionWrapper>
+              ) : (
+                React.cloneElement(child, {
+                  className: classNames(
+                    child.props.className,
+                    isActive && 'active',
+                  ),
+                })
+              );
+            })}
+          </div>
+
+          {controls && (
+            <>
+              {(wrap || activeIndex !== 0) && (
+                <Anchor className={`${prefix}-control-prev`} onClick={prev}>
+                  {prevIcon}
+                  {prevLabel && (
+                    <span className="visually-hidden">{prevLabel}</span>
+                  )}
+                </Anchor>
+              )}
+              {(wrap || activeIndex !== numChildren - 1) && (
+                <Anchor className={`${prefix}-control-next`} onClick={next}>
+                  {nextIcon}
+                  {nextLabel && (
+                    <span className="visually-hidden">{nextLabel}</span>
+                  )}
+                </Anchor>
+              )}
+            </>
+          )}
+        </Component>
+      );
+    },
+  ) as unknown as BsPrefixRefForwardingComponent<'div', CarouselProps>;
+
+Carousel.displayName = 'Carousel';
+Carousel.propTypes = propTypes;
+
+export default Object.assign(Carousel, {
+  Caption: CarouselCaption,
+  Item: CarouselItem,
+});
diff --git a/react/CarouselCaption.tsx b/react/CarouselCaption.tsx
new file mode 100644
index 0000000..3a44605
--- /dev/null
+++ b/react/CarouselCaption.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CarouselCaptionProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CarouselCaption: BsPrefixRefForwardingComponent<
+  'div',
+  CarouselCaptionProps
+> = React.forwardRef<HTMLElement, CarouselCaptionProps>(
+  ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'carousel-caption');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        {...props}
+      />
+    );
+  },
+) as typeof CarouselCaption;
+
+CarouselCaption.displayName = 'CarouselCaption';
+
+export default CarouselCaption;
diff --git a/react/CarouselItem.tsx b/react/CarouselItem.tsx
new file mode 100644
index 0000000..a88a256
--- /dev/null
+++ b/react/CarouselItem.tsx
@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CarouselItemProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  interval?: number;
+}
+
+const propTypes = {
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+
+  /** @default 'carousel-item' */
+  bsPrefix: PropTypes.string,
+
+  /** The amount of time to delay between automatically cycling this specific item. Will default to the Carousel's `interval` prop value if none is specified. */
+  interval: PropTypes.number,
+};
+
+const CarouselItem: BsPrefixRefForwardingComponent<'div', CarouselItemProps> =
+  React.forwardRef<HTMLElement, CarouselItemProps>(
+    (
+      {
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        bsPrefix,
+        className,
+        ...props
+      },
+      ref,
+    ) => {
+      const finalClassName = classNames(
+        className,
+        useBootstrapPrefix(bsPrefix, 'carousel-item'),
+      );
+      return <Component ref={ref} {...props} className={finalClassName} />;
+    },
+  ) as typeof CarouselItem;
+
+CarouselItem.displayName = 'CarouselItem';
+CarouselItem.propTypes = propTypes;
+
+export default CarouselItem;
diff --git a/react/CloseButton.tsx b/react/CloseButton.tsx
new file mode 100644
index 0000000..c68265e
--- /dev/null
+++ b/react/CloseButton.tsx
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import classNames from 'classnames';
+
+export type CloseButtonVariant = 'white' | string;
+
+export interface CloseButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: CloseButtonVariant;
+}
+
+const propTypes = {
+  /** An accessible label indicating the relevant information about the Close Button. */
+  'aria-label': PropTypes.string,
+
+  /** A callback fired after the Close Button is clicked. */
+  onClick: PropTypes.func,
+
+  /**
+   * Render different color variant for the button.
+   *
+   * Omitting this will render the default dark color.
+   */
+  variant: PropTypes.oneOf<CloseButtonVariant>(['white']),
+};
+
+const CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(
+  (
+    { className, variant, 'aria-label': ariaLabel = 'Close', ...props },
+    ref,
+  ) => (
+    <button
+      ref={ref}
+      type="button"
+      className={classNames(
+        'btn-close',
+        variant && `btn-close-${variant}`,
+        className,
+      )}
+      aria-label={ariaLabel}
+      {...props}
+    />
+  ),
+);
+
+CloseButton.displayName = 'CloseButton';
+CloseButton.propTypes = propTypes;
+
+export default CloseButton;
diff --git a/react/Col.tsx b/react/Col.tsx
new file mode 100644
index 0000000..8f3bf0f
--- /dev/null
+++ b/react/Col.tsx
@@ -0,0 +1,196 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  useBootstrapPrefix,
+  useBootstrapBreakpoints,
+  useBootstrapMinBreakpoint,
+} from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+type NumberAttr =
+  | number
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12';
+
+type ColOrderNumber = number | '1' | '2' | '3' | '4' | '5';
+type ColOrder = ColOrderNumber | 'first' | 'last';
+type ColSize = boolean | 'auto' | NumberAttr;
+type ColSpec =
+  | ColSize
+  | { span?: ColSize; offset?: NumberAttr; order?: ColOrder };
+
+export interface ColProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  xs?: ColSpec;
+  sm?: ColSpec;
+  md?: ColSpec;
+  lg?: ColSpec;
+  xl?: ColSpec;
+  xxl?: ColSpec;
+  [key: string]: any;
+}
+
+const colSize = PropTypes.oneOfType([
+  PropTypes.bool,
+  PropTypes.number,
+  PropTypes.string,
+  PropTypes.oneOf(['auto']),
+]);
+
+const stringOrNumber = PropTypes.oneOfType([
+  PropTypes.number,
+  PropTypes.string,
+]);
+
+const column = PropTypes.oneOfType([
+  colSize,
+  PropTypes.shape({
+    size: colSize,
+    order: stringOrNumber,
+    offset: stringOrNumber,
+  }),
+]);
+
+const propTypes = {
+  /**
+   * @default 'col'
+   */
+  bsPrefix: PropTypes.string,
+
+  as: PropTypes.elementType,
+
+  /**
+   * The number of columns to span on extra small devices (<576px)
+   *
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
+   */
+  xs: column,
+
+  /**
+   * The number of columns to span on small devices (≥576px)
+   *
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
+   */
+  sm: column,
+
+  /**
+   * The number of columns to span on medium devices (≥768px)
+   *
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
+   */
+  md: column,
+
+  /**
+   * The number of columns to span on large devices (≥992px)
+   *
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
+   */
+  lg: column,
+
+  /**
+   * The number of columns to span on extra large devices (≥1200px)
+   *
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
+   */
+  xl: column,
+
+  /**
+   * The number of columns to span on extra extra large devices (≥1400px)
+   *
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
+   */
+  xxl: column,
+};
+
+export interface UseColMetadata {
+  as?: React.ElementType;
+  bsPrefix: string;
+  spans: string[];
+}
+
+export function useCol({
+  as,
+  bsPrefix,
+  className,
+  ...props
+}: ColProps): [any, UseColMetadata] {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'col');
+  const breakpoints = useBootstrapBreakpoints();
+  const minBreakpoint = useBootstrapMinBreakpoint();
+
+  const spans: string[] = [];
+  const classes: string[] = [];
+
+  breakpoints.forEach((brkPoint) => {
+    const propValue = props[brkPoint];
+    delete props[brkPoint];
+
+    let span: ColSize | undefined;
+    let offset: NumberAttr | undefined;
+    let order: ColOrder | undefined;
+
+    if (typeof propValue === 'object' && propValue != null) {
+      ({ span, offset, order } = propValue);
+    } else {
+      span = propValue;
+    }
+
+    const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : '';
+
+    if (span)
+      spans.push(
+        span === true ? `${bsPrefix}${infix}` : `${bsPrefix}${infix}-${span}`,
+      );
+
+    if (order != null) classes.push(`order${infix}-${order}`);
+    if (offset != null) classes.push(`offset${infix}-${offset}`);
+  });
+
+  return [
+    { ...props, className: classNames(className, ...spans, ...classes) },
+    {
+      as,
+      bsPrefix,
+      spans,
+    },
+  ];
+}
+
+const Col: BsPrefixRefForwardingComponent<'div', ColProps> = React.forwardRef<
+  HTMLElement,
+  ColProps
+>(
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  (props, ref) => {
+    const [
+      { className, ...colProps },
+      { as: Component = 'div', bsPrefix, spans },
+    ] = useCol(props);
+
+    return (
+      <Component
+        {...colProps}
+        ref={ref}
+        className={classNames(className, !spans.length && bsPrefix)}
+      />
+    );
+  },
+) as typeof Col;
+
+Col.displayName = 'Col';
+Col.propTypes = propTypes;
+
+export default Col;
diff --git a/react/Collapse.tsx b/react/Collapse.tsx
new file mode 100644
index 0000000..eb2ff01
--- /dev/null
+++ b/react/Collapse.tsx
@@ -0,0 +1,258 @@
+import classNames from 'classnames';
+import css from 'dom-helpers/css';
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+import Transition, {
+  TransitionStatus,
+  ENTERED,
+  ENTERING,
+  EXITED,
+  EXITING,
+} from 'react-transition-group/Transition';
+import { TransitionCallbacks } from '@restart/ui/types';
+import transitionEndListener from './transitionEndListener';
+import createChainedFunction from './createChainedFunction';
+import triggerBrowserReflow from './triggerBrowserReflow';
+import TransitionWrapper from './TransitionWrapper';
+
+type Dimension = 'height' | 'width';
+
+export interface CollapseProps
+  extends TransitionCallbacks,
+    Pick<React.HTMLAttributes<HTMLElement>, 'role'> {
+  className?: string;
+  in?: boolean;
+  mountOnEnter?: boolean;
+  unmountOnExit?: boolean;
+  appear?: boolean;
+  timeout?: number;
+  dimension?: Dimension | (() => Dimension);
+  getDimensionValue?: (dimension: Dimension, element: HTMLElement) => number;
+  children: React.ReactElement;
+}
+
+const MARGINS: { [d in Dimension]: string[] } = {
+  height: ['marginTop', 'marginBottom'],
+  width: ['marginLeft', 'marginRight'],
+};
+
+function getDefaultDimensionValue(
+  dimension: Dimension,
+  elem: HTMLElement,
+): number {
+  const offset = `offset${dimension[0].toUpperCase()}${dimension.slice(1)}`;
+  const value = elem[offset];
+  const margins = MARGINS[dimension];
+
+  return (
+    value +
+    // @ts-ignore
+    parseInt(css(elem, margins[0]), 10) +
+    // @ts-ignore
+    parseInt(css(elem, margins[1]), 10)
+  );
+}
+
+const collapseStyles = {
+  [EXITED]: 'collapse',
+  [EXITING]: 'collapsing',
+  [ENTERING]: 'collapsing',
+  [ENTERED]: 'collapse show',
+};
+
+const propTypes = {
+  /**
+   * Show the component; triggers the expand or collapse animation
+   */
+  in: PropTypes.bool,
+
+  /**
+   * Wait until the first "enter" transition to mount the component (add it to the DOM)
+   */
+  mountOnEnter: PropTypes.bool,
+
+  /**
+   * Unmount the component (remove it from the DOM) when it is collapsed
+   */
+  unmountOnExit: PropTypes.bool,
+
+  /**
+   * Run the expand animation when the component mounts, if it is initially
+   * shown
+   */
+  appear: PropTypes.bool,
+
+  /**
+   * Duration of the collapse animation in milliseconds, to ensure that
+   * finishing callbacks are fired even if the original browser transition end
+   * events are canceled
+   */
+  timeout: PropTypes.number,
+
+  /**
+   * Callback fired before the component expands
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired after the component starts to expand
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired after the component has expanded
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired before the component collapses
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired after the component starts to collapse
+   */
+  onExiting: PropTypes.func,
+  /**
+   * Callback fired after the component has collapsed
+   */
+  onExited: PropTypes.func,
+
+  /**
+   * The dimension used when collapsing, or a function that returns the
+   * dimension
+   */
+  dimension: PropTypes.oneOfType([
+    PropTypes.oneOf(['height', 'width']),
+    PropTypes.func,
+  ]),
+
+  /**
+   * Function that returns the height or width of the animating DOM node
+   *
+   * Allows for providing some custom logic for how much the Collapse component
+   * should animate in its specified dimension. Called with the current
+   * dimension prop value and the DOM node.
+   *
+   * @default element.offsetWidth | element.offsetHeight
+   */
+  getDimensionValue: PropTypes.func,
+
+  /**
+   * ARIA role of collapsible element
+   */
+  role: PropTypes.string,
+
+  /**
+   * You must provide a single JSX child element to this component and that element cannot be a \<React.Fragment\>
+   */
+  children: PropTypes.element.isRequired,
+};
+
+const Collapse = React.forwardRef<Transition<any>, CollapseProps>(
+  (
+    {
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      className,
+      children,
+      dimension = 'height',
+      in: inProp = false,
+      timeout = 300,
+      mountOnEnter = false,
+      unmountOnExit = false,
+      appear = false,
+      getDimensionValue = getDefaultDimensionValue,
+      ...props
+    },
+    ref,
+  ) => {
+    /* Compute dimension */
+    const computedDimension =
+      typeof dimension === 'function' ? dimension() : dimension;
+
+    /* -- Expanding -- */
+    const handleEnter = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          elem.style[computedDimension] = '0';
+        }, onEnter),
+      [computedDimension, onEnter],
+    );
+
+    const handleEntering = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          const scroll = `scroll${computedDimension[0].toUpperCase()}${computedDimension.slice(
+            1,
+          )}`;
+          elem.style[computedDimension] = `${elem[scroll]}px`;
+        }, onEntering),
+      [computedDimension, onEntering],
+    );
+
+    const handleEntered = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          elem.style[computedDimension] = null;
+        }, onEntered),
+      [computedDimension, onEntered],
+    );
+
+    /* -- Collapsing -- */
+    const handleExit = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          elem.style[computedDimension] = `${getDimensionValue(
+            computedDimension,
+            elem,
+          )}px`;
+          triggerBrowserReflow(elem);
+        }, onExit),
+      [onExit, getDimensionValue, computedDimension],
+    );
+    const handleExiting = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          elem.style[computedDimension] = null;
+        }, onExiting),
+      [computedDimension, onExiting],
+    );
+
+    return (
+      <TransitionWrapper
+        ref={ref}
+        addEndListener={transitionEndListener}
+        {...props}
+        aria-expanded={props.role ? inProp : null}
+        onEnter={handleEnter}
+        onEntering={handleEntering}
+        onEntered={handleEntered}
+        onExit={handleExit}
+        onExiting={handleExiting}
+        childRef={(children as any).ref}
+        in={inProp}
+        timeout={timeout}
+        mountOnEnter={mountOnEnter}
+        unmountOnExit={unmountOnExit}
+        appear={appear}
+      >
+        {(state: TransitionStatus, innerProps: Record<string, unknown>) =>
+          React.cloneElement(children, {
+            ...innerProps,
+            className: classNames(
+              className,
+              children.props.className,
+              collapseStyles[state],
+              computedDimension === 'width' && 'collapse-horizontal',
+            ),
+          })
+        }
+      </TransitionWrapper>
+    );
+  },
+);
+
+// @ts-ignore
+Collapse.propTypes = propTypes;
+
+export default Collapse;
diff --git a/react/Container.tsx b/react/Container.tsx
new file mode 100644
index 0000000..6dd01fb
--- /dev/null
+++ b/react/Container.tsx
@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface ContainerProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  fluid?: boolean | string | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+
+const propTypes = {
+  /**
+   * @default 'container'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Allow the Container to fill all of its available horizontal space.
+   * @type {(true|"sm"|"md"|"lg"|"xl"|"xxl")}
+   */
+  fluid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /**
+   * You can use a custom element for this component
+   */
+  as: PropTypes.elementType,
+};
+
+const Container: BsPrefixRefForwardingComponent<'div', ContainerProps> =
+  React.forwardRef<HTMLElement, ContainerProps>(
+    (
+      {
+        bsPrefix,
+        fluid = false,
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        className,
+        ...props
+      },
+      ref,
+    ) => {
+      const prefix = useBootstrapPrefix(bsPrefix, 'container');
+      const suffix = typeof fluid === 'string' ? `-${fluid}` : '-fluid';
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          className={classNames(
+            className,
+            fluid ? `${prefix}${suffix}` : prefix,
+          )}
+        />
+      );
+    },
+  ) as typeof Container;
+
+Container.displayName = 'Container';
+Container.propTypes = propTypes;
+
+export default Container;
diff --git a/react/Dropdown.tsx b/react/Dropdown.tsx
new file mode 100644
index 0000000..e25bf1d
--- /dev/null
+++ b/react/Dropdown.tsx
@@ -0,0 +1,231 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext, useMemo } from 'react';
+import BaseDropdown, {
+  DropdownProps as BaseDropdownProps,
+  ToggleMetadata,
+} from '@restart/ui/Dropdown';
+import { useUncontrolled } from 'uncontrollable';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import DropdownContext, { DropDirection } from './DropdownContext';
+import DropdownDivider from './DropdownDivider';
+import DropdownHeader from './DropdownHeader';
+import DropdownItem from './DropdownItem';
+import DropdownItemText from './DropdownItemText';
+import DropdownMenu, { getDropdownMenuPlacement } from './DropdownMenu';
+import DropdownToggle from './DropdownToggle';
+import InputGroupContext from './InputGroupContext';
+import { useBootstrapPrefix, useIsRTL } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { AlignType, alignPropType } from './types';
+
+export interface DropdownProps
+  extends BaseDropdownProps,
+    BsPrefixProps,
+    Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'children'> {
+  drop?: DropDirection;
+  align?: AlignType;
+  focusFirstItemOnShow?: boolean | 'keyboard';
+  navbar?: boolean;
+  autoClose?: boolean | 'outside' | 'inside';
+}
+
+const propTypes = {
+  /** @default 'dropdown' */
+  bsPrefix: PropTypes.string,
+  /**
+   * Determines the direction and location of the Menu in relation to it's Toggle.
+   */
+  drop: PropTypes.oneOf<DropDirection>([
+    'up',
+    'up-centered',
+    'start',
+    'end',
+    'down',
+    'down-centered',
+  ]),
+
+  as: PropTypes.elementType,
+
+  /**
+   * Aligns the dropdown menu to the specified side of the Dropdown toggle. You can
+   * also align the menu responsively for breakpoints starting at `sm` and up.
+   * The alignment direction will affect the specified breakpoint or larger.
+   *
+   * *Note: Using responsive alignment will disable Popper usage for positioning.*
+   *
+   * @type {"start"|"end"|{ sm: "start"|"end" }|{ md: "start"|"end" }|{ lg: "start"|"end" }|{ xl: "start"|"end"}|{ xxl: "start"|"end"} }
+   */
+  align: alignPropType,
+
+  /**
+   * Whether or not the Dropdown is visible.
+   *
+   * @controllable onToggle
+   */
+  show: PropTypes.bool,
+
+  /**
+   * A callback fired when the Dropdown wishes to change visibility. Called with the requested
+   * `show` value, the DOM event, and the source that fired it: `'click'`,`'keydown'`,`'rootClose'`, or `'select'`.
+   *
+   * ```js
+   * function(
+   *   nextShow: boolean,
+   *   meta: ToggleMetadata,
+   * ): void
+   * ```
+   *
+   * @controllable show
+   */
+  onToggle: PropTypes.func,
+
+  /**
+   * A callback fired when a menu item is selected.
+   *
+   * ```js
+   * (eventKey: any, event: Object) => any
+   * ```
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Controls the focus behavior for when the Dropdown is opened. Set to
+   * `true` to always focus the first menu item, `keyboard` to focus only when
+   * navigating via the keyboard, or `false` to disable completely
+   *
+   * The Default behavior is `false` **unless** the Menu has a `role="menu"`
+   * where it will default to `keyboard` to match the recommended [ARIA Authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton).
+   */
+  focusFirstItemOnShow: PropTypes.oneOf([false, true, 'keyboard']),
+
+  /** @private */
+  navbar: PropTypes.bool,
+
+  /**
+   * Controls the auto close behaviour of the dropdown when clicking outside of
+   * the button or the list.
+   */
+  autoClose: PropTypes.oneOf([true, 'outside', 'inside', false]),
+};
+
+const Dropdown: BsPrefixRefForwardingComponent<'div', DropdownProps> =
+  React.forwardRef<HTMLElement, DropdownProps>((pProps, ref) => {
+    const {
+      bsPrefix,
+      drop = 'down',
+      show,
+      className,
+      align = 'start',
+      onSelect,
+      onToggle,
+      focusFirstItemOnShow,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      navbar: _4,
+      autoClose = true,
+      ...props
+    } = useUncontrolled(pProps, { show: 'onToggle' });
+
+    const isInputGroup = useContext(InputGroupContext);
+    const prefix = useBootstrapPrefix(bsPrefix, 'dropdown');
+    const isRTL = useIsRTL();
+
+    const isClosingPermitted = (source: string): boolean => {
+      // autoClose=false only permits close on button click
+      if (autoClose === false) return source === 'click';
+
+      // autoClose=inside doesn't permit close on rootClose
+      if (autoClose === 'inside') return source !== 'rootClose';
+
+      // autoClose=outside doesn't permit close on select
+      if (autoClose === 'outside') return source !== 'select';
+
+      return true;
+    };
+
+    const handleToggle = useEventCallback(
+      (nextShow: boolean, meta: ToggleMetadata) => {
+        /** Checking if target of event is ToggleButton,
+         * if it is then nullify mousedown event
+         */
+        const isToggleButton = (
+          meta.originalEvent?.target as HTMLElement
+        )?.classList.contains('dropdown-toggle');
+
+        if (isToggleButton && meta.source === 'mousedown') {
+          return;
+        }
+
+        if (
+          meta.originalEvent!.currentTarget === document &&
+          (meta.source !== 'keydown' ||
+            (meta.originalEvent as any).key === 'Escape')
+        )
+          meta.source = 'rootClose';
+
+        if (isClosingPermitted(meta.source!)) onToggle?.(nextShow, meta);
+      },
+    );
+
+    const alignEnd = align === 'end';
+    const placement = getDropdownMenuPlacement(alignEnd, drop, isRTL);
+
+    const contextValue = useMemo(
+      () => ({
+        align,
+        drop,
+        isRTL,
+      }),
+      [align, drop, isRTL],
+    );
+
+    const directionClasses = {
+      down: prefix,
+      'down-centered': `${prefix}-center`,
+      up: 'dropup',
+      'up-centered': 'dropup-center dropup',
+      end: 'dropend',
+      start: 'dropstart',
+    };
+
+    return (
+      <DropdownContext.Provider value={contextValue}>
+        <BaseDropdown
+          placement={placement}
+          show={show}
+          onSelect={onSelect}
+          onToggle={handleToggle}
+          focusFirstItemOnShow={focusFirstItemOnShow}
+          itemSelector={`.${prefix}-item:not(.disabled):not(:disabled)`}
+        >
+          {isInputGroup ? (
+            props.children
+          ) : (
+            <Component
+              {...props}
+              ref={ref}
+              className={classNames(
+                className,
+                show && 'show',
+                directionClasses[drop!],
+              )}
+            />
+          )}
+        </BaseDropdown>
+      </DropdownContext.Provider>
+    );
+  }) as typeof Dropdown;
+
+Dropdown.displayName = 'Dropdown';
+Dropdown.propTypes = propTypes;
+
+export default Object.assign(Dropdown, {
+  Toggle: DropdownToggle,
+  Menu: DropdownMenu,
+  Item: DropdownItem,
+  ItemText: DropdownItemText,
+  Divider: DropdownDivider,
+  Header: DropdownHeader,
+});
diff --git a/react/DropdownButton.tsx b/react/DropdownButton.tsx
new file mode 100644
index 0000000..e55d491
--- /dev/null
+++ b/react/DropdownButton.tsx
@@ -0,0 +1,144 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import Dropdown, { DropdownProps } from './Dropdown';
+import DropdownToggle, { PropsFromToggle } from './DropdownToggle';
+import DropdownMenu, { DropdownMenuVariant } from './DropdownMenu';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { alignPropType } from './types';
+
+export interface DropdownButtonProps
+  extends Omit<DropdownProps, 'title'>,
+    PropsFromToggle,
+    BsPrefixProps {
+  title: React.ReactNode;
+  menuRole?: string;
+  renderMenuOnMount?: boolean;
+  rootCloseEvent?: 'click' | 'mousedown';
+  menuVariant?: DropdownMenuVariant;
+  flip?: boolean;
+}
+
+const propTypes = {
+  /**
+   * An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.
+   * @type {string}
+   */
+  id: PropTypes.string,
+
+  /** An `href` passed to the Toggle component */
+  href: PropTypes.string,
+
+  /** An `onClick` handler passed to the Toggle component */
+  onClick: PropTypes.func,
+
+  /** The content of the non-toggle Button.  */
+  title: PropTypes.node.isRequired,
+
+  /** Disables both Buttons  */
+  disabled: PropTypes.bool,
+
+  /**
+   * Aligns the dropdown menu.
+   *
+   * _see [DropdownMenu](#dropdown-menu-props) for more details_
+   *
+   * @type {"start"|"end"|{ sm: "start"|"end" }|{ md: "start"|"end" }|{ lg: "start"|"end" }|{ xl: "start"|"end"}|{ xxl: "start"|"end"} }
+   */
+  align: alignPropType,
+
+  /** An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown */
+  menuRole: PropTypes.string,
+
+  /** Whether to render the dropdown menu in the DOM before the first time it is shown */
+  renderMenuOnMount: PropTypes.bool,
+
+  /**
+   *  Which event when fired outside the component will cause it to be closed.
+   *
+   * _see [DropdownMenu](#dropdown-menu-props) for more details_
+   */
+  rootCloseEvent: PropTypes.string,
+
+  /**
+   * Menu color variant.
+   *
+   * Omitting this will use the default light color.
+   */
+  menuVariant: PropTypes.oneOf<DropdownMenuVariant>(['dark']),
+
+  /**
+   * Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to
+   * Popper.js's flip [docs](https://popper.js.org/docs/v2/modifiers/flip/).
+   *
+   */
+  flip: PropTypes.bool,
+
+  /** @ignore */
+  bsPrefix: PropTypes.string,
+  /** @ignore */
+  variant: PropTypes.string,
+  /** @ignore */
+  size: PropTypes.string,
+};
+
+/**
+ * A convenience component for simple or general use dropdowns. Renders a `Button` toggle and all `children`
+ * are passed directly to the default `Dropdown.Menu`. This component accepts all of
+ * [`Dropdown`'s props](#dropdown-props).
+ *
+ * _All unknown props are passed through to the `Dropdown` component._ Only
+ * the Button `variant`, `size` and `bsPrefix` props are passed to the toggle,
+ * along with menu-related props are passed to the `Dropdown.Menu`
+ */
+const DropdownButton: BsPrefixRefForwardingComponent<
+  'div',
+  DropdownButtonProps
+> = React.forwardRef<HTMLDivElement, DropdownButtonProps>(
+  (
+    {
+      title,
+      children,
+      bsPrefix,
+      rootCloseEvent,
+      variant,
+      size,
+      menuRole,
+      renderMenuOnMount,
+      disabled,
+      href,
+      id,
+      menuVariant,
+      flip,
+      ...props
+    },
+    ref,
+  ) => (
+    <Dropdown ref={ref} {...props}>
+      <DropdownToggle
+        id={id}
+        href={href}
+        size={size}
+        variant={variant}
+        disabled={disabled}
+        childBsPrefix={bsPrefix}
+      >
+        {title}
+      </DropdownToggle>
+      <DropdownMenu
+        role={menuRole}
+        renderOnMount={renderMenuOnMount}
+        rootCloseEvent={rootCloseEvent}
+        variant={menuVariant}
+        flip={flip}
+      >
+        {children}
+      </DropdownMenu>
+    </Dropdown>
+  ),
+) as typeof DropdownButton;
+
+DropdownButton.displayName = 'DropdownButton';
+DropdownButton.propTypes = propTypes;
+
+export default DropdownButton;
diff --git a/react/DropdownContext.ts b/react/DropdownContext.ts
new file mode 100644
index 0000000..62d0218
--- /dev/null
+++ b/react/DropdownContext.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { AlignType } from './types';
+
+export type DropDirection =
+  | 'up'
+  | 'up-centered'
+  | 'start'
+  | 'end'
+  | 'down'
+  | 'down-centered';
+
+export type DropdownContextValue = {
+  align?: AlignType;
+  drop?: DropDirection;
+  isRTL?: boolean;
+};
+
+const DropdownContext = React.createContext<DropdownContextValue>({});
+DropdownContext.displayName = 'DropdownContext';
+
+export default DropdownContext;
diff --git a/react/DropdownDivider.tsx b/react/DropdownDivider.tsx
new file mode 100644
index 0000000..e767055
--- /dev/null
+++ b/react/DropdownDivider.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface DropdownDividerProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const DropdownDivider: BsPrefixRefForwardingComponent<
+  'hr',
+  DropdownDividerProps
+> = React.forwardRef<HTMLElement, DropdownDividerProps>(
+  (
+    { className, bsPrefix, as: Component = 'hr', role = 'separator', ...props },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'dropdown-divider');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        role={role}
+        {...props}
+      />
+    );
+  },
+) as typeof DropdownDivider;
+
+DropdownDivider.displayName = 'DropdownDivider';
+
+export default DropdownDivider;
diff --git a/react/DropdownHeader.tsx b/react/DropdownHeader.tsx
new file mode 100644
index 0000000..018824e
--- /dev/null
+++ b/react/DropdownHeader.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface DropdownHeaderProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const DropdownHeader: BsPrefixRefForwardingComponent<
+  'div',
+  DropdownHeaderProps
+> = React.forwardRef<HTMLElement, DropdownHeaderProps>(
+  (
+    { className, bsPrefix, as: Component = 'div', role = 'heading', ...props },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'dropdown-header');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        role={role}
+        {...props}
+      />
+    );
+  },
+) as typeof DropdownHeader;
+
+DropdownHeader.displayName = 'DropdownHeader';
+
+export default DropdownHeader;
diff --git a/react/DropdownItem.tsx b/react/DropdownItem.tsx
new file mode 100644
index 0000000..377ab02
--- /dev/null
+++ b/react/DropdownItem.tsx
@@ -0,0 +1,91 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import {
+  useDropdownItem,
+  DropdownItemProps as BaseDropdownItemProps,
+} from '@restart/ui/DropdownItem';
+import Anchor from '@restart/ui/Anchor';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface DropdownItemProps
+  extends BaseDropdownItemProps,
+    BsPrefixProps {}
+
+const propTypes = {
+  /** @default 'dropdown-item' */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Highlight the menu item as active.
+   */
+  active: PropTypes.bool,
+
+  /**
+   * Disable the menu item, making it unselectable.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Value passed to the `onSelect` handler, useful for identifying the selected menu item.
+   */
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * HTML `href` attribute corresponding to `a.href`.
+   */
+  href: PropTypes.string,
+
+  /**
+   * Callback fired when the menu item is clicked.
+   */
+  onClick: PropTypes.func,
+
+  as: PropTypes.elementType,
+};
+
+const DropdownItem: BsPrefixRefForwardingComponent<'a', DropdownItemProps> =
+  React.forwardRef(
+    (
+      {
+        bsPrefix,
+        className,
+        eventKey,
+        disabled = false,
+        onClick,
+        active,
+        as: Component = Anchor,
+        ...props
+      },
+      ref,
+    ) => {
+      const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-item');
+      const [dropdownItemProps, meta] = useDropdownItem({
+        key: eventKey,
+        href: props.href,
+        disabled,
+        onClick,
+        active,
+      });
+
+      return (
+        <Component
+          {...props}
+          {...dropdownItemProps}
+          ref={ref}
+          className={classNames(
+            className,
+            prefix,
+            meta.isActive && 'active',
+            disabled && 'disabled',
+          )}
+        />
+      );
+    },
+  ) as typeof DropdownItem;
+
+DropdownItem.displayName = 'DropdownItem';
+DropdownItem.propTypes = propTypes;
+
+export default DropdownItem;
diff --git a/react/DropdownItemText.tsx b/react/DropdownItemText.tsx
new file mode 100644
index 0000000..11e5477
--- /dev/null
+++ b/react/DropdownItemText.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface DropdownItemTextProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const DropdownItemText: BsPrefixRefForwardingComponent<
+  'span',
+  DropdownItemTextProps
+> = React.forwardRef<HTMLElement, DropdownItemTextProps>(
+  ({ className, bsPrefix, as: Component = 'span', ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'dropdown-item-text');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        {...props}
+      />
+    );
+  },
+) as typeof DropdownItemText;
+
+DropdownItemText.displayName = 'DropdownItemText';
+
+export default DropdownItemText;
diff --git a/react/DropdownMenu.tsx b/react/DropdownMenu.tsx
new file mode 100644
index 0000000..1b6a4e4
--- /dev/null
+++ b/react/DropdownMenu.tsx
@@ -0,0 +1,231 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import {
+  useDropdownMenu,
+  UseDropdownMenuOptions,
+} from '@restart/ui/DropdownMenu';
+import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import warning from 'warning';
+import DropdownContext, { DropDirection } from './DropdownContext';
+import InputGroupContext from './InputGroupContext';
+import NavbarContext from './NavbarContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+import useWrappedRefWithWarning from './useWrappedRefWithWarning';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { AlignType, AlignDirection, alignPropType, Placement } from './types';
+
+export type DropdownMenuVariant = 'dark' | string;
+
+export interface DropdownMenuProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  show?: boolean;
+  renderOnMount?: boolean;
+  flip?: boolean;
+  align?: AlignType;
+  rootCloseEvent?: 'click' | 'mousedown';
+  popperConfig?: UseDropdownMenuOptions['popperConfig'];
+  variant?: DropdownMenuVariant;
+}
+
+const propTypes = {
+  /**
+   * @default 'dropdown-menu'
+   */
+  bsPrefix: PropTypes.string,
+
+  /** Controls the visibility of the Dropdown menu  */
+  show: PropTypes.bool,
+
+  /** Whether to render the dropdown menu in the DOM before the first time it is shown */
+  renderOnMount: PropTypes.bool,
+
+  /** Have the dropdown switch to it's opposite placement when necessary to stay on screen. */
+  flip: PropTypes.bool,
+
+  /**
+   * Aligns the dropdown menu to the specified side of the container. You can also align
+   * the menu responsively for breakpoints starting at `sm` and up. The alignment
+   * direction will affect the specified breakpoint or larger.
+   *
+   * *Note: Using responsive alignment will disable Popper usage for positioning.*
+   *
+   * @type {"start"|"end"|{ sm: "start"|"end" }|{ md: "start"|"end" }|{ lg: "start"|"end" }|{ xl: "start"|"end"}|{ xxl: "start"|"end"} }
+   */
+  align: alignPropType,
+
+  /**
+   * Which event when fired outside the component will cause it to be closed
+   *
+   * *Note: For custom dropdown components, you will have to pass the
+   * `rootCloseEvent` to `<RootCloseWrapper>` in your custom dropdown menu
+   * component ([similarly to how it is implemented in `<Dropdown.Menu>`](https://github.com/react-bootstrap/react-bootstrap/blob/v0.31.5/src/DropdownMenu.js#L115-L119)).*
+   */
+  rootCloseEvent: PropTypes.oneOf(['click', 'mousedown']),
+
+  /**
+   * Control the rendering of the DropdownMenu. All non-menu props
+   * (listed here) are passed through to the `as` Component.
+   *
+   * If providing a custom, non DOM, component. the `show`, `close` and `align` props
+   * are also injected and should be handled appropriately.
+   */
+  as: PropTypes.elementType,
+
+  /**
+   * A set of popper options and props passed directly to Popper.
+   */
+  popperConfig: PropTypes.object,
+
+  /**
+   * Menu color variant.
+   *
+   * Omitting this will use the default light color.
+   */
+  variant: PropTypes.string,
+};
+
+export function getDropdownMenuPlacement(
+  alignEnd: boolean,
+  dropDirection?: DropDirection,
+  isRTL?: boolean,
+) {
+  const topStart = isRTL ? 'top-end' : 'top-start';
+  const topEnd = isRTL ? 'top-start' : 'top-end';
+  const bottomStart = isRTL ? 'bottom-end' : 'bottom-start';
+  const bottomEnd = isRTL ? 'bottom-start' : 'bottom-end';
+  const leftStart = isRTL ? 'right-start' : 'left-start';
+  const leftEnd = isRTL ? 'right-end' : 'left-end';
+  const rightStart = isRTL ? 'left-start' : 'right-start';
+  const rightEnd = isRTL ? 'left-end' : 'right-end';
+
+  let placement: Placement = alignEnd ? bottomEnd : bottomStart;
+  if (dropDirection === 'up') placement = alignEnd ? topEnd : topStart;
+  else if (dropDirection === 'end')
+    placement = alignEnd ? rightEnd : rightStart;
+  else if (dropDirection === 'start')
+    placement = alignEnd ? leftEnd : leftStart;
+  else if (dropDirection === 'down-centered') placement = 'bottom';
+  else if (dropDirection === 'up-centered') placement = 'top';
+  return placement;
+}
+
+const DropdownMenu: BsPrefixRefForwardingComponent<'div', DropdownMenuProps> =
+  React.forwardRef<HTMLElement, DropdownMenuProps>(
+    (
+      {
+        bsPrefix,
+        className,
+        align,
+        rootCloseEvent,
+        flip = true,
+        show: showProps,
+        renderOnMount,
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        popperConfig,
+        variant,
+        ...props
+      },
+      ref,
+    ) => {
+      let alignEnd = false;
+      const isNavbar = useContext(NavbarContext);
+      const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-menu');
+      const { align: contextAlign, drop, isRTL } = useContext(DropdownContext);
+      align = align || contextAlign;
+      const isInputGroup = useContext(InputGroupContext);
+
+      const alignClasses: string[] = [];
+      if (align) {
+        if (typeof align === 'object') {
+          const keys = Object.keys(align);
+
+          warning(
+            keys.length === 1,
+            'There should only be 1 breakpoint when passing an object to `align`',
+          );
+
+          if (keys.length) {
+            const brkPoint = keys[0];
+            const direction: AlignDirection = align[brkPoint];
+
+            // .dropdown-menu-end is required for responsively aligning
+            // left in addition to align left classes.
+            alignEnd = direction === 'start';
+            alignClasses.push(`${prefix}-${brkPoint}-${direction}`);
+          }
+        } else if (align === 'end') {
+          alignEnd = true;
+        }
+      }
+
+      const placement = getDropdownMenuPlacement(alignEnd, drop, isRTL);
+
+      const [menuProps, { hasShown, popper, show, toggle }] = useDropdownMenu({
+        flip,
+        rootCloseEvent,
+        show: showProps,
+        usePopper: !isNavbar && alignClasses.length === 0,
+        offset: [0, 2],
+        popperConfig,
+        placement,
+      });
+
+      menuProps.ref = useMergedRefs(
+        useWrappedRefWithWarning(ref, 'DropdownMenu'),
+        menuProps.ref,
+      );
+
+      useIsomorphicEffect(() => {
+        // Popper's initial position for the menu is incorrect when
+        // renderOnMount=true. Need to call update() to correct it.
+        if (show) popper?.update();
+      }, [show]);
+
+      if (!hasShown && !renderOnMount && !isInputGroup) return null;
+
+      // For custom components provide additional, non-DOM, props;
+      if (typeof Component !== 'string') {
+        menuProps.show = show;
+        menuProps.close = () => toggle?.(false);
+        menuProps.align = align;
+      }
+
+      let style = props.style;
+      if (popper?.placement) {
+        // we don't need the default popper style,
+        // menus are display: none when not shown.
+        style = { ...props.style, ...menuProps.style };
+        props['x-placement'] = popper.placement;
+      }
+
+      return (
+        <Component
+          {...props}
+          {...menuProps}
+          style={style}
+          // Bootstrap css requires this data attrib to style responsive menus.
+          {...((alignClasses.length || isNavbar) && {
+            'data-bs-popper': 'static',
+          })}
+          className={classNames(
+            className,
+            prefix,
+            show && 'show',
+            alignEnd && `${prefix}-end`,
+            variant && `${prefix}-${variant}`,
+            ...alignClasses,
+          )}
+        />
+      );
+    },
+  ) as typeof DropdownMenu;
+
+DropdownMenu.displayName = 'DropdownMenu';
+DropdownMenu.propTypes = propTypes;
+
+export default DropdownMenu;
diff --git a/react/DropdownToggle.tsx b/react/DropdownToggle.tsx
new file mode 100644
index 0000000..0a3ad39
--- /dev/null
+++ b/react/DropdownToggle.tsx
@@ -0,0 +1,98 @@
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import DropdownContext from '@restart/ui/DropdownContext';
+import { useDropdownToggle } from '@restart/ui/DropdownToggle';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import Button, { ButtonProps, CommonButtonProps } from './Button';
+import { BsPrefixRefForwardingComponent } from './helpers';
+import { useBootstrapPrefix } from './ThemeProvider';
+import useWrappedRefWithWarning from './useWrappedRefWithWarning';
+
+export interface DropdownToggleProps extends Omit<ButtonProps, 'as'> {
+  as?: React.ElementType;
+  split?: boolean;
+  childBsPrefix?: string;
+}
+
+type DropdownToggleComponent = BsPrefixRefForwardingComponent<
+  'button',
+  DropdownToggleProps
+>;
+
+export type PropsFromToggle = Partial<
+  Pick<React.ComponentPropsWithRef<DropdownToggleComponent>, CommonButtonProps>
+>;
+
+const propTypes = {
+  /**
+   * @default 'dropdown-toggle'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * An html id attribute, necessary for assistive technologies, such as screen readers.
+   * @type {string|number}
+   */
+  id: PropTypes.string,
+
+  split: PropTypes.bool,
+
+  as: PropTypes.elementType,
+
+  /**
+   * to passthrough to the underlying button or whatever from DropdownButton
+   * @private
+   */
+  childBsPrefix: PropTypes.string,
+};
+
+const DropdownToggle: DropdownToggleComponent = React.forwardRef(
+  (
+    {
+      bsPrefix,
+      split,
+      className,
+      childBsPrefix,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = Button,
+      ...props
+    }: DropdownToggleProps,
+    ref,
+  ) => {
+    const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-toggle');
+    const dropdownContext = useContext(DropdownContext);
+
+    if (childBsPrefix !== undefined) {
+      (props as any).bsPrefix = childBsPrefix;
+    }
+
+    const [toggleProps] = useDropdownToggle();
+
+    toggleProps.ref = useMergedRefs(
+      toggleProps.ref,
+      useWrappedRefWithWarning(ref, 'DropdownToggle'),
+    );
+
+    // This intentionally forwards size and variant (if set) to the
+    // underlying component, to allow it to render size and style variants.
+    return (
+      <Component
+        className={classNames(
+          className,
+          prefix,
+          split && `${prefix}-split`,
+          dropdownContext?.show && 'show',
+        )}
+        {...toggleProps}
+        {...props}
+      />
+    );
+  },
+) as typeof DropdownToggle;
+
+DropdownToggle.displayName = 'DropdownToggle';
+DropdownToggle.propTypes = propTypes;
+
+export default DropdownToggle;
diff --git a/react/ElementChildren.tsx b/react/ElementChildren.tsx
new file mode 100644
index 0000000..5a8c066
--- /dev/null
+++ b/react/ElementChildren.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+/**
+ * Iterates through children that are typically specified as `props.children`,
+ * but only maps over children that are "valid elements".
+ *
+ * The mapFunction provided index will be normalised to the components mapped,
+ * so an invalid component would not increase the index.
+ *
+ */
+function map<P = any>(
+  children,
+  func: (el: React.ReactElement<P>, index: number) => any,
+) {
+  let index = 0;
+
+  return React.Children.map(children, (child) =>
+    React.isValidElement<P>(child) ? func(child, index++) : child,
+  );
+}
+
+/**
+ * Iterates through children that are "valid elements".
+ *
+ * The provided forEachFunc(child, index) will be called for each
+ * leaf child with the index reflecting the position relative to "valid components".
+ */
+function forEach<P = any>(
+  children,
+  func: (el: React.ReactElement<P>, index: number) => void,
+) {
+  let index = 0;
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement<P>(child)) func(child, index++);
+  });
+}
+
+/**
+ * Finds whether a component's `children` prop includes a React element of the
+ * specified type.
+ */
+function hasChildOfType<P = any>(
+  children: React.ReactNode,
+  type: string | React.JSXElementConstructor<P>,
+): boolean {
+  return React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === type,
+  );
+}
+
+export { map, forEach, hasChildOfType };
diff --git a/react/Fade.tsx b/react/Fade.tsx
new file mode 100644
index 0000000..1595246
--- /dev/null
+++ b/react/Fade.tsx
@@ -0,0 +1,148 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useCallback } from 'react';
+import Transition, {
+  TransitionStatus,
+  ENTERED,
+  ENTERING,
+} from 'react-transition-group/Transition';
+import { TransitionCallbacks } from '@restart/ui/types';
+import { getReactVersion } from '@restart/ui/utils';
+import transitionEndListener from './transitionEndListener';
+import triggerBrowserReflow from './triggerBrowserReflow';
+import TransitionWrapper from './TransitionWrapper';
+
+export interface FadeProps extends TransitionCallbacks {
+  className?: string;
+  in?: boolean;
+  mountOnEnter?: boolean;
+  unmountOnExit?: boolean;
+  appear?: boolean;
+  timeout?: number;
+  children: React.ReactElement;
+  transitionClasses?: Record<string, string>;
+}
+
+const propTypes = {
+  /**
+   * Show the component; triggers the fade in or fade out animation
+   */
+  in: PropTypes.bool,
+
+  /**
+   * Wait until the first "enter" transition to mount the component (add it to the DOM)
+   */
+  mountOnEnter: PropTypes.bool,
+
+  /**
+   * Unmount the component (remove it from the DOM) when it is faded out
+   */
+  unmountOnExit: PropTypes.bool,
+
+  /**
+   * Run the fade in animation when the component mounts, if it is initially
+   * shown
+   */
+  appear: PropTypes.bool,
+
+  /**
+   * Duration of the fade animation in milliseconds, to ensure that finishing
+   * callbacks are fired even if the original browser transition end events are
+   * canceled
+   */
+  timeout: PropTypes.number,
+
+  /**
+   * Callback fired before the component fades in
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired after the component starts to fade in
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired after the has component faded in
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired before the component fades out
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired after the component starts to fade out
+   */
+  onExiting: PropTypes.func,
+  /**
+   * Callback fired after the component has faded out
+   */
+  onExited: PropTypes.func,
+
+  /**
+   * You must provide a single JSX child element to this component and that element cannot be a \<React.Fragment\>
+   */
+  children: PropTypes.element.isRequired,
+
+  /**
+   * Applies additional specified classes during the transition. Takes an object
+   * where the keys correspond to the Transition status
+   */
+  transitionClasses: PropTypes.object,
+};
+
+const fadeStyles = {
+  [ENTERING]: 'show',
+  [ENTERED]: 'show',
+};
+
+const Fade = React.forwardRef<Transition<any>, FadeProps>(
+  ({ className, children, transitionClasses = {}, onEnter, ...rest }, ref) => {
+    const props = {
+      in: false,
+      timeout: 300,
+      mountOnEnter: false,
+      unmountOnExit: false,
+      appear: false,
+      ...rest,
+    };
+
+    const handleEnter = useCallback(
+      (node, isAppearing) => {
+        triggerBrowserReflow(node);
+        onEnter?.(node, isAppearing);
+      },
+      [onEnter],
+    );
+
+    const { major } = getReactVersion();
+    const childRef = major >= 19 ? (children as any).props.ref : (children as any).ref;
+
+    return (
+      <TransitionWrapper
+        ref={ref}
+        addEndListener={transitionEndListener}
+        {...props}
+        onEnter={handleEnter}
+        childRef={childRef}
+      >
+        {(status: TransitionStatus, innerProps: Record<string, unknown>) =>
+          React.cloneElement(children, {
+            ...innerProps,
+            className: classNames(
+              'fade',
+              className,
+              children.props.className,
+              fadeStyles[status],
+              transitionClasses[status],
+            ),
+          })
+        }
+      </TransitionWrapper>
+    );
+  },
+);
+
+Fade.propTypes = propTypes as any;
+Fade.displayName = 'Fade';
+
+export default Fade;
diff --git a/react/Feedback.tsx b/react/Feedback.tsx
new file mode 100644
index 0000000..61b951a
--- /dev/null
+++ b/react/Feedback.tsx
@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { AsProp, BsPrefixRefForwardingComponent } from './helpers';
+
+export type FeedbackType = 'valid' | 'invalid';
+
+export interface FeedbackProps
+  extends AsProp,
+    React.HTMLAttributes<HTMLElement> {
+  // I think this is because we use BsPrefixRefForwardingComponent below
+  // which includes bsPrefix.
+  bsPrefix?: never;
+  type?: FeedbackType;
+  tooltip?: boolean;
+}
+
+const propTypes = {
+  /**
+   * Specify whether the feedback is for valid or invalid fields
+   *
+   * @type {('valid'|'invalid')}
+   */
+  type: PropTypes.string,
+
+  /** Display feedback as a tooltip. */
+  tooltip: PropTypes.bool,
+
+  as: PropTypes.elementType,
+};
+
+const Feedback: BsPrefixRefForwardingComponent<'div', FeedbackProps> =
+  React.forwardRef(
+    // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+    (
+      {
+        as: Component = 'div',
+        className,
+        type = 'valid',
+        tooltip = false,
+        ...props
+      },
+      ref,
+    ) => (
+      <Component
+        {...props}
+        ref={ref}
+        className={classNames(
+          className,
+          `${type}-${tooltip ? 'tooltip' : 'feedback'}`,
+        )}
+      />
+    ),
+  ) as typeof Feedback;
+
+Feedback.displayName = 'Feedback';
+Feedback.propTypes = propTypes;
+
+export default Feedback;
diff --git a/react/Figure.tsx b/react/Figure.tsx
new file mode 100644
index 0000000..268f684
--- /dev/null
+++ b/react/Figure.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import FigureImage from './FigureImage';
+import FigureCaption from './FigureCaption';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface FigureProps
+  extends BsPrefixProps,
+    React.AnchorHTMLAttributes<HTMLElement> {}
+
+const Figure: BsPrefixRefForwardingComponent<'figure', FigureProps> =
+  React.forwardRef<HTMLElement, FigureProps>(
+    ({ className, bsPrefix, as: Component = 'figure', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'figure');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof Figure;
+
+Figure.displayName = 'Figure';
+
+export default Object.assign(Figure, {
+  Image: FigureImage,
+  Caption: FigureCaption,
+});
diff --git a/react/FigureCaption.tsx b/react/FigureCaption.tsx
new file mode 100644
index 0000000..345cd90
--- /dev/null
+++ b/react/FigureCaption.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface FigureCaptionProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const FigureCaption: BsPrefixRefForwardingComponent<
+  'figcaption',
+  FigureCaptionProps
+> = React.forwardRef<HTMLElement, FigureCaptionProps>(
+  ({ className, bsPrefix, as: Component = 'figcaption', ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'figure-caption');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        {...props}
+      />
+    );
+  },
+) as typeof FigureCaption;
+
+FigureCaption.displayName = 'FigureCaption';
+
+export default FigureCaption;
diff --git a/react/FigureImage.tsx b/react/FigureImage.tsx
new file mode 100644
index 0000000..2995e1a
--- /dev/null
+++ b/react/FigureImage.tsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import Image, { ImageProps, propTypes as imagePropTypes } from './Image';
+
+const FigureImage = React.forwardRef<HTMLImageElement, ImageProps>(
+  ({ className, fluid = true, ...props }, ref) => (
+    <Image
+      ref={ref}
+      {...props}
+      fluid={fluid}
+      className={classNames(className, 'figure-img')}
+    />
+  ),
+);
+
+FigureImage.displayName = 'FigureImage';
+FigureImage.propTypes = imagePropTypes;
+
+export default FigureImage;
diff --git a/react/FloatingLabel.tsx b/react/FloatingLabel.tsx
new file mode 100644
index 0000000..86b6c13
--- /dev/null
+++ b/react/FloatingLabel.tsx
@@ -0,0 +1,50 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+
+import FormGroup, { FormGroupProps } from './FormGroup';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { useBootstrapPrefix } from './ThemeProvider';
+
+export interface FloatingLabelProps extends FormGroupProps, BsPrefixProps {
+  controlId?: string;
+  label: React.ReactNode;
+}
+
+const propTypes = {
+  as: PropTypes.elementType,
+
+  /**
+   * Sets `id` on `<FormControl>` and `htmlFor` on `<label>`.
+   */
+  controlId: PropTypes.string,
+
+  /**
+   * Form control label.
+   */
+  label: PropTypes.node.isRequired,
+};
+
+const FloatingLabel: BsPrefixRefForwardingComponent<'div', FloatingLabelProps> =
+  React.forwardRef(
+    ({ bsPrefix, className, children, controlId, label, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'form-floating');
+
+      return (
+        <FormGroup
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          controlId={controlId}
+          {...props}
+        >
+          {children}
+          <label htmlFor={controlId}>{label}</label>
+        </FormGroup>
+      );
+    },
+  ) as typeof FloatingLabel;
+
+FloatingLabel.displayName = 'FloatingLabel';
+FloatingLabel.propTypes = propTypes;
+
+export default FloatingLabel;
diff --git a/react/Form.tsx b/react/Form.tsx
new file mode 100644
index 0000000..d8efefe
--- /dev/null
+++ b/react/Form.tsx
@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import FormCheck from './FormCheck';
+import FormControl from './FormControl';
+import FormFloating from './FormFloating';
+import FormGroup from './FormGroup';
+import FormLabel from './FormLabel';
+import FormRange from './FormRange';
+import FormSelect from './FormSelect';
+import FormText from './FormText';
+import Switch from './Switch';
+import FloatingLabel from './FloatingLabel';
+import { BsPrefixRefForwardingComponent, AsProp } from './helpers';
+
+export interface FormProps
+  extends React.FormHTMLAttributes<HTMLFormElement>,
+    AsProp {
+  validated?: boolean;
+}
+
+const propTypes = {
+  /**
+   * The Form `ref` will be forwarded to the underlying element,
+   * which means, unless it's rendered `as` a composite component,
+   * it will be a DOM node, when resolved.
+   *
+   * @type {ReactRef}
+   * @alias ref
+   */
+  _ref: PropTypes.any,
+
+  /**
+   * Mark a form as having been validated. Setting it to `true` will
+   * toggle any validation styles on the forms elements.
+   */
+  validated: PropTypes.bool,
+  as: PropTypes.elementType,
+};
+
+const Form: BsPrefixRefForwardingComponent<'form', FormProps> =
+  React.forwardRef<HTMLFormElement, FormProps>(
+    (
+      {
+        className,
+        validated,
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'form',
+        ...props
+      },
+      ref,
+    ) => (
+      <Component
+        {...props}
+        ref={ref}
+        className={classNames(className, validated && 'was-validated')}
+      />
+    ),
+  ) as typeof Form;
+
+Form.displayName = 'Form';
+Form.propTypes = propTypes as any;
+
+export default Object.assign(Form, {
+  Group: FormGroup,
+  Control: FormControl,
+  Floating: FormFloating,
+  Check: FormCheck,
+  Switch,
+  Label: FormLabel,
+  Text: FormText,
+  Range: FormRange,
+  Select: FormSelect,
+  FloatingLabel,
+});
diff --git a/react/FormCheck.tsx b/react/FormCheck.tsx
new file mode 100644
index 0000000..330a19d
--- /dev/null
+++ b/react/FormCheck.tsx
@@ -0,0 +1,222 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext, useMemo } from 'react';
+import Feedback, { FeedbackType } from './Feedback';
+import FormCheckInput from './FormCheckInput';
+import FormCheckLabel from './FormCheckLabel';
+import FormContext from './FormContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { hasChildOfType } from './ElementChildren';
+
+export type FormCheckType = 'checkbox' | 'radio' | 'switch';
+
+export interface FormCheckProps
+  extends BsPrefixProps,
+    React.InputHTMLAttributes<HTMLInputElement> {
+  inline?: boolean;
+  reverse?: boolean;
+  disabled?: boolean;
+  label?: React.ReactNode;
+  type?: FormCheckType;
+  isValid?: boolean;
+  isInvalid?: boolean;
+  feedbackTooltip?: boolean;
+  feedback?: React.ReactNode;
+  feedbackType?: FeedbackType;
+  bsSwitchPrefix?: string;
+}
+
+const propTypes = {
+  /**
+   * @default 'form-check'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * bsPrefix override for the base switch class.
+   *
+   * @default 'form-switch'
+   */
+  bsSwitchPrefix: PropTypes.string,
+
+  /**
+   * The FormCheck `ref` will be forwarded to the underlying input element,
+   * which means it will be a DOM node, when resolved.
+   *
+   * @type {ReactRef}
+   * @alias ref
+   */
+  _ref: PropTypes.any,
+
+  /**
+   * The underlying HTML element to use when rendering the FormCheck.
+   *
+   * @type {('input'|elementType)}
+   */
+  as: PropTypes.elementType,
+
+  /**
+   * A HTML id attribute, necessary for proper form accessibility.
+   * An id is recommended for allowing label clicks to toggle the check control.
+   *
+   * This is **required** when `type="switch"` due to how they are rendered.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide a function child to manually handle the layout of the FormCheck's inner components.
+   *
+   * ```jsx
+   * <FormCheck>
+   *   <FormCheck.Input isInvalid type={radio} />
+   *   <FormCheck.Label>Allow us to contact you?</FormCheck.Label>
+   *   <Feedback type="invalid">Yo this is required</Feedback>
+   * </FormCheck>
+   * ```
+   */
+  children: PropTypes.node,
+
+  /**
+   * Groups controls horizontally with other `FormCheck`s.
+   */
+  inline: PropTypes.bool,
+
+  /**
+   * Put your checkboxes, radios, and switches on the opposite side.
+   */
+  reverse: PropTypes.bool,
+
+  /**
+   * Disables the control.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * `title` attribute for the underlying `FormCheckLabel`.
+   */
+  title: PropTypes.string,
+
+  /**
+   * Label for the control.
+   */
+  label: PropTypes.node,
+
+  /**
+   * The type of checkable.
+   * @type {('radio' | 'checkbox' | 'switch')}
+   */
+  type: PropTypes.oneOf(['radio', 'checkbox', 'switch']),
+
+  /** Manually style the input as valid */
+  isValid: PropTypes.bool,
+
+  /** Manually style the input as invalid */
+  isInvalid: PropTypes.bool,
+
+  /** Display feedback as a tooltip. */
+  feedbackTooltip: PropTypes.bool,
+
+  /** A message to display when the input is in a validation state */
+  feedback: PropTypes.node,
+
+  /**
+   * Specify whether the feedback is for valid or invalid fields
+   * @type {('valid'|'invalid')}
+   */
+  feedbackType: PropTypes.oneOf(['valid', 'invalid']),
+};
+
+const FormCheck: BsPrefixRefForwardingComponent<'input', FormCheckProps> =
+  React.forwardRef<HTMLInputElement, FormCheckProps>(
+    (
+      {
+        id,
+        bsPrefix,
+        bsSwitchPrefix,
+        inline = false,
+        reverse = false,
+        disabled = false,
+        isValid = false,
+        isInvalid = false,
+        feedbackTooltip = false,
+        feedback,
+        feedbackType,
+        className,
+        style,
+        title = '',
+        type = 'checkbox',
+        label,
+        children,
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as = 'input',
+        ...props
+      },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'form-check');
+      bsSwitchPrefix = useBootstrapPrefix(bsSwitchPrefix, 'form-switch');
+
+      const { controlId } = useContext(FormContext);
+      const innerFormContext = useMemo(
+        () => ({
+          controlId: id || controlId,
+        }),
+        [controlId, id],
+      );
+
+      const hasLabel =
+        (!children && label != null && label !== false) ||
+        hasChildOfType(children, FormCheckLabel);
+
+      const input = (
+        <FormCheckInput
+          {...props}
+          type={type === 'switch' ? 'checkbox' : type}
+          ref={ref}
+          isValid={isValid}
+          isInvalid={isInvalid}
+          disabled={disabled}
+          as={as}
+        />
+      );
+
+      return (
+        <FormContext.Provider value={innerFormContext}>
+          <div
+            style={style}
+            className={classNames(
+              className,
+              hasLabel && bsPrefix,
+              inline && `${bsPrefix}-inline`,
+              reverse && `${bsPrefix}-reverse`,
+              type === 'switch' && bsSwitchPrefix,
+            )}
+          >
+            {children || (
+              <>
+                {input}
+                {hasLabel && (
+                  <FormCheckLabel title={title}>{label}</FormCheckLabel>
+                )}
+                {feedback && (
+                  <Feedback type={feedbackType} tooltip={feedbackTooltip}>
+                    {feedback}
+                  </Feedback>
+                )}
+              </>
+            )}
+          </div>
+        </FormContext.Provider>
+      );
+    },
+  ) as typeof FormCheck;
+
+FormCheck.displayName = 'FormCheck';
+FormCheck.propTypes = propTypes;
+
+export default Object.assign(FormCheck, {
+  Input: FormCheckInput,
+  Label: FormCheckLabel,
+});
diff --git a/react/FormCheckInput.tsx b/react/FormCheckInput.tsx
new file mode 100644
index 0000000..3db6e41
--- /dev/null
+++ b/react/FormCheckInput.tsx
@@ -0,0 +1,86 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import FormContext from './FormContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+type FormCheckInputType = 'checkbox' | 'radio';
+
+export interface FormCheckInputProps
+  extends BsPrefixProps,
+    React.InputHTMLAttributes<HTMLInputElement> {
+  type?: FormCheckInputType;
+  isValid?: boolean;
+  isInvalid?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default 'form-check-input'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The underlying HTML element to use when rendering the FormCheckInput.
+   *
+   * @type {('input'|elementType)}
+   */
+  as: PropTypes.elementType,
+
+  /** A HTML id attribute, necessary for proper form accessibility. */
+  id: PropTypes.string,
+
+  /** The type of checkable. */
+  type: PropTypes.oneOf(['radio', 'checkbox']).isRequired,
+
+  /** Manually style the input as valid */
+  isValid: PropTypes.bool,
+
+  /** Manually style the input as invalid */
+  isInvalid: PropTypes.bool,
+};
+
+const FormCheckInput: BsPrefixRefForwardingComponent<
+  'input',
+  FormCheckInputProps
+> = React.forwardRef<HTMLInputElement, FormCheckInputProps>(
+  (
+    {
+      id,
+      bsPrefix,
+      className,
+      type = 'checkbox',
+      isValid = false,
+      isInvalid = false,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'input',
+      ...props
+    },
+    ref,
+  ) => {
+    const { controlId } = useContext(FormContext);
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'form-check-input');
+
+    return (
+      <Component
+        {...props}
+        ref={ref}
+        type={type}
+        id={id || controlId}
+        className={classNames(
+          className,
+          bsPrefix,
+          isValid && 'is-valid',
+          isInvalid && 'is-invalid',
+        )}
+      />
+    );
+  },
+) as typeof FormCheckInput;
+
+FormCheckInput.displayName = 'FormCheckInput';
+FormCheckInput.propTypes = propTypes;
+
+export default FormCheckInput;
diff --git a/react/FormCheckLabel.tsx b/react/FormCheckLabel.tsx
new file mode 100644
index 0000000..cd061fd
--- /dev/null
+++ b/react/FormCheckLabel.tsx
@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import FormContext from './FormContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+
+import { BsPrefixProps } from './helpers';
+
+export interface FormCheckLabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement>,
+    BsPrefixProps {}
+
+const propTypes = {
+  /**
+   * @default 'form-check-label'
+   */
+  bsPrefix: PropTypes.string,
+
+  /** The HTML for attribute for associating the label with an input */
+  htmlFor: PropTypes.string,
+};
+
+const FormCheckLabel = React.forwardRef<HTMLLabelElement, FormCheckLabelProps>(
+  ({ bsPrefix, className, htmlFor, ...props }, ref) => {
+    const { controlId } = useContext(FormContext);
+
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'form-check-label');
+
+    return (
+      <label // eslint-disable-line jsx-a11y/label-has-associated-control
+        {...props}
+        ref={ref}
+        htmlFor={htmlFor || controlId}
+        className={classNames(className, bsPrefix)}
+      />
+    );
+  },
+);
+
+FormCheckLabel.displayName = 'FormCheckLabel';
+FormCheckLabel.propTypes = propTypes;
+
+export default FormCheckLabel;
diff --git a/react/FormContext.tsx b/react/FormContext.tsx
new file mode 100644
index 0000000..0e6e1ea
--- /dev/null
+++ b/react/FormContext.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+// TODO
+interface FormContextType {
+  controlId?: any;
+}
+
+const FormContext = React.createContext<FormContextType>({});
+
+export default FormContext;
diff --git a/react/FormControl.tsx b/react/FormControl.tsx
new file mode 100644
index 0000000..86f489b
--- /dev/null
+++ b/react/FormControl.tsx
@@ -0,0 +1,158 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import warning from 'warning';
+import Feedback from './Feedback';
+import FormContext from './FormContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+type FormControlElement = HTMLInputElement | HTMLTextAreaElement;
+
+export interface FormControlProps
+  extends BsPrefixProps,
+    Omit<React.InputHTMLAttributes<FormControlElement>, 'size'> {
+  htmlSize?: number;
+  size?: 'sm' | 'lg';
+  plaintext?: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
+  value?: string | string[] | number;
+  onChange?: React.ChangeEventHandler<FormControlElement>;
+  type?: string;
+  isValid?: boolean;
+  isInvalid?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default {'form-control'}
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The FormControl `ref` will be forwarded to the underlying input element,
+   * which means unless `as` is a composite component,
+   * it will be a DOM node, when resolved.
+   *
+   * @type {ReactRef}
+   * @alias ref
+   */
+  _ref: PropTypes.any,
+  /**
+   * Input size variants
+   *
+   * @type {('sm'|'lg')}
+   */
+  size: PropTypes.string,
+
+  /**
+   * The size attribute of the underlying HTML element.
+   * Specifies the visible width in characters if `as` is `'input'`.
+   */
+  htmlSize: PropTypes.number,
+
+  /**
+   * The underlying HTML element to use when rendering the FormControl.
+   *
+   * @type {('input'|'textarea'|elementType)}
+   */
+  as: PropTypes.elementType,
+
+  /**
+   * Render the input as plain text. Generally used along side `readOnly`.
+   */
+  plaintext: PropTypes.bool,
+
+  /** Make the control readonly */
+  readOnly: PropTypes.bool,
+
+  /** Make the control disabled */
+  disabled: PropTypes.bool,
+
+  /**
+   * The `value` attribute of underlying input
+   *
+   * @controllable onChange
+   * */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.number,
+  ]),
+
+  /** A callback fired when the `value` prop changes */
+  onChange: PropTypes.func,
+
+  /**
+   * The HTML input `type`, which is only relevant if `as` is `'input'` (the default).
+   */
+  type: PropTypes.string,
+
+  /**
+   * Uses `controlId` from `<FormGroup>` if not explicitly specified.
+   */
+  id: PropTypes.string,
+
+  /** Add "valid" validation styles to the control */
+  isValid: PropTypes.bool,
+
+  /** Add "invalid" validation styles to the control and accompanying label */
+  isInvalid: PropTypes.bool,
+};
+
+const FormControl: BsPrefixRefForwardingComponent<'input', FormControlProps> =
+  React.forwardRef<FormControlElement, FormControlProps>(
+    (
+      {
+        bsPrefix,
+        type,
+        size,
+        htmlSize,
+        id,
+        className,
+        isValid = false,
+        isInvalid = false,
+        plaintext,
+        readOnly,
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'input',
+        ...props
+      },
+      ref,
+    ) => {
+      const { controlId } = useContext(FormContext);
+
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'form-control');
+
+      warning(
+        controlId == null || !id,
+        '`controlId` is ignored on `<FormControl>` when `id` is specified.',
+      );
+
+      return (
+        <Component
+          {...props}
+          type={type}
+          size={htmlSize}
+          ref={ref}
+          readOnly={readOnly}
+          id={id || controlId}
+          className={classNames(
+            className,
+            plaintext ? `${bsPrefix}-plaintext` : bsPrefix,
+            size && `${bsPrefix}-${size}`,
+            type === 'color' && `${bsPrefix}-color`,
+            isValid && 'is-valid',
+            isInvalid && 'is-invalid',
+          )}
+        />
+      );
+    },
+  ) as typeof FormControl;
+
+FormControl.displayName = 'FormControl';
+FormControl.propTypes = propTypes;
+
+export default Object.assign(FormControl, { Feedback });
diff --git a/react/FormFloating.tsx b/react/FormFloating.tsx
new file mode 100644
index 0000000..a7a0131
--- /dev/null
+++ b/react/FormFloating.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface FormFloatingProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const FormFloating: BsPrefixRefForwardingComponent<'div', FormFloatingProps> =
+  React.forwardRef<HTMLElement, FormFloatingProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'form-floating');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof FormFloating;
+
+FormFloating.displayName = 'FormFloating';
+
+export default FormFloating;
diff --git a/react/FormGroup.tsx b/react/FormGroup.tsx
new file mode 100644
index 0000000..bdb3d7c
--- /dev/null
+++ b/react/FormGroup.tsx
@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useMemo } from 'react';
+
+import FormContext from './FormContext';
+import { AsProp, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface FormGroupProps
+  extends React.HTMLAttributes<HTMLElement>,
+    AsProp {
+  controlId?: string;
+}
+
+const propTypes = {
+  as: PropTypes.elementType,
+
+  /**
+   * Sets `id` on `<FormControl>` and `htmlFor` on `<FormGroup.Label>`.
+   */
+  controlId: PropTypes.string,
+
+  /**
+   * The FormGroup `ref` will be forwarded to the underlying element.
+   * Unless the FormGroup is rendered `as` a composite component,
+   * it will be a DOM node, when resolved.
+   *
+   * @type {ReactRef}
+   * @alias ref
+   */
+  _ref: PropTypes.any,
+};
+
+const FormGroup: BsPrefixRefForwardingComponent<'div', FormGroupProps> =
+  React.forwardRef(
+    (
+      {
+        controlId,
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        ...props
+      },
+      ref,
+    ) => {
+      const context = useMemo(() => ({ controlId }), [controlId]);
+
+      return (
+        <FormContext.Provider value={context}>
+          <Component {...props} ref={ref} />
+        </FormContext.Provider>
+      );
+    },
+  ) as typeof FormGroup;
+
+FormGroup.displayName = 'FormGroup';
+FormGroup.propTypes = propTypes;
+
+export default FormGroup;
diff --git a/react/FormLabel.tsx b/react/FormLabel.tsx
new file mode 100644
index 0000000..2fe27a7
--- /dev/null
+++ b/react/FormLabel.tsx
@@ -0,0 +1,123 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import warning from 'warning';
+
+import Col, { ColProps } from './Col';
+import FormContext from './FormContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+interface FormLabelBaseProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  htmlFor?: string;
+  visuallyHidden?: boolean;
+}
+
+export interface FormLabelOwnProps extends FormLabelBaseProps {
+  column?: false;
+}
+
+export interface FormLabelWithColProps extends FormLabelBaseProps, ColProps {
+  column: true | 'sm' | 'lg';
+}
+
+export type FormLabelProps = FormLabelWithColProps | FormLabelOwnProps;
+
+const propTypes = {
+  /**
+   * @default 'form-label'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Uses `controlId` from `<FormGroup>` if not explicitly specified.
+   */
+  htmlFor: PropTypes.string,
+
+  /**
+   * Renders the FormLabel as a `<Col>` component (accepting all the same props),
+   * as well as adding additional styling for horizontal forms.
+   */
+  column: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['sm', 'lg'])]),
+
+  /**
+   * The FormLabel `ref` will be forwarded to the underlying element.
+   * Unless the FormLabel is rendered `as` a composite component,
+   * it will be a DOM node, when resolved.
+   *
+   * @type {ReactRef}
+   * @alias ref
+   */
+  _ref: PropTypes.any,
+
+  /**
+   * Hides the label visually while still allowing it to be
+   * read by assistive technologies.
+   */
+  visuallyHidden: PropTypes.bool,
+
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+};
+
+const FormLabel: BsPrefixRefForwardingComponent<'label', FormLabelProps> =
+  React.forwardRef<HTMLElement, FormLabelProps>(
+    (
+      {
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'label',
+        bsPrefix,
+        column = false,
+        visuallyHidden = false,
+        className,
+        htmlFor,
+        ...props
+      },
+      ref,
+    ) => {
+      const { controlId } = useContext(FormContext);
+
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'form-label');
+
+      let columnClass = 'col-form-label';
+      if (typeof column === 'string')
+        columnClass = `${columnClass} ${columnClass}-${column}`;
+
+      const classes = classNames(
+        className,
+        bsPrefix,
+        visuallyHidden && 'visually-hidden',
+        column && columnClass,
+      );
+
+      warning(
+        controlId == null || !htmlFor,
+        '`controlId` is ignored on `<FormLabel>` when `htmlFor` is specified.',
+      );
+      htmlFor = htmlFor || controlId;
+
+      if (column)
+        return (
+          <Col
+            ref={ref as React.ForwardedRef<HTMLLabelElement>}
+            as="label"
+            className={classes}
+            htmlFor={htmlFor}
+            {...props}
+          />
+        );
+
+      return (
+        // eslint-disable-next-line jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control
+        <Component ref={ref} className={classes} htmlFor={htmlFor} {...props} />
+      );
+    },
+  ) as typeof FormLabel;
+
+FormLabel.displayName = 'FormLabel';
+FormLabel.propTypes = propTypes;
+
+export default FormLabel;
diff --git a/react/FormRange.tsx b/react/FormRange.tsx
new file mode 100644
index 0000000..ee6c29f
--- /dev/null
+++ b/react/FormRange.tsx
@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixOnlyProps } from './helpers';
+import FormContext from './FormContext';
+
+export interface FormRangeProps
+  extends BsPrefixOnlyProps,
+    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {}
+
+const propTypes = {
+  /**
+   * @default {'form-range'}
+   */
+  bsPrefix: PropTypes.string,
+
+  /** Make the control disabled */
+  disabled: PropTypes.bool,
+
+  /**
+   * The `value` attribute of underlying input
+   *
+   * @controllable onChange
+   * */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string.isRequired),
+    PropTypes.number,
+  ]),
+
+  /** A callback fired when the `value` prop changes */
+  onChange: PropTypes.func,
+
+  /**
+   * Uses `controlId` from `<FormGroup>` if not explicitly specified.
+   */
+  id: PropTypes.string,
+};
+
+const FormRange = React.forwardRef<HTMLInputElement, FormRangeProps>(
+  ({ bsPrefix, className, id, ...props }, ref) => {
+    const { controlId } = useContext(FormContext);
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'form-range');
+
+    return (
+      <input
+        {...props}
+        type="range"
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        id={id || controlId}
+      />
+    );
+  },
+);
+
+FormRange.displayName = 'FormRange';
+FormRange.propTypes = propTypes;
+
+export default FormRange;
diff --git a/react/FormSelect.tsx b/react/FormSelect.tsx
new file mode 100644
index 0000000..5be746c
--- /dev/null
+++ b/react/FormSelect.tsx
@@ -0,0 +1,100 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixOnlyProps, BsPrefixRefForwardingComponent } from './helpers';
+import FormContext from './FormContext';
+
+export interface FormSelectProps
+  extends BsPrefixOnlyProps,
+    Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  htmlSize?: number;
+  size?: 'sm' | 'lg';
+  isValid?: boolean;
+  isInvalid?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default {'form-select'}
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Size variants
+   *
+   * @type {('sm'|'lg')}
+   */
+  size: PropTypes.string,
+
+  /**
+   * The size attribute of the underlying HTML element.
+   * Specifies the number of visible options.
+   */
+  htmlSize: PropTypes.number,
+
+  /** Make the control disabled */
+  disabled: PropTypes.bool,
+
+  /**
+   * The `value` attribute of underlying input
+   *
+   * @controllable onChange
+   * */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.number,
+  ]),
+
+  /** A callback fired when the `value` prop changes */
+  onChange: PropTypes.func,
+
+  /** Add "valid" validation styles to the control */
+  isValid: PropTypes.bool,
+
+  /** Add "invalid" validation styles to the control and accompanying label */
+  isInvalid: PropTypes.bool,
+};
+
+const FormSelect: BsPrefixRefForwardingComponent<'select', FormSelectProps> =
+  React.forwardRef<HTMLSelectElement, FormSelectProps>(
+    (
+      {
+        bsPrefix,
+        size,
+        htmlSize,
+        className,
+        isValid = false,
+        isInvalid = false,
+        id,
+        ...props
+      },
+      ref,
+    ) => {
+      const { controlId } = useContext(FormContext);
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'form-select');
+
+      return (
+        <select
+          {...props}
+          size={htmlSize}
+          ref={ref}
+          className={classNames(
+            className,
+            bsPrefix,
+            size && `${bsPrefix}-${size}`,
+            isValid && `is-valid`,
+            isInvalid && `is-invalid`,
+          )}
+          id={id || controlId}
+        />
+      );
+    },
+  ) as typeof FormSelect;
+
+FormSelect.displayName = 'FormSelect';
+FormSelect.propTypes = propTypes;
+
+export default FormSelect;
diff --git a/react/FormText.tsx b/react/FormText.tsx
new file mode 100644
index 0000000..bb92fb9
--- /dev/null
+++ b/react/FormText.tsx
@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import * as React from 'react';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface FormTextProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  muted?: boolean;
+}
+
+const propTypes = {
+  /** @default 'form-text' */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The FormText `ref` will be forwarded to the underlying element.
+   * Unless the FormText is rendered `as` a composite component,
+   * it will be a DOM node, when resolved.
+   *
+   * @type {ReactRef}
+   * @alias ref
+   */
+  _ref: PropTypes.any,
+
+  /**
+   * A convenience prop for add the `text-muted` class,
+   * since it's so commonly used here.
+   */
+  muted: PropTypes.bool,
+  as: PropTypes.elementType,
+};
+
+const FormText: BsPrefixRefForwardingComponent<'small', FormTextProps> =
+  React.forwardRef<HTMLElement, FormTextProps>(
+    // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+    (
+      { bsPrefix, className, as: Component = 'small', muted, ...props },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'form-text');
+
+      return (
+        <Component
+          {...props}
+          ref={ref}
+          className={classNames(className, bsPrefix, muted && 'text-muted')}
+        />
+      );
+    },
+  ) as typeof FormText;
+
+FormText.displayName = 'FormText';
+FormText.propTypes = propTypes;
+
+export default FormText;
diff --git a/react/Image.tsx b/react/Image.tsx
new file mode 100644
index 0000000..c0f0162
--- /dev/null
+++ b/react/Image.tsx
@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixOnlyProps } from './helpers';
+
+export interface ImageProps
+  extends BsPrefixOnlyProps,
+    React.ImgHTMLAttributes<HTMLImageElement> {
+  fluid?: boolean;
+  rounded?: boolean;
+  roundedCircle?: boolean;
+  thumbnail?: boolean;
+}
+
+export const propTypes = {
+  /**
+   * @default 'img'
+   */
+  bsPrefix: PropTypes.string,
+  /**
+   * Sets image as fluid image.
+   */
+  fluid: PropTypes.bool,
+
+  /**
+   * Sets image shape as rounded.
+   */
+  rounded: PropTypes.bool,
+
+  /**
+   * Sets image shape as circle.
+   */
+  roundedCircle: PropTypes.bool,
+
+  /**
+   * Sets image shape as thumbnail.
+   */
+  thumbnail: PropTypes.bool,
+};
+
+const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  (
+    {
+      bsPrefix,
+      className,
+      fluid = false,
+      rounded = false,
+      roundedCircle = false,
+      thumbnail = false,
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'img');
+    return (
+      <img // eslint-disable-line jsx-a11y/alt-text
+        ref={ref}
+        {...props}
+        className={classNames(
+          className,
+          fluid && `${bsPrefix}-fluid`,
+          rounded && `rounded`,
+          roundedCircle && `rounded-circle`,
+          thumbnail && `${bsPrefix}-thumbnail`,
+        )}
+      />
+    );
+  },
+);
+
+Image.displayName = 'Image';
+Image.propTypes = propTypes;
+
+export default Image;
diff --git a/react/InputGroup.tsx b/react/InputGroup.tsx
new file mode 100644
index 0000000..ce7e50f
--- /dev/null
+++ b/react/InputGroup.tsx
@@ -0,0 +1,97 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import * as React from 'react';
+import { useMemo } from 'react';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import FormCheckInput, { type FormCheckInputProps } from './FormCheckInput';
+import InputGroupContext from './InputGroupContext';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import InputGroupText from './InputGroupText';
+
+const InputGroupCheckbox = (props: FormCheckInputProps) => (
+  <InputGroupText>
+    <FormCheckInput type="checkbox" {...props} />
+  </InputGroupText>
+);
+
+const InputGroupRadio = (props: FormCheckInputProps) => (
+  <InputGroupText>
+    <FormCheckInput type="radio" {...props} />
+  </InputGroupText>
+);
+
+export interface InputGroupProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  size?: 'sm' | 'lg';
+  hasValidation?: boolean;
+}
+
+const propTypes = {
+  /** @default 'input-group' */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Control the size of buttons and form elements from the top-level.
+   *
+   * @type {('sm'|'lg')}
+   */
+  size: PropTypes.string,
+
+  /**
+   * Handles the input's rounded corners when using form validation.
+   *
+   * Use this when your input group contains both an input and feedback element.
+   */
+  hasValidation: PropTypes.bool,
+
+  as: PropTypes.elementType,
+};
+
+const InputGroup: BsPrefixRefForwardingComponent<'div', InputGroupProps> =
+  React.forwardRef<HTMLElement, InputGroupProps>(
+    (
+      {
+        bsPrefix,
+        size,
+        hasValidation,
+        className,
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        ...props
+      },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'input-group');
+
+      // Intentionally an empty object. Used in detecting if a dropdown
+      // exists under an input group.
+      const contextValue = useMemo(() => ({}), []);
+
+      return (
+        <InputGroupContext.Provider value={contextValue}>
+          <Component
+            ref={ref}
+            {...props}
+            className={classNames(
+              className,
+              bsPrefix,
+              size && `${bsPrefix}-${size}`,
+              hasValidation && 'has-validation',
+            )}
+          />
+        </InputGroupContext.Provider>
+      );
+    },
+  ) as typeof InputGroup;
+
+InputGroup.propTypes = propTypes;
+InputGroup.displayName = 'InputGroup';
+
+export default Object.assign(InputGroup, {
+  Text: InputGroupText,
+  Radio: InputGroupRadio,
+  Checkbox: InputGroupCheckbox,
+});
diff --git a/react/InputGroupContext.tsx b/react/InputGroupContext.tsx
new file mode 100644
index 0000000..d00a69b
--- /dev/null
+++ b/react/InputGroupContext.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+const context = React.createContext<unknown | null>(null);
+context.displayName = 'InputGroupContext';
+
+export default context;
diff --git a/react/InputGroupText.tsx b/react/InputGroupText.tsx
new file mode 100644
index 0000000..5ae3350
--- /dev/null
+++ b/react/InputGroupText.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface InputGroupTextProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const InputGroupText: BsPrefixRefForwardingComponent<
+  'span',
+  InputGroupTextProps
+> = React.forwardRef<HTMLElement, InputGroupTextProps>(
+  ({ className, bsPrefix, as: Component = 'span', ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'input-group-text');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        {...props}
+      />
+    );
+  },
+) as typeof InputGroupText;
+
+InputGroupText.displayName = 'InputGroupText';
+
+export default InputGroupText;
diff --git a/react/ListGroup.tsx b/react/ListGroup.tsx
new file mode 100644
index 0000000..5e2bf36
--- /dev/null
+++ b/react/ListGroup.tsx
@@ -0,0 +1,101 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import warning from 'warning';
+import { useUncontrolled } from 'uncontrollable';
+import BaseNav, { NavProps as BaseNavProps } from '@restart/ui/Nav';
+import { EventKey } from '@restart/ui/types';
+import { useBootstrapPrefix } from './ThemeProvider';
+import ListGroupItem from './ListGroupItem';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface ListGroupProps extends BsPrefixProps, BaseNavProps {
+  variant?: 'flush' | string;
+  horizontal?: boolean | string | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  defaultActiveKey?: EventKey;
+  numbered?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default 'list-group'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Adds a variant to the list-group
+   *
+   * @type {('flush')}
+   */
+  variant: PropTypes.oneOf(['flush']),
+
+  /**
+   * Changes the flow of the list group items from vertical to horizontal.
+   * A value of `null` (the default) sets it to vertical for all breakpoints;
+   * Just including the prop sets it for all breakpoints, while `{sm|md|lg|xl|xxl}`
+   * makes the list group horizontal starting at that breakpoint’s `min-width`.
+   * @type {(true|'sm'|'md'|'lg'|'xl'|'xxl')}
+   */
+  horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /**
+   * Generate numbered list items.
+   */
+  numbered: PropTypes.bool,
+
+  /**
+   * You can use a custom element type for this component.
+   */
+  as: PropTypes.elementType,
+};
+
+const ListGroup: BsPrefixRefForwardingComponent<'div', ListGroupProps> =
+  React.forwardRef<HTMLElement, ListGroupProps>((props, ref) => {
+    const {
+      className,
+      bsPrefix: initialBsPrefix,
+      variant,
+      horizontal,
+      numbered,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as = 'div',
+      ...controlledProps
+    } = useUncontrolled(props, {
+      activeKey: 'onSelect',
+    });
+
+    const bsPrefix = useBootstrapPrefix(initialBsPrefix, 'list-group');
+
+    let horizontalVariant: string | undefined;
+    if (horizontal) {
+      horizontalVariant =
+        horizontal === true ? 'horizontal' : `horizontal-${horizontal}`;
+    }
+
+    warning(
+      !(horizontal && variant === 'flush'),
+      '`variant="flush"` and `horizontal` should not be used together.',
+    );
+
+    return (
+      <BaseNav
+        ref={ref}
+        {...controlledProps}
+        as={as}
+        className={classNames(
+          className,
+          bsPrefix,
+          variant && `${bsPrefix}-${variant}`,
+          horizontalVariant && `${bsPrefix}-${horizontalVariant}`,
+          numbered && `${bsPrefix}-numbered`,
+        )}
+      />
+    );
+  }) as typeof ListGroup;
+
+ListGroup.propTypes = propTypes;
+ListGroup.displayName = 'ListGroup';
+
+export default Object.assign(ListGroup, {
+  Item: ListGroupItem,
+});
diff --git a/react/ListGroupItem.tsx b/react/ListGroupItem.tsx
new file mode 100644
index 0000000..74b9f09
--- /dev/null
+++ b/react/ListGroupItem.tsx
@@ -0,0 +1,134 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import warning from 'warning';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import {
+  useNavItem,
+  NavItemProps as BaseNavItemProps,
+} from '@restart/ui/NavItem';
+import { makeEventKey } from '@restart/ui/SelectableContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { Variant } from './types';
+
+export interface ListGroupItemProps
+  extends Omit<BaseNavItemProps, 'onSelect'>,
+    BsPrefixProps {
+  action?: boolean;
+  onClick?: React.MouseEventHandler;
+  variant?: Variant;
+}
+
+const propTypes = {
+  /**
+   * @default 'list-group-item'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Sets contextual classes for list item.
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light')}
+   */
+  variant: PropTypes.string,
+  /**
+   * Marks a ListGroupItem as actionable, applying additional hover, active and disabled styles
+   * for links and buttons.
+   */
+  action: PropTypes.bool,
+  /**
+   * Sets list item as active.
+   */
+  active: PropTypes.bool,
+
+  /**
+   * Sets list item state as disabled.
+   */
+  disabled: PropTypes.bool,
+
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** A callback function for when this component is clicked.  */
+  onClick: PropTypes.func,
+
+  /** Providing a `href` and setting `action` to `true`, it will render the ListGroup.Item as an `<a>` element (unless `as` is provided). */
+  href: PropTypes.string,
+
+  /**
+   * You can use a custom element type for this component. For none `action` items, items render as `li`.
+   * For actions the default is an anchor or button element depending on whether a `href` is provided.
+   *
+   * @default {'div' | 'a' | 'button'}
+   */
+  as: PropTypes.elementType,
+};
+
+const ListGroupItem: BsPrefixRefForwardingComponent<'a', ListGroupItemProps> =
+  React.forwardRef<HTMLElement, ListGroupItemProps>(
+    (
+      {
+        bsPrefix,
+        active,
+        disabled,
+        eventKey,
+        className,
+        variant,
+        action,
+        as,
+        ...props
+      },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'list-group-item');
+      const [navItemProps, meta] = useNavItem({
+        key: makeEventKey(eventKey, props.href),
+        active,
+        ...props,
+      });
+
+      const handleClick = useEventCallback((event) => {
+        if (disabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+
+        navItemProps.onClick(event);
+      });
+
+      if (disabled && props.tabIndex === undefined) {
+        props.tabIndex = -1;
+        props['aria-disabled'] = true;
+      }
+
+      // eslint-disable-next-line no-nested-ternary
+      const Component = as || (action ? (props.href ? 'a' : 'button') : 'div');
+
+      warning(
+        as || !(!action && props.href),
+        '`action=false` and `href` should not be used together.',
+      );
+
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          {...navItemProps}
+          onClick={handleClick}
+          className={classNames(
+            className,
+            bsPrefix,
+            meta.isActive && 'active',
+            disabled && 'disabled',
+            variant && `${bsPrefix}-${variant}`,
+            action && `${bsPrefix}-action`,
+          )}
+        />
+      );
+    },
+  ) as typeof ListGroupItem;
+
+ListGroupItem.propTypes = propTypes;
+ListGroupItem.displayName = 'ListGroupItem';
+
+export default ListGroupItem;
diff --git a/react/Modal.tsx b/react/Modal.tsx
new file mode 100644
index 0000000..90fede0
--- /dev/null
+++ b/react/Modal.tsx
@@ -0,0 +1,520 @@
+import classNames from 'classnames';
+import addEventListener from 'dom-helpers/addEventListener';
+import canUseDOM from 'dom-helpers/canUseDOM';
+import ownerDocument from 'dom-helpers/ownerDocument';
+import removeEventListener from 'dom-helpers/removeEventListener';
+import getScrollbarSize from 'dom-helpers/scrollbarSize';
+import useCallbackRef from '@restart/hooks/useCallbackRef';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import useWillUnmount from '@restart/hooks/useWillUnmount';
+import transitionEnd from 'dom-helpers/transitionEnd';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import BaseModal, { BaseModalProps } from '@restart/ui/Modal';
+import { ModalInstance } from '@restart/ui/ModalManager';
+import { getSharedManager } from './BootstrapModalManager';
+import Fade from './Fade';
+import ModalBody from './ModalBody';
+import ModalContext from './ModalContext';
+import ModalDialog from './ModalDialog';
+import ModalFooter from './ModalFooter';
+import ModalHeader from './ModalHeader';
+import ModalTitle from './ModalTitle';
+import { BsPrefixRefForwardingComponent } from './helpers';
+import { useBootstrapPrefix, useIsRTL } from './ThemeProvider';
+
+export interface ModalProps
+  extends Omit<
+    BaseModalProps,
+    | 'role'
+    | 'renderBackdrop'
+    | 'renderDialog'
+    | 'transition'
+    | 'backdropTransition'
+    | 'children'
+  > {
+  size?: 'sm' | 'lg' | 'xl';
+  fullscreen?:
+    | true
+    | string
+    | 'sm-down'
+    | 'md-down'
+    | 'lg-down'
+    | 'xl-down'
+    | 'xxl-down';
+  bsPrefix?: string;
+  centered?: boolean;
+  backdropClassName?: string;
+  animation?: boolean;
+  dialogClassName?: string;
+  contentClassName?: string;
+  dialogAs?: React.ElementType;
+  scrollable?: boolean;
+  [other: string]: any;
+}
+
+const propTypes = {
+  /**
+   * @default 'modal'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Render a large, extra large or small modal.
+   * When not provided, the modal is rendered with medium (default) size.
+   * @type ('sm'|'lg'|'xl')
+   */
+  size: PropTypes.string,
+
+  /**
+   * Renders a fullscreen modal. Specifying a breakpoint will render the modal
+   * as fullscreen __below__ the breakpoint size.
+   *
+   * @type (true|'sm-down'|'md-down'|'lg-down'|'xl-down'|'xxl-down')
+   */
+  fullscreen: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /**
+   * vertically center the Dialog in the window
+   */
+  centered: PropTypes.bool,
+
+  /**
+   * Include a backdrop component. Specify 'static' for a backdrop that doesn't
+   * trigger an "onHide" when clicked.
+   */
+  backdrop: PropTypes.oneOf(['static', true, false]),
+
+  /**
+   * Add an optional extra class name to .modal-backdrop
+   * It could end up looking like class="modal-backdrop foo-modal-backdrop in".
+   */
+  backdropClassName: PropTypes.string,
+
+  /**
+   * Close the modal when escape key is pressed
+   */
+  keyboard: PropTypes.bool,
+
+  /**
+   * Allows scrolling the `<Modal.Body>` instead of the entire Modal when overflowing.
+   */
+  scrollable: PropTypes.bool,
+
+  /**
+   * Open and close the Modal with a slide and fade animation.
+   */
+  animation: PropTypes.bool,
+
+  /**
+   * A css class to apply to the Modal dialog DOM node.
+   */
+  dialogClassName: PropTypes.string,
+
+  /**
+   * Add an optional extra class name to .modal-content
+   */
+  contentClassName: PropTypes.string,
+
+  /**
+   * A Component type that provides the modal content Markup. This is a useful
+   * prop when you want to use your own styles and markup to create a custom
+   * modal component.
+   */
+  dialogAs: PropTypes.elementType,
+
+  /**
+   * When `true` The modal will automatically shift focus to itself when it
+   * opens, and replace it to the last focused element when it closes.
+   * Generally this should never be set to false as it makes the Modal less
+   * accessible to assistive technologies, like screen-readers.
+   */
+  autoFocus: PropTypes.bool,
+
+  /**
+   * When `true` The modal will prevent focus from leaving the Modal while
+   * open. Consider leaving the default value here, as it is necessary to make
+   * the Modal work well with assistive technologies, such as screen readers.
+   */
+  enforceFocus: PropTypes.bool,
+
+  /**
+   * When `true` The modal will restore focus to previously focused element once
+   * modal is hidden
+   */
+  restoreFocus: PropTypes.bool,
+
+  /**
+   * Options passed to focus function when `restoreFocus` is set to `true`
+   *
+   * @link  https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Parameters
+   */
+  restoreFocusOptions: PropTypes.shape({
+    preventScroll: PropTypes.bool,
+  }),
+
+  /**
+   * When `true` The modal will show itself.
+   */
+  show: PropTypes.bool,
+
+  /**
+   * A callback fired when the Modal is opening.
+   */
+  onShow: PropTypes.func,
+
+  /**
+   * A callback fired when the header closeButton or non-static backdrop is
+   * clicked. Required if either are specified.
+   */
+  onHide: PropTypes.func,
+
+  /**
+   * A callback fired when the escape key, if specified in `keyboard`, is pressed.
+   */
+  onEscapeKeyDown: PropTypes.func,
+
+  /**
+   * Callback fired before the Modal transitions in
+   */
+  onEnter: PropTypes.func,
+
+  /**
+   * Callback fired as the Modal begins to transition in
+   */
+  onEntering: PropTypes.func,
+
+  /**
+   * Callback fired after the Modal finishes transitioning in
+   */
+  onEntered: PropTypes.func,
+
+  /**
+   * Callback fired right before the Modal transitions out
+   */
+  onExit: PropTypes.func,
+
+  /**
+   * Callback fired as the Modal begins to transition out
+   */
+  onExiting: PropTypes.func,
+
+  /**
+   * Callback fired after the Modal finishes transitioning out
+   */
+  onExited: PropTypes.func,
+
+  /**
+   * A ModalManager instance used to track and manage the state of open
+   * Modals. Useful when customizing how modals interact within a container
+   */
+  manager: PropTypes.object,
+
+  /**
+   * @private
+   */
+  container: PropTypes.any,
+
+  'data-bs-theme': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-label': PropTypes.string,
+};
+
+/* eslint-disable no-use-before-define, react/no-multi-comp */
+function DialogTransition(props) {
+  return <Fade {...props} timeout={null} />;
+}
+
+function BackdropTransition(props) {
+  return <Fade {...props} timeout={null} />;
+}
+
+/* eslint-enable no-use-before-define */
+const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
+  React.forwardRef(
+    (
+      {
+        bsPrefix,
+        className,
+        style,
+        dialogClassName,
+        contentClassName,
+        children,
+        dialogAs: Dialog = ModalDialog,
+        'data-bs-theme': dataBsTheme,
+        'aria-labelledby': ariaLabelledby,
+        'aria-describedby': ariaDescribedby,
+        'aria-label': ariaLabel,
+
+        /* BaseModal props */
+
+        show = false,
+        animation = true,
+        backdrop = true,
+        keyboard = true,
+        onEscapeKeyDown,
+        onShow,
+        onHide,
+        container,
+        autoFocus = true,
+        enforceFocus = true,
+        restoreFocus = true,
+        restoreFocusOptions,
+        onEntered,
+        onExit,
+        onExiting,
+        onEnter,
+        onEntering,
+        onExited,
+        backdropClassName,
+        manager: propsManager,
+        ...props
+      },
+      ref,
+    ) => {
+      const [modalStyle, setStyle] = useState({});
+      const [animateStaticModal, setAnimateStaticModal] = useState(false);
+      const waitingForMouseUpRef = useRef(false);
+      const ignoreBackdropClickRef = useRef(false);
+      const removeStaticModalAnimationRef = useRef<(() => void) | null>(null);
+      const [modal, setModalRef] = useCallbackRef<ModalInstance>();
+      const mergedRef = useMergedRefs(ref, setModalRef);
+      const handleHide = useEventCallback(onHide);
+      const isRTL = useIsRTL();
+
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'modal');
+
+      const modalContext = useMemo(
+        () => ({
+          onHide: handleHide,
+        }),
+        [handleHide],
+      );
+
+      function getModalManager() {
+        if (propsManager) return propsManager;
+        return getSharedManager({ isRTL });
+      }
+
+      function updateDialogStyle(node) {
+        if (!canUseDOM) return;
+
+        const containerIsOverflowing =
+          getModalManager().getScrollbarWidth() > 0;
+
+        const modalIsOverflowing =
+          node.scrollHeight > ownerDocument(node).documentElement.clientHeight;
+
+        setStyle({
+          paddingRight:
+            containerIsOverflowing && !modalIsOverflowing
+              ? getScrollbarSize()
+              : undefined,
+          paddingLeft:
+            !containerIsOverflowing && modalIsOverflowing
+              ? getScrollbarSize()
+              : undefined,
+        });
+      }
+
+      const handleWindowResize = useEventCallback(() => {
+        if (modal) {
+          updateDialogStyle(modal.dialog);
+        }
+      });
+
+      useWillUnmount(() => {
+        removeEventListener(window as any, 'resize', handleWindowResize);
+        removeStaticModalAnimationRef.current?.();
+      });
+
+      // We prevent the modal from closing during a drag by detecting where the
+      // click originates from. If it starts in the modal and then ends outside
+      // don't close.
+      const handleDialogMouseDown = () => {
+        waitingForMouseUpRef.current = true;
+      };
+
+      const handleMouseUp = (e) => {
+        if (
+          waitingForMouseUpRef.current &&
+          modal &&
+          e.target === modal.dialog
+        ) {
+          ignoreBackdropClickRef.current = true;
+        }
+        waitingForMouseUpRef.current = false;
+      };
+
+      const handleStaticModalAnimation = () => {
+        setAnimateStaticModal(true);
+        removeStaticModalAnimationRef.current = transitionEnd(
+          modal!.dialog as any,
+          () => {
+            setAnimateStaticModal(false);
+          },
+        );
+      };
+
+      const handleStaticBackdropClick = (e) => {
+        if (e.target !== e.currentTarget) {
+          return;
+        }
+
+        handleStaticModalAnimation();
+      };
+
+      const handleClick = (e) => {
+        if (backdrop === 'static') {
+          handleStaticBackdropClick(e);
+          return;
+        }
+
+        if (ignoreBackdropClickRef.current || e.target !== e.currentTarget) {
+          ignoreBackdropClickRef.current = false;
+          return;
+        }
+
+        onHide?.();
+      };
+
+      const handleEscapeKeyDown = (e) => {
+        if (keyboard) {
+          onEscapeKeyDown?.(e);
+        } else {
+          // Call preventDefault to stop modal from closing in @restart/ui.
+          e.preventDefault();
+
+          if (backdrop === 'static') {
+            // Play static modal animation.
+            handleStaticModalAnimation();
+          }
+        }
+      };
+
+      const handleEnter = (node, isAppearing) => {
+        if (node) {
+          updateDialogStyle(node);
+        }
+
+        onEnter?.(node, isAppearing);
+      };
+
+      const handleExit = (node) => {
+        removeStaticModalAnimationRef.current?.();
+        onExit?.(node);
+      };
+
+      const handleEntering = (node, isAppearing) => {
+        onEntering?.(node, isAppearing);
+
+        // FIXME: This should work even when animation is disabled.
+        addEventListener(window as any, 'resize', handleWindowResize);
+      };
+
+      const handleExited = (node) => {
+        if (node) node.style.display = ''; // RHL removes it sometimes
+        onExited?.(node);
+
+        // FIXME: This should work even when animation is disabled.
+        removeEventListener(window as any, 'resize', handleWindowResize);
+      };
+
+      const renderBackdrop = useCallback(
+        (backdropProps) => (
+          <div
+            {...backdropProps}
+            className={classNames(
+              `${bsPrefix}-backdrop`,
+              backdropClassName,
+              !animation && 'show',
+            )}
+          />
+        ),
+        [animation, backdropClassName, bsPrefix],
+      );
+
+      const baseModalStyle = { ...style, ...modalStyle };
+
+      // If `display` is not set to block, autoFocus inside the modal fails
+      // https://github.com/react-bootstrap/react-bootstrap/issues/5102
+      baseModalStyle.display = 'block';
+
+      const renderDialog = (dialogProps) => (
+        <div
+          role="dialog"
+          {...dialogProps}
+          style={baseModalStyle}
+          className={classNames(
+            className,
+            bsPrefix,
+            animateStaticModal && `${bsPrefix}-static`,
+            !animation && 'show',
+          )}
+          onClick={backdrop ? handleClick : undefined}
+          onMouseUp={handleMouseUp}
+          data-bs-theme={dataBsTheme}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          aria-describedby={ariaDescribedby}
+        >
+          {/*
+        // @ts-ignore */}
+          <Dialog
+            {...props}
+            onMouseDown={handleDialogMouseDown}
+            className={dialogClassName}
+            contentClassName={contentClassName}
+          >
+            {children}
+          </Dialog>
+        </div>
+      );
+
+      return (
+        <ModalContext.Provider value={modalContext}>
+          <BaseModal
+            show={show}
+            ref={mergedRef}
+            backdrop={backdrop}
+            container={container}
+            keyboard // Always set true - see handleEscapeKeyDown
+            autoFocus={autoFocus}
+            enforceFocus={enforceFocus}
+            restoreFocus={restoreFocus}
+            restoreFocusOptions={restoreFocusOptions}
+            onEscapeKeyDown={handleEscapeKeyDown}
+            onShow={onShow}
+            onHide={onHide}
+            onEnter={handleEnter}
+            onEntering={handleEntering}
+            onEntered={onEntered}
+            onExit={handleExit}
+            onExiting={onExiting}
+            onExited={handleExited}
+            manager={getModalManager()}
+            transition={animation ? DialogTransition : undefined}
+            backdropTransition={animation ? BackdropTransition : undefined}
+            renderBackdrop={renderBackdrop}
+            renderDialog={renderDialog}
+          />
+        </ModalContext.Provider>
+      );
+    },
+  ) as typeof Modal;
+
+Modal.displayName = 'Modal';
+Modal.propTypes = propTypes;
+
+export default Object.assign(Modal, {
+  Body: ModalBody,
+  Header: ModalHeader,
+  Title: ModalTitle,
+  Footer: ModalFooter,
+  Dialog: ModalDialog,
+  TRANSITION_DURATION: 300,
+  BACKDROP_TRANSITION_DURATION: 150,
+});
diff --git a/react/ModalBody.tsx b/react/ModalBody.tsx
new file mode 100644
index 0000000..272646d
--- /dev/null
+++ b/react/ModalBody.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface ModalBodyProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const ModalBody: BsPrefixRefForwardingComponent<'div', ModalBodyProps> =
+  React.forwardRef<HTMLElement, ModalBodyProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'modal-body');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof ModalBody;
+
+ModalBody.displayName = 'ModalBody';
+
+export default ModalBody;
diff --git a/react/ModalContext.tsx b/react/ModalContext.tsx
new file mode 100644
index 0000000..f0002d6
--- /dev/null
+++ b/react/ModalContext.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface ModalContextType {
+  onHide: () => void;
+}
+
+const ModalContext = React.createContext<ModalContextType>({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onHide() {},
+});
+
+export default ModalContext;
diff --git a/react/ModalDialog.tsx b/react/ModalDialog.tsx
new file mode 100644
index 0000000..e7c85db
--- /dev/null
+++ b/react/ModalDialog.tsx
@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+
+import { BsPrefixProps } from './helpers';
+
+export interface ModalDialogProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    BsPrefixProps {
+  size?: 'sm' | 'lg' | 'xl';
+  fullscreen?:
+    | true
+    | string
+    | 'sm-down'
+    | 'md-down'
+    | 'lg-down'
+    | 'xl-down'
+    | 'xxl-down';
+  centered?: boolean;
+  scrollable?: boolean;
+  contentClassName?: string;
+}
+
+const propTypes = {
+  /** @default 'modal' */
+  bsPrefix: PropTypes.string,
+  contentClassName: PropTypes.string,
+
+  /**
+   * Render a large, extra large or small modal.
+   *
+   * @type ('sm'|'lg'|'xl')
+   */
+  size: PropTypes.string,
+
+  /**
+   * Renders a fullscreen modal. Specifying a breakpoint will render the modal
+   * as fullscreen __below__ the breakpoint size.
+   *
+   * @type (true|'sm-down'|'md-down'|'lg-down'|'xl-down'|'xxl-down')
+   */
+  fullscreen: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /**
+   * Specify whether the Component should be vertically centered
+   */
+  centered: PropTypes.bool,
+
+  /**
+   * Allows scrolling the `<Modal.Body>` instead of the entire Modal when overflowing.
+   */
+  scrollable: PropTypes.bool,
+};
+
+const ModalDialog = React.forwardRef<HTMLDivElement, ModalDialogProps>(
+  (
+    {
+      bsPrefix,
+      className,
+      contentClassName,
+      centered,
+      size,
+      fullscreen,
+      children,
+      scrollable,
+      ...props
+    }: ModalDialogProps,
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'modal');
+    const dialogClass = `${bsPrefix}-dialog`;
+
+    const fullScreenClass =
+      typeof fullscreen === 'string'
+        ? `${bsPrefix}-fullscreen-${fullscreen}`
+        : `${bsPrefix}-fullscreen`;
+
+    return (
+      <div
+        {...props}
+        ref={ref}
+        className={classNames(
+          dialogClass,
+          className,
+          size && `${bsPrefix}-${size}`,
+          centered && `${dialogClass}-centered`,
+          scrollable && `${dialogClass}-scrollable`,
+          fullscreen && fullScreenClass,
+        )}
+      >
+        <div className={classNames(`${bsPrefix}-content`, contentClassName)}>
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+
+ModalDialog.displayName = 'ModalDialog';
+ModalDialog.propTypes = propTypes as any;
+
+export default ModalDialog;
diff --git a/react/ModalFooter.tsx b/react/ModalFooter.tsx
new file mode 100644
index 0000000..5c91356
--- /dev/null
+++ b/react/ModalFooter.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface ModalFooterProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const ModalFooter: BsPrefixRefForwardingComponent<'div', ModalFooterProps> =
+  React.forwardRef<HTMLElement, ModalFooterProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'modal-footer');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof ModalFooter;
+
+ModalFooter.displayName = 'ModalFooter';
+
+export default ModalFooter;
diff --git a/react/ModalHeader.tsx b/react/ModalHeader.tsx
new file mode 100644
index 0000000..d19f567
--- /dev/null
+++ b/react/ModalHeader.tsx
@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { CloseButtonVariant } from './CloseButton';
+import AbstractModalHeader, {
+  AbstractModalHeaderProps,
+} from './AbstractModalHeader';
+import { BsPrefixOnlyProps } from './helpers';
+
+export interface ModalHeaderProps
+  extends AbstractModalHeaderProps,
+    BsPrefixOnlyProps {}
+
+const propTypes = {
+  /**
+   * @default 'modal-header'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Provides an accessible label for the close
+   * button. It is used for Assistive Technology when the label text is not
+   * readable.
+   */
+  closeLabel: PropTypes.string,
+
+  /**
+   * Sets the variant for close button.
+   */
+  closeVariant: PropTypes.oneOf<CloseButtonVariant>(['white']),
+
+  /**
+   * Specify whether the Component should contain a close button
+   */
+  closeButton: PropTypes.bool,
+
+  /**
+   * A Callback fired when the close button is clicked. If used directly inside
+   * a Modal component, the onHide will automatically be propagated up to the
+   * parent Modal `onHide`.
+   */
+  onHide: PropTypes.func,
+};
+
+const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
+  (
+    {
+      bsPrefix,
+      className,
+      closeLabel = 'Close',
+      closeButton = false,
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'modal-header');
+    return (
+      <AbstractModalHeader
+        ref={ref}
+        {...props}
+        className={classNames(className, bsPrefix)}
+        closeLabel={closeLabel}
+        closeButton={closeButton}
+      />
+    );
+  },
+);
+
+ModalHeader.displayName = 'ModalHeader';
+ModalHeader.propTypes = propTypes;
+
+export default ModalHeader;
diff --git a/react/ModalTitle.tsx b/react/ModalTitle.tsx
new file mode 100644
index 0000000..9d6a3f3
--- /dev/null
+++ b/react/ModalTitle.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import divWithClassName from './divWithClassName';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+const DivStyledAsH4 = divWithClassName('h4');
+
+export interface ModalTitleProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const ModalTitle: BsPrefixRefForwardingComponent<'span', ModalTitleProps> =
+  React.forwardRef<HTMLElement, ModalTitleProps>(
+    ({ className, bsPrefix, as: Component = DivStyledAsH4, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'modal-title');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof ModalTitle;
+
+ModalTitle.displayName = 'ModalTitle';
+
+export default ModalTitle;
diff --git a/react/Nav.tsx b/react/Nav.tsx
new file mode 100644
index 0000000..be0ae56
--- /dev/null
+++ b/react/Nav.tsx
@@ -0,0 +1,167 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import all from 'prop-types-extra/lib/all';
+import * as React from 'react';
+import { useContext } from 'react';
+import { useUncontrolled } from 'uncontrollable';
+import BaseNav, { NavProps as BaseNavProps } from '@restart/ui/Nav';
+import { EventKey } from '@restart/ui/types';
+import { useBootstrapPrefix } from './ThemeProvider';
+import NavbarContext from './NavbarContext';
+import CardHeaderContext from './CardHeaderContext';
+import NavItem from './NavItem';
+import NavLink from './NavLink';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface NavProps extends BsPrefixProps, BaseNavProps {
+  navbarBsPrefix?: string;
+  cardHeaderBsPrefix?: string;
+  variant?: 'tabs' | 'pills' | 'underline' | string;
+  defaultActiveKey?: EventKey;
+  fill?: boolean;
+  justify?: boolean;
+  navbar?: boolean;
+  navbarScroll?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default 'nav'
+   */
+  bsPrefix: PropTypes.string,
+
+  /** @private */
+  navbarBsPrefix: PropTypes.string,
+  /** @private */
+  cardHeaderBsPrefix: PropTypes.string,
+
+  /**
+   * The visual variant of the nav items.
+   *
+   * @type {('tabs'| 'pills' | 'underline')}
+   */
+  variant: PropTypes.string,
+
+  /**
+   * Marks the NavItem with a matching `eventKey` (or `href` if present) as active.
+   */
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * The default active key that is selected on start.
+   */
+  defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Have all `NavItem`s proportionately fill all available width.
+   */
+  fill: PropTypes.bool,
+
+  /**
+   * Have all `NavItem`s evenly fill all available width.
+   *
+   * @type {boolean}
+   */
+  justify: all(PropTypes.bool, ({ justify, navbar }) =>
+    justify && navbar ? Error('justify navbar `Nav`s are not supported') : null,
+  ),
+
+  /**
+   * A callback fired when a NavItem is selected.
+   *
+   * ```js
+   * function (
+   *  Any eventKey,
+   *  SyntheticEvent event?
+   * )
+   * ```
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * ARIA role for the Nav, in the context of a TabContainer, the default will
+   * be set to "tablist", but can be overridden by the Nav when set explicitly.
+   *
+   * When the role is "tablist", NavLink focus is managed according to
+   * the ARIA authoring practices for tabs:
+   * https://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel
+   */
+  role: PropTypes.string,
+
+  /**
+   * Apply styling an alignment for use in a Navbar. This prop will be set
+   * automatically when the Nav is used inside a Navbar.
+   */
+  navbar: PropTypes.bool,
+
+  /**
+   * Enable vertical scrolling within the toggleable contents of a collapsed Navbar.
+   */
+  navbarScroll: PropTypes.bool,
+
+  as: PropTypes.elementType,
+
+  /** @private */
+  onKeyDown: PropTypes.func,
+};
+
+const Nav: BsPrefixRefForwardingComponent<'div', NavProps> = React.forwardRef<
+  HTMLElement,
+  NavProps
+>((uncontrolledProps, ref) => {
+  const {
+    as = 'div',
+    bsPrefix: initialBsPrefix,
+    variant,
+    fill = false,
+    justify = false,
+    navbar,
+    navbarScroll,
+    className,
+    activeKey,
+    ...props
+  } = useUncontrolled(uncontrolledProps, { activeKey: 'onSelect' });
+
+  const bsPrefix = useBootstrapPrefix(initialBsPrefix, 'nav');
+
+  let navbarBsPrefix;
+  let cardHeaderBsPrefix;
+  let isNavbar = false;
+
+  const navbarContext = useContext(NavbarContext);
+  const cardHeaderContext = useContext(CardHeaderContext);
+
+  if (navbarContext) {
+    navbarBsPrefix = navbarContext.bsPrefix;
+    isNavbar = navbar == null ? true : navbar;
+  } else if (cardHeaderContext) {
+    ({ cardHeaderBsPrefix } = cardHeaderContext);
+  }
+
+  return (
+    <BaseNav
+      as={as}
+      ref={ref}
+      activeKey={activeKey}
+      className={classNames(className, {
+        [bsPrefix]: !isNavbar,
+        [`${navbarBsPrefix}-nav`]: isNavbar,
+        [`${navbarBsPrefix}-nav-scroll`]: isNavbar && navbarScroll,
+        [`${cardHeaderBsPrefix}-${variant}`]: !!cardHeaderBsPrefix,
+        [`${bsPrefix}-${variant}`]: !!variant,
+        [`${bsPrefix}-fill`]: fill,
+        [`${bsPrefix}-justified`]: justify,
+      })}
+      {...props}
+    />
+  );
+}) as typeof Nav;
+
+Nav.displayName = 'Nav';
+Nav.propTypes = propTypes;
+
+export default Object.assign(Nav, {
+  Item: NavItem,
+  Link: NavLink,
+});
diff --git a/react/NavContext.tsx b/react/NavContext.tsx
new file mode 100644
index 0000000..9dca0e7
--- /dev/null
+++ b/react/NavContext.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { EventKey } from '@restart/ui/types';
+
+interface NavContextType {
+  role?: string; // used by NavLink to determine it's role
+  activeKey: EventKey | null;
+  getControlledId: (key: EventKey | null) => string;
+  getControllerId: (key: EventKey | null) => string;
+}
+
+const NavContext = React.createContext<NavContextType | null>(null);
+NavContext.displayName = 'NavContext';
+
+export default NavContext;
diff --git a/react/NavDropdown.tsx b/react/NavDropdown.tsx
new file mode 100644
index 0000000..ed0ddbb
--- /dev/null
+++ b/react/NavDropdown.tsx
@@ -0,0 +1,124 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import Dropdown, { DropdownProps } from './Dropdown';
+import { DropdownMenuVariant } from './DropdownMenu';
+import NavLink from './NavLink';
+import { BsPrefixRefForwardingComponent } from './helpers';
+
+export interface NavDropdownProps extends Omit<DropdownProps, 'title'> {
+  title: React.ReactNode;
+  disabled?: boolean;
+  active?: boolean;
+  menuRole?: string;
+  renderMenuOnMount?: boolean;
+  rootCloseEvent?: 'click' | 'mousedown';
+  menuVariant?: DropdownMenuVariant;
+}
+
+const propTypes = {
+  /**
+   * An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.
+   * @type {string}
+   */
+  id: PropTypes.string,
+
+  /** An `onClick` handler passed to the Toggle component */
+  onClick: PropTypes.func,
+
+  /** The content of the non-toggle Button.  */
+  title: PropTypes.node.isRequired,
+
+  /** Disables the toggle NavLink  */
+  disabled: PropTypes.bool,
+
+  /** Style the toggle NavLink as active  */
+  active: PropTypes.bool,
+
+  /** An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown */
+  menuRole: PropTypes.string,
+
+  /** Whether to render the dropdown menu in the DOM before the first time it is shown */
+  renderMenuOnMount: PropTypes.bool,
+
+  /**
+   *  Which event when fired outside the component will cause it to be closed.
+   *
+   * _see [DropdownMenu](#menu-props) for more details_
+   */
+  rootCloseEvent: PropTypes.string,
+
+  /**
+   * Menu color variant.
+   *
+   * Omitting this will use the default light color.
+   */
+  menuVariant: PropTypes.oneOf<DropdownMenuVariant>(['dark']),
+
+  /** @ignore */
+  bsPrefix: PropTypes.string,
+};
+
+const NavDropdown: BsPrefixRefForwardingComponent<'div', NavDropdownProps> =
+  React.forwardRef(
+    (
+      {
+        id,
+        title,
+        children,
+        bsPrefix,
+        className,
+        rootCloseEvent,
+        menuRole,
+        disabled,
+        active,
+        renderMenuOnMount,
+        menuVariant,
+        ...props
+      }: NavDropdownProps,
+      ref,
+    ) => {
+      /* NavItem has no additional logic, it's purely presentational. Can set nav item class here to support "as" */
+      const navItemPrefix = useBootstrapPrefix(undefined, 'nav-item');
+
+      return (
+        <Dropdown
+          ref={ref}
+          {...props}
+          className={classNames(className, navItemPrefix)}
+        >
+          <Dropdown.Toggle
+            id={id}
+            eventKey={null}
+            active={active}
+            disabled={disabled}
+            childBsPrefix={bsPrefix}
+            as={NavLink}
+          >
+            {title}
+          </Dropdown.Toggle>
+
+          <Dropdown.Menu
+            role={menuRole}
+            renderOnMount={renderMenuOnMount}
+            rootCloseEvent={rootCloseEvent}
+            variant={menuVariant}
+          >
+            {children}
+          </Dropdown.Menu>
+        </Dropdown>
+      );
+    },
+  ) as typeof NavDropdown;
+
+NavDropdown.displayName = 'NavDropdown';
+NavDropdown.propTypes = propTypes;
+
+export default Object.assign(NavDropdown, {
+  Item: Dropdown.Item,
+  ItemText: Dropdown.ItemText,
+  Divider: Dropdown.Divider,
+  Header: Dropdown.Header,
+});
diff --git a/react/NavItem.tsx b/react/NavItem.tsx
new file mode 100644
index 0000000..33f83c2
--- /dev/null
+++ b/react/NavItem.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface NavItemProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const NavItem: BsPrefixRefForwardingComponent<'div', NavItemProps> =
+  React.forwardRef<HTMLElement, NavItemProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-item');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof NavItem;
+
+NavItem.displayName = 'NavItem';
+
+export default NavItem;
diff --git a/react/NavLink.tsx b/react/NavLink.tsx
new file mode 100644
index 0000000..ccb48b3
--- /dev/null
+++ b/react/NavLink.tsx
@@ -0,0 +1,99 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import * as React from 'react';
+import Anchor from '@restart/ui/Anchor';
+import {
+  useNavItem,
+  NavItemProps as BaseNavItemProps,
+} from '@restart/ui/NavItem';
+import { makeEventKey } from '@restart/ui/SelectableContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface NavLinkProps
+  extends BsPrefixProps,
+    Omit<BaseNavItemProps, 'as'> {}
+
+const propTypes = {
+  /**
+   * @default 'nav-link'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The active state of the NavItem item.
+   */
+  active: PropTypes.bool,
+
+  /**
+   * The disabled state of the NavItem item.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * The ARIA role for the `NavLink`, In the context of a 'tablist' parent Nav,
+   * the role defaults to 'tab'
+   * */
+  role: PropTypes.string,
+
+  /**
+   * The HTML href attribute for the `NavLink`. Used as the unique identifier
+   * for the `NavLink` if an `eventKey` is not provided.
+   */
+  href: PropTypes.string,
+
+  /**
+   * Uniquely identifies the `NavItem` amongst its siblings,
+   * used to determine and control the active state of the parent `Nav`
+   * as well as onSelect behavior of a parent `Navbar`.
+   */
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** @default 'a' */
+  as: PropTypes.elementType,
+};
+
+const NavLink: BsPrefixRefForwardingComponent<'a', NavLinkProps> =
+  React.forwardRef<HTMLElement, NavLinkProps>(
+    (
+      {
+        bsPrefix,
+        className,
+        as: Component = Anchor,
+        active,
+        eventKey,
+        disabled = false,
+        ...props
+      },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-link');
+      const [navItemProps, meta] = useNavItem({
+        key: makeEventKey(eventKey, props.href),
+        active,
+        disabled,
+        ...props,
+      });
+
+      return (
+        <Component
+          {...props}
+          {...navItemProps}
+          ref={ref}
+          disabled={disabled}
+          className={classNames(
+            className,
+            bsPrefix,
+            disabled && 'disabled',
+            meta.isActive && 'active',
+          )}
+        />
+      );
+    },
+  ) as typeof NavLink;
+
+NavLink.displayName = 'NavLink';
+NavLink.propTypes = propTypes;
+
+export default NavLink;
diff --git a/react/Navbar.tsx b/react/Navbar.tsx
new file mode 100644
index 0000000..1d79709
--- /dev/null
+++ b/react/Navbar.tsx
@@ -0,0 +1,219 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import SelectableContext from '@restart/ui/SelectableContext';
+import { SelectCallback } from '@restart/ui/types';
+import { useUncontrolled } from 'uncontrollable';
+
+import NavbarBrand from './NavbarBrand';
+import NavbarCollapse from './NavbarCollapse';
+import NavbarToggle from './NavbarToggle';
+import NavbarOffcanvas from './NavbarOffcanvas';
+import { useBootstrapPrefix } from './ThemeProvider';
+import NavbarContext, { NavbarContextType } from './NavbarContext';
+import NavbarText from './NavbarText';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface NavbarProps
+  extends BsPrefixProps,
+    Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+  variant?: 'light' | 'dark' | string;
+  expand?: boolean | string | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  bg?: string;
+  fixed?: 'top' | 'bottom';
+  sticky?: 'top' | 'bottom';
+  onToggle?: (expanded: boolean) => void;
+  onSelect?: SelectCallback;
+  collapseOnSelect?: boolean;
+  expanded?: boolean;
+}
+
+const propTypes = {
+  /** @default 'navbar' */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The general visual variant a the Navbar.
+   * Use in combination with the `bg` prop, `background-color` utilities,
+   * or your own background styles.
+   *
+   * @type {('light'|'dark')}
+   */
+  variant: PropTypes.string,
+
+  /**
+   * The breakpoint, below which, the Navbar will collapse.
+   * When `true` the Navbar will always be expanded regardless of screen size.
+   */
+  expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /**
+   * A convenience prop for adding `bg-*` utility classes since they are so commonly used here.
+   * `light` and `dark` are common choices but any `bg-*` class is supported, including any custom ones you might define.
+   *
+   * Pairs nicely with the `variant` prop.
+   */
+  bg: PropTypes.string,
+
+  /**
+   * Create a fixed navbar along the top or bottom of the screen, that scrolls with the
+   * page. A convenience prop for the `fixed-*` positioning classes.
+   */
+  fixed: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Position the navbar at the top or bottom of the viewport, but only after scrolling past it.
+   * A convenience prop for the `sticky-*` positioning classes.
+   */
+  sticky: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Set a custom element for this component.
+   */
+  as: PropTypes.elementType,
+
+  /**
+   * A callback fired when the `<Navbar>` body collapses or expands. Fired when
+   * a `<Navbar.Toggle>` is clicked and called with the new `expanded`
+   * boolean value.
+   *
+   * @controllable expanded
+   */
+  onToggle: PropTypes.func,
+
+  /**
+   * A callback fired when a descendant of a child `<Nav>` is selected. Should
+   * be used to execute complex closing or other miscellaneous actions desired
+   * after selecting a descendant of `<Nav>`. Does nothing if no `<Nav>` or `<Nav>`
+   * descendants exist. The callback is called with an eventKey, which is a
+   * prop from the selected `<Nav>` descendant, and an event.
+   *
+   * ```js
+   * function (
+   *  eventKey: mixed,
+   *  event?: SyntheticEvent
+   * )
+   * ```
+   *
+   * For basic closing behavior after all `<Nav>` descendant onSelect events in
+   * mobile viewports, try using collapseOnSelect.
+   *
+   * Note: If you are manually closing the navbar using this `OnSelect` prop,
+   * ensure that you are setting `expanded` to false and not *toggling* between
+   * true and false.
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Toggles `expanded` to `false` after the onSelect event of a descendant of a
+   * child `<Nav>` fires. Does nothing if no `<Nav>` or `<Nav>` descendants exist.
+   *
+   * `<NavLink>` descendants of `<Nav>` will not trigger the `onSelect` event unless
+   * an `eventKey` or `href` prop is defined.
+   *
+   * Manually controlling `expanded` via the onSelect callback is recommended instead,
+   * for more complex operations that need to be executed after
+   * the `select` event of `<Nav>` descendants.
+   */
+  collapseOnSelect: PropTypes.bool,
+
+  /**
+   * Controls the visibility of the navbar body
+   *
+   * @controllable onToggle
+   */
+  expanded: PropTypes.bool,
+
+  /**
+   * The ARIA role for the navbar, will default to 'navigation' for
+   * Navbars whose `as` is something other than `<nav>`.
+   *
+   * @default 'navigation'
+   */
+  role: PropTypes.string,
+};
+
+const Navbar: BsPrefixRefForwardingComponent<'nav', NavbarProps> =
+  React.forwardRef<HTMLElement, NavbarProps>((props, ref) => {
+    const {
+      bsPrefix: initialBsPrefix,
+      expand = true,
+      variant = 'light',
+      bg,
+      fixed,
+      sticky,
+      className,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'nav',
+      expanded,
+      onToggle,
+      onSelect,
+      collapseOnSelect = false,
+      ...controlledProps
+    } = useUncontrolled(props, {
+      expanded: 'onToggle',
+    });
+
+    const bsPrefix = useBootstrapPrefix(initialBsPrefix, 'navbar');
+
+    const handleCollapse = useCallback<SelectCallback>(
+      (...args) => {
+        onSelect?.(...args);
+        if (collapseOnSelect && expanded) {
+          onToggle?.(false);
+        }
+      },
+      [onSelect, collapseOnSelect, expanded, onToggle],
+    );
+
+    // will result in some false positives but that seems better
+    // than false negatives. strict `undefined` check allows explicit
+    // "nulling" of the role if the user really doesn't want one
+    if (controlledProps.role === undefined && Component !== 'nav') {
+      controlledProps.role = 'navigation';
+    }
+    let expandClass = `${bsPrefix}-expand`;
+    if (typeof expand === 'string') expandClass = `${expandClass}-${expand}`;
+
+    const navbarContext = useMemo<NavbarContextType>(
+      () => ({
+        onToggle: () => onToggle?.(!expanded),
+        bsPrefix,
+        expanded: !!expanded,
+        expand,
+      }),
+      [bsPrefix, expanded, expand, onToggle],
+    );
+
+    return (
+      <NavbarContext.Provider value={navbarContext}>
+        <SelectableContext.Provider value={handleCollapse}>
+          <Component
+            ref={ref}
+            {...controlledProps}
+            className={classNames(
+              className,
+              bsPrefix,
+              expand && expandClass,
+              variant && `${bsPrefix}-${variant}`,
+              bg && `bg-${bg}`,
+              sticky && `sticky-${sticky}`,
+              fixed && `fixed-${fixed}`,
+            )}
+          />
+        </SelectableContext.Provider>
+      </NavbarContext.Provider>
+    );
+  }) as typeof Navbar;
+
+Navbar.propTypes = propTypes;
+Navbar.displayName = 'Navbar';
+
+export default Object.assign(Navbar, {
+  Brand: NavbarBrand,
+  Collapse: NavbarCollapse,
+  Offcanvas: NavbarOffcanvas,
+  Text: NavbarText,
+  Toggle: NavbarToggle,
+});
diff --git a/react/NavbarBrand.tsx b/react/NavbarBrand.tsx
new file mode 100644
index 0000000..4d8e503
--- /dev/null
+++ b/react/NavbarBrand.tsx
@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface NavbarBrandProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  href?: string;
+}
+
+const propTypes = {
+  /** @default 'navbar' */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * An href, when provided the Brand will render as an `<a>` element (unless `as` is provided).
+   */
+  href: PropTypes.string,
+
+  /**
+   * Set a custom element for this component.
+   */
+  as: PropTypes.elementType,
+};
+
+const NavbarBrand: BsPrefixRefForwardingComponent<'a', NavbarBrandProps> =
+  React.forwardRef<HTMLElement, NavbarBrandProps>(
+    ({ bsPrefix, className, as, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-brand');
+
+      const Component = as || (props.href ? 'a' : 'span');
+
+      return (
+        <Component
+          {...props}
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+        />
+      );
+    },
+  ) as typeof NavbarBrand;
+
+NavbarBrand.displayName = 'NavbarBrand';
+NavbarBrand.propTypes = propTypes;
+
+export default NavbarBrand;
diff --git a/react/NavbarCollapse.tsx b/react/NavbarCollapse.tsx
new file mode 100644
index 0000000..a7e3ed3
--- /dev/null
+++ b/react/NavbarCollapse.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import Collapse, { CollapseProps } from './Collapse';
+import { useBootstrapPrefix } from './ThemeProvider';
+import NavbarContext from './NavbarContext';
+import { BsPrefixProps } from './helpers';
+
+export interface NavbarCollapseProps
+  extends Omit<CollapseProps, 'children'>,
+    React.HTMLAttributes<HTMLDivElement>,
+    BsPrefixProps {}
+
+const propTypes = {
+  /** @default 'navbar-collapse' */
+  bsPrefix: PropTypes.string,
+};
+
+const NavbarCollapse = React.forwardRef<HTMLDivElement, NavbarCollapseProps>(
+  ({ children, bsPrefix, ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-collapse');
+    const context = useContext(NavbarContext);
+
+    return (
+      <Collapse in={!!(context && context.expanded)} {...props}>
+        <div ref={ref} className={bsPrefix}>
+          {children}
+        </div>
+      </Collapse>
+    );
+  },
+);
+
+NavbarCollapse.displayName = 'NavbarCollapse';
+NavbarCollapse.propTypes = propTypes;
+
+export default NavbarCollapse;
diff --git a/react/NavbarContext.tsx b/react/NavbarContext.tsx
new file mode 100644
index 0000000..2f2fb66
--- /dev/null
+++ b/react/NavbarContext.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+// TODO: check
+export interface NavbarContextType {
+  onToggle: () => void;
+  bsPrefix?: string;
+  expanded: boolean;
+  expand?: boolean | string | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+
+const context = React.createContext<NavbarContextType | null>(null);
+context.displayName = 'NavbarContext';
+
+export default context;
diff --git a/react/NavbarOffcanvas.tsx b/react/NavbarOffcanvas.tsx
new file mode 100644
index 0000000..a24d4f0
--- /dev/null
+++ b/react/NavbarOffcanvas.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useContext } from 'react';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import Offcanvas, { OffcanvasProps } from './Offcanvas';
+import NavbarContext from './NavbarContext';
+
+export type NavbarOffcanvasProps = Omit<OffcanvasProps, 'show'>;
+
+const NavbarOffcanvas = React.forwardRef<HTMLDivElement, NavbarOffcanvasProps>(
+  ({ onHide, ...props }, ref) => {
+    const context = useContext(NavbarContext);
+
+    const handleHide = useEventCallback(() => {
+      context?.onToggle?.();
+      onHide?.();
+    });
+
+    return (
+      <Offcanvas
+        ref={ref}
+        show={!!context?.expanded}
+        {...props}
+        renderStaticNode
+        onHide={handleHide}
+      />
+    );
+  },
+);
+
+NavbarOffcanvas.displayName = 'NavbarOffcanvas';
+
+export default NavbarOffcanvas;
diff --git a/react/NavbarText.tsx b/react/NavbarText.tsx
new file mode 100644
index 0000000..a47a9f3
--- /dev/null
+++ b/react/NavbarText.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface NavbarTextProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const NavbarText: BsPrefixRefForwardingComponent<'span', NavbarTextProps> =
+  React.forwardRef<HTMLElement, NavbarTextProps>(
+    ({ className, bsPrefix, as: Component = 'span', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-text');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof NavbarText;
+
+NavbarText.displayName = 'NavbarText';
+
+export default NavbarText;
diff --git a/react/NavbarToggle.tsx b/react/NavbarToggle.tsx
new file mode 100644
index 0000000..e50937a
--- /dev/null
+++ b/react/NavbarToggle.tsx
@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import useEventCallback from '@restart/hooks/useEventCallback';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import NavbarContext from './NavbarContext';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface NavbarToggleProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  label?: string;
+}
+
+const propTypes = {
+  /** @default 'navbar-toggler' */
+  bsPrefix: PropTypes.string,
+
+  /** An accessible ARIA label for the toggler button. */
+  label: PropTypes.string,
+
+  /** @private */
+  onClick: PropTypes.func,
+
+  /**
+   * The toggle content. When empty, the default toggle will be rendered.
+   */
+  children: PropTypes.node,
+
+  as: PropTypes.elementType,
+};
+
+const NavbarToggle: BsPrefixRefForwardingComponent<
+  'button',
+  NavbarToggleProps
+> = React.forwardRef<HTMLElement, NavbarToggleProps>(
+  (
+    {
+      bsPrefix,
+      className,
+      children,
+      label = 'Toggle navigation',
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'button',
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-toggler');
+
+    const { onToggle, expanded } = useContext(NavbarContext) || {};
+
+    const handleClick = useEventCallback((e) => {
+      if (onClick) onClick(e);
+      if (onToggle) onToggle();
+    });
+
+    if (Component === 'button') {
+      (props as any).type = 'button';
+    }
+
+    return (
+      <Component
+        {...props}
+        ref={ref}
+        onClick={handleClick}
+        aria-label={label}
+        className={classNames(className, bsPrefix, !expanded && 'collapsed')}
+      >
+        {children || <span className={`${bsPrefix}-icon`} />}
+      </Component>
+    );
+  },
+) as typeof NavbarToggle;
+
+NavbarToggle.displayName = 'NavbarToggle';
+NavbarToggle.propTypes = propTypes;
+
+export default NavbarToggle;
diff --git a/react/Offcanvas.tsx b/react/Offcanvas.tsx
new file mode 100644
index 0000000..2035d80
--- /dev/null
+++ b/react/Offcanvas.tsx
@@ -0,0 +1,353 @@
+import classNames from 'classnames';
+import useBreakpoint from '@restart/hooks/useBreakpoint';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import BaseModal, {
+  ModalProps as BaseModalProps,
+  ModalHandle,
+} from '@restart/ui/Modal';
+import Fade from './Fade';
+import OffcanvasBody from './OffcanvasBody';
+import OffcanvasToggling from './OffcanvasToggling';
+import ModalContext from './ModalContext';
+import OffcanvasHeader from './OffcanvasHeader';
+import OffcanvasTitle from './OffcanvasTitle';
+import { BsPrefixRefForwardingComponent } from './helpers';
+import { useBootstrapPrefix } from './ThemeProvider';
+import BootstrapModalManager, {
+  getSharedManager,
+} from './BootstrapModalManager';
+
+export type OffcanvasPlacement = 'start' | 'end' | 'top' | 'bottom';
+
+export interface OffcanvasProps
+  extends Omit<
+    BaseModalProps,
+    | 'role'
+    | 'renderBackdrop'
+    | 'renderDialog'
+    | 'transition'
+    | 'backdrop'
+    | 'backdropTransition'
+  > {
+  bsPrefix?: string;
+  backdropClassName?: string;
+  scroll?: boolean;
+  placement?: OffcanvasPlacement;
+  responsive?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | string;
+  renderStaticNode?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default 'offcanvas'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Include a backdrop component. Specify 'static' for a backdrop that doesn't
+   * trigger an "onHide" when clicked.
+   */
+  backdrop: PropTypes.oneOf(['static', true, false]),
+
+  /**
+   * Add an optional extra class name to .offcanvas-backdrop.
+   */
+  backdropClassName: PropTypes.string,
+
+  /**
+   * Closes the offcanvas when escape key is pressed.
+   */
+  keyboard: PropTypes.bool,
+
+  /**
+   * Allow body scrolling while offcanvas is open.
+   */
+  scroll: PropTypes.bool,
+
+  /**
+   * Which side of the viewport the offcanvas will appear from.
+   */
+  placement: PropTypes.oneOf<OffcanvasPlacement>([
+    'start',
+    'end',
+    'top',
+    'bottom',
+  ]),
+
+  /**
+   * Hide content outside the viewport from a specified breakpoint and down.
+   * @type {("sm"|"md"|"lg"|"xl"|"xxl")}
+   */
+  responsive: PropTypes.string,
+
+  /**
+   * When `true` The offcanvas will automatically shift focus to itself when it
+   * opens, and replace it to the last focused element when it closes.
+   * Generally this should never be set to false as it makes the offcanvas less
+   * accessible to assistive technologies, like screen-readers.
+   */
+  autoFocus: PropTypes.bool,
+
+  /**
+   * When `true` The offcanvas will prevent focus from leaving the offcanvas while
+   * open. Consider leaving the default value here, as it is necessary to make
+   * the offcanvas work well with assistive technologies, such as screen readers.
+   */
+  enforceFocus: PropTypes.bool,
+
+  /**
+   * When `true` The offcanvas will restore focus to previously focused element once
+   * offcanvas is hidden
+   */
+  restoreFocus: PropTypes.bool,
+
+  /**
+   * Options passed to focus function when `restoreFocus` is set to `true`
+   *
+   * @link  https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Parameters
+   */
+  restoreFocusOptions: PropTypes.shape({
+    preventScroll: PropTypes.bool,
+  }),
+
+  /**
+   * When `true` The offcanvas will show itself.
+   */
+  show: PropTypes.bool,
+
+  /**
+   * A callback fired when the offcanvas is opening.
+   */
+  onShow: PropTypes.func,
+
+  /**
+   * A callback fired when the header closeButton or backdrop is
+   * clicked. Required if either are specified.
+   */
+  onHide: PropTypes.func,
+
+  /**
+   * A callback fired when the escape key, if specified in `keyboard`, is pressed.
+   */
+  onEscapeKeyDown: PropTypes.func,
+
+  /**
+   * Callback fired before the offcanvas transitions in
+   */
+  onEnter: PropTypes.func,
+
+  /**
+   * Callback fired as the offcanvas begins to transition in
+   */
+  onEntering: PropTypes.func,
+
+  /**
+   * Callback fired after the offcanvas finishes transitioning in
+   */
+  onEntered: PropTypes.func,
+
+  /**
+   * Callback fired right before the offcanvas transitions out
+   */
+  onExit: PropTypes.func,
+
+  /**
+   * Callback fired as the offcanvas begins to transition out
+   */
+  onExiting: PropTypes.func,
+
+  /**
+   * Callback fired after the offcanvas finishes transitioning out
+   */
+  onExited: PropTypes.func,
+
+  /**
+   * @private
+   */
+  container: PropTypes.any,
+
+  /**
+   * For internal use to render static node from NavbarOffcanvas.
+   *
+   * @private
+   */
+  renderStaticNode: PropTypes.bool,
+
+  'aria-labelledby': PropTypes.string,
+};
+
+function DialogTransition(props) {
+  return <OffcanvasToggling {...props} />;
+}
+
+function BackdropTransition(props) {
+  return <Fade {...props} />;
+}
+
+const Offcanvas: BsPrefixRefForwardingComponent<'div', OffcanvasProps> =
+  React.forwardRef<ModalHandle, OffcanvasProps>(
+    (
+      {
+        bsPrefix,
+        className,
+        children,
+        'aria-labelledby': ariaLabelledby,
+        placement = 'start',
+        responsive,
+
+        /* BaseModal props */
+
+        show = false,
+        backdrop = true,
+        keyboard = true,
+        scroll = false,
+        onEscapeKeyDown,
+        onShow,
+        onHide,
+        container,
+        autoFocus = true,
+        enforceFocus = true,
+        restoreFocus = true,
+        restoreFocusOptions,
+        onEntered,
+        onExit,
+        onExiting,
+        onEnter,
+        onEntering,
+        onExited,
+        backdropClassName,
+        manager: propsManager,
+        renderStaticNode = false,
+        ...props
+      },
+      ref,
+    ) => {
+      const modalManager = useRef<BootstrapModalManager>();
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas');
+      const [showOffcanvas, setShowOffcanvas] = useState(false);
+      const handleHide = useEventCallback(onHide);
+
+      const hideResponsiveOffcanvas = useBreakpoint(
+        (responsive as any) || 'xs',
+        'up',
+      );
+
+      useEffect(() => {
+        // Handles the case where screen is resized while the responsive
+        // offcanvas is shown. If `responsive` not provided, just use `show`.
+        setShowOffcanvas(responsive ? show && !hideResponsiveOffcanvas : show);
+      }, [show, responsive, hideResponsiveOffcanvas]);
+
+      const modalContext = useMemo(
+        () => ({
+          onHide: handleHide,
+        }),
+        [handleHide],
+      );
+
+      function getModalManager() {
+        if (propsManager) return propsManager;
+        if (scroll) {
+          // Have to use a different modal manager since the shared
+          // one handles overflow.
+          if (!modalManager.current)
+            modalManager.current = new BootstrapModalManager({
+              handleContainerOverflow: false,
+            });
+          return modalManager.current;
+        }
+
+        return getSharedManager();
+      }
+
+      const handleEnter = (node, ...args) => {
+        if (node) node.style.visibility = 'visible';
+        onEnter?.(node, ...args);
+      };
+
+      const handleExited = (node, ...args) => {
+        if (node) node.style.visibility = '';
+        onExited?.(...args);
+      };
+
+      const renderBackdrop = useCallback(
+        (backdropProps) => (
+          <div
+            {...backdropProps}
+            className={classNames(`${bsPrefix}-backdrop`, backdropClassName)}
+          />
+        ),
+        [backdropClassName, bsPrefix],
+      );
+
+      const renderDialog = (dialogProps) => (
+        <div
+          {...dialogProps}
+          {...props}
+          className={classNames(
+            className,
+            responsive ? `${bsPrefix}-${responsive}` : bsPrefix,
+            `${bsPrefix}-${placement}`,
+          )}
+          aria-labelledby={ariaLabelledby}
+        >
+          {children}
+        </div>
+      );
+
+      return (
+        <>
+          {/* 
+            Only render static elements when offcanvas isn't shown so we 
+            don't duplicate elements.
+
+            TODO: Should follow bootstrap behavior and don't unmount children
+            when show={false} in BaseModal. Will do this next major version.
+          */}
+          {!showOffcanvas &&
+            (responsive || renderStaticNode) &&
+            renderDialog({})}
+
+          <ModalContext.Provider value={modalContext}>
+            <BaseModal
+              show={showOffcanvas}
+              ref={ref}
+              backdrop={backdrop}
+              container={container}
+              keyboard={keyboard}
+              autoFocus={autoFocus}
+              enforceFocus={enforceFocus && !scroll}
+              restoreFocus={restoreFocus}
+              restoreFocusOptions={restoreFocusOptions}
+              onEscapeKeyDown={onEscapeKeyDown}
+              onShow={onShow}
+              onHide={handleHide}
+              onEnter={handleEnter}
+              onEntering={onEntering}
+              onEntered={onEntered}
+              onExit={onExit}
+              onExiting={onExiting}
+              onExited={handleExited}
+              manager={getModalManager()}
+              transition={DialogTransition}
+              backdropTransition={BackdropTransition}
+              renderBackdrop={renderBackdrop}
+              renderDialog={renderDialog}
+            />
+          </ModalContext.Provider>
+        </>
+      );
+    },
+  ) as typeof Offcanvas;
+
+Offcanvas.displayName = 'Offcanvas';
+Offcanvas.propTypes = propTypes;
+
+export default Object.assign(Offcanvas, {
+  Body: OffcanvasBody,
+  Header: OffcanvasHeader,
+  Title: OffcanvasTitle,
+});
diff --git a/react/OffcanvasBody.tsx b/react/OffcanvasBody.tsx
new file mode 100644
index 0000000..8bff79c
--- /dev/null
+++ b/react/OffcanvasBody.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface OffcanvasBodyProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const OffcanvasBody: BsPrefixRefForwardingComponent<'div', OffcanvasBodyProps> =
+  React.forwardRef<HTMLElement, OffcanvasBodyProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas-body');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof OffcanvasBody;
+
+OffcanvasBody.displayName = 'OffcanvasBody';
+
+export default OffcanvasBody;
diff --git a/react/OffcanvasHeader.tsx b/react/OffcanvasHeader.tsx
new file mode 100644
index 0000000..6152793
--- /dev/null
+++ b/react/OffcanvasHeader.tsx
@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { CloseButtonVariant } from './CloseButton';
+import AbstractModalHeader, {
+  AbstractModalHeaderProps,
+} from './AbstractModalHeader';
+import { BsPrefixOnlyProps } from './helpers';
+
+export interface OffcanvasHeaderProps
+  extends AbstractModalHeaderProps,
+    BsPrefixOnlyProps {}
+
+const propTypes = {
+  /**
+   * @default 'offcanvas-header'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Provides an accessible label for the close
+   * button. It is used for Assistive Technology when the label text is not
+   * readable.
+   */
+  closeLabel: PropTypes.string,
+
+  /**
+   * Sets the variant for close button.
+   */
+  closeVariant: PropTypes.oneOf<CloseButtonVariant>(['white']),
+
+  /**
+   * Specify whether the Component should contain a close button
+   */
+  closeButton: PropTypes.bool,
+
+  /**
+   * A Callback fired when the close button is clicked. If used directly inside
+   * a Offcanvas component, the onHide will automatically be propagated up to the
+   * parent Offcanvas `onHide`.
+   */
+  onHide: PropTypes.func,
+};
+
+const OffcanvasHeader = React.forwardRef<HTMLDivElement, OffcanvasHeaderProps>(
+  (
+    {
+      bsPrefix,
+      className,
+      closeLabel = 'Close',
+      closeButton = false,
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas-header');
+    return (
+      <AbstractModalHeader
+        ref={ref}
+        {...props}
+        className={classNames(className, bsPrefix)}
+        closeLabel={closeLabel}
+        closeButton={closeButton}
+      />
+    );
+  },
+);
+
+OffcanvasHeader.displayName = 'OffcanvasHeader';
+OffcanvasHeader.propTypes = propTypes;
+
+export default OffcanvasHeader;
diff --git a/react/OffcanvasTitle.tsx b/react/OffcanvasTitle.tsx
new file mode 100644
index 0000000..1531c88
--- /dev/null
+++ b/react/OffcanvasTitle.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import divWithClassName from './divWithClassName';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+const DivStyledAsH5 = divWithClassName('h5');
+
+export interface OffcanvasTitleProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const OffcanvasTitle: BsPrefixRefForwardingComponent<
+  'div',
+  OffcanvasTitleProps
+> = React.forwardRef<HTMLElement, OffcanvasTitleProps>(
+  ({ className, bsPrefix, as: Component = DivStyledAsH5, ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas-title');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        {...props}
+      />
+    );
+  },
+) as typeof OffcanvasTitle;
+
+OffcanvasTitle.displayName = 'OffcanvasTitle';
+
+export default OffcanvasTitle;
diff --git a/react/OffcanvasToggling.tsx b/react/OffcanvasToggling.tsx
new file mode 100644
index 0000000..9e0b8ae
--- /dev/null
+++ b/react/OffcanvasToggling.tsx
@@ -0,0 +1,138 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import Transition, {
+  TransitionStatus,
+  ENTERED,
+  ENTERING,
+  EXITING,
+} from 'react-transition-group/Transition';
+import { TransitionCallbacks } from '@restart/ui/types';
+import transitionEndListener from './transitionEndListener';
+import { BsPrefixOnlyProps } from './helpers';
+import TransitionWrapper from './TransitionWrapper';
+import { useBootstrapPrefix } from './ThemeProvider';
+
+export interface OffcanvasTogglingProps
+  extends TransitionCallbacks,
+    BsPrefixOnlyProps {
+  className?: string;
+  in?: boolean;
+  mountOnEnter?: boolean;
+  unmountOnExit?: boolean;
+  appear?: boolean;
+  timeout?: number;
+  children: React.ReactElement;
+}
+
+const propTypes = {
+  /**
+   * Show the component; triggers the fade in or fade out animation
+   */
+  in: PropTypes.bool,
+
+  /**
+   * Wait until the first "enter" transition to mount the component (add it to the DOM)
+   */
+  mountOnEnter: PropTypes.bool,
+
+  /**
+   * Unmount the component (remove it from the DOM) when it is faded out
+   */
+  unmountOnExit: PropTypes.bool,
+
+  /**
+   * Run the fade in animation when the component mounts, if it is initially
+   * shown
+   */
+  appear: PropTypes.bool,
+
+  /**
+   * Duration of the fade animation in milliseconds, to ensure that finishing
+   * callbacks are fired even if the original browser transition end events are
+   * canceled
+   */
+  timeout: PropTypes.number,
+
+  /**
+   * Callback fired before the component fades in
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired after the component starts to fade in
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired after the has component faded in
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired before the component fades out
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired after the component starts to fade out
+   */
+  onExiting: PropTypes.func,
+  /**
+   * Callback fired after the component has faded out
+   */
+  onExited: PropTypes.func,
+};
+
+const transitionStyles = {
+  [ENTERING]: 'show',
+  [ENTERED]: 'show',
+};
+
+const OffcanvasToggling = React.forwardRef<
+  Transition<any>,
+  OffcanvasTogglingProps
+>(
+  (
+    {
+      bsPrefix,
+      className,
+      children,
+      in: inProp = false,
+      mountOnEnter = false,
+      unmountOnExit = false,
+      appear = false,
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas');
+
+    return (
+      <TransitionWrapper
+        ref={ref}
+        addEndListener={transitionEndListener}
+        in={inProp}
+        mountOnEnter={mountOnEnter}
+        unmountOnExit={unmountOnExit}
+        appear={appear}
+        {...props}
+        childRef={(children as any).ref}
+      >
+        {(status: TransitionStatus, innerProps: Record<string, unknown>) =>
+          React.cloneElement(children, {
+            ...innerProps,
+            className: classNames(
+              className,
+              children.props.className,
+              (status === ENTERING || status === EXITING) &&
+                `${bsPrefix}-toggling`,
+              transitionStyles[status],
+            ),
+          })
+        }
+      </TransitionWrapper>
+    );
+  },
+);
+
+OffcanvasToggling.propTypes = propTypes as any;
+OffcanvasToggling.displayName = 'OffcanvasToggling';
+
+export default OffcanvasToggling;
diff --git a/react/Overlay.tsx b/react/Overlay.tsx
new file mode 100644
index 0000000..98e0d34
--- /dev/null
+++ b/react/Overlay.tsx
@@ -0,0 +1,258 @@
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import BaseOverlay, {
+  OverlayProps as BaseOverlayProps,
+  OverlayArrowProps,
+} from '@restart/ui/Overlay';
+import { State } from '@restart/ui/usePopper';
+import { componentOrElement, elementType } from 'prop-types-extra';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import useOverlayOffset from './useOverlayOffset';
+import Fade from './Fade';
+import { TransitionType } from './helpers';
+import { Placement, PopperRef, RootCloseEvent } from './types';
+import safeFindDOMNode from './safeFindDOMNode';
+
+export interface OverlayInjectedProps {
+  ref: React.RefCallback<HTMLElement>;
+  style: React.CSSProperties;
+  'aria-labelledby'?: string;
+
+  arrowProps: Partial<OverlayArrowProps>;
+
+  show: boolean;
+  placement: Placement | undefined;
+  popper: PopperRef;
+  hasDoneInitialMeasure?: boolean;
+
+  [prop: string]: any;
+}
+
+export type OverlayChildren =
+  | React.ReactElement<OverlayInjectedProps>
+  | ((injected: OverlayInjectedProps) => React.ReactNode);
+
+export interface OverlayProps
+  extends Omit<BaseOverlayProps, 'children' | 'transition' | 'rootCloseEvent'> {
+  children: OverlayChildren;
+  transition?: TransitionType;
+  placement?: Placement;
+  rootCloseEvent?: RootCloseEvent;
+}
+
+const propTypes = {
+  /**
+   * A component instance, DOM node, or function that returns either.
+   * The `container` element will have the Overlay appended to it via a React portal.
+   */
+  container: PropTypes.oneOfType([componentOrElement, PropTypes.func]),
+
+  /**
+   * A component instance, DOM node, or function that returns either.
+   * The overlay will be positioned in relation to the `target`
+   */
+  target: PropTypes.oneOfType([componentOrElement, PropTypes.func]),
+
+  /**
+   * Set the visibility of the Overlay
+   */
+  show: PropTypes.bool,
+
+  /**
+   * A set of popper options and props passed directly to Popper.
+   */
+  popperConfig: PropTypes.object,
+
+  /**
+   * Specify whether the overlay should trigger onHide when the user clicks outside the overlay
+   */
+  rootClose: PropTypes.bool,
+
+  /**
+   * Specify event for triggering a "root close" toggle.
+   */
+  rootCloseEvent: PropTypes.oneOf<RootCloseEvent>(['click', 'mousedown']),
+
+  /**
+   * A callback invoked by the overlay when it wishes to be hidden. Required if
+   * `rootClose` is specified.
+   */
+  onHide: PropTypes.func,
+
+  /**
+   * Animate the entering and exiting of the Overlay. `true` will use the `<Fade>` transition,
+   * or a custom react-transition-group `<Transition>` component can be provided.
+   */
+  transition: PropTypes.oneOfType([PropTypes.bool, elementType]),
+
+  /**
+   * Callback fired before the Overlay transitions in
+   */
+  onEnter: PropTypes.func,
+
+  /**
+   * Callback fired as the Overlay begins to transition in
+   */
+  onEntering: PropTypes.func,
+
+  /**
+   * Callback fired after the Overlay finishes transitioning in
+   */
+  onEntered: PropTypes.func,
+
+  /**
+   * Callback fired right before the Overlay transitions out
+   */
+  onExit: PropTypes.func,
+
+  /**
+   * Callback fired as the Overlay begins to transition out
+   */
+  onExiting: PropTypes.func,
+
+  /**
+   * Callback fired after the Overlay finishes transitioning out
+   */
+  onExited: PropTypes.func,
+
+  /**
+   * The placement of the Overlay in relation to it's `target`.
+   */
+  placement: PropTypes.oneOf<Placement>([
+    'auto-start',
+    'auto',
+    'auto-end',
+    'top-start',
+    'top',
+    'top-end',
+    'right-start',
+    'right',
+    'right-end',
+    'bottom-end',
+    'bottom',
+    'bottom-start',
+    'left-end',
+    'left',
+    'left-start',
+  ]),
+};
+
+function wrapRefs(props, arrowProps) {
+  const { ref } = props;
+  const { ref: aRef } = arrowProps;
+
+  props.ref = ref.__wrapped || (ref.__wrapped = (r) => ref(safeFindDOMNode(r)));
+  arrowProps.ref =
+    aRef.__wrapped || (aRef.__wrapped = (r) => aRef(safeFindDOMNode(r)));
+}
+
+const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
+  (
+    {
+      children: overlay,
+      transition = Fade,
+      popperConfig = {},
+      rootClose = false,
+      placement = 'top',
+      show: outerShow = false,
+      ...outerProps
+    },
+    outerRef,
+  ) => {
+    const popperRef = useRef<Partial<PopperRef>>({});
+    const [firstRenderedState, setFirstRenderedState] = useState<State | null>(
+      null,
+    );
+    const [ref, modifiers] = useOverlayOffset(outerProps.offset);
+    const mergedRef = useMergedRefs(outerRef, ref);
+
+    const actualTransition =
+      transition === true ? Fade : transition || undefined;
+
+    const handleFirstUpdate = useEventCallback((state) => {
+      setFirstRenderedState(state);
+      popperConfig?.onFirstUpdate?.(state);
+    });
+
+    useIsomorphicEffect(() => {
+      if (firstRenderedState && outerProps.target) {
+        // Must wait for target element to resolve before updating popper.
+        popperRef.current.scheduleUpdate?.();
+      }
+    }, [firstRenderedState, outerProps.target]);
+
+    useEffect(() => {
+      if (!outerShow) {
+        setFirstRenderedState(null);
+      }
+    }, [outerShow]);
+
+    return (
+      <BaseOverlay
+        {...outerProps}
+        ref={mergedRef}
+        popperConfig={{
+          ...popperConfig,
+          modifiers: modifiers.concat(popperConfig.modifiers || []),
+          onFirstUpdate: handleFirstUpdate,
+        }}
+        transition={actualTransition}
+        rootClose={rootClose}
+        placement={placement}
+        show={outerShow}
+      >
+        {(overlayProps, { arrowProps, popper: popperObj, show }) => {
+          wrapRefs(overlayProps, arrowProps);
+          // Need to get placement from popper object, handling case when overlay is flipped using 'flip' prop
+          const updatedPlacement = popperObj?.placement;
+          const popper = Object.assign(popperRef.current, {
+            state: popperObj?.state,
+            scheduleUpdate: popperObj?.update,
+            placement: updatedPlacement,
+            outOfBoundaries:
+              popperObj?.state?.modifiersData.hide?.isReferenceHidden || false,
+            strategy: popperConfig.strategy,
+          });
+
+          const hasDoneInitialMeasure = !!firstRenderedState;
+
+          if (typeof overlay === 'function')
+            return overlay({
+              ...overlayProps,
+              placement: updatedPlacement,
+              show,
+              ...(!transition && show && { className: 'show' }),
+              popper,
+              arrowProps,
+              hasDoneInitialMeasure,
+            });
+
+          return React.cloneElement(overlay as React.ReactElement, {
+            ...overlayProps,
+            placement: updatedPlacement,
+            arrowProps,
+            popper,
+            hasDoneInitialMeasure,
+            className: classNames(
+              (overlay as React.ReactElement).props.className,
+              !transition && show && 'show',
+            ),
+            style: {
+              ...(overlay as React.ReactElement).props.style,
+              ...overlayProps.style,
+            },
+          });
+        }}
+      </BaseOverlay>
+    );
+  },
+);
+
+Overlay.displayName = 'Overlay';
+Overlay.propTypes = propTypes;
+
+export default Overlay;
diff --git a/react/OverlayTrigger.tsx b/react/OverlayTrigger.tsx
new file mode 100644
index 0000000..4c04a3a
--- /dev/null
+++ b/react/OverlayTrigger.tsx
@@ -0,0 +1,324 @@
+import contains from 'dom-helpers/contains';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { cloneElement, useCallback, useRef } from 'react';
+import useTimeout from '@restart/hooks/useTimeout';
+import warning from 'warning';
+import { useUncontrolledProp } from 'uncontrollable';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import Overlay, { OverlayChildren, OverlayProps } from './Overlay';
+import safeFindDOMNode from './safeFindDOMNode';
+import { Placement } from './types';
+
+export type OverlayTriggerType = 'hover' | 'click' | 'focus';
+
+export type OverlayDelay = number | { show: number; hide: number };
+
+export type OverlayInjectedProps = {
+  onFocus?: (...args: any[]) => any;
+};
+
+export type OverlayTriggerRenderProps = OverlayInjectedProps & {
+  ref: React.Ref<any>;
+};
+
+export interface OverlayTriggerProps
+  extends Omit<OverlayProps, 'children' | 'target'> {
+  children:
+    | React.ReactElement
+    | ((props: OverlayTriggerRenderProps) => React.ReactNode);
+  trigger?: OverlayTriggerType | OverlayTriggerType[];
+  delay?: OverlayDelay;
+  show?: boolean;
+  defaultShow?: boolean;
+  onToggle?: (nextShow: boolean) => void;
+  flip?: boolean;
+  overlay: OverlayChildren;
+
+  target?: never;
+  onHide?: never;
+  placement?: Placement;
+}
+
+function normalizeDelay(delay?: OverlayDelay) {
+  return delay && typeof delay === 'object'
+    ? delay
+    : {
+        show: delay,
+        hide: delay,
+      };
+}
+
+// Simple implementation of mouseEnter and mouseLeave.
+// React's built version is broken: https://github.com/facebook/react/issues/4251
+// for cases when the trigger is disabled and mouseOut/Over can cause flicker
+// moving from one child element to another.
+function handleMouseOverOut(
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  handler: (...args: [React.MouseEvent, ...any[]]) => any,
+  args: [React.MouseEvent, ...any[]],
+  relatedNative: 'fromElement' | 'toElement',
+) {
+  const [e] = args;
+  const target = e.currentTarget;
+  const related = e.relatedTarget || e.nativeEvent[relatedNative];
+
+  if ((!related || related !== target) && !contains(target, related)) {
+    handler(...args);
+  }
+}
+
+const triggerType = PropTypes.oneOf<OverlayTriggerType>([
+  'click',
+  'hover',
+  'focus',
+]);
+
+const propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+
+  /**
+   * Specify which action or actions trigger Overlay visibility
+   *
+   * The `click` trigger ignores the configured `delay`.
+   *
+   * @type {'hover' | 'click' |'focus' | Array<'hover' | 'click' |'focus'>}
+   */
+  trigger: PropTypes.oneOfType([
+    triggerType.isRequired,
+    PropTypes.arrayOf(triggerType.isRequired),
+  ]),
+
+  /**
+   * A millisecond delay amount to show and hide the Overlay once triggered
+   */
+  delay: PropTypes.oneOfType([
+    PropTypes.number.isRequired,
+    PropTypes.shape({
+      show: PropTypes.number.isRequired,
+      hide: PropTypes.number.isRequired,
+    }),
+  ]),
+
+  /**
+   * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired
+   * with `onToggle` to avoid breaking user interactions.
+   *
+   * Manually toggling `show` does **not** wait for `delay` to change the visibility.
+   *
+   * @controllable onToggle
+   */
+  show: PropTypes.bool,
+
+  /**
+   * The initial visibility state of the Overlay.
+   */
+  defaultShow: PropTypes.bool,
+
+  /**
+   * A callback that fires when the user triggers a change in tooltip visibility.
+   *
+   * `onToggle` is called with the desired next `show`, and generally should be passed
+   * back to the `show` prop. `onToggle` fires _after_ the configured `delay`
+   *
+   * @controllable `show`
+   */
+  onToggle: PropTypes.func,
+
+  /**
+    The initial flip state of the Overlay.
+   */
+  flip: PropTypes.bool,
+
+  /**
+   * An element or text to overlay next to the target.
+   */
+  overlay: PropTypes.oneOfType([PropTypes.func, PropTypes.element.isRequired])
+    .isRequired,
+
+  /**
+   * A Popper.js config object passed to the underlying popper instance.
+   */
+  popperConfig: PropTypes.object,
+
+  // Overridden props from `<Overlay>`.
+  /**
+   * @private
+   */
+  target: PropTypes.oneOf([null]),
+
+  /**
+   * @private
+   */
+  onHide: PropTypes.oneOf([null]),
+
+  /**
+   * The placement of the Overlay in relation to it's `target`.
+   */
+  placement: PropTypes.oneOf<Placement>([
+    'auto-start',
+    'auto',
+    'auto-end',
+    'top-start',
+    'top',
+    'top-end',
+    'right-start',
+    'right',
+    'right-end',
+    'bottom-end',
+    'bottom',
+    'bottom-start',
+    'left-end',
+    'left',
+    'left-start',
+  ]),
+};
+
+const OverlayTrigger: React.FC<OverlayTriggerProps> = ({
+  trigger = ['hover', 'focus'],
+  overlay,
+  children,
+  popperConfig = {},
+
+  show: propsShow,
+  defaultShow = false,
+  onToggle,
+
+  delay: propsDelay,
+  placement,
+  flip = placement && placement.indexOf('auto') !== -1,
+  ...props
+}: OverlayTriggerProps) => {
+  const triggerNodeRef = useRef(null);
+  const mergedRef = useMergedRefs<unknown>(
+    triggerNodeRef,
+    (children as any).ref,
+  );
+  const timeout = useTimeout();
+  const hoverStateRef = useRef<string>('');
+
+  const [show, setShow] = useUncontrolledProp(propsShow, defaultShow, onToggle);
+
+  const delay = normalizeDelay(propsDelay);
+
+  const { onFocus, onBlur, onClick } =
+    typeof children !== 'function'
+      ? React.Children.only(children).props
+      : ({} as any);
+
+  const attachRef = (r: React.Component | Element | null | undefined) => {
+    mergedRef(safeFindDOMNode(r));
+  };
+
+  const handleShow = useCallback(() => {
+    timeout.clear();
+    hoverStateRef.current = 'show';
+
+    if (!delay.show) {
+      setShow(true);
+      return;
+    }
+
+    timeout.set(() => {
+      if (hoverStateRef.current === 'show') setShow(true);
+    }, delay.show);
+  }, [delay.show, setShow, timeout]);
+
+  const handleHide = useCallback(() => {
+    timeout.clear();
+    hoverStateRef.current = 'hide';
+
+    if (!delay.hide) {
+      setShow(false);
+      return;
+    }
+
+    timeout.set(() => {
+      if (hoverStateRef.current === 'hide') setShow(false);
+    }, delay.hide);
+  }, [delay.hide, setShow, timeout]);
+
+  const handleFocus = useCallback(
+    (...args: any[]) => {
+      handleShow();
+      onFocus?.(...args);
+    },
+    [handleShow, onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (...args: any[]) => {
+      handleHide();
+      onBlur?.(...args);
+    },
+    [handleHide, onBlur],
+  );
+
+  const handleClick = useCallback(
+    (...args: any[]) => {
+      setShow(!show);
+      onClick?.(...args);
+    },
+    [onClick, setShow, show],
+  );
+
+  const handleMouseOver = useCallback(
+    (...args: [React.MouseEvent, ...any[]]) => {
+      handleMouseOverOut(handleShow, args, 'fromElement');
+    },
+    [handleShow],
+  );
+
+  const handleMouseOut = useCallback(
+    (...args: [React.MouseEvent, ...any[]]) => {
+      handleMouseOverOut(handleHide, args, 'toElement');
+    },
+    [handleHide],
+  );
+
+  const triggers: string[] = trigger == null ? [] : [].concat(trigger as any);
+  const triggerProps: any = {
+    ref: attachRef,
+  };
+
+  if (triggers.indexOf('click') !== -1) {
+    triggerProps.onClick = handleClick;
+  }
+
+  if (triggers.indexOf('focus') !== -1) {
+    triggerProps.onFocus = handleFocus;
+    triggerProps.onBlur = handleBlur;
+  }
+
+  if (triggers.indexOf('hover') !== -1) {
+    warning(
+      triggers.length > 1,
+      '[react-bootstrap] Specifying only the `"hover"` trigger limits the visibility of the overlay to just mouse users. Consider also including the `"focus"` trigger so that touch and keyboard only users can see the overlay as well.',
+    );
+    triggerProps.onMouseOver = handleMouseOver;
+    triggerProps.onMouseOut = handleMouseOut;
+  }
+
+  return (
+    <>
+      {typeof children === 'function'
+        ? children(triggerProps)
+        : cloneElement(children, triggerProps)}
+      <Overlay
+        {...props}
+        show={show}
+        onHide={handleHide}
+        flip={flip}
+        placement={placement}
+        popperConfig={popperConfig}
+        target={triggerNodeRef.current}
+      >
+        {overlay}
+      </Overlay>
+    </>
+  );
+};
+
+OverlayTrigger.propTypes = propTypes;
+
+export default OverlayTrigger;
diff --git a/react/PageItem.tsx b/react/PageItem.tsx
new file mode 100644
index 0000000..c419d45
--- /dev/null
+++ b/react/PageItem.tsx
@@ -0,0 +1,106 @@
+/* eslint-disable react/no-multi-comp */
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { ReactNode } from 'react';
+import Anchor from '@restart/ui/Anchor';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface PageItemProps
+  extends React.HTMLAttributes<HTMLElement>,
+    BsPrefixProps {
+  disabled?: boolean;
+  active?: boolean;
+  activeLabel?: string;
+  href?: string;
+  linkStyle?: React.CSSProperties;
+  linkClassName?: string;
+}
+
+const propTypes = {
+  /** Disables the PageItem */
+  disabled: PropTypes.bool,
+
+  /** Styles PageItem as active, and renders a `<span>` instead of an `<a>`. */
+  active: PropTypes.bool,
+
+  /** An accessible label indicating the active state. */
+  activeLabel: PropTypes.string,
+
+  /** The HTML href attribute for the `PageItem`. */
+  href: PropTypes.string,
+
+  /** A callback function for when this component is clicked. */
+  onClick: PropTypes.func,
+
+  /** custom style for the inner component of the PageItem */
+  linkStyle: PropTypes.object,
+
+  /** custom className for the inner component of the PageItem */
+  linkClassName: PropTypes.string,
+};
+
+const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> =
+  React.forwardRef<HTMLLIElement, PageItemProps>(
+    (
+      {
+        active = false,
+        disabled = false,
+        className,
+        style,
+        activeLabel = '(current)',
+        children,
+        linkStyle,
+        linkClassName,
+        as = Anchor,
+        ...props
+      }: PageItemProps,
+      ref,
+    ) => {
+      const Component = active || disabled ? 'span' : as;
+      return (
+        <li
+          ref={ref}
+          style={style}
+          className={classNames(className, 'page-item', { active, disabled })}
+        >
+          <Component
+            className={classNames('page-link', linkClassName)}
+            style={linkStyle}
+            {...props}
+          >
+            {children}
+            {active && activeLabel && (
+              <span className="visually-hidden">{activeLabel}</span>
+            )}
+          </Component>
+        </li>
+      );
+    },
+  ) as typeof PageItem;
+
+PageItem.propTypes = propTypes;
+PageItem.displayName = 'PageItem';
+
+export default PageItem;
+
+function createButton(name: string, defaultValue: ReactNode, label = name) {
+  const Button = React.forwardRef(
+    ({ children, ...props }: PageItemProps, ref) => (
+      <PageItem {...props} ref={ref}>
+        <span aria-hidden="true">{children || defaultValue}</span>
+        <span className="visually-hidden">{label}</span>
+      </PageItem>
+    ),
+  );
+
+  Button.displayName = name;
+
+  return Button;
+}
+
+export const First = createButton('First', '«');
+export const Prev = createButton('Prev', '‹', 'Previous');
+export const Ellipsis = createButton('Ellipsis', '…', 'More');
+export const Next = createButton('Next', '›');
+export const Last = createButton('Last', '»');
diff --git a/react/Pagination.tsx b/react/Pagination.tsx
new file mode 100644
index 0000000..38aef1c
--- /dev/null
+++ b/react/Pagination.tsx
@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import PageItem, { Ellipsis, First, Last, Next, Prev } from './PageItem';
+import { BsPrefixProps } from './helpers';
+
+type PaginationSize = 'sm' | 'lg';
+
+export interface PaginationProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLUListElement> {
+  size?: 'sm' | 'lg';
+}
+
+const propTypes = {
+  /**
+   * @default 'pagination'
+   * */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Sets the size of all PageItems.
+   *
+   * @type {('sm'|'lg')}
+   */
+  size: PropTypes.oneOf<PaginationSize>(['sm', 'lg']),
+};
+
+const Pagination = React.forwardRef<HTMLUListElement, PaginationProps>(
+  ({ bsPrefix, className, size, ...props }, ref) => {
+    const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'pagination');
+    return (
+      <ul
+        ref={ref}
+        {...props}
+        className={classNames(
+          className,
+          decoratedBsPrefix,
+          size && `${decoratedBsPrefix}-${size}`,
+        )}
+      />
+    );
+  },
+);
+
+Pagination.propTypes = propTypes;
+Pagination.displayName = 'Pagination';
+
+export default Object.assign(Pagination, {
+  First,
+  Prev,
+  Ellipsis,
+  Item: PageItem,
+  Next,
+  Last,
+});
diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx
new file mode 100644
index 0000000..278ecf1
--- /dev/null
+++ b/react/Placeholder.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import usePlaceholder, { UsePlaceholderProps } from './usePlaceholder';
+import PlaceholderButton from './PlaceholderButton';
+
+export interface PlaceholderProps extends UsePlaceholderProps, BsPrefixProps {}
+
+const propTypes = {
+  /**
+   * @default 'placeholder'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Changes the animation of the placeholder.
+   *
+   * @type ('glow'|'wave')
+   */
+  animation: PropTypes.string,
+
+  /**
+   * Change the background color of the placeholder.
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark')}
+   */
+  bg: PropTypes.string,
+
+  /**
+   * Component size variations.
+   *
+   * @type ('xs'|'sm'|'lg')
+   */
+  size: PropTypes.string,
+};
+
+const Placeholder: BsPrefixRefForwardingComponent<'span', PlaceholderProps> =
+  React.forwardRef<HTMLElement, PlaceholderProps>(
+    ({ as: Component = 'span', ...props }, ref) => {
+      const placeholderProps = usePlaceholder(props);
+
+      return <Component {...placeholderProps} ref={ref} />;
+    },
+  ) as typeof Placeholder;
+
+Placeholder.displayName = 'Placeholder';
+Placeholder.propTypes = propTypes;
+
+export default Object.assign(Placeholder, {
+  Button: PlaceholderButton,
+});
diff --git a/react/PlaceholderButton.tsx b/react/PlaceholderButton.tsx
new file mode 100644
index 0000000..ddedeee
--- /dev/null
+++ b/react/PlaceholderButton.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { BsPrefixRefForwardingComponent } from './helpers';
+import Button from './Button';
+import usePlaceholder, { UsePlaceholderProps } from './usePlaceholder';
+import { ButtonVariant } from './types';
+
+export interface PlaceholderButtonProps extends UsePlaceholderProps {
+  variant?: ButtonVariant;
+}
+
+const propTypes = {
+  /**
+   * @default 'placeholder'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Changes the animation of the placeholder.
+   */
+  animation: PropTypes.oneOf(['glow', 'wave']),
+
+  size: PropTypes.oneOf(['xs', 'sm', 'lg']),
+
+  /**
+   * Button variant.
+   */
+  variant: PropTypes.string,
+};
+
+const PlaceholderButton: BsPrefixRefForwardingComponent<
+  'button',
+  PlaceholderButtonProps
+> = React.forwardRef<HTMLButtonElement, PlaceholderButtonProps>(
+  (props, ref) => {
+    const placeholderProps = usePlaceholder(props);
+
+    return <Button {...placeholderProps} ref={ref} disabled tabIndex={-1} />;
+  },
+) as typeof PlaceholderButton;
+
+PlaceholderButton.displayName = 'PlaceholderButton';
+PlaceholderButton.propTypes = propTypes;
+
+export default PlaceholderButton;
diff --git a/react/Popover.tsx b/react/Popover.tsx
new file mode 100644
index 0000000..38b1e24
--- /dev/null
+++ b/react/Popover.tsx
@@ -0,0 +1,147 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayArrowProps } from '@restart/ui/Overlay';
+import { useBootstrapPrefix, useIsRTL } from './ThemeProvider';
+import PopoverHeader from './PopoverHeader';
+import PopoverBody from './PopoverBody';
+import { Placement, PopperRef } from './types';
+import { BsPrefixProps, getOverlayDirection } from './helpers';
+import getInitialPopperStyles from './getInitialPopperStyles';
+
+export interface PopoverProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    BsPrefixProps {
+  placement?: Placement;
+  title?: string;
+  arrowProps?: Partial<OverlayArrowProps>;
+  body?: boolean;
+  popper?: PopperRef;
+  show?: boolean;
+  hasDoneInitialMeasure?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default 'popover'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * An html id attribute, necessary for accessibility
+   * @type {string}
+   * @required
+   */
+  id: PropTypes.string,
+
+  /**
+   * Sets the direction the Popover is positioned towards.
+   *
+   * > This is generally provided by the `Overlay` component positioning the popover
+   */
+  placement: PropTypes.oneOf<Placement>([
+    'auto-start',
+    'auto',
+    'auto-end',
+    'top-start',
+    'top',
+    'top-end',
+    'right-start',
+    'right',
+    'right-end',
+    'bottom-end',
+    'bottom',
+    'bottom-start',
+    'left-end',
+    'left',
+    'left-start',
+  ]),
+
+  /**
+   * An Overlay injected set of props for positioning the popover arrow.
+   *
+   * > This is generally provided by the `Overlay` component positioning the popover
+   */
+  arrowProps: PropTypes.shape({
+    ref: PropTypes.any,
+    style: PropTypes.object,
+  }),
+
+  /**
+   * When this prop is set, it creates a Popover with a Popover.Body inside
+   * passing the children directly to it
+   */
+  body: PropTypes.bool,
+
+  /**
+   * Whether or not Popper has done its initial measurement and positioning.
+   */
+  hasDoneInitialMeasure: PropTypes.bool,
+
+  /** @private */
+  popper: PropTypes.object,
+
+  /** @private */
+  show: PropTypes.bool,
+};
+
+const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
+  (
+    {
+      bsPrefix,
+      placement = 'right',
+      className,
+      style,
+      children,
+      body,
+      arrowProps,
+      hasDoneInitialMeasure,
+      popper,
+      show,
+      ...props
+    },
+    ref,
+  ) => {
+    const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'popover');
+    const isRTL = useIsRTL();
+    const [primaryPlacement] = placement?.split('-') || [];
+    const bsDirection = getOverlayDirection(primaryPlacement, isRTL);
+
+    let computedStyle = style;
+    if (show && !hasDoneInitialMeasure) {
+      computedStyle = {
+        ...style,
+        ...getInitialPopperStyles(popper?.strategy),
+      };
+    }
+
+    return (
+      <div
+        ref={ref}
+        role="tooltip"
+        style={computedStyle}
+        x-placement={primaryPlacement}
+        className={classNames(
+          className,
+          decoratedBsPrefix,
+          primaryPlacement && `bs-popover-${bsDirection}`,
+        )}
+        {...props}
+      >
+        <div className="popover-arrow" {...arrowProps} />
+        {body ? <PopoverBody>{children}</PopoverBody> : children}
+      </div>
+    );
+  },
+);
+
+Popover.propTypes = propTypes as any;
+
+export default Object.assign(Popover, {
+  Header: PopoverHeader,
+  Body: PopoverBody,
+
+  // Default popover offset.
+  // https://github.com/twbs/bootstrap/blob/5c32767e0e0dbac2d934bcdee03719a65d3f1187/js/src/popover.js#L28
+  POPPER_OFFSET: [0, 8] as const,
+});
diff --git a/react/PopoverBody.tsx b/react/PopoverBody.tsx
new file mode 100644
index 0000000..ef69dcb
--- /dev/null
+++ b/react/PopoverBody.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface PopoverBodyProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const PopoverBody: BsPrefixRefForwardingComponent<'div', PopoverBodyProps> =
+  React.forwardRef<HTMLElement, PopoverBodyProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'popover-body');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof PopoverBody;
+
+PopoverBody.displayName = 'PopoverBody';
+
+export default PopoverBody;
diff --git a/react/PopoverHeader.tsx b/react/PopoverHeader.tsx
new file mode 100644
index 0000000..413eb7a
--- /dev/null
+++ b/react/PopoverHeader.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface PopoverHeaderProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const PopoverHeader: BsPrefixRefForwardingComponent<'div', PopoverHeaderProps> =
+  React.forwardRef<HTMLElement, PopoverHeaderProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'popover-header');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof PopoverHeader;
+
+PopoverHeader.displayName = 'PopoverHeader';
+
+export default PopoverHeader;
diff --git a/react/ProgressBar.tsx b/react/ProgressBar.tsx
new file mode 100644
index 0000000..049c118
--- /dev/null
+++ b/react/ProgressBar.tsx
@@ -0,0 +1,237 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+
+import { map } from './ElementChildren';
+import { BsPrefixProps } from './helpers';
+
+export interface ProgressBarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    BsPrefixProps {
+  min?: number;
+  now?: number;
+  max?: number;
+  label?: React.ReactNode;
+  visuallyHidden?: boolean;
+  striped?: boolean;
+  animated?: boolean;
+  variant?: 'success' | 'danger' | 'warning' | 'info' | string;
+  isChild?: boolean;
+}
+
+const ROUND_PRECISION = 1000;
+
+/**
+ * Validate that children, if any, are instances of `ProgressBar`.
+ */
+function onlyProgressBar(props, propName, componentName): Error | null {
+  const children = props[propName];
+  if (!children) {
+    return null;
+  }
+
+  let error: Error | null = null;
+
+  React.Children.forEach(children, (child) => {
+    if (error) {
+      return;
+    }
+
+    /**
+     * Compare types in a way that works with libraries that patch and proxy
+     * components like react-hot-loader.
+     *
+     * see https://github.com/gaearon/react-hot-loader#checking-element-types
+     */
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    const element = <ProgressBar />;
+    if (child.type === element.type) return;
+
+    const childType: any = child.type;
+    const childIdentifier = React.isValidElement(child)
+      ? childType.displayName || childType.name || childType
+      : child;
+    error = new Error(
+      `Children of ${componentName} can contain only ProgressBar ` +
+        `components. Found ${childIdentifier}.`,
+    );
+  });
+
+  return error;
+}
+
+const propTypes = {
+  /**
+   * Minimum value progress can begin from
+   */
+  min: PropTypes.number,
+
+  /**
+   * Current value of progress
+   */
+  now: PropTypes.number,
+
+  /**
+   * Maximum value progress can reach
+   */
+  max: PropTypes.number,
+
+  /**
+   * Show label that represents visual percentage.
+   * EG. 60%
+   */
+  label: PropTypes.node,
+
+  /**
+   * Hide's the label visually.
+   */
+  visuallyHidden: PropTypes.bool,
+
+  /**
+   * Uses a gradient to create a striped effect.
+   */
+  striped: PropTypes.bool,
+
+  /**
+   * Animate's the stripes from right to left
+   */
+  animated: PropTypes.bool,
+
+  /**
+   * @private
+   * @default 'progress-bar'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Sets the background class of the progress bar.
+   *
+   * @type ('success'|'danger'|'warning'|'info')
+   */
+  variant: PropTypes.string,
+
+  /**
+   * Child elements (only allows elements of type <ProgressBar />)
+   */
+  children: onlyProgressBar,
+
+  /**
+   * @private
+   */
+  isChild: PropTypes.bool,
+};
+
+function getPercentage(now, min, max) {
+  const percentage = ((now - min) / (max - min)) * 100;
+  return Math.round(percentage * ROUND_PRECISION) / ROUND_PRECISION;
+}
+
+function renderProgressBar(
+  {
+    min,
+    now,
+    max,
+    label,
+    visuallyHidden,
+    striped,
+    animated,
+    className,
+    style,
+    variant,
+    bsPrefix,
+    ...props
+  }: ProgressBarProps,
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      {...props}
+      role="progressbar"
+      className={classNames(className, `${bsPrefix}-bar`, {
+        [`bg-${variant}`]: variant,
+        [`${bsPrefix}-bar-animated`]: animated,
+        [`${bsPrefix}-bar-striped`]: animated || striped,
+      })}
+      style={{ width: `${getPercentage(now, min, max)}%`, ...style }}
+      aria-valuenow={now}
+      aria-valuemin={min}
+      aria-valuemax={max}
+    >
+      {visuallyHidden ? (
+        <span className="visually-hidden">{label}</span>
+      ) : (
+        label
+      )}
+    </div>
+  );
+}
+
+renderProgressBar.propTypes = propTypes;
+
+const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
+  ({ isChild = false, ...rest }: ProgressBarProps, ref) => {
+    const props = {
+      min: 0,
+      max: 100,
+      animated: false,
+      visuallyHidden: false,
+      striped: false,
+      ...rest,
+    };
+
+    props.bsPrefix = useBootstrapPrefix(props.bsPrefix, 'progress');
+
+    if (isChild) {
+      return renderProgressBar(props, ref);
+    }
+
+    const {
+      min,
+      now,
+      max,
+      label,
+      visuallyHidden,
+      striped,
+      animated,
+      bsPrefix,
+      variant,
+      className,
+      children,
+      ...wrapperProps
+    } = props;
+
+    return (
+      <div
+        ref={ref}
+        {...wrapperProps}
+        className={classNames(className, bsPrefix)}
+      >
+        {children
+          ? map(children, (child) => cloneElement(child, { isChild: true }))
+          : renderProgressBar(
+              {
+                min,
+                now,
+                max,
+                label,
+                visuallyHidden,
+                striped,
+                animated,
+                bsPrefix,
+                variant,
+              },
+              ref,
+            )}
+      </div>
+    );
+  },
+);
+
+ProgressBar.displayName = 'ProgressBar';
+ProgressBar.propTypes = propTypes;
+
+export default ProgressBar;
diff --git a/react/Ratio.tsx b/react/Ratio.tsx
new file mode 100644
index 0000000..0c71b05
--- /dev/null
+++ b/react/Ratio.tsx
@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps } from './helpers';
+
+export type AspectRatio = '1x1' | '4x3' | '16x9' | '21x9' | string;
+
+export interface RatioProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactChild;
+  aspectRatio?: AspectRatio | number;
+}
+
+const propTypes = {
+  /**
+   * @default 'ratio'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * This component requires a single child element
+   */
+  children: PropTypes.element.isRequired,
+
+  /**
+   * Set the aspect ratio of the embed. A fraction or a percentage can also
+   * be used to create custom aspect ratios.
+   */
+  aspectRatio: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+function toPercent(num: number): string {
+  if (num <= 0) return '100%';
+  if (num < 1) return `${num * 100}%`;
+  return `${num}%`;
+}
+
+const Ratio = React.forwardRef<HTMLDivElement, RatioProps>(
+  (
+    { bsPrefix, className, children, aspectRatio = '1x1', style, ...props },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'ratio');
+    const isCustomRatio = typeof aspectRatio === 'number';
+
+    return (
+      <div
+        ref={ref}
+        {...props}
+        style={{
+          ...style,
+          ...(isCustomRatio && {
+            '--bs-aspect-ratio': toPercent(aspectRatio as number),
+          }),
+        }}
+        className={classNames(
+          bsPrefix,
+          className,
+          !isCustomRatio && `${bsPrefix}-${aspectRatio}`,
+        )}
+      >
+        {React.Children.only(children)}
+      </div>
+    );
+  },
+);
+
+Ratio.propTypes = propTypes;
+
+export default Ratio;
diff --git a/react/Row.tsx b/react/Row.tsx
new file mode 100644
index 0000000..dd50016
--- /dev/null
+++ b/react/Row.tsx
@@ -0,0 +1,158 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import * as React from 'react';
+
+import {
+  useBootstrapPrefix,
+  useBootstrapBreakpoints,
+  useBootstrapMinBreakpoint,
+} from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+type RowColWidth =
+  | number
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12'
+  | 'auto';
+type RowColumns = RowColWidth | { cols?: RowColWidth };
+
+export interface RowProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  xs?: RowColumns;
+  sm?: RowColumns;
+  md?: RowColumns;
+  lg?: RowColumns;
+  xl?: RowColumns;
+  xxl?: RowColumns;
+  [key: string]: any;
+}
+
+const rowColWidth = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
+
+const rowColumns = PropTypes.oneOfType([
+  rowColWidth,
+  PropTypes.shape({
+    cols: rowColWidth,
+  }),
+]);
+
+const propTypes = {
+  /**
+   * @default 'row'
+   */
+  bsPrefix: PropTypes.string,
+
+  as: PropTypes.elementType,
+
+  /**
+   * The number of columns that will fit next to each other on extra small devices (<576px).
+   * Use `auto` to give columns their natural widths.
+   *
+   * @type {(number|'auto'|{ cols: number|'auto' })}
+   */
+  xs: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on small devices (≥576px).
+   * Use `auto` to give columns their natural widths.
+   *
+   * @type {(number|'auto'|{ cols: number|'auto' })}
+   */
+  sm: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on medium devices (≥768px).
+   * Use `auto` to give columns their natural widths.
+   *
+   * @type {(number|'auto'|{ cols: number|'auto' })}
+   */
+  md: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on large devices (≥992px).
+   * Use `auto` to give columns their natural widths.
+   *
+   * @type {(number|'auto'|{ cols: number|'auto' })}
+   */
+  lg: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on extra large devices (≥1200px).
+   * Use `auto` to give columns their natural widths.
+   *
+   * @type {(number|'auto'|{ cols: number|'auto' })}
+   */
+  xl: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on extra extra large devices (≥1400px).
+   * Use `auto` to give columns their natural widths.
+   *
+   * @type {(number|'auto'|{ cols: number|'auto' })}
+   */
+  xxl: rowColumns,
+};
+
+const Row: BsPrefixRefForwardingComponent<'div', RowProps> = React.forwardRef<
+  HTMLDivElement,
+  RowProps
+>(
+  (
+    {
+      bsPrefix,
+      className,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      ...props
+    }: RowProps,
+    ref,
+  ) => {
+    const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'row');
+    const breakpoints = useBootstrapBreakpoints();
+    const minBreakpoint = useBootstrapMinBreakpoint();
+
+    const sizePrefix = `${decoratedBsPrefix}-cols`;
+    const classes: string[] = [];
+
+    breakpoints.forEach((brkPoint) => {
+      const propValue = props[brkPoint];
+      delete props[brkPoint];
+
+      let cols;
+      if (propValue != null && typeof propValue === 'object') {
+        ({ cols } = propValue);
+      } else {
+        cols = propValue;
+      }
+
+      const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : '';
+
+      if (cols != null) classes.push(`${sizePrefix}${infix}-${cols}`);
+    });
+
+    return (
+      <Component
+        ref={ref}
+        {...props}
+        className={classNames(className, decoratedBsPrefix, ...classes)}
+      />
+    );
+  },
+) as typeof Row;
+
+Row.displayName = 'Row';
+Row.propTypes = propTypes;
+
+export default Row;
diff --git a/react/SSRProvider.ts b/react/SSRProvider.ts
new file mode 100644
index 0000000..15500e4
--- /dev/null
+++ b/react/SSRProvider.ts
@@ -0,0 +1,6 @@
+import { SSRProvider } from '@restart/ui/ssr';
+import type { SSRProviderProps } from '@restart/ui/ssr';
+
+export type { SSRProviderProps };
+
+export default SSRProvider;
diff --git a/react/Spinner.tsx b/react/Spinner.tsx
new file mode 100644
index 0000000..7432a4b
--- /dev/null
+++ b/react/Spinner.tsx
@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { Variant } from './types';
+
+export interface SpinnerProps
+  extends React.HTMLAttributes<HTMLElement>,
+    BsPrefixProps {
+  animation?: 'border' | 'grow';
+  size?: 'sm';
+  variant?: Variant;
+}
+
+const propTypes = {
+  /**
+   * @default 'spinner'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The visual color style of the spinner
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark')}
+   */
+  variant: PropTypes.string,
+
+  /**
+   * Changes the animation style of the spinner.
+   *
+   * @type {('border'|'grow')}
+   * @default true
+   */
+  animation: PropTypes.oneOf(['border', 'grow']).isRequired,
+
+  /**
+   * Component size variations.
+   *
+   * @type {('sm')}
+   */
+  size: PropTypes.string,
+
+  /**
+   * This component may be used to wrap child elements or components.
+   */
+  children: PropTypes.element,
+
+  /**
+   * An ARIA accessible role applied to the Menu component. This should generally be set to 'status'
+   */
+  role: PropTypes.string,
+
+  /**
+   * @default div
+   */
+  as: PropTypes.elementType,
+};
+
+const Spinner: BsPrefixRefForwardingComponent<'div', SpinnerProps> =
+  React.forwardRef<HTMLElement, SpinnerProps>(
+    (
+      {
+        bsPrefix,
+        variant,
+        animation = 'border',
+        size,
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        className,
+        ...props
+      },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'spinner');
+      const bsSpinnerPrefix = `${bsPrefix}-${animation}`;
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          className={classNames(
+            className,
+            bsSpinnerPrefix,
+            size && `${bsSpinnerPrefix}-${size}`,
+            variant && `text-${variant}`,
+          )}
+        />
+      );
+    },
+  ) as typeof Spinner;
+
+Spinner.propTypes = propTypes as any;
+Spinner.displayName = 'Spinner';
+
+export default Spinner;
diff --git a/react/SplitButton.tsx b/react/SplitButton.tsx
new file mode 100644
index 0000000..95f9ade
--- /dev/null
+++ b/react/SplitButton.tsx
@@ -0,0 +1,164 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ButtonType } from '@restart/ui/Button';
+import Button from './Button';
+import ButtonGroup from './ButtonGroup';
+import Dropdown, { DropdownProps } from './Dropdown';
+import { PropsFromToggle } from './DropdownToggle';
+import { BsPrefixProps } from './helpers';
+import { alignPropType } from './types';
+
+export interface SplitButtonProps
+  extends Omit<DropdownProps, 'title'>,
+    PropsFromToggle,
+    BsPrefixProps {
+  menuRole?: string;
+  renderMenuOnMount?: boolean;
+  rootCloseEvent?: 'click' | 'mousedown';
+  target?: string;
+  title: React.ReactNode;
+  toggleLabel?: string;
+  type?: ButtonType;
+  flip?: boolean;
+}
+
+const propTypes = {
+  /**
+   * An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.
+   * @type {string}
+   * @required
+   */
+  id: PropTypes.string,
+
+  /**
+   * Accessible label for the toggle; the value of `title` if not specified.
+   */
+  toggleLabel: PropTypes.string,
+
+  /** An `href` passed to the non-toggle Button */
+  href: PropTypes.string,
+
+  /** An anchor `target` passed to the non-toggle Button */
+  target: PropTypes.string,
+
+  /** An `onClick` handler passed to the non-toggle Button */
+  onClick: PropTypes.func,
+
+  /** The content of the non-toggle Button.  */
+  title: PropTypes.node.isRequired,
+
+  /** A `type` passed to the non-toggle Button */
+  type: PropTypes.string,
+
+  /** Disables both Buttons  */
+  disabled: PropTypes.bool,
+
+  /**
+   * Aligns the dropdown menu.
+   *
+   * _see [DropdownMenu](#dropdown-menu-props) for more details_
+   *
+   * @type {"start"|"end"|{ sm: "start"|"end" }|{ md: "start"|"end" }|{ lg: "start"|"end" }|{ xl: "start"|"end"}|{ xxl: "start"|"end"} }
+   */
+  align: alignPropType,
+
+  /** An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown */
+  menuRole: PropTypes.string,
+
+  /** Whether to render the dropdown menu in the DOM before the first time it is shown */
+  renderMenuOnMount: PropTypes.bool,
+
+  /**
+   *  Which event when fired outside the component will cause it to be closed.
+   *
+   * _see [DropdownMenu](#dropdown-menu-props) for more details_
+   */
+  rootCloseEvent: PropTypes.string,
+
+  /**
+   * Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to
+   * Popper.js's flip [docs](https://popper.js.org/docs/v2/modifiers/flip/).
+   *
+   */
+  flip: PropTypes.bool,
+
+  /** @ignore */
+  bsPrefix: PropTypes.string,
+  /** @ignore */
+  variant: PropTypes.string,
+  /** @ignore */
+  size: PropTypes.string,
+};
+
+/**
+ * A convenience component for simple or general use split button dropdowns. Renders a
+ * `ButtonGroup` containing a `Button` and a `Button` toggle for the `Dropdown`. All `children`
+ * are passed directly to the default `Dropdown.Menu`. This component accepts all of [`Dropdown`'s
+ * props](#dropdown-props).
+ *
+ * _All unknown props are passed through to the `Dropdown` component._
+ * The Button `variant`, `size` and `bsPrefix` props are passed to the button and toggle,
+ * and menu-related props are passed to the `Dropdown.Menu`
+ */
+const SplitButton = React.forwardRef<HTMLElement, SplitButtonProps>(
+  (
+    {
+      id,
+      bsPrefix,
+      size,
+      variant,
+      title,
+      type = 'button',
+      toggleLabel = 'Toggle dropdown',
+      children,
+      onClick,
+      href,
+      target,
+      menuRole,
+      renderMenuOnMount,
+      rootCloseEvent,
+      flip,
+      ...props
+    },
+    ref,
+  ) => (
+    <Dropdown ref={ref} {...props} as={ButtonGroup}>
+      <Button
+        size={size}
+        variant={variant}
+        disabled={props.disabled}
+        bsPrefix={bsPrefix}
+        href={href}
+        target={target}
+        onClick={onClick}
+        type={type}
+      >
+        {title}
+      </Button>
+      <Dropdown.Toggle
+        split
+        id={id}
+        size={size}
+        variant={variant}
+        disabled={props.disabled}
+        childBsPrefix={bsPrefix}
+      >
+        <span className="visually-hidden">{toggleLabel}</span>
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu
+        role={menuRole}
+        renderOnMount={renderMenuOnMount}
+        rootCloseEvent={rootCloseEvent}
+        flip={flip}
+      >
+        {children}
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+);
+
+SplitButton.propTypes = propTypes as any;
+SplitButton.displayName = 'SplitButton';
+
+export default SplitButton;
diff --git a/react/Stack.tsx b/react/Stack.tsx
new file mode 100644
index 0000000..6beb648
--- /dev/null
+++ b/react/Stack.tsx
@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import {
+  useBootstrapPrefix,
+  useBootstrapBreakpoints,
+  useBootstrapMinBreakpoint,
+} from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { GapValue } from './types';
+import createUtilityClassName, {
+  ResponsiveUtilityValue,
+  responsivePropType,
+} from './createUtilityClasses';
+
+export type StackDirection = 'horizontal' | 'vertical';
+
+export interface StackProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  direction?: StackDirection;
+  gap?: ResponsiveUtilityValue<GapValue>;
+}
+
+const propTypes = {
+  /**
+   * Change the underlying component CSS base class name and modifier class names prefix.
+   * **This is an escape hatch** for working with heavily customized bootstrap css.
+   *
+   * Defaults to `hstack` if direction is `horizontal` or `vstack` if direction
+   * is `vertical`.
+   *
+   * @default 'hstack | vstack'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Sets the spacing between each item. Valid values are `0-5`.
+   */
+  gap: responsivePropType(PropTypes.number),
+};
+
+const Stack: BsPrefixRefForwardingComponent<'span', StackProps> =
+  React.forwardRef<HTMLElement, StackProps>(
+    (
+      { as: Component = 'div', bsPrefix, className, direction, gap, ...props },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(
+        bsPrefix,
+        direction === 'horizontal' ? 'hstack' : 'vstack',
+      );
+      const breakpoints = useBootstrapBreakpoints();
+      const minBreakpoint = useBootstrapMinBreakpoint();
+
+      return (
+        <Component
+          {...props}
+          ref={ref}
+          className={classNames(
+            className,
+            bsPrefix,
+            ...createUtilityClassName(
+              {
+                gap,
+              },
+              breakpoints,
+              minBreakpoint,
+            ),
+          )}
+        />
+      );
+    },
+  ) as typeof Stack;
+
+Stack.displayName = 'Stack';
+Stack.propTypes = propTypes;
+
+export default Stack;
diff --git a/react/Switch.tsx b/react/Switch.tsx
new file mode 100644
index 0000000..53f1548
--- /dev/null
+++ b/react/Switch.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import FormCheck, { FormCheckProps } from './FormCheck';
+import { BsPrefixRefForwardingComponent } from './helpers';
+
+type SwitchProps = Omit<FormCheckProps, 'type'>;
+
+const Switch: BsPrefixRefForwardingComponent<typeof FormCheck, SwitchProps> =
+  React.forwardRef<typeof FormCheck, SwitchProps>((props, ref) => (
+    <FormCheck {...props} ref={ref} type="switch" />
+  )) as typeof Switch;
+
+Switch.displayName = 'Switch';
+
+export default Object.assign(Switch, {
+  Input: FormCheck.Input,
+  Label: FormCheck.Label,
+});
diff --git a/react/Tab.tsx b/react/Tab.tsx
new file mode 100644
index 0000000..d082fdb
--- /dev/null
+++ b/react/Tab.tsx
@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import TabContainer from './TabContainer';
+import TabContent from './TabContent';
+import TabPane, { TabPaneProps } from './TabPane';
+
+export interface TabProps extends Omit<TabPaneProps, 'title'> {
+  title: React.ReactNode;
+  disabled?: boolean;
+  tabClassName?: string;
+  tabAttrs?: Record<string, any>;
+}
+
+/* eslint-disable react/no-unused-prop-types */
+const propTypes = {
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Content for the tab title.
+   */
+  title: PropTypes.node.isRequired,
+
+  /**
+   * The disabled state of the tab.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Class to pass to the underlying nav link.
+   */
+  tabClassName: PropTypes.string,
+
+  /**
+   * Object containing attributes to pass to underlying nav link.
+   */
+  tabAttrs: PropTypes.object,
+};
+
+const Tab: React.FC<TabProps> = () => {
+  throw new Error(
+    'ReactBootstrap: The `Tab` component is not meant to be rendered! ' +
+      "It's an abstract component that is only valid as a direct Child of the `Tabs` Component. " +
+      'For custom tabs components use TabPane and TabsContainer directly',
+  );
+};
+
+Tab.propTypes = propTypes;
+
+export default Object.assign(Tab, {
+  Container: TabContainer,
+  Content: TabContent,
+  Pane: TabPane,
+});
diff --git a/react/TabContainer.tsx b/react/TabContainer.tsx
new file mode 100644
index 0000000..d652d2f
--- /dev/null
+++ b/react/TabContainer.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Tabs, { TabsProps } from '@restart/ui/Tabs';
+import getTabTransitionComponent from './getTabTransitionComponent';
+import { TransitionType } from './helpers';
+
+export interface TabContainerProps extends Omit<TabsProps, 'transition'> {
+  transition?: TransitionType;
+}
+
+const propTypes = {
+  /**
+   * HTML id attribute, required if no `generateChildId` prop
+   * is specified.
+   *
+   * @type {string}
+   */
+  id: PropTypes.string,
+
+  /**
+   * Sets a default animation strategy for all children `<TabPane>`s.
+   * Defaults to `<Fade>` animation; else, use `false` to disable, or a
+   * custom react-transition-group `<Transition/>` component.
+   *
+   * @type {{Transition | false}}
+   * @default {Fade}
+   */
+  transition: PropTypes.oneOfType([
+    PropTypes.oneOf([false]),
+    PropTypes.elementType,
+  ]),
+  /**
+   * Wait until the first "enter" transition to mount tabs (add them to the DOM)
+   */
+  mountOnEnter: PropTypes.bool,
+
+  /**
+   * Unmount tabs (remove it from the DOM) when they are no longer visible
+   */
+  unmountOnExit: PropTypes.bool,
+
+  /**
+   * A function that takes an `eventKey` and `type` and returns a unique id for
+   * child tab `<NavItem>`s and `<TabPane>`s. The function _must_ be a pure
+   * function, meaning it should always return the _same_ id for the same set
+   * of inputs. The default value requires that an `id` to be set for the
+   * `<TabContainer>`.
+   *
+   * The `type` argument will either be `"tab"` or `"pane"`.
+   *
+   * @defaultValue (eventKey, type) => `${props.id}-${type}-${eventKey}`
+   */
+  generateChildId: PropTypes.func,
+
+  /**
+   * A callback fired when a tab is selected.
+   *
+   * @controllable activeKey
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * The `eventKey` of the currently active tab.
+   *
+   * @controllable onSelect
+   */
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+const TabContainer = ({ transition, ...props }: TabContainerProps) => (
+  <Tabs {...props} transition={getTabTransitionComponent(transition)} />
+);
+
+TabContainer.propTypes = propTypes;
+TabContainer.displayName = 'TabContainer';
+
+export default TabContainer;
diff --git a/react/TabContent.tsx b/react/TabContent.tsx
new file mode 100644
index 0000000..974d7b6
--- /dev/null
+++ b/react/TabContent.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface TabContentProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const TabContent: BsPrefixRefForwardingComponent<'div', TabContentProps> =
+  React.forwardRef<HTMLElement, TabContentProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'tab-content');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof TabContent;
+
+TabContent.displayName = 'TabContent';
+
+export default TabContent;
diff --git a/react/TabPane.tsx b/react/TabPane.tsx
new file mode 100644
index 0000000..2176828
--- /dev/null
+++ b/react/TabPane.tsx
@@ -0,0 +1,161 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import SelectableContext from '@restart/ui/SelectableContext';
+import TabContext from '@restart/ui/TabContext';
+import { useTabPanel } from '@restart/ui/TabPanel';
+import { EventKey, TransitionCallbacks } from '@restart/ui/types';
+import { useBootstrapPrefix } from './ThemeProvider';
+import Fade from './Fade';
+import getTabTransitionComponent from './getTabTransitionComponent';
+import {
+  BsPrefixProps,
+  BsPrefixRefForwardingComponent,
+  TransitionType,
+} from './helpers';
+
+export interface TabPaneProps
+  extends TransitionCallbacks,
+    BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  eventKey?: EventKey;
+  active?: boolean;
+  transition?: TransitionType;
+  mountOnEnter?: boolean;
+  unmountOnExit?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default 'tab-pane'
+   */
+  bsPrefix: PropTypes.string,
+
+  as: PropTypes.elementType,
+
+  /**
+   * A key that associates the `TabPane` with it's controlling `NavLink`.
+   */
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Toggles the active state of the TabPane, this is generally controlled by a
+   * TabContainer.
+   */
+  active: PropTypes.bool,
+
+  /**
+   * Use animation when showing or hiding `<TabPane>`s. Defaults to `<Fade>`
+   * animation, else use `false` to disable or a react-transition-group
+   * `<Transition/>` component.
+   */
+  transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.elementType]),
+
+  /**
+   * Transition onEnter callback when animation is not `false`
+   */
+  onEnter: PropTypes.func,
+
+  /**
+   * Transition onEntering callback when animation is not `false`
+   */
+  onEntering: PropTypes.func,
+
+  /**
+   * Transition onEntered callback when animation is not `false`
+   */
+  onEntered: PropTypes.func,
+
+  /**
+   * Transition onExit callback when animation is not `false`
+   */
+  onExit: PropTypes.func,
+
+  /**
+   * Transition onExiting callback when animation is not `false`
+   */
+  onExiting: PropTypes.func,
+
+  /**
+   * Transition onExited callback when animation is not `false`
+   */
+  onExited: PropTypes.func,
+
+  /**
+   * Wait until the first "enter" transition to mount the tab (add it to the DOM)
+   */
+  mountOnEnter: PropTypes.bool,
+
+  /**
+   * Unmount the tab (remove it from the DOM) when it is no longer visible
+   */
+  unmountOnExit: PropTypes.bool,
+
+  /** @ignore * */
+  id: PropTypes.string,
+
+  /** @ignore * */
+  'aria-labelledby': PropTypes.string,
+};
+
+const TabPane: BsPrefixRefForwardingComponent<'div', TabPaneProps> =
+  React.forwardRef<HTMLElement, TabPaneProps>(
+    ({ bsPrefix, transition, ...props }, ref) => {
+      const [
+        {
+          className,
+          // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+          as: Component = 'div',
+          ...rest
+        },
+        {
+          isActive,
+          onEnter,
+          onEntering,
+          onEntered,
+          onExit,
+          onExiting,
+          onExited,
+          mountOnEnter,
+          unmountOnExit,
+          transition: Transition = Fade,
+        },
+      ] = useTabPanel({
+        ...props,
+        transition: getTabTransitionComponent(transition),
+      } as any);
+
+      const prefix = useBootstrapPrefix(bsPrefix, 'tab-pane');
+
+      // We provide an empty the TabContext so `<Nav>`s in `<TabPanel>`s don't
+      // conflict with the top level one.
+      return (
+        <TabContext.Provider value={null}>
+          <SelectableContext.Provider value={null}>
+            <Transition
+              in={isActive}
+              onEnter={onEnter}
+              onEntering={onEntering}
+              onEntered={onEntered}
+              onExit={onExit}
+              onExiting={onExiting}
+              onExited={onExited}
+              mountOnEnter={mountOnEnter}
+              unmountOnExit={unmountOnExit as any}
+            >
+              <Component
+                {...rest}
+                ref={ref}
+                className={classNames(className, prefix, isActive && 'active')}
+              />
+            </Transition>
+          </SelectableContext.Provider>
+        </TabContext.Provider>
+      );
+    },
+  ) as typeof TabPane;
+
+TabPane.displayName = 'TabPane';
+TabPane.propTypes = propTypes;
+
+export default TabPane;
diff --git a/react/Table.tsx b/react/Table.tsx
new file mode 100644
index 0000000..abcbfbc
--- /dev/null
+++ b/react/Table.tsx
@@ -0,0 +1,119 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useBootstrapPrefix } from './ThemeProvider';
+
+import { BsPrefixOnlyProps } from './helpers';
+
+export interface TableProps
+  extends BsPrefixOnlyProps,
+    React.TableHTMLAttributes<HTMLTableElement> {
+  striped?: boolean | string;
+  bordered?: boolean;
+  borderless?: boolean;
+  hover?: boolean;
+  size?: string;
+  variant?: string;
+  responsive?: boolean | string;
+}
+
+const propTypes = {
+  /**
+   * @default 'table'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Adds zebra-striping to any table row within the `<tbody>`.
+   * Use `columns` to add zebra-striping to any table column.
+   */
+  striped: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /**
+   * Adds borders on all sides of the table and cells.
+   */
+  bordered: PropTypes.bool,
+
+  /**
+   * Removes all borders on the table and cells, including table header.
+   */
+  borderless: PropTypes.bool,
+
+  /**
+   * Enable a hover state on table rows within a `<tbody>`.
+   */
+  hover: PropTypes.bool,
+
+  /**
+   * Make tables more compact by cutting cell padding in half by setting
+   * size as `sm`.
+   */
+  size: PropTypes.string,
+
+  /**
+   * Invert the colors of the table — with light text on dark backgrounds
+   * by setting variant as `dark`.
+   */
+  variant: PropTypes.string,
+
+  /**
+   * Responsive tables allow tables to be scrolled horizontally with ease.
+   * Across every breakpoint, use `responsive` for horizontally
+   * scrolling tables. Responsive tables are wrapped automatically in a `div`.
+   * Use `responsive="sm"`, `responsive="md"`, `responsive="lg"`, or
+   * `responsive="xl"` as needed to create responsive tables up to
+   * a particular breakpoint. From that breakpoint and up, the table will
+   * behave normally and not scroll horizontally.
+   */
+  responsive: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+};
+
+const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  (
+    {
+      bsPrefix,
+      className,
+      striped,
+      bordered,
+      borderless,
+      hover,
+      size,
+      variant,
+      responsive,
+      ...props
+    },
+    ref,
+  ) => {
+    const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'table');
+
+    const classes = classNames(
+      className,
+      decoratedBsPrefix,
+      variant && `${decoratedBsPrefix}-${variant}`,
+      size && `${decoratedBsPrefix}-${size}`,
+      striped &&
+        `${decoratedBsPrefix}-${
+          typeof striped === 'string' ? `striped-${striped}` : 'striped'
+        }`,
+      bordered && `${decoratedBsPrefix}-bordered`,
+      borderless && `${decoratedBsPrefix}-borderless`,
+      hover && `${decoratedBsPrefix}-hover`,
+    );
+
+    const table = <table {...props} className={classes} ref={ref} />;
+    if (responsive) {
+      let responsiveClass = `${decoratedBsPrefix}-responsive`;
+      if (typeof responsive === 'string') {
+        responsiveClass = `${responsiveClass}-${responsive}`;
+      }
+
+      return <div className={responsiveClass}>{table}</div>;
+    }
+
+    return table;
+  },
+);
+
+Table.propTypes = propTypes;
+
+export default Table;
diff --git a/react/Tabs.tsx b/react/Tabs.tsx
new file mode 100644
index 0000000..41d4055
--- /dev/null
+++ b/react/Tabs.tsx
@@ -0,0 +1,184 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useUncontrolled } from 'uncontrollable';
+import BaseTabs, { TabsProps as BaseTabsProps } from '@restart/ui/Tabs';
+import Nav, { NavProps } from './Nav';
+import NavLink from './NavLink';
+import NavItem from './NavItem';
+import TabContent from './TabContent';
+import TabPane from './TabPane';
+import { forEach, map } from './ElementChildren';
+import getTabTransitionComponent from './getTabTransitionComponent';
+import { TransitionType } from './helpers';
+
+export interface TabsProps
+  extends Omit<BaseTabsProps, 'transition'>,
+    Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>,
+    NavProps {
+  transition?: TransitionType;
+}
+
+const propTypes = {
+  /**
+   * Mark the Tab with a matching `eventKey` as active.
+   *
+   * @controllable onSelect
+   */
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** The default active key that is selected on start */
+  defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Navigation style
+   *
+   * @type {('tabs'| 'pills' | 'underline')}
+   */
+  variant: PropTypes.string,
+
+  /**
+   * Sets a default animation strategy for all children `<TabPane>`s.<tbcont
+   *
+   * Defaults to `<Fade>` animation, else use `false` to disable or a
+   * react-transition-group `<Transition/>` component.
+   *
+   * @type {Transition | false}
+   * @default {Fade}
+   */
+  transition: PropTypes.oneOfType([
+    PropTypes.oneOf([false]),
+    PropTypes.elementType,
+  ]),
+
+  /**
+   * HTML id attribute, required if no `generateChildId` prop
+   * is specified.
+   *
+   * @type {string}
+   */
+  id: PropTypes.string,
+
+  /**
+   * Callback fired when a Tab is selected.
+   *
+   * ```js
+   * function (
+   *   Any eventKey,
+   *   SyntheticEvent event?
+   * )
+   * ```
+   *
+   * @controllable activeKey
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Wait until the first "enter" transition to mount tabs (add them to the DOM)
+   */
+  mountOnEnter: PropTypes.bool,
+
+  /**
+   * Unmount tabs (remove it from the DOM) when it is no longer visible
+   */
+  unmountOnExit: PropTypes.bool,
+
+  /**
+   * Have all `Tabs`s proportionately fill all available width.
+   */
+  fill: PropTypes.bool,
+
+  /**
+   * Have all `Tab`s evenly fill all available width.
+   */
+  justify: PropTypes.bool,
+};
+
+function getDefaultActiveKey(children) {
+  let defaultActiveKey;
+  forEach(children, (child) => {
+    if (defaultActiveKey == null) {
+      defaultActiveKey = child.props.eventKey;
+    }
+  });
+
+  return defaultActiveKey;
+}
+
+function renderTab(child) {
+  const { title, eventKey, disabled, tabClassName, tabAttrs, id } = child.props;
+  if (title == null) {
+    return null;
+  }
+
+  return (
+    <NavItem as="li" role="presentation">
+      <NavLink
+        as="button"
+        type="button"
+        eventKey={eventKey}
+        disabled={disabled}
+        id={id}
+        className={tabClassName}
+        {...tabAttrs}
+      >
+        {title}
+      </NavLink>
+    </NavItem>
+  );
+}
+
+const Tabs = (props: TabsProps) => {
+  const {
+    id,
+    onSelect,
+    transition,
+    mountOnEnter = false,
+    unmountOnExit = false,
+    variant = 'tabs',
+    children,
+    activeKey = getDefaultActiveKey(children),
+    ...controlledProps
+  } = useUncontrolled(props, {
+    activeKey: 'onSelect',
+  });
+
+  return (
+    <BaseTabs
+      id={id}
+      activeKey={activeKey}
+      onSelect={onSelect}
+      transition={getTabTransitionComponent(transition)}
+      mountOnEnter={mountOnEnter}
+      unmountOnExit={unmountOnExit}
+    >
+      <Nav
+        id={id}
+        {...controlledProps}
+        role="tablist"
+        as="ul"
+        variant={variant}
+      >
+        {map(children, renderTab)}
+      </Nav>
+
+      <TabContent>
+        {map(children, (child) => {
+          const childProps = { ...child.props };
+
+          delete childProps.title;
+          delete childProps.disabled;
+          delete childProps.tabClassName;
+          delete childProps.tabAttrs;
+
+          return <TabPane {...childProps} />;
+        })}
+      </TabContent>
+    </BaseTabs>
+  );
+};
+
+Tabs.propTypes = propTypes;
+Tabs.displayName = 'Tabs';
+
+export default Tabs;
diff --git a/react/ThemeProvider.tsx b/react/ThemeProvider.tsx
new file mode 100644
index 0000000..8a53887
--- /dev/null
+++ b/react/ThemeProvider.tsx
@@ -0,0 +1,120 @@
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext, useMemo } from 'react';
+
+export const DEFAULT_BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+export const DEFAULT_MIN_BREAKPOINT = 'xs';
+
+export interface ThemeContextValue {
+  prefixes: Record<string, string>;
+  breakpoints: string[];
+  minBreakpoint?: string;
+  dir?: string;
+}
+
+export interface ThemeProviderProps extends Partial<ThemeContextValue> {
+  children: React.ReactNode;
+}
+
+const ThemeContext = React.createContext<ThemeContextValue>({
+  prefixes: {},
+  breakpoints: DEFAULT_BREAKPOINTS,
+  minBreakpoint: DEFAULT_MIN_BREAKPOINT,
+});
+const { Consumer, Provider } = ThemeContext;
+
+function ThemeProvider({
+  prefixes = {},
+  breakpoints = DEFAULT_BREAKPOINTS,
+  minBreakpoint = DEFAULT_MIN_BREAKPOINT,
+  dir,
+  children,
+}: ThemeProviderProps) {
+  const contextValue = useMemo(
+    () => ({
+      prefixes: { ...prefixes },
+      breakpoints,
+      minBreakpoint,
+      dir,
+    }),
+    [prefixes, breakpoints, minBreakpoint, dir],
+  );
+
+  return <Provider value={contextValue}>{children}</Provider>;
+}
+
+ThemeProvider.propTypes = {
+  /**
+   * An object mapping of Bootstrap component classes that
+   * map to a custom class.
+   *
+   * **Note: Changing prefixes is an escape hatch and generally
+   * shouldn't be used.**
+   *
+   * For more information, see [here](/getting-started/theming/#prefixing-components).
+   */
+  prefixes: PropTypes.object,
+
+  /**
+   * An array of breakpoints that your application supports.
+   * Defaults to the standard Bootstrap breakpoints.
+   */
+  breakpoints: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * The minimum breakpoint used by your application.
+   * Defaults to the smallest of the standard Bootstrap breakpoints.
+   */
+  minBreakpoint: PropTypes.string,
+
+  /**
+   * Indicates the directionality of the application's text.
+   *
+   * Use `rtl` to set text as "right to left".
+   */
+  dir: PropTypes.string,
+} as any;
+
+export function useBootstrapPrefix(
+  prefix: string | undefined,
+  defaultPrefix: string,
+): string {
+  const { prefixes } = useContext(ThemeContext);
+  return prefix || prefixes[defaultPrefix] || defaultPrefix;
+}
+
+export function useBootstrapBreakpoints() {
+  const { breakpoints } = useContext(ThemeContext);
+  return breakpoints;
+}
+
+export function useBootstrapMinBreakpoint() {
+  const { minBreakpoint } = useContext(ThemeContext);
+  return minBreakpoint;
+}
+
+export function useIsRTL() {
+  const { dir } = useContext(ThemeContext);
+  return dir === 'rtl';
+}
+
+function createBootstrapComponent(Component, opts) {
+  if (typeof opts === 'string') opts = { prefix: opts };
+  const isClassy = Component.prototype && Component.prototype.isReactComponent;
+  // If it's a functional component make sure we don't break it with a ref
+  const { prefix, forwardRefAs = isClassy ? 'ref' : 'innerRef' } = opts;
+
+  const Wrapped = React.forwardRef<any, { bsPrefix?: string }>(
+    ({ ...props }, ref) => {
+      props[forwardRefAs] = ref;
+      const bsPrefix = useBootstrapPrefix((props as any).bsPrefix, prefix);
+      return <Component {...props} bsPrefix={bsPrefix} />;
+    },
+  );
+
+  Wrapped.displayName = `Bootstrap(${Component.displayName || Component.name})`;
+  return Wrapped;
+}
+
+export { createBootstrapComponent, Consumer as ThemeConsumer };
+export default ThemeProvider;
diff --git a/react/Toast.tsx b/react/Toast.tsx
new file mode 100644
index 0000000..d1ed196
--- /dev/null
+++ b/react/Toast.tsx
@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { useEffect, useMemo, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import useTimeout from '@restart/hooks/useTimeout';
+import { TransitionCallbacks, TransitionComponent } from '@restart/ui/types';
+import ToastFade from './ToastFade';
+import ToastHeader from './ToastHeader';
+import ToastBody from './ToastBody';
+import { useBootstrapPrefix } from './ThemeProvider';
+import ToastContext from './ToastContext';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import { Variant } from './types';
+
+export interface ToastProps
+  extends TransitionCallbacks,
+    BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  animation?: boolean;
+  autohide?: boolean;
+  delay?: number;
+  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;
+
+  show?: boolean;
+  transition?: TransitionComponent;
+  bg?: Variant;
+}
+
+const propTypes = {
+  /**
+   * @default 'toast'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Apply a CSS fade transition to the toast
+   */
+  animation: PropTypes.bool,
+
+  /**
+   * Auto hide the toast
+   */
+  autohide: PropTypes.bool,
+
+  /**
+   * Delay hiding the toast (ms)
+   */
+  delay: PropTypes.number,
+
+  /**
+   * A Callback fired when the close button is clicked.
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * Callback fired before the toast transitions in
+   */
+  onEnter: PropTypes.func,
+
+  /**
+   * Callback fired as the toast begins to transition in
+   */
+  onEntering: PropTypes.func,
+
+  /**
+   * Callback fired after the toast finishes transitioning in
+   */
+  onEntered: PropTypes.func,
+
+  /**
+   * Transition onExit callback when animation is not `false`
+   */
+  onExit: PropTypes.func,
+
+  /**
+   * Transition onExiting callback when animation is not `false`
+   */
+  onExiting: PropTypes.func,
+
+  /**
+   * Transition onExited callback when animation is not `false`
+   */
+  onExited: PropTypes.func,
+
+  /**
+   * When `true` The toast will show itself.
+   */
+  show: PropTypes.bool,
+
+  /**
+   * A `react-transition-group` Transition component used to animate the Toast on dismissal.
+   */
+  transition: PropTypes.elementType,
+
+  /**
+   * Sets Toast background
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light')}
+   */
+  bg: PropTypes.string,
+};
+
+const Toast: BsPrefixRefForwardingComponent<'div', ToastProps> =
+  React.forwardRef<HTMLDivElement, ToastProps>(
+    (
+      {
+        bsPrefix,
+        className,
+        transition: Transition = ToastFade,
+        show = true,
+        animation = true,
+        delay = 5000,
+        autohide = false,
+        onClose,
+        onEntered,
+        onExit,
+        onExiting,
+        onEnter,
+        onEntering,
+        onExited,
+        bg,
+        ...props
+      },
+      ref,
+    ) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'toast');
+
+      // We use refs for these, because we don't want to restart the autohide
+      // timer in case these values change.
+      const delayRef = useRef(delay);
+      const onCloseRef = useRef(onClose);
+
+      useEffect(() => {
+        delayRef.current = delay;
+        onCloseRef.current = onClose;
+      }, [delay, onClose]);
+
+      const autohideTimeout = useTimeout();
+      const autohideToast = !!(autohide && show);
+
+      const autohideFunc = useCallback(() => {
+        if (autohideToast) {
+          onCloseRef.current?.();
+        }
+      }, [autohideToast]);
+
+      useEffect(() => {
+        // Only reset timer if show or autohide changes.
+        autohideTimeout.set(autohideFunc, delayRef.current);
+      }, [autohideTimeout, autohideFunc]);
+
+      const toastContext = useMemo(
+        () => ({
+          onClose,
+        }),
+        [onClose],
+      );
+
+      const hasAnimation = !!(Transition && animation);
+
+      const toast = (
+        <div
+          {...props}
+          ref={ref}
+          className={classNames(
+            bsPrefix,
+            className,
+            bg && `bg-${bg}`,
+            !hasAnimation && (show ? 'show' : 'hide'),
+          )}
+          role="alert"
+          aria-live="assertive"
+          aria-atomic="true"
+        />
+      );
+
+      return (
+        <ToastContext.Provider value={toastContext}>
+          {hasAnimation && Transition ? (
+            <Transition
+              in={show}
+              onEnter={onEnter}
+              onEntering={onEntering}
+              onEntered={onEntered}
+              onExit={onExit}
+              onExiting={onExiting}
+              onExited={onExited}
+              unmountOnExit
+            >
+              {toast}
+            </Transition>
+          ) : (
+            toast
+          )}
+        </ToastContext.Provider>
+      );
+    },
+  ) as typeof Toast;
+
+Toast.propTypes = propTypes;
+Toast.displayName = 'Toast';
+
+export default Object.assign(Toast, {
+  Body: ToastBody,
+  Header: ToastHeader,
+});
diff --git a/react/ToastBody.tsx b/react/ToastBody.tsx
new file mode 100644
index 0000000..6f39d2d
--- /dev/null
+++ b/react/ToastBody.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface ToastBodyProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const ToastBody: BsPrefixRefForwardingComponent<'div', ToastBodyProps> =
+  React.forwardRef<HTMLElement, ToastBodyProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'toast-body');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  ) as typeof ToastBody;
+
+ToastBody.displayName = 'ToastBody';
+
+export default ToastBody;
diff --git a/react/ToastContainer.tsx b/react/ToastContainer.tsx
new file mode 100644
index 0000000..f739ac7
--- /dev/null
+++ b/react/ToastContainer.tsx
@@ -0,0 +1,100 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export type ToastPosition =
+  | 'top-start'
+  | 'top-center'
+  | 'top-end'
+  | 'middle-start'
+  | 'middle-center'
+  | 'middle-end'
+  | 'bottom-start'
+  | 'bottom-center'
+  | 'bottom-end';
+
+export interface ToastContainerProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {
+  position?: ToastPosition;
+  containerPosition?: string;
+}
+
+const propTypes = {
+  /**
+   * @default 'toast-container'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Where the toasts will be placed within the container.
+   */
+  position: PropTypes.oneOf<ToastPosition>([
+    'top-start',
+    'top-center',
+    'top-end',
+    'middle-start',
+    'middle-center',
+    'middle-end',
+    'bottom-start',
+    'bottom-center',
+    'bottom-end',
+  ]),
+
+  /**
+   * Specify the positioning method for the container.
+   */
+  containerPosition: PropTypes.string,
+};
+
+const positionClasses = {
+  'top-start': 'top-0 start-0',
+  'top-center': 'top-0 start-50 translate-middle-x',
+  'top-end': 'top-0 end-0',
+  'middle-start': 'top-50 start-0 translate-middle-y',
+  'middle-center': 'top-50 start-50 translate-middle',
+  'middle-end': 'top-50 end-0 translate-middle-y',
+  'bottom-start': 'bottom-0 start-0',
+  'bottom-center': 'bottom-0 start-50 translate-middle-x',
+  'bottom-end': 'bottom-0 end-0',
+};
+
+const ToastContainer: BsPrefixRefForwardingComponent<
+  'div',
+  ToastContainerProps
+> = React.forwardRef<HTMLDivElement, ToastContainerProps>(
+  (
+    {
+      bsPrefix,
+      position,
+      containerPosition,
+      className,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'toast-container');
+
+    return (
+      <Component
+        ref={ref}
+        {...props}
+        className={classNames(
+          bsPrefix,
+          position && positionClasses[position],
+          containerPosition && `position-${containerPosition}`,
+          className,
+        )}
+      />
+    );
+  },
+) as typeof ToastContainer;
+
+ToastContainer.displayName = 'ToastContainer';
+ToastContainer.propTypes = propTypes;
+
+export default ToastContainer;
diff --git a/react/ToastContext.tsx b/react/ToastContext.tsx
new file mode 100644
index 0000000..79e2373
--- /dev/null
+++ b/react/ToastContext.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export interface ToastContextType {
+  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;
+}
+
+const ToastContext = React.createContext<ToastContextType>({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onClose() {},
+});
+
+export default ToastContext;
diff --git a/react/ToastFade.tsx b/react/ToastFade.tsx
new file mode 100644
index 0000000..e4f4217
--- /dev/null
+++ b/react/ToastFade.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Transition, {
+  ENTERING,
+  EXITING,
+} from 'react-transition-group/Transition';
+import Fade, { FadeProps } from './Fade';
+
+const fadeStyles = {
+  [ENTERING]: 'showing',
+  [EXITING]: 'showing show',
+};
+
+const ToastFade = React.forwardRef<Transition<any>, FadeProps>((props, ref) => (
+  <Fade {...props} ref={ref} transitionClasses={fadeStyles} />
+));
+
+ToastFade.displayName = 'ToastFade';
+
+export default ToastFade;
diff --git a/react/ToastHeader.tsx b/react/ToastHeader.tsx
new file mode 100644
index 0000000..273b521
--- /dev/null
+++ b/react/ToastHeader.tsx
@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import useEventCallback from '@restart/hooks/useEventCallback';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import CloseButton, { CloseButtonVariant } from './CloseButton';
+import ToastContext from './ToastContext';
+import { BsPrefixOnlyProps } from './helpers';
+
+export interface ToastHeaderProps
+  extends BsPrefixOnlyProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  closeLabel?: string;
+  closeVariant?: CloseButtonVariant;
+  closeButton?: boolean;
+}
+
+const propTypes = {
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Provides an accessible label for the close
+   * button. It is used for Assistive Technology when the label text is not
+   * readable.
+   */
+  closeLabel: PropTypes.string,
+
+  /**
+   * Sets the variant for close button.
+   */
+  closeVariant: PropTypes.oneOf<CloseButtonVariant>(['white']),
+
+  /**
+   * Specify whether the Component should contain a close button
+   */
+  closeButton: PropTypes.bool,
+};
+
+const ToastHeader = React.forwardRef<HTMLDivElement, ToastHeaderProps>(
+  (
+    {
+      bsPrefix,
+      closeLabel = 'Close',
+      closeVariant,
+      closeButton = true,
+      className,
+      children,
+      ...props
+    }: ToastHeaderProps,
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'toast-header');
+
+    const context = useContext(ToastContext);
+
+    const handleClick = useEventCallback((e) => {
+      context?.onClose?.(e);
+    });
+
+    return (
+      <div ref={ref} {...props} className={classNames(bsPrefix, className)}>
+        {children}
+
+        {closeButton && (
+          <CloseButton
+            aria-label={closeLabel}
+            variant={closeVariant}
+            onClick={handleClick}
+            data-dismiss="toast"
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+ToastHeader.displayName = 'ToastHeader';
+ToastHeader.propTypes = propTypes;
+
+export default ToastHeader;
diff --git a/react/ToggleButton.tsx b/react/ToggleButton.tsx
new file mode 100644
index 0000000..be3c4a5
--- /dev/null
+++ b/react/ToggleButton.tsx
@@ -0,0 +1,128 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useBootstrapPrefix } from './ThemeProvider';
+import Button, { ButtonProps } from './Button';
+
+export type ToggleButtonType = 'checkbox' | 'radio';
+
+export interface ToggleButtonProps
+  extends Omit<ButtonProps, 'onChange' | 'type'> {
+  type?: ToggleButtonType;
+  name?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  id: string;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  value: string | ReadonlyArray<string> | number;
+  inputRef?: React.Ref<HTMLInputElement>;
+}
+
+const noop = () => undefined;
+
+const propTypes = {
+  /**
+   * @default 'btn-check'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * The `<input>` element `type`
+   */
+  type: PropTypes.oneOf<ToggleButtonType>(['checkbox', 'radio']),
+
+  /**
+   * The HTML input name, used to group like checkboxes or radio buttons together
+   * semantically
+   */
+  name: PropTypes.string,
+
+  /**
+   * The checked state of the input, managed by `<ToggleButtonGroup>` automatically
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * The disabled state of both the label and input
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * `id` is required for button clicks to toggle input.
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * A callback fired when the underlying input element changes. This is passed
+   * directly to the `<input>` so shares the same signature as a native `onChange` event.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The value of the input, should be unique amongst its siblings when nested in a
+   * `ToggleButtonGroup`.
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string.isRequired),
+    PropTypes.number,
+  ]).isRequired,
+
+  /**
+   * A ref attached to the `<input>` element
+   * @type {ReactRef}
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.any]),
+};
+
+const ToggleButton = React.forwardRef<HTMLLabelElement, ToggleButtonProps>(
+  (
+    {
+      bsPrefix,
+      name,
+      className,
+      checked,
+      type,
+      onChange,
+      value,
+      disabled,
+      id,
+      inputRef,
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'btn-check');
+
+    return (
+      <>
+        <input
+          className={bsPrefix}
+          name={name}
+          type={type}
+          value={value}
+          ref={inputRef}
+          autoComplete="off"
+          checked={!!checked}
+          disabled={!!disabled}
+          onChange={onChange || noop}
+          id={id}
+        />
+        <Button
+          {...props}
+          ref={ref}
+          className={classNames(className, disabled && 'disabled')}
+          type={undefined}
+          role={undefined}
+          as="label"
+          htmlFor={id}
+        />
+      </>
+    );
+  },
+);
+
+ToggleButton.propTypes = propTypes;
+ToggleButton.displayName = 'ToggleButton';
+
+export default ToggleButton;
diff --git a/react/ToggleButtonGroup.tsx b/react/ToggleButtonGroup.tsx
new file mode 100644
index 0000000..37180a4
--- /dev/null
+++ b/react/ToggleButtonGroup.tsx
@@ -0,0 +1,146 @@
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import invariant from 'invariant';
+import { useUncontrolled } from 'uncontrollable';
+
+import chainFunction from './createChainedFunction';
+import { map } from './ElementChildren';
+import ButtonGroup, { ButtonGroupProps } from './ButtonGroup';
+import ToggleButton from './ToggleButton';
+import { BsPrefixRefForwardingComponent } from './helpers';
+
+type BaseToggleButtonProps = Omit<
+  ButtonGroupProps,
+  'toggle' | 'defaultValue' | 'onChange'
+>;
+
+export interface ToggleButtonRadioProps<T> extends BaseToggleButtonProps {
+  type?: 'radio';
+  name: string;
+  value?: T;
+  defaultValue?: T;
+  onChange?: (value: T, event: any) => void;
+}
+
+export interface ToggleButtonCheckboxProps<T> extends BaseToggleButtonProps {
+  type: 'checkbox';
+  name?: string;
+  value?: T[];
+  defaultValue?: T[];
+  onChange?: (value: T[]) => void;
+}
+
+export type ToggleButtonGroupProps<T> =
+  | ToggleButtonRadioProps<T>
+  | ToggleButtonCheckboxProps<T>;
+
+const propTypes = {
+  /**
+   * An HTML `<input>` name for each child button.
+   *
+   * __Required if `type` is set to `'radio'`__
+   */
+  name: PropTypes.string,
+
+  /**
+   * The value, or array of values, of the active (pressed) buttons
+   *
+   * @controllable onChange
+   */
+  value: PropTypes.any,
+
+  /**
+   * Callback fired when a button is pressed, depending on whether the `type`
+   * is `'radio'` or `'checkbox'`, `onChange` will be called with the value or
+   * array of active values
+   *
+   * @controllable value
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The input `type` of the rendered buttons, determines the toggle behavior
+   * of the buttons
+   */
+  type: PropTypes.oneOf(['checkbox', 'radio']).isRequired,
+
+  /**
+   * Sets the size for all Buttons in the group.
+   *
+   * @type ('sm'|'lg')
+   */
+  size: PropTypes.string,
+
+  /** Make the set of Buttons appear vertically stacked. */
+  vertical: PropTypes.bool,
+};
+
+const ToggleButtonGroup: BsPrefixRefForwardingComponent<
+  'a',
+  ToggleButtonGroupProps<any>
+> = React.forwardRef<HTMLElement, ToggleButtonGroupProps<any>>((props, ref) => {
+  const {
+    children,
+    type = 'radio',
+    name,
+    value,
+    onChange,
+    vertical = false,
+    ...controlledProps
+  } = useUncontrolled(props, {
+    value: 'onChange',
+  });
+
+  const getValues: () => any[] = () => (value == null ? [] : [].concat(value));
+
+  const handleToggle = (inputVal: any, event: any) => {
+    if (!onChange) {
+      return;
+    }
+    const values = getValues();
+    const isActive = values.indexOf(inputVal) !== -1;
+
+    if (type === 'radio') {
+      if (!isActive) onChange(inputVal, event);
+      return;
+    }
+
+    if (isActive) {
+      onChange(
+        values.filter((n) => n !== inputVal),
+        event,
+      );
+    } else {
+      onChange([...values, inputVal], event);
+    }
+  };
+
+  invariant(
+    type !== 'radio' || !!name,
+    'A `name` is required to group the toggle buttons when the `type` ' +
+      'is set to "radio"',
+  );
+
+  return (
+    <ButtonGroup {...controlledProps} ref={ref as any} vertical={vertical}>
+      {map(children, (child) => {
+        const values = getValues();
+        const { value: childVal, onChange: childOnChange } = child.props;
+        const handler = (e) => handleToggle(childVal, e);
+
+        return React.cloneElement(child, {
+          type,
+          name: (child as any).name || name,
+          checked: values.indexOf(childVal) !== -1,
+          onChange: chainFunction(childOnChange, handler),
+        });
+      })}
+    </ButtonGroup>
+  );
+}) as typeof ToggleButtonGroup;
+
+ToggleButtonGroup.propTypes = propTypes;
+
+export default Object.assign(ToggleButtonGroup, {
+  Button: ToggleButton,
+});
diff --git a/react/Tooltip.tsx b/react/Tooltip.tsx
new file mode 100644
index 0000000..a012e94
--- /dev/null
+++ b/react/Tooltip.tsx
@@ -0,0 +1,133 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayArrowProps } from '@restart/ui/Overlay';
+import { useBootstrapPrefix, useIsRTL } from './ThemeProvider';
+import { Placement, PopperRef } from './types';
+import { BsPrefixProps, getOverlayDirection } from './helpers';
+import getInitialPopperStyles from './getInitialPopperStyles';
+
+export interface TooltipProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    BsPrefixProps {
+  placement?: Placement;
+  arrowProps?: Partial<OverlayArrowProps>;
+  show?: boolean;
+  popper?: PopperRef;
+  hasDoneInitialMeasure?: boolean;
+}
+
+const propTypes = {
+  /**
+   * @default 'tooltip'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * An html id attribute, necessary for accessibility
+   * @type {string}
+   * @required
+   */
+  id: PropTypes.string,
+
+  /**
+   * Sets the direction the Tooltip is positioned towards.
+   *
+   * > This is generally provided by the `Overlay` component positioning the tooltip
+   */
+  placement: PropTypes.oneOf([
+    'auto-start',
+    'auto',
+    'auto-end',
+    'top-start',
+    'top',
+    'top-end',
+    'right-start',
+    'right',
+    'right-end',
+    'bottom-end',
+    'bottom',
+    'bottom-start',
+    'left-end',
+    'left',
+    'left-start',
+  ]),
+
+  /**
+   * An Overlay injected set of props for positioning the tooltip arrow.
+   *
+   * > This is generally provided by the `Overlay` component positioning the tooltip
+   *
+   * @type {{ ref: ReactRef, style: Object }}
+   */
+  arrowProps: PropTypes.shape({
+    ref: PropTypes.any,
+    style: PropTypes.object,
+  }),
+
+  /**
+   * Whether or not Popper has done its initial measurement and positioning.
+   */
+  hasDoneInitialMeasure: PropTypes.bool,
+
+  /** @private */
+  popper: PropTypes.object,
+
+  /** @private */
+  show: PropTypes.any,
+};
+
+const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  (
+    {
+      bsPrefix,
+      placement = 'right',
+      className,
+      style,
+      children,
+      arrowProps,
+      hasDoneInitialMeasure,
+      popper,
+      show,
+      ...props
+    }: TooltipProps,
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'tooltip');
+    const isRTL = useIsRTL();
+
+    const [primaryPlacement] = placement?.split('-') || [];
+    const bsDirection = getOverlayDirection(primaryPlacement, isRTL);
+
+    let computedStyle = style;
+    if (show && !hasDoneInitialMeasure) {
+      computedStyle = {
+        ...style,
+        ...getInitialPopperStyles(popper?.strategy),
+      };
+    }
+
+    return (
+      <div
+        ref={ref}
+        style={computedStyle}
+        role="tooltip"
+        x-placement={primaryPlacement}
+        className={classNames(className, bsPrefix, `bs-tooltip-${bsDirection}`)}
+        {...props}
+      >
+        <div className="tooltip-arrow" {...arrowProps} />
+        <div className={`${bsPrefix}-inner`}>{children}</div>
+      </div>
+    );
+  },
+);
+
+Tooltip.propTypes = propTypes as any;
+Tooltip.displayName = 'Tooltip';
+
+export default Object.assign(Tooltip, {
+  // Default tooltip offset.
+  // https://github.com/twbs/bootstrap/blob/beca2a6c7f6bc88b6449339fc76edcda832c59e5/js/src/tooltip.js#L65
+  TOOLTIP_OFFSET: [0, 6],
+});
diff --git a/react/TransitionWrapper.tsx b/react/TransitionWrapper.tsx
new file mode 100644
index 0000000..613364b
--- /dev/null
+++ b/react/TransitionWrapper.tsx
@@ -0,0 +1,93 @@
+import React, { useCallback, useRef } from 'react';
+import Transition, {
+  TransitionProps,
+  TransitionStatus,
+} from 'react-transition-group/Transition';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import safeFindDOMNode from './safeFindDOMNode';
+
+export type TransitionWrapperProps = TransitionProps & {
+  childRef?: React.Ref<unknown>;
+  children:
+    | React.ReactElement
+    | ((
+        status: TransitionStatus,
+        props: Record<string, unknown>,
+      ) => React.ReactNode);
+};
+
+// Normalizes Transition callbacks when nodeRef is used.
+const TransitionWrapper = React.forwardRef<
+  Transition<any>,
+  TransitionWrapperProps
+>(
+  (
+    {
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+      addEndListener,
+      children,
+      childRef,
+      ...props
+    },
+    ref,
+  ) => {
+    const nodeRef = useRef<HTMLElement>(null);
+    const mergedRef = useMergedRefs(nodeRef, childRef);
+
+    const attachRef = (r: React.Component | Element | null | undefined) => {
+      mergedRef(safeFindDOMNode(r));
+    };
+
+    const normalize =
+      (callback?: (node: HTMLElement, param: any) => void) => (param: any) => {
+        if (callback && nodeRef.current) {
+          callback(nodeRef.current, param);
+        }
+      };
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    const handleEnter = useCallback(normalize(onEnter), [onEnter]);
+    const handleEntering = useCallback(normalize(onEntering), [onEntering]);
+    const handleEntered = useCallback(normalize(onEntered), [onEntered]);
+    const handleExit = useCallback(normalize(onExit), [onExit]);
+    const handleExiting = useCallback(normalize(onExiting), [onExiting]);
+    const handleExited = useCallback(normalize(onExited), [onExited]);
+    const handleAddEndListener = useCallback(normalize(addEndListener), [
+      addEndListener,
+    ]);
+    /* eslint-enable react-hooks/exhaustive-deps */
+
+    return (
+      <Transition
+        ref={ref}
+        {...props}
+        onEnter={handleEnter}
+        onEntered={handleEntered}
+        onEntering={handleEntering}
+        onExit={handleExit}
+        onExited={handleExited}
+        onExiting={handleExiting}
+        addEndListener={handleAddEndListener}
+        nodeRef={nodeRef}
+      >
+        {typeof children === 'function'
+          ? (((status: TransitionStatus, innerProps: Record<string, unknown>) =>
+              // TODO: Types for RTG missing innerProps, so need to cast.
+              children(status, {
+                ...innerProps,
+                ref: attachRef,
+              })) as any)
+          : React.cloneElement(children as React.ReactElement, {
+              ref: attachRef,
+            })}
+      </Transition>
+    );
+  },
+);
+
+export default TransitionWrapper;
diff --git a/react/createChainedFunction.tsx b/react/createChainedFunction.tsx
new file mode 100644
index 0000000..bc1da6a
--- /dev/null
+++ b/react/createChainedFunction.tsx
@@ -0,0 +1,31 @@
+/**
+ * Safe chained function
+ *
+ * Will only create a new function if needed,
+ * otherwise will pass back existing functions or null.
+ *
+ * @param {function} functions to chain
+ * @returns {function|null}
+ */
+function createChainedFunction(...funcs) {
+  return funcs
+    .filter((f) => f != null)
+    .reduce((acc, f) => {
+      if (typeof f !== 'function') {
+        throw new Error(
+          'Invalid Argument Type, must only provide functions, undefined, or null.',
+        );
+      }
+
+      if (acc === null) return f;
+
+      return function chainedFunction(...args) {
+        // @ts-ignore
+        acc.apply(this, args);
+        // @ts-ignore
+        f.apply(this, args);
+      };
+    }, null);
+}
+
+export default createChainedFunction;
diff --git a/react/createUtilityClasses.ts b/react/createUtilityClasses.ts
new file mode 100644
index 0000000..9e3022f
--- /dev/null
+++ b/react/createUtilityClasses.ts
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import { DEFAULT_BREAKPOINTS, DEFAULT_MIN_BREAKPOINT } from './ThemeProvider';
+
+export type ResponsiveUtilityValue<T> =
+  | T
+  | {
+      xs?: T;
+      sm?: T;
+      md?: T;
+      lg?: T;
+      xl?: T;
+      xxl?: T;
+    };
+
+export function responsivePropType(propType: any) {
+  return PropTypes.oneOfType([
+    propType,
+    PropTypes.shape({
+      xs: propType,
+      sm: propType,
+      md: propType,
+      lg: propType,
+      xl: propType,
+      xxl: propType,
+    }),
+  ]);
+}
+
+export default function createUtilityClassName(
+  utilityValues: Record<string, ResponsiveUtilityValue<unknown>>,
+  breakpoints = DEFAULT_BREAKPOINTS,
+  minBreakpoint = DEFAULT_MIN_BREAKPOINT,
+) {
+  const classes: string[] = [];
+  Object.entries(utilityValues).forEach(([utilName, utilValue]) => {
+    if (utilValue != null) {
+      if (typeof utilValue === 'object') {
+        breakpoints.forEach((brkPoint) => {
+          const bpValue = utilValue![brkPoint];
+          if (bpValue != null) {
+            const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : '';
+            classes.push(`${utilName}${infix}-${bpValue}`);
+          }
+        });
+      } else {
+        classes.push(`${utilName}-${utilValue}`);
+      }
+    }
+  });
+
+  return classes;
+}
diff --git a/react/createWithBsPrefix.tsx b/react/createWithBsPrefix.tsx
new file mode 100644
index 0000000..114e6d2
--- /dev/null
+++ b/react/createWithBsPrefix.tsx
@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import camelize from 'dom-helpers/camelize';
+import * as React from 'react';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixRefForwardingComponent } from './helpers';
+
+const pascalCase = (str) => str[0].toUpperCase() + camelize(str).slice(1);
+
+interface BsPrefixOptions<As extends React.ElementType = 'div'> {
+  displayName?: string;
+  Component?: As;
+  defaultProps?: Partial<React.ComponentProps<As>>;
+}
+
+// TODO: emstricten & fix the typing here! `createWithBsPrefix<TElementType>...`
+export default function createWithBsPrefix<
+  As extends React.ElementType = 'div',
+>(
+  prefix: string,
+  {
+    displayName = pascalCase(prefix),
+    Component,
+    defaultProps,
+  }: BsPrefixOptions<As> = {},
+): BsPrefixRefForwardingComponent<As> {
+  const BsComponent = React.forwardRef(
+    (
+      { className, bsPrefix, as: Tag = Component || 'div', ...props }: any,
+      ref,
+    ) => {
+      const componentProps = {
+        ...defaultProps,
+        ...props,
+      };
+
+      const resolvedPrefix = useBootstrapPrefix(bsPrefix, prefix);
+      return (
+        <Tag
+          ref={ref}
+          className={classNames(className, resolvedPrefix)}
+          {...componentProps}
+        />
+      );
+    },
+  );
+
+  BsComponent.displayName = displayName;
+  return BsComponent as any;
+}
diff --git a/react/divWithClassName.tsx b/react/divWithClassName.tsx
new file mode 100644
index 0000000..99c88cc
--- /dev/null
+++ b/react/divWithClassName.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export default (className: string) =>
+  React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>((p, ref) => (
+    <div
+      {...p}
+      ref={ref}
+      className={classNames((p as any).className, className)}
+    />
+  ));
diff --git a/react/getInitialPopperStyles.ts b/react/getInitialPopperStyles.ts
new file mode 100644
index 0000000..34bdccc
--- /dev/null
+++ b/react/getInitialPopperStyles.ts
@@ -0,0 +1,11 @@
+export default function getInitialPopperStyles(
+  position: React.CSSProperties['position'] = 'absolute',
+): Partial<React.CSSProperties> {
+  return {
+    position,
+    top: '0',
+    left: '0',
+    opacity: '0',
+    pointerEvents: 'none',
+  };
+}
diff --git a/react/getTabTransitionComponent.ts b/react/getTabTransitionComponent.ts
new file mode 100644
index 0000000..8338dd0
--- /dev/null
+++ b/react/getTabTransitionComponent.ts
@@ -0,0 +1,14 @@
+import { TransitionComponent } from '@restart/ui/types';
+import NoopTransition from '@restart/ui/NoopTransition';
+import Fade from './Fade';
+import { TransitionType } from './helpers';
+
+export default function getTabTransitionComponent(
+  transition?: TransitionType,
+): TransitionComponent | undefined {
+  if (typeof transition === 'boolean') {
+    return transition ? Fade : NoopTransition;
+  }
+
+  return transition;
+}
diff --git a/react/helpers.ts b/react/helpers.ts
new file mode 100644
index 0000000..d514b24
--- /dev/null
+++ b/react/helpers.ts
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { TransitionComponent } from '@restart/ui/types';
+
+export type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>;
+
+export type ReplaceProps<Inner extends React.ElementType, P> = Omit<
+  React.ComponentPropsWithRef<Inner>,
+  P
+> &
+  P;
+
+export interface BsPrefixOnlyProps {
+  bsPrefix?: string;
+}
+
+export interface AsProp<As extends React.ElementType = React.ElementType> {
+  as?: As;
+}
+
+export interface BsPrefixProps<As extends React.ElementType = React.ElementType>
+  extends BsPrefixOnlyProps,
+    AsProp<As> {}
+
+export interface BsPrefixRefForwardingComponent<
+  TInitial extends React.ElementType,
+  P = unknown,
+> {
+  <As extends React.ElementType = TInitial>(
+    props: React.PropsWithChildren<ReplaceProps<As, BsPrefixProps<As> & P>>,
+    context?: any,
+  ): React.ReactElement | null;
+  propTypes?: any;
+  contextTypes?: any;
+  defaultProps?: Partial<P>;
+  displayName?: string;
+}
+
+export class BsPrefixComponent<
+  As extends React.ElementType,
+  P = unknown,
+> extends React.Component<ReplaceProps<As, BsPrefixProps<As> & P>> {}
+
+// Need to use this instead of typeof Component to get proper type checking.
+export type BsPrefixComponentClass<
+  As extends React.ElementType,
+  P = unknown,
+> = React.ComponentClass<ReplaceProps<As, BsPrefixProps<As> & P>>;
+
+export type TransitionType = boolean | TransitionComponent;
+
+export function getOverlayDirection(placement: string, isRTL?: boolean) {
+  let bsDirection = placement;
+  if (placement === 'left') {
+    bsDirection = isRTL ? 'end' : 'start';
+  } else if (placement === 'right') {
+    bsDirection = isRTL ? 'start' : 'end';
+  }
+  return bsDirection;
+}
diff --git a/react/index.tsx b/react/index.tsx
new file mode 100644
index 0000000..dcf07e1
--- /dev/null
+++ b/react/index.tsx
@@ -0,0 +1,334 @@
+export { default as Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
+
+export { default as AccordionContext } from './AccordionContext';
+export { default as AccordionCollapse } from './AccordionCollapse';
+export type { AccordionCollapseProps } from './AccordionCollapse';
+
+export {
+  default as AccordionButton,
+  useAccordionButton,
+} from './AccordionButton';
+export type { AccordionButtonProps } from './AccordionButton';
+
+export { default as AccordionBody } from './AccordionBody';
+export type { AccordionBodyProps } from './AccordionBody';
+
+export { default as AccordionHeader } from './AccordionHeader';
+export type { AccordionHeaderProps } from './AccordionHeader';
+
+export { default as AccordionItem } from './AccordionItem';
+export type { AccordionItemProps } from './AccordionItem';
+
+export { default as Alert } from './Alert';
+export type { AlertProps } from './Alert';
+
+export { default as AlertHeading } from './AlertHeading';
+export type { AlertHeadingProps } from './AlertHeading';
+
+export { default as AlertLink } from './AlertLink';
+export type { AlertLinkProps } from './AlertLink';
+
+export { default as Anchor } from './Anchor';
+export type { AnchorProps } from './Anchor';
+
+export { default as Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+
+export { default as Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps } from './Breadcrumb';
+
+export { default as BreadcrumbItem } from './BreadcrumbItem';
+export type { BreadcrumbItemProps } from './BreadcrumbItem';
+
+export { default as Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { default as ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps } from './ButtonGroup';
+
+export { default as ButtonToolbar } from './ButtonToolbar';
+export type { ButtonToolbarProps } from './ButtonToolbar';
+
+export { default as Card } from './Card';
+export type { CardProps } from './Card';
+
+export { default as CardBody } from './CardBody';
+export type { CardBodyProps } from './CardBody';
+
+export { default as CardFooter } from './CardFooter';
+export type { CardFooterProps } from './CardFooter';
+
+export { default as CardGroup } from './CardGroup';
+export type { CardGroupProps } from './CardGroup';
+
+export { default as CardHeader } from './CardHeader';
+export type { CardHeaderProps } from './CardHeader';
+
+export { default as CardImg } from './CardImg';
+export type { CardImgProps } from './CardImg';
+
+export { default as CardImgOverlay } from './CardImgOverlay';
+export type { CardImgOverlayProps } from './CardImgOverlay';
+
+export { default as CardLink } from './CardLink';
+export type { CardLinkProps } from './CardLink';
+
+export { default as CardSubtitle } from './CardSubtitle';
+export type { CardSubtitleProps } from './CardSubtitle';
+
+export { default as CardText } from './CardText';
+export type { CardTextProps } from './CardText';
+
+export { default as CardTitle } from './CardTitle';
+export type { CardTitleProps } from './CardTitle';
+
+export { default as Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
+
+export { default as CarouselCaption } from './CarouselCaption';
+export type { CarouselCaptionProps } from './CarouselCaption';
+
+export { default as CarouselItem } from './CarouselItem';
+export type { CarouselItemProps } from './CarouselItem';
+
+export { default as CloseButton } from './CloseButton';
+export type { CloseButtonProps } from './CloseButton';
+
+export { default as Col } from './Col';
+export type { ColProps } from './Col';
+
+export { default as Collapse } from './Collapse';
+export type { CollapseProps } from './Collapse';
+
+export { default as Container } from './Container';
+export type { ContainerProps } from './Container';
+
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps } from './Dropdown';
+
+export { default as DropdownButton } from './DropdownButton';
+export type { DropdownButtonProps } from './DropdownButton';
+
+export { default as DropdownDivider } from './DropdownDivider';
+export type { DropdownDividerProps } from './DropdownDivider';
+
+export { default as DropdownHeader } from './DropdownHeader';
+export type { DropdownHeaderProps } from './DropdownHeader';
+
+export { default as DropdownItem } from './DropdownItem';
+export type { DropdownItemProps } from './DropdownItem';
+
+export { default as DropdownItemText } from './DropdownItemText';
+export type { DropdownItemTextProps } from './DropdownItemText';
+
+export { default as DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps } from './DropdownMenu';
+
+export { default as DropdownToggle } from './DropdownToggle';
+export type { DropdownToggleProps } from './DropdownToggle';
+
+export { default as Fade } from './Fade';
+export type { FadeProps } from './Fade';
+
+export { default as Figure } from './Figure';
+export type { FigureProps } from './Figure';
+
+export { default as FigureCaption } from './FigureCaption';
+export type { FigureCaptionProps } from './FigureCaption';
+
+export { default as FigureImage } from './FigureImage';
+
+export { default as Form } from './Form';
+export type { FormProps } from './Form';
+
+export { default as FormControl } from './FormControl';
+export type { FormControlProps } from './FormControl';
+
+export { default as FormCheck } from './FormCheck';
+export type { FormCheckProps } from './FormCheck';
+
+export { default as FormFloating } from './FormFloating';
+
+export { default as FloatingLabel } from './FloatingLabel';
+export type { FloatingLabelProps } from './FloatingLabel';
+
+export { default as FormGroup } from './FormGroup';
+export type { FormGroupProps } from './FormGroup';
+
+export { default as FormLabel } from './FormLabel';
+export type { FormLabelProps } from './FormLabel';
+
+export { default as FormText } from './FormText';
+export type { FormTextProps } from './FormText';
+
+export { default as FormSelect } from './FormSelect';
+export type { FormSelectProps } from './FormSelect';
+
+export { default as Image } from './Image';
+export type { ImageProps } from './Image';
+
+export { default as InputGroup } from './InputGroup';
+export type { InputGroupProps } from './InputGroup';
+
+export { default as ListGroup } from './ListGroup';
+export type { ListGroupProps } from './ListGroup';
+
+export { default as ListGroupItem } from './ListGroupItem';
+export type { ListGroupItemProps } from './ListGroupItem';
+
+export { default as Modal } from './Modal';
+export type { ModalProps } from './Modal';
+
+export { default as ModalBody } from './ModalBody';
+
+export { default as ModalDialog } from './ModalDialog';
+export type { ModalDialogProps } from './ModalDialog';
+
+export { default as ModalFooter } from './ModalFooter';
+export type { ModalFooterProps } from './ModalFooter';
+
+export { default as ModalHeader } from './ModalHeader';
+export type { ModalHeaderProps } from './ModalHeader';
+
+export { default as ModalTitle } from './ModalTitle';
+export type { ModalTitleProps } from './ModalTitle';
+
+export { default as Nav } from './Nav';
+export type { NavProps } from './Nav';
+
+export { default as Navbar } from './Navbar';
+export type { NavbarProps } from './Navbar';
+
+export { default as NavbarBrand } from './NavbarBrand';
+export type { NavbarBrandProps } from './NavbarBrand';
+
+export { default as NavbarCollapse } from './NavbarCollapse';
+export type { NavbarCollapseProps } from './NavbarCollapse';
+
+export { default as NavbarOffcanvas } from './NavbarOffcanvas';
+export type { NavbarOffcanvasProps } from './NavbarOffcanvas';
+
+export { default as NavbarText } from './NavbarText';
+export type { NavbarTextProps } from './NavbarText';
+
+export { default as NavbarToggle } from './NavbarToggle';
+export type { NavbarToggleProps } from './NavbarToggle';
+
+export { default as NavDropdown } from './NavDropdown';
+export type { NavDropdownProps } from './NavDropdown';
+
+export { default as NavItem } from './NavItem';
+export type { NavItemProps } from './NavItem';
+
+export { default as NavLink } from './NavLink';
+export type { NavLinkProps } from './NavLink';
+
+export { default as Offcanvas } from './Offcanvas';
+export type { OffcanvasProps } from './Offcanvas';
+
+export { default as OffcanvasBody } from './OffcanvasBody';
+export type { OffcanvasBodyProps } from './OffcanvasBody';
+
+export { default as OffcanvasHeader } from './OffcanvasHeader';
+export type { OffcanvasHeaderProps } from './OffcanvasHeader';
+
+export { default as OffcanvasTitle } from './OffcanvasTitle';
+export type { OffcanvasTitleProps } from './OffcanvasTitle';
+
+export { default as OffcanvasToggling } from './OffcanvasToggling';
+export type { OffcanvasTogglingProps } from './OffcanvasToggling';
+
+export { default as Overlay } from './Overlay';
+export type { OverlayProps } from './Overlay';
+
+export { default as OverlayTrigger } from './OverlayTrigger';
+export type { OverlayTriggerProps } from './OverlayTrigger';
+
+export { default as PageItem } from './PageItem';
+export type { PageItemProps } from './PageItem';
+
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+
+export { default as Placeholder } from './Placeholder';
+export type { PlaceholderProps } from './Placeholder';
+
+export { default as PlaceholderButton } from './PlaceholderButton';
+export type { PlaceholderButtonProps } from './PlaceholderButton';
+
+export { default as Popover } from './Popover';
+export type { PopoverProps } from './Popover';
+
+export { default as PopoverBody } from './PopoverBody';
+export type { PopoverBodyProps } from './PopoverBody';
+
+export { default as PopoverHeader } from './PopoverHeader';
+export type { PopoverHeaderProps } from './PopoverHeader';
+
+export { default as ProgressBar } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBar';
+
+export { default as Ratio } from './Ratio';
+export type { RatioProps } from './Ratio';
+
+export { default as Row } from './Row';
+export type { RowProps } from './Row';
+
+export { default as Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+
+export { default as SplitButton } from './SplitButton';
+export type { SplitButtonProps } from './SplitButton';
+
+export { default as SSRProvider } from './SSRProvider';
+export type { SSRProviderProps } from './SSRProvider';
+
+export { default as Stack } from './Stack';
+export type { StackProps } from './Stack';
+
+export { default as Tab } from './Tab';
+export type { TabProps } from './Tab';
+
+export { default as TabContainer } from './TabContainer';
+export type { TabContainerProps } from './TabContainer';
+
+export { default as TabContent } from './TabContent';
+export type { TabContentProps } from './TabContent';
+
+export { default as Table } from './Table';
+export type { TableProps } from './Table';
+
+export { default as TabPane } from './TabPane';
+export type { TabPaneProps } from './TabPane';
+
+export { default as Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
+
+export { default as ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+
+export { default as Toast } from './Toast';
+export type { ToastProps } from './Toast';
+
+export { default as ToastBody } from './ToastBody';
+export type { ToastBodyProps } from './ToastBody';
+
+export { default as ToastContainer } from './ToastContainer';
+export type { ToastContainerProps } from './ToastContainer';
+
+export { default as ToastHeader } from './ToastHeader';
+export type { ToastHeaderProps } from './ToastHeader';
+
+export { default as ToggleButton } from './ToggleButton';
+export type { ToggleButtonProps } from './ToggleButton';
+
+export { default as ToggleButtonGroup } from './ToggleButtonGroup';
+export type {
+  ToggleButtonCheckboxProps,
+  ToggleButtonGroupProps,
+  ToggleButtonRadioProps,
+} from './ToggleButtonGroup';
+
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
diff --git a/react/safeFindDOMNode.ts b/react/safeFindDOMNode.ts
new file mode 100644
index 0000000..567c877
--- /dev/null
+++ b/react/safeFindDOMNode.ts
@@ -0,0 +1,10 @@
+import ReactDOM from 'react-dom';
+
+export default function safeFindDOMNode(
+  componentOrElement: React.Component | Element | null | undefined,
+) {
+  if (componentOrElement && 'setState' in componentOrElement) {
+    return ReactDOM.findDOMNode(componentOrElement);
+  }
+  return (componentOrElement ?? null) as Element | Text | null;
+}
diff --git a/react/transitionEndListener.ts b/react/transitionEndListener.ts
new file mode 100644
index 0000000..c38d8ee
--- /dev/null
+++ b/react/transitionEndListener.ts
@@ -0,0 +1,29 @@
+import css from 'dom-helpers/css';
+import transitionEnd from 'dom-helpers/transitionEnd';
+
+function parseDuration(
+  node: HTMLElement,
+  property: 'transitionDuration' | 'transitionDelay',
+) {
+  const str = css(node, property) || '';
+  const mult = str.indexOf('ms') === -1 ? 1000 : 1;
+  return parseFloat(str) * mult;
+}
+
+export default function transitionEndListener(
+  element: HTMLElement,
+  handler: (e: TransitionEvent) => void,
+) {
+  const duration = parseDuration(element, 'transitionDuration');
+  const delay = parseDuration(element, 'transitionDelay');
+  const remove = transitionEnd(
+    element,
+    (e) => {
+      if (e.target === element) {
+        remove();
+        handler(e);
+      }
+    },
+    duration + delay,
+  );
+}
diff --git a/react/triggerBrowserReflow.tsx b/react/triggerBrowserReflow.tsx
new file mode 100644
index 0000000..409d2fc
--- /dev/null
+++ b/react/triggerBrowserReflow.tsx
@@ -0,0 +1,6 @@
+// reading a dimension prop will cause the browser to recalculate,
+// which will let our animations work
+export default function triggerBrowserReflow(node: HTMLElement): void {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  node.offsetHeight;
+}
diff --git a/react/types.tsx b/react/types.tsx
new file mode 100644
index 0000000..714f141
--- /dev/null
+++ b/react/types.tsx
@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+import { State, UsePopperOptions } from '@restart/ui/usePopper';
+
+export type Variant =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'dark'
+  | 'light'
+  | string;
+export type ButtonVariant =
+  | Variant
+  | 'link'
+  | 'outline-primary'
+  | 'outline-secondary'
+  | 'outline-success'
+  | 'outline-danger'
+  | 'outline-warning'
+  | 'outline-info'
+  | 'outline-dark'
+  | 'outline-light';
+export type Color =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'dark'
+  | 'light'
+  | 'white'
+  | 'muted'
+  | string;
+
+export type Placement = import('@restart/ui/usePopper').Placement;
+
+export type AlignDirection = 'start' | 'end';
+
+export type ResponsiveAlignProp =
+  | { sm: AlignDirection }
+  | { md: AlignDirection }
+  | { lg: AlignDirection }
+  | { xl: AlignDirection }
+  | { xxl: AlignDirection }
+  | Record<string, AlignDirection>;
+
+export type AlignType = AlignDirection | ResponsiveAlignProp;
+
+const alignDirection = PropTypes.oneOf<AlignDirection>(['start', 'end']);
+
+export const alignPropType = PropTypes.oneOfType([
+  alignDirection,
+  PropTypes.shape({ sm: alignDirection }),
+  PropTypes.shape({ md: alignDirection }),
+  PropTypes.shape({ lg: alignDirection }),
+  PropTypes.shape({ xl: alignDirection }),
+  PropTypes.shape({ xxl: alignDirection }),
+  PropTypes.object,
+]);
+
+export type RootCloseEvent = 'click' | 'mousedown';
+
+export type GapValue = 0 | 1 | 2 | 3 | 4 | 5 | number;
+
+export interface PopperRef {
+  state: State | undefined;
+  outOfBoundaries: boolean;
+  placement: Placement | undefined;
+  scheduleUpdate?: () => void;
+  strategy: UsePopperOptions['strategy'];
+}
diff --git a/react/useOverlayOffset.tsx b/react/useOverlayOffset.tsx
new file mode 100644
index 0000000..1821b59
--- /dev/null
+++ b/react/useOverlayOffset.tsx
@@ -0,0 +1,43 @@
+import { useMemo, useRef } from 'react';
+import hasClass from 'dom-helpers/hasClass';
+import { Offset, Options } from '@restart/ui/usePopper';
+import { useBootstrapPrefix } from './ThemeProvider';
+import Popover from './Popover';
+import Tooltip from './Tooltip';
+
+// This is meant for internal use.
+// This applies a custom offset to the overlay if it's a popover or tooltip.
+export default function useOverlayOffset(
+  customOffset?: Offset,
+): [React.RefObject<HTMLElement>, Options['modifiers']] {
+  const overlayRef = useRef<HTMLDivElement | null>(null);
+  const popoverClass = useBootstrapPrefix(undefined, 'popover');
+  const tooltipClass = useBootstrapPrefix(undefined, 'tooltip');
+
+  const offset = useMemo(
+    () => ({
+      name: 'offset',
+      options: {
+        offset: () => {
+          if (customOffset) {
+            return customOffset;
+          }
+
+          if (overlayRef.current) {
+            if (hasClass(overlayRef.current, popoverClass)) {
+              return Popover.POPPER_OFFSET;
+            }
+
+            if (hasClass(overlayRef.current, tooltipClass)) {
+              return Tooltip.TOOLTIP_OFFSET;
+            }
+          }
+          return [0, 0];
+        },
+      },
+    }),
+    [customOffset, popoverClass, tooltipClass],
+  );
+
+  return [overlayRef, [offset]];
+}
diff --git a/react/usePlaceholder.ts b/react/usePlaceholder.ts
new file mode 100644
index 0000000..059fda0
--- /dev/null
+++ b/react/usePlaceholder.ts
@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { useCol, ColProps } from './Col';
+import { Variant } from './types';
+
+export type PlaceholderAnimation = 'glow' | 'wave';
+export type PlaceholderSize = 'xs' | 'sm' | 'lg';
+
+export interface UsePlaceholderProps extends Omit<ColProps, 'as'> {
+  animation?: PlaceholderAnimation;
+  bg?: Variant;
+  size?: PlaceholderSize;
+}
+
+export default function usePlaceholder({
+  animation,
+  bg,
+  bsPrefix,
+  size,
+  ...props
+}: UsePlaceholderProps) {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'placeholder');
+  const [{ className, ...colProps }] = useCol(props);
+
+  return {
+    ...colProps,
+    className: classNames(
+      className,
+      animation ? `${bsPrefix}-${animation}` : bsPrefix,
+      size && `${bsPrefix}-${size}`,
+      bg && `bg-${bg}`,
+    ),
+  };
+}
diff --git a/react/useWrappedRefWithWarning.tsx b/react/useWrappedRefWithWarning.tsx
new file mode 100644
index 0000000..0e4dbcd
--- /dev/null
+++ b/react/useWrappedRefWithWarning.tsx
@@ -0,0 +1,22 @@
+import invariant from 'invariant';
+import { useCallback } from 'react';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+
+export default function useWrappedRefWithWarning(ref, componentName) {
+  // @ts-ignore
+  if (!__DEV__) return ref;
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const warningRef = useCallback(
+    (refValue) => {
+      invariant(
+        refValue == null || !refValue.isReactComponent,
+        `${componentName} injected a ref to a provided \`as\` component that resolved to a component instance instead of a DOM element. ` +
+          'Use `React.forwardRef` to provide the injected ref to the class component as a prop in order to pass it directly to a DOM element',
+      );
+    },
+    [componentName],
+  );
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useMergedRefs(warningRef, ref);
+}
diff --git a/ui/Anchor.tsx b/ui/Anchor.tsx
new file mode 100644
index 0000000..aaf5f42
--- /dev/null
+++ b/ui/Anchor.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/anchor-has-content */
+
+import * as React from 'react';
+
+import { useEventCallback } from '@restart/hooks';
+import { useButtonProps } from './Button';
+
+export function isTrivialHref(href?: string) {
+  return !href || href.trim() === '#';
+}
+
+export interface AnchorProps extends React.HTMLAttributes<HTMLElement> {
+  href?: string;
+  disabled?: boolean;
+  role?: string;
+  tabIndex?: number;
+}
+
+/**
+ * An generic `<a>` component that covers a few A11y cases, ensuring that
+ * cases where the `href` is missing or trivial like "#" are treated like buttons.
+ */
+const Anchor = React.forwardRef<HTMLAnchorElement, AnchorProps>(
+  ({ onKeyDown, ...props }, ref) => {
+    const [buttonProps] = useButtonProps({ tagName: 'a', ...props });
+
+    const handleKeyDown = useEventCallback(
+      (e: React.KeyboardEvent<HTMLElement>) => {
+        buttonProps.onKeyDown!(e);
+        onKeyDown?.(e);
+      },
+    );
+
+    if (isTrivialHref(props.href) || props.role === 'button') {
+      return (
+        <a ref={ref} {...props} {...buttonProps} onKeyDown={handleKeyDown} />
+      );
+    }
+
+    return <a ref={ref} {...props} onKeyDown={onKeyDown} />;
+  },
+);
+
+Anchor.displayName = 'Anchor';
+
+export default Anchor;
diff --git a/ui/Button.tsx b/ui/Button.tsx
new file mode 100644
index 0000000..324a3c8
--- /dev/null
+++ b/ui/Button.tsx
@@ -0,0 +1,148 @@
+import * as React from 'react';
+
+export type ButtonType = 'button' | 'reset' | 'submit';
+
+export interface AnchorOptions {
+  href?: string;
+  rel?: string;
+  target?: string;
+}
+
+export interface UseButtonPropsOptions extends AnchorOptions {
+  type?: ButtonType;
+  disabled?: boolean;
+  onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+  tabIndex?: number;
+  tagName?: keyof JSX.IntrinsicElements;
+  role?: React.AriaRole | undefined;
+}
+
+export function isTrivialHref(href?: string) {
+  return !href || href.trim() === '#';
+}
+
+export interface AriaButtonProps {
+  type?: ButtonType | undefined;
+  disabled: boolean | undefined;
+  role?: React.AriaRole;
+  tabIndex?: number | undefined;
+  href?: string | undefined;
+  target?: string | undefined;
+  rel?: string | undefined;
+  'aria-disabled'?: true | undefined;
+  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+}
+
+export interface UseButtonPropsMetadata {
+  tagName: React.ElementType;
+}
+
+export function useButtonProps({
+  tagName,
+  disabled,
+  href,
+  target,
+  rel,
+  role,
+  onClick,
+  tabIndex = 0,
+  type,
+}: UseButtonPropsOptions): [AriaButtonProps, UseButtonPropsMetadata] {
+  if (!tagName) {
+    if (href != null || target != null || rel != null) {
+      tagName = 'a';
+    } else {
+      tagName = 'button';
+    }
+  }
+
+  const meta: UseButtonPropsMetadata = { tagName };
+  if (tagName === 'button') {
+    return [{ type: (type as any) || 'button', disabled }, meta];
+  }
+
+  const handleClick = (event: React.MouseEvent | React.KeyboardEvent) => {
+    if (disabled || (tagName === 'a' && isTrivialHref(href))) {
+      event.preventDefault();
+    }
+
+    if (disabled) {
+      event.stopPropagation();
+      return;
+    }
+
+    onClick?.(event);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === ' ') {
+      event.preventDefault();
+      handleClick(event);
+    }
+  };
+
+  if (tagName === 'a') {
+    // Ensure there's a href so Enter can trigger anchor button.
+    href ||= '#';
+    if (disabled) {
+      href = undefined;
+    }
+  }
+
+  return [
+    {
+      role: role ?? 'button',
+      // explicitly undefined so that it overrides the props disabled in a spread
+      // e.g. <Tag {...props} {...hookProps} />
+      disabled: undefined,
+      tabIndex: disabled ? undefined : tabIndex,
+      href,
+      target: tagName === 'a' ? target : undefined,
+      'aria-disabled': !disabled ? undefined : disabled,
+      rel: tagName === 'a' ? rel : undefined,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+    },
+    meta,
+  ];
+}
+
+export interface BaseButtonProps {
+  /**
+   * Control the underlying rendered element directly by passing in a valid
+   * component type
+   */
+  as?: keyof JSX.IntrinsicElements | undefined;
+
+  /** The disabled state of the button */
+  disabled?: boolean | undefined;
+
+  /** Optionally specify an href to render a `<a>` tag styled as a button */
+  href?: string | undefined;
+
+  /** Anchor target, when rendering an anchor as a button */
+  target?: string | undefined;
+
+  rel?: string | undefined;
+}
+
+export interface ButtonProps
+  extends BaseButtonProps,
+    React.ComponentPropsWithoutRef<'button'> {}
+
+const Button = React.forwardRef<HTMLElement, ButtonProps>(
+  ({ as: asProp, disabled, ...props }, ref) => {
+    const [buttonProps, { tagName: Component }] = useButtonProps({
+      tagName: asProp,
+      disabled,
+      ...props,
+    });
+
+    return <Component {...props} {...buttonProps} ref={ref} />;
+  },
+);
+
+Button.displayName = 'Button';
+
+export default Button;
diff --git a/ui/DataKey.tsx b/ui/DataKey.tsx
new file mode 100644
index 0000000..ec37f92
--- /dev/null
+++ b/ui/DataKey.tsx
@@ -0,0 +1,11 @@
+export const ATTRIBUTE_PREFIX = `data-rr-ui-` as const;
+
+export const PROPERTY_PREFIX = `rrUi` as const;
+
+export function dataAttr<T extends string>(property: T) {
+  return `${ATTRIBUTE_PREFIX}${property}` as const;
+}
+
+export function dataProp<T extends string>(property: T) {
+  return `${PROPERTY_PREFIX}${property}` as const;
+}
diff --git a/ui/Dropdown.tsx b/ui/Dropdown.tsx
new file mode 100644
index 0000000..4acfb62
--- /dev/null
+++ b/ui/Dropdown.tsx
@@ -0,0 +1,360 @@
+import qsa from 'dom-helpers/querySelectorAll';
+import addEventListener from 'dom-helpers/addEventListener';
+import { useCallback, useRef, useEffect, useMemo, useContext } from 'react';
+import * as React from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import usePrevious from '@restart/hooks/usePrevious';
+import useForceUpdate from '@restart/hooks/useForceUpdate';
+import useEventListener from '@restart/hooks/useEventListener';
+import useEventCallback from '@restart/hooks/useEventCallback';
+
+import DropdownContext from './DropdownContext';
+import DropdownMenu, {
+  DropdownMenuProps,
+  UseDropdownMenuMetadata,
+  UseDropdownMenuOptions,
+} from './DropdownMenu';
+import DropdownToggle, {
+  DropdownToggleProps,
+  UseDropdownToggleMetadata,
+  isRoleMenu,
+} from './DropdownToggle';
+import DropdownItem, { DropdownItemProps } from './DropdownItem';
+import SelectableContext from './SelectableContext';
+import { SelectCallback } from './types';
+import { dataAttr } from './DataKey';
+import { Placement } from './usePopper';
+import useWindow from './useWindow';
+
+export type {
+  DropdownMenuProps,
+  UseDropdownMenuMetadata,
+  UseDropdownMenuOptions,
+  DropdownToggleProps,
+  UseDropdownToggleMetadata,
+  DropdownItemProps,
+};
+
+export interface DropdownInjectedProps {
+  onKeyDown: React.KeyboardEventHandler;
+}
+
+export type ToggleEvent = React.SyntheticEvent | KeyboardEvent | MouseEvent;
+
+export interface ToggleMetadata {
+  source: string | undefined;
+  originalEvent: ToggleEvent | undefined;
+}
+
+export interface DropdownProps {
+  /**
+   * The PopperJS placement for positioning the Dropdown menu in relation to
+   * its Toggle.
+   *
+   * @default 'bottom-start'
+   */
+  placement?: Placement;
+
+  /**
+   * Sets the initial visibility of the Dropdown.
+   */
+  defaultShow?: boolean;
+
+  /**
+   * Whether or not the Dropdown is visible.
+   *
+   * @controllable onToggle
+   */
+  show?: boolean;
+
+  /**
+   * A callback fired when a DropdownItem has been selected.
+   */
+  onSelect?: SelectCallback;
+
+  /**
+   * A callback fired when the Dropdown wishes to change visibility. Called with
+   * the requested `show` value, the DOM event, and the source that fired it:
+   * `'click'`,`'keydown'`,`'rootClose'`, or `'select'`.
+   *
+   * ```ts static
+   * function(
+   *   nextShow: boolean,
+   *   meta: ToggleMetadata,
+   * ): void
+   * ```
+   *
+   * @controllable show
+   */
+  onToggle?: (nextShow: boolean, meta: ToggleMetadata) => void;
+
+  /**
+   * A css selector string that will return __focusable__ menu items.
+   * Selectors should be relative to the menu component:
+   * e.g. ` > li:not('.disabled')`
+   */
+  itemSelector?: string;
+
+  /**
+   * Controls the focus behavior for when the Dropdown is opened. Set to
+   * `true` to always focus the first menu item, `keyboard` to focus only when
+   * navigating via the keyboard, or `false` to disable completely
+   *
+   * The Default behavior is `false` **unless** the Menu has a `role="menu"`
+   * where it will default to `keyboard` to match the recommended [ARIA Authoring
+   * practices](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton).
+   */
+  focusFirstItemOnShow?: boolean | 'keyboard';
+
+  /**
+   * A render prop that returns the root dropdown element. The `props`
+   * argument should spread through to an element containing _both_ the
+   * menu and toggle in order to handle keyboard events for focus management.
+   *
+   * @type {Function ({
+   *   props: {
+   *     onKeyDown: (SyntheticEvent) => void,
+   *   },
+   * }) => React.Element}
+   */
+  children: React.ReactNode;
+}
+
+function useRefWithUpdate() {
+  const forceUpdate = useForceUpdate();
+  const ref = useRef<HTMLElement | null>(null);
+  const attachRef = useCallback(
+    (element: null | HTMLElement) => {
+      ref.current = element;
+      // ensure that a menu set triggers an update for consumers
+      forceUpdate();
+    },
+    [forceUpdate],
+  );
+  return [ref, attachRef] as const;
+}
+
+/**
+ * @displayName Dropdown
+ * @public
+ */
+function Dropdown({
+  defaultShow,
+  show: rawShow,
+  onSelect,
+  onToggle: rawOnToggle,
+  itemSelector = `* [${dataAttr('dropdown-item')}]`,
+  focusFirstItemOnShow,
+  placement = 'bottom-start',
+  children,
+}: DropdownProps) {
+  const window = useWindow();
+  const [show, onToggle] = useUncontrolledProp(
+    rawShow,
+    defaultShow!,
+    rawOnToggle,
+  );
+
+  // We use normal refs instead of useCallbackRef in order to populate the
+  // the value as quickly as possible, otherwise the effect to focus the element
+  // may run before the state value is set
+  const [menuRef, setMenu] = useRefWithUpdate();
+  const menuElement = menuRef.current;
+
+  const [toggleRef, setToggle] = useRefWithUpdate();
+  const toggleElement = toggleRef.current;
+
+  const lastShow = usePrevious(show);
+  const lastSourceEvent = useRef<string | null>(null);
+  const focusInDropdown = useRef(false);
+  const onSelectCtx = useContext(SelectableContext);
+
+  const toggle = useCallback(
+    (
+      nextShow: boolean,
+      event: ToggleEvent | undefined,
+      source: string | undefined = event?.type,
+    ) => {
+      onToggle(nextShow, { originalEvent: event, source });
+    },
+    [onToggle],
+  );
+
+  const handleSelect = useEventCallback(
+    (key: string | null, event: React.SyntheticEvent) => {
+      onSelect?.(key, event);
+      toggle(false, event, 'select');
+
+      if (!event.isPropagationStopped()) {
+        onSelectCtx?.(key, event);
+      }
+    },
+  );
+
+  const context = useMemo(
+    () => ({
+      toggle,
+      placement,
+      show,
+      menuElement,
+      toggleElement,
+      setMenu,
+      setToggle,
+    }),
+    [toggle, placement, show, menuElement, toggleElement, setMenu, setToggle],
+  );
+
+  if (menuElement && lastShow && !show) {
+    focusInDropdown.current = menuElement.contains(
+      menuElement.ownerDocument.activeElement,
+    );
+  }
+
+  const focusToggle = useEventCallback(() => {
+    if (toggleElement && toggleElement.focus) {
+      toggleElement.focus();
+    }
+  });
+
+  const maybeFocusFirst = useEventCallback(() => {
+    const type = lastSourceEvent.current;
+    let focusType = focusFirstItemOnShow;
+
+    if (focusType == null) {
+      focusType =
+        menuRef.current && isRoleMenu(menuRef.current) ? 'keyboard' : false;
+    }
+
+    if (
+      focusType === false ||
+      (focusType === 'keyboard' && !/^key.+$/.test(type!))
+    ) {
+      return;
+    }
+
+    const first = qsa(menuRef.current!, itemSelector)[0];
+
+    if (first && first.focus) first.focus();
+  });
+
+  useEffect(() => {
+    if (show) maybeFocusFirst();
+    else if (focusInDropdown.current) {
+      focusInDropdown.current = false;
+      focusToggle();
+    }
+    // only `show` should be changing
+  }, [show, focusInDropdown, focusToggle, maybeFocusFirst]);
+
+  useEffect(() => {
+    lastSourceEvent.current = null;
+  });
+
+  const getNextFocusedChild = (current: HTMLElement, offset: number) => {
+    if (!menuRef.current) return null;
+
+    const items = qsa(menuRef.current, itemSelector);
+
+    let index = items.indexOf(current) + offset;
+    index = Math.max(0, Math.min(index, items.length));
+
+    return items[index];
+  };
+
+  useEventListener(
+    useCallback(() => window!.document, [window]),
+    'keydown',
+    (event: KeyboardEvent) => {
+      const { key } = event;
+      const target = event.target as HTMLElement;
+
+      const fromMenu = menuRef.current?.contains(target);
+      const fromToggle = toggleRef.current?.contains(target);
+
+      // Second only to https://github.com/twbs/bootstrap/blob/8cfbf6933b8a0146ac3fbc369f19e520bd1ebdac/js/src/dropdown.js#L400
+      // in inscrutability
+      const isInput = /input|textarea/i.test(target.tagName);
+      if (
+        isInput &&
+        (key === ' ' ||
+          (key !== 'Escape' && fromMenu) ||
+          (key === 'Escape' && (target as HTMLInputElement).type === 'search'))
+      ) {
+        return;
+      }
+
+      if (!fromMenu && !fromToggle) {
+        return;
+      }
+
+      if (key === 'Tab' && (!menuRef.current || !show)) {
+        return;
+      }
+
+      lastSourceEvent.current = event.type;
+      const meta = { originalEvent: event, source: event.type };
+      switch (key) {
+        case 'ArrowUp': {
+          const next = getNextFocusedChild(target, -1);
+          if (next && next.focus) next.focus();
+          event.preventDefault();
+
+          return;
+        }
+        case 'ArrowDown':
+          event.preventDefault();
+          if (!show) {
+            onToggle(true, meta);
+          } else {
+            const next = getNextFocusedChild(target, 1);
+            if (next && next.focus) next.focus();
+          }
+          return;
+        case 'Tab':
+          // on keydown the target is the element being tabbed FROM, we need that
+          // to know if this event is relevant to this dropdown (e.g. in this menu).
+          // On `keyup` the target is the element being tagged TO which we use to check
+          // if focus has left the menu
+          addEventListener(
+            target.ownerDocument as any,
+            'keyup',
+            (e) => {
+              if (
+                (e.key === 'Tab' && !e.target) ||
+                !menuRef.current?.contains(e.target as HTMLElement)
+              ) {
+                onToggle(false, meta);
+              }
+            },
+            { once: true },
+          );
+          break;
+        case 'Escape':
+          if (key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+
+          onToggle(false, meta);
+          break;
+        default:
+      }
+    },
+  );
+
+  return (
+    <SelectableContext.Provider value={handleSelect}>
+      <DropdownContext.Provider value={context}>
+        {children}
+      </DropdownContext.Provider>
+    </SelectableContext.Provider>
+  );
+}
+
+Dropdown.displayName = 'Dropdown';
+
+Dropdown.Menu = DropdownMenu;
+Dropdown.Toggle = DropdownToggle;
+Dropdown.Item = DropdownItem;
+
+export default Dropdown;
diff --git a/ui/DropdownContext.ts b/ui/DropdownContext.ts
new file mode 100644
index 0000000..138eee4
--- /dev/null
+++ b/ui/DropdownContext.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { Placement } from './usePopper';
+
+export type DropdownContextValue = {
+  toggle: (nextShow: boolean, event?: React.SyntheticEvent | Event) => void;
+  menuElement: HTMLElement | null;
+  toggleElement: HTMLElement | null;
+  setMenu: (ref: HTMLElement | null) => void;
+  setToggle: (ref: HTMLElement | null) => void;
+
+  show: boolean;
+  placement?: Placement;
+};
+
+const DropdownContext = React.createContext<DropdownContextValue | null>(null);
+
+export default DropdownContext;
diff --git a/ui/DropdownItem.tsx b/ui/DropdownItem.tsx
new file mode 100644
index 0000000..95cb8ee
--- /dev/null
+++ b/ui/DropdownItem.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { useContext } from 'react';
+import useEventCallback from '@restart/hooks/useEventCallback';
+
+import SelectableContext, { makeEventKey } from './SelectableContext';
+import NavContext from './NavContext';
+
+import { EventKey, DynamicRefForwardingComponent } from './types';
+import Button from './Button';
+import { dataAttr } from './DataKey';
+
+export interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Element used to render the component.
+   */
+  as?: React.ElementType;
+
+  /**
+   * Highlight the menu item as active.
+   */
+  active?: boolean;
+
+  /**
+   * Disable the menu item, making it unselectable.
+   */
+  disabled?: boolean;
+
+  /**
+   * Value passed to the `onSelect` handler, useful for identifying the selected menu item.
+   */
+  eventKey?: EventKey;
+
+  /**
+   * HTML `href` attribute corresponding to `a.href`.
+   */
+  href?: string;
+}
+
+interface UseDropdownItemOptions {
+  key?: EventKey | null;
+  href?: string;
+  active?: boolean;
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler;
+}
+
+/**
+ * Create a dropdown item. Returns a set of props for the dropdown item component
+ * including an `onClick` handler that prevents selection when the item is disabled
+ */
+export function useDropdownItem({
+  key,
+  href,
+  active,
+  disabled,
+  onClick,
+}: UseDropdownItemOptions) {
+  const onSelectCtx = useContext(SelectableContext);
+  const navContext = useContext(NavContext);
+
+  const { activeKey } = navContext || {};
+  const eventKey = makeEventKey(key, href);
+
+  const isActive =
+    active == null && key != null
+      ? makeEventKey(activeKey) === eventKey
+      : active;
+
+  const handleClick = useEventCallback((event) => {
+    if (disabled) return;
+
+    onClick?.(event);
+
+    if (onSelectCtx && !event.isPropagationStopped()) {
+      onSelectCtx(eventKey, event);
+    }
+  });
+
+  return [
+    {
+      onClick: handleClick,
+      'aria-disabled': disabled || undefined,
+      'aria-selected': isActive,
+      [dataAttr('dropdown-item')]: '',
+    },
+    { isActive },
+  ] as const;
+}
+
+const DropdownItem: DynamicRefForwardingComponent<
+  typeof Button,
+  DropdownItemProps
+> = React.forwardRef(
+  (
+    {
+      eventKey,
+      disabled,
+      onClick,
+      active,
+      as: Component = Button,
+      ...props
+    }: DropdownItemProps,
+    ref,
+  ) => {
+    const [dropdownItemProps] = useDropdownItem({
+      key: eventKey,
+      href: props.href,
+      disabled,
+      onClick,
+      active,
+    });
+
+    return <Component {...props} ref={ref} {...dropdownItemProps} />;
+  },
+);
+
+DropdownItem.displayName = 'DropdownItem';
+
+export default DropdownItem;
diff --git a/ui/DropdownMenu.tsx b/ui/DropdownMenu.tsx
new file mode 100644
index 0000000..598e95e
--- /dev/null
+++ b/ui/DropdownMenu.tsx
@@ -0,0 +1,229 @@
+import { useContext, useRef } from 'react';
+import * as React from 'react';
+import useCallbackRef from '@restart/hooks/useCallbackRef';
+import DropdownContext, { DropdownContextValue } from './DropdownContext';
+import usePopper, {
+  UsePopperOptions,
+  Placement,
+  Offset,
+  UsePopperState,
+} from './usePopper';
+import useClickOutside, { ClickOutsideOptions } from './useClickOutside';
+import mergeOptionsWithPopperConfig from './mergeOptionsWithPopperConfig';
+
+export interface UseDropdownMenuOptions {
+  /**
+   * Enables the Popper.js `flip` modifier, allowing the Dropdown to
+   * automatically adjust it's placement in case of overlap with the viewport or
+   * toggle. See the [flip docs](https://popper.js.org/docs/v2/modifiers/flip/)
+   * for more info.
+   */
+  flip?: boolean;
+
+  /**
+   * Controls the visible state of the menu, generally this is provided by the
+   * parent `Dropdown` component, but may also be specified as a prop directly.
+   */
+  show?: boolean;
+
+  /**
+   * Use the `fixed` positioning strategy in Popper. This is used if the
+   * dropdown toggle is in a fixed container.
+   */
+  fixed?: boolean;
+
+  /**
+   * The PopperJS placement for positioning the Dropdown menu in relation to it's Toggle.
+   * Generally this is provided by the parent `Dropdown` component,
+   * but may also be specified as a prop directly.
+   */
+  placement?: Placement;
+
+  /**
+   * Whether or not to use Popper for positioning the menu.
+   */
+  usePopper?: boolean;
+
+  /**
+   * Whether or not to add scroll and resize listeners to update menu position.
+   *
+   * See the [event listeners docs](https://popper.js.org/docs/v2/modifiers/event-listeners/)
+   * for more info.
+   */
+  enableEventListeners?: boolean;
+
+  /**
+   * Offset of the dropdown menu from the dropdown toggle. See the
+   * [offset docs](https://popper.js.org/docs/v2/modifiers/offset/) for more info.
+   */
+  offset?: Offset;
+
+  /**
+   * Override the default event used by RootCloseWrapper.
+   */
+  rootCloseEvent?: ClickOutsideOptions['clickTrigger'];
+
+  /**
+   * A set of popper options and props passed directly to react-popper's Popper component.
+   */
+  popperConfig?: Omit<UsePopperOptions, 'enabled' | 'placement'>;
+}
+
+export type UserDropdownMenuProps = Record<string, any> & {
+  ref: React.RefCallback<HTMLElement>;
+  style?: React.CSSProperties;
+  'aria-labelledby'?: string;
+};
+
+export type UserDropdownMenuArrowProps = Record<string, any> & {
+  ref: React.RefCallback<HTMLElement>;
+  style: React.CSSProperties;
+};
+
+export interface UseDropdownMenuMetadata {
+  show: boolean;
+  placement?: Placement;
+  hasShown: boolean;
+  toggle?: DropdownContextValue['toggle'];
+  popper: UsePopperState | null;
+  arrowProps: Partial<UserDropdownMenuArrowProps>;
+}
+
+const noop: any = () => {};
+
+/**
+ * @memberOf Dropdown
+ * @param {object}  options
+ * @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
+ * @param {[number, number]} options.offset Define an offset distance between the Menu and the Toggle
+ * @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
+ * @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
+ * @param {string}  options.rootCloseEvent The pointer event to listen for when determining "clicks outside" the menu for triggering a close.
+ * @param {object}  options.popperConfig Options passed to the [`usePopper`](/api/usePopper) hook.
+ */
+export function useDropdownMenu(options: UseDropdownMenuOptions = {}) {
+  const context = useContext(DropdownContext);
+
+  const [arrowElement, attachArrowRef] = useCallbackRef<Element>();
+
+  const hasShownRef = useRef(false);
+
+  const {
+    flip,
+    offset,
+    rootCloseEvent,
+    fixed = false,
+    placement: placementOverride,
+    popperConfig = {},
+    enableEventListeners = true,
+    usePopper: shouldUsePopper = !!context,
+  } = options;
+
+  const show = context?.show == null ? !!options.show : context.show;
+
+  if (show && !hasShownRef.current) {
+    hasShownRef.current = true;
+  }
+
+  const handleClose = (e: React.SyntheticEvent | Event) => {
+    context?.toggle(false, e);
+  };
+
+  const { placement, setMenu, menuElement, toggleElement } = context || {};
+
+  const popper = usePopper(
+    toggleElement,
+    menuElement,
+    mergeOptionsWithPopperConfig({
+      placement: placementOverride || placement || 'bottom-start',
+      enabled: shouldUsePopper,
+      enableEvents: enableEventListeners == null ? show : enableEventListeners,
+      offset,
+      flip,
+      fixed,
+      arrowElement,
+      popperConfig,
+    }),
+  );
+
+  const menuProps: UserDropdownMenuProps = {
+    ref: setMenu || noop,
+    'aria-labelledby': toggleElement?.id,
+    ...popper.attributes.popper,
+    style: popper.styles.popper as any,
+  };
+
+  const metadata: UseDropdownMenuMetadata = {
+    show,
+    placement,
+    hasShown: hasShownRef.current,
+    toggle: context?.toggle,
+    popper: shouldUsePopper ? popper : null,
+    arrowProps: shouldUsePopper
+      ? {
+          ref: attachArrowRef,
+          ...popper.attributes.arrow,
+          style: popper.styles.arrow as any,
+        }
+      : {},
+  };
+
+  useClickOutside(menuElement, handleClose, {
+    clickTrigger: rootCloseEvent,
+    disabled: !show,
+  });
+
+  return [menuProps, metadata] as const;
+}
+
+export interface DropdownMenuProps extends UseDropdownMenuOptions {
+  /**
+   * A render prop that returns a Menu element. The `props`
+   * argument should be spread through to **a component that can accept a ref**.
+   *
+   * @type {Function ({
+   *   show: boolean,
+   *   close: (?SyntheticEvent) => void,
+   *   placement: Placement,
+   *   update: () => void,
+   *   forceUpdate: () => void,
+   *   props: {
+   *     ref: (?HTMLElement) => void,
+   *     style: { [string]: string | number },
+   *     aria-labelledby: ?string
+   *   },
+   *   arrowProps: {
+   *     ref: (?HTMLElement) => void,
+   *     style: { [string]: string | number },
+   *   },
+   * }) => React.Element}
+   */
+  children: (
+    props: UserDropdownMenuProps,
+    meta: UseDropdownMenuMetadata,
+  ) => React.ReactNode;
+}
+
+/**
+ * Also exported as `<Dropdown.Menu>` from `Dropdown`.
+ *
+ * @displayName DropdownMenu
+ * @memberOf Dropdown
+ */
+function DropdownMenu({
+  children,
+  usePopper: usePopperProp = true,
+  ...options
+}: DropdownMenuProps) {
+  const [props, meta] = useDropdownMenu({
+    ...options,
+    usePopper: usePopperProp,
+  });
+
+  return <>{children(props, meta)}</>;
+}
+
+DropdownMenu.displayName = 'DropdownMenu';
+
+/** @component */
+export default DropdownMenu;
diff --git a/ui/DropdownToggle.tsx b/ui/DropdownToggle.tsx
new file mode 100644
index 0000000..c576947
--- /dev/null
+++ b/ui/DropdownToggle.tsx
@@ -0,0 +1,104 @@
+import { useContext, useCallback } from 'react';
+import * as React from 'react';
+import { useSSRSafeId } from './ssr';
+import DropdownContext, { DropdownContextValue } from './DropdownContext';
+
+export const isRoleMenu = (el: HTMLElement) =>
+  el.getAttribute('role')?.toLowerCase() === 'menu';
+
+export interface UseDropdownToggleProps {
+  id: string;
+  ref: DropdownContextValue['setToggle'];
+  onClick: React.MouseEventHandler;
+  'aria-expanded': boolean;
+  'aria-haspopup'?: true;
+}
+
+export interface UseDropdownToggleMetadata {
+  show: DropdownContextValue['show'];
+  toggle: DropdownContextValue['toggle'];
+}
+
+const noop = () => {};
+
+/**
+ * Wires up Dropdown toggle functionality, returning a set a props to attach
+ * to the element that functions as the dropdown toggle (generally a button).
+ *
+ * @memberOf Dropdown
+ */
+export function useDropdownToggle(): [
+  UseDropdownToggleProps,
+  UseDropdownToggleMetadata,
+] {
+  const id = useSSRSafeId();
+  const {
+    show = false,
+    toggle = noop,
+    setToggle,
+    menuElement,
+  } = useContext(DropdownContext) || {};
+  const handleClick = useCallback(
+    (e: Event | React.SyntheticEvent<Element, Event>) => {
+      toggle(!show, e);
+    },
+    [show, toggle],
+  );
+
+  const props: UseDropdownToggleProps = {
+    id,
+    ref: setToggle || noop,
+    onClick: handleClick,
+    'aria-expanded': !!show,
+  };
+
+  // This is maybe better down in an effect, but
+  // the component is going to update anyway when the menu element
+  // is set so might return new props.
+  if (menuElement && isRoleMenu(menuElement)) {
+    props['aria-haspopup'] = true;
+  }
+
+  return [props, { show, toggle }];
+}
+
+export interface DropdownToggleProps {
+  /**
+   * A render prop that returns a Toggle element. The `props`
+   * argument should spread through to **a component that can accept a ref**. Use
+   * the `onToggle` argument to toggle the menu open or closed
+   *
+   * @type {Function ({
+   *   props: {
+   *     ref: (?HTMLElement) => void,
+   *     aria-haspopup: true
+   *     aria-expanded: boolean
+   *   },
+   *   meta: {
+   *     show: boolean,
+   *     toggle: (show: boolean) => void,
+   *   }
+   * }) => React.Element}
+   */
+  children: (
+    props: UseDropdownToggleProps,
+    meta: UseDropdownToggleMetadata,
+  ) => React.ReactNode;
+}
+
+/**
+ * Also exported as `<Dropdown.Toggle>` from `Dropdown`.
+ *
+ * @displayName DropdownToggle
+ * @memberOf Dropdown
+ */
+function DropdownToggle({ children }: DropdownToggleProps) {
+  const [props, meta] = useDropdownToggle();
+
+  return <>{children(props, meta)}</>;
+}
+
+DropdownToggle.displayName = 'DropdownToggle';
+
+/** @component */
+export default DropdownToggle;
diff --git a/ui/ImperativeTransition.tsx b/ui/ImperativeTransition.tsx
new file mode 100644
index 0000000..4c75b00
--- /dev/null
+++ b/ui/ImperativeTransition.tsx
@@ -0,0 +1,134 @@
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
+import React, { useRef, cloneElement, useState } from 'react';
+import { TransitionComponent, TransitionProps } from './types';
+import NoopTransition from './NoopTransition';
+import RTGTransition from './RTGTransition';
+
+export interface TransitionFunctionOptions {
+  in: boolean;
+  element: HTMLElement;
+  initial: boolean;
+  isStale: () => boolean;
+}
+
+export type TransitionHandler = (
+  options: TransitionFunctionOptions,
+) => void | Promise<void>;
+
+export interface UseTransitionOptions {
+  in: boolean;
+  onTransition: TransitionHandler;
+  initial?: boolean;
+}
+
+export function useTransition({
+  in: inProp,
+  onTransition,
+}: UseTransitionOptions) {
+  const ref = useRef<HTMLElement>(null);
+  const isInitialRef = useRef(true);
+  const handleTransition = useEventCallback(onTransition);
+
+  useIsomorphicEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    let stale = false;
+
+    handleTransition({
+      in: inProp,
+      element: ref.current!,
+      initial: isInitialRef.current,
+      isStale: () => stale,
+    });
+    return () => {
+      stale = true;
+    };
+  }, [inProp, handleTransition]);
+
+  useIsomorphicEffect(() => {
+    isInitialRef.current = false;
+    // this is for strict mode
+    return () => {
+      isInitialRef.current = true;
+    };
+  }, []);
+
+  return ref;
+}
+
+export interface ImperativeTransitionProps extends TransitionProps {
+  transition: TransitionHandler;
+  // eslint-disable-next-line react/no-unused-prop-types
+  appear: true;
+  // eslint-disable-next-line react/no-unused-prop-types
+  mountOnEnter: true;
+  // eslint-disable-next-line react/no-unused-prop-types
+  unmountOnExit: true;
+}
+
+/**
+ * Adapts an imperative transition function to a subset of the RTG `<Transition>` component API.
+ *
+ * ImperativeTransition does not support mounting options or `appear` at the moment, meaning
+ * that it always acts like: `mountOnEnter={true} unmountOnExit={true} appear={true}`
+ */
+export default function ImperativeTransition({
+  children,
+  in: inProp,
+  onExited,
+  onEntered,
+  transition,
+}: ImperativeTransitionProps) {
+  const [exited, setExited] = useState(!inProp);
+
+  // TODO: I think this needs to be in an effect
+  if (inProp && exited) {
+    setExited(false);
+  }
+
+  const ref = useTransition({
+    in: !!inProp,
+    onTransition: (options) => {
+      const onFinish = () => {
+        if (options.isStale()) return;
+
+        if (options.in) {
+          onEntered?.(options.element, options.initial);
+        } else {
+          setExited(true);
+          onExited?.(options.element);
+        }
+      };
+
+      Promise.resolve(transition(options)).then(onFinish, (error) => {
+        if (!options.in) setExited(true);
+        throw error;
+      });
+    },
+  });
+
+  const combinedRef = useMergedRefs(ref, (children as any).ref);
+
+  return exited && !inProp
+    ? null
+    : cloneElement(children, { ref: combinedRef });
+}
+
+export function renderTransition(
+  component: TransitionComponent | undefined,
+  runTransition: TransitionHandler | undefined,
+  props: TransitionProps & Omit<ImperativeTransitionProps, 'transition'>,
+) {
+  if (component) {
+    return <RTGTransition {...props} component={component} />;
+  }
+  if (runTransition) {
+    return <ImperativeTransition {...props} transition={runTransition} />;
+  }
+
+  return <NoopTransition {...props} />;
+}
diff --git a/ui/Modal.tsx b/ui/Modal.tsx
new file mode 100644
index 0000000..0f9b7c9
--- /dev/null
+++ b/ui/Modal.tsx
@@ -0,0 +1,493 @@
+/* eslint-disable @typescript-eslint/no-use-before-define, react/prop-types */
+
+import activeElement from 'dom-helpers/activeElement';
+import contains from 'dom-helpers/contains';
+import canUseDOM from 'dom-helpers/canUseDOM';
+import listen from 'dom-helpers/listen';
+import {
+  useState,
+  useRef,
+  useCallback,
+  useImperativeHandle,
+  forwardRef,
+  useEffect,
+} from 'react';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import useMounted from '@restart/hooks/useMounted';
+import useWillUnmount from '@restart/hooks/useWillUnmount';
+
+import usePrevious from '@restart/hooks/usePrevious';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import ModalManager from './ModalManager';
+import useWaitForDOMRef, { DOMContainer } from './useWaitForDOMRef';
+import { TransitionCallbacks } from './types';
+import useWindow from './useWindow';
+import { renderTransition, TransitionHandler } from './ImperativeTransition';
+import { isEscKey } from './utils';
+
+let manager: ModalManager;
+
+export interface ModalTransitionProps extends TransitionCallbacks {
+  in: boolean;
+  appear?: boolean;
+  unmountOnExit?: boolean;
+  children: React.ReactElement;
+}
+
+export type ModalTransitionComponent =
+  React.ComponentType<ModalTransitionProps>;
+
+export interface RenderModalDialogProps {
+  style: React.CSSProperties | undefined;
+  className: string | undefined;
+  tabIndex: number;
+  role: string;
+  ref: React.RefCallback<Element>;
+  'aria-modal': boolean | undefined;
+}
+
+export interface RenderModalBackdropProps {
+  ref: React.RefCallback<Element>;
+  onClick: (event: React.SyntheticEvent) => void;
+}
+
+/*
+  Modal props are split into a version with and without index signature so that you can fully use them in another projects
+  This is due to Typescript not playing well with index signatures e.g. when using Omit
+*/
+export interface BaseModalProps extends TransitionCallbacks {
+  children?: React.ReactElement;
+  role?: string;
+  style?: React.CSSProperties;
+  className?: string;
+
+  /**
+   * Set the visibility of the Modal
+   */
+  show?: boolean;
+  /**
+   * A DOM element, a `ref` to an element, or function that returns either. The Modal is appended to it's `container` element.
+   *
+   */
+  container?: DOMContainer;
+  /**
+   * A callback fired when the Modal is opening.
+   */
+  onShow?: () => void;
+  /**
+   * A callback fired when either the backdrop is clicked, or the escape key is pressed.
+   *
+   * The `onHide` callback only signals intent from the Modal,
+   * you must actually set the `show` prop to `false` for the Modal to close.
+   */
+  onHide?: () => void;
+
+  /**
+   * A ModalManager instance used to track and manage the state of open
+   * Modals. Useful when customizing how modals interact within a container
+   */
+  manager?: ModalManager;
+
+  /**
+   * Include a backdrop component. A `static`backdrop
+   * will not trigger a Modal onHide when clicked.
+   */
+  backdrop?: true | false | 'static';
+
+  /**
+   * A function that returns the dialog component. Useful for custom
+   * rendering. **Note:** the component should make sure to apply the provided ref.
+   *
+   * ```js static
+   * renderDialog={props => <MyDialog {...props} />}
+   * ```
+   */
+  renderDialog?: (props: RenderModalDialogProps) => React.ReactNode;
+  /**
+   * A function that returns a backdrop component. Useful for custom
+   * backdrop rendering.
+   *
+   * ```js
+   *  renderBackdrop={props => <MyBackdrop {...props} />}
+   * ```
+   */
+  renderBackdrop?: (props: RenderModalBackdropProps) => React.ReactNode;
+  /**
+   * A callback fired when the escape key, if specified in `keyboard`, is pressed.
+   *
+   * If preventDefault() is called on the keyboard event, closing the modal will be cancelled.
+   */
+  onEscapeKeyDown?: (e: KeyboardEvent) => void;
+  /**
+   * A callback fired when the backdrop, if specified, is clicked.
+   */
+  onBackdropClick?: (e: React.SyntheticEvent) => void;
+
+  /**
+   * Close the modal when escape key is pressed
+   */
+  keyboard?: boolean;
+
+  /**
+   * A `react-transition-group` `<Transition/>` component used
+   * to control animations for the dialog component.
+   */
+  transition?: ModalTransitionComponent;
+
+  /**
+   * A transition handler, called with the `show` state and dialog element.
+   * Should return a promise when the transition is complete
+   */
+  runTransition?: TransitionHandler;
+
+  /**
+   * A `react-transition-group` `<Transition/>` component used
+   * to control animations for the backdrop components.
+   */
+  backdropTransition?: ModalTransitionComponent;
+
+  /**
+   * A transition handler, called with the `show` state and backdrop element.
+   * Should return a promise when the transition is complete
+   */
+  runBackdropTransition?: TransitionHandler;
+
+  /**
+   * When `true` The modal will automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes. This also
+   * works correctly with any Modal children that have the `autoFocus` prop.
+   *
+   * Generally this should never be set to `false` as it makes the Modal less
+   * accessible to assistive technologies, like screen readers.
+   */
+  autoFocus?: boolean;
+  /**
+   * When `true` The modal will prevent focus from leaving the Modal while open.
+   *
+   * Generally this should never be set to `false` as it makes the Modal less
+   * accessible to assistive technologies, like screen readers.
+   */
+  enforceFocus?: boolean;
+
+  /**
+   * When `true` The modal will restore focus to previously focused element once
+   * modal is hidden
+   */
+  restoreFocus?: boolean;
+
+  /**
+   * Options passed to focus function when `restoreFocus` is set to `true`
+   *
+   * @link  https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Parameters
+   */
+  restoreFocusOptions?: {
+    preventScroll: boolean;
+  };
+}
+
+export interface ModalProps extends BaseModalProps {
+  [other: string]: any;
+}
+
+function getManager(window?: Window) {
+  if (!manager) manager = new ModalManager({ ownerDocument: window?.document });
+  return manager;
+}
+
+function useModalManager(provided?: ModalManager) {
+  const window = useWindow();
+  const modalManager = provided || getManager(window);
+
+  const modal = useRef({
+    dialog: null as any as HTMLElement,
+    backdrop: null as any as HTMLElement,
+  });
+
+  return Object.assign(modal.current, {
+    add: () => modalManager.add(modal.current),
+
+    remove: () => modalManager.remove(modal.current),
+
+    isTopModal: () => modalManager.isTopModal(modal.current),
+
+    setDialogRef: useCallback((ref: HTMLElement | null) => {
+      modal.current.dialog = ref!;
+    }, []),
+
+    setBackdropRef: useCallback((ref: HTMLElement | null) => {
+      modal.current.backdrop = ref!;
+    }, []),
+  });
+}
+
+export interface ModalHandle {
+  dialog: HTMLElement | null;
+  backdrop: HTMLElement | null;
+  isTopModal: () => boolean;
+}
+
+const Modal: React.ForwardRefExoticComponent<
+  ModalProps & React.RefAttributes<ModalHandle>
+> = forwardRef(
+  (
+    {
+      show = false,
+      role = 'dialog',
+      className,
+      style,
+      children,
+      backdrop = true,
+      keyboard = true,
+      onBackdropClick,
+      onEscapeKeyDown,
+      transition,
+      runTransition,
+
+      backdropTransition,
+      runBackdropTransition,
+
+      autoFocus = true,
+      enforceFocus = true,
+      restoreFocus = true,
+      restoreFocusOptions,
+      renderDialog,
+      renderBackdrop = (props: RenderModalBackdropProps) => <div {...props} />,
+      manager: providedManager,
+      container: containerRef,
+      onShow,
+      onHide = () => {},
+
+      onExit,
+      onExited,
+      onExiting,
+      onEnter,
+      onEntering,
+      onEntered,
+
+      ...rest
+    }: ModalProps,
+    ref: React.Ref<ModalHandle>,
+  ) => {
+    const ownerWindow = useWindow();
+    const container = useWaitForDOMRef(containerRef);
+    const modal = useModalManager(providedManager);
+
+    const isMounted = useMounted();
+    const prevShow = usePrevious(show);
+    const [exited, setExited] = useState(!show);
+    const lastFocusRef = useRef<HTMLElement | null>(null);
+
+    useImperativeHandle(ref, () => modal, [modal]);
+
+    if (canUseDOM && !prevShow && show) {
+      lastFocusRef.current = activeElement(
+        ownerWindow?.document,
+      ) as HTMLElement | null;
+    }
+
+    // TODO: I think this needs to be in an effect
+    if (show && exited) {
+      setExited(false);
+    }
+
+    const handleShow = useEventCallback(() => {
+      modal.add();
+
+      removeKeydownListenerRef.current = listen(
+        document as any,
+        'keydown',
+        handleDocumentKeyDown,
+      );
+
+      removeFocusListenerRef.current = listen(
+        document as any,
+        'focus',
+        // the timeout is necessary b/c this will run before the new modal is mounted
+        // and so steals focus from it
+        () => setTimeout(handleEnforceFocus),
+        true,
+      );
+
+      if (onShow) {
+        onShow();
+      }
+
+      // autofocus after onShow to not trigger a focus event for previous
+      // modals before this one is shown.
+      if (autoFocus) {
+        const currentActiveElement = activeElement(
+          modal.dialog?.ownerDocument ?? ownerWindow?.document,
+        ) as HTMLElement | null;
+
+        if (
+          modal.dialog &&
+          currentActiveElement &&
+          !contains(modal.dialog, currentActiveElement)
+        ) {
+          lastFocusRef.current = currentActiveElement;
+          modal.dialog.focus();
+        }
+      }
+    });
+
+    const handleHide = useEventCallback(() => {
+      modal.remove();
+
+      removeKeydownListenerRef.current?.();
+      removeFocusListenerRef.current?.();
+
+      if (restoreFocus) {
+        // Support: <=IE11 doesn't support `focus()` on svg elements (RB: #917)
+        lastFocusRef.current?.focus?.(restoreFocusOptions);
+        lastFocusRef.current = null;
+      }
+    });
+
+    // TODO: try and combine these effects: https://github.com/react-bootstrap/react-overlays/pull/794#discussion_r409954120
+
+    // Show logic when:
+    //  - show is `true` _and_ `container` has resolved
+    useEffect(() => {
+      if (!show || !container) return;
+
+      handleShow();
+    }, [show, container, /* should never change: */ handleShow]);
+
+    // Hide cleanup logic when:
+    //  - `exited` switches to true
+    //  - component unmounts;
+    useEffect(() => {
+      if (!exited) return;
+
+      handleHide();
+    }, [exited, handleHide]);
+
+    useWillUnmount(() => {
+      handleHide();
+    });
+
+    // --------------------------------
+
+    const handleEnforceFocus = useEventCallback(() => {
+      if (!enforceFocus || !isMounted() || !modal.isTopModal()) {
+        return;
+      }
+
+      const currentActiveElement = activeElement(ownerWindow?.document);
+
+      if (
+        modal.dialog &&
+        currentActiveElement &&
+        !contains(modal.dialog, currentActiveElement)
+      ) {
+        modal.dialog.focus();
+      }
+    });
+
+    const handleBackdropClick = useEventCallback((e: React.SyntheticEvent) => {
+      if (e.target !== e.currentTarget) {
+        return;
+      }
+
+      onBackdropClick?.(e);
+
+      if (backdrop === true) {
+        onHide();
+      }
+    });
+
+    const handleDocumentKeyDown = useEventCallback((e: KeyboardEvent) => {
+      if (keyboard && isEscKey(e) && modal.isTopModal()) {
+        onEscapeKeyDown?.(e);
+
+        if (!e.defaultPrevented) {
+          onHide();
+        }
+      }
+    });
+
+    const removeFocusListenerRef = useRef<ReturnType<typeof listen> | null>();
+    const removeKeydownListenerRef = useRef<ReturnType<typeof listen> | null>();
+
+    const handleHidden: TransitionCallbacks['onExited'] = (...args) => {
+      setExited(true);
+      onExited?.(...args);
+    };
+
+    if (!container) {
+      return null;
+    }
+
+    const dialogProps = {
+      role,
+      ref: modal.setDialogRef,
+      // apparently only works on the dialog role element
+      'aria-modal': role === 'dialog' ? true : undefined,
+      ...rest,
+      style,
+      className,
+      tabIndex: -1,
+    };
+
+    let dialog = renderDialog ? (
+      renderDialog(dialogProps)
+    ) : (
+      <div {...dialogProps}>
+        {React.cloneElement(children!, { role: 'document' })}
+      </div>
+    );
+
+    dialog = renderTransition(transition, runTransition, {
+      unmountOnExit: true,
+      mountOnEnter: true,
+      appear: true,
+      in: !!show,
+      onExit,
+      onExiting,
+      onExited: handleHidden,
+      onEnter,
+      onEntering,
+      onEntered,
+      children: dialog as React.ReactElement,
+    });
+
+    let backdropElement = null;
+    if (backdrop) {
+      backdropElement = renderBackdrop({
+        ref: modal.setBackdropRef,
+        onClick: handleBackdropClick,
+      });
+
+      backdropElement = renderTransition(
+        backdropTransition,
+        runBackdropTransition,
+        {
+          in: !!show,
+          appear: true,
+          mountOnEnter: true,
+          unmountOnExit: true,
+          children: backdropElement as React.ReactElement,
+        },
+      );
+    }
+
+    return (
+      <>
+        {ReactDOM.createPortal(
+          <>
+            {backdropElement}
+            {dialog}
+          </>,
+          container,
+        )}
+      </>
+    );
+  },
+);
+
+Modal.displayName = 'Modal';
+
+export default Object.assign(Modal, {
+  Manager: ModalManager,
+});
diff --git a/ui/ModalManager.ts b/ui/ModalManager.ts
new file mode 100644
index 0000000..fbab930
--- /dev/null
+++ b/ui/ModalManager.ts
@@ -0,0 +1,153 @@
+import css from 'dom-helpers/css';
+import { dataAttr } from './DataKey';
+import getBodyScrollbarWidth from './getScrollbarWidth';
+
+export interface ModalInstance {
+  dialog: Element;
+  backdrop: Element;
+}
+
+export interface ModalManagerOptions {
+  ownerDocument?: Document;
+  handleContainerOverflow?: boolean;
+  isRTL?: boolean;
+}
+
+export type ContainerState = {
+  scrollBarWidth: number;
+  style: Record<string, any>;
+  [key: string]: any;
+};
+
+export const OPEN_DATA_ATTRIBUTE = dataAttr('modal-open');
+
+/**
+ * Manages a stack of Modals as well as ensuring
+ * body scrolling is is disabled and padding accounted for
+ */
+class ModalManager {
+  readonly handleContainerOverflow: boolean;
+
+  readonly isRTL: boolean;
+
+  readonly modals: ModalInstance[];
+
+  protected state!: ContainerState;
+
+  protected ownerDocument: Document | undefined;
+
+  constructor({
+    ownerDocument,
+    handleContainerOverflow = true,
+    isRTL = false,
+  }: ModalManagerOptions = {}) {
+    this.handleContainerOverflow = handleContainerOverflow;
+    this.isRTL = isRTL;
+    this.modals = [];
+    this.ownerDocument = ownerDocument;
+  }
+
+  getScrollbarWidth() {
+    return getBodyScrollbarWidth(this.ownerDocument);
+  }
+
+  getElement() {
+    return (this.ownerDocument || document).body;
+  }
+
+  setModalAttributes(_modal: ModalInstance) {
+    // For overriding
+  }
+
+  removeModalAttributes(_modal: ModalInstance) {
+    // For overriding
+  }
+
+  setContainerStyle(containerState: ContainerState) {
+    const style: Partial<CSSStyleDeclaration> = { overflow: 'hidden' };
+
+    // we are only interested in the actual `style` here
+    // because we will override it
+    const paddingProp = this.isRTL ? 'paddingLeft' : 'paddingRight';
+    const container = this.getElement();
+
+    containerState.style = {
+      overflow: container.style.overflow,
+      [paddingProp]: container.style[paddingProp],
+    };
+
+    if (containerState.scrollBarWidth) {
+      // use computed style, here to get the real padding
+      // to add our scrollbar width
+      style[paddingProp] = `${
+        parseInt(css(container, paddingProp) || '0', 10) +
+        containerState.scrollBarWidth
+      }px`;
+    }
+    container.setAttribute(OPEN_DATA_ATTRIBUTE, '');
+
+    css(container, style as any);
+  }
+
+  reset() {
+    [...this.modals].forEach((m) => this.remove(m));
+  }
+
+  removeContainerStyle(containerState: ContainerState) {
+    const container = this.getElement();
+    container.removeAttribute(OPEN_DATA_ATTRIBUTE);
+    Object.assign(container.style, containerState.style);
+  }
+
+  add(modal: ModalInstance) {
+    let modalIdx = this.modals.indexOf(modal);
+
+    if (modalIdx !== -1) {
+      return modalIdx;
+    }
+
+    modalIdx = this.modals.length;
+    this.modals.push(modal);
+    this.setModalAttributes(modal);
+    if (modalIdx !== 0) {
+      return modalIdx;
+    }
+
+    this.state = {
+      scrollBarWidth: this.getScrollbarWidth(),
+      style: {},
+    };
+
+    if (this.handleContainerOverflow) {
+      this.setContainerStyle(this.state);
+    }
+
+    return modalIdx;
+  }
+
+  remove(modal: ModalInstance) {
+    const modalIdx = this.modals.indexOf(modal);
+
+    if (modalIdx === -1) {
+      return;
+    }
+
+    this.modals.splice(modalIdx, 1);
+
+    // if that was the last modal in a container,
+    // clean up the container
+    if (!this.modals.length && this.handleContainerOverflow) {
+      this.removeContainerStyle(this.state);
+    }
+
+    this.removeModalAttributes(modal);
+  }
+
+  isTopModal(modal: ModalInstance) {
+    return (
+      !!this.modals.length && this.modals[this.modals.length - 1] === modal
+    );
+  }
+}
+
+export default ModalManager;
diff --git a/ui/Nav.tsx b/ui/Nav.tsx
new file mode 100644
index 0000000..895d0b0
--- /dev/null
+++ b/ui/Nav.tsx
@@ -0,0 +1,178 @@
+import qsa from 'dom-helpers/querySelectorAll';
+import * as React from 'react';
+import { useContext, useEffect, useRef } from 'react';
+import useForceUpdate from '@restart/hooks/useForceUpdate';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import NavContext from './NavContext';
+import SelectableContext, { makeEventKey } from './SelectableContext';
+import TabContext from './TabContext';
+import {
+  EventKey,
+  DynamicRefForwardingComponent,
+  SelectCallback,
+} from './types';
+import { dataAttr, dataProp } from './DataKey';
+import NavItem, { UseNavItemOptions, NavItemProps } from './NavItem';
+
+export type { UseNavItemOptions, NavItemProps };
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+export interface NavProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+  /**
+   * Key for the currently active NavItem.
+   */
+  activeKey?: EventKey;
+
+  /**
+   * Element used to render the component.
+   */
+  as?: React.ElementType;
+
+  /**
+   * A callback fired when a NavItem has been selected.
+   */
+  onSelect?: SelectCallback;
+}
+
+const EVENT_KEY_ATTR = dataAttr('event-key');
+
+const Nav: DynamicRefForwardingComponent<'div', NavProps> = React.forwardRef<
+  HTMLElement,
+  NavProps
+>(
+  (
+    {
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      onSelect,
+      activeKey,
+      role,
+      onKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    // A ref and forceUpdate for refocus, b/c we only want to trigger when needed
+    // and don't want to reset the set in the effect
+    const forceUpdate = useForceUpdate();
+    const needsRefocusRef = useRef(false);
+
+    const parentOnSelect = useContext(SelectableContext);
+    const tabContext = useContext(TabContext);
+
+    let getControlledId, getControllerId;
+
+    if (tabContext) {
+      role = role || 'tablist';
+      activeKey = tabContext.activeKey;
+      // TODO: do we need to duplicate these?
+      getControlledId = tabContext.getControlledId;
+      getControllerId = tabContext.getControllerId;
+    }
+
+    const listNode = useRef<HTMLElement>(null);
+
+    const getNextActiveTab = (offset: number) => {
+      const currentListNode = listNode.current;
+      if (!currentListNode) return null;
+
+      const items = qsa(
+        currentListNode,
+        `[${EVENT_KEY_ATTR}]:not([aria-disabled=true])`,
+      );
+
+      const activeChild = currentListNode.querySelector<HTMLElement>(
+        '[aria-selected=true]',
+      );
+      if (!activeChild || activeChild !== document.activeElement) return null;
+
+      const index = items.indexOf(activeChild);
+      if (index === -1) return null;
+
+      let nextIndex = index + offset;
+      if (nextIndex >= items.length) nextIndex = 0;
+      if (nextIndex < 0) nextIndex = items.length - 1;
+      return items[nextIndex];
+    };
+
+    const handleSelect = (key: string | null, event: React.SyntheticEvent) => {
+      if (key == null) return;
+      onSelect?.(key, event);
+      parentOnSelect?.(key, event);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+      onKeyDown?.(event);
+
+      if (!tabContext) {
+        return;
+      }
+
+      let nextActiveChild;
+      switch (event.key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          nextActiveChild = getNextActiveTab(-1);
+          break;
+        case 'ArrowRight':
+        case 'ArrowDown':
+          nextActiveChild = getNextActiveTab(1);
+          break;
+        default:
+          return;
+      }
+      if (!nextActiveChild) return;
+
+      event.preventDefault();
+
+      handleSelect(
+        nextActiveChild.dataset[dataProp('EventKey')] || null,
+        event,
+      );
+
+      needsRefocusRef.current = true;
+      forceUpdate();
+    };
+
+    useEffect(() => {
+      if (listNode.current && needsRefocusRef.current) {
+        const activeChild = listNode.current.querySelector<HTMLElement>(
+          `[${EVENT_KEY_ATTR}][aria-selected=true]`,
+        );
+
+        activeChild?.focus();
+      }
+
+      needsRefocusRef.current = false;
+    });
+
+    const mergedRef = useMergedRefs(ref, listNode);
+
+    return (
+      <SelectableContext.Provider value={handleSelect}>
+        <NavContext.Provider
+          value={{
+            role, // used by NavLink to determine it's role
+            activeKey: makeEventKey(activeKey),
+            getControlledId: getControlledId || noop,
+            getControllerId: getControllerId || noop,
+          }}
+        >
+          <Component
+            {...props}
+            onKeyDown={handleKeyDown}
+            ref={mergedRef}
+            role={role}
+          />
+        </NavContext.Provider>
+      </SelectableContext.Provider>
+    );
+  },
+);
+
+Nav.displayName = 'Nav';
+
+export default Object.assign(Nav, { Item: NavItem });
diff --git a/ui/NavContext.tsx b/ui/NavContext.tsx
new file mode 100644
index 0000000..eceae8c
--- /dev/null
+++ b/ui/NavContext.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { EventKey } from './types';
+
+interface NavContextType {
+  role?: string; // used by NavItem to determine it's role
+  activeKey: EventKey | null;
+  getControlledId: (key: EventKey | null) => string;
+  getControllerId: (key: EventKey | null) => string;
+}
+
+const NavContext = React.createContext<NavContextType | null>(null);
+NavContext.displayName = 'NavContext';
+
+export default NavContext;
diff --git a/ui/NavItem.tsx b/ui/NavItem.tsx
new file mode 100644
index 0000000..58b1128
--- /dev/null
+++ b/ui/NavItem.tsx
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { useContext } from 'react';
+import useEventCallback from '@restart/hooks/useEventCallback';
+
+import NavContext from './NavContext';
+import SelectableContext, { makeEventKey } from './SelectableContext';
+import { EventKey, DynamicRefForwardingComponent } from './types';
+import Button from './Button';
+import { dataAttr } from './DataKey';
+import TabContext from './TabContext';
+
+export interface NavItemProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Highlight the NavItem as active.
+   */
+  active?: boolean;
+
+  /**
+   * Element used to render the component.
+   */
+  as?: React.ElementType;
+
+  /**
+   * Disable the NavItem, making it unselectable.
+   */
+  disabled?: boolean;
+
+  /**
+   * Value passed to the `onSelect` handler, useful for identifying the selected NavItem.
+   */
+  eventKey?: EventKey;
+
+  /**
+   * HTML `href` attribute corresponding to `a.href`.
+   */
+  href?: string;
+}
+
+export interface UseNavItemOptions {
+  key?: string | null;
+  onClick?: React.MouseEventHandler;
+  active?: boolean;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+}
+
+export function useNavItem({
+  key,
+  onClick,
+  active,
+  id,
+  role,
+  disabled,
+}: UseNavItemOptions) {
+  const parentOnSelect = useContext(SelectableContext);
+  const navContext = useContext(NavContext);
+  const tabContext = useContext(TabContext);
+
+  let isActive = active;
+  const props = { role } as any;
+
+  if (navContext) {
+    if (!role && navContext.role === 'tablist') props.role = 'tab';
+
+    const contextControllerId = navContext.getControllerId(key ?? null);
+    const contextControlledId = navContext.getControlledId(key ?? null);
+
+    // @ts-ignore
+    props[dataAttr('event-key')] = key;
+
+    props.id = contextControllerId || id;
+
+    isActive =
+      active == null && key != null ? navContext.activeKey === key : active;
+
+    /**
+     * Simplified scenario for `mountOnEnter`.
+     *
+     * While it would make sense to keep 'aria-controls' for tabs that have been mounted at least
+     * once, it would also complicate the code quite a bit, for very little gain.
+     * The following implementation is probably good enough.
+     *
+     * @see https://github.com/react-restart/ui/pull/40#issuecomment-1009971561
+     */
+    if (isActive || (!tabContext?.unmountOnExit && !tabContext?.mountOnEnter))
+      props['aria-controls'] = contextControlledId;
+  }
+
+  if (props.role === 'tab') {
+    props['aria-selected'] = isActive;
+
+    if (!isActive) {
+      props.tabIndex = -1;
+    }
+
+    if (disabled) {
+      props.tabIndex = -1;
+      props['aria-disabled'] = true;
+    }
+  }
+
+  props.onClick = useEventCallback((e: React.MouseEvent) => {
+    if (disabled) return;
+
+    onClick?.(e);
+
+    if (key == null) {
+      return;
+    }
+
+    if (parentOnSelect && !e.isPropagationStopped()) {
+      parentOnSelect(key, e);
+    }
+  });
+
+  return [props, { isActive }] as const;
+}
+
+const NavItem: DynamicRefForwardingComponent<typeof Button, NavItemProps> =
+  React.forwardRef<HTMLElement, NavItemProps>(
+    ({ as: Component = Button, active, eventKey, ...options }, ref) => {
+      const [props, meta] = useNavItem({
+        key: makeEventKey(eventKey, options.href),
+        active,
+        ...options,
+      });
+
+      // @ts-ignore
+      props[dataAttr('active')] = meta.isActive;
+
+      return <Component {...options} {...props} ref={ref} />;
+    },
+  );
+
+NavItem.displayName = 'NavItem';
+
+export default NavItem;
diff --git a/ui/NoopTransition.tsx b/ui/NoopTransition.tsx
new file mode 100644
index 0000000..af51e43
--- /dev/null
+++ b/ui/NoopTransition.tsx
@@ -0,0 +1,40 @@
+import useEventCallback from '@restart/hooks/useEventCallback';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import { cloneElement, useEffect, useRef } from 'react';
+import { TransitionProps } from './types';
+
+function NoopTransition({
+  children,
+  in: inProp,
+  onExited,
+  mountOnEnter,
+  unmountOnExit,
+}: TransitionProps) {
+  const ref = useRef(null);
+  const hasEnteredRef = useRef(inProp);
+  const handleExited = useEventCallback(onExited);
+
+  useEffect(() => {
+    if (inProp) hasEnteredRef.current = true;
+    else {
+      handleExited(ref.current!);
+    }
+  }, [inProp, handleExited]);
+
+  const combinedRef = useMergedRefs(ref, (children as any).ref);
+
+  const child = cloneElement(children, { ref: combinedRef });
+
+  if (inProp) return child;
+
+  if (unmountOnExit) {
+    return null;
+  }
+  if (!hasEnteredRef.current && mountOnEnter) {
+    return null;
+  }
+
+  return child;
+}
+
+export default NoopTransition;
diff --git a/ui/Overlay.tsx b/ui/Overlay.tsx
new file mode 100644
index 0000000..1e7ffb2
--- /dev/null
+++ b/ui/Overlay.tsx
@@ -0,0 +1,231 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import useCallbackRef from '@restart/hooks/useCallbackRef';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import { useState } from 'react';
+import usePopper, {
+  Offset,
+  Placement,
+  UsePopperOptions,
+  UsePopperState,
+  VirtualElement,
+} from './usePopper';
+import useRootClose, { RootCloseOptions } from './useRootClose';
+import useWaitForDOMRef, { DOMContainer } from './useWaitForDOMRef';
+import { TransitionCallbacks, TransitionComponent } from './types';
+import mergeOptionsWithPopperConfig from './mergeOptionsWithPopperConfig';
+import { renderTransition, TransitionHandler } from './ImperativeTransition';
+
+export interface OverlayArrowProps extends Record<string, any> {
+  ref: React.RefCallback<HTMLElement>;
+  style: React.CSSProperties;
+}
+
+export interface OverlayMetadata {
+  show: boolean;
+  placement: Placement | undefined;
+  popper: UsePopperState | null;
+  arrowProps: Partial<OverlayArrowProps>;
+}
+
+export interface OverlayInjectedProps extends Record<string, any> {
+  ref: React.RefCallback<HTMLElement>;
+  style: React.CSSProperties;
+  'aria-labelledby'?: string;
+}
+
+export interface OverlayProps extends TransitionCallbacks {
+  /**
+   * Enables the Popper.js `flip` modifier, allowing the Overlay to
+   * automatically adjust it's placement in case of overlap with the viewport or toggle.
+   * Refer to the [flip docs](https://popper.js.org/popper-documentation.html#modifiers..flip.enabled) for more info
+   */
+  flip?: boolean;
+
+  /** Specify where the overlay element is positioned in relation to the target element */
+  placement?: Placement;
+
+  /**
+   * Control offset of the overlay to the reference element.
+   * A convenience shortcut to setting `popperConfig.modfiers.offset`
+   */
+  offset?: Offset;
+
+  /**
+   * Control how much space there is between the edge of the boundary element and overlay.
+   * A convenience shortcut to setting `popperConfig.modfiers.preventOverflow.padding`
+   */
+  containerPadding?: number;
+
+  /**
+   * A set of popper options and props passed directly to react-popper's Popper component.
+   */
+  popperConfig?: Omit<UsePopperOptions, 'placement'>;
+
+  /**
+   * A DOM Element, [Virtual Element](https://popper.js.org/docs/v2/virtual-elements/), Ref to an element, or
+   * function that returns either. The `target` element is where the overlay is positioned relative to.
+   */
+  container?: DOMContainer;
+
+  /**
+   * A DOM Element, Ref to an element, or function that returns either. The `target` element is where
+   * the overlay is positioned relative to.
+   */
+  target: DOMContainer<HTMLElement | VirtualElement>;
+
+  /**
+   * Set the visibility of the Overlay
+   */
+  show?: boolean;
+
+  /**
+   * A `react-transition-group` `<Transition/>` component
+   * used to animate the overlay as it changes visibility.
+   */
+  transition?: TransitionComponent;
+
+  /**
+   * A transition handler, called with the `show` state and overlay element.
+   * Should return a promise when the transition is complete
+   */
+  runTransition?: TransitionHandler;
+
+  /**
+   * A Callback fired by the Overlay when it wishes to be hidden.
+   *
+   * __required__ when `rootClose` is `true`.
+   *
+   * @type func
+   */
+  onHide?: (e: Event) => void;
+
+  /**
+   * Specify whether the overlay should trigger `onHide` when the user clicks outside the overlay
+   */
+  rootClose?: boolean;
+
+  /**
+   * Specify disabled for disable RootCloseWrapper
+   */
+  rootCloseDisabled?: boolean;
+
+  /**
+   * Specify event for toggling overlay
+   */
+  rootCloseEvent?: RootCloseOptions['clickTrigger'];
+
+  /**
+   * A render prop that returns an overlay element.
+   */
+  children: (
+    props: OverlayInjectedProps,
+    meta: OverlayMetadata,
+  ) => React.ReactNode;
+}
+
+/**
+ * Built on top of `Popper.js`, the overlay component is
+ * great for custom tooltip overlays.
+ */
+const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
+  (props, outerRef) => {
+    const {
+      flip,
+      offset,
+      placement,
+      containerPadding,
+      popperConfig = {},
+      transition: Transition,
+      runTransition,
+    } = props;
+
+    const [rootElement, attachRef] = useCallbackRef<HTMLElement>();
+    const [arrowElement, attachArrowRef] = useCallbackRef<Element>();
+    const mergedRef = useMergedRefs<HTMLElement | null>(attachRef, outerRef);
+
+    const container = useWaitForDOMRef(props.container);
+    const target = useWaitForDOMRef(props.target);
+
+    const [exited, setExited] = useState(!props.show);
+
+    const popper = usePopper(
+      target,
+      rootElement,
+      mergeOptionsWithPopperConfig({
+        placement,
+        enableEvents: !!props.show,
+        containerPadding: containerPadding || 5,
+        flip,
+        offset,
+        arrowElement,
+        popperConfig,
+      }),
+    );
+
+    // TODO: I think this needs to be in an effect
+    if (props.show && exited) {
+      setExited(false);
+    }
+
+    const handleHidden: TransitionCallbacks['onExited'] = (...args) => {
+      setExited(true);
+
+      if (props.onExited) {
+        props.onExited(...args);
+      }
+    };
+
+    // Don't un-render the overlay while it's transitioning out.
+    const mountOverlay = props.show || !exited;
+
+    useRootClose(rootElement, props.onHide!, {
+      disabled: !props.rootClose || props.rootCloseDisabled,
+      clickTrigger: props.rootCloseEvent,
+    });
+
+    if (!mountOverlay) {
+      // Don't bother showing anything if we don't have to.
+      return null;
+    }
+
+    const { onExit, onExiting, onEnter, onEntering, onEntered } = props;
+    let child = props.children(
+      {
+        ...popper.attributes.popper,
+        style: popper.styles.popper as any,
+        ref: mergedRef,
+      },
+      {
+        popper,
+        placement,
+        show: !!props.show,
+        arrowProps: {
+          ...popper.attributes.arrow,
+          style: popper.styles.arrow as any,
+          ref: attachArrowRef,
+        },
+      },
+    ) as React.ReactElement;
+
+    child = renderTransition(Transition, runTransition, {
+      in: !!props.show,
+      appear: true,
+      mountOnEnter: true,
+      unmountOnExit: true,
+      children: child,
+      onExit,
+      onExiting,
+      onExited: handleHidden,
+      onEnter,
+      onEntering,
+      onEntered,
+    });
+
+    return container ? ReactDOM.createPortal(child, container) : null;
+  },
+);
+
+Overlay.displayName = 'Overlay';
+
+export default Overlay;
diff --git a/ui/Portal.tsx b/ui/Portal.tsx
new file mode 100644
index 0000000..92a200f
--- /dev/null
+++ b/ui/Portal.tsx
@@ -0,0 +1,34 @@
+import ReactDOM from 'react-dom';
+
+import * as React from 'react';
+import useWaitForDOMRef, { DOMContainer } from './useWaitForDOMRef';
+
+export interface PortalProps {
+  children: React.ReactElement;
+
+  /**
+   * A DOM element, Ref to an element, or function that returns either. The `container` will have the Portal children
+   * appended to it.
+   */
+  container: DOMContainer;
+
+  /**
+   * Callback that is triggered when the portal content is rendered.
+   */
+  onRendered?: (element: any) => void;
+}
+
+/**
+ * @public
+ */
+const Portal = ({ container, children, onRendered }: PortalProps) => {
+  const resolvedContainer = useWaitForDOMRef(container, onRendered);
+
+  return resolvedContainer ? (
+    <>{ReactDOM.createPortal(children, resolvedContainer)}</>
+  ) : null;
+};
+
+Portal.displayName = 'Portal';
+
+export default Portal;
diff --git a/ui/RTGTransition.tsx b/ui/RTGTransition.tsx
new file mode 100644
index 0000000..4be781b
--- /dev/null
+++ b/ui/RTGTransition.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import useRTGTransitionProps, {
+  TransitionProps,
+} from './useRTGTransitionProps';
+
+export type RTGTransitionProps = TransitionProps & {
+  component: React.ElementType;
+};
+
+// Normalizes Transition callbacks when nodeRef is used.
+const RTGTransition = React.forwardRef<any, RTGTransitionProps>(
+  ({ component: Component, ...props }, ref) => {
+    const transitionProps = useRTGTransitionProps(props);
+
+    return <Component ref={ref} {...transitionProps} />;
+  },
+);
+
+export default RTGTransition;
diff --git a/ui/SelectableContext.tsx b/ui/SelectableContext.tsx
new file mode 100644
index 0000000..f25ebe9
--- /dev/null
+++ b/ui/SelectableContext.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { EventKey, SelectCallback } from './types';
+
+const SelectableContext = React.createContext<SelectCallback | null>(null);
+
+export const makeEventKey = (
+  eventKey?: EventKey | null,
+  href: string | null = null,
+): string | null => {
+  if (eventKey != null) return String(eventKey);
+  return href || null;
+};
+
+export default SelectableContext;
diff --git a/ui/TabContext.tsx b/ui/TabContext.tsx
new file mode 100644
index 0000000..e64809c
--- /dev/null
+++ b/ui/TabContext.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { EventKey, SelectCallback, TransitionComponent } from './types';
+
+export interface TabContextType {
+  onSelect: SelectCallback;
+  activeKey?: EventKey;
+  transition?: TransitionComponent;
+  mountOnEnter: boolean;
+  unmountOnExit: boolean;
+  getControlledId: (key: EventKey) => any;
+  getControllerId: (key: EventKey) => any;
+}
+
+const TabContext = React.createContext<TabContextType | null>(null);
+
+export default TabContext;
diff --git a/ui/TabPanel.tsx b/ui/TabPanel.tsx
new file mode 100644
index 0000000..d2af7bd
--- /dev/null
+++ b/ui/TabPanel.tsx
@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { useContext } from 'react';
+
+import TabContext from './TabContext';
+import SelectableContext, { makeEventKey } from './SelectableContext';
+import {
+  EventKey,
+  DynamicRefForwardingComponent,
+  TransitionCallbacks,
+  TransitionComponent,
+} from './types';
+import NoopTransition from './NoopTransition';
+
+export interface TabPanelProps
+  extends TransitionCallbacks,
+    React.HTMLAttributes<HTMLElement> {
+  /**
+   * Element used to render the component.
+   */
+  as?: React.ElementType;
+
+  /**
+   * A key that associates the `TabPanel` with it's controlling `NavLink`.
+   */
+  eventKey?: EventKey;
+
+  /**
+   * Toggles the active state of the TabPanel, this is generally controlled by `Tabs`.
+   */
+  active?: boolean;
+
+  /**
+   * Use animation when showing or hiding `<TabPanel>`s. Use a react-transition-group
+   * `<Transition/>` component.
+   */
+  transition?: TransitionComponent;
+
+  /**
+   * Wait until the first "enter" transition to mount the tab (add it to the DOM)
+   */
+  mountOnEnter?: boolean;
+
+  /**
+   * Unmount the tab (remove it from the DOM) when it is no longer visible
+   */
+  unmountOnExit?: boolean;
+}
+
+export interface TabPanelMetadata extends TransitionCallbacks {
+  eventKey?: EventKey;
+  isActive?: boolean;
+  transition?: TransitionComponent;
+  mountOnEnter?: boolean;
+  unmountOnExit?: boolean;
+}
+
+export function useTabPanel({
+  active,
+  eventKey,
+  mountOnEnter,
+  transition,
+  unmountOnExit,
+  role = 'tabpanel',
+  onEnter,
+  onEntering,
+  onEntered,
+  onExit,
+  onExiting,
+  onExited,
+  ...props
+}: TabPanelProps): [any, TabPanelMetadata] {
+  const context = useContext(TabContext);
+
+  if (!context)
+    return [
+      {
+        ...props,
+        role,
+      },
+      {
+        eventKey,
+        isActive: active,
+        mountOnEnter,
+        transition,
+        unmountOnExit,
+        onEnter,
+        onEntering,
+        onEntered,
+        onExit,
+        onExiting,
+        onExited,
+      },
+    ];
+
+  const { activeKey, getControlledId, getControllerId, ...rest } = context;
+  const key = makeEventKey(eventKey);
+
+  return [
+    {
+      ...props,
+      role,
+      id: getControlledId(eventKey!),
+      'aria-labelledby': getControllerId(eventKey!),
+    },
+    {
+      eventKey,
+      isActive:
+        active == null && key != null
+          ? makeEventKey(activeKey) === key
+          : active,
+      transition: transition || rest.transition,
+      mountOnEnter: mountOnEnter != null ? mountOnEnter : rest.mountOnEnter,
+      unmountOnExit: unmountOnExit != null ? unmountOnExit : rest.unmountOnExit,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+    },
+  ];
+}
+
+const TabPanel: DynamicRefForwardingComponent<'div', TabPanelProps> =
+  React.forwardRef<HTMLElement, TabPanelProps>(
+    // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+    ({ as: Component = 'div', ...props }, ref) => {
+      const [
+        tabPanelProps,
+        {
+          isActive,
+          onEnter,
+          onEntering,
+          onEntered,
+          onExit,
+          onExiting,
+          onExited,
+          mountOnEnter,
+          unmountOnExit,
+          transition: Transition = NoopTransition,
+        },
+      ] = useTabPanel(props);
+      // We provide an empty the TabContext so `<Nav>`s in `<TabPanel>`s don't
+      // conflict with the top level one.
+      return (
+        <TabContext.Provider value={null}>
+          <SelectableContext.Provider value={null}>
+            <Transition
+              in={isActive}
+              onEnter={onEnter}
+              onEntering={onEntering}
+              onEntered={onEntered}
+              onExit={onExit}
+              onExiting={onExiting}
+              onExited={onExited}
+              mountOnEnter={mountOnEnter}
+              unmountOnExit={unmountOnExit}
+            >
+              <Component
+                {...tabPanelProps}
+                ref={ref}
+                hidden={!isActive}
+                aria-hidden={!isActive}
+              />
+            </Transition>
+          </SelectableContext.Provider>
+        </TabContext.Provider>
+      );
+    },
+  );
+
+TabPanel.displayName = 'TabPanel';
+
+export default TabPanel;
diff --git a/ui/Tabs.tsx b/ui/Tabs.tsx
new file mode 100644
index 0000000..66d66ea
--- /dev/null
+++ b/ui/Tabs.tsx
@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { useSSRSafeId } from './ssr';
+
+import TabContext, { TabContextType } from './TabContext';
+import SelectableContext from './SelectableContext';
+import { EventKey, SelectCallback, TransitionComponent } from './types';
+import TabPanel, { TabPanelProps } from './TabPanel';
+
+export type { TabPanelProps };
+export interface TabsProps extends React.PropsWithChildren<unknown> {
+  id?: string;
+
+  /**
+   * Sets a default animation strategy for all children `<TabPanel>`s.
+   * Use a react-transition-group `<Transition/>` component.
+   */
+  transition?: TransitionComponent;
+
+  /**
+   * Wait until the first "enter" transition to mount tabs (add them to the DOM)
+   */
+  mountOnEnter?: boolean;
+
+  /**
+   * Unmount tabs (remove it from the DOM) when they are no longer visible
+   */
+  unmountOnExit?: boolean;
+
+  /**
+   * A function that takes an `eventKey` and `type` and returns a unique id for
+   * child tab `<NavItem>`s and `<TabPane>`s. The function _must_ be a pure
+   * function, meaning it should always return the _same_ id for the same set
+   * of inputs. The default value requires that an `id` to be set for the
+   * `<TabContainer>`.
+   *
+   * The `type` argument will either be `"tab"` or `"pane"`.
+   *
+   * @defaultValue (eventKey, type) => `${props.id}-${type}-${eventKey}`
+   */
+  generateChildId?: (eventKey: EventKey, type: 'tab' | 'pane') => string;
+
+  /**
+   * A callback fired when a tab is selected.
+   *
+   * @controllable activeKey
+   */
+  onSelect?: SelectCallback;
+
+  /**
+   * The `eventKey` of the currently active tab.
+   *
+   * @controllable onSelect
+   */
+  activeKey?: EventKey;
+
+  /**
+   * Default value for `eventKey`.
+   */
+  defaultActiveKey?: EventKey;
+}
+
+const Tabs = (props: TabsProps) => {
+  const {
+    id: userId,
+    generateChildId: generateCustomChildId,
+    onSelect: propsOnSelect,
+    activeKey: propsActiveKey,
+    defaultActiveKey,
+    transition,
+    mountOnEnter,
+    unmountOnExit,
+    children,
+  } = props;
+
+  const [activeKey, onSelect] = useUncontrolledProp(
+    propsActiveKey,
+    defaultActiveKey,
+    propsOnSelect,
+  );
+
+  const id = useSSRSafeId(userId);
+
+  const generateChildId = useMemo(
+    () =>
+      generateCustomChildId ||
+      ((key: EventKey, type: string) => (id ? `${id}-${type}-${key}` : null)),
+    [id, generateCustomChildId],
+  );
+
+  const tabContext: TabContextType = useMemo(
+    () => ({
+      onSelect,
+      activeKey,
+      transition,
+      mountOnEnter: mountOnEnter || false,
+      unmountOnExit: unmountOnExit || false,
+      getControlledId: (key: EventKey) => generateChildId(key, 'tabpane'),
+      getControllerId: (key: EventKey) => generateChildId(key, 'tab'),
+    }),
+    [
+      onSelect,
+      activeKey,
+      transition,
+      mountOnEnter,
+      unmountOnExit,
+      generateChildId,
+    ],
+  );
+
+  return (
+    <TabContext.Provider value={tabContext}>
+      <SelectableContext.Provider value={onSelect || null}>
+        {children}
+      </SelectableContext.Provider>
+    </TabContext.Provider>
+  );
+};
+
+Tabs.Panel = TabPanel;
+export default Tabs;
diff --git a/ui/Waypoint.tsx b/ui/Waypoint.tsx
new file mode 100644
index 0000000..4dab2e4
--- /dev/null
+++ b/ui/Waypoint.tsx
@@ -0,0 +1,47 @@
+import useCallbackRef from '@restart/hooks/useCallbackRef';
+import * as React from 'react';
+
+import useWaypoint, {
+  WaypointOptions,
+  WaypointEvent,
+  Position,
+} from './useWaypoint';
+
+export { Position };
+export type { WaypointEvent };
+
+const defaultRenderComponent = (ref: React.RefCallback<any>) => (
+  <span ref={ref} style={{ fontSize: 0 }} />
+);
+
+export interface WaypointProps extends WaypointOptions {
+  renderComponent?: (ref: React.RefCallback<any>) => React.ReactElement;
+
+  /**
+   * The callback fired when a waypoint's position is updated. This generally
+   * fires as a waypoint enters or exits the viewport but will also be called
+   * on mount.
+   */
+  onPositionChange: (
+    details: WaypointEvent,
+    entry: IntersectionObserverEntry,
+  ) => void;
+}
+
+/**
+ * A component that tracks when it enters or leaves the viewport. Implemented
+ * using IntersectionObserver, polyfill may be required for older browsers.
+ */
+function Waypoint({
+  renderComponent = defaultRenderComponent,
+  onPositionChange,
+  ...options
+}: WaypointProps) {
+  const [element, setElement] = useCallbackRef<Element>();
+
+  useWaypoint(element, onPositionChange, options);
+
+  return renderComponent(setElement);
+}
+
+export default Waypoint;
diff --git a/ui/getScrollbarWidth.ts b/ui/getScrollbarWidth.ts
new file mode 100644
index 0000000..8d5d4b9
--- /dev/null
+++ b/ui/getScrollbarWidth.ts
@@ -0,0 +1,10 @@
+/**
+ * Get the width of the vertical window scrollbar if it's visible
+ */
+export default function getBodyScrollbarWidth(ownerDocument = document) {
+  const window = ownerDocument.defaultView!;
+
+  return Math.abs(
+    window.innerWidth - ownerDocument.documentElement.clientWidth,
+  );
+}
diff --git a/ui/index.ts b/ui/index.ts
new file mode 100644
index 0000000..0717963
--- /dev/null
+++ b/ui/index.ts
@@ -0,0 +1,46 @@
+import Dropdown from './Dropdown';
+import { useDropdownMenu } from './DropdownMenu';
+import { useDropdownToggle } from './DropdownToggle';
+import { useDropdownItem } from './DropdownItem';
+import Modal from './Modal';
+import Overlay from './Overlay';
+import Portal from './Portal';
+import useRootClose from './useRootClose';
+import Nav from './Nav';
+import NavItem, { useNavItem } from './NavItem';
+import Button from './Button';
+import Tabs from './Tabs';
+import TabPanel from './TabPanel';
+
+export {
+  Button,
+  Dropdown,
+  useDropdownMenu,
+  useDropdownToggle,
+  useDropdownItem,
+  Nav,
+  NavItem,
+  useNavItem,
+  Modal,
+  Overlay,
+  Portal,
+  useRootClose,
+  Tabs,
+  TabPanel,
+};
+
+export type { ButtonProps } from './Button';
+export type {
+  DropdownProps,
+  DropdownMenuProps,
+  UseDropdownMenuMetadata,
+  UseDropdownMenuOptions,
+  DropdownToggleProps,
+  UseDropdownToggleMetadata,
+  DropdownItemProps,
+} from './Dropdown';
+export type { NavItemProps, UseNavItemOptions, NavProps } from './Nav';
+export type { ModalProps } from './Modal';
+export type { OverlayProps } from './Overlay';
+export type { PortalProps } from './Portal';
+export type { TabsProps, TabPanelProps } from './Tabs';
diff --git a/ui/mergeOptionsWithPopperConfig.ts b/ui/mergeOptionsWithPopperConfig.ts
new file mode 100644
index 0000000..a886be8
--- /dev/null
+++ b/ui/mergeOptionsWithPopperConfig.ts
@@ -0,0 +1,91 @@
+import { UsePopperOptions, Offset, Placement, Modifiers } from './usePopper';
+
+export type Config = {
+  flip?: boolean;
+  fixed?: boolean;
+  alignEnd?: boolean;
+  enabled?: boolean;
+  containerPadding?: number;
+  arrowElement?: Element | null;
+  enableEvents?: boolean;
+  offset?: Offset;
+  placement?: Placement;
+  popperConfig?: UsePopperOptions;
+};
+
+export function toModifierMap(modifiers: Modifiers | undefined) {
+  const result: Modifiers = {};
+
+  if (!Array.isArray(modifiers)) {
+    return modifiers || result;
+  }
+
+  // eslint-disable-next-line no-unused-expressions
+  modifiers?.forEach((m) => {
+    result[m.name!] = m;
+  });
+  return result;
+}
+
+export function toModifierArray(map: Modifiers | undefined = {}) {
+  if (Array.isArray(map)) return map;
+  return Object.keys(map).map((k) => {
+    map[k].name = k;
+    return map[k];
+  });
+}
+
+export default function mergeOptionsWithPopperConfig({
+  enabled,
+  enableEvents,
+  placement,
+  flip,
+  offset,
+  fixed,
+  containerPadding,
+  arrowElement,
+  popperConfig = {},
+}: Config): UsePopperOptions {
+  const modifiers = toModifierMap(popperConfig.modifiers);
+
+  return {
+    ...popperConfig,
+    placement,
+    enabled,
+    strategy: fixed ? 'fixed' : popperConfig.strategy,
+    modifiers: toModifierArray({
+      ...modifiers,
+      eventListeners: {
+        enabled: enableEvents,
+        options: modifiers.eventListeners?.options,
+      },
+      preventOverflow: {
+        ...modifiers.preventOverflow,
+        options: containerPadding
+          ? {
+              padding: containerPadding,
+              ...modifiers.preventOverflow?.options,
+            }
+          : modifiers.preventOverflow?.options,
+      },
+      offset: {
+        options: {
+          offset,
+          ...modifiers.offset?.options,
+        },
+      },
+      arrow: {
+        ...modifiers.arrow,
+        enabled: !!arrowElement,
+        options: {
+          ...modifiers.arrow?.options,
+          element: arrowElement,
+        },
+      },
+      flip: {
+        enabled: !!flip,
+        ...modifiers.flip,
+      },
+    }),
+  };
+}
diff --git a/ui/popper.ts b/ui/popper.ts
new file mode 100644
index 0000000..ed0ec6b
--- /dev/null
+++ b/ui/popper.ts
@@ -0,0 +1,27 @@
+import arrow from '@popperjs/core/lib/modifiers/arrow';
+import computeStyles from '@popperjs/core/lib/modifiers/computeStyles';
+import eventListeners from '@popperjs/core/lib/modifiers/eventListeners';
+import flip from '@popperjs/core/lib/modifiers/flip';
+import hide from '@popperjs/core/lib/modifiers/hide';
+import offset from '@popperjs/core/lib/modifiers/offset';
+import popperOffsets from '@popperjs/core/lib/modifiers/popperOffsets';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
+import { placements } from '@popperjs/core/lib/enums';
+import { popperGenerator } from '@popperjs/core/lib/popper-base';
+
+// For the common JS build we will turn this file into a bundle with no imports.
+// This is b/c the Popper lib is all esm files, and would break in a common js only environment
+export const createPopper = popperGenerator({
+  defaultModifiers: [
+    hide,
+    popperOffsets,
+    computeStyles,
+    eventListeners,
+    offset,
+    flip,
+    preventOverflow,
+    arrow,
+  ],
+});
+
+export { placements };
diff --git a/ui/ssr.tsx b/ui/ssr.tsx
new file mode 100644
index 0000000..f4d5c78
--- /dev/null
+++ b/ui/ssr.tsx
@@ -0,0 +1,10 @@
+import {
+  useSSRSafeId,
+  useIsSSR,
+  SSRProvider,
+  SSRProviderProps,
+} from '@react-aria/ssr';
+
+export type { SSRProviderProps };
+
+export { useSSRSafeId, useIsSSR, SSRProvider };
diff --git a/ui/types.ts b/ui/types.ts
new file mode 100644
index 0000000..13c70ff
--- /dev/null
+++ b/ui/types.ts
@@ -0,0 +1,108 @@
+import * as React from 'react';
+
+export type EventKey = string | number;
+
+export type IntrinsicElementTypes = keyof JSX.IntrinsicElements;
+
+export type AssignPropsWithRef<
+  Inner extends string | React.ComponentType<any>,
+  P,
+> = Omit<
+  React.ComponentPropsWithRef<Inner extends React.ElementType ? Inner : never>,
+  keyof P
+> &
+  P;
+
+export type { AssignPropsWithRef as AssignProps };
+
+export type AssignPropsWithoutRef<
+  Inner extends string | React.ComponentType<any>,
+  P,
+> = Omit<
+  React.ComponentPropsWithoutRef<
+    Inner extends React.ElementType ? Inner : never
+  >,
+  keyof P
+> &
+  P;
+
+export interface DynamicRefForwardingComponent<
+  TInitial extends string | React.ComponentType<any>,
+  P = { children?: React.ReactNode },
+> {
+  <As extends string | React.ComponentType<any> = TInitial>(
+    props: AssignPropsWithRef<As, { as?: As } & P>,
+    context?: any,
+  ): React.ReactElement | null;
+  propTypes?: any;
+  contextTypes?: any;
+  defaultProps?: Partial<P>;
+  displayName?: string;
+}
+
+export interface DynamicFunctionComponent<
+  TInitial extends string | React.ComponentType<any>,
+  P = { children?: React.ReactNode },
+> {
+  <As extends string | React.ComponentType<any> = TInitial>(
+    props: AssignPropsWithoutRef<As, { as?: As } & P>,
+    context?: any,
+  ): React.ReactElement | null;
+  propTypes?: any;
+  contextTypes?: any;
+  defaultProps?: Partial<P>;
+  displayName?: string;
+}
+
+export class DynamicComponent<
+  As extends string | React.ComponentType<any>,
+  P = unknown,
+> extends React.Component<AssignPropsWithRef<As, { as?: As } & P>> {}
+
+// Need to use this instead of typeof Component to get proper type checking.
+export type DynamicComponentClass<
+  As extends string | React.ComponentType<any>,
+  P = unknown,
+> = React.ComponentClass<AssignPropsWithRef<As, { as?: As } & P>>;
+
+export type SelectCallback = (
+  eventKey: string | null,
+  e: React.SyntheticEvent<unknown>,
+) => void;
+
+export interface TransitionCallbacks {
+  /**
+   * Callback fired before the component transitions in
+   */
+  onEnter?(node: HTMLElement, isAppearing: boolean): any;
+  /**
+   * Callback fired as the component begins to transition in
+   */
+  onEntering?(node: HTMLElement, isAppearing: boolean): any;
+  /**
+   * Callback fired after the component finishes transitioning in
+   */
+  onEntered?(node: HTMLElement, isAppearing: boolean): any;
+  /**
+   * Callback fired right before the component transitions out
+   */
+  onExit?(node: HTMLElement): any;
+  /**
+   * Callback fired as the component begins to transition out
+   */
+  onExiting?(node: HTMLElement): any;
+  /**
+   * Callback fired after the component finishes transitioning out
+   */
+  onExited?(node: HTMLElement): any;
+}
+
+export interface TransitionProps extends TransitionCallbacks {
+  in?: boolean;
+  appear?: boolean;
+  children: React.ReactElement;
+  mountOnEnter?: boolean;
+  unmountOnExit?: boolean;
+}
+
+export type TransitionComponent = React.ComponentType<TransitionProps>;
diff --git a/ui/useClickOutside.ts b/ui/useClickOutside.ts
new file mode 100644
index 0000000..3c8597f
--- /dev/null
+++ b/ui/useClickOutside.ts
@@ -0,0 +1,158 @@
+import contains from 'dom-helpers/contains';
+import listen from 'dom-helpers/listen';
+import ownerDocument from 'dom-helpers/ownerDocument';
+import { useCallback, useEffect, useRef } from 'react';
+
+import useEventCallback from '@restart/hooks/useEventCallback';
+import warning from 'warning';
+
+const noop = () => {};
+
+export type MouseEvents = {
+  [K in keyof GlobalEventHandlersEventMap]: GlobalEventHandlersEventMap[K] extends MouseEvent
+    ? K
+    : never;
+}[keyof GlobalEventHandlersEventMap];
+
+function isLeftClickEvent(event: MouseEvent) {
+  return event.button === 0;
+}
+
+function isModifiedEvent(event: MouseEvent) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+
+export const getRefTarget = (
+  ref: React.RefObject<Element> | Element | null | undefined,
+) => ref && ('current' in ref ? ref.current : ref);
+
+export interface ClickOutsideOptions {
+  disabled?: boolean;
+  clickTrigger?: MouseEvents;
+}
+
+const InitialTriggerEvents: Partial<Record<MouseEvents, MouseEvents>> = {
+  click: 'mousedown',
+  mouseup: 'mousedown',
+  pointerup: 'pointerdown',
+};
+
+/**
+ * The `useClickOutside` hook registers your callback on the document that fires
+ * when a pointer event is registered outside of the provided ref or element.
+ *
+ * @param {Ref<HTMLElement>| HTMLElement} ref  The element boundary
+ * @param {function} onClickOutside
+ * @param {object=}  options
+ * @param {boolean=} options.disabled
+ * @param {string=}  options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
+ */
+function useClickOutside(
+  ref: React.RefObject<Element> | Element | null | undefined,
+  onClickOutside: (e: Event) => void = noop,
+  { disabled, clickTrigger = 'click' }: ClickOutsideOptions = {},
+) {
+  const preventMouseClickOutsideRef = useRef(false);
+  const waitingForTrigger = useRef(false);
+
+  const handleMouseCapture = useCallback(
+    (e: any) => {
+      const currentTarget = getRefTarget(ref);
+
+      warning(
+        !!currentTarget,
+        'ClickOutside captured a close event but does not have a ref to compare it to. ' +
+          'useClickOutside(), should be passed a ref that resolves to a DOM node',
+      );
+
+      preventMouseClickOutsideRef.current =
+        !currentTarget ||
+        isModifiedEvent(e) ||
+        !isLeftClickEvent(e) ||
+        !!contains(currentTarget, e.target) ||
+        waitingForTrigger.current;
+
+      waitingForTrigger.current = false;
+    },
+    [ref],
+  );
+
+  const handleInitialMouse = useEventCallback((e: MouseEvent) => {
+    const currentTarget = getRefTarget(ref);
+
+    if (currentTarget && contains(currentTarget, e.target as any)) {
+      waitingForTrigger.current = true;
+    }
+  });
+
+  const handleMouse = useEventCallback((e: MouseEvent) => {
+    if (!preventMouseClickOutsideRef.current) {
+      onClickOutside(e);
+    }
+  });
+
+  useEffect(() => {
+    if (disabled || ref == null) return undefined;
+
+    const doc = ownerDocument(getRefTarget(ref)!);
+    const ownerWindow = doc.defaultView || window;
+
+    // Store the current event to avoid triggering handlers immediately
+    // For things rendered in an iframe, the event might originate on the parent window
+    // so we should fall back to that global event if the local one doesn't exist
+    // https://github.com/facebook/react/issues/20074
+    let currentEvent = ownerWindow.event ?? ownerWindow.parent?.event;
+
+    let removeInitialTriggerListener: (() => void) | null = null;
+    if (InitialTriggerEvents[clickTrigger]) {
+      removeInitialTriggerListener = listen(
+        doc as any,
+        InitialTriggerEvents[clickTrigger]!,
+        handleInitialMouse,
+        true,
+      );
+    }
+
+    // Use capture for this listener so it fires before React's listener, to
+    // avoid false positives in the contains() check below if the target DOM
+    // element is removed in the React mouse callback.
+    const removeMouseCaptureListener = listen(
+      doc as any,
+      clickTrigger,
+      handleMouseCapture,
+      true,
+    );
+
+    const removeMouseListener = listen(doc as any, clickTrigger, (e) => {
+      // skip if this event is the same as the one running when we added the handlers
+      if (e === currentEvent) {
+        currentEvent = undefined;
+        return;
+      }
+      handleMouse(e);
+    });
+
+    let mobileSafariHackListeners = [] as Array<() => void>;
+    if ('ontouchstart' in doc.documentElement) {
+      mobileSafariHackListeners = [].slice
+        .call(doc.body.children)
+        .map((el) => listen(el, 'mousemove', noop));
+    }
+
+    return () => {
+      removeInitialTriggerListener?.();
+      removeMouseCaptureListener();
+      removeMouseListener();
+      mobileSafariHackListeners.forEach((remove) => remove());
+    };
+  }, [
+    ref,
+    disabled,
+    clickTrigger,
+    handleMouseCapture,
+    handleInitialMouse,
+    handleMouse,
+  ]);
+}
+
+export default useClickOutside;
diff --git a/ui/usePopper.ts b/ui/usePopper.ts
new file mode 100644
index 0000000..9541290
--- /dev/null
+++ b/ui/usePopper.ts
@@ -0,0 +1,231 @@
+import * as Popper from '@popperjs/core';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { dequal } from 'dequal';
+import useSafeState from '@restart/hooks/useSafeState';
+import { createPopper } from './popper';
+
+const disabledApplyStylesModifier = {
+  name: 'applyStyles',
+  enabled: false,
+  phase: 'afterWrite',
+  fn: () => undefined,
+};
+
+// until docjs supports type exports...
+export type Modifier<Name, Options extends Popper.Obj> = Popper.Modifier<
+  Name,
+  Options
+>;
+export type Options = Popper.Options;
+export type Instance = Popper.Instance;
+export type Placement = Popper.Placement;
+export type VirtualElement = Popper.VirtualElement;
+export type State = Popper.State;
+
+export type OffsetValue = [
+  number | null | undefined,
+  number | null | undefined,
+];
+export type OffsetFunction = (details: {
+  popper: Popper.Rect;
+  reference: Popper.Rect;
+  placement: Placement;
+}) => OffsetValue;
+
+export type Offset = OffsetFunction | OffsetValue;
+
+export type ModifierMap = Record<string, Partial<Modifier<any, any>>>;
+export type Modifiers =
+  | Popper.Options['modifiers']
+  | Record<string, Partial<Modifier<any, any>>>;
+
+export type UsePopperOptions = Omit<
+  Options,
+  'modifiers' | 'placement' | 'strategy'
+> & {
+  enabled?: boolean;
+  placement?: Options['placement'];
+  strategy?: Options['strategy'];
+  modifiers?: Options['modifiers'];
+};
+
+export interface UsePopperState {
+  placement: Placement;
+  update: () => void;
+  forceUpdate: () => void;
+  attributes: Record<string, Record<string, any>>;
+  styles: Record<string, Partial<CSSStyleDeclaration>>;
+  state?: State;
+}
+
+const ariaDescribedByModifier: Modifier<
+  'ariaDescribedBy',
+  Record<string, never>
+> = {
+  name: 'ariaDescribedBy',
+  enabled: true,
+  phase: 'afterWrite',
+  effect:
+    ({ state }) =>
+    () => {
+      const { reference, popper } = state.elements;
+      if ('removeAttribute' in reference) {
+        const ids = (reference.getAttribute('aria-describedby') || '')
+          .split(',')
+          .filter((id) => id.trim() !== popper.id);
+
+        if (!ids.length) reference.removeAttribute('aria-describedby');
+        else reference.setAttribute('aria-describedby', ids.join(','));
+      }
+    },
+  fn: ({ state }) => {
+    const { popper, reference } = state.elements;
+
+    const role = popper.getAttribute('role')?.toLowerCase();
+
+    if (popper.id && role === 'tooltip' && 'setAttribute' in reference) {
+      const ids = reference.getAttribute('aria-describedby');
+      if (ids && ids.split(',').indexOf(popper.id) !== -1) {
+        return;
+      }
+
+      reference.setAttribute(
+        'aria-describedby',
+        ids ? `${ids},${popper.id}` : popper.id,
+      );
+    }
+  },
+};
+
+const EMPTY_MODIFIERS = [] as any;
+/**
+ * Position an element relative some reference element using Popper.js
+ *
+ * @param referenceElement
+ * @param popperElement
+ * @param {object}      options
+ * @param {object=}     options.modifiers Popper.js modifiers
+ * @param {boolean=}    options.enabled toggle the popper functionality on/off
+ * @param {string=}     options.placement The popper element placement relative to the reference element
+ * @param {string=}     options.strategy the positioning strategy
+ * @param {function=}   options.onCreate called when the popper is created
+ * @param {function=}   options.onUpdate called when the popper is updated
+ *
+ * @returns {UsePopperState} The popper state
+ */
+function usePopper(
+  referenceElement: VirtualElement | null | undefined,
+  popperElement: HTMLElement | null | undefined,
+  {
+    enabled = true,
+    placement = 'bottom',
+    strategy = 'absolute',
+    modifiers = EMPTY_MODIFIERS,
+    ...config
+  }: UsePopperOptions = {},
+): UsePopperState {
+  const prevModifiers = useRef<UsePopperOptions['modifiers']>(modifiers);
+  const popperInstanceRef = useRef<Instance>();
+
+  const update = useCallback(() => {
+    popperInstanceRef.current?.update();
+  }, []);
+
+  const forceUpdate = useCallback(() => {
+    popperInstanceRef.current?.forceUpdate();
+  }, []);
+
+  const [popperState, setState] = useSafeState(
+    useState<UsePopperState>({
+      placement,
+      update,
+      forceUpdate,
+      attributes: {},
+      styles: {
+        popper: {},
+        arrow: {},
+      },
+    }),
+  );
+
+  const updateModifier = useMemo<Modifier<'updateStateModifier', any>>(
+    () => ({
+      name: 'updateStateModifier',
+      enabled: true,
+      phase: 'write',
+      requires: ['computeStyles'],
+      fn: ({ state }) => {
+        const styles: UsePopperState['styles'] = {};
+        const attributes: UsePopperState['attributes'] = {};
+
+        Object.keys(state.elements).forEach((element) => {
+          styles[element] = state.styles[element];
+          attributes[element] = state.attributes[element];
+        });
+
+        setState({
+          state,
+          styles,
+          attributes,
+          update,
+          forceUpdate,
+          placement: state.placement,
+        });
+      },
+    }),
+    [update, forceUpdate, setState],
+  );
+
+  const nextModifiers = useMemo(() => {
+    if (!dequal(prevModifiers.current, modifiers)) {
+      prevModifiers.current = modifiers;
+    }
+    return prevModifiers.current!;
+  }, [modifiers]);
+
+  useEffect(() => {
+    if (!popperInstanceRef.current || !enabled) return;
+
+    popperInstanceRef.current.setOptions({
+      placement,
+      strategy,
+      modifiers: [
+        ...nextModifiers,
+        updateModifier,
+        disabledApplyStylesModifier,
+      ],
+    });
+  }, [strategy, placement, updateModifier, enabled, nextModifiers]);
+
+  useEffect(() => {
+    if (!enabled || referenceElement == null || popperElement == null) {
+      return undefined;
+    }
+
+    popperInstanceRef.current = createPopper(referenceElement, popperElement, {
+      ...config,
+      placement,
+      strategy,
+      modifiers: [...nextModifiers, ariaDescribedByModifier, updateModifier],
+    });
+
+    return () => {
+      if (popperInstanceRef.current != null) {
+        popperInstanceRef.current.destroy();
+        popperInstanceRef.current = undefined;
+
+        setState((s) => ({
+          ...s,
+          attributes: {},
+          styles: { popper: {} },
+        }));
+      }
+    };
+    // This is only run once to _create_ the popper
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, referenceElement, popperElement]);
+
+  return popperState;
+}
+
+export default usePopper;
diff --git a/ui/useRTGTransitionProps.ts b/ui/useRTGTransitionProps.ts
new file mode 100644
index 0000000..9428196
--- /dev/null
+++ b/ui/useRTGTransitionProps.ts
@@ -0,0 +1,87 @@
+import { cloneElement, useCallback, useRef } from 'react';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import {
+  TransitionProps as RTGTransitionProps,
+  TransitionStatus,
+} from 'react-transition-group/Transition';
+import { getReactVersion } from './utils';
+
+export type TransitionProps = RTGTransitionProps & {
+  children:
+    | React.ReactElement
+    | ((
+        status: TransitionStatus,
+        props: Record<string, unknown>,
+      ) => React.ReactNode);
+};
+
+/**
+ * Normalizes RTG transition callbacks with nodeRef to better support
+ * strict mode.
+ *
+ * @param props Transition props.
+ * @returns Normalized transition props.
+ */
+export default function useRTGTransitionProps({
+  onEnter,
+  onEntering,
+  onEntered,
+  onExit,
+  onExiting,
+  onExited,
+  addEndListener,
+  children,
+  ...props
+}: TransitionProps) {
+  const { major } = getReactVersion();
+  const childRef =
+    major >= 19 ? (children as any).props.ref : (children as any).ref;
+
+  const nodeRef = useRef<HTMLElement>(null);
+  const mergedRef = useMergedRefs(
+    nodeRef,
+    typeof children === 'function' ? null : childRef,
+  );
+
+  const normalize =
+    (callback?: (node: HTMLElement, param: any) => void) => (param: any) => {
+      if (callback && nodeRef.current) {
+        callback(nodeRef.current, param);
+      }
+    };
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  const handleEnter = useCallback(normalize(onEnter), [onEnter]);
+  const handleEntering = useCallback(normalize(onEntering), [onEntering]);
+  const handleEntered = useCallback(normalize(onEntered), [onEntered]);
+  const handleExit = useCallback(normalize(onExit), [onExit]);
+  const handleExiting = useCallback(normalize(onExiting), [onExiting]);
+  const handleExited = useCallback(normalize(onExited), [onExited]);
+  const handleAddEndListener = useCallback(normalize(addEndListener), [
+    addEndListener,
+  ]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  return {
+    ...props,
+    nodeRef,
+    ...(onEnter && { onEnter: handleEnter }),
+    ...(onEntering && { onEntering: handleEntering }),
+    ...(onEntered && { onEntered: handleEntered }),
+    ...(onExit && { onExit: handleExit }),
+    ...(onExiting && { onExiting: handleExiting }),
+    ...(onExited && { onExited: handleExited }),
+    ...(addEndListener && { addEndListener: handleAddEndListener }),
+    children:
+      typeof children === 'function'
+        ? (((status: TransitionStatus, innerProps: Record<string, unknown>) =>
+            // TODO: Types for RTG missing innerProps, so need to cast.
+            children(status, {
+              ...innerProps,
+              ref: mergedRef,
+            })) as any)
+        : cloneElement(children as React.ReactElement, {
+            ref: mergedRef,
+          }),
+  };
+}
diff --git a/ui/useRootClose.ts b/ui/useRootClose.ts
new file mode 100644
index 0000000..47901e6
--- /dev/null
+++ b/ui/useRootClose.ts
@@ -0,0 +1,69 @@
+import listen from 'dom-helpers/listen';
+import ownerDocument from 'dom-helpers/ownerDocument';
+import { useEffect } from 'react';
+
+import useEventCallback from '@restart/hooks/useEventCallback';
+import useClickOutside, {
+  ClickOutsideOptions,
+  getRefTarget,
+} from './useClickOutside';
+import { isEscKey } from './utils';
+
+const noop = () => {};
+
+export interface RootCloseOptions extends ClickOutsideOptions {
+  disabled?: boolean;
+}
+
+/**
+ * The `useRootClose` hook registers your callback on the document
+ * when rendered. Powers the `<Overlay/>` component. This is used achieve modal
+ * style behavior where your callback is triggered when the user tries to
+ * interact with the rest of the document or hits the `esc` key.
+ *
+ * @param {Ref<HTMLElement>| HTMLElement} ref  The element boundary
+ * @param {function} onRootClose
+ * @param {object=}  options
+ * @param {boolean=} options.disabled
+ * @param {string=}  options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
+ */
+function useRootClose(
+  ref: React.RefObject<Element> | Element | null | undefined,
+  onRootClose: (e: Event) => void,
+  { disabled, clickTrigger }: RootCloseOptions = {},
+) {
+  const onClose = onRootClose || noop;
+
+  useClickOutside(ref, onClose, { disabled, clickTrigger });
+
+  const handleKeyUp = useEventCallback((e: KeyboardEvent) => {
+    if (isEscKey(e)) {
+      onClose(e);
+    }
+  });
+
+  useEffect(() => {
+    if (disabled || ref == null) return undefined;
+
+    const doc = ownerDocument(getRefTarget(ref)!);
+
+    // Store the current event to avoid triggering handlers immediately
+    // https://github.com/facebook/react/issues/20074
+    let currentEvent = (doc.defaultView || window).event;
+
+    const removeKeyupListener = listen(doc as any, 'keyup', (e) => {
+      // skip if this event is the same as the one running when we added the handlers
+      if (e === currentEvent) {
+        currentEvent = undefined;
+        return;
+      }
+      handleKeyUp(e);
+    });
+
+    return () => {
+      removeKeyupListener();
+    };
+  }, [ref, disabled, handleKeyUp]);
+}
+
+export default useRootClose;
diff --git a/ui/useScrollParent.tsx b/ui/useScrollParent.tsx
new file mode 100644
index 0000000..b5ff1d2
--- /dev/null
+++ b/ui/useScrollParent.tsx
@@ -0,0 +1,17 @@
+import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
+import getScrollParent from 'dom-helpers/scrollParent';
+import { useState } from 'react';
+
+export default function useScrollParent(element: null | Element) {
+  const [parent, setParent] = useState<Element | Document | null | undefined>(
+    null,
+  );
+
+  useIsomorphicEffect(() => {
+    if (element) {
+      setParent(getScrollParent(element as any, true));
+    }
+  }, [element]);
+
+  return parent;
+}
diff --git a/ui/useWaitForDOMRef.ts b/ui/useWaitForDOMRef.ts
new file mode 100644
index 0000000..3f8f526
--- /dev/null
+++ b/ui/useWaitForDOMRef.ts
@@ -0,0 +1,54 @@
+import ownerDocument from 'dom-helpers/ownerDocument';
+import canUseDOM from 'dom-helpers/canUseDOM';
+import { useState, useEffect } from 'react';
+import useWindow from './useWindow';
+import { VirtualElement } from './usePopper';
+
+export type DOMContainer<T extends HTMLElement | VirtualElement = HTMLElement> =
+  T | React.RefObject<T> | null | (() => T | React.RefObject<T> | null);
+
+export const resolveContainerRef = <T extends HTMLElement | VirtualElement>(
+  ref: DOMContainer<T> | undefined,
+  document?: Document,
+): T | HTMLBodyElement | null => {
+  if (!canUseDOM) return null;
+  if (ref == null) return (document || ownerDocument()).body as HTMLBodyElement;
+  if (typeof ref === 'function') ref = ref();
+
+  if (ref && 'current' in ref) ref = ref.current;
+  if (ref && ('nodeType' in ref || ref.getBoundingClientRect)) return ref;
+
+  return null;
+};
+
+export default function useWaitForDOMRef<
+  T extends HTMLElement | VirtualElement = HTMLElement,
+>(
+  ref: DOMContainer<T> | undefined,
+  onResolved?: (element: T | HTMLBodyElement) => void,
+) {
+  const window = useWindow();
+  const [resolvedRef, setRef] = useState(() =>
+    resolveContainerRef(ref, window?.document),
+  );
+
+  if (!resolvedRef) {
+    const earlyRef = resolveContainerRef(ref);
+    if (earlyRef) setRef(earlyRef);
+  }
+
+  useEffect(() => {
+    if (onResolved && resolvedRef) {
+      onResolved(resolvedRef);
+    }
+  }, [onResolved, resolvedRef]);
+
+  useEffect(() => {
+    const nextRef = resolveContainerRef(ref);
+    if (nextRef !== resolvedRef) {
+      setRef(nextRef);
+    }
+  }, [ref, resolvedRef]);
+
+  return resolvedRef;
+}
diff --git a/ui/useWaypoint.tsx b/ui/useWaypoint.tsx
new file mode 100644
index 0000000..625e864
--- /dev/null
+++ b/ui/useWaypoint.tsx
@@ -0,0 +1,148 @@
+import useEventCallback from '@restart/hooks/useEventCallback';
+import useIntersectionObserver from '@restart/hooks/useIntersectionObserver';
+import { useMemo, useRef } from 'react';
+import getScrollParent from 'dom-helpers/scrollParent';
+
+export interface WaypointEvent {
+  position: Position;
+  previousPosition: Position | null;
+}
+
+export interface Rect {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+export type WaypointCallback = (
+  details: WaypointEvent,
+  entry: IntersectionObserverEntry,
+  observer: IntersectionObserver,
+) => void;
+
+export type RootElement = Element | Document | null | undefined;
+
+/** Accepts all options an IntersectionObserver accepts */
+export interface WaypointOptions
+  extends Omit<IntersectionObserverInit, 'rootMargin' | 'root'> {
+  /**
+   * The "root" element to observe. This should be the scrollable view your waypoint
+   * is rendered into. Accepts a DOM element, a function that returns a DOM element, `null`
+   * indicating that the root is not ready yet, or the string "scrollParent" to
+   * have the waypoint calculate the scroll parent itself.
+   */
+  root?: RootElement | 'scrollParent' | ((element: Element) => RootElement);
+
+  /**
+   * A valid CSS `margin` property or object containing the specific "top", "left", etc properties.
+   * The root margin functionally adjusts the "size" of the viewport when considering the waypoint's
+   * position. A positive margin will cause the waypoint to "enter" the waypoint early while a
+   * negative margin will have the opposite effect.
+   */
+  rootMargin?: string | Rect;
+
+  /**
+   * Set the direction of the scroll to consider when tracking the waypoint's position
+   */
+  scrollDirection?: 'vertical' | 'horizontal';
+}
+
+export enum Position {
+  UNKNOWN = 0,
+  BEFORE,
+  INSIDE,
+  AFTER,
+}
+
+function toCss(margin?: string | Rect) {
+  if (!margin || typeof margin === 'string') return margin;
+
+  const { top = 0, right = 0, bottom = 0, left = 0 } = margin;
+
+  return `${top}px ${right}px ${bottom}px ${left}px`;
+}
+
+const findRoot = (el: Element) => getScrollParent(el as HTMLElement, true);
+
+function useWaypoint(
+  element: Element | null,
+  callback: WaypointCallback,
+  options: WaypointOptions = {},
+): void {
+  const { rootMargin, threshold, scrollDirection = 'vertical' } = options;
+  let { root } = options;
+  const handler = useEventCallback(callback);
+
+  const prevPositionRef = useRef<Position | null>(null);
+
+  if (root === 'scrollParent') {
+    root = findRoot;
+  }
+
+  const scrollParent = useMemo(
+    () => (element && typeof root === 'function' ? root(element) : null),
+
+    [element, root],
+  );
+
+  let realRoot = typeof root === 'function' ? scrollParent : root;
+
+  if (realRoot && realRoot.nodeType === document.DOCUMENT_NODE) {
+    // explicit undefined means "use the viewport", instead of `null`
+    // which means "no root yet". This works around a bug in safari
+    // where document is not accepted in older versions,
+    // or is accepted but doesn't work (as of v14)
+    realRoot = undefined;
+  }
+
+  useIntersectionObserver(
+    // We change the meaning of explicit null to "not provided yet"
+    // this is to allow easier synchronizing between element and roots derived
+    // from it. Otherwise if the root updates later an observer will be created
+    // for the document and then for the root
+    element,
+    ([entry], observer) => {
+      if (!entry) return;
+
+      const [start, end, point] =
+        scrollDirection === 'vertical'
+          ? (['top', 'bottom', 'y'] as const)
+          : (['left', 'right', 'x'] as const);
+
+      const { [point]: coord } = entry.boundingClientRect;
+
+      const rootStart = entry.rootBounds?.[start] || 0;
+      const rootEnd = entry.rootBounds?.[end] || 0;
+
+      // The position may remain UNKNOWN if the root
+      // is 0 width/height or everything is hidden.
+      let position: Position = Position.UNKNOWN;
+
+      if (entry.isIntersecting) {
+        position = Position.INSIDE;
+      } else if (coord > rootEnd) {
+        position = Position.AFTER;
+      } else if (coord < rootStart) {
+        position = Position.BEFORE;
+      }
+
+      const previousPosition = prevPositionRef.current;
+
+      if (previousPosition === position) {
+        return;
+      }
+
+      handler({ position, previousPosition }, entry, observer);
+
+      prevPositionRef.current = position;
+    },
+    {
+      threshold,
+      root: realRoot,
+      rootMargin: toCss(rootMargin),
+    },
+  );
+}
+
+export default useWaypoint;
diff --git a/ui/useWindow.ts b/ui/useWindow.ts
new file mode 100644
index 0000000..64095bf
--- /dev/null
+++ b/ui/useWindow.ts
@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+import canUseDOM from 'dom-helpers/canUseDOM';
+
+const Context = createContext(canUseDOM ? window : undefined);
+
+export const WindowProvider = Context.Provider;
+
+/**
+ * The document "window" placed in React context. Helpful for determining
+ * SSR context, or when rendering into an iframe.
+ *
+ * @returns the current window
+ */
+export default function useWindow() {
+  return useContext(Context);
+}
diff --git a/ui/utils.ts b/ui/utils.ts
new file mode 100644
index 0000000..1eda92f
--- /dev/null
+++ b/ui/utils.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export function isEscKey(e: KeyboardEvent) {
+  return e.code === 'Escape' || e.keyCode === 27;
+}
+
+export function getReactVersion() {
+  const parts = React.version.split('.');
+  return {
+    major: +parts[0],
+    minor: +parts[1],
+    patch: +parts[2],
+  };
+}
diff --git a/uncontrollable/index.ts b/uncontrollable/index.ts
new file mode 100644
index 0000000..68128f7
--- /dev/null
+++ b/uncontrollable/index.ts
@@ -0,0 +1,92 @@
+import { useCallback, useRef, useState } from 'react';
+
+export type Handler = (value: any, ...args: any[]) => any;
+
+export function defaultKey(key: string) {
+  return 'default' + key.charAt(0).toUpperCase() + key.substr(1);
+}
+
+function useUncontrolledProp<TProp, THandler extends Handler = Handler>(
+  propValue: TProp | undefined,
+  defaultValue: TProp,
+  handler?: THandler
+): readonly [TProp, THandler];
+function useUncontrolledProp<TProp, THandler extends Handler = Handler>(
+  propValue: TProp | undefined,
+  defaultValue?: TProp | undefined,
+  handler?: THandler
+): readonly [
+  TProp | undefined,
+  (...args: Parameters<THandler>) => ReturnType<THandler> | void
+];
+function useUncontrolledProp<TProp, THandler extends Handler = Handler>(
+  propValue: TProp | undefined,
+  defaultValue: TProp | undefined,
+  handler?: THandler
+) {
+  const wasPropRef = useRef<boolean>(propValue !== undefined);
+  const [stateValue, setState] = useState<TProp | undefined>(defaultValue);
+
+  const isProp = propValue !== undefined;
+  const wasProp = wasPropRef.current;
+
+  wasPropRef.current = isProp;
+
+  /**
+   * If a prop switches from controlled to Uncontrolled
+   * reset its value to the defaultValue
+   */
+  if (!isProp && wasProp && stateValue !== defaultValue) {
+    setState(defaultValue);
+  }
+
+  return [
+    isProp ? propValue : stateValue,
+    useCallback(
+      (...args: Parameters<THandler>): ReturnType<THandler> | void => {
+        const [value, ...rest] = args;
+        let returnValue = handler?.(value, ...rest);
+        setState(value);
+        return returnValue;
+      },
+      [handler]
+    ),
+  ] as const;
+}
+
+export { useUncontrolledProp };
+
+type FilterFlags<Base, Condition> = {
+  [Key in keyof Base]: NonNullable<Base[Key]> extends Condition ? Key : never;
+};
+type AllowedNames<Base, Condition> = FilterFlags<Base, Condition>[keyof Base];
+
+type ConfigMap<TProps extends object> = {
+  [p in keyof TProps]?: AllowedNames<TProps, Function>;
+};
+
+export function useUncontrolled<
+  TProps extends object,
+  TDefaults extends string = never
+>(props: TProps, config: ConfigMap<TProps>): Omit<TProps, TDefaults> {
+  return Object.keys(config).reduce((result: TProps, fieldName: string) => {
+    const {
+      [defaultKey(fieldName)]: defaultValue,
+      [fieldName]: propsValue,
+      ...rest
+    } = result as any;
+
+    const handlerName = config[fieldName];
+    const [value, handler] = useUncontrolledProp(
+      propsValue,
+      defaultValue,
+      props[handlerName]
+    );
+
+    return {
+      ...rest,
+      [fieldName]: value,
+      [handlerName]: handler,
+    };
+  }, props);
+}
diff --git a/warning/warning.d.ts b/warning/warning.d.ts
new file mode 100644
index 0000000..a0e247e
--- /dev/null
+++ b/warning/warning.d.ts
@@ -0,0 +1,2 @@
+declare const warning: (condition: any, format?: string, ...extra: any[]) => void;
+export = warning;
\ No newline at end of file
diff --git a/warning/warning.ts b/warning/warning.ts
new file mode 100644
index 0000000..281d85b
--- /dev/null
+++ b/warning/warning.ts
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+/**
+ * Similar to invariant but only logs a warning if the condition is not met.
+ * This can be used to log issues in development environments in critical
+ * paths. Removing the logging code for production environments will keep the
+ * same logic and follow the same code paths.
+ */
+
+var __DEV__ = process.env.NODE_ENV !== 'production';
+
+var warning = function() {};
+
+if (__DEV__) {
+  var printWarning = function printWarning(format, args) {
+    var len = arguments.length;
+    args = new Array(len > 1 ? len - 1 : 0);
+    for (var key = 1; key < len; key++) {
+      args[key - 1] = arguments[key];
+    }
+    var argIndex = 0;
+    var message = 'Warning: ' +
+      format.replace(/%s/g, function() {
+        return args[argIndex++];
+      });
+    if (typeof console !== 'undefined') {
+      console.error(message);
+    }
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      throw new Error(message);
+    } catch (x) {}
+  }
+
+  warning = function(condition, format, args) {
+    var len = arguments.length;
+    args = new Array(len > 2 ? len - 2 : 0);
+    for (var key = 2; key < len; key++) {
+      args[key - 2] = arguments[key];
+    }
+    if (format === undefined) {
+      throw new Error(
+          '`warning(condition, format, ...args)` requires a warning ' +
+          'message argument'
+      );
+    }
+    if (!condition) {
+      printWarning.apply(null, [format].concat(args));
+    }
+  };
+}
+
+module.exports = warning;