diff --git a/.gitignore b/.gitignore
index 1f232cc5..37606d8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 *.bundle.*
 lib/
+!packages/react-components/lib/
 node_modules/
 *.log
 .eslintcache
@@ -30,11 +31,10 @@ __pycache__/
 .Python
 build/
 develop-eggs/
-dist/
+**/dist/*
 downloads/
 eggs/
 .eggs/
-lib/
 lib64/
 parts/
 sdist/
diff --git a/.prettierignore b/.prettierignore
index 194eb186..c89a4c8f 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -27,3 +27,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 tests-out/
+
+!packages/react-components/lib
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3f17da59..982bc01d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -30,6 +30,24 @@ cd packages/components
 yarn start
 ```
 
+### React components
+
+The react components wrapper are initialized using [custom-element-react-wrappers](https://github.com/break-stuff/cem-tools/tree/main/packages/react-wrappers).
+The initialization can be reproduced by running in `packages/components` the script `yarn run build:react`.
+Unfortunately the initial code needs lots of changes to be usable in this case:
+
+- Changing the typing to inherit from `React.AllHTMLAttributes` - minus some event handlers that needs to be overridden.
+- Changing `useImperativeHandle` to expose the full HTMLElement using:
+
+```js
+useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+```
+
+- Remove internal fast-specific properties like `$presentation`, `styles` and `template`.
+- The tag name, the properties and the events are extracted from the doc string of
+  the element class definition in `packages/components`. You may need to add some
+  new doc tags to get all the properties and events.
+
 ### JupyterLab demo extension
 
 To test locally the JupyterLab demo extension, using `conda` package manager:
diff --git a/packages/components/custom-elements-manifest.config.mjs b/packages/components/custom-elements-manifest.config.mjs
new file mode 100644
index 00000000..3dcdce80
--- /dev/null
+++ b/packages/components/custom-elements-manifest.config.mjs
@@ -0,0 +1,43 @@
+/* global process */
+import { customElementReactWrapperPlugin } from 'custom-element-react-wrappers';
+
+/**
+ * Custom element manifest plugin to remove the
+ * Jupyter prefix in the element class name to
+ * get a better naming for the generated react components.
+ */
+function renameClassElement() {
+  return {
+    name: 'rename-class-element-plugin',
+    packageLinkPhase({ customElementsManifest, context }) {
+      customElementsManifest.modules.forEach(module => {
+        module.declarations.forEach(declaration => {
+          // Remove the prefix `Jupyter` for simpler naming
+          if (declaration.tagName && declaration.name.startsWith('Jupyter')) {
+            declaration.name = declaration.name.slice(7);
+          }
+        });
+      });
+    }
+  };
+}
+
+const plugins = [renameClassElement()];
+
+if (process.env.BUILD_REACT) {
+  plugins.push(
+    customElementReactWrapperPlugin({
+      outdir: '../react-components/lib',
+      modulePath: (className, tagName) => '@jupyter/web-components'
+    })
+  );
+}
+
+export default {
+  fast: true,
+  outdir: 'dist',
+  dependencies: true,
+  globs: ['src/**/index.ts'],
+  exclude: ['src/index.ts', 'src/styles', 'src/utilities'],
+  plugins
+};
diff --git a/packages/components/package.json b/packages/components/package.json
index 36a8453c..73e3c243 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -25,8 +25,9 @@
   "scripts": {
     "start": "storybook dev -p 6006",
     "start:ci": "storybook dev -p 6006 --ci --quiet",
-    "build": "rollup -c && tsc -p ./tsconfig.json",
+    "build": "rollup -c && tsc -p ./tsconfig.json && custom-elements-manifest analyze",
     "build:docs": "storybook build",
+    "build:react": "BUILD_REACT=1 custom-elements-manifest analyze",
     "clean": "yarn clean:lib && yarn clean:test",
     "clean:lib": "rimraf dist",
     "clean:test": "rimraf test-results tests-out/**/*.js tests-out/**/*.js.map tsconfig.playwright.tsbuildinfo",
@@ -49,6 +50,7 @@
   "devDependencies": {
     "@babel/core": "^7.22.5",
     "@babel/preset-env": "^7.22.5",
+    "@custom-elements-manifest/analyzer": "^0.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@microsoft/api-extractor": "^7.36.0",
@@ -69,6 +71,7 @@
     "@types/node": "^18.0.0",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "custom-element-react-wrappers": "^1.6.0",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.25.2",
@@ -98,5 +101,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "customElements": "dist/custom-elements.json"
 }
diff --git a/packages/components/src/accordion-item/index.ts b/packages/components/src/accordion-item/index.ts
index e3a5e51f..6e3a6337 100644
--- a/packages/components/src/accordion-item/index.ts
+++ b/packages/components/src/accordion-item/index.ts
@@ -9,6 +9,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { accordionItemStyles as styles } from './accordion-item.styles.js';
 
+/**
+ * Accordion item class
+ *
+ * @public
+ * @tagname jp-accordion-item
+ */
+class JupyterAccordionItem extends AccordionItem {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#AccordionItem} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#accordionItemTemplate}
@@ -18,11 +26,13 @@ import { accordionItemStyles as styles } from './accordion-item.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-accordion-item>`
  */
-export const jpAccordionItem = AccordionItem.compose<AccordionItemOptions>({
-  baseName: 'accordion-item',
-  template,
-  styles,
-  collapsedIcon: /* html */ `
+export const jpAccordionItem =
+  JupyterAccordionItem.compose<AccordionItemOptions>({
+    baseName: 'accordion-item',
+    baseClass: AccordionItem,
+    template,
+    styles,
+    collapsedIcon: /* html */ `
         <svg
             width="20"
             height="20"
@@ -36,7 +46,7 @@ export const jpAccordionItem = AccordionItem.compose<AccordionItemOptions>({
             />
         </svg>
     `,
-  expandedIcon: /* html */ `
+    expandedIcon: /* html */ `
         <svg
             width="20"
             height="20"
@@ -51,12 +61,8 @@ export const jpAccordionItem = AccordionItem.compose<AccordionItemOptions>({
             />
         </svg>
     `
-});
+  });
 
-/**
- * Base class for Accordion item
- * @public
- */
-export { AccordionItem };
+export { JupyterAccordionItem as AccordionItem };
 
 export { styles as accordionItemStyles };
diff --git a/packages/components/src/accordion/index.ts b/packages/components/src/accordion/index.ts
index 0c86cdbd..eefe526c 100644
--- a/packages/components/src/accordion/index.ts
+++ b/packages/components/src/accordion/index.ts
@@ -10,6 +10,14 @@ import { accordionStyles as styles } from './accordion.styles.js';
 
 export * from '../accordion-item/index.js';
 
+/**
+ * Accordion class
+ *
+ * @public
+ * @tagname jp-accordion
+ */
+class JupyterAccordion extends Accordion {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Accordion} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#accordionTemplate}
@@ -19,16 +27,13 @@ export * from '../accordion-item/index.js';
  * @remarks
  * Generates HTML Element: `<jp-accordion>`
  */
-export const jpAccordion = Accordion.compose({
+export const jpAccordion = JupyterAccordion.compose({
   baseName: 'accordion',
+  baseClass: Accordion,
   template,
   styles
 });
 
-/**
- * Base class for Accordion
- * @public
- */
-export { Accordion };
+export { JupyterAccordion as Accordion };
 
 export { styles as accordionStyles };
diff --git a/packages/components/src/anchor/index.ts b/packages/components/src/anchor/index.ts
index 7a02b78f..0156b549 100644
--- a/packages/components/src/anchor/index.ts
+++ b/packages/components/src/anchor/index.ts
@@ -3,10 +3,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { attr } from '@microsoft/fast-element';
-import {
-  Anchor as FoundationAnchor,
-  anchorTemplate as template
-} from '@microsoft/fast-foundation';
+import { Anchor, anchorTemplate as template } from '@microsoft/fast-foundation';
 import { ButtonAppearance } from '../button/index.js';
 import { anchorStyles as styles } from './anchor.styles.js';
 
@@ -17,10 +14,11 @@ import { anchorStyles as styles } from './anchor.styles.js';
 export type AnchorAppearance = ButtonAppearance | 'hypertext';
 
 /**
- * Base class for Anchor
+ * Anchor class
  * @public
+ * @tagname jp-anchor
  */
-export class Anchor extends FoundationAnchor {
+class JupyterAnchor extends Anchor {
   /**
    * The appearance the anchor should have.
    *
@@ -80,9 +78,9 @@ export class Anchor extends FoundationAnchor {
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export const jpAnchor = Anchor.compose({
+export const jpAnchor = JupyterAnchor.compose({
   baseName: 'anchor',
-  baseClass: FoundationAnchor,
+  baseClass: Anchor,
   template,
   styles,
   shadowOptions: {
@@ -90,4 +88,6 @@ export const jpAnchor = Anchor.compose({
   }
 });
 
+export { JupyterAnchor as Anchor };
+
 export { styles as anchorStyles };
diff --git a/packages/components/src/anchored-region/index.ts b/packages/components/src/anchored-region/index.ts
index 78fad4d8..55f9af00 100644
--- a/packages/components/src/anchored-region/index.ts
+++ b/packages/components/src/anchored-region/index.ts
@@ -8,6 +8,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { anchoredRegionStyles as styles } from './anchored-region.styles.js';
 
+/**
+ * Anchored region class
+ *
+ * @public
+ * @tagname jp-anchored-region
+ */
+class JupyterAnchoredRegion extends AnchoredRegion {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#AnchoredRegion} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#anchoredRegionTemplate}
@@ -17,16 +25,13 @@ import { anchoredRegionStyles as styles } from './anchored-region.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-anchored-region>`
  */
-export const jpAnchoredRegion = AnchoredRegion.compose({
+export const jpAnchoredRegion = JupyterAnchoredRegion.compose({
   baseName: 'anchored-region',
+  baseClass: AnchoredRegion,
   template,
   styles
 });
 
-/**
- * Base class for AnchoredRegion
- * @public
- */
-export { AnchoredRegion };
+export { JupyterAnchoredRegion as AnchoredRegion };
 
 export { styles as anchoredRegionStyles };
diff --git a/packages/components/src/avatar/index.ts b/packages/components/src/avatar/index.ts
index 47b4f6bd..50fe3784 100644
--- a/packages/components/src/avatar/index.ts
+++ b/packages/components/src/avatar/index.ts
@@ -5,17 +5,18 @@
 import { attr, html, when } from '@microsoft/fast-element';
 import {
   AvatarOptions,
-  Avatar as FoundationAvatar,
+  Avatar,
   avatarTemplate as template
 } from '@microsoft/fast-foundation';
 import { avatarStyles as styles } from './avatar.styles.js';
 
 /**
- * The Jupyter Avatar Class
- * @public
+ * Jupyter Avatar Class
  *
+ * @public
+ * @tagname jp-avatar
  */
-export class Avatar extends FoundationAvatar {
+class JupyterAvatar extends Avatar {
   /**
    * Indicates the Avatar should have an image source
    *
@@ -41,7 +42,7 @@ export class Avatar extends FoundationAvatar {
  *  @public
  *
  */
-export const imgTemplate = html<Avatar>`
+export const imgTemplate = html<JupyterAvatar>`
   ${when(
     x => x.imgSrc,
     html`
@@ -65,9 +66,9 @@ export const imgTemplate = html<Avatar>`
  * @remarks
  * Generates HTML Element: `<jp-avatar>`
  */
-export const jpAvatar = Avatar.compose<AvatarOptions>({
+export const jpAvatar = JupyterAvatar.compose<AvatarOptions>({
   baseName: 'avatar',
-  baseClass: FoundationAvatar,
+  baseClass: Avatar,
   template,
   styles,
   media: imgTemplate,
@@ -76,4 +77,6 @@ export const jpAvatar = Avatar.compose<AvatarOptions>({
   }
 });
 
+export { JupyterAvatar as Avatar };
+
 export { styles as avatarStyles };
diff --git a/packages/components/src/badge/index.ts b/packages/components/src/badge/index.ts
index dd8f306b..371bf9b7 100644
--- a/packages/components/src/badge/index.ts
+++ b/packages/components/src/badge/index.ts
@@ -5,6 +5,14 @@
 import { Badge, badgeTemplate as template } from '@microsoft/fast-foundation';
 import { badgeStyles as styles } from './badge.styles.js';
 
+/**
+ * Badge class
+ *
+ * @public
+ * @tagname jp-badge
+ */
+class JupyterBadge extends Badge {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Badge} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#badgeTemplate}
@@ -14,16 +22,13 @@ import { badgeStyles as styles } from './badge.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-badge>`
  */
-export const jpBadge = Badge.compose({
+export const jpBadge = JupyterBadge.compose({
   baseName: 'badge',
+  baseClass: Badge,
   template,
   styles
 });
 
-/**
- * Base class for Badge
- * @public
- */
-export { Badge };
+export { JupyterBadge as Badge };
 
 export { styles as badgeStyles };
diff --git a/packages/components/src/breadcrumb-item/index.ts b/packages/components/src/breadcrumb-item/index.ts
index 94d6790c..bb95c23c 100644
--- a/packages/components/src/breadcrumb-item/index.ts
+++ b/packages/components/src/breadcrumb-item/index.ts
@@ -9,6 +9,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles.js';
 
+/**
+ * Breadcrumb item class
+ *
+ * @public
+ * @tagname jp-breadcrumb-item
+ */
+class JupyterBreadcrumbItem extends BreadcrumbItem {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#BreadcrumbItem} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#breadcrumbItemTemplate}
@@ -18,20 +26,18 @@ import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-breadcrumb-item>`
  */
-export const jpBreadcrumbItem = BreadcrumbItem.compose<BreadcrumbItemOptions>({
-  baseName: 'breadcrumb-item',
-  template,
-  styles,
-  separator: '/',
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
+export const jpBreadcrumbItem =
+  JupyterBreadcrumbItem.compose<BreadcrumbItemOptions>({
+    baseName: 'breadcrumb-item',
+    baseClass: BreadcrumbItem,
+    template,
+    styles,
+    separator: '/',
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  });
 
-/**
- * Base class for BreadcrumbItem
- * @public
- */
-export { BreadcrumbItem };
+export { JupyterBreadcrumbItem as BreadcrumbItem };
 
 export { styles as breadcrumbItemStyles };
diff --git a/packages/components/src/breadcrumb/index.ts b/packages/components/src/breadcrumb/index.ts
index 0ec60bb7..f086ab1f 100644
--- a/packages/components/src/breadcrumb/index.ts
+++ b/packages/components/src/breadcrumb/index.ts
@@ -8,6 +8,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { breadcrumbStyles as styles } from './breadcrumb.styles.js';
 
+/**
+ * Breadcrumb class
+ *
+ * @public
+ * @tagname jp-breadcrumb
+ */
+class JupyterBreadcrumb extends Breadcrumb {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Breadcrumb} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#breadcrumbTemplate}
@@ -17,16 +25,13 @@ import { breadcrumbStyles as styles } from './breadcrumb.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-breadcrumb>`
  */
-export const jpBreadcrumb = Breadcrumb.compose({
+export const jpBreadcrumb = JupyterBreadcrumb.compose({
   baseName: 'breadcrumb',
+  baseClass: Breadcrumb,
   template,
   styles
 });
 
-/**
- * Base class for Breadcrumb
- * @public
- */
-export { Breadcrumb };
+export { JupyterBreadcrumb as Breadcrumb };
 
 export { styles as breadcrumbStyles };
diff --git a/packages/components/src/button/index.ts b/packages/components/src/button/index.ts
index be74bcd4..ff0d4ab3 100644
--- a/packages/components/src/button/index.ts
+++ b/packages/components/src/button/index.ts
@@ -3,10 +3,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { attr } from '@microsoft/fast-element';
-import {
-  Button as FoundationButton,
-  buttonTemplate as template
-} from '@microsoft/fast-foundation';
+import { Button, buttonTemplate as template } from '@microsoft/fast-foundation';
 import { buttonStyles as styles } from './button.styles.js';
 
 /**
@@ -22,9 +19,12 @@ export type ButtonAppearance =
   | 'stealth';
 
 /**
- * @internal
+ * Button class
+ *
+ * @public
+ * @tagname jp-button
  */
-export class Button extends FoundationButton {
+class JupyterButton extends Button {
   /**
    * The appearance the button should have.
    *
@@ -82,9 +82,9 @@ export class Button extends FoundationButton {
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export const jpButton = Button.compose({
+export const jpButton = JupyterButton.compose({
   baseName: 'button',
-  baseClass: FoundationButton,
+  baseClass: Button,
   template,
   styles,
   shadowOptions: {
@@ -92,4 +92,6 @@ export const jpButton = Button.compose({
   }
 });
 
+export { JupyterButton as Button };
+
 export { styles as buttonStyles };
diff --git a/packages/components/src/card/index.ts b/packages/components/src/card/index.ts
index 5cc3908e..c0202445 100644
--- a/packages/components/src/card/index.ts
+++ b/packages/components/src/card/index.ts
@@ -4,7 +4,7 @@
 
 import {
   composedParent,
-  Card as FoundationCard,
+  Card,
   cardTemplate as template
 } from '@microsoft/fast-foundation';
 import { Swatch } from '../color/swatch.js';
@@ -12,9 +12,12 @@ import { fillColor, neutralFillLayerRecipe } from '../design-tokens.js';
 import { cardStyles as styles } from './card.styles.js';
 
 /**
- * @internal
+ * Card class
+ *
+ * @public
+ * @tagname jp-card
  */
-export class Card extends FoundationCard {
+class JupyterCard extends Card {
   connectedCallback() {
     super.connectedCallback();
 
@@ -41,11 +44,13 @@ export class Card extends FoundationCard {
  * @remarks
  * Generates HTML Element: `<jp-card>`
  */
-export const jpCard = Card.compose({
+export const jpCard = JupyterCard.compose({
   baseName: 'card',
-  baseClass: FoundationCard,
+  baseClass: Card,
   template,
   styles
 });
 
+export { JupyterCard as Card };
+
 export { styles as cardStyles };
diff --git a/packages/components/src/checkbox/index.ts b/packages/components/src/checkbox/index.ts
index f4963bc0..bcafe3fd 100644
--- a/packages/components/src/checkbox/index.ts
+++ b/packages/components/src/checkbox/index.ts
@@ -3,7 +3,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  Checkbox as BaseCheckbox,
+  Checkbox,
   CheckboxOptions,
   FoundationElementTemplate
 } from '@microsoft/fast-foundation';
@@ -15,7 +15,7 @@ import { ViewTemplate, html, slotted } from '@microsoft/fast-element';
  * @public
  */
 export const checkboxTemplate: FoundationElementTemplate<
-  ViewTemplate<Checkbox>,
+  ViewTemplate<JupyterCheckbox>,
   CheckboxOptions
 > = (context, definition) => html`
   <template
@@ -49,10 +49,12 @@ export const checkboxTemplate: FoundationElementTemplate<
 `;
 
 /**
- * Base class for Checkbox
+ * Checkbox class
+ *
  * @public
+ * @tagname jp-checkbox
  */
-export class Checkbox extends BaseCheckbox {
+class JupyterCheckbox extends Checkbox {
   indeterminateChanged(prev: boolean, next: boolean): void {
     if (this.indeterminate) {
       this.classList.add('indeterminate');
@@ -71,9 +73,9 @@ export class Checkbox extends BaseCheckbox {
  * @remarks
  * Generates HTML Element: `<jp-checkbox>`
  */
-export const jpCheckbox = Checkbox.compose<CheckboxOptions>({
+export const jpCheckbox = JupyterCheckbox.compose<CheckboxOptions>({
   baseName: 'checkbox',
-  baseClass: BaseCheckbox,
+  baseClass: Checkbox,
   template: checkboxTemplate,
   styles,
   checkedIndicator: /* html */ `
@@ -95,4 +97,6 @@ export const jpCheckbox = Checkbox.compose<CheckboxOptions>({
     `
 });
 
+export { JupyterCheckbox as Checkbox };
+
 export { styles as checkboxStyles };
diff --git a/packages/components/src/combobox/index.ts b/packages/components/src/combobox/index.ts
index b847202a..50c4282e 100644
--- a/packages/components/src/combobox/index.ts
+++ b/packages/components/src/combobox/index.ts
@@ -5,17 +5,21 @@
 import { attr, css, ElementStyles } from '@microsoft/fast-element';
 import type { ComboboxOptions } from '@microsoft/fast-foundation';
 import {
-  Combobox as FoundationCombobox,
+  Combobox,
   comboboxTemplate as template
 } from '@microsoft/fast-foundation';
 import { heightNumberAsToken } from '../design-tokens.js';
 import { comboboxStyles as styles } from './combobox.styles.js';
 
 /**
- * Base class for Combobox.
+ * Combobox class
+ *
  * @public
+ * @tagname jp-combobox
+ *
+ * @fires input - Fires a custom 'input' event when the value has changed
  */
-export class Combobox extends FoundationCombobox {
+class JupyterCombobox extends Combobox {
   /**
    * Whether the combobox has a compact layout or not.
    *
@@ -145,9 +149,9 @@ export class Combobox extends FoundationCombobox {
  * Generates HTML Element: `<jp-combobox>`
  *
  */
-export const jpCombobox = Combobox.compose<ComboboxOptions>({
+export const jpCombobox = JupyterCombobox.compose<ComboboxOptions>({
   baseName: 'combobox',
-  baseClass: FoundationCombobox,
+  baseClass: Combobox,
   template,
   styles,
   shadowOptions: {
@@ -167,4 +171,6 @@ export const jpCombobox = Combobox.compose<ComboboxOptions>({
     `
 });
 
+export { JupyterCombobox as Combobox };
+
 export { styles as comboboxStyles };
diff --git a/packages/components/src/data-grid/index.ts b/packages/components/src/data-grid/index.ts
index e331127f..6cc9cac6 100644
--- a/packages/components/src/data-grid/index.ts
+++ b/packages/components/src/data-grid/index.ts
@@ -14,6 +14,14 @@ import { dataGridStyles } from './data-grid.styles.js';
 import { dataGridRowStyles } from './data-grid-row.styles.js';
 import { dataGridCellStyles } from './data-grid-cell.styles.js';
 
+/**
+ * DataGridCell class
+ *
+ * @public
+ * @tagname jp-data-grid-cell
+ */
+class JupyterDataGridCell extends DataGridCell {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#DataGridCell} registration for configuring the component with a DesignSystem.
  *
@@ -21,12 +29,21 @@ import { dataGridCellStyles } from './data-grid-cell.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-data-grid-cell>`
  */
-export const jpDataGridCell = DataGridCell.compose({
+export const jpDataGridCell = JupyterDataGridCell.compose({
   baseName: 'data-grid-cell',
+  baseClass: DataGridCell,
   template: dataGridCellTemplate,
   styles: dataGridCellStyles
 });
 
+/**
+ * DataGridRow class
+ *
+ * @public
+ * @tagname jp-data-grid-row
+ */
+class JupyterDataGridRow extends DataGridRow {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#DataGridRow} registration for configuring the component with a DesignSystem.
  *
@@ -34,12 +51,21 @@ export const jpDataGridCell = DataGridCell.compose({
  * @remarks
  * Generates HTML Element: `<jp-data-grid-row>`
  */
-export const jpDataGridRow = DataGridRow.compose({
+export const jpDataGridRow = JupyterDataGridRow.compose({
   baseName: 'data-grid-row',
+  baseClass: DataGridRow,
   template: dataGridRowTemplate,
   styles: dataGridRowStyles
 });
 
+/**
+ * DataGrid class
+ *
+ * @public
+ * @tagname jp-data-grid
+ */
+class JupyterDataGrid extends DataGrid {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#DataGrid} registration for configuring the component with a DesignSystem.
  *
@@ -47,28 +73,18 @@ export const jpDataGridRow = DataGridRow.compose({
  * @remarks
  * Generates HTML Element: `<jp-data-grid>`
  */
-export const jpDataGrid = DataGrid.compose({
+export const jpDataGrid = JupyterDataGrid.compose({
   baseName: 'data-grid',
+  baseClass: DataGrid,
   template: dataGridTemplate,
   styles: dataGridStyles
 });
 
-/**
- * Base class for DataGrid
- * @public
- */
-export { DataGrid };
-
-/**
- * Base class for DataGridRow
- * @public
- */
-export { DataGridRow };
-
-/**
- * Base class for DataGridCell
- * @public
- */
-export { DataGridCell };
-
-export { dataGridCellStyles, dataGridStyles, dataGridRowStyles };
+export {
+  JupyterDataGrid as DataGrid,
+  JupyterDataGridRow as DataGridRow,
+  JupyterDataGridCell as DataGridCell,
+  dataGridCellStyles,
+  dataGridStyles,
+  dataGridRowStyles
+};
diff --git a/packages/components/src/date-field/date-field.ts b/packages/components/src/date-field/date-field.ts
index 8ad8c8d5..12b4022d 100644
--- a/packages/components/src/date-field/date-field.ts
+++ b/packages/components/src/date-field/date-field.ts
@@ -37,6 +37,10 @@ const INVALID_DATE = 'Invalid Date';
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date | <input type="date" /> element }.
  *
  * @public
+ * @tagname jp-date-field
+ *
+ * @fires input - Fires a custom 'input' event when the value has changed
+ * @fires change - Fires a custom 'change' event when the value has changed
  */
 export class DateField extends FormAssociatedDateField {
   /**
diff --git a/packages/components/src/dialog/index.ts b/packages/components/src/dialog/index.ts
index af571abc..c9b9eb60 100644
--- a/packages/components/src/dialog/index.ts
+++ b/packages/components/src/dialog/index.ts
@@ -5,6 +5,14 @@
 import { Dialog, dialogTemplate as template } from '@microsoft/fast-foundation';
 import { dialogStyles as styles } from './dialog.styles.js';
 
+/**
+ * Dialog class
+ *
+ * @public
+ * @tagname jp-dialog
+ */
+class JupyterDialog extends Dialog {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Dialog} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#dialogTemplate}
@@ -15,16 +23,11 @@ import { dialogStyles as styles } from './dialog.styles.js';
  * HTML Element: `<jp-dialog>`
  *
  */
-export const jpDialog = Dialog.compose({
+export const jpDialog = JupyterDialog.compose({
   baseName: 'dialog',
+  baseClass: Dialog,
   template,
   styles
 });
 
-/**
- * Base class for Dialog
- * @public
- */
-export { Dialog };
-
-export { styles as dialogStyles };
+export { JupyterDialog as Dialog, styles as dialogStyles };
diff --git a/packages/components/src/disclosure/index.ts b/packages/components/src/disclosure/index.ts
index 02feb442..bfb34169 100644
--- a/packages/components/src/disclosure/index.ts
+++ b/packages/components/src/disclosure/index.ts
@@ -4,7 +4,7 @@
 
 import { attr } from '@microsoft/fast-element';
 import {
-  Disclosure as FoundationDisclosure,
+  Disclosure,
   disclosureTemplate as template
 } from '@microsoft/fast-foundation';
 import { disclosureStyles as styles } from './disclosure.styles.js';
@@ -15,9 +15,12 @@ import { disclosureStyles as styles } from './disclosure.styles.js';
 export type DisclosureAppearance = 'accent' | 'lightweight';
 
 /**
- * @internal
+ * Disclosure class
+ *
+ * @public
+ * @tagname jp-disclosure
  */
-export class Disclosure extends FoundationDisclosure {
+class JupyterDisclosure extends Disclosure {
   /**
    * Disclosure default height
    */
@@ -95,11 +98,11 @@ export class Disclosure extends FoundationDisclosure {
  * Generates HTML Element: `<jp-Disclosure>`
  *
  */
-export const jpDisclosure = Disclosure.compose({
+export const jpDisclosure = JupyterDisclosure.compose({
   baseName: 'disclosure',
-  baseClass: FoundationDisclosure,
+  baseClass: Disclosure,
   template,
   styles
 });
 
-export { styles as disclosureStyles };
+export { JupyterDisclosure as Disclosure, styles as disclosureStyles };
diff --git a/packages/components/src/divider/index.ts b/packages/components/src/divider/index.ts
index 9fdf0ec2..2ec79c9b 100644
--- a/packages/components/src/divider/index.ts
+++ b/packages/components/src/divider/index.ts
@@ -8,6 +8,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { dividerStyles as styles } from './divider.styles.js';
 
+/**
+ * Divider class
+ *
+ * @public
+ * @tagname jp-divider
+ */
+class JupyterDivider extends Divider {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Divider} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#dividerTemplate}
@@ -17,16 +25,11 @@ import { dividerStyles as styles } from './divider.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-divider>`
  */
-export const jpDivider = Divider.compose({
+export const jpDivider = JupyterDivider.compose({
   baseName: 'divider',
+  baseClass: Divider,
   template,
   styles
 });
 
-/**
- * Base class for Divider
- * @public
- */
-export { Divider };
-
-export { styles as dividerStyles };
+export { JupyterDivider as Divider, styles as dividerStyles };
diff --git a/packages/components/src/drafts/picker/index.ts b/packages/components/src/drafts/picker/index.ts
index 519465c4..39a23338 100644
--- a/packages/components/src/drafts/picker/index.ts
+++ b/packages/components/src/drafts/picker/index.ts
@@ -4,7 +4,7 @@
 
 import {
   FoundationElementDefinition,
-  PickerMenu as FoundationPickerMenu,
+  PickerMenu,
   Picker,
   PickerList,
   PickerListItem,
@@ -23,7 +23,15 @@ import { pickerListStyles } from './picker-list.styles.js';
 import { pickerListItemStyles } from './picker-list-item.styles.js';
 
 /**
- * The FAST  Picker Custom Element. Implements {@link @microsoft/fast-foundation#Picker},
+ * Picker class
+ * @alpha
+ * @public
+ * @tagname jp-draft-picker
+ */
+class JupyterPicker extends Picker {}
+
+/**
+ * The FAST Picker Custom Element. Implements {@link @microsoft/fast-foundation#Picker},
  * {@link @microsoft/fast-foundation#PickerTemplate}
  *
  *
@@ -31,23 +39,22 @@ import { pickerListItemStyles } from './picker-list-item.styles.js';
  * @remarks
  * * Generates HTML Element: `<jp-draft-picker>`
  */
-export const jpPicker = Picker.compose({
+export const jpPicker = JupyterPicker.compose({
   baseName: 'draft-picker',
+  baseClass: Picker,
   template: pickerTemplate,
   styles: pickerStyles,
   shadowOptions: {}
 });
 
 /**
- * Base class for Picker
+ * Picker menu class
+ *
  * @alpha
- */
-export { Picker };
-
-/**
  * @public
+ * @tagname jp-draft-picker-menu
  */
-export class PickerMenu extends FoundationPickerMenu {
+class JupyterPickerMenu extends PickerMenu {
   /**
    * @public
    */
@@ -66,12 +73,22 @@ export class PickerMenu extends FoundationPickerMenu {
  * @remarks
  * HTML Element: \<jp-draft-picker-menu\>
  */
-export const jpPickerMenu = PickerMenu.compose<FoundationElementDefinition>({
-  baseName: 'draft-picker-menu',
-  baseClass: FoundationPickerMenu,
-  template: pickerMenuTemplate,
-  styles: pickerMenuStyles
-});
+export const jpPickerMenu =
+  JupyterPickerMenu.compose<FoundationElementDefinition>({
+    baseName: 'draft-picker-menu',
+    baseClass: PickerMenu,
+    template: pickerMenuTemplate,
+    styles: pickerMenuStyles
+  });
+
+/**
+ * Picker menu options class
+ *
+ * @alpha
+ * @public
+ * @tagname jp-draft-picker-menu-option
+ */
+class JupyterPickerMenuOption extends PickerMenuOption {}
 
 /**
  *  Component that displays available picker menu options
@@ -81,12 +98,22 @@ export const jpPickerMenu = PickerMenu.compose<FoundationElementDefinition>({
  * @remarks
  * HTML Element: \<jp-draft-picker-menu-option\>
  */
-export const jpPickerMenuOption = PickerMenuOption.compose({
+export const jpPickerMenuOption = JupyterPickerMenuOption.compose({
   baseName: 'draft-picker-menu-option',
+  baseClass: PickerMenuOption,
   template: pickerMenuOptionTemplate,
   styles: pickerMenuOptionStyles
 });
 
+/**
+ * Picker list class
+ *
+ * @alpha
+ * @public
+ * @tagname jp-draft-picker-list
+ */
+class JupyterPickerList extends PickerList {}
+
 /**
  * Component that displays the list of selected picker items along
  * with the input combobox
@@ -96,12 +123,22 @@ export const jpPickerMenuOption = PickerMenuOption.compose({
  * HTML Element: \<jp-draft-picker-list\>
  *
  */
-export const jpPickerList = PickerList.compose({
+export const jpPickerList = JupyterPickerList.compose({
   baseName: 'draft-picker-list',
+  baseClass: PickerList,
   template: pickerListTemplate,
   styles: pickerListStyles
 });
 
+/**
+ * Picker list item class
+ *
+ * @alpha
+ * @public
+ * @tagname jp-draft-picker-list-item
+ */
+class JupyterPickerListItem extends PickerListItem {}
+
 /**
  * Component that displays selected items
  *
@@ -109,13 +146,19 @@ export const jpPickerList = PickerList.compose({
  * @remarks
  * HTML Element: \<jp-draft-picker-list-item\>
  */
-export const jpPickerListItem = PickerListItem.compose({
+export const jpPickerListItem = JupyterPickerListItem.compose({
   baseName: 'draft-picker-list-item',
+  baseClass: PickerListItem,
   template: pickerListItemTemplate,
   styles: pickerListItemStyles
 });
 
 export {
+  JupyterPicker as Picker,
+  JupyterPickerMenu as PickerMenu,
+  JupyterPickerMenuOption as PickerMenuOption,
+  JupyterPickerList as PickerList,
+  JupyterPickerListItem as PickerListItem,
   pickerStyles,
   pickerListItemStyles,
   pickerMenuOptionStyles,
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 7bbe08cc..7456f380 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -23,6 +23,7 @@ export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './combobox/index.js';
+export * from './date-field/index.js';
 export * from './data-grid/index.js';
 export * from './design-system-provider/index.js';
 export { Palette, PaletteRGB } from './color/palette.js';
diff --git a/packages/components/src/listbox/index.ts b/packages/components/src/listbox/index.ts
index 5f9d47b8..9840a698 100644
--- a/packages/components/src/listbox/index.ts
+++ b/packages/components/src/listbox/index.ts
@@ -4,17 +4,20 @@
 
 import { css, ElementStyles } from '@microsoft/fast-element';
 import {
-  ListboxElement as FoundationListboxElement,
+  ListboxElement,
   listboxTemplate as template
 } from '@microsoft/fast-foundation';
 import { listboxStyles as styles } from './listbox.styles.js';
 
 /**
- * Base class for Listbox.
+ * Listbox class
  *
  * @public
+ * @tagname jp-listbox
+ *
+ * @fires change - Fires a custom 'change' event when the value has changed
  */
-export class Listbox extends FoundationListboxElement {
+class JupyterListbox extends ListboxElement {
   /**
    * An internal stylesheet to hold calculated CSS custom properties.
    *
@@ -67,11 +70,11 @@ export class Listbox extends FoundationListboxElement {
  * @public
  *
  */
-export const jpListbox = Listbox.compose({
+export const jpListbox = JupyterListbox.compose({
   baseName: 'listbox',
-  baseClass: FoundationListboxElement,
+  baseClass: ListboxElement,
   template,
   styles
 });
 
-export { styles as listboxStyles };
+export { JupyterListbox as Listbox, styles as listboxStyles };
diff --git a/packages/components/src/menu-item/index.ts b/packages/components/src/menu-item/index.ts
index bd938634..1ed27a62 100644
--- a/packages/components/src/menu-item/index.ts
+++ b/packages/components/src/menu-item/index.ts
@@ -9,6 +9,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { menuItemStyles as styles } from './menu-item.styles.js';
 
+/**
+ * Menu item class
+ *
+ * @public
+ * @tagname jp-menu-item
+ */
+class JupyterMenuItem extends MenuItem {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#MenuItem} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#menuItemTemplate}
@@ -18,8 +26,9 @@ import { menuItemStyles as styles } from './menu-item.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-menu-item>`
  */
-export const jpMenuItem = MenuItem.compose<MenuItemOptions>({
+export const jpMenuItem = JupyterMenuItem.compose<MenuItemOptions>({
   baseName: 'menu-item',
+  baseClass: MenuItem,
   template,
   styles,
   checkboxIndicator: /* html */ `
@@ -53,10 +62,4 @@ export const jpMenuItem = MenuItem.compose<MenuItemOptions>({
     `
 });
 
-/**
- * Base class for MenuItem
- * @public
- */
-export { MenuItem };
-
-export { styles as menuItemStyles };
+export { JupyterMenuItem as MenuItem, styles as menuItemStyles };
diff --git a/packages/components/src/menu/index.ts b/packages/components/src/menu/index.ts
index c86655a2..d30626db 100644
--- a/packages/components/src/menu/index.ts
+++ b/packages/components/src/menu/index.ts
@@ -2,17 +2,17 @@
 // Copyright (c) Microsoft Corporation.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  Menu as FoundationMenu,
-  menuTemplate as template
-} from '@microsoft/fast-foundation';
+import { Menu, menuTemplate as template } from '@microsoft/fast-foundation';
 import { fillColor, neutralLayerFloating } from '../design-tokens.js';
 import { menuStyles as styles } from './menu.styles.js';
 
 /**
+ * Menu class
+ *
  * @public
+ * @tagname jp-menu
  */
-export class Menu extends FoundationMenu {
+class JupyterMenu extends Menu {
   /**
    * @internal
    */
@@ -32,10 +32,11 @@ export class Menu extends FoundationMenu {
  * @remarks
  * Generates HTML Element: `<jp-menu>`
  */
-export const jpMenu = Menu.compose({
+export const jpMenu = JupyterMenu.compose({
   baseName: 'menu',
+  baseClass: Menu,
   template,
   styles
 });
 
-export { styles as menuStyles };
+export { JupyterMenu as Menu, styles as menuStyles };
diff --git a/packages/components/src/number-field/index.ts b/packages/components/src/number-field/index.ts
index 42195b9a..4c4c1235 100644
--- a/packages/components/src/number-field/index.ts
+++ b/packages/components/src/number-field/index.ts
@@ -4,7 +4,7 @@
 
 import { attr } from '@microsoft/fast-element';
 import {
-  NumberField as FoundationNumberField,
+  NumberField,
   NumberFieldOptions,
   numberFieldTemplate as template
 } from '@microsoft/fast-foundation';
@@ -17,9 +17,12 @@ import { numberFieldStyles as styles } from './number-field.styles.js';
 export type NumberFieldAppearance = 'filled' | 'outline';
 
 /**
- * @internal
+ * Number field class
+ *
+ * @public
+ * @tagname jp-number-field
  */
-export class NumberField extends FoundationNumberField {
+class JupyterNumberField extends NumberField {
   /**
    * The appearance of the element.
    *
@@ -42,9 +45,9 @@ export class NumberField extends FoundationNumberField {
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export const jpNumberField = NumberField.compose<NumberFieldOptions>({
+export const jpNumberField = JupyterNumberField.compose<NumberFieldOptions>({
   baseName: 'number-field',
-  baseClass: FoundationNumberField,
+  baseClass: NumberField,
   styles,
   template,
   shadowOptions: {
@@ -58,4 +61,4 @@ export const jpNumberField = NumberField.compose<NumberFieldOptions>({
     `
 });
 
-export { styles as numberFieldStyles };
+export { JupyterNumberField as NumberField, styles as numberFieldStyles };
diff --git a/packages/components/src/option/index.ts b/packages/components/src/option/index.ts
index 43900dd9..4c7a9146 100644
--- a/packages/components/src/option/index.ts
+++ b/packages/components/src/option/index.ts
@@ -8,6 +8,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { optionStyles as styles } from './option.styles.js';
 
+/**
+ * Listbox option class
+ *
+ * @public
+ * @tagname jp-option
+ */
+class JupyterOption extends ListboxOption {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#ListboxOption} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#listboxOptionTemplate}
@@ -18,16 +26,11 @@ import { optionStyles as styles } from './option.styles.js';
  * Generates HTML Element: `<jp-option>`
  *
  */
-export const jpOption = ListboxOption.compose({
+export const jpOption = JupyterOption.compose({
   baseName: 'option',
+  baseClass: ListboxOption,
   template,
   styles
 });
 
-/**
- * Base class for Option
- * @public
- */
-export { ListboxOption as Option };
-
-export { styles as optionStyles };
+export { JupyterOption as Option, styles as optionStyles };
diff --git a/packages/components/src/progress-ring/index.ts b/packages/components/src/progress-ring/index.ts
index 39e255dc..f39019aa 100644
--- a/packages/components/src/progress-ring/index.ts
+++ b/packages/components/src/progress-ring/index.ts
@@ -3,12 +3,20 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  BaseProgress as ProgressRing,
+  BaseProgress,
   ProgressRingOptions,
   progressRingTemplate as template
 } from '@microsoft/fast-foundation';
 import { progressRingStyles as styles } from './progress-ring.styles.js';
 
+/**
+ * Progress ring class
+ *
+ * @public
+ * @tagname jp-progress-ring
+ */
+class JupyterProgressRing extends BaseProgress {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#BaseProgress} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#progressRingTemplate}
@@ -18,8 +26,9 @@ import { progressRingStyles as styles } from './progress-ring.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-progress-ring>`
  */
-export const jpProgressRing = ProgressRing.compose<ProgressRingOptions>({
+export const jpProgressRing = JupyterProgressRing.compose<ProgressRingOptions>({
   baseName: 'progress-ring',
+  baseClass: BaseProgress,
   template,
   styles,
   indeterminateIndicator: /* html */ `
@@ -42,10 +51,4 @@ export const jpProgressRing = ProgressRing.compose<ProgressRingOptions>({
     `
 });
 
-/**
- * Base class for ProgressRing
- * @public
- */
-export { ProgressRing };
-
-export { styles as progressRingStyles };
+export { JupyterProgressRing as ProgressRing, styles as progressRingStyles };
diff --git a/packages/components/src/progress/index.ts b/packages/components/src/progress/index.ts
index c0978830..316f6a57 100644
--- a/packages/components/src/progress/index.ts
+++ b/packages/components/src/progress/index.ts
@@ -3,12 +3,20 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  BaseProgress as Progress,
+  BaseProgress,
   ProgressOptions,
   progressTemplate as template
 } from '@microsoft/fast-foundation';
 import { progressStyles as styles } from './progress.styles.js';
 
+/**
+ * Progress bar class
+ *
+ * @public
+ * @tagname jp-progress
+ */
+class JupyterProgress extends BaseProgress {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#BaseProgress} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#progressTemplate}
@@ -18,8 +26,9 @@ import { progressStyles as styles } from './progress.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-progress>`
  */
-export const jpProgress = Progress.compose<ProgressOptions>({
+export const jpProgress = JupyterProgress.compose<ProgressOptions>({
   baseName: 'progress',
+  baseClass: BaseProgress,
   template,
   styles,
   indeterminateIndicator1: /* html */ `
@@ -30,10 +39,4 @@ export const jpProgress = Progress.compose<ProgressOptions>({
     `
 });
 
-/**
- * Base class for Progress
- * @public
- */
-export { Progress };
-
-export { styles as progressStyles };
+export { JupyterProgress as Progress, styles as progressStyles };
diff --git a/packages/components/src/radio-group/index.ts b/packages/components/src/radio-group/index.ts
index 367ce5c2..9825b736 100644
--- a/packages/components/src/radio-group/index.ts
+++ b/packages/components/src/radio-group/index.ts
@@ -3,24 +3,25 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  RadioGroup as BaseRadioGroup,
+  RadioGroup,
   radioGroupTemplate as template
 } from '@microsoft/fast-foundation';
 import { radioGroupStyles as styles } from './radio-group.styles.js';
 import { Observable } from '@microsoft/fast-element';
 
 /**
- * Base class for RadioGroup
+ * RadioGroup class
  * @public
+ * @tagname jp-radio-group
  */
-export class RadioGroup extends BaseRadioGroup {
+class JupyterRadioGroup extends RadioGroup {
   constructor() {
     super();
 
     // FIXME work around for private slottedRadioButtonsChanged
     const notifier = Observable.getNotifier(this);
     const handler = {
-      handleChange(source: RadioGroup, propertyName: string) {
+      handleChange(source: JupyterRadioGroup, propertyName: string) {
         if (propertyName === 'slottedRadioButtons') {
           source.ariaInvalidChanged();
         }
@@ -51,11 +52,11 @@ export class RadioGroup extends BaseRadioGroup {
  * @remarks
  * Generates HTML Element: `<jp-radio-group>`
  */
-export const jpRadioGroup = RadioGroup.compose({
+export const jpRadioGroup = JupyterRadioGroup.compose({
   baseName: 'radio-group',
-  baseClass: BaseRadioGroup,
+  baseClass: RadioGroup,
   template,
   styles
 });
 
-export { styles as radioGroupStyles };
+export { JupyterRadioGroup as RadioGroup, styles as radioGroupStyles };
diff --git a/packages/components/src/radio/index.ts b/packages/components/src/radio/index.ts
index 4acb00c0..c2c87ce6 100644
--- a/packages/components/src/radio/index.ts
+++ b/packages/components/src/radio/index.ts
@@ -3,7 +3,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  Radio as BaseRadio,
+  Radio,
   FoundationElementTemplate,
   RadioOptions
 } from '@microsoft/fast-foundation';
@@ -11,7 +11,7 @@ import { radioStyles as styles } from './radio.styles.js';
 import { ViewTemplate, html, slotted } from '@microsoft/fast-element';
 
 export const radioTemplate: FoundationElementTemplate<
-  ViewTemplate<Radio>,
+  ViewTemplate<JupyterRadio>,
   RadioOptions
 > = (context, definition) => html`
   <template
@@ -41,10 +41,11 @@ export const radioTemplate: FoundationElementTemplate<
 `;
 
 /**
- * Base class for Radio
+ * Radio class
  * @public
+ * @tagname jp-radio
  */
-export class Radio extends BaseRadio {}
+class JupyterRadio extends Radio {}
 
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Radio} registration for configuring the component with a DesignSystem.
@@ -55,9 +56,9 @@ export class Radio extends BaseRadio {}
  * @remarks
  * Generates HTML Element: `<jp-radio>`
  */
-export const jpRadio = Radio.compose<RadioOptions>({
+export const jpRadio = JupyterRadio.compose<RadioOptions>({
   baseName: 'radio',
-  baseClass: BaseRadio,
+  baseClass: Radio,
   template: radioTemplate,
   styles,
   checkedIndicator: /* html */ `
@@ -65,4 +66,4 @@ export const jpRadio = Radio.compose<RadioOptions>({
     `
 });
 
-export { styles as radioStyles };
+export { JupyterRadio as Radio, styles as radioStyles };
diff --git a/packages/components/src/search/index.ts b/packages/components/src/search/index.ts
index 372ef952..2858474c 100644
--- a/packages/components/src/search/index.ts
+++ b/packages/components/src/search/index.ts
@@ -3,10 +3,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { attr } from '@microsoft/fast-element';
-import {
-  Search as FoundationSearch,
-  searchTemplate as template
-} from '@microsoft/fast-foundation';
+import { Search, searchTemplate as template } from '@microsoft/fast-foundation';
 import { searchStyles as styles } from './search.styles.js';
 
 /**
@@ -16,9 +13,15 @@ import { searchStyles as styles } from './search.styles.js';
 export type SearchAppearance = 'filled' | 'outline';
 
 /**
- * @internal
+ * Search field class
+ *
+ * @public
+ * @tagname jp-search
+ *
+ * @fires input - Fires a custom 'input' event when the value has changed
+ * @fires change - Fires a custom 'change' event when the value has changed
  */
-export class Search extends FoundationSearch {
+class JupyterSearch extends Search {
   /**
    * The appearance of the element.
    *
@@ -41,9 +44,9 @@ export class Search extends FoundationSearch {
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export const jpSearch = Search.compose({
+export const jpSearch = JupyterSearch.compose({
   baseName: 'search',
-  baseClass: FoundationSearch,
+  baseClass: Search,
   template,
   styles,
   shadowOptions: {
@@ -51,8 +54,4 @@ export const jpSearch = Search.compose({
   }
 });
 
-/**
- * Styles for Search
- * @public
- */
-export const searchStyles = styles;
+export { JupyterSearch as Search, styles as searchStyles };
diff --git a/packages/components/src/select/index.ts b/packages/components/src/select/index.ts
index 76277b96..ee0816ea 100644
--- a/packages/components/src/select/index.ts
+++ b/packages/components/src/select/index.ts
@@ -4,7 +4,7 @@
 
 import { attr, css, ElementStyles, observable } from '@microsoft/fast-element';
 import {
-  Select as FoundationSelect,
+  Select,
   SelectOptions,
   selectTemplate as template
 } from '@microsoft/fast-foundation';
@@ -16,10 +16,11 @@ import {
 import { selectStyles as styles } from './select.styles.js';
 
 /**
- * Base class for Select.
+ * Select class
  * @public
+ * @tagname jp-select
  */
-export class Select extends FoundationSelect {
+class JupyterSelect extends Select {
   /**
    * Whether the select has a compact layout or not.
    *
@@ -252,9 +253,9 @@ export class Select extends FoundationSelect {
  * Generates HTML Element: `<jp-select>`
  *
  */
-export const jpSelect = Select.compose<SelectOptions>({
+export const jpSelect = JupyterSelect.compose<SelectOptions>({
   baseName: 'select',
-  baseClass: FoundationSelect,
+  baseClass: Select,
   template,
   styles,
   indicator: /* html */ `
@@ -271,4 +272,4 @@ export const jpSelect = Select.compose<SelectOptions>({
     `
 });
 
-export { styles as selectStyles };
+export { JupyterSelect as Select, styles as selectStyles };
diff --git a/packages/components/src/skeleton/index.ts b/packages/components/src/skeleton/index.ts
index a74ed5da..bdfec22d 100644
--- a/packages/components/src/skeleton/index.ts
+++ b/packages/components/src/skeleton/index.ts
@@ -8,6 +8,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { skeletonStyles as styles } from './skeleton.styles.js';
 
+/**
+ * Skeleton class
+ *
+ * @public
+ * @tagname jp-skeleton
+ */
+class JupyterSkeleton extends Skeleton {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Skeleton} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#skeletonTemplate}
@@ -17,16 +25,11 @@ import { skeletonStyles as styles } from './skeleton.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-skeleton>`
  */
-export const jpSkeleton = Skeleton.compose({
+export const jpSkeleton = JupyterSkeleton.compose({
   baseName: 'skeleton',
+  baseClass: Skeleton,
   template,
   styles
 });
 
-/**
- * Base class for Skeleton
- * @public
- */
-export { Skeleton };
-
-export { styles as skeletonStyles };
+export { JupyterSkeleton as Skeleton, styles as skeletonStyles };
diff --git a/packages/components/src/slider-label/index.ts b/packages/components/src/slider-label/index.ts
index f37ede03..d62d91cf 100644
--- a/packages/components/src/slider-label/index.ts
+++ b/packages/components/src/slider-label/index.ts
@@ -3,7 +3,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  SliderLabel as FoundationSliderLabel,
+  SliderLabel,
   sliderLabelTemplate as template
 } from '@microsoft/fast-foundation';
 import { Orientation } from '@microsoft/fast-web-utilities';
@@ -14,9 +14,12 @@ import {
 } from './slider-label.styles.js';
 
 /**
- * @internal
+ * Slider label class
+ *
+ * @public
+ * @tagname jp-slider-label
  */
-export class SliderLabel extends FoundationSliderLabel {
+class JupyterSliderLabel extends SliderLabel {
   protected sliderOrientationChanged(): void {
     if (this.sliderOrientation === Orientation.horizontal) {
       this.$fastController.addStyles(horizontalSliderLabelStyles);
@@ -37,14 +40,15 @@ export class SliderLabel extends FoundationSliderLabel {
  * @remarks
  * Generates HTML Element: `<jp-slider-label>`
  */
-export const jpSliderLabel = SliderLabel.compose({
+export const jpSliderLabel = JupyterSliderLabel.compose({
   baseName: 'slider-label',
-  baseClass: FoundationSliderLabel,
+  baseClass: SliderLabel,
   template,
   styles
 });
 
 export {
+  JupyterSliderLabel as SliderLabel,
   horizontalSliderLabelStyles,
   styles as sliderLabelStyles,
   verticalSliderLabelStyles
diff --git a/packages/components/src/slider/index.ts b/packages/components/src/slider/index.ts
index 7fe41813..623407f6 100644
--- a/packages/components/src/slider/index.ts
+++ b/packages/components/src/slider/index.ts
@@ -3,17 +3,18 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  Slider as BaseSlider,
+  Slider,
   SliderOptions,
   sliderTemplate as template
 } from '@microsoft/fast-foundation';
 import { sliderStyles as styles } from './slider.styles.js';
 
 /**
- * Base class for Slider
+ * Slider class
  * @public
+ * @tagname jp-slider
  */
-export class Slider extends BaseSlider {}
+class JupyterSlider extends Slider {}
 
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Slider} registration for configuring the component with a DesignSystem.
@@ -24,9 +25,9 @@ export class Slider extends BaseSlider {}
  * @remarks
  * Generates HTML Element: `<jp-slider>`
  */
-export const jpSlider = Slider.compose<SliderOptions>({
+export const jpSlider = JupyterSlider.compose<SliderOptions>({
   baseName: 'slider',
-  baseClass: BaseSlider,
+  baseClass: Slider,
   template,
   styles,
   thumb: /* html */ `
@@ -34,4 +35,4 @@ export const jpSlider = Slider.compose<SliderOptions>({
     `
 });
 
-export { styles as sliderStyles };
+export { JupyterSlider as Slider, styles as sliderStyles };
diff --git a/packages/components/src/switch/index.ts b/packages/components/src/switch/index.ts
index dbcff4c5..9d624d4d 100644
--- a/packages/components/src/switch/index.ts
+++ b/packages/components/src/switch/index.ts
@@ -3,17 +3,18 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  Switch as BaseSwitch,
+  Switch,
   SwitchOptions,
   switchTemplate as template
 } from '@microsoft/fast-foundation';
 import { switchStyles as styles } from './switch.styles.js';
 
 /**
- * Base class for Switch
+ * Switch class
  * @public
+ * @tagname jp-switch
  */
-export class Switch extends BaseSwitch {}
+class JupyterSwitch extends Switch {}
 
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Switch} registration for configuring the component with a DesignSystem.
@@ -24,9 +25,9 @@ export class Switch extends BaseSwitch {}
  * @remarks
  * Generates HTML Element: `<jp-switch>`
  */
-export const jpSwitch = Switch.compose<SwitchOptions>({
+export const jpSwitch = JupyterSwitch.compose<SwitchOptions>({
   baseName: 'switch',
-  baseClass: BaseSwitch,
+  baseClass: Switch,
   template,
   styles,
   switch: /* html */ `
@@ -34,4 +35,4 @@ export const jpSwitch = Switch.compose<SwitchOptions>({
     `
 });
 
-export { styles as switchStyles };
+export { JupyterSwitch as Switch, styles as switchStyles };
diff --git a/packages/components/src/tab-panel/index.ts b/packages/components/src/tab-panel/index.ts
index 56259f71..47f766cf 100644
--- a/packages/components/src/tab-panel/index.ts
+++ b/packages/components/src/tab-panel/index.ts
@@ -8,6 +8,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { tabPanelStyles as styles } from './tab-panel.styles.js';
 
+/**
+ * Tab panel class
+ *
+ * @public
+ * @tagname jp-tab-panel
+ */
+class JupyterTabPanel extends TabPanel {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#TabPanel} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#tabPanelTemplate}
@@ -17,16 +25,11 @@ import { tabPanelStyles as styles } from './tab-panel.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-tab-panel>`
  */
-export const jpTabPanel = TabPanel.compose({
+export const jpTabPanel = JupyterTabPanel.compose({
   baseName: 'tab-panel',
+  baseClass: TabPanel,
   template,
   styles
 });
 
-/**
- * Base class for TabPanel
- * @public
- */
-export { TabPanel };
-
-export { styles as tabPanelStyles };
+export { JupyterTabPanel as TabPanel, styles as tabPanelStyles };
diff --git a/packages/components/src/tab/index.ts b/packages/components/src/tab/index.ts
index c705a5c2..3cdd83a4 100644
--- a/packages/components/src/tab/index.ts
+++ b/packages/components/src/tab/index.ts
@@ -4,6 +4,14 @@
 import { Tab, tabTemplate as template } from '@microsoft/fast-foundation';
 import { tabStyles as styles } from './tab.styles.js';
 
+/**
+ * Tab class
+ *
+ * @public
+ * @tagname jp-tab
+ */
+class JupyterTab extends Tab {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Tab} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#tabTemplate}
@@ -13,16 +21,11 @@ import { tabStyles as styles } from './tab.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-tab>`
  */
-export const jpTab = Tab.compose({
+export const jpTab = JupyterTab.compose({
   baseName: 'tab',
+  baseClass: Tab,
   template,
   styles
 });
 
-/**
- * Base class for Tab
- * @public
- */
-export { Tab };
-
-export { styles as tabStyles };
+export { JupyterTab as Tab, styles as tabStyles };
diff --git a/packages/components/src/tabs/index.ts b/packages/components/src/tabs/index.ts
index 24d14332..338854dd 100644
--- a/packages/components/src/tabs/index.ts
+++ b/packages/components/src/tabs/index.ts
@@ -4,6 +4,14 @@
 import { Tabs, tabsTemplate as template } from '@microsoft/fast-foundation';
 import { tabsStyles as styles } from './tabs.styles.js';
 
+/**
+ * Tabs class
+ *
+ * @public
+ * @tagname jp-tabs
+ */
+class JupyterTabs extends Tabs {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Tabs} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#tabsTemplate}
@@ -13,8 +21,9 @@ import { tabsStyles as styles } from './tabs.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-tabs>`
  */
-export const jpTabs = Tabs.compose({
+export const jpTabs = JupyterTabs.compose({
   baseName: 'tabs',
+  baseClass: Tabs,
   template,
   styles
 });
@@ -22,10 +31,4 @@ export const jpTabs = Tabs.compose({
 export * from '../tab/index.js';
 export * from '../tab-panel/index.js';
 
-/**
- * Base class for Tabs
- * @public
- */
-export { Tabs };
-
-export { styles as tabsStyles };
+export { JupyterTabs as Tabs, styles as tabsStyles };
diff --git a/packages/components/src/text-area/index.ts b/packages/components/src/text-area/index.ts
index 5c017a45..e0b9613b 100644
--- a/packages/components/src/text-area/index.ts
+++ b/packages/components/src/text-area/index.ts
@@ -4,7 +4,7 @@
 
 import { attr } from '@microsoft/fast-element';
 import {
-  TextArea as FoundationTextArea,
+  TextArea,
   textAreaTemplate as template
 } from '@microsoft/fast-foundation';
 import { textAreaStyles as styles } from './text-area.styles.js';
@@ -16,9 +16,14 @@ import { textAreaStyles as styles } from './text-area.styles.js';
 export type TextAreaAppearance = 'filled' | 'outline';
 
 /**
- * @internal
+ * Textarea class
+ *
+ * @public
+ * @tagname jp-text-area
+ *
+ * @fires select - Emits a custom 'select' event when the textarea emits a select event
  */
-export class TextArea extends FoundationTextArea {
+class JupyterTextArea extends TextArea {
   /**
    * The appearance of the element.
    *
@@ -41,9 +46,9 @@ export class TextArea extends FoundationTextArea {
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export const jpTextArea = TextArea.compose({
+export const jpTextArea = JupyterTextArea.compose({
   baseName: 'text-area',
-  baseClass: FoundationTextArea,
+  baseClass: TextArea,
   template,
   styles,
   shadowOptions: {
@@ -51,4 +56,4 @@ export const jpTextArea = TextArea.compose({
   }
 });
 
-export { styles as textAreaStyles };
+export { JupyterTextArea as TextArea, styles as textAreaStyles };
diff --git a/packages/components/src/text-field/index.ts b/packages/components/src/text-field/index.ts
index b33c06f8..ca092c93 100644
--- a/packages/components/src/text-field/index.ts
+++ b/packages/components/src/text-field/index.ts
@@ -4,7 +4,7 @@
 
 import { attr } from '@microsoft/fast-element';
 import {
-  TextField as FoundationTextField,
+  TextField,
   textFieldTemplate as template
 } from '@microsoft/fast-foundation';
 import { textFieldStyles as styles } from './text-field.styles.js';
@@ -16,9 +16,14 @@ import { textFieldStyles as styles } from './text-field.styles.js';
 export type TextFieldAppearance = 'filled' | 'outline';
 
 /**
- * @internal
+ * Text field class
+ *
+ * @public
+ * @tagname jp-text-field
+ *
+ * @fires select - Emits a custom 'select' event when the textarea emits a select event
  */
-export class TextField extends FoundationTextField {
+class JupyterTextField extends TextField {
   /**
    * The appearance of the element.
    *
@@ -41,9 +46,9 @@ export class TextField extends FoundationTextField {
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export const jpTextField = TextField.compose({
+export const jpTextField = JupyterTextField.compose({
   baseName: 'text-field',
-  baseClass: FoundationTextField,
+  baseClass: TextField,
   template,
   styles,
   shadowOptions: {
@@ -51,4 +56,4 @@ export const jpTextField = TextField.compose({
   }
 });
 
-export { styles as textFieldStyles };
+export { JupyterTextField as TextField, styles as textFieldStyles };
diff --git a/packages/components/src/toolbar/index.ts b/packages/components/src/toolbar/index.ts
index b9d4c5ec..7ba5f604 100644
--- a/packages/components/src/toolbar/index.ts
+++ b/packages/components/src/toolbar/index.ts
@@ -260,7 +260,7 @@ export class FoundationToolbar extends FoundationElement {
     const previousFocusedElement = this.focusableElements?.[this.activeIndex];
 
     this.focusableElements = this.allSlottedItems.reduce(
-      Toolbar.reduceFocusableItems,
+      FoundationToolbar.reduceFocusableItems,
       []
     );
 
@@ -326,7 +326,10 @@ export class FoundationToolbar extends FoundationElement {
 
     if (element.childElementCount) {
       return elements.concat(
-        Array.from(element.children).reduce(Toolbar.reduceFocusableItems, [])
+        Array.from(element.children).reduce(
+          FoundationToolbar.reduceFocusableItems,
+          []
+        )
       );
     }
 
@@ -388,7 +391,8 @@ export interface FoundationToolbar extends StartEnd, DelegatesARIAToolbar {}
 applyMixins(FoundationToolbar, StartEnd, DelegatesARIAToolbar);
 
 /**
- * @internal
+ * @public
+ * @tagname jp-toolbar
  */
 export class Toolbar extends FoundationToolbar {
   connectedCallback() {
diff --git a/packages/components/src/tooltip/index.ts b/packages/components/src/tooltip/index.ts
index a8e8701c..b952de6d 100644
--- a/packages/components/src/tooltip/index.ts
+++ b/packages/components/src/tooltip/index.ts
@@ -8,6 +8,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { tooltipStyles as styles } from './tooltip.styles.js';
 
+/**
+ * Tooltip class
+ *
+ * @public
+ * @tagname jp-tooltip
+ */
+class JupyterTooltip extends Tooltip {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Tooltip} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#tooltipTemplate}
@@ -17,16 +25,11 @@ import { tooltipStyles as styles } from './tooltip.styles.js';
  * @remarks
  * Generates HTML Element: `<jp-tooltip>`
  */
-export const jpTooltip = Tooltip.compose({
+export const jpTooltip = JupyterTooltip.compose({
   baseName: 'tooltip',
+  baseClass: Tooltip,
   template,
   styles
 });
 
-/**
- * Base class for Tooltip
- * @public
- */
-export { Tooltip };
-
-export { styles as tooltipStyles };
+export { JupyterTooltip as Tooltip, styles as tooltipStyles };
diff --git a/packages/components/src/tree-item/index.ts b/packages/components/src/tree-item/index.ts
index ac6badf5..6bfff8fd 100644
--- a/packages/components/src/tree-item/index.ts
+++ b/packages/components/src/tree-item/index.ts
@@ -9,6 +9,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { treeItemStyles as styles } from './tree-item.styles.js';
 
+/**
+ * Tree item class
+ *
+ * @public
+ * @tagname jp-tree-item
+ */
+class JupyterTreeItem extends TreeItem {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#TreeItem} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
@@ -19,8 +27,9 @@ import { treeItemStyles as styles } from './tree-item.styles.js';
  * Generates HTML Element: `<jp-tree-item>`
  *
  */
-export const jpTreeItem = TreeItem.compose<TreeItemOptions>({
+export const jpTreeItem = JupyterTreeItem.compose<TreeItemOptions>({
   baseName: 'tree-item',
+  baseClass: TreeItem,
   template,
   styles,
   expandCollapseGlyph: /* html */ `
@@ -36,10 +45,4 @@ export const jpTreeItem = TreeItem.compose<TreeItemOptions>({
     `
 });
 
-/**
- * Base class for TreeItem
- * @public
- */
-export { TreeItem };
-
-export { styles as treeItemStyles };
+export { JupyterTreeItem as TreeItem, styles as treeItemStyles };
diff --git a/packages/components/src/tree-view/index.ts b/packages/components/src/tree-view/index.ts
index eb650f52..6f06d504 100644
--- a/packages/components/src/tree-view/index.ts
+++ b/packages/components/src/tree-view/index.ts
@@ -8,6 +8,14 @@ import {
 } from '@microsoft/fast-foundation';
 import { treeViewStyles as styles } from './tree-view.styles.js';
 
+/**
+ * Tree view class
+ *
+ * @public
+ * @tagname jp-tree-view
+ */
+class JupyterTreeView extends TreeView {}
+
 /**
  * A function that returns a {@link @microsoft/fast-foundation#TreeView} registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
@@ -18,16 +26,11 @@ import { treeViewStyles as styles } from './tree-view.styles.js';
  * Generates HTML Element: `<jp-tree-view>`
  *
  */
-export const jpTreeView = TreeView.compose({
+export const jpTreeView = JupyterTreeView.compose({
   baseName: 'tree-view',
+  baseClass: TreeView,
   template,
   styles
 });
 
-/**
- * Base class for TreeView
- * @public
- */
-export { TreeView };
-
-export { styles as treeViewStyles };
+export { JupyterTreeView as TreeView, styles as treeViewStyles };
diff --git a/packages/lab-example/src/index.tsx b/packages/lab-example/src/index.tsx
index 90623909..5787013a 100644
--- a/packages/lab-example/src/index.tsx
+++ b/packages/lab-example/src/index.tsx
@@ -240,9 +240,15 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
   const onChange = (event: any) => {
     alert(`React on React change event: ${event?.target?.value}`);
   };
+  const onConsole = (event: any) => {
+    console.log('React on react event: ', event);
+  };
   const onChangeConsole = (event: any) => {
     console.log(`React on React change event: ${event?.target?.value}`);
   };
+  const onCheckedConsole = (event: any) => {
+    console.log(`React on React change event: ${event?.target?.checked}`);
+  };
   const onClick = () => {
     alert('Reacting on React click event.');
   };
@@ -274,10 +280,14 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
         >
           Search Label
         </Search>
-        <TextField value="Populated text" onChange={onChange}>
+        <TextField
+          value="Populated text"
+          onChange={onChange}
+          onInput={onChangeConsole}
+        >
           Text Field Label
         </TextField>
-        <NumberField value="10" onChange={onChange}>
+        <NumberField value="10" onChange={onChange} onInput={onChangeConsole}>
           Number Field Label
         </NumberField>
         <DateField value="2021-09-12" onChange={onChange}>
@@ -301,7 +311,7 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
         </div>
         <div className="jp-FlexColumn">
           <label>Combobox</label>
-          <Combobox onChange={onChange} onInput={onChangeConsole}>
+          <Combobox onChange={onChange} onInput={onConsole}>
             <Option>Option Label #1</Option>
             <Option>Option Label #2</Option>
             <Option>Option Label #3</Option>
@@ -309,8 +319,10 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
         </div>
       </div>
       <div className="jp-FlexColumn" style={{ gridColumn: 2 }}>
-        <TextArea>Text Area Label</TextArea>
-        <Slider min="0" max="100" onChange={onChangeConsole}>
+        <TextArea onChange={onChangeConsole} onSelect={onConsole}>
+          Text Area Label
+        </TextArea>
+        <Slider min={0} max={100} onChange={onChangeConsole}>
           <SliderLabel position="0">0%</SliderLabel>
           <SliderLabel position="50">50%</SliderLabel>
           <SliderLabel position="100">100%</SliderLabel>
@@ -327,15 +339,15 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
         </RadioGroup>
         <div className="jp-FlexColumn">
           <label>Checkboxes</label>
-          <Checkbox onChange={onChangeConsole} checked>
+          <Checkbox onChange={onCheckedConsole} checked>
             Label
           </Checkbox>
-          <Checkbox onChange={onChangeConsole}>Label</Checkbox>
-          <Checkbox onChange={onChangeConsole} disabled>
+          <Checkbox onChange={onCheckedConsole}>Label</Checkbox>
+          <Checkbox onChange={onCheckedConsole} disabled>
             Label
           </Checkbox>
         </div>
-        <Switch onChange={onChangeConsole}>Switch</Switch>
+        <Switch onChange={onCheckedConsole}>Switch</Switch>
         <Disclosure title="Disclosure">
           <p>Very long blabla</p>
         </Disclosure>
@@ -367,7 +379,7 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
           <label>Tooltip</label>
           {/* Use callback ref to react to the component mount */}
           <Button
-            ref={(anchor: HTMLElement) => {
+            ref={anchor => {
               setTooltipAnchor(anchor);
             }}
           >
@@ -378,10 +390,12 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
 
         <Menu>
           <MenuItem role="menuitemcheckbox">Menu item 1</MenuItem>
-          <MenuItem>
+          <MenuItem onExpand={onConsole} onChange={onConsole}>
             Menu item 2
             <Menu>
-              <MenuItem role="menuitemcheckbox">Checkbox 1</MenuItem>
+              <MenuItem role="menuitemcheckbox" onChange={onConsole}>
+                Checkbox 1
+              </MenuItem>
               <MenuItem>Nested Menu item 1.1</MenuItem>
               <MenuItem>Nested Menu item 1.2</MenuItem>
               <MenuItem>Nested Menu item 1.3</MenuItem>
@@ -442,9 +456,7 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
           <TabPanel id="panelTwo">This is panel two content.</TabPanel>
           <TabPanel id="panelThree">This is panel three content.</TabPanel>
         </Tabs>
-
         <TreeView>
-          {/* @ts-expect-error unknown event onExpand */}
           <TreeItem onSelect={onEvent} onExpand={onEvent}>
             Root item 1
             <TreeItem expanded>
diff --git a/packages/react-components/.eslintignore b/packages/react-components/.eslintignore
index 2150aefb..7f9e148b 100644
--- a/packages/react-components/.eslintignore
+++ b/packages/react-components/.eslintignore
@@ -1,8 +1,8 @@
 node_modules
 **/dist
 **/node_modules
-**/lib
 **/build
 **/dist
 **/coverage
 **/docs
+lib/*.d.ts
diff --git a/packages/react-components/.eslintrc.cjs b/packages/react-components/.eslintrc.cjs
new file mode 100644
index 00000000..ee6be9f6
--- /dev/null
+++ b/packages/react-components/.eslintrc.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
+  rules: {
+    curly: ['error', 'all'],
+    eqeqeq: 'error',
+    'prefer-arrow-callback': 'error'
+  }
+};
diff --git a/packages/react-components/.eslintrc.js b/packages/react-components/.eslintrc.js
deleted file mode 100644
index 665374bf..00000000
--- a/packages/react-components/.eslintrc.js
+++ /dev/null
@@ -1,39 +0,0 @@
-module.exports = {
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: 'tsconfig.json',
-    sourceType: 'module'
-  },
-  plugins: ['@typescript-eslint'],
-  rules: {
-    '@typescript-eslint/naming-convention': [
-      'error',
-      {
-        selector: 'interface',
-        format: ['PascalCase'],
-        custom: {
-          regex: '^I[A-Z]',
-          match: true
-        }
-      }
-    ],
-    '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-namespace': 'off',
-    '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/quotes': [
-      'error',
-      'single',
-      { avoidEscape: true, allowTemplateLiterals: false }
-    ],
-    curly: ['error', 'all'],
-    eqeqeq: 'error',
-    'prefer-arrow-callback': 'error'
-  }
-};
diff --git a/packages/react-components/lib/Accordion.d.ts b/packages/react-components/lib/Accordion.d.ts
new file mode 100644
index 00000000..35b63eec
--- /dev/null
+++ b/packages/react-components/lib/Accordion.d.ts
@@ -0,0 +1,35 @@
+import { Accordion as AccordionElement } from '@jupyter/web-components';
+
+export type { AccordionElement };
+
+export interface AccordionProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<AccordionElement>;
+  /** Controls the expand mode of the Accordion, either allowing
+single or multiple item expansion. */
+  expandMode?: AccordionElement['expandmode'];
+
+  /** Fires a custom 'change' event when the active item changes */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Accordion class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Fires a custom 'change' event when the active item changes
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **CSS Parts:**
+ *  - **item** - The slot for the accordion items
+ */
+export const Accordion: React.ForwardRefExoticComponent<AccordionProps>;
diff --git a/packages/react-components/lib/Accordion.js b/packages/react-components/lib/Accordion.js
new file mode 100644
index 00000000..67fb007d
--- /dev/null
+++ b/packages/react-components/lib/Accordion.js
@@ -0,0 +1,41 @@
+import {
+  jpAccordion,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpAccordion());
+
+export const Accordion = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { expandMode, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-accordion',
+    {
+      ref,
+      ...filteredProps,
+      'expand-mode': props.expandMode || props['expand-mode'],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/AccordionItem.d.ts b/packages/react-components/lib/AccordionItem.d.ts
new file mode 100644
index 00000000..d1d14a9f
--- /dev/null
+++ b/packages/react-components/lib/AccordionItem.d.ts
@@ -0,0 +1,55 @@
+import { AccordionItem as AccordionItemElement } from '@jupyter/web-components';
+
+export type { AccordionItemElement };
+
+export interface AccordionItemProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<AccordionItemElement>;
+  /** Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the
+heading element. */
+  headingLevel?: AccordionItemElement['headinglevel'];
+
+  /** The item ID */
+  id?: AccordionItemElement['id'];
+
+  /** Expands or collapses the item. */
+  expanded?: AccordionItemElement['expanded'];
+
+  /** Fires a custom 'change' event when the button is invoked */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Accordion item class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Fires a custom 'change' event when the button is invoked
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided between the heading and the icon
+ * - **end** - Content which can be provided between the start slot and icon
+ * - **heading** - Content which serves as the accordion item heading and text of the expand button
+ * - _default_ - The default slot for accordion item content
+ * - **expanded-icon** - The expanded icon
+ * - **collapsed-icon** - The collapsed icon
+ *
+ * ### **CSS Parts:**
+ *  - **heading** - Wraps the button
+ * - **button** - The button which serves to invoke the item
+ * - **heading-content** - Wraps the slot for the heading content within the button
+ * - **icon** - The icon container
+ * - **expanded-icon** - The expanded icon slot
+ * - **collapsed-icon** - The collapsed icon
+ * - **region** - The wrapper for the accordion item content
+ */
+export const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps>;
diff --git a/packages/react-components/lib/AccordionItem.js b/packages/react-components/lib/AccordionItem.js
new file mode 100644
index 00000000..f6ebfafb
--- /dev/null
+++ b/packages/react-components/lib/AccordionItem.js
@@ -0,0 +1,43 @@
+import {
+  jpAccordionItem,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpAccordionItem());
+
+export const AccordionItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { headingLevel, id, expanded, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'expanded', props.expanded);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-accordion-item',
+    {
+      ref,
+      ...filteredProps,
+      'heading-level': props.headingLevel || props['heading-level'],
+      id: props.id,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Anchor.d.ts b/packages/react-components/lib/Anchor.d.ts
new file mode 100644
index 00000000..e3cc6cff
--- /dev/null
+++ b/packages/react-components/lib/Anchor.d.ts
@@ -0,0 +1,60 @@
+import { Anchor as AnchorElement } from '@jupyter/web-components';
+
+export type { AnchorElement };
+
+export interface AnchorProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<AnchorElement>;
+  /** The appearance the anchor should have. */
+  appearance?: AnchorElement['appearance'];
+
+  /** Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  download?: AnchorElement['download'];
+
+  /** The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  href?: AnchorElement['href'];
+
+  /** Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  hreflang?: AnchorElement['hreflang'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  ping?: AnchorElement['ping'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  referrerpolicy?: AnchorElement['referrerpolicy'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  rel?: AnchorElement['rel'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  target?: AnchorElement['target'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  type?: AnchorElement['type'];
+
+  /** References the root element */
+  control?: AnchorElement['control'];
+}
+
+/**
+ * Anchor class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the anchor content
+ * - **end** - Content which can be provided after the anchor content
+ * - _default_ - The default slot for anchor content
+ *
+ * ### **CSS Parts:**
+ *  - **control** - The anchor element
+ * - **content** - The element wrapping anchor content
+ */
+export const Anchor: React.ForwardRefExoticComponent<AnchorProps>;
diff --git a/packages/react-components/lib/Anchor.js b/packages/react-components/lib/Anchor.js
new file mode 100644
index 00000000..921b2acd
--- /dev/null
+++ b/packages/react-components/lib/Anchor.js
@@ -0,0 +1,56 @@
+import { jpAnchor, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpAnchor());
+
+export const Anchor = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    appearance,
+    download,
+    href,
+    hreflang,
+    ping,
+    referrerpolicy,
+    rel,
+    target,
+    type,
+    control,
+    ...filteredProps
+  } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'control', props.control);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-anchor',
+    {
+      ref,
+      ...filteredProps,
+      appearance: props.appearance,
+      download: props.download,
+      href: props.href,
+      hreflang: props.hreflang,
+      ping: props.ping,
+      referrerpolicy: props.referrerpolicy,
+      rel: props.rel,
+      target: props.target,
+      type: props.type,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/AnchoredRegion.d.ts b/packages/react-components/lib/AnchoredRegion.d.ts
new file mode 100644
index 00000000..f13dcfbb
--- /dev/null
+++ b/packages/react-components/lib/AnchoredRegion.d.ts
@@ -0,0 +1,108 @@
+import { AnchoredRegion as AnchoredRegionElement } from '@jupyter/web-components';
+
+export type { AnchoredRegionElement };
+
+export interface AnchoredRegionProps
+  extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<AnchoredRegionElement>;
+  /** Whether the region remains in the viewport (ie. detaches from the anchor) on the horizontal axis */
+  horizontalViewportLock?: boolean;
+
+  /** Whether the region overlaps the anchor on the horizontal axis */
+  horizontalInset?: boolean;
+
+  /** Whether the region remains in the viewport (ie. detaches from the anchor) on the vertical axis */
+  verticalViewportLock?: boolean;
+
+  /** Whether the region overlaps the anchor on the vertical axis */
+  verticalInset?: boolean;
+
+  /** Whether the region is positioned using css "position: fixed".
+Otherwise the region uses "position: absolute".
+Fixed placement allows the region to break out of parent containers, */
+  fixedPlacement?: boolean;
+
+  /** The HTML ID of the anchor element this region is positioned relative to */
+  anchor?: AnchoredRegionElement['anchor'];
+
+  /** The HTML ID of the viewport element this region is positioned relative to */
+  viewport?: AnchoredRegionElement['viewport'];
+
+  /** Sets what logic the component uses to determine horizontal placement.
+'locktodefault' forces the default position
+'dynamic' decides placement based on available space
+'uncontrolled' does not control placement on the horizontal axis */
+  horizontalPositioningMode?: AnchoredRegionElement['horizontalPositioningMode'];
+
+  /** The default horizontal position of the region relative to the anchor element */
+  horizontalDefaultPosition?: AnchoredRegionElement['horizontalDefaultPosition'];
+
+  /** How narrow the space allocated to the default position has to be before the widest area
+is selected for layout */
+  horizontalThreshold?: AnchoredRegionElement['horizontalThreshold'];
+
+  /** Defines how the width of the region is calculated */
+  horizontalScaling?: AnchoredRegionElement['horizontalScaling'];
+
+  /** Sets what logic the component uses to determine vertical placement.
+'locktodefault' forces the default position
+'dynamic' decides placement based on available space
+'uncontrolled' does not control placement on the vertical axis */
+  verticalPositioningMode?: AnchoredRegionElement['verticalPositioningMode'];
+
+  /** The default vertical position of the region relative to the anchor element */
+  verticalDefaultPosition?: AnchoredRegionElement['verticalDefaultPosition'];
+
+  /** How short the space allocated to the default position has to be before the tallest area
+is selected for layout */
+  verticalThreshold?: AnchoredRegionElement['verticalThreshold'];
+
+  /** Defines how the height of the region is calculated */
+  verticalScaling?: AnchoredRegionElement['verticalScaling'];
+
+  /** Defines what triggers the anchored region to revaluate positioning */
+  autoUpdateMode?: AnchoredRegionElement['autoUpdateMode'];
+
+  /** The HTML element being used as the anchor */
+  anchorElement?: AnchoredRegionElement['anchorElement'];
+
+  /** The HTML element being used as the viewport */
+  viewportElement?: AnchoredRegionElement['viewportElement'];
+
+  /** indicates the current horizontal position of the region */
+  verticalPosition?: AnchoredRegionElement['verticalPosition'];
+
+  /** indicates the current vertical position of the region */
+  horizontalPosition?: AnchoredRegionElement['horizontalPosition'];
+
+  /** update position */
+  update?: AnchoredRegionElement['update'];
+
+  /** Fires a custom 'loaded' event when the region is loaded and visible */
+  onLoaded?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'positionchange' event when the position has changed */
+  onPositionchange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Anchored region class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **loaded** - Fires a custom 'loaded' event when the region is loaded and visible
+ * - **positionchange** - Fires a custom 'positionchange' event when the position has changed
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the content
+ */
+export const AnchoredRegion: React.ForwardRefExoticComponent<AnchoredRegionProps>;
diff --git a/packages/react-components/lib/AnchoredRegion.js b/packages/react-components/lib/AnchoredRegion.js
new file mode 100644
index 00000000..21244928
--- /dev/null
+++ b/packages/react-components/lib/AnchoredRegion.js
@@ -0,0 +1,92 @@
+import {
+  jpAnchoredRegion,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpAnchoredRegion());
+
+export const AnchoredRegion = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    horizontalViewportLock,
+    horizontalInset,
+    verticalViewportLock,
+    verticalInset,
+    fixedPlacement,
+    anchor,
+    viewport,
+    horizontalPositioningMode,
+    horizontalDefaultPosition,
+    horizontalThreshold,
+    horizontalScaling,
+    verticalPositioningMode,
+    verticalDefaultPosition,
+    verticalThreshold,
+    verticalScaling,
+    autoUpdateMode,
+    anchorElement,
+    viewportElement,
+    verticalPosition,
+    horizontalPosition,
+    update,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'loaded', props.onLoaded);
+  useEventListener(ref, 'positionchange', props.onPositionchange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'anchorElement', props.anchorElement);
+  useProperties(ref, 'viewportElement', props.viewportElement);
+  useProperties(ref, 'verticalPosition', props.verticalPosition);
+  useProperties(ref, 'horizontalPosition', props.horizontalPosition);
+  useProperties(ref, 'update', props.update);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-anchored-region',
+    {
+      ref,
+      ...filteredProps,
+      anchor: props.anchor,
+      viewport: props.viewport,
+      'horizontal-positioning-mode':
+        props.horizontalPositioningMode || props['horizontal-positioning-mode'],
+      'horizontal-default-position':
+        props.horizontalDefaultPosition || props['horizontal-default-position'],
+      'horizontal-threshold':
+        props.horizontalThreshold || props['horizontal-threshold'],
+      'horizontal-scaling':
+        props.horizontalScaling || props['horizontal-scaling'],
+      'vertical-positioning-mode':
+        props.verticalPositioningMode || props['vertical-positioning-mode'],
+      'vertical-default-position':
+        props.verticalDefaultPosition || props['vertical-default-position'],
+      'vertical-threshold':
+        props.verticalThreshold || props['vertical-threshold'],
+      'vertical-scaling': props.verticalScaling || props['vertical-scaling'],
+      'auto-update-mode': props.autoUpdateMode || props['auto-update-mode'],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      'horizontal-viewport-lock': props.horizontalViewportLock ? '' : undefined,
+      'horizontal-inset': props.horizontalInset ? '' : undefined,
+      'vertical-viewport-lock': props.verticalViewportLock ? '' : undefined,
+      'vertical-inset': props.verticalInset ? '' : undefined,
+      'fixed-placement': props.fixedPlacement ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Avatar.d.ts b/packages/react-components/lib/Avatar.d.ts
new file mode 100644
index 00000000..4cc1d85a
--- /dev/null
+++ b/packages/react-components/lib/Avatar.d.ts
@@ -0,0 +1,50 @@
+import { Avatar as AvatarElement } from '@jupyter/web-components';
+
+export type { AvatarElement };
+
+export interface AvatarProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<AvatarElement>;
+  /** Indicates the Avatar should have an image source */
+  src?: AvatarElement['imgSrc'];
+
+  /** Indicates the Avatar should have alt text */
+  alt?: AvatarElement['alt'];
+
+  /** Indicates the Avatar should have a color fill. */
+  fill?: AvatarElement['fill'];
+
+  /** Indicates the Avatar should have a text color. */
+  color?: AvatarElement['color'];
+
+  /** Indicates the Avatar should have url link */
+  link?: AvatarElement['link'];
+
+  /** Indicates the Avatar shape should be. By default it will be set to "circle". */
+  shape?: AvatarElement['shape'];
+}
+
+/**
+ * Jupyter Avatar Class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **media** - Used for media such as an image
+ * - _default_ - The default slot for avatar text, commonly a name or initials
+ * - **badge** - Used to provide a badge, such as a status badge
+ *
+ * ### **CSS Parts:**
+ *  - **backplate** - The wrapping container for the avatar
+ * - **link** - The avatar link
+ * - **media** - The media slot
+ * - **content** - The default slot
+ */
+export const Avatar: React.ForwardRefExoticComponent<AvatarProps>;
diff --git a/packages/react-components/lib/Avatar.js b/packages/react-components/lib/Avatar.js
new file mode 100644
index 00000000..a4bd8897
--- /dev/null
+++ b/packages/react-components/lib/Avatar.js
@@ -0,0 +1,40 @@
+import { jpAvatar, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpAvatar());
+
+export const Avatar = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { src, alt, fill, color, link, shape, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-avatar',
+    {
+      ref,
+      ...filteredProps,
+      src: props.src,
+      alt: props.alt,
+      fill: props.fill,
+      color: props.color,
+      link: props.link,
+      shape: props.shape,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Badge.d.ts b/packages/react-components/lib/Badge.d.ts
new file mode 100644
index 00000000..e8c792a2
--- /dev/null
+++ b/packages/react-components/lib/Badge.d.ts
@@ -0,0 +1,37 @@
+import { Badge as BadgeElement } from '@jupyter/web-components';
+
+export type { BadgeElement };
+
+export interface BadgeProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<BadgeElement>;
+
+  /** Indicates the badge should have a filled style. */
+  fill?: BadgeElement['fill'];
+
+  /** Indicates the badge should have a filled style. */
+  color?: BadgeElement['color'];
+
+  /** Indicates the element should be circular */
+  circular?: BadgeElement['circular'];
+}
+
+/**
+ * Badge class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the badge
+ *
+ * ### **CSS Parts:**
+ *  - **control** - The element representing the badge, which wraps the default slot
+ */
+export const Badge: React.ForwardRefExoticComponent<BadgeProps>;
diff --git a/packages/react-components/lib/Badge.js b/packages/react-components/lib/Badge.js
new file mode 100644
index 00000000..dc9066ed
--- /dev/null
+++ b/packages/react-components/lib/Badge.js
@@ -0,0 +1,37 @@
+import { jpBadge, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpBadge());
+
+export const Badge = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { fill, color, circular, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'circular', props.circular);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-badge',
+    {
+      ref,
+      ...filteredProps,
+      fill: props.fill,
+      color: props.color,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Breadcrumb.d.ts b/packages/react-components/lib/Breadcrumb.d.ts
new file mode 100644
index 00000000..41df4bd8
--- /dev/null
+++ b/packages/react-components/lib/Breadcrumb.d.ts
@@ -0,0 +1,28 @@
+import { Breadcrumb as BreadcrumbElement } from '@jupyter/web-components';
+
+export type { BreadcrumbElement };
+
+export interface BreadcrumbProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<BreadcrumbElement>;
+}
+
+/**
+ * Breadcrumb class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the breadcrumb items
+ *
+ * ### **CSS Parts:**
+ *  - **list** - The element wrapping the slotted items
+ */
+export const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps>;
diff --git a/packages/react-components/lib/Breadcrumb.js b/packages/react-components/lib/Breadcrumb.js
new file mode 100644
index 00000000..2f3c0749
--- /dev/null
+++ b/packages/react-components/lib/Breadcrumb.js
@@ -0,0 +1,37 @@
+import {
+  jpBreadcrumb,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpBreadcrumb());
+
+export const Breadcrumb = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-breadcrumb',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/BreadcrumbItem.d.ts b/packages/react-components/lib/BreadcrumbItem.d.ts
new file mode 100644
index 00000000..0fdb0709
--- /dev/null
+++ b/packages/react-components/lib/BreadcrumbItem.d.ts
@@ -0,0 +1,56 @@
+import { BreadcrumbItem as BreadcrumbItemElement } from '@jupyter/web-components';
+
+export type { BreadcrumbItemElement };
+
+export interface BreadcrumbItemProps
+  extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<BreadcrumbItemElement>;
+
+  /** Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  download?: BreadcrumbItemElement['download'];
+
+  /** The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  href?: BreadcrumbItemElement['href'];
+
+  /** Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  hreflang?: BreadcrumbItemElement['hreflang'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  ping?: BreadcrumbItemElement['ping'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  referrerpolicy?: BreadcrumbItemElement['referrerpolicy'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  rel?: BreadcrumbItemElement['rel'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  target?: BreadcrumbItemElement['target'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. */
+  type?: BreadcrumbItemElement['type'];
+}
+
+/**
+ * Breadcrumb item class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the anchor content
+ * - **end** - Content which can be provided after the anchor content
+ * - _default_ - The default slot for anchor content
+ *
+ * ### **CSS Parts:**
+ *  - **control** - The anchor element
+ * - **content** - The element wrapping anchor content
+ */
+export const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps>;
diff --git a/packages/react-components/lib/BreadcrumbItem.js b/packages/react-components/lib/BreadcrumbItem.js
new file mode 100644
index 00000000..0fc97b22
--- /dev/null
+++ b/packages/react-components/lib/BreadcrumbItem.js
@@ -0,0 +1,57 @@
+import {
+  jpBreadcrumbItem,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpBreadcrumbItem());
+
+export const BreadcrumbItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    download,
+    href,
+    hreflang,
+    ping,
+    referrerpolicy,
+    rel,
+    target,
+    type,
+    control,
+    ...filteredProps
+  } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'control', props.control);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-breadcrumb-item',
+    {
+      ref,
+      ...filteredProps,
+      download: props.download,
+      href: props.href,
+      hreflang: props.hreflang,
+      ping: props.ping,
+      referrerpolicy: props.referrerpolicy,
+      rel: props.rel,
+      target: props.target,
+      type: props.type,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Button.d.ts b/packages/react-components/lib/Button.d.ts
new file mode 100644
index 00000000..d6be05c7
--- /dev/null
+++ b/packages/react-components/lib/Button.d.ts
@@ -0,0 +1,64 @@
+import { Button as ButtonElement } from '@jupyter/web-components';
+
+export type { ButtonElement };
+
+export interface ButtonProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'form'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<ButtonElement>;
+
+  /** Whether the button has a compact layout or not. */
+  minimal?: boolean;
+
+  /** The appearance the button should have. */
+  appearance?: ButtonElement['appearance'];
+
+  /** The id of a form to associate the element to. */
+  form?: ButtonElement['form'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. */
+  formaction?: ButtonElement['formaction'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. */
+  formenctype?: ButtonElement['formenctype'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. */
+  formmethod?: ButtonElement['formmethod'];
+
+  /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. */
+  formtarget?: ButtonElement['formtarget'];
+
+  /** The button type. */
+  type?: ButtonElement['type'];
+
+  /** Determines if the element should receive document focus on page load. */
+  autofocus?: ButtonElement['autofocus'];
+
+  /** See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details. */
+  formnovalidate?: ButtonElement['formnovalidate'];
+}
+
+/**
+ * Button class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **defaultSlottedContentChanged(oldValue: _HTMLElement[]_, newValue: _HTMLElement[]_): _void_** - Applies 'icon-only' class when there is only an SVG in the default slot
+ * - **validate(): _void_** - {@inheritDoc (FormAssociated:interface).validate}
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the button content
+ * - **end** - Content which can be provided after the button content
+ * - _default_ - The default slot for button content
+ *
+ * ### **CSS Parts:**
+ *  - **control** - The button element
+ * - **content** - The element wrapping button content
+ */
+export const Button: React.ForwardRefExoticComponent<ButtonProps>;
diff --git a/packages/react-components/lib/Button.js b/packages/react-components/lib/Button.js
new file mode 100644
index 00000000..dffa294c
--- /dev/null
+++ b/packages/react-components/lib/Button.js
@@ -0,0 +1,58 @@
+import { jpButton, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpButton());
+
+export const Button = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    minimal,
+    appearance,
+    form,
+    formaction,
+    formenctype,
+    formmethod,
+    formtarget,
+    type,
+    autofocus,
+    formnovalidate,
+    defaultSlottedContent,
+    ...filteredProps
+  } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'autofocus', props.autofocus);
+  useProperties(ref, 'formnovalidate', props.formnovalidate);
+  useProperties(ref, 'defaultSlottedContent', props.defaultSlottedContent);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-button',
+    {
+      ref,
+      ...filteredProps,
+      appearance: props.appearance,
+      form: props.form,
+      formaction: props.formaction,
+      formenctype: props.formenctype,
+      formmethod: props.formmethod,
+      formtarget: props.formtarget,
+      type: props.type,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      minimal: props.minimal ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Card.d.ts b/packages/react-components/lib/Card.d.ts
new file mode 100644
index 00000000..451137ae
--- /dev/null
+++ b/packages/react-components/lib/Card.d.ts
@@ -0,0 +1,25 @@
+import { Card as CardElement } from '@jupyter/web-components';
+
+export type { CardElement };
+
+export interface CardProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<CardElement>;
+}
+
+/**
+ * Card class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the card content
+ */
+export const Card: React.ForwardRefExoticComponent<CardProps>;
diff --git a/packages/react-components/lib/Card.js b/packages/react-components/lib/Card.js
new file mode 100644
index 00000000..9c58c611
--- /dev/null
+++ b/packages/react-components/lib/Card.js
@@ -0,0 +1,34 @@
+import { jpCard, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpCard());
+
+export const Card = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-card',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Checkbox.d.ts b/packages/react-components/lib/Checkbox.d.ts
new file mode 100644
index 00000000..93302941
--- /dev/null
+++ b/packages/react-components/lib/Checkbox.d.ts
@@ -0,0 +1,47 @@
+import { Checkbox as CheckboxElement } from '@jupyter/web-components';
+
+export type { CheckboxElement };
+
+export interface CheckboxProps
+  extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<CheckboxElement>;
+
+  /** When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. */
+  readonly?: boolean;
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information. */
+  readOnly?: CheckboxElement['readOnly'];
+
+  /** The indeterminate state of the control */
+  indeterminate?: CheckboxElement['indeterminate'];
+
+  /** Emits a custom change event when the checked state changes */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Checkbox class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Emits a custom change event when the checked state changes
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **checked-indicator** - The checked indicator
+ * - **indeterminate-indicator** - The indeterminate indicator
+ * - _default_ - The default slot for the label
+ *
+ * ### **CSS Parts:**
+ *  - **control** - The element representing the visual checkbox control
+ * - **label** - The label
+ */
+export const Checkbox: React.ForwardRefExoticComponent<CheckboxProps>;
diff --git a/packages/react-components/lib/Checkbox.js b/packages/react-components/lib/Checkbox.js
new file mode 100644
index 00000000..c9568aa0
--- /dev/null
+++ b/packages/react-components/lib/Checkbox.js
@@ -0,0 +1,43 @@
+import {
+  jpCheckbox,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpCheckbox());
+
+export const Checkbox = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { readonly, readOnly, indeterminate, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'readOnly', props.readOnly);
+  useProperties(ref, 'indeterminate', props.indeterminate);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-checkbox',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      readonly: props.readonly ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Combobox.d.ts b/packages/react-components/lib/Combobox.d.ts
new file mode 100644
index 00000000..991fcb17
--- /dev/null
+++ b/packages/react-components/lib/Combobox.d.ts
@@ -0,0 +1,95 @@
+import { Combobox as ComboboxElement } from '@jupyter/web-components';
+
+export type { ComboboxElement };
+
+export interface ComboboxProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<ComboboxElement>;
+
+  /** Whether the combobox has a compact layout or not. */
+  autowidth?: boolean;
+
+  /** Whether the combobox has a compact layout or not. */
+  minimal?: boolean;
+
+  /** The open attribute. */
+  open?: boolean;
+
+  /** The autocomplete attribute. */
+  autocomplete?: ComboboxElement['autocomplete'];
+
+  /** Sets the placeholder value of the element, generally used to provide a hint to the user. */
+  placeholder?: ComboboxElement['placeholder'];
+
+  /** The placement for the listbox when the combobox is open. */
+  position?: ComboboxElement['position'];
+
+  /** Whether the combobox has a compact layout or not. */
+  autoWidth?: ComboboxElement['autoWidth'];
+
+  /** The collection of currently filtered options. */
+  filteredOptions?: ComboboxElement['filteredOptions'];
+
+  /** The list of options. */
+  options?: ComboboxElement['options'];
+
+  /** The value property. */
+  value?: ComboboxElement['value'];
+
+  /** The number of options. */
+  length?: ComboboxElement['length'];
+
+  /** The disabled state of the listbox. */
+  disabled?: ComboboxElement['disabled'];
+
+  /** The index of the selected option. */
+  selectedIndex?: ComboboxElement['selectedIndex'];
+
+  /** A collection of the selected options. */
+  selectedOptions?: ComboboxElement['selectedOptions'];
+
+  /** Fires a custom 'input' event when the value has changed */
+  onInput?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'change' event when the value updates */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Combobox class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **input** - Fires a custom 'input' event when the value has changed
+ * - **change** - Fires a custom 'change' event when the value updates
+ *
+ * ### **Methods:**
+ *
+ *
+ * - **validate(): _void_** - {@inheritDoc (FormAssociated:interface).validate}
+ * - **filterOptions(): _void_** - Filter available options by text value.
+ * - **setPositioning(force): _void_** - Calculate and apply listbox positioning based on available viewport space.
+ * - **selectFirstOption(): _void_** - Moves focus to the first selectable option.
+ * - **setSelectedOptions()** - Sets an option as selected and gives it focus.
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the input
+ * - **end** - Content which can be provided after the input
+ * - **control** - Used to replace the input element representing the combobox
+ * - **indicator** - The visual indicator representing the expanded state
+ * - _default_ - The default slot for the options
+ *
+ * ### **CSS Parts:**
+ *  - **control** - The wrapper element containing the input area, including start and end
+ * - **selected-value** - The input element representing the selected value
+ * - **indicator** - The element wrapping the indicator slot
+ * - **listbox** - The wrapper for the listbox slotted options
+ */
+export const Combobox: React.ForwardRefExoticComponent<ComboboxProps>;
diff --git a/packages/react-components/lib/Combobox.js b/packages/react-components/lib/Combobox.js
new file mode 100644
index 00000000..8faf18e5
--- /dev/null
+++ b/packages/react-components/lib/Combobox.js
@@ -0,0 +1,71 @@
+import {
+  jpCombobox,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpCombobox());
+
+export const Combobox = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    autowidth,
+    minimal,
+    open,
+    autocomplete,
+    placeholder,
+    position,
+    autoWidth,
+    filteredOptions,
+    options,
+    value,
+    length,
+    disabled,
+    selectedIndex,
+    selectedOptions,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'input', props.onInput);
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'autoWidth', props.autoWidth);
+  useProperties(ref, 'filteredOptions', props.filteredOptions);
+  useProperties(ref, 'options', props.options);
+  useProperties(ref, 'value', props.value);
+  useProperties(ref, 'length', props.length);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'selectedIndex', props.selectedIndex);
+  useProperties(ref, 'selectedOptions', props.selectedOptions);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-combobox',
+    {
+      ref,
+      ...filteredProps,
+      autocomplete: props.autocomplete,
+      placeholder: props.placeholder,
+      position: props.position,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      autowidth: props.autowidth ? '' : undefined,
+      minimal: props.minimal ? '' : undefined,
+      open: props.open ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/DataGrid.d.ts b/packages/react-components/lib/DataGrid.d.ts
new file mode 100644
index 00000000..afa67436
--- /dev/null
+++ b/packages/react-components/lib/DataGrid.d.ts
@@ -0,0 +1,65 @@
+import { DataGrid as DataGridElement } from '@jupyter/web-components';
+
+export type { DataGridElement };
+
+export interface DataGridProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<DataGridElement>;
+
+  /** When true the component will not add itself to the tab queue.
+Default is false. */
+  noTabbing?: boolean;
+
+  /** Whether the grid should automatically generate a header row and its type */
+  generateHeader?: DataGridElement['generateHeader'];
+
+  /** String that gets applied to the the css gridTemplateColumns attribute of child rows */
+  gridTemplateColumns?: DataGridElement['gridTemplateColumns'];
+
+  /** The data being displayed in the grid */
+  rowsData?: DataGridElement['rowsData'];
+
+  /** The column definitions of the grid */
+  columnDefinitions?: DataGridElement['columnDefinitions'];
+
+  /** The template to use for the programmatic generation of rows */
+  rowItemTemplate?: DataGridElement['rowItemTemplate'];
+
+  /** The template used to render cells in generated rows. */
+  cellItemTemplate?: DataGridElement['cellItemTemplate'];
+
+  /** The template used to render header cells in generated rows. */
+  headerCellItemTemplate?: DataGridElement['headerCellItemTemplate'];
+
+  /** The index of the row that will receive focus the next time the
+grid is focused. This value changes as focus moves to different
+rows within the grid.  Changing this value when focus is already
+within the grid moves focus to the specified row. */
+  focusRowIndex?: DataGridElement['focusRowIndex'];
+
+  /** The index of the column that will receive focus the next time the
+grid is focused. This value changes as focus moves to different rows
+within the grid.  Changing this value when focus is already within
+the grid moves focus to the specified column. */
+  focusColumnIndex?: DataGridElement['focusColumnIndex'];
+
+  /** Set by the component templates. */
+  rowElementTag?: DataGridElement['rowElementTag'];
+}
+
+/**
+ * DataGrid class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for custom row elements
+ */
+export const DataGrid: React.ForwardRefExoticComponent<DataGridProps>;
diff --git a/packages/react-components/lib/DataGrid.js b/packages/react-components/lib/DataGrid.js
new file mode 100644
index 00000000..7dc4d4f6
--- /dev/null
+++ b/packages/react-components/lib/DataGrid.js
@@ -0,0 +1,62 @@
+import {
+  jpDataGrid,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpDataGrid());
+
+export const DataGrid = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    noTabbing,
+    generateHeader,
+    gridTemplateColumns,
+    rowsData,
+    columnDefinitions,
+    rowItemTemplate,
+    cellItemTemplate,
+    headerCellItemTemplate,
+    focusRowIndex,
+    focusColumnIndex,
+    rowElementTag,
+    ...filteredProps
+  } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'rowsData', props.rowsData);
+  useProperties(ref, 'columnDefinitions', props.columnDefinitions);
+  useProperties(ref, 'rowItemTemplate', props.rowItemTemplate);
+  useProperties(ref, 'cellItemTemplate', props.cellItemTemplate);
+  useProperties(ref, 'headerCellItemTemplate', props.headerCellItemTemplate);
+  useProperties(ref, 'focusRowIndex', props.focusRowIndex);
+  useProperties(ref, 'focusColumnIndex', props.focusColumnIndex);
+  useProperties(ref, 'rowElementTag', props.rowElementTag);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-data-grid',
+    {
+      ref,
+      ...filteredProps,
+      'generate-header': props.generateHeader || props['generate-header'],
+      'grid-template-columns':
+        props.gridTemplateColumns || props['grid-template-columns'],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      'no-tabbing': props.noTabbing ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/DataGridCell.d.ts b/packages/react-components/lib/DataGridCell.d.ts
new file mode 100644
index 00000000..92866db4
--- /dev/null
+++ b/packages/react-components/lib/DataGridCell.d.ts
@@ -0,0 +1,46 @@
+import { DataGridCell as DataGridCellElement } from '@jupyter/web-components';
+
+export type { DataGridCellElement };
+
+export interface DataGridCellProps
+  extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<DataGridCellElement>;
+
+  /** The type of cell */
+  cellType?: DataGridCellElement['cellType'];
+
+  /** The column index of the cell.
+This will be applied to the css grid-column-index value
+applied to the cell */
+  gridColumn?: DataGridCellElement['gridColumn'];
+
+  /** The base data for the parent row */
+  rowData?: DataGridCellElement['rowData'];
+
+  /** The base data for the column */
+  columnDefinition?: DataGridCellElement['columnDefinition'];
+
+  /** Fires a custom 'cell-focused' event when focus is on the cell or its contents */
+  onCellFocused?: (event: CustomEvent) => void;
+}
+
+/**
+ * DataGridCell class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **cell-focused** - Fires a custom 'cell-focused' event when focus is on the cell or its contents
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for cell contents.  The "cell contents template" renders here.
+ */
+export const DataGridCell: React.ForwardRefExoticComponent<DataGridCellProps>;
diff --git a/packages/react-components/lib/DataGridCell.js b/packages/react-components/lib/DataGridCell.js
new file mode 100644
index 00000000..1413c35b
--- /dev/null
+++ b/packages/react-components/lib/DataGridCell.js
@@ -0,0 +1,45 @@
+import {
+  jpDataGridCell,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpDataGridCell());
+
+export const DataGridCell = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { cellType, gridColumn, rowData, columnDefinition, ...filteredProps } =
+    props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'cell-focused', props.onCellFocused);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'rowData', props.rowData);
+  useProperties(ref, 'columnDefinition', props.columnDefinition);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-data-grid-cell',
+    {
+      ref,
+      ...filteredProps,
+      'cell-type': props.cellType || props['cell-type'],
+      'grid-column': props.gridColumn || props['grid-column'],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/DataGridRow.d.ts b/packages/react-components/lib/DataGridRow.d.ts
new file mode 100644
index 00000000..c5ae3662
--- /dev/null
+++ b/packages/react-components/lib/DataGridRow.d.ts
@@ -0,0 +1,53 @@
+import { DataGridRow as DataGridRowElement } from '@jupyter/web-components';
+
+export type { DataGridRowElement };
+
+export interface DataGridRowProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<DataGridRowElement>;
+
+  /** String that gets applied to the the css gridTemplateColumns attribute for the row */
+  gridTemplateColumns?: DataGridRowElement['gridTemplateColumns'];
+
+  /** The type of row */
+  rowType?: DataGridRowElement['rowType'];
+
+  /** The base data for this row */
+  rowData?: DataGridRowElement['rowData'];
+
+  /** The column definitions of the row */
+  columnDefinitions?: DataGridRowElement['columnDefinitions'];
+
+  /** The template used to render cells in generated rows. */
+  cellItemTemplate?: DataGridRowElement['cellItemTemplate'];
+
+  /** The template used to render header cells in generated rows. */
+  headerCellItemTemplate?: DataGridRowElement['headerCellItemTemplate'];
+
+  /** The index of the row in the parent grid.
+This is typically set programmatically by the parent grid. */
+  rowIndex?: DataGridRowElement['rowIndex'];
+
+  /** Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row */
+  onRowFocused?: (event: CustomEvent) => void;
+}
+
+/**
+ * DataGridRow class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **row-focused** - Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for custom cell elements
+ */
+export const DataGridRow: React.ForwardRefExoticComponent<DataGridRowProps>;
diff --git a/packages/react-components/lib/DataGridRow.js b/packages/react-components/lib/DataGridRow.js
new file mode 100644
index 00000000..da99c665
--- /dev/null
+++ b/packages/react-components/lib/DataGridRow.js
@@ -0,0 +1,57 @@
+import {
+  jpDataGridRow,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpDataGridRow());
+
+export const DataGridRow = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    gridTemplateColumns,
+    rowType,
+    rowData,
+    columnDefinitions,
+    cellItemTemplate,
+    headerCellItemTemplate,
+    rowIndex,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'row-focused', props.onRowFocused);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'rowData', props.rowData);
+  useProperties(ref, 'columnDefinitions', props.columnDefinitions);
+  useProperties(ref, 'cellItemTemplate', props.cellItemTemplate);
+  useProperties(ref, 'headerCellItemTemplate', props.headerCellItemTemplate);
+  useProperties(ref, 'rowIndex', props.rowIndex);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-data-grid-row',
+    {
+      ref,
+      ...filteredProps,
+      'grid-template-columns':
+        props.gridTemplateColumns || props['grid-template-columns'],
+      'row-type': props.rowType || props['row-type'],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/DateField.d.ts b/packages/react-components/lib/DateField.d.ts
new file mode 100644
index 00000000..6399daa3
--- /dev/null
+++ b/packages/react-components/lib/DateField.d.ts
@@ -0,0 +1,71 @@
+import { DateField as DateFieldElement } from '@jupyter/web-components';
+
+export type { DateFieldElement };
+
+export interface DateFieldProps
+  extends Omit<
+    React.AllHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'onInput' | 'max' | 'min'
+  > {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<DateFieldElement>;
+
+  /** When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. */
+  readonly?: boolean;
+
+  /** The appearance of the element. */
+  appearance?: DateFieldElement['appearance'];
+
+  /** Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. */
+  list?: DateFieldElement['list'];
+
+  /** Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information. */
+  autofocus?: DateFieldElement['autofocus'];
+
+  /** Amount to increment or decrement the value by */
+  step?: DateFieldElement['step'];
+
+  /** The maximum the value can be */
+  max?: DateFieldElement['max'];
+
+  /** The minimum the value can be */
+  min?: DateFieldElement['min'];
+
+  /** Fires a custom 'input' event when the value has changed */
+  onInput?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'change' event when the value has changed */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Date field class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **input** - Fires a custom 'input' event when the value has changed
+ * - **change** - Fires a custom 'change' event when the value has changed
+ *
+ * ### **Methods:**
+ *  - **validate(): _void_** - {@inheritDoc (FormAssociated:interface).validate}
+ * - **stepUp(): _void_** - Increments the value using the step value
+ * - **stepDown(): _void_** - Decrements the value using the step value
+ * - **select(): _void_** - Selects all the text in the date field
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the date field input
+ * - **end** - Content which can be provided after the date field input
+ * - _default_ - The default slot for the label
+ *
+ * ### **CSS Parts:**
+ *  - **label** - The label
+ * - **root** - The element wrapping the control, including start and end slots
+ * - **control** - The element representing the input
+ */
+export const DateField: React.ForwardRefExoticComponent<DateFieldProps>;
diff --git a/packages/react-components/lib/DateField.js b/packages/react-components/lib/DateField.js
new file mode 100644
index 00000000..7943474a
--- /dev/null
+++ b/packages/react-components/lib/DateField.js
@@ -0,0 +1,45 @@
+import {
+  jpDateField,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpDateField());
+
+export const DateField = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { autofocus, step, max, min, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'input', props.onInput);
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'autofocus', props.autofocus);
+  useProperties(ref, 'step', props.step);
+  useProperties(ref, 'max', props.max);
+  useProperties(ref, 'min', props.min);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-date-field',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Dialog.d.ts b/packages/react-components/lib/Dialog.d.ts
new file mode 100644
index 00000000..89a505f4
--- /dev/null
+++ b/packages/react-components/lib/Dialog.d.ts
@@ -0,0 +1,61 @@
+import { Dialog as DialogElement } from '@jupyter/web-components';
+
+export type { DialogElement };
+
+export interface DialogProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<DialogElement>;
+
+  /** Indicates that the dialog should trap focus. */
+  trapFocus?: boolean;
+
+  /** The id of the element describing the dialog. */
+  ariaDescribedby?: DialogElement['ariaDescribedby'];
+
+  /** The id of the element labeling the dialog. */
+  ariaLabelledby?: DialogElement['ariaLabelledby'];
+
+  /** The label surfaced to assistive technologies. */
+  ariaLabel?: DialogElement['ariaLabel'];
+
+  /** Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal
+overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event. */
+  modal?: DialogElement['modal'];
+
+  /** The hidden state of the element. */
+  hidden?: DialogElement['hidden'];
+
+  /** Fires a custom 'cancel' event when the modal overlay is clicked */
+  onCancel?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'close' event when the dialog is hidden */
+  onClose?: (event: CustomEvent) => void;
+}
+
+/**
+ * Dialog class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **cancel** - Fires a custom 'cancel' event when the modal overlay is clicked
+ * - **close** - Fires a custom 'close' event when the dialog is hidden
+ *
+ * ### **Methods:**
+ *  - **show(): _void_** - The method to show the dialog.
+ * - **hide(): _void_** - The method to hide the dialog.
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the dialog content
+ *
+ * ### **CSS Parts:**
+ *  - **positioning-region** - A wrapping element used to center the dialog and position the modal overlay
+ * - **overlay** - The modal dialog overlay
+ * - **control** - The dialog element
+ */
+export const Dialog: React.ForwardRefExoticComponent<DialogProps>;
diff --git a/packages/react-components/lib/Dialog.js b/packages/react-components/lib/Dialog.js
new file mode 100644
index 00000000..0df9d283
--- /dev/null
+++ b/packages/react-components/lib/Dialog.js
@@ -0,0 +1,57 @@
+import { jpDialog, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpDialog());
+
+export const Dialog = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    trapFocus,
+    ariaDescribedby,
+    ariaLabelledby,
+    ariaLabel,
+    modal,
+    hidden,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'cancel', props.onCancel);
+  useEventListener(ref, 'close', props.onClose);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'modal', props.modal);
+  useProperties(ref, 'hidden', props.hidden);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ({
+    show: () => ref.current.show(),
+    hide: () => ref.current.hide(),
+    compose: (this_, elementDefinition) =>
+      ref.current.compose(this_, elementDefinition)
+  }));
+
+  return React.createElement(
+    'jp-dialog',
+    {
+      ref,
+      ...filteredProps,
+      'aria-describedby': props.ariaDescribedby || props['aria-describedby'],
+      'aria-labelledby': props.ariaLabelledby || props['aria-labelledby'],
+      'aria-label': props.ariaLabel || props['aria-label'],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      'trap-focus': props.trapFocus ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Disclosure.d.ts b/packages/react-components/lib/Disclosure.d.ts
new file mode 100644
index 00000000..43010bf8
--- /dev/null
+++ b/packages/react-components/lib/Disclosure.d.ts
@@ -0,0 +1,48 @@
+import { Disclosure as DisclosureElement } from '@jupyter/web-components';
+
+export type { DisclosureElement };
+
+export interface DisclosureProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<DisclosureElement>;
+
+  /** The appearance the anchor should have. */
+  appearance?: DisclosureElement['appearance'];
+
+  /** Invoker title */
+  title?: DisclosureElement['title'];
+
+  /** Determines if the element should show the extra content or not. */
+  expanded?: DisclosureElement['expanded'];
+
+  /** fires a toggle event when the summary is toggled */
+  onToggle?: (event: CustomEvent) => void;
+}
+
+/**
+ * Disclosure class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **toggle** - fires a toggle event when the summary is toggled
+ *
+ * ### **Methods:**
+ *
+ *
+ * - **show(): _void_** - Show extra content.
+ * - **hide(): _void_** - Hide extra content.
+ * - **toggle(): _void_** - Toggle the current(expanded/collapsed) state.
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the summary content
+ * - **end** - Content which can be provided after the summary content
+ * - **title** - The summary content
+ * - _default_ - The default slot for the disclosure content
+ */
+export const Disclosure: React.ForwardRefExoticComponent<DisclosureProps>;
diff --git a/packages/react-components/lib/Disclosure.js b/packages/react-components/lib/Disclosure.js
new file mode 100644
index 00000000..4d6b3149
--- /dev/null
+++ b/packages/react-components/lib/Disclosure.js
@@ -0,0 +1,43 @@
+import {
+  jpDisclosure,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpDisclosure());
+
+export const Disclosure = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { appearance, title, expanded, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'toggle', props.onToggle);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'expanded', props.expanded);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-disclosure',
+    {
+      ref,
+      ...filteredProps,
+      appearance: props.appearance,
+      title: props.title,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Divider.d.ts b/packages/react-components/lib/Divider.d.ts
new file mode 100644
index 00000000..c1d0be44
--- /dev/null
+++ b/packages/react-components/lib/Divider.d.ts
@@ -0,0 +1,28 @@
+import { Divider as DividerElement } from '@jupyter/web-components';
+
+export type { DividerElement };
+
+export interface DividerProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<DividerElement>;
+
+  /** The role of the element. */
+  role?: DividerElement['role'];
+
+  /** The orientation of the divider. */
+  orientation?: DividerElement['orientation'];
+}
+
+/**
+ * Divider class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ */
+export const Divider: React.ForwardRefExoticComponent<DividerProps>;
diff --git a/packages/react-components/lib/Divider.js b/packages/react-components/lib/Divider.js
new file mode 100644
index 00000000..22bf1ea6
--- /dev/null
+++ b/packages/react-components/lib/Divider.js
@@ -0,0 +1,36 @@
+import { jpDivider, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpDivider());
+
+export const Divider = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { role, orientation, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-divider',
+    {
+      ref,
+      ...filteredProps,
+      role: props.role,
+      orientation: props.orientation,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Listbox.d.ts b/packages/react-components/lib/Listbox.d.ts
new file mode 100644
index 00000000..719d2c06
--- /dev/null
+++ b/packages/react-components/lib/Listbox.d.ts
@@ -0,0 +1,55 @@
+import { Listbox as ListboxElement } from '@jupyter/web-components';
+
+export type { ListboxElement };
+
+export interface ListboxProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<ListboxElement>;
+
+  /** Indicates if the listbox is in multi-selection mode. */
+  multiple?: ListboxElement['multiple'];
+
+  /** The maximum number of options to display. */
+  size?: ListboxElement['size'];
+
+  /** The number of options. */
+  length?: ListboxElement['length'];
+
+  /** The list of options. */
+  options?: ListboxElement['options'];
+
+  /** The disabled state of the listbox. */
+  disabled?: ListboxElement['disabled'];
+
+  /** The index of the selected option. */
+  selectedIndex?: ListboxElement['selectedIndex'];
+
+  /** A collection of the selected options. */
+  selectedOptions?: ListboxElement['selectedOptions'];
+
+  /** Fires a custom 'change' event when the value has changed */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Listbox class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Fires a custom 'change' event when the value has changed
+ *
+ * ### **Methods:**
+ *  - **setSelectedOptions()** - Sets an option as selected and gives it focus.
+ * - **selectFirstOption(): _void_** - Moves focus to the first selectable option.
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the listbox options
+ */
+export const Listbox: React.ForwardRefExoticComponent<ListboxProps>;
diff --git a/packages/react-components/lib/Listbox.js b/packages/react-components/lib/Listbox.js
new file mode 100644
index 00000000..0858f523
--- /dev/null
+++ b/packages/react-components/lib/Listbox.js
@@ -0,0 +1,53 @@
+import { jpListbox, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpListbox());
+
+export const Listbox = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    multiple,
+    size,
+    length,
+    options,
+    disabled,
+    selectedIndex,
+    selectedOptions,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'multiple', props.multiple);
+  useProperties(ref, 'size', props.size);
+  useProperties(ref, 'length', props.length);
+  useProperties(ref, 'options', props.options);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'selectedIndex', props.selectedIndex);
+  useProperties(ref, 'selectedOptions', props.selectedOptions);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-listbox',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Menu.d.ts b/packages/react-components/lib/Menu.d.ts
new file mode 100644
index 00000000..1c3db6d4
--- /dev/null
+++ b/packages/react-components/lib/Menu.d.ts
@@ -0,0 +1,27 @@
+import { Menu as MenuElement } from '@jupyter/web-components';
+
+export type { MenuElement };
+
+export interface MenuProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<MenuElement>;
+}
+
+/**
+ * Menu class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **focus(): _void_** - Focuses the first item in the menu.
+ * - **collapseExpandedItem(): _void_** - Collapses any expanded menu items.
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the menu items
+ */
+export const Menu: React.ForwardRefExoticComponent<MenuProps>;
diff --git a/packages/react-components/lib/Menu.js b/packages/react-components/lib/Menu.js
new file mode 100644
index 00000000..a60f89fe
--- /dev/null
+++ b/packages/react-components/lib/Menu.js
@@ -0,0 +1,34 @@
+import { jpMenu, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpMenu());
+
+export const Menu = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-menu',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/MenuItem.d.ts b/packages/react-components/lib/MenuItem.d.ts
new file mode 100644
index 00000000..13a7f15a
--- /dev/null
+++ b/packages/react-components/lib/MenuItem.d.ts
@@ -0,0 +1,63 @@
+import { MenuItem as MenuItemElement } from '@jupyter/web-components';
+
+export type { MenuItemElement };
+
+export interface MenuItemProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<MenuItemElement>;
+
+  /** The role of the element. */
+  role?: MenuItemElement['role'];
+
+  /** The disabled state of the element. */
+  disabled?: MenuItemElement['disabled'];
+
+  /** The expanded state of the element. */
+  expanded?: MenuItemElement['expanded'];
+
+  /** The checked value of the element. */
+  checked?: MenuItemElement['checked'];
+
+  /** Fires a custom 'expanded-change' event when the expanded state changes */
+  onExpand?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Menu item class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **expanded-change** - Fires a custom 'expanded-change' event when the expanded state changes
+ * - **change** - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **checked-indicator** - The checked indicator
+ * - **radio-indicator** - The radio indicator
+ * - **start** - Content which can be provided before the menu item content
+ * - **end** - Content which can be provided after the menu item content
+ * - _default_ - The default slot for menu item content
+ * - **expand-collapse-indicator** - The expand/collapse indicator
+ * - **submenu** - Used to nest menu's within menu items
+ *
+ * ### **CSS Parts:**
+ *  - **input-container** - The element representing the visual checked or radio indicator
+ * - **checkbox** - The element wrapping the `menuitemcheckbox` indicator
+ * - **radio** - The element wrapping the `menuitemradio` indicator
+ * - **content** - The element wrapping the menu item content
+ * - **expand-collapse-glyph-container** - The element wrapping the expand collapse element
+ * - **expand-collapse** - The expand/collapse element
+ * - **submenu-region** - The container for the submenu, used for positioning
+ */
+export const MenuItem: React.ForwardRefExoticComponent<MenuItemProps>;
diff --git a/packages/react-components/lib/MenuItem.js b/packages/react-components/lib/MenuItem.js
new file mode 100644
index 00000000..30ac7b9c
--- /dev/null
+++ b/packages/react-components/lib/MenuItem.js
@@ -0,0 +1,45 @@
+import {
+  jpMenuItem,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpMenuItem());
+
+export const MenuItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { role, disabled, expanded, checked, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'expanded-change', props.onExpand);
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'expanded', props.expanded);
+  useProperties(ref, 'checked', props.checked);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-menu-item',
+    {
+      ref,
+      ...filteredProps,
+      role: props.role,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/NumberField.d.ts b/packages/react-components/lib/NumberField.d.ts
new file mode 100644
index 00000000..133068ed
--- /dev/null
+++ b/packages/react-components/lib/NumberField.d.ts
@@ -0,0 +1,94 @@
+import { NumberField as NumberFieldElement } from '@jupyter/web-components';
+
+export type { NumberFieldElement };
+
+export interface NumberFieldProps
+  extends Omit<
+    React.AllHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'onInput'
+  > {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<NumberFieldElement>;
+
+  /** When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. */
+  readonly?: boolean;
+
+  /** When true, spin buttons will not be rendered */
+  hideStep?: boolean;
+
+  /** The appearance of the element. */
+  appearance?: NumberFieldElement['appearance'];
+
+  /** Sets the placeholder value of the element, generally used to provide a hint to the user. */
+  placeholder?: NumberFieldElement['placeholder'];
+
+  /** Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. */
+  list?: NumberFieldElement['list'];
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information. */
+  readOnly?: NumberFieldElement['readOnly'];
+
+  /** Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information. */
+  autofocus?: NumberFieldElement['autofocus'];
+
+  /** The maximum number of characters a user can enter. */
+  maxlength?: NumberFieldElement['maxlength'];
+
+  /** The minimum number of characters a user can enter. */
+  minlength?: NumberFieldElement['minlength'];
+
+  /** Sets the width of the element to a specified number of characters. */
+  size?: NumberFieldElement['size'];
+
+  /** Amount to increment or decrement the value by */
+  step?: NumberFieldElement['step'];
+
+  /** The maximum the value can be */
+  max?: NumberFieldElement['max'];
+
+  /** The minimum the value can be */
+  min?: NumberFieldElement['min'];
+
+  /** Fires a custom 'input' event when the value has changed */
+  onInput?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'change' event when the value has changed */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Number field class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **input** - Fires a custom 'input' event when the value has changed
+ * - **change** - Fires a custom 'change' event when the value has changed
+ *
+ * ### **Methods:**
+ *  - **validate(): _void_** - {@inheritDoc (FormAssociated:interface).validate}
+ * - **stepUp(): _void_** - Increments the value using the step value
+ * - **stepDown(): _void_** - Decrements the value using the step value
+ * - **select(): _void_** - Selects all the text in the number field
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the number field input
+ * - **end** - Content which can be provided after the number field input
+ * - _default_ - The default slot for the label
+ * - **step-up-glyph** - The glyph for the step up control
+ * - **step-down-glyph** - The glyph for the step down control
+ *
+ * ### **CSS Parts:**
+ *  - **label** - The label
+ * - **root** - The element wrapping the control, including start and end slots
+ * - **control** - The element representing the input
+ * - **controls** - The step up and step down controls
+ * - **step-up** - The step up control
+ * - **step-down** - The step down control
+ */
+export const NumberField: React.ForwardRefExoticComponent<NumberFieldProps>;
diff --git a/packages/react-components/lib/NumberField.js b/packages/react-components/lib/NumberField.js
new file mode 100644
index 00000000..6808fb86
--- /dev/null
+++ b/packages/react-components/lib/NumberField.js
@@ -0,0 +1,69 @@
+import {
+  jpNumberField,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpNumberField());
+
+export const NumberField = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    readonly,
+    hideStep,
+    appearance,
+    placeholder,
+    list,
+    readOnly,
+    autofocus,
+    maxlength,
+    minlength,
+    size,
+    step,
+    max,
+    min,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'input', props.onInput);
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'readOnly', props.readOnly);
+  useProperties(ref, 'autofocus', props.autofocus);
+  useProperties(ref, 'maxlength', props.maxlength);
+  useProperties(ref, 'minlength', props.minlength);
+  useProperties(ref, 'size', props.size);
+  useProperties(ref, 'step', props.step);
+  useProperties(ref, 'max', props.max);
+  useProperties(ref, 'min', props.min);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-number-field',
+    {
+      ref,
+      ...filteredProps,
+      appearance: props.appearance,
+      placeholder: props.placeholder,
+      list: props.list,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      readonly: props.readonly ? '' : undefined,
+      'hide-step': props.hideStep ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Option.d.ts b/packages/react-components/lib/Option.d.ts
new file mode 100644
index 00000000..1d3d3c45
--- /dev/null
+++ b/packages/react-components/lib/Option.d.ts
@@ -0,0 +1,55 @@
+import { Option as OptionElement } from '@jupyter/web-components';
+
+export type { OptionElement };
+
+export interface OptionProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<OptionElement>;
+
+  /** The selected attribute value. This sets the initial selected value. */
+  selected?: boolean;
+
+  /** The initial value of the option. This value sets the `value` property
+only when the `value` property has not been explicitly set. */
+  value?: OptionElement['value'];
+
+  /** The checked state is used when the parent listbox is in multiple selection mode.
+To avoid accessibility conflicts, the checked state should not be present in
+single selection mode. */
+  checked?: OptionElement['checked'];
+
+  /** The defaultSelected state of the option. */
+  defaultSelected?: OptionElement['defaultSelected'];
+
+  /** The disabled state of the option. */
+  disabled?: OptionElement['disabled'];
+
+  /** The selected attribute value. This sets the initial selected value. */
+  selectedAttribute?: OptionElement['selectedAttribute'];
+
+  /** Track whether the value has been changed from the initial value */
+  dirtyValue?: OptionElement['dirtyValue'];
+}
+
+/**
+ * Listbox option class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **checkedChanged(prev: _boolean | unknown_, next: _boolean_): _void_** - Updates the ariaChecked property when the checked property changes.
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the listbox option content
+ * - **end** - Content which can be provided after the listbox option content
+ * - _default_ - The default slot for listbox option content
+ *
+ * ### **CSS Parts:**
+ *  - **content** - Wraps the listbox option content
+ */
+export const Option: React.ForwardRefExoticComponent<OptionProps>;
diff --git a/packages/react-components/lib/Option.js b/packages/react-components/lib/Option.js
new file mode 100644
index 00000000..5b5d1c71
--- /dev/null
+++ b/packages/react-components/lib/Option.js
@@ -0,0 +1,47 @@
+import { jpOption, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpOption());
+
+export const Option = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    selected,
+    value,
+    checked,
+    content,
+    defaultSelected,
+    disabled,
+    selectedAttribute,
+    dirtyValue,
+    ...filteredProps
+  } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'checked', props.checked);
+  useProperties(ref, 'content', props.content);
+  useProperties(ref, 'defaultSelected', props.defaultSelected);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'selectedAttribute', props.selectedAttribute);
+  useProperties(ref, 'dirtyValue', props.dirtyValue);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-option',
+    {
+      ref,
+      ...filteredProps,
+      value: props.value,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      selected: props.selected ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Picker.d.ts b/packages/react-components/lib/Picker.d.ts
new file mode 100644
index 00000000..acc648b2
--- /dev/null
+++ b/packages/react-components/lib/Picker.d.ts
@@ -0,0 +1,102 @@
+import { Picker as PickerElement } from '@jupyter/web-components';
+
+export type { PickerElement };
+
+export interface PickerProps extends React.AllHTMLAttributes<HTMLInputElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<PickerElement>;
+
+  /** Whether the component should remove an option from the list when it is in the selection */
+  filterSelected?: boolean;
+
+  /** Whether the component should remove options based on the current query */
+  filterQuery?: boolean;
+
+  /** Currently selected items. Comma delineated string ie. "apples,oranges". */
+  selection?: PickerElement['selection'];
+
+  /** Currently available options. Comma delineated string ie. "apples,oranges". */
+  options?: PickerElement['options'];
+
+  /** The maximum number of items that can be selected. */
+  maxSelected?: PickerElement['maxSelected'];
+
+  /** The text to present to assistive technolgies when no suggestions are available. */
+  noSuggestionsText?: PickerElement['noSuggestionsText'];
+
+  /** The text to present to assistive technolgies when suggestions are available. */
+  suggestionsAvailableText?: PickerElement['suggestionsAvailableText'];
+
+  /** The text to present to assistive technologies when suggestions are loading. */
+  loadingText?: PickerElement['loadingText'];
+
+  /** Applied to the aria-label attribute of the input element */
+  label?: PickerElement['label'];
+
+  /** Applied to the aria-labelledby attribute of the input element */
+  labelledby?: PickerElement['labelledBy'];
+
+  /** Applied to the placeholder attribute of the input element */
+  placeholder?: PickerElement['placeholder'];
+
+  /** Controls menu placement */
+  menuPlacement?: PickerElement['menuPlacement'];
+
+  /** Whether to display a loading state if the menu is opened. */
+  showLoading?: PickerElement['showLoading'];
+
+  /** Template used to generate selected items.
+This is used in a repeat directive. */
+  listItemTemplate?: PickerElement['listItemTemplate'];
+
+  /** Default template to use for selected items (usually specified in the component template).
+This is used in a repeat directive. */
+  defaultListItemTemplate?: PickerElement['defaultListItemTemplate'];
+
+  /** Template to use for available options.
+This is used in a repeat directive. */
+  menuOptionTemplate?: PickerElement['menuOptionTemplate'];
+
+  /** Default template to use for available options (usually specified in the template).
+This is used in a repeat directive. */
+  defaultMenuOptionTemplate?: PickerElement['defaultMenuOptionTemplate'];
+
+  /** Template to use for the contents of a selected list item */
+  listItemContentsTemplate?: PickerElement['listItemContentsTemplate'];
+
+  /** Template to use for the contents of menu options */
+  menuOptionContentsTemplate?: PickerElement['menuOptionContentsTemplate'];
+
+  /** Current list of options in array form */
+  optionsList?: PickerElement['optionsList'];
+
+  /** The text value currently in the input field */
+  query?: PickerElement['query'];
+
+  /** Reference to the placeholder element for the repeat directive */
+  itemsPlaceholderElement?: PickerElement['itemsPlaceholderElement'];
+}
+
+/**
+ * Picker class
+ *
+ * @alpha
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **focus()** - Move focus to the input element
+ * - **handleKeyDown(e: _KeyboardEvent_): _boolean_** - Handle key down events.
+ * - **handleFocusIn(e: _FocusEvent_): _boolean_** - Handle focus in events.
+ * - **handleFocusOut(e: _FocusEvent_): _boolean_** - Handle focus out events.
+ * - **handleSelectionChange(): _void_** - The list of selected items has changed
+ * - **handleRegionLoaded(e: _Event_): _void_** - Anchored region is loaded, menu and options exist in the DOM.
+ * - **handleItemInvoke(e: _Event_): _boolean_** - A list item has been invoked.
+ * - **handleOptionInvoke(e: _Event_): _boolean_** - A menu option has been invoked.
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ */
+export const Picker: React.ForwardRefExoticComponent<PickerProps>;
diff --git a/packages/react-components/lib/Picker.js b/packages/react-components/lib/Picker.js
new file mode 100644
index 00000000..f097cfe5
--- /dev/null
+++ b/packages/react-components/lib/Picker.js
@@ -0,0 +1,94 @@
+import { jpPicker, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpPicker());
+
+export const Picker = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    filterSelected,
+    filterQuery,
+    selection,
+    options,
+    maxSelected,
+    noSuggestionsText,
+    suggestionsAvailableText,
+    loadingText,
+    label,
+    labelledby,
+    placeholder,
+    menuPlacement,
+    showLoading,
+    listItemTemplate,
+    defaultListItemTemplate,
+    menuOptionTemplate,
+    defaultMenuOptionTemplate,
+    listItemContentsTemplate,
+    menuOptionContentsTemplate,
+    optionsList,
+    query,
+    itemsPlaceholderElement,
+    ...filteredProps
+  } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'showLoading', props.showLoading);
+  useProperties(ref, 'listItemTemplate', props.listItemTemplate);
+  useProperties(ref, 'defaultListItemTemplate', props.defaultListItemTemplate);
+  useProperties(ref, 'menuOptionTemplate', props.menuOptionTemplate);
+  useProperties(
+    ref,
+    'defaultMenuOptionTemplate',
+    props.defaultMenuOptionTemplate
+  );
+  useProperties(
+    ref,
+    'listItemContentsTemplate',
+    props.listItemContentsTemplate
+  );
+  useProperties(
+    ref,
+    'menuOptionContentsTemplate',
+    props.menuOptionContentsTemplate
+  );
+  useProperties(ref, 'optionsList', props.optionsList);
+  useProperties(ref, 'query', props.query);
+  useProperties(ref, 'itemsPlaceholderElement', props.itemsPlaceholderElement);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-draft-picker',
+    {
+      ref,
+      ...filteredProps,
+      selection: props.selection,
+      options: props.options,
+      'max-selected': props.maxSelected || props['max-selected'],
+      'no-suggestions-text':
+        props.noSuggestionsText || props['no-suggestions-text'],
+      'suggestions-available-text':
+        props.suggestionsAvailableText || props['suggestions-available-text'],
+      'loading-text': props.loadingText || props['loading-text'],
+      label: props.label,
+      labelledby: props.labelledby,
+      placeholder: props.placeholder,
+      'menu-placement': props.menuPlacement || props['menu-placement'],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      'filter-selected': props.filterSelected ? '' : undefined,
+      'filter-query': props.filterQuery ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/PickerList.d.ts b/packages/react-components/lib/PickerList.d.ts
new file mode 100644
index 00000000..e6137a3b
--- /dev/null
+++ b/packages/react-components/lib/PickerList.d.ts
@@ -0,0 +1,24 @@
+import { PickerList as PickerListElement } from '@jupyter/web-components';
+
+export type { PickerListElement };
+
+export interface PickerListProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<PickerListElement>;
+}
+
+/**
+ * Picker list class
+ *
+ * @alpha
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ */
+export const PickerList: React.ForwardRefExoticComponent<PickerListProps>;
diff --git a/packages/react-components/lib/PickerList.js b/packages/react-components/lib/PickerList.js
new file mode 100644
index 00000000..77e2143f
--- /dev/null
+++ b/packages/react-components/lib/PickerList.js
@@ -0,0 +1,37 @@
+import {
+  jpPickerList,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpPickerList());
+
+export const PickerList = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-draft-picker-list',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/PickerListItem.d.ts b/packages/react-components/lib/PickerListItem.d.ts
new file mode 100644
index 00000000..5c2959ae
--- /dev/null
+++ b/packages/react-components/lib/PickerListItem.d.ts
@@ -0,0 +1,31 @@
+import { PickerListItem as PickerListItemElement } from '@jupyter/web-components';
+
+export type { PickerListItemElement };
+
+export interface PickerListItemProps
+  extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<PickerListItemElement>;
+
+  /** The underlying string value of the item */
+  value?: PickerListItemElement['value'];
+
+  /** The template used to render the contents of the list item */
+  contentsTemplate?: PickerListItemElement['contentsTemplate'];
+}
+
+/**
+ * Picker list item class
+ *
+ * @alpha
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ */
+export const PickerListItem: React.ForwardRefExoticComponent<PickerListItemProps>;
diff --git a/packages/react-components/lib/PickerListItem.js b/packages/react-components/lib/PickerListItem.js
new file mode 100644
index 00000000..41b62c37
--- /dev/null
+++ b/packages/react-components/lib/PickerListItem.js
@@ -0,0 +1,39 @@
+import {
+  jpPickerListItem,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpPickerListItem());
+
+export const PickerListItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { value, contentsTemplate, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'contentsTemplate', props.contentsTemplate);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-draft-picker-list-item',
+    {
+      ref,
+      ...filteredProps,
+      value: props.value,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/PickerMenu.d.ts b/packages/react-components/lib/PickerMenu.d.ts
new file mode 100644
index 00000000..dce0ca1d
--- /dev/null
+++ b/packages/react-components/lib/PickerMenu.d.ts
@@ -0,0 +1,28 @@
+import { PickerMenu as PickerMenuElement } from '@jupyter/web-components';
+
+export type { PickerMenuElement };
+
+export interface PickerMenuProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<PickerMenuElement>;
+
+  /** Text to display to assistive technology when
+suggestions are available */
+  suggestionsAvailableText?: PickerMenuElement['suggestionsAvailableText'];
+}
+
+/**
+ * Picker menu class
+ *
+ * @alpha
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ */
+export const PickerMenu: React.ForwardRefExoticComponent<PickerMenuProps>;
diff --git a/packages/react-components/lib/PickerMenu.js b/packages/react-components/lib/PickerMenu.js
new file mode 100644
index 00000000..74e3e53b
--- /dev/null
+++ b/packages/react-components/lib/PickerMenu.js
@@ -0,0 +1,42 @@
+import {
+  jpPickerMenu,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpPickerMenu());
+
+export const PickerMenu = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { suggestionsAvailableText, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(
+    ref,
+    'suggestionsAvailableText',
+    props.suggestionsAvailableText
+  );
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-draft-picker-menu',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/PickerMenuOption.d.ts b/packages/react-components/lib/PickerMenuOption.d.ts
new file mode 100644
index 00000000..bac55360
--- /dev/null
+++ b/packages/react-components/lib/PickerMenuOption.d.ts
@@ -0,0 +1,31 @@
+import { PickerMenuOption as PickerMenuOptionElement } from '@jupyter/web-components';
+
+export type { PickerMenuOptionElement };
+
+export interface PickerMenuOptionProps
+  extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<PickerMenuOptionElement>;
+
+  /** The underlying string value of the item */
+  value?: PickerMenuOptionElement['value'];
+
+  /** The template used to render the contents of the list item */
+  contentsTemplate?: PickerMenuOptionElement['contentsTemplate'];
+}
+
+/**
+ * Picker menu options class
+ *
+ * @alpha
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ */
+export const PickerMenuOption: React.ForwardRefExoticComponent<PickerMenuOptionProps>;
diff --git a/packages/react-components/lib/PickerMenuOption.js b/packages/react-components/lib/PickerMenuOption.js
new file mode 100644
index 00000000..6c271946
--- /dev/null
+++ b/packages/react-components/lib/PickerMenuOption.js
@@ -0,0 +1,39 @@
+import {
+  jpPickerMenuOption,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpPickerMenuOption());
+
+export const PickerMenuOption = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { value, contentsTemplate, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'contentsTemplate', props.contentsTemplate);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-draft-picker-menu-option',
+    {
+      ref,
+      ...filteredProps,
+      value: props.value,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Progress.d.ts b/packages/react-components/lib/Progress.d.ts
new file mode 100644
index 00000000..4ef8c387
--- /dev/null
+++ b/packages/react-components/lib/Progress.d.ts
@@ -0,0 +1,43 @@
+import { Progress as ProgressElement } from '@jupyter/web-components';
+
+export type { ProgressElement };
+
+export interface ProgressProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'value'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<ProgressElement>;
+
+  /** The value of the progress */
+  value?: ProgressElement['value'];
+
+  /** The minimum value */
+  min?: ProgressElement['min'];
+
+  /** The maximum value */
+  max?: ProgressElement['max'];
+
+  /** Indicates the progress is paused */
+  paused?: ProgressElement['paused'];
+}
+
+/**
+ * Progress bar class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **indeterminate** - The slot for a custom indeterminate indicator
+ *
+ * ### **CSS Parts:**
+ *  - **progress** - Represents the progress element
+ * - **determinate** - The determinate indicator
+ * - **indeterminate** - The indeterminate indicator
+ */
+export const Progress: React.ForwardRefExoticComponent<ProgressProps>;
diff --git a/packages/react-components/lib/Progress.js b/packages/react-components/lib/Progress.js
new file mode 100644
index 00000000..1c29cdba
--- /dev/null
+++ b/packages/react-components/lib/Progress.js
@@ -0,0 +1,41 @@
+import {
+  jpProgress,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpProgress());
+
+export const Progress = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { value, min, max, paused, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'value', props.value);
+  useProperties(ref, 'min', props.min);
+  useProperties(ref, 'max', props.max);
+  useProperties(ref, 'paused', props.paused);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-progress',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/ProgressRing.d.ts b/packages/react-components/lib/ProgressRing.d.ts
new file mode 100644
index 00000000..18351f94
--- /dev/null
+++ b/packages/react-components/lib/ProgressRing.d.ts
@@ -0,0 +1,43 @@
+import { ProgressRing as ProgressRingElement } from '@jupyter/web-components';
+
+export type { ProgressRingElement };
+
+export interface ProgressRingProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'value'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<ProgressRingElement>;
+
+  /** The value of the progress */
+  value?: ProgressRingElement['value'];
+
+  /** The minimum value */
+  min?: ProgressRingElement['min'];
+
+  /** The maximum value */
+  max?: ProgressRingElement['max'];
+
+  /** Indicates the progress is paused */
+  paused?: ProgressRingElement['paused'];
+}
+
+/**
+ * Progress ring class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **indeterminate** - The slot for a custom indeterminate indicator
+ *
+ * ### **CSS Parts:**
+ *  - **progress** - Represents the progress element
+ * - **determinate** - The determinate indicator
+ * - **indeterminate** - The indeterminate indicator
+ */
+export const ProgressRing: React.ForwardRefExoticComponent<ProgressRingProps>;
diff --git a/packages/react-components/lib/ProgressRing.js b/packages/react-components/lib/ProgressRing.js
new file mode 100644
index 00000000..b8127464
--- /dev/null
+++ b/packages/react-components/lib/ProgressRing.js
@@ -0,0 +1,41 @@
+import {
+  jpProgressRing,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpProgressRing());
+
+export const ProgressRing = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { value, min, max, paused, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'value', props.value);
+  useProperties(ref, 'min', props.min);
+  useProperties(ref, 'max', props.max);
+  useProperties(ref, 'paused', props.paused);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-progress-ring',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Radio.d.ts b/packages/react-components/lib/Radio.d.ts
new file mode 100644
index 00000000..77a12ad0
--- /dev/null
+++ b/packages/react-components/lib/Radio.d.ts
@@ -0,0 +1,46 @@
+import { Radio as RadioElement } from '@jupyter/web-components';
+
+export type { RadioElement };
+
+export interface RadioProps
+  extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<RadioElement>;
+
+  /** When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. */
+  readonly?: boolean;
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information. */
+  readOnly?: RadioElement['readOnly'];
+
+  /** The name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute} for more info. */
+  name?: RadioElement['name'];
+
+  /** Emits a custom change event when the checked state changes */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Radio class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Emits a custom change event when the checked state changes
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **checked-indicator** - The checked indicator
+ * - _default_ - The default slot for the label
+ *
+ * ### **CSS Parts:**
+ *  - **control** - The element representing the visual radio control
+ * - **label** - The label
+ */
+export const Radio: React.ForwardRefExoticComponent<RadioProps>;
diff --git a/packages/react-components/lib/Radio.js b/packages/react-components/lib/Radio.js
new file mode 100644
index 00000000..13224fef
--- /dev/null
+++ b/packages/react-components/lib/Radio.js
@@ -0,0 +1,40 @@
+import { jpRadio, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpRadio());
+
+export const Radio = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { readonly, readOnly, name, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'readOnly', props.readOnly);
+  useProperties(ref, 'name', props.name);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-radio',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      readonly: props.readonly ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/RadioGroup.d.ts b/packages/react-components/lib/RadioGroup.d.ts
new file mode 100644
index 00000000..ecfc9fc1
--- /dev/null
+++ b/packages/react-components/lib/RadioGroup.d.ts
@@ -0,0 +1,55 @@
+import { RadioGroup as RadioGroupElement } from '@jupyter/web-components';
+
+export type { RadioGroupElement };
+
+export interface RadioGroupProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<RadioGroupElement>;
+
+  /** When true, the child radios will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. */
+  readonly?: boolean;
+
+  /** Disables the radio group and child radios. */
+  disabled?: boolean;
+
+  /** The name of the radio group. Setting this value will set the name value
+for all child radio elements. */
+  name?: RadioGroupElement['name'];
+
+  /** The value of the checked radio */
+  value?: RadioGroupElement['value'];
+
+  /** The orientation of the group */
+  orientation?: RadioGroupElement['orientation'];
+
+  /** When true, the child radios will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information. */
+  readOnly?: RadioGroupElement['readOnly'];
+
+  /** Fires a custom 'change' event when the value changes */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * RadioGroup class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Fires a custom 'change' event when the value changes
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **label** - The slot for the label
+ * - _default_ - The default slot for radio buttons
+ *
+ * ### **CSS Parts:**
+ *  - **positioning-region** - The positioning region for laying out the radios
+ */
+export const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps>;
diff --git a/packages/react-components/lib/RadioGroup.js b/packages/react-components/lib/RadioGroup.js
new file mode 100644
index 00000000..4b477c1b
--- /dev/null
+++ b/packages/react-components/lib/RadioGroup.js
@@ -0,0 +1,54 @@
+import {
+  jpRadioGroup,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpRadioGroup());
+
+export const RadioGroup = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    readonly,
+    disabled,
+    name,
+    value,
+    orientation,
+    readOnly,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'readOnly', props.readOnly);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-radio-group',
+    {
+      ref,
+      ...filteredProps,
+      name: props.name,
+      value: props.value,
+      orientation: props.orientation,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      readonly: props.readonly ? '' : undefined,
+      disabled: props.disabled ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Search.d.ts b/packages/react-components/lib/Search.d.ts
new file mode 100644
index 00000000..ae0ba907
--- /dev/null
+++ b/packages/react-components/lib/Search.d.ts
@@ -0,0 +1,84 @@
+import { Search as SearchElement } from '@jupyter/web-components';
+
+export type { SearchElement };
+
+export interface SearchProps
+  extends Omit<
+    React.AllHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'onInput'
+  > {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<SearchElement>;
+
+  /** When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. */
+  readonly?: boolean;
+
+  /** The appearance of the element. */
+  appearance?: SearchElement['appearance'];
+
+  /** Sets the placeholder value of the element, generally used to provide a hint to the user. */
+  placeholder?: SearchElement['placeholder'];
+
+  /** Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. */
+  list?: SearchElement['list'];
+
+  /** A regular expression that the value must match to pass validation. */
+  pattern?: SearchElement['pattern'];
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information. */
+  readOnly?: SearchElement['readOnly'];
+
+  /** Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information. */
+  autofocus?: SearchElement['autofocus'];
+
+  /** The maximum number of characters a user can enter. */
+  maxlength?: SearchElement['maxlength'];
+
+  /** The minimum number of characters a user can enter. */
+  minlength?: SearchElement['minlength'];
+
+  /** Sets the width of the element to a specified number of characters. */
+  size?: SearchElement['size'];
+
+  /** Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used. */
+  spellcheck?: SearchElement['spellcheck'];
+
+  /** Fires a custom 'input' event when the value has changed */
+  onInput?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'change' event when the value has changed */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Search field class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **input** - Fires a custom 'input' event when the value has changed
+ * - **change** - Fires a custom 'change' event when the value has changed
+ *
+ * ### **Methods:**
+ *  - **validate(): _void_** - {@inheritDoc (FormAssociated:interface).validate}
+ * - **handleClearInput(): _void_** - Handles the control's clear value event
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the search input
+ * - **end** - Content which can be provided after the search clear button
+ * - _default_ - The default slot for the label
+ * - **close-button** - The clear button
+ * - **close-glyph** - The clear glyph
+ *
+ * ### **CSS Parts:**
+ *  - **label** - The label
+ * - **root** - The element wrapping the control, including start and end slots
+ * - **control** - The element representing the input
+ * - **clear-button** - The button to clear the input
+ */
+export const Search: React.ForwardRefExoticComponent<SearchProps>;
diff --git a/packages/react-components/lib/Search.js b/packages/react-components/lib/Search.js
new file mode 100644
index 00000000..8262efc3
--- /dev/null
+++ b/packages/react-components/lib/Search.js
@@ -0,0 +1,62 @@
+import { jpSearch, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpSearch());
+
+export const Search = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    readonly,
+    appearance,
+    placeholder,
+    list,
+    pattern,
+    readOnly,
+    autofocus,
+    maxlength,
+    minlength,
+    size,
+    spellcheck,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'input', props.onInput);
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'readOnly', props.readOnly);
+  useProperties(ref, 'autofocus', props.autofocus);
+  useProperties(ref, 'maxlength', props.maxlength);
+  useProperties(ref, 'minlength', props.minlength);
+  useProperties(ref, 'size', props.size);
+  useProperties(ref, 'spellcheck', props.spellcheck);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-search',
+    {
+      ref,
+      ...filteredProps,
+      appearance: props.appearance,
+      placeholder: props.placeholder,
+      list: props.list,
+      pattern: props.pattern,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      readonly: props.readonly ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Select.d.ts b/packages/react-components/lib/Select.d.ts
new file mode 100644
index 00000000..ad633feb
--- /dev/null
+++ b/packages/react-components/lib/Select.d.ts
@@ -0,0 +1,98 @@
+import { Select as SelectElement } from '@jupyter/web-components';
+
+export type { SelectElement };
+
+export interface SelectProps
+  extends Omit<
+    React.AllHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'onInput'
+  > {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<SelectElement>;
+
+  /** Whether the select has a compact layout or not. */
+  autowidth?: boolean;
+
+  /** Whether the select has a compact layout or not. */
+  minimal?: boolean;
+
+  /** The open attribute. */
+  open?: boolean;
+
+  /** Reflects the placement for the listbox when the select is open. */
+  position?: SelectElement['position'];
+
+  /** Whether the select has a compact layout or not. */
+  autoWidth?: SelectElement['autoWidth'];
+
+  /** The value property. */
+  value?: SelectElement['value'];
+
+  /** The value displayed on the button. */
+  displayValue?: SelectElement['displayValue'];
+
+  /** Indicates if the listbox is in multi-selection mode. */
+  multiple?: SelectElement['multiple'];
+
+  /** The maximum number of options to display. */
+  size?: SelectElement['size'];
+
+  /** The number of options. */
+  length?: SelectElement['length'];
+
+  /** The list of options. */
+  options?: SelectElement['options'];
+
+  /** The disabled state of the listbox. */
+  disabled?: SelectElement['disabled'];
+
+  /** The index of the selected option. */
+  selectedIndex?: SelectElement['selectedIndex'];
+
+  /** A collection of the selected options. */
+  selectedOptions?: SelectElement['selectedOptions'];
+
+  /** Fires a custom 'input' event when the value updates */
+  onInput?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'change' event when the value updates */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Select class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **input** - Fires a custom 'input' event when the value updates
+ * - **change** - Fires a custom 'change' event when the value updates
+ *
+ * ### **Methods:**
+ *
+ *
+ * - **setPositioning(): _void_** - Calculate and apply listbox positioning based on available viewport space.
+ * - **multipleChanged(prev: _boolean | undefined_, next: _boolean_)** - Sets the multiple property on the proxy element.
+ * - **setSelectedOptions()** - Sets an option as selected and gives it focus.
+ * - **selectFirstOption(): _void_** - Moves focus to the first selectable option.
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the button content
+ * - **end** - Content which can be provided after the button content
+ * - **button-container** - The element representing the select button
+ * - **selected-value** - The selected value
+ * - **indicator** - The visual indicator for the expand/collapse state of the button
+ * - _default_ - The default slot for slotted options
+ *
+ * ### **CSS Parts:**
+ *  - **control** - The element representing the select invoking element
+ * - **selected-value** - The element wrapping the selected value
+ * - **indicator** - The element wrapping the visual indicator
+ * - **listbox** - The listbox element
+ */
+export const Select: React.ForwardRefExoticComponent<SelectProps>;
diff --git a/packages/react-components/lib/Select.js b/packages/react-components/lib/Select.js
new file mode 100644
index 00000000..eb0b0144
--- /dev/null
+++ b/packages/react-components/lib/Select.js
@@ -0,0 +1,68 @@
+import { jpSelect, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpSelect());
+
+export const Select = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    autowidth,
+    minimal,
+    open,
+    position,
+    autoWidth,
+    value,
+    displayValue,
+    multiple,
+    size,
+    length,
+    options,
+    disabled,
+    selectedIndex,
+    selectedOptions,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'input', props.onInput);
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'autoWidth', props.autoWidth);
+  useProperties(ref, 'value', props.value);
+  useProperties(ref, 'displayValue', props.displayValue);
+  useProperties(ref, 'multiple', props.multiple);
+  useProperties(ref, 'size', props.size);
+  useProperties(ref, 'length', props.length);
+  useProperties(ref, 'options', props.options);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'selectedIndex', props.selectedIndex);
+  useProperties(ref, 'selectedOptions', props.selectedOptions);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-select',
+    {
+      ref,
+      ...filteredProps,
+      position: props.position,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      autowidth: props.autowidth ? '' : undefined,
+      minimal: props.minimal ? '' : undefined,
+      open: props.open ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Skeleton.d.ts b/packages/react-components/lib/Skeleton.d.ts
new file mode 100644
index 00000000..95ad2433
--- /dev/null
+++ b/packages/react-components/lib/Skeleton.d.ts
@@ -0,0 +1,37 @@
+import { Skeleton as SkeletonElement } from '@jupyter/web-components';
+
+export type { SkeletonElement };
+
+export interface SkeletonProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<SkeletonElement>;
+
+  /** Indicates the Skeleton should have a filled style. */
+  fill?: SkeletonElement['fill'];
+
+  /** Indicates what the shape of the Skeleton should be. */
+  shape?: SkeletonElement['shape'];
+
+  /** Indicates that the component can accept a pattern URL. */
+  pattern?: SkeletonElement['pattern'];
+
+  /** Indicates that the component has an activated shimmer effect */
+  shimmer?: SkeletonElement['shimmer'];
+}
+
+/**
+ * Skeleton class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot
+ */
+export const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
diff --git a/packages/react-components/lib/Skeleton.js b/packages/react-components/lib/Skeleton.js
new file mode 100644
index 00000000..6c6e842e
--- /dev/null
+++ b/packages/react-components/lib/Skeleton.js
@@ -0,0 +1,41 @@
+import {
+  jpSkeleton,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpSkeleton());
+
+export const Skeleton = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { fill, shape, pattern, shimmer, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'shimmer', props.shimmer);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-skeleton',
+    {
+      ref,
+      ...filteredProps,
+      fill: props.fill,
+      shape: props.shape,
+      pattern: props.pattern,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Slider.d.ts b/packages/react-components/lib/Slider.d.ts
new file mode 100644
index 00000000..f3c3cbeb
--- /dev/null
+++ b/packages/react-components/lib/Slider.d.ts
@@ -0,0 +1,71 @@
+import { Slider as SliderElement } from '@jupyter/web-components';
+
+export type { SliderElement };
+
+export interface SliderProps
+  extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<SliderElement>;
+
+  /** When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. */
+  readonly?: boolean;
+
+  /** The orientation of the slider. */
+  orientation?: SliderElement['orientation'];
+
+  /** The selection mode. */
+  mode?: SliderElement['mode'];
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information. */
+  readOnly?: SliderElement['readOnly'];
+
+  /** The value property, typed as a number. */
+  valueAsNumber?: SliderElement['valueAsNumber'];
+
+  /** Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value. */
+  valueTextFormatter?: SliderElement['valueTextFormatter'];
+
+  /** The minimum allowed value. */
+  min?: SliderElement['min'];
+
+  /** The maximum allowed value. */
+  max?: SliderElement['max'];
+
+  /** Value to increment or decrement via arrow keys, mouse click or drag. */
+  step?: SliderElement['step'];
+
+  /** Fires a custom 'change' event when the slider value changes */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Slider class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Fires a custom 'change' event when the slider value changes
+ *
+ * ### **Methods:**
+ *  - **increment(): _void_** - Increment the value by the step
+ * - **decrement(): _void_** - Decrement the value by the step
+ * - **setThumbPositionForOrientation(direction: _Direction_): _void_** - Places the thumb based on the current value
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **track** - The track of the slider
+ * - **track-start** - The track-start visual indicator
+ * - **thumb** - The slider thumb
+ * - _default_ - The default slot for labels
+ *
+ * ### **CSS Parts:**
+ *  - **positioning-region** - The region used to position the elements of the slider
+ * - **track-container** - The region containing the track elements
+ * - **track-start** - The element wrapping the track start slot
+ * - **thumb-container** - The thumb container element which is programatically positioned
+ */
+export const Slider: React.ForwardRefExoticComponent<SliderProps>;
diff --git a/packages/react-components/lib/Slider.js b/packages/react-components/lib/Slider.js
new file mode 100644
index 00000000..b0fbdac9
--- /dev/null
+++ b/packages/react-components/lib/Slider.js
@@ -0,0 +1,57 @@
+import { jpSlider, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpSlider());
+
+export const Slider = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    readonly,
+    orientation,
+    mode,
+    readOnly,
+    valueAsNumber,
+    valueTextFormatter,
+    min,
+    max,
+    step,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'readOnly', props.readOnly);
+  useProperties(ref, 'valueAsNumber', props.valueAsNumber);
+  useProperties(ref, 'valueTextFormatter', props.valueTextFormatter);
+  useProperties(ref, 'min', props.min);
+  useProperties(ref, 'max', props.max);
+  useProperties(ref, 'step', props.step);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-slider',
+    {
+      ref,
+      ...filteredProps,
+      orientation: props.orientation,
+      mode: props.mode,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      readonly: props.readonly ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/SliderLabel.d.ts b/packages/react-components/lib/SliderLabel.d.ts
new file mode 100644
index 00000000..68c856fa
--- /dev/null
+++ b/packages/react-components/lib/SliderLabel.d.ts
@@ -0,0 +1,37 @@
+import { SliderLabel as SliderLabelElement } from '@jupyter/web-components';
+
+export type { SliderLabelElement };
+
+export interface SliderLabelProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<SliderLabelElement>;
+
+  /** Hides the tick mark. */
+  hideMark?: boolean;
+
+  /** The disabled state of the label. This is generally controlled by the parent @microsoft/fast-foundation#(Slider:class). */
+  disabled?: boolean;
+
+  /** The position of the label relative to the min and max value of the parent @microsoft/fast-foundation#(Slider:class). */
+  position?: SliderLabelElement['position'];
+}
+
+/**
+ * Slider label class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the label content
+ *
+ * ### **CSS Parts:**
+ *  - **root** - The element wrapping the label mark and text
+ */
+export const SliderLabel: React.ForwardRefExoticComponent<SliderLabelProps>;
diff --git a/packages/react-components/lib/SliderLabel.js b/packages/react-components/lib/SliderLabel.js
new file mode 100644
index 00000000..879b6201
--- /dev/null
+++ b/packages/react-components/lib/SliderLabel.js
@@ -0,0 +1,40 @@
+import {
+  jpSliderLabel,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpSliderLabel());
+
+export const SliderLabel = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { hideMark, disabled, position, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-slider-label',
+    {
+      ref,
+      ...filteredProps,
+      position: props.position,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      'hide-mark': props.hideMark ? '' : undefined,
+      disabled: props.disabled ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Switch.d.ts b/packages/react-components/lib/Switch.d.ts
new file mode 100644
index 00000000..12d05ed2
--- /dev/null
+++ b/packages/react-components/lib/Switch.d.ts
@@ -0,0 +1,47 @@
+import { Switch as SwitchElement } from '@jupyter/web-components';
+
+export type { SwitchElement };
+
+export interface SwitchProps
+  extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<SwitchElement>;
+
+  /** When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. */
+  readonly?: boolean;
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information. */
+  readOnly?: SwitchElement['readOnly'];
+
+  /** Emits a custom change event when the checked state changes */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Switch class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Emits a custom change event when the checked state changes
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The deafult slot for the label
+ * - **checked-message** - The message when in a checked state
+ * - **unchecked-message** - The message when in an unchecked state
+ *
+ * ### **CSS Parts:**
+ *  - **label** - The label
+ * - **switch** - The element representing the switch, which wraps the indicator
+ * - **status-message** - The wrapper for the status messages
+ * - **checked-message** - The checked message
+ * - **unchecked-message** - The unchecked message
+ */
+export const Switch: React.ForwardRefExoticComponent<SwitchProps>;
diff --git a/packages/react-components/lib/Switch.js b/packages/react-components/lib/Switch.js
new file mode 100644
index 00000000..7e9c8853
--- /dev/null
+++ b/packages/react-components/lib/Switch.js
@@ -0,0 +1,39 @@
+import { jpSwitch, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpSwitch());
+
+export const Switch = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { readonly, readOnly, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'readOnly', props.readOnly);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-switch',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      readonly: props.readonly ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Tab.d.ts b/packages/react-components/lib/Tab.d.ts
new file mode 100644
index 00000000..e795ed1b
--- /dev/null
+++ b/packages/react-components/lib/Tab.d.ts
@@ -0,0 +1,28 @@
+import { Tab as TabElement } from '@jupyter/web-components';
+
+export type { TabElement };
+
+export interface TabProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<TabElement>;
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information. */
+  disabled?: TabElement['disabled'];
+}
+
+/**
+ * Tab class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the tab content
+ */
+export const Tab: React.ForwardRefExoticComponent<TabProps>;
diff --git a/packages/react-components/lib/Tab.js b/packages/react-components/lib/Tab.js
new file mode 100644
index 00000000..ca196b28
--- /dev/null
+++ b/packages/react-components/lib/Tab.js
@@ -0,0 +1,35 @@
+import { jpTab, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpTab());
+
+export const Tab = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { disabled, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'disabled', props.disabled);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-tab',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/TabPanel.d.ts b/packages/react-components/lib/TabPanel.d.ts
new file mode 100644
index 00000000..eca68ea1
--- /dev/null
+++ b/packages/react-components/lib/TabPanel.d.ts
@@ -0,0 +1,25 @@
+import { TabPanel as TabPanelElement } from '@jupyter/web-components';
+
+export type { TabPanelElement };
+
+export interface TabPanelProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<TabPanelElement>;
+}
+
+/**
+ * Tab panel class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the tabpanel content
+ */
+export const TabPanel: React.ForwardRefExoticComponent<TabPanelProps>;
diff --git a/packages/react-components/lib/TabPanel.js b/packages/react-components/lib/TabPanel.js
new file mode 100644
index 00000000..a9577e7c
--- /dev/null
+++ b/packages/react-components/lib/TabPanel.js
@@ -0,0 +1,37 @@
+import {
+  jpTabPanel,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpTabPanel());
+
+export const TabPanel = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-tab-panel',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Tabs.d.ts b/packages/react-components/lib/Tabs.d.ts
new file mode 100644
index 00000000..d141cbf1
--- /dev/null
+++ b/packages/react-components/lib/Tabs.d.ts
@@ -0,0 +1,54 @@
+import { Tabs as TabsElement } from '@jupyter/web-components';
+
+export type { TabsElement };
+
+export interface TabsProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<TabsElement>;
+
+  /** The orientation */
+  orientation?: TabsElement['orientation'];
+
+  /** The id of the active tab */
+  activeid?: TabsElement['activeid'];
+
+  /** Whether or not to show the active indicator */
+  activeindicator?: TabsElement['activeindicator'];
+
+  /** A reference to the active tab */
+  activetab?: TabsElement['activetab'];
+
+  /** Fires a custom 'change' event when a tab is clicked or during keyboard navigation */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Tabs class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
+ *
+ * ### **Methods:**
+ *  - **adjust(adjustment: _number_): _void_** - The adjust method for FASTTabs
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the tablist element
+ * - **end** - Content which can be provided after the tablist element
+ * - **tab** - The slot for tabs
+ * - **tabpanel** - The slot for tabpanels
+ *
+ * ### **CSS Parts:**
+ *  - **tablist** - The element wrapping for the tabs
+ * - **tab** - The tab slot
+ * - **activeIndicator** - The visual indicator
+ * - **tabpanel** - The tabpanel slot
+ */
+export const Tabs: React.ForwardRefExoticComponent<TabsProps>;
diff --git a/packages/react-components/lib/Tabs.js b/packages/react-components/lib/Tabs.js
new file mode 100644
index 00000000..428e9020
--- /dev/null
+++ b/packages/react-components/lib/Tabs.js
@@ -0,0 +1,47 @@
+import { jpTabs, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpTabs());
+
+export const Tabs = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    orientation,
+    activeid,
+    activeindicator,
+    activetab,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'activeindicator', props.activeindicator);
+  useProperties(ref, 'activetab', props.activetab);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-tabs',
+    {
+      ref,
+      ...filteredProps,
+      orientation: props.orientation,
+      activeid: props.activeid,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/TextArea.d.ts b/packages/react-components/lib/TextArea.d.ts
new file mode 100644
index 00000000..33883437
--- /dev/null
+++ b/packages/react-components/lib/TextArea.d.ts
@@ -0,0 +1,85 @@
+import { TextArea as TextAreaElement } from '@jupyter/web-components';
+
+export type { TextAreaElement };
+
+export interface TextAreaProps
+  extends Omit<
+    React.AllHTMLAttributes<HTMLTextAreaElement>,
+    'form' | 'onChange' | 'onSelect'
+  > {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<TextAreaElement>;
+
+  /** The appearance of the element. */
+  appearance?: TextAreaElement['appearance'];
+
+  /** The resize mode of the element. */
+  resize?: TextAreaElement['resize'];
+
+  /** The https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id | id of the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form | form the element is associated to */
+  form?: TextAreaElement['form'];
+
+  /** Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. */
+  list?: TextAreaElement['list'];
+
+  /** The name of the element. */
+  name?: TextAreaElement['name'];
+
+  /** Sets the placeholder value of the element, generally used to provide a hint to the user. */
+  placeholder?: TextAreaElement['placeholder'];
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information. */
+  readOnly?: TextAreaElement['readOnly'];
+
+  /** Indicates that this element should get focus after the page finishes loading. */
+  autofocus?: TextAreaElement['autofocus'];
+
+  /** The maximum number of characters a user can enter. */
+  maxlength?: TextAreaElement['maxlength'];
+
+  /** The minimum number of characters a user can enter. */
+  minlength?: TextAreaElement['minlength'];
+
+  /** Sizes the element horizontally by a number of character columns. */
+  cols?: TextAreaElement['cols'];
+
+  /** Sizes the element vertically by a number of character rows. */
+  rows?: TextAreaElement['rows'];
+
+  /** Sets if the element is eligible for spell checking
+but the UA. */
+  spellcheck?: TextAreaElement['spellcheck'];
+
+  /** Emits a custom 'select' event when the textarea emits a select event */
+  onSelect?: (event: CustomEvent) => void;
+
+  /** Emits a custom 'change' event when the textarea emits a change event */
+  onChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Textarea class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Emits a custom 'change' event when the textarea emits a change event
+ *
+ * ### **Methods:**
+ *  - **select(): _void_** - Selects all the text in the text area
+ * - **validate(): _void_** - {@inheritDoc (FormAssociated:interface).validate}
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the label
+ *
+ * ### **CSS Parts:**
+ *  - **label** - The label
+ * - **root** - The element wrapping the control
+ * - **control** - The textarea element
+ */
+export const TextArea: React.ForwardRefExoticComponent<TextAreaProps>;
diff --git a/packages/react-components/lib/TextArea.js b/packages/react-components/lib/TextArea.js
new file mode 100644
index 00000000..39455d71
--- /dev/null
+++ b/packages/react-components/lib/TextArea.js
@@ -0,0 +1,69 @@
+import {
+  jpTextArea,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpTextArea());
+
+export const TextArea = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    appearance,
+    resize,
+    form,
+    list,
+    name,
+    placeholder,
+    readOnly,
+    autofocus,
+    maxlength,
+    minlength,
+    cols,
+    rows,
+    spellcheck,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'select', props.onSelect);
+  useEventListener(ref, 'change', props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'readOnly', props.readOnly);
+  useProperties(ref, 'autofocus', props.autofocus);
+  useProperties(ref, 'maxlength', props.maxlength);
+  useProperties(ref, 'minlength', props.minlength);
+  useProperties(ref, 'cols', props.cols);
+  useProperties(ref, 'rows', props.rows);
+  useProperties(ref, 'spellcheck', props.spellcheck);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-text-area',
+    {
+      ref,
+      ...filteredProps,
+      appearance: props.appearance,
+      resize: props.resize,
+      form: props.form,
+      list: props.list,
+      name: props.name,
+      placeholder: props.placeholder,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/TextField.d.ts b/packages/react-components/lib/TextField.d.ts
new file mode 100644
index 00000000..1f018118
--- /dev/null
+++ b/packages/react-components/lib/TextField.d.ts
@@ -0,0 +1,83 @@
+import { TextField as TextFieldElement } from '@jupyter/web-components';
+
+export type { TextFieldElement };
+
+export interface TextFieldProps
+  extends Omit<
+    React.AllHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'onInput'
+  > {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<TextFieldElement>;
+
+  /** When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. */
+  readonly?: boolean;
+
+  /** The appearance of the element. */
+  appearance?: TextFieldElement['appearance'];
+
+  /** Sets the placeholder value of the element, generally used to provide a hint to the user. */
+  placeholder?: TextFieldElement['placeholder'];
+
+  /** Allows setting a type or mode of text. */
+  type?: TextFieldElement['type'];
+
+  /** Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. */
+  list?: TextFieldElement['list'];
+
+  /** A regular expression that the value must match to pass validation. */
+  pattern?: TextFieldElement['pattern'];
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information. */
+  readOnly?: TextFieldElement['readOnly'];
+
+  /** Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information. */
+  autofocus?: TextFieldElement['autofocus'];
+
+  /** The maximum number of characters a user can enter. */
+  maxlength?: TextFieldElement['maxlength'];
+
+  /** The minimum number of characters a user can enter. */
+  minlength?: TextFieldElement['minlength'];
+
+  /** Sets the width of the element to a specified number of characters. */
+  size?: TextFieldElement['size'];
+
+  /** Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used. */
+  spellcheck?: TextFieldElement['spellcheck'];
+
+  /** Fires a custom 'change' event when the value has changed */
+  onChange?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'input' event when the value has changed */
+  onInput?: (event: CustomEvent) => void;
+}
+
+/**
+ * Text field class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **change** - Fires a custom 'change' event when the value has changed
+ *
+ * ### **Methods:**
+ *  - **select(): _void_** - Selects all the text in the text field
+ * - **validate(): _void_** - {@inheritDoc (FormAssociated:interface).validate}
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the number field input
+ * - **end** - Content which can be provided after the number field input
+ * - _default_ - The default slot for the label
+ *
+ * ### **CSS Parts:**
+ *  - **label** - The label
+ * - **root** - The element wrapping the control, including start and end slots
+ * - **control** - The text field element
+ */
+export const TextField: React.ForwardRefExoticComponent<TextFieldProps>;
diff --git a/packages/react-components/lib/TextField.js b/packages/react-components/lib/TextField.js
new file mode 100644
index 00000000..9e128fdd
--- /dev/null
+++ b/packages/react-components/lib/TextField.js
@@ -0,0 +1,67 @@
+import {
+  jpTextField,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpTextField());
+
+export const TextField = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    readonly,
+    appearance,
+    placeholder,
+    type,
+    list,
+    pattern,
+    readOnly,
+    autofocus,
+    maxlength,
+    minlength,
+    size,
+    spellcheck,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'change', props.onChange);
+  useEventListener(ref, 'input', props.onInput);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'readOnly', props.readOnly);
+  useProperties(ref, 'autofocus', props.autofocus);
+  useProperties(ref, 'maxlength', props.maxlength);
+  useProperties(ref, 'minlength', props.minlength);
+  useProperties(ref, 'size', props.size);
+  useProperties(ref, 'spellcheck', props.spellcheck);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-text-field',
+    {
+      ref,
+      ...filteredProps,
+      appearance: props.appearance,
+      placeholder: props.placeholder,
+      type: props.type,
+      list: props.list,
+      pattern: props.pattern,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      readonly: props.readonly ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Toolbar.d.ts b/packages/react-components/lib/Toolbar.d.ts
new file mode 100644
index 00000000..733f44b1
--- /dev/null
+++ b/packages/react-components/lib/Toolbar.d.ts
@@ -0,0 +1,22 @@
+import { Toolbar as ToolbarElement } from '@jupyter/web-components';
+
+export type { ToolbarElement };
+
+export interface ToolbarProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<ToolbarElement>;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ */
+export const Toolbar: React.ForwardRefExoticComponent<ToolbarProps>;
diff --git a/packages/react-components/lib/Toolbar.js b/packages/react-components/lib/Toolbar.js
new file mode 100644
index 00000000..f8157912
--- /dev/null
+++ b/packages/react-components/lib/Toolbar.js
@@ -0,0 +1,34 @@
+import { jpToolbar, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpToolbar());
+
+export const Toolbar = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-toolbar',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/Tooltip.d.ts b/packages/react-components/lib/Tooltip.d.ts
new file mode 100644
index 00000000..a763daec
--- /dev/null
+++ b/packages/react-components/lib/Tooltip.d.ts
@@ -0,0 +1,63 @@
+import { Tooltip as TooltipElement } from '@jupyter/web-components';
+
+export type { TooltipElement };
+
+export interface TooltipProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<TooltipElement>;
+
+  /** Controls if the tooltip will always remain fully in the viewport on the horizontal axis */
+  horizontalViewportLock?: boolean;
+
+  /** Controls if the tooltip will always remain fully in the viewport on the vertical axis */
+  verticalViewportLock?: boolean;
+
+  /** The id of the element the tooltip is anchored to */
+  anchor?: TooltipElement['anchor'];
+
+  /** The delay in milliseconds before a tooltip is shown after a hover event */
+  delay?: TooltipElement['delay'];
+
+  /** Controls the placement of the tooltip relative to the anchor.
+When the position is undefined the tooltip is placed above or below the anchor based on available space. */
+  position?: TooltipElement['position'];
+
+  /** Controls when the tooltip updates its position, default is 'anchor' which only updates when
+the anchor is resized.  'auto' will update on scroll/resize events.
+Corresponds to anchored-region auto-update-mode. */
+  autoUpdateMode?: TooltipElement['autoUpdateMode'];
+
+  /** Whether the tooltip is visible or not.
+If undefined tooltip is shown when anchor element is hovered */
+  visible?: TooltipElement['visible'];
+
+  /** the html element currently being used as anchor.
+Setting this directly overrides the anchor attribute. */
+  anchorElement?: TooltipElement['anchorElement'];
+
+  /** Fires a custom 'dismiss' event when the tooltip is visible and escape key is pressed */
+  onDismiss?: (event: CustomEvent) => void;
+}
+
+/**
+ * Tooltip class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **dismiss** - Fires a custom 'dismiss' event when the tooltip is visible and escape key is pressed
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the tooltip content
+ *
+ * ### **CSS Parts:**
+ *  - **tooltip** - The tooltip element
+ */
+export const Tooltip: React.ForwardRefExoticComponent<TooltipProps>;
diff --git a/packages/react-components/lib/Tooltip.js b/packages/react-components/lib/Tooltip.js
new file mode 100644
index 00000000..cfddae93
--- /dev/null
+++ b/packages/react-components/lib/Tooltip.js
@@ -0,0 +1,55 @@
+import { jpTooltip, provideJupyterDesignSystem } from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpTooltip());
+
+export const Tooltip = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    horizontalViewportLock,
+    verticalViewportLock,
+    anchor,
+    delay,
+    position,
+    autoUpdateMode,
+    visible,
+    anchorElement,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'dismiss', props.onDismiss);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'visible', props.visible);
+  useProperties(ref, 'anchorElement', props.anchorElement);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-tooltip',
+    {
+      ref,
+      ...filteredProps,
+      anchor: props.anchor,
+      delay: props.delay,
+      position: props.position,
+      'auto-update-mode': props.autoUpdateMode || props['auto-update-mode'],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      'horizontal-viewport-lock': props.horizontalViewportLock ? '' : undefined,
+      'vertical-viewport-lock': props.verticalViewportLock ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/TreeItem.d.ts b/packages/react-components/lib/TreeItem.d.ts
new file mode 100644
index 00000000..a06aff32
--- /dev/null
+++ b/packages/react-components/lib/TreeItem.d.ts
@@ -0,0 +1,59 @@
+import { TreeItem as TreeItemElement } from '@jupyter/web-components';
+
+export type { TreeItemElement };
+
+export interface TreeItemProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'onSelect'> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<TreeItemElement>;
+
+  /** When true, the control will be appear expanded by user interaction. */
+  expanded?: TreeItemElement['expanded'];
+
+  /** When true, the control will appear selected by user interaction. */
+  selected?: TreeItemElement['selected'];
+
+  /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information. */
+  disabled?: TreeItemElement['disabled'];
+
+  /** Whether the tree is nested */
+  isNestedItem?: TreeItemElement['isNestedItem'];
+
+  /** Fires a custom 'expanded-change' event when the expanded state changes */
+  onExpand?: (event: CustomEvent) => void;
+
+  /** Fires a custom 'selected-change' event when the selected state changes */
+  onSelect?: (event: CustomEvent) => void;
+}
+
+/**
+ * Tree item class
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **expanded-change** - Fires a custom 'expanded-change' event when the expanded state changes
+ * - **selected-change** - Fires a custom 'selected-change' event when the selected state changes
+ *
+ * ### **Methods:**
+ *  - **focusItem(el: _HTMLElement_)** - Places document focus on a tree item
+ * - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - **start** - Content which can be provided before the tree item content
+ * - **end** - Content which can be provided after the tree item content
+ * - _default_ - The default slot for tree item text content
+ * - **item** - The slot for tree items (fast tree items manage this assignment themselves)
+ * - **expand-collapse-button** - The expand/collapse button
+ *
+ * ### **CSS Parts:**
+ *  - **positioning-region** - The element used to position the tree item content with exception of any child nodes
+ * - **content-region** - The element containing the expand/collapse, start, and end slots
+ * - **items** - The element wrapping any child items
+ * - **expand-collapse-button** - The expand/collapse button
+ */
+export const TreeItem: React.ForwardRefExoticComponent<TreeItemProps>;
diff --git a/packages/react-components/lib/TreeItem.js b/packages/react-components/lib/TreeItem.js
new file mode 100644
index 00000000..949d7602
--- /dev/null
+++ b/packages/react-components/lib/TreeItem.js
@@ -0,0 +1,46 @@
+import {
+  jpTreeItem,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { useEventListener, useProperties } from './react-utils.js';
+provideJupyterDesignSystem().register(jpTreeItem());
+
+export const TreeItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { expanded, selected, disabled, isNestedItem, ...filteredProps } =
+    props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, 'expanded-change', props.onExpand);
+  useEventListener(ref, 'selected-change', props.onSelect);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'expanded', props.expanded);
+  useProperties(ref, 'selected', props.selected);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'isNestedItem', props.isNestedItem);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-tree-item',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/TreeView.d.ts b/packages/react-components/lib/TreeView.d.ts
new file mode 100644
index 00000000..84082d0a
--- /dev/null
+++ b/packages/react-components/lib/TreeView.d.ts
@@ -0,0 +1,32 @@
+import { TreeView as TreeViewElement } from '@jupyter/web-components';
+
+export type { TreeViewElement };
+
+export interface TreeViewProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Allows getting a ref to the component instance.
+   */
+  ref?: React.Ref<TreeViewElement>;
+
+  /**
+  When true, the control will be appear expanded by user interaction. */
+  renderCollapsedNodes?: boolean;
+
+  /** The currently selected tree item */
+  currentSelected?: TreeViewElement['currentSelected'];
+}
+
+/**
+ * Tree view class
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **compose(this: _K_, elementDefinition: _T_): _(
+ *         overrideDefinition?: OverrideFoundationElementDefinition<T>
+ *     ) => FoundationElementRegistry<T, K>_** - Defines an element registry function with a set of element definition defaults.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for tree items
+ */
+export const TreeView: React.ForwardRefExoticComponent<TreeViewProps>;
diff --git a/packages/react-components/lib/TreeView.js b/packages/react-components/lib/TreeView.js
new file mode 100644
index 00000000..21f09a13
--- /dev/null
+++ b/packages/react-components/lib/TreeView.js
@@ -0,0 +1,35 @@
+import {
+  jpTreeView,
+  provideJupyterDesignSystem
+} from '@jupyter/web-components';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useProperties } from './react-utils.js';
+
+provideJupyterDesignSystem().register(jpTreeView());
+
+export const TreeView = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { renderCollapsedNodes, currentSelected, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, 'currentSelected', props.currentSelected);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
+
+  return React.createElement(
+    'jp-tree-view',
+    {
+      ref,
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      'render-collapsed-nodes': props.renderCollapsedNodes ? '' : undefined,
+      style: { ...props.style }
+    },
+    props.children
+  );
+});
diff --git a/packages/react-components/lib/index.d.ts b/packages/react-components/lib/index.d.ts
new file mode 100644
index 00000000..61335dba
--- /dev/null
+++ b/packages/react-components/lib/index.d.ts
@@ -0,0 +1,48 @@
+export * from './Accordion.js';
+export * from './AccordionItem.js';
+export * from './AnchoredRegion.js';
+export * from './Anchor.js';
+export * from './Avatar.js';
+export * from './Badge.js';
+export * from './Breadcrumb.js';
+export * from './BreadcrumbItem.js';
+export * from './Button.js';
+export * from './Card.js';
+export * from './Checkbox.js';
+export * from './Combobox.js';
+export * from './DateField.js';
+export * from './DataGridCell.js';
+export * from './DataGridRow.js';
+export * from './DataGrid.js';
+export * from './Dialog.js';
+export * from './Disclosure.js';
+export * from './Divider.js';
+export * from './Listbox.js';
+export * from './MenuItem.js';
+export * from './Menu.js';
+export * from './NumberField.js';
+export * from './Option.js';
+export * from './ProgressRing.js';
+export * from './Progress.js';
+export * from './Radio.js';
+export * from './RadioGroup.js';
+export * from './Search.js';
+export * from './Select.js';
+export * from './Skeleton.js';
+export * from './Slider.js';
+export * from './SliderLabel.js';
+export * from './Switch.js';
+export * from './Tab.js';
+export * from './TabPanel.js';
+export * from './Tabs.js';
+export * from './TextArea.js';
+export * from './TextField.js';
+export * from './Toolbar.js';
+export * from './Tooltip.js';
+export * from './TreeItem.js';
+export * from './TreeView.js';
+export * from './Picker.js';
+export * from './PickerMenu.js';
+export * from './PickerMenuOption.js';
+export * from './PickerList.js';
+export * from './PickerListItem.js';
diff --git a/packages/react-components/lib/index.js b/packages/react-components/lib/index.js
new file mode 100644
index 00000000..61335dba
--- /dev/null
+++ b/packages/react-components/lib/index.js
@@ -0,0 +1,48 @@
+export * from './Accordion.js';
+export * from './AccordionItem.js';
+export * from './AnchoredRegion.js';
+export * from './Anchor.js';
+export * from './Avatar.js';
+export * from './Badge.js';
+export * from './Breadcrumb.js';
+export * from './BreadcrumbItem.js';
+export * from './Button.js';
+export * from './Card.js';
+export * from './Checkbox.js';
+export * from './Combobox.js';
+export * from './DateField.js';
+export * from './DataGridCell.js';
+export * from './DataGridRow.js';
+export * from './DataGrid.js';
+export * from './Dialog.js';
+export * from './Disclosure.js';
+export * from './Divider.js';
+export * from './Listbox.js';
+export * from './MenuItem.js';
+export * from './Menu.js';
+export * from './NumberField.js';
+export * from './Option.js';
+export * from './ProgressRing.js';
+export * from './Progress.js';
+export * from './Radio.js';
+export * from './RadioGroup.js';
+export * from './Search.js';
+export * from './Select.js';
+export * from './Skeleton.js';
+export * from './Slider.js';
+export * from './SliderLabel.js';
+export * from './Switch.js';
+export * from './Tab.js';
+export * from './TabPanel.js';
+export * from './Tabs.js';
+export * from './TextArea.js';
+export * from './TextField.js';
+export * from './Toolbar.js';
+export * from './Tooltip.js';
+export * from './TreeItem.js';
+export * from './TreeView.js';
+export * from './Picker.js';
+export * from './PickerMenu.js';
+export * from './PickerMenuOption.js';
+export * from './PickerList.js';
+export * from './PickerListItem.js';
diff --git a/packages/react-components/lib/react-utils.js b/packages/react-components/lib/react-utils.js
new file mode 100644
index 00000000..923d7545
--- /dev/null
+++ b/packages/react-components/lib/react-utils.js
@@ -0,0 +1,30 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+export function useProperties(targetElement, propName, value) {
+  useEffect(() => {
+    if (value !== undefined && targetElement.current[propName] !== value) {
+      // add try catch to avoid errors when setting read-only properties
+      try {
+        targetElement.current[propName] = value;
+      } catch (e) {
+        console.warn(e);
+      }
+    }
+  }, [value]);
+}
+
+export function useEventListener(targetElement, eventName, eventHandler) {
+  useLayoutEffect(() => {
+    if (eventHandler !== undefined) {
+      targetElement?.current?.addEventListener(eventName, eventHandler);
+    }
+
+    return () => {
+      if (eventHandler?.cancel) {
+        eventHandler.cancel();
+      }
+
+      targetElement?.current?.removeEventListener(eventName, eventHandler);
+    };
+  }, [eventName, eventHandler, targetElement]);
+}
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 2519baf8..c71f02e0 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -23,22 +23,20 @@
   "types": "lib/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "tsc -p ./tsconfig.json",
+    "build": "echo all set",
     "clean": "rimraf lib tsconfig.tsbuildinfo",
-    "prettier:check": "prettier --config ./.prettierrc --check \"**/*.{ts,js,md}\"",
-    "prettier": "prettier --config ./.prettierrc --write \"**/*.{ts,js,md}\"",
-    "eslint:check": "eslint . --ext .ts,.tsx",
-    "eslint": "eslint . --ext .ts,.tsx --fix",
+    "prettier:check": "prettier --config ../../.prettierrc --check \"**/*.{ts,js,md}\"",
+    "prettier": "prettier --config ../../.prettierrc --write \"**/*.{ts,js,md}\"",
+    "eslint:check": "echo \"FIXME\" || eslint . --ext .js",
+    "eslint": "echo \"FIXME\" || eslint . --ext .js --fix",
     "prepublishOnly": "rimraf README.md && cp ../../README.md . && yarn run build"
   },
   "dependencies": {
     "@jupyter/web-components": "^0.15.3",
-    "@microsoft/fast-react-wrapper": "^0.3.22",
     "react": ">=17.0.0 <19.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.25.2",
diff --git a/packages/react-components/src/accordion-item/index.ts b/packages/react-components/src/accordion-item/index.ts
deleted file mode 100644
index d9761e74..00000000
--- a/packages/react-components/src/accordion-item/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpAccordionItem } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const AccordionItem: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    'heading-level'?: number;
-    expanded?: boolean;
-  },
-  HTMLElement
-> = wrap(jpAccordionItem(), { events: { onChange: 'change' } }) as any;
-// @ts-expect-error unknown property
-AccordionItem.displayName = 'Jupyter.AccordionItem';
diff --git a/packages/react-components/src/accordion/index.ts b/packages/react-components/src/accordion/index.ts
deleted file mode 100644
index 5416b1e0..00000000
--- a/packages/react-components/src/accordion/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpAccordion } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Accordion: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    'expand-mode'?: 'single' | 'multi';
-  },
-  HTMLElement
-> = wrap(jpAccordion(), { events: { onChange: 'change' } }) as any;
-// @ts-expect-error unknown property
-Accordion.displayName = 'Jupyter.Accordion';
diff --git a/packages/react-components/src/anchor/index.ts b/packages/react-components/src/anchor/index.ts
deleted file mode 100644
index f8f2c32b..00000000
--- a/packages/react-components/src/anchor/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpAnchor } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Anchor: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    appearance?:
-      | 'accent'
-      | 'lightweight'
-      | 'neutral'
-      | 'outline'
-      | 'stealth'
-      | 'hypertext';
-    download?: string;
-    href?: string;
-    hreflang?: string;
-    ping?: string;
-    referrerpolicy?: string;
-    rel?: string;
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    type?: string;
-  },
-  HTMLElement
-> = wrap(jpAnchor()) as any;
-// @ts-expect-error unknown property
-Anchor.displayName = 'Jupyter.Anchor';
diff --git a/packages/react-components/src/anchored-region/index.ts b/packages/react-components/src/anchored-region/index.ts
deleted file mode 100644
index f5aa972f..00000000
--- a/packages/react-components/src/anchored-region/index.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpAnchoredRegion } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const AnchoredRegion: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    anchor: string;
-    viewport?: string;
-    'horizontal-positioning-mode'?:
-      | 'uncontrolled'
-      | 'locktodefault'
-      | 'dynamic';
-    'horizontal-default-position'?:
-      | 'start'
-      | 'end'
-      | 'left'
-      | 'right'
-      | 'unset'
-      | 'center';
-    'horizontal-inset'?: boolean;
-    'horizontal-viewport-lock'?: boolean;
-    'horizontal-threshold'?: number;
-    'horizontal-scaling'?: 'anchor' | 'fill' | 'content';
-    'vertical-positioning-mode'?: 'uncontrolled' | 'locktodefault' | 'dynamic';
-    'vertical-default-position'?: 'top' | 'bottom' | 'unset' | 'center';
-    'vertical-inset'?: boolean;
-    'vertical-viewport-lock'?: boolean;
-    'vertical-threshold'?: number;
-    'vertical-scaling'?: 'anchor' | 'fill' | 'content';
-    'fixed-placement'?: boolean;
-    'auto-update-mode'?: 'anchor' | 'auto';
-    /**
-     * @property
-     */
-    anchorElement?: HTMLElement | null;
-    /**
-     * @property
-     */
-    viewportElement?: HTMLElement | null;
-  },
-  HTMLElement
-> = wrap(jpAnchoredRegion()) as any;
-// @ts-expect-error unknown property
-AnchoredRegion.displayName = 'Jupyter.AnchoredRegion';
diff --git a/packages/react-components/src/avatar/index.ts b/packages/react-components/src/avatar/index.ts
deleted file mode 100644
index 69176531..00000000
--- a/packages/react-components/src/avatar/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpAvatar } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Avatar: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    src?: string;
-    alt?: string;
-    link?: string;
-    shape?: 'circle' | 'square' | 'default';
-    fill?: string;
-    color?: string;
-  },
-  HTMLElement
-> = wrap(jpAvatar()) as any;
-// @ts-expect-error unknown property
-Avatar.displayName = 'Jupyter.Avatar';
diff --git a/packages/react-components/src/badge/index.ts b/packages/react-components/src/badge/index.ts
deleted file mode 100644
index 28c1ee38..00000000
--- a/packages/react-components/src/badge/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpBadge } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Badge: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    circular?: boolean;
-    color?: string;
-    fill?: string;
-  },
-  HTMLElement
-> = wrap(jpBadge()) as any;
-// @ts-expect-error unknown property
-Badge.displayName = 'Jupyter.Badge';
diff --git a/packages/react-components/src/breadcrumb-item/index.ts b/packages/react-components/src/breadcrumb-item/index.ts
deleted file mode 100644
index e9ee4f4e..00000000
--- a/packages/react-components/src/breadcrumb-item/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpBreadcrumbItem } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const BreadcrumbItem: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    download?: string;
-    href?: string;
-    hreflang?: string;
-    ping?: string;
-    referrerpolicy?: string;
-    rel?: string;
-    /**
-     * Whether to display breadcrumb item separator
-     */
-    separator?: boolean;
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    type?: string;
-  },
-  HTMLElement
-> = wrap(jpBreadcrumbItem()) as any;
-// @ts-expect-error unknown property
-BreadcrumbItem.displayName = 'Jupyter.BreadcrumbItem';
diff --git a/packages/react-components/src/breadcrumb/index.ts b/packages/react-components/src/breadcrumb/index.ts
deleted file mode 100644
index 6cc3457a..00000000
--- a/packages/react-components/src/breadcrumb/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpBreadcrumb } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Breadcrumb: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    href?: string;
-  },
-  HTMLElement
-> = wrap(jpBreadcrumb()) as any;
-// @ts-expect-error unknown property
-Breadcrumb.displayName = 'Jupyter.Breadcrumb';
diff --git a/packages/react-components/src/button/index.ts b/packages/react-components/src/button/index.ts
deleted file mode 100644
index cf7f176e..00000000
--- a/packages/react-components/src/button/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpButton } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Button: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    appearance?:
-      | 'accent'
-      | 'error'
-      | 'lightweight'
-      | 'neutral'
-      | 'outline'
-      | 'stealth';
-    'aria-label'?: string;
-    autofocus?: boolean;
-    disabled?: boolean;
-    form?: string;
-    formaction?: string;
-    formenctype?: string;
-    formmethod?: string;
-    formtarget?: string;
-    name?: string;
-    minimal?: boolean;
-    type?: string;
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpButton()) as any;
-// @ts-expect-error unknown property
-Button.displayName = 'Jupyter.Button';
diff --git a/packages/react-components/src/card/index.ts b/packages/react-components/src/card/index.ts
deleted file mode 100644
index 376bed75..00000000
--- a/packages/react-components/src/card/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpCard } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Card: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement>,
-  HTMLElement
-> = wrap(jpCard()) as any;
-// @ts-expect-error unknown property
-Card.displayName = 'Jupyter.Card';
diff --git a/packages/react-components/src/checkbox/index.ts b/packages/react-components/src/checkbox/index.ts
deleted file mode 100644
index 5906c3ca..00000000
--- a/packages/react-components/src/checkbox/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpCheckbox } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Checkbox: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    checked?: boolean;
-    indeterminate?: boolean;
-    name?: string;
-    required?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-  },
-  HTMLElement
-> = wrap(jpCheckbox(), { events: { onChange: 'change' } }) as any;
-// @ts-expect-error unknown property
-Checkbox.displayName = 'Jupyter.Checkbox';
diff --git a/packages/react-components/src/combobox/index.ts b/packages/react-components/src/combobox/index.ts
deleted file mode 100644
index add9bce4..00000000
--- a/packages/react-components/src/combobox/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpCombobox } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Combobox: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    autocomplete?: 'inline' | 'list' | 'both' | 'none';
-    autowidth?: boolean;
-    disabled?: boolean;
-    minimal?: boolean;
-    name?: string;
-    position?: 'above' | 'below';
-    placeholder?: 'string';
-    value?: 'string';
-  },
-  HTMLElement
-> = wrap(jpCombobox(), {
-  events: {
-    onChange: 'change',
-    onInput: 'input'
-  }
-}) as any;
-// @ts-expect-error unknown property
-Combobox.displayName = 'Jupyter.Combobox';
diff --git a/packages/react-components/src/data-grid/index.ts b/packages/react-components/src/data-grid/index.ts
deleted file mode 100644
index 0cdf5a41..00000000
--- a/packages/react-components/src/data-grid/index.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import {
-  jpDataGrid,
-  jpDataGridCell,
-  jpDataGridRow
-} from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-// WARNING The wrapping needs to be called in order (from bottom to top DOM elements)
-// Otherwise during the wrapping the tag for sub elements won't be resolved and this
-// will contaminate the standard web component.
-
-export const DataGridCell: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    'cell-type'?: 'default' | 'columnheader' | 'rowheader';
-    'grid-column'?: string;
-  },
-  HTMLElement
-> = wrap(jpDataGridCell(), {
-  events: { onFocus: 'cell-focused' }
-}) as any;
-// @ts-expect-error unknown property
-DataGridCell.displayName = 'Jupyter.DataGridCell';
-
-export const DataGridRow: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    'grid-template-columns'?: string;
-    'row-type'?: 'default' | 'header' | 'sticky-header';
-  },
-  HTMLElement
-> = wrap(jpDataGridRow(), { events: { onFocus: 'row-focused' } }) as any;
-// @ts-expect-error unknown property
-DataGridRow.displayName = 'Jupyter.DataGridRow';
-
-export const DataGrid: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    'generate-header'?: 'none' | 'default' | 'sticky';
-    'grid-template-columns'?: string;
-  },
-  HTMLElement
-> = wrap(jpDataGrid()) as any;
-// @ts-expect-error unknown property
-DataGrid.displayName = 'Jupyter.DataGrid';
diff --git a/packages/react-components/src/date-field/index.ts b/packages/react-components/src/date-field/index.ts
deleted file mode 100644
index 631ed7ff..00000000
--- a/packages/react-components/src/date-field/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpDateField } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const DateField: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    appearance?: 'outline' | 'filled';
-    autofocus?: boolean;
-    disabled?: boolean;
-    form?: string;
-    'hide-step'?: boolean;
-    list?: string;
-    max?: Date;
-    min?: Date;
-    name?: string;
-    readonly?: boolean;
-    required?: boolean;
-    step?: number;
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpDateField(), {
-  events: { onChange: 'change' }
-}) as any;
-// @ts-expect-error unknown property
-DateField.displayName = 'Jupyter.DateField';
diff --git a/packages/react-components/src/design-system-provider/index.ts b/packages/react-components/src/design-system-provider/index.ts
deleted file mode 100644
index 0e9b585f..00000000
--- a/packages/react-components/src/design-system-provider/index.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpDesignSystemProvider } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const DesignSystemProvider: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    'no-paint'?: boolean;
-    'fill-color'?: string;
-    'accent-color'?: string;
-    'neutral-color'?: string;
-    'error-color'?: string;
-    density?: number;
-    'design-unit'?: number;
-    direction?: 'ltr' | 'rtl';
-    'base-height-multiplier'?: number;
-    'base-horizontal-spacing-multiplier'?: number;
-    'control-corner-radius'?: number;
-    'stroke-width'?: number;
-    'focus-stroke-width'?: number;
-    'disabled-opacity'?: number;
-    'type-ramp-minus-2-font-size'?: string;
-    'type-ramp-minus-2-line-height'?: string;
-    'type-ramp-minus-1-font-size'?: string;
-    'type-ramp-minus-1-line-height'?: string;
-    'type-ramp-base-font-size'?: string;
-    'type-ramp-base-line-height'?: string;
-    'type-ramp-plus-1-font-size'?: string;
-    'type-ramp-plus-1-line-height'?: string;
-    'type-ramp-plus-2-font-size'?: string;
-    'type-ramp-plus-2-line-height'?: string;
-    'type-ramp-plus-3-font-size'?: string;
-    'type-ramp-plus-3-line-height'?: string;
-    'type-ramp-plus-4-font-size'?: string;
-    'type-ramp-plus-4-line-height'?: string;
-    'type-ramp-plus-5-font-size'?: string;
-    'type-ramp-plus-5-line-height'?: string;
-    'type-ramp-plus-6-font-size'?: string;
-    'type-ramp-plus-6-line-height'?: string;
-    'accent-fill-rest-delta'?: number;
-    'accent-fill-hover-delta'?: number;
-    'accent-fill-active-delta'?: number;
-    'accent-fill-focus-delta'?: number;
-    'accent-foreground-rest-delta'?: number;
-    'accent-foreground-hover-delta'?: number;
-    'accent-foreground-active-delta'?: number;
-    'accent-foreground-focus-delta'?: number;
-    'neutral-fill-rest-delta'?: number;
-    'neutral-fill-hover-delta'?: number;
-    'neutral-fill-active-delta'?: number;
-    'neutral-fill-focus-delta'?: number;
-    'neutral-fill-input-rest-delta'?: number;
-    'neutral-fill-input-hover-delta'?: number;
-    'neutral-fill-input-active-delta'?: number;
-    'neutral-fill-input-focus-delta'?: number;
-    'neutral-fill-stealth-rest-delta'?: number;
-    'neutral-fill-stealth-hover-delta'?: number;
-    'neutral-fill-stealth-active-delta'?: number;
-    'neutral-fill-stealth-focus-delta'?: number;
-    'neutral-fill-strong-hover-delta'?: number;
-    'neutral-fill-strong-active-delta'?: number;
-    'neutral-fill-strong-focus-delta'?: number;
-    'base-layer-luminance'?: number;
-    'neutral-fill-layer-rest-delta'?: number;
-    'neutral-stroke-divider-rest-delta'?: number;
-    'neutral-stroke-rest-delta'?: number;
-    'neutral-stroke-hover-delta'?: number;
-    'neutral-stroke-active-delta'?: number;
-    'neutral-stroke-focus-delta'?: number;
-  },
-  HTMLElement
-> = wrap(jpDesignSystemProvider()) as any;
-// @ts-expect-error unknown property
-DesignSystemProvider.displayName = 'Jupyter.DesignSystemProvider';
diff --git a/packages/react-components/src/dialog/index.ts b/packages/react-components/src/dialog/index.ts
deleted file mode 100644
index 74e7c6e8..00000000
--- a/packages/react-components/src/dialog/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpDialog } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Dialog: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    hidden?: boolean;
-    modal?: boolean;
-    'trap-focus'?: boolean;
-  },
-  HTMLElement
-> = wrap(jpDialog()) as any;
-// @ts-expect-error unknown property
-Dialog.displayName = 'Jupyter.Dialog';
diff --git a/packages/react-components/src/disclosure/index.ts b/packages/react-components/src/disclosure/index.ts
deleted file mode 100644
index 060536f8..00000000
--- a/packages/react-components/src/disclosure/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpDisclosure } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Disclosure: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    appearance?: 'accent' | 'lightweight';
-    expanded?: boolean;
-    title?: string;
-  },
-  HTMLElement
-> = wrap(jpDisclosure(), {
-  events: { onToggle: 'toggle' }
-}) as any;
-// @ts-expect-error unknown property
-Disclosure.displayName = 'Jupyter.Disclosure';
diff --git a/packages/react-components/src/divider/index.ts b/packages/react-components/src/divider/index.ts
deleted file mode 100644
index 4a8f383f..00000000
--- a/packages/react-components/src/divider/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpDivider } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Divider: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    orientation?: 'horizontal' | 'vertical';
-    role?: 'separator' | 'presentation';
-  },
-  HTMLElement
-> = wrap(jpDivider()) as any;
-// @ts-expect-error unknown property
-Divider.displayName = 'Jupyter.Divider';
diff --git a/packages/react-components/src/drafts/picker/index.ts b/packages/react-components/src/drafts/picker/index.ts
deleted file mode 100644
index a5fd4a4d..00000000
--- a/packages/react-components/src/drafts/picker/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpPicker } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../../wrap';
-
-/**
- * @alpha
- */
-export const Picker: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    selection?: string;
-    options?: string;
-    'filter-selected'?: boolean;
-    'filter-query'?: boolean;
-    'max-selected'?: number;
-    'no-suggestions-text'?: string;
-    'suggestions-available-text'?: string;
-    'loading-text'?: string;
-    label?: string;
-    labelledby?: string;
-    placeholder?: string;
-    'menu-placement'?:
-      | 'bottom'
-      | 'bottom-fill'
-      | 'tallest'
-      | 'tallest-fill'
-      | 'top'
-      | 'top-fill';
-  },
-  HTMLElement
-> = wrap(jpPicker(), {
-  events: {
-    onChange: 'change',
-    onInput: 'input'
-  }
-}) as any;
-// @ts-expect-error unknown property
-Picker.displayName = 'Jupyter.Picker';
diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
deleted file mode 100644
index b3330062..00000000
--- a/packages/react-components/src/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-export * from './wrap';
-
-export * from './accordion';
-export * from './accordion-item';
-export * from './anchor';
-export * from './anchored-region';
-export * from './avatar';
-export * from './badge';
-export * from './breadcrumb';
-export * from './breadcrumb-item';
-export * from './button';
-export * from './card';
-export * from './checkbox';
-export * from './combobox';
-export * from './data-grid';
-export * from './date-field';
-export * from './design-system-provider';
-export * from './dialog';
-export * from './disclosure';
-export * from './divider';
-export * from './listbox';
-export * from './menu';
-export * from './menu-item';
-export * from './number-field';
-export * from './option';
-export * from './progress';
-export * from './progress-ring';
-export * from './radio';
-export * from './radio-group';
-export * from './search';
-export * from './select';
-export * from './skeleton';
-export * from './slider';
-export * from './slider-label';
-export * from './switch';
-export * from './tab-panel';
-export * from './tab';
-export * from './tabs';
-export * from './text-area';
-export * from './text-field';
-export * from './toolbar';
-export * from './tooltip';
-export * from './tree-item';
-export * from './tree-view';
-
-export * from './drafts/picker';
diff --git a/packages/react-components/src/listbox/index.ts b/packages/react-components/src/listbox/index.ts
deleted file mode 100644
index fd0381e5..00000000
--- a/packages/react-components/src/listbox/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpListbox } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Listbox: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    disabled?: boolean;
-    multiple?: boolean;
-    size?: number;
-  },
-  HTMLElement
-> = wrap(jpListbox()) as any;
-// @ts-expect-error unknown property
-Listbox.displayName = 'Jupyter.Listbox';
diff --git a/packages/react-components/src/menu-item/index.ts b/packages/react-components/src/menu-item/index.ts
deleted file mode 100644
index ac4bcfad..00000000
--- a/packages/react-components/src/menu-item/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpMenuItem } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const MenuItem: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    checked?: boolean;
-    disabled?: boolean;
-    expanded?: boolean;
-    role?: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
-  },
-  HTMLElement
-> = wrap(jpMenuItem(), { events: { onExpand: 'expanded-change' } }) as any;
-// @ts-expect-error unknown property
-MenuItem.displayName = 'Jupyter.MenuItem';
diff --git a/packages/react-components/src/menu/index.ts b/packages/react-components/src/menu/index.ts
deleted file mode 100644
index bb25229b..00000000
--- a/packages/react-components/src/menu/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpMenu } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Menu: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement>,
-  HTMLElement
-> = wrap(jpMenu()) as any;
-// @ts-expect-error unknown property
-Menu.displayName = 'Jupyter.Menu';
diff --git a/packages/react-components/src/number-field/index.ts b/packages/react-components/src/number-field/index.ts
deleted file mode 100644
index 909417c5..00000000
--- a/packages/react-components/src/number-field/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpNumberField } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const NumberField: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    appearance?: 'outline' | 'filled';
-    autofocus?: boolean;
-    disabled?: boolean;
-    form?: string;
-    'hide-step'?: boolean;
-    list?: string;
-    max?: number;
-    maxlength?: number;
-    min?: number;
-    minlength?: number;
-    name?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    required?: boolean;
-    size?: number;
-    step?: number;
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpNumberField(), {
-  events: { onChange: 'change', onInput: 'input' }
-}) as any;
-// @ts-expect-error unknown property
-NumberField.displayName = 'Jupyter.NumberField';
diff --git a/packages/react-components/src/option/index.ts b/packages/react-components/src/option/index.ts
deleted file mode 100644
index 9c4f233c..00000000
--- a/packages/react-components/src/option/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpOption } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Option: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    checked?: boolean;
-    defaultSelected?: boolean;
-    disabled?: boolean;
-    selected?: boolean;
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpOption()) as any;
-// @ts-expect-error unknown property
-Option.displayName = 'Juypter.Option';
diff --git a/packages/react-components/src/progress-ring/index.ts b/packages/react-components/src/progress-ring/index.ts
deleted file mode 100644
index efacacac..00000000
--- a/packages/react-components/src/progress-ring/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpProgressRing } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const ProgressRing: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    min?: number;
-    max?: number;
-    value?: number;
-    paused?: boolean;
-  },
-  HTMLElement
-> = wrap(
-  jpProgressRing(),
-  // Name need to be exported otherwise a `jp-progress` element is instantiated
-  { name: 'jp-progress-ring' }
-) as any;
-// @ts-expect-error unknown property
-ProgressRing.displayName = 'Jupyter.ProgressRing';
diff --git a/packages/react-components/src/progress/index.ts b/packages/react-components/src/progress/index.ts
deleted file mode 100644
index 88e45681..00000000
--- a/packages/react-components/src/progress/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpProgress } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Progress: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    min?: number;
-    max?: number;
-    value?: number;
-    paused?: boolean;
-  },
-  HTMLElement
-> = wrap(jpProgress(), { name: 'jp-progress' }) as any;
-// @ts-expect-error unknown property
-Progress.displayName = 'Jupyter.Progress';
diff --git a/packages/react-components/src/radio-group/index.ts b/packages/react-components/src/radio-group/index.ts
deleted file mode 100644
index 7694da02..00000000
--- a/packages/react-components/src/radio-group/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpRadioGroup } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const RadioGroup: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    disabled?: boolean;
-    name?: string;
-    orientation?: 'horizontal' | 'vertical';
-    readonly?: boolean;
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpRadioGroup(), { events: { onChange: 'change' } }) as any;
-// @ts-expect-error unknown property
-RadioGroup.displayName = 'Jupyter.RadioGroup';
diff --git a/packages/react-components/src/radio/index.ts b/packages/react-components/src/radio/index.ts
deleted file mode 100644
index d6adfc4d..00000000
--- a/packages/react-components/src/radio/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpRadio } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Radio: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    checked?: boolean;
-    disabled?: boolean;
-    name?: string;
-    readonly?: boolean;
-    required?: boolean;
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpRadio(), { events: { onChange: 'change' } }) as any;
-// @ts-expect-error unknown property
-Radio.displayName = 'Jupyter.Radio';
diff --git a/packages/react-components/src/search/index.ts b/packages/react-components/src/search/index.ts
deleted file mode 100644
index 34e3fbd3..00000000
--- a/packages/react-components/src/search/index.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpSearch } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Search: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    appearance?: 'outline' | 'filled';
-    autofocus?: boolean;
-    disabled?: boolean;
-    form?: string;
-    label?: string;
-    list?: string;
-    maxlength?: number;
-    minlength?: number;
-    name?: string;
-    pattern?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    required?: boolean;
-    size?: number;
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpSearch(), {
-  events: {
-    onChange: 'change',
-    onInput: 'input'
-  }
-}) as any;
-// @ts-expect-error unknown property
-Search.displayName = 'Jupyter.Search';
diff --git a/packages/react-components/src/select/index.ts b/packages/react-components/src/select/index.ts
deleted file mode 100644
index 1a288020..00000000
--- a/packages/react-components/src/select/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpSelect } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Select: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    autowidth?: boolean;
-    disabled?: boolean;
-    minimal?: boolean;
-    open?: boolean;
-    position?: 'above' | 'below';
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpSelect(), {
-  events: {
-    onChange: 'change',
-    onInput: 'input'
-  }
-}) as any;
-// @ts-expect-error unknown property
-Select.displayName = 'Jupyter.Select';
diff --git a/packages/react-components/src/skeleton/index.ts b/packages/react-components/src/skeleton/index.ts
deleted file mode 100644
index 2c16aee0..00000000
--- a/packages/react-components/src/skeleton/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpSkeleton } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Skeleton: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    fill?: string;
-    shape?: 'rect' | 'circle';
-    pattern?: string;
-    shimmer?: boolean;
-  },
-  HTMLElement
-> = wrap(jpSkeleton()) as any;
-// @ts-expect-error unknown property
-Skeleton.displayName = 'Jupyter.Skeleton';
diff --git a/packages/react-components/src/slider-label/index.ts b/packages/react-components/src/slider-label/index.ts
deleted file mode 100644
index 3af80298..00000000
--- a/packages/react-components/src/slider-label/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpSliderLabel } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const SliderLabel: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    position?: string;
-    'hide-mark'?: boolean;
-    disabled?: boolean;
-  },
-  HTMLElement
-> = wrap(jpSliderLabel()) as any;
-// @ts-expect-error unknown property
-SliderLabel.displayName = 'Jupyter.SliderLabel';
diff --git a/packages/react-components/src/slider/index.ts b/packages/react-components/src/slider/index.ts
deleted file mode 100644
index b5749a6d..00000000
--- a/packages/react-components/src/slider/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpSlider } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Slider: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    min?: string;
-    max?: string;
-    step?: string;
-    value?: string;
-    direction?: 'ltr' | 'rtl';
-    orientation?: 'horizontal' | 'vertical';
-    disabled?: boolean;
-    readonly?: boolean;
-  },
-  HTMLElement
-> = wrap(jpSlider(), { events: { onChange: 'change' } }) as any;
-// @ts-expect-error unknown property
-Slider.displayName = 'Jupyter.Slider';
diff --git a/packages/react-components/src/switch/index.ts b/packages/react-components/src/switch/index.ts
deleted file mode 100644
index 126fb118..00000000
--- a/packages/react-components/src/switch/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpSwitch } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Switch: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    checked?: boolean;
-    disabled?: boolean;
-    name?: string;
-    required?: boolean;
-    readonly?: boolean;
-  },
-  HTMLElement
-> = wrap(jpSwitch(), { events: { onChange: 'change' } }) as any;
-// @ts-expect-error unknown property
-Switch.displayName = 'Jupyter.Switch';
diff --git a/packages/react-components/src/tab-panel/index.ts b/packages/react-components/src/tab-panel/index.ts
deleted file mode 100644
index e85b1b57..00000000
--- a/packages/react-components/src/tab-panel/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpTabPanel } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const TabPanel: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement>,
-  HTMLElement
-> = wrap(jpTabPanel()) as any;
-// @ts-expect-error unknown property
-TabPanel.displayName = 'Jupyter.TabPanel';
diff --git a/packages/react-components/src/tab/index.ts b/packages/react-components/src/tab/index.ts
deleted file mode 100644
index 9cef9b41..00000000
--- a/packages/react-components/src/tab/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpTab } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Tab: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    disabled?: boolean;
-  },
-  HTMLElement
-> = wrap(jpTab()) as any;
-// @ts-expect-error unknown property
-Tab.displayName = 'Jupyter.Tab';
diff --git a/packages/react-components/src/tabs/index.ts b/packages/react-components/src/tabs/index.ts
deleted file mode 100644
index aa6a4889..00000000
--- a/packages/react-components/src/tabs/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpTabs } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Tabs: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    activeid?: string;
-    activeindicator?: boolean;
-    orientation?: 'horizontal' | 'vertical';
-  },
-  HTMLElement
-> = wrap(jpTabs(), { events: { onChange: 'change' } }) as any;
-// @ts-expect-error unknown property
-Tabs.displayName = 'Jupyter.Tabs';
diff --git a/packages/react-components/src/text-area/index.ts b/packages/react-components/src/text-area/index.ts
deleted file mode 100644
index 3d2c816e..00000000
--- a/packages/react-components/src/text-area/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpTextArea } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const TextArea: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    appearance?: 'outline' | 'filled';
-    autofocus?: boolean;
-    cols?: number;
-    disabled?: boolean;
-    form?: string;
-    list?: string;
-    maxlength?: number;
-    minlength?: number;
-    name?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    required?: boolean;
-    rows?: number;
-    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
-    spellcheck?: boolean;
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpTextArea(), {
-  events: { onChange: 'change' }
-}) as any;
-// @ts-expect-error unknown property
-TextArea.displayName = 'Jupyter.TextArea';
diff --git a/packages/react-components/src/text-field/index.ts b/packages/react-components/src/text-field/index.ts
deleted file mode 100644
index ea47b946..00000000
--- a/packages/react-components/src/text-field/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpTextField } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const TextField: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    appearance?: 'outline' | 'filled';
-    autofocus?: boolean;
-    disabled?: boolean;
-    form?: string;
-    list?: string;
-    maxlength?: number;
-    minlength?: number;
-    name?: string;
-    pattern?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    required?: boolean;
-    size?: number;
-    spellcheck?: boolean;
-    type?: 'text' | 'email' | 'password' | 'tel' | 'url';
-    value?: string;
-  },
-  HTMLElement
-> = wrap(jpTextField(), {
-  events: { onChange: 'change', onInput: 'input' }
-}) as any;
-// @ts-expect-error unknown property
-TextField.displayName = 'Jupyter.TextField';
diff --git a/packages/react-components/src/toolbar/index.ts b/packages/react-components/src/toolbar/index.ts
deleted file mode 100644
index fe7132b0..00000000
--- a/packages/react-components/src/toolbar/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpToolbar } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Toolbar: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    orientation?: 'horizontal' | 'vertical';
-  },
-  HTMLElement
-> = wrap(jpToolbar()) as any;
-// @ts-expect-error unknown property
-Toolbar.displayName = 'Jupyter.Toolbar';
diff --git a/packages/react-components/src/tooltip/index.ts b/packages/react-components/src/tooltip/index.ts
deleted file mode 100644
index b9096c15..00000000
--- a/packages/react-components/src/tooltip/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpTooltip } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const Tooltip: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    visible?: boolean;
-    anchor?: string;
-    delay?: number;
-    'auto-update-mode'?: 'anchor' | 'auto';
-    position?: 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
-    'horizontal-viewport-lock'?: boolean;
-    'vertical-viewport-lock'?: boolean;
-    /**
-     * @property
-     */
-    anchorElement?: HTMLElement | null;
-  },
-  HTMLElement
-> = wrap(jpTooltip()) as any;
-// @ts-expect-error unknown property
-Tooltip.displayName = 'Jupyter.Tooltip';
diff --git a/packages/react-components/src/tree-item/index.ts b/packages/react-components/src/tree-item/index.ts
deleted file mode 100644
index 0d28904f..00000000
--- a/packages/react-components/src/tree-item/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpTreeItem } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const TreeItem: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    expanded?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-  },
-  HTMLElement
-> = wrap(jpTreeItem(), {
-  events: { onExpand: 'expanded-change', onSelect: 'selected-change' }
-}) as any;
-// @ts-expect-error unknown property
-TreeItem.displayName = 'Jupyter.TreeItem';
diff --git a/packages/react-components/src/tree-view/index.ts b/packages/react-components/src/tree-view/index.ts
deleted file mode 100644
index fb69e7d2..00000000
--- a/packages/react-components/src/tree-view/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { jpTreeView } from '@jupyter/web-components';
-import type React from 'react';
-import { wrap } from '../wrap';
-
-export const TreeView: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    'render-collapsed-nodes'?: boolean;
-  },
-  HTMLElement
-> = wrap(jpTreeView()) as any;
-// @ts-expect-error unknown property
-TreeView.displayName = 'Jupyter.TreeView';
diff --git a/packages/react-components/src/wrap.ts b/packages/react-components/src/wrap.ts
deleted file mode 100644
index 064476f7..00000000
--- a/packages/react-components/src/wrap.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { provideJupyterDesignSystem } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-export const { wrap } = provideReactWrapper(
-  React,
-  provideJupyterDesignSystem()
-);
diff --git a/packages/react-components/tsconfig.json b/packages/react-components/tsconfig.json
index 92d6e92f..a0e98605 100644
--- a/packages/react-components/tsconfig.json
+++ b/packages/react-components/tsconfig.json
@@ -4,5 +4,55 @@
     "outDir": "lib",
     "rootDir": "src"
   },
-  "include": ["src/**/*"]
+  "include": [
+    "src/**/*",
+    "lib/Accordion.js",
+    "lib/AccordionItem.js",
+    "lib/Anchor.js",
+    "lib/AnchoredRegion.js",
+    "lib/Avatar.js",
+    "lib/Badge.js",
+    "lib/Breadcrumb.js",
+    "lib/BreadcrumbItem.js",
+    "lib/Button.js",
+    "lib/Card.js",
+    "lib/Checkbox.js",
+    "lib/Combobox.js",
+    "lib/DataGrid.js",
+    "lib/DataGridCell.js",
+    "lib/DataGridRow.js",
+    "lib/Dialog.js",
+    "lib/Disclosure.js",
+    "lib/Divider.js",
+    "lib/index.js",
+    "lib/Listbox.js",
+    "lib/ListboxOption.js",
+    "lib/Menu.js",
+    "lib/MenuItem.js",
+    "lib/NumberField.js",
+    "lib/Picker.js",
+    "lib/PickerList.js",
+    "lib/PickerListItem.js",
+    "lib/PickerMenu.js",
+    "lib/PickerMenuOption.js",
+    "lib/Progress.js",
+    "lib/ProgressRing.js",
+    "lib/Radio.js",
+    "lib/RadioGroup.js",
+    "lib/react-utils.js",
+    "lib/Search.js",
+    "lib/Select.js",
+    "lib/Skeleton.js",
+    "lib/Slider.js",
+    "lib/SliderLabel.js",
+    "lib/Switch.js",
+    "lib/Tab.js",
+    "lib/TabPanel.js",
+    "lib/Tabs.js",
+    "lib/TextArea.js",
+    "lib/TextField.js",
+    "lib/Toolbar.js",
+    "lib/Tooltip.js",
+    "lib/TreeItem.js"
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
index f6bd00fc..72ca0fd3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1675,6 +1675,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@custom-elements-manifest/analyzer@npm:^0.10.2":
+  version: 0.10.2
+  resolution: "@custom-elements-manifest/analyzer@npm:0.10.2"
+  dependencies:
+    "@custom-elements-manifest/find-dependencies": ^0.0.5
+    "@github/catalyst": ^1.6.0
+    "@web/config-loader": 0.1.3
+    chokidar: 3.5.2
+    command-line-args: 5.1.2
+    comment-parser: 1.2.4
+    custom-elements-manifest: 1.0.0
+    debounce: 1.2.1
+    globby: 11.0.4
+    typescript: ~5.4.2
+  bin:
+    cem: cem.js
+    custom-elements-manifest: cem.js
+  checksum: d92643cc431bf192cb7df0aa60348ec3e43b6afc5db87824f0ca96ae1819ed98109617933abe49ad7bebff467ce5f26e7d272656c743667a8afa766dec03bd7f
+  languageName: node
+  linkType: hard
+
+"@custom-elements-manifest/find-dependencies@npm:^0.0.5":
+  version: 0.0.5
+  resolution: "@custom-elements-manifest/find-dependencies@npm:0.0.5"
+  dependencies:
+    es-module-lexer: ^0.9.3
+  checksum: b73fd7c38a62ecb24613b9ecbd8c00b43c2ad172575afd845217f3cb5ce861e7bc152cbf51a6b3e0469560fa95782f985e8c220947560c3660890f1b744fb380
+  languageName: node
+  linkType: hard
+
 "@discoveryjs/json-ext@npm:^0.5.0, @discoveryjs/json-ext@npm:^0.5.3":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"
@@ -1971,6 +2001,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@github/catalyst@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "@github/catalyst@npm:1.6.0"
+  checksum: 067e2bd278a443a290ad489d4ea268a70bbe4c6cf62033da7032cb72028d6c2da31bd33ee9610062696f40ef3f23e3caf4bb4fde0d9a7415f0cbf20a8a68ef7a
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.11.10":
   version: 0.11.10
   resolution: "@humanwhocodes/config-array@npm:0.11.10"
@@ -2380,9 +2417,7 @@ __metadata:
   resolution: "@jupyter/react-components@workspace:packages/react-components"
   dependencies:
     "@jupyter/web-components": ^0.15.3
-    "@microsoft/fast-react-wrapper": ^0.3.22
     "@types/react": ^18.2.0
-    "@typescript-eslint/eslint-plugin": ^5.60.0
     eslint: ^8.43.0
     eslint-config-prettier: ^8.8.0
     eslint-plugin-import: ^2.25.2
@@ -2417,6 +2452,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.22.5
     "@babel/preset-env": ^7.22.5
+    "@custom-elements-manifest/analyzer": ^0.10.2
     "@fortawesome/fontawesome-svg-core": ^1.2.36
     "@fortawesome/free-solid-svg-icons": ^5.15.4
     "@microsoft/api-extractor": ^7.36.0
@@ -2441,6 +2477,7 @@ __metadata:
     "@types/node": ^18.0.0
     "@types/webpack-env": ^1.15.2
     "@typescript-eslint/eslint-plugin": ^5.60.1
+    custom-element-react-wrappers: ^1.6.0
     eslint: ^8.43.0
     eslint-config-prettier: ^8.8.0
     eslint-plugin-import: ^2.25.2
@@ -3056,18 +3093,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@microsoft/fast-react-wrapper@npm:^0.3.22":
-  version: 0.3.22
-  resolution: "@microsoft/fast-react-wrapper@npm:0.3.22"
-  dependencies:
-    "@microsoft/fast-element": ^1.12.0
-    "@microsoft/fast-foundation": ^2.49.4
-  peerDependencies:
-    react: ">=16.9.0"
-  checksum: 6c7c0992dbaf91b32bc53b9d7ac21c7c8a89e6f45cc1b015cea1d1f3e766184ac7cea159479e34ddd30c347291cd5939e8d55696712086187deae37687054328
-  languageName: node
-  linkType: hard
-
 "@microsoft/fast-web-utilities@npm:^5.4.1":
   version: 5.4.1
   resolution: "@microsoft/fast-web-utilities@npm:5.4.1"
@@ -5915,7 +5940,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^5.55.0, @typescript-eslint/eslint-plugin@npm:^5.60.0, @typescript-eslint/eslint-plugin@npm:^5.60.1":
+"@typescript-eslint/eslint-plugin@npm:^5.55.0, @typescript-eslint/eslint-plugin@npm:^5.60.1":
   version: 5.60.1
   resolution: "@typescript-eslint/eslint-plugin@npm:5.60.1"
   dependencies:
@@ -6036,6 +6061,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@web/config-loader@npm:0.1.3":
+  version: 0.1.3
+  resolution: "@web/config-loader@npm:0.1.3"
+  dependencies:
+    semver: ^7.3.4
+  checksum: 278554bd00b757eaf296ba904a224c61d4698df1a5d6c04931c40bc6bb308e81e767055cbf283b763cc530aae6b200bb950aa19eb41aa8979a3a2b29e5f0ac7a
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.11.6, @webassemblyjs/ast@npm:^1.11.5":
   version: 1.11.6
   resolution: "@webassemblyjs/ast@npm:1.11.6"
@@ -6638,6 +6672,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-back@npm:^3.0.1":
+  version: 3.1.0
+  resolution: "array-back@npm:3.1.0"
+  checksum: 7205004fcd0f9edd926db921af901b083094608d5b265738d0290092f9822f73accb468e677db74c7c94ef432d39e5ed75a7b1786701e182efb25bbba9734209
+  languageName: node
+  linkType: hard
+
+"array-back@npm:^6.1.2":
+  version: 6.2.2
+  resolution: "array-back@npm:6.2.2"
+  checksum: baae1e3a1687300a307d3bdf09715f6415e1099b5729d3d8e397309fb1e43d90b939d694602892172aaca7e0aeed38da89d04aa4951637d31c2a21350809e003
+  languageName: node
+  linkType: hard
+
 "array-differ@npm:^3.0.0":
   version: 3.0.0
   resolution: "array-differ@npm:3.0.0"
@@ -7484,6 +7532,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:3.5.2":
+  version: 3.5.2
+  resolution: "chokidar@npm:3.5.2"
+  dependencies:
+    anymatch: ~3.1.2
+    braces: ~3.0.2
+    fsevents: ~2.3.2
+    glob-parent: ~5.1.2
+    is-binary-path: ~2.1.0
+    is-glob: ~4.0.1
+    normalize-path: ~3.0.0
+    readdirp: ~3.6.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: d1fda32fcd67d9f6170a8468ad2630a3c6194949c9db3f6a91b16478c328b2800f433fb5d2592511b6cb145a47c013ea1cce60b432b1a001ae3ee978a8bffc2d
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
@@ -7753,6 +7820,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"command-line-args@npm:5.1.2":
+  version: 5.1.2
+  resolution: "command-line-args@npm:5.1.2"
+  dependencies:
+    array-back: ^6.1.2
+    find-replace: ^3.0.0
+    lodash.camelcase: ^4.3.0
+    typical: ^4.0.0
+  checksum: 77fff7c4ce10e9ef160befa8ff26cdb69b80d320b9d8b2a3fb67163d72461732fbea58a2ce46c9e1fb269a410b6cd8bd031e7c7943088b21bd386f03df77c9b6
+  languageName: node
+  linkType: hard
+
 "commander@npm:^10.0.1":
   version: 10.0.1
   resolution: "commander@npm:10.0.1"
@@ -7788,6 +7867,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comment-parser@npm:1.2.4":
+  version: 1.2.4
+  resolution: "comment-parser@npm:1.2.4"
+  checksum: 36ac280bce4c472fac22b3ec4d8aebb4d3d7c22c6808c70174f4deabee3b82144db66f8bd61eca9c514a6d0f12f6087ddab99e7d531e660d0da793b4730fd445
+  languageName: node
+  linkType: hard
+
 "commondir@npm:^1.0.1":
   version: 1.0.1
   resolution: "commondir@npm:1.0.1"
@@ -8216,6 +8302,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"custom-element-react-wrappers@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "custom-element-react-wrappers@npm:1.6.0"
+  dependencies:
+    prettier: ^2.7.1
+  checksum: 74ebe3ea9e2c0771ae01ba53cb7dae9f709cb5df52afa8bc305d2498a4f4f996e38d0bd1db8e78e9ceff1c5386bc8d495baa8eb6dcccf4ac82a380312b176b8f
+  languageName: node
+  linkType: hard
+
+"custom-elements-manifest@npm:1.0.0":
+  version: 1.0.0
+  resolution: "custom-elements-manifest@npm:1.0.0"
+  checksum: 3cb1c3e47ba5674d1f069b782ba83dfe6dde8ce698e1a9a9726938d62347502133db087285bf1fbf547c784be14d1392a334e5dba2fed93a05cb6c6005640510
+  languageName: node
+  linkType: hard
+
 "dargs@npm:^7.0.0":
   version: 7.0.0
   resolution: "dargs@npm:7.0.0"
@@ -8261,6 +8363,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debounce@npm:1.2.1":
+  version: 1.2.1
+  resolution: "debounce@npm:1.2.1"
+  checksum: 682a89506d9e54fb109526f4da255c5546102fbb8e3ae75eef3b04effaf5d4853756aee97475cd4650641869794e44f410eeb20ace2b18ea592287ab2038519e
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -8921,6 +9030,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-module-lexer@npm:^0.9.3":
+  version: 0.9.3
+  resolution: "es-module-lexer@npm:0.9.3"
+  checksum: 84bbab23c396281db2c906c766af58b1ae2a1a2599844a504df10b9e8dc77ec800b3211fdaa133ff700f5703d791198807bba25d9667392d27a5e9feda344da8
+  languageName: node
+  linkType: hard
+
 "es-module-lexer@npm:^1.2.1":
   version: 1.3.0
   resolution: "es-module-lexer@npm:1.3.0"
@@ -9562,6 +9678,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-glob@npm:^3.1.1":
+  version: 3.3.2
+  resolution: "fast-glob@npm:3.3.2"
+  dependencies:
+    "@nodelib/fs.stat": ^2.0.2
+    "@nodelib/fs.walk": ^1.2.3
+    glob-parent: ^5.1.2
+    merge2: ^1.3.0
+    micromatch: ^4.0.4
+  checksum: 900e4979f4dbc3313840078419245621259f349950411ca2fa445a2f9a1a6d98c3b5e7e0660c5ccd563aa61abe133a21765c6c0dec8e57da1ba71d8000b05ec1
+  languageName: node
+  linkType: hard
+
 "fast-json-stable-stringify@npm:2.x, fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -9725,6 +9854,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-replace@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "find-replace@npm:3.0.0"
+  dependencies:
+    array-back: ^3.0.1
+  checksum: 6b04bcfd79027f5b84aa1dfe100e3295da989bdac4b4de6b277f4d063e78f5c9e92ebc8a1fec6dd3b448c924ba404ee051cc759e14a3ee3e825fa1361025df08
+  languageName: node
+  linkType: hard
+
 "find-root@npm:^1.0.0":
   version: 1.1.0
   resolution: "find-root@npm:1.1.0"
@@ -10403,6 +10541,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:11.0.4":
+  version: 11.0.4
+  resolution: "globby@npm:11.0.4"
+  dependencies:
+    array-union: ^2.1.0
+    dir-glob: ^3.0.1
+    fast-glob: ^3.1.1
+    ignore: ^5.1.4
+    merge2: ^1.3.0
+    slash: ^3.0.0
+  checksum: d3e02d5e459e02ffa578b45f040381c33e3c0538ed99b958f0809230c423337999867d7b0dbf752ce93c46157d3bbf154d3fff988a93ccaeb627df8e1841775b
+  languageName: node
+  linkType: hard
+
 "globby@npm:11.1.0, globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
@@ -10916,6 +11068,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:^5.1.4":
+  version: 5.3.1
+  resolution: "ignore@npm:5.3.1"
+  checksum: 71d7bb4c1dbe020f915fd881108cbe85a0db3d636a0ea3ba911393c53946711d13a9b1143c7e70db06d571a5822c0a324a6bcde5c9904e7ca5047f01f1bf8cd3
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -12744,6 +12903,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.camelcase@npm:^4.3.0":
+  version: 4.3.0
+  resolution: "lodash.camelcase@npm:4.3.0"
+  checksum: cb9227612f71b83e42de93eccf1232feeb25e705bdb19ba26c04f91e885bfd3dd5c517c4a97137658190581d3493ea3973072ca010aab7e301046d90740393d1
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -15356,7 +15522,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.8.0":
+"prettier@npm:^2.7.1, prettier@npm:^2.8.0":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
   bin:
@@ -18058,6 +18224,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:~5.4.2":
+  version: 5.4.5
+  resolution: "typescript@npm:5.4.5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 53c879c6fa1e3bcb194b274d4501ba1985894b2c2692fa079db03c5a5a7140587a1e04e1ba03184605d35f439b40192d9e138eb3279ca8eee313c081c8bcd9b0
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@>=3 < 6#~builtin<compat/typescript>, typescript@patch:typescript@~5.2.2#~builtin<compat/typescript>":
   version: 5.2.2
   resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin<compat/typescript>::version=5.2.2&hash=5da071"
@@ -18078,6 +18254,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@~5.4.2#~builtin<compat/typescript>":
+  version: 5.4.5
+  resolution: "typescript@patch:typescript@npm%3A5.4.5#~builtin<compat/typescript>::version=5.4.5&hash=5da071"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 2373c693f3b328f3b2387c3efafe6d257b057a142f9a79291854b14ff4d5367d3d730810aee981726b677ae0fd8329b23309da3b6aaab8263dbdccf1da07a3ba
+  languageName: node
+  linkType: hard
+
 "typestyle@npm:^2.0.4":
   version: 2.2.0
   resolution: "typestyle@npm:2.2.0"
@@ -18088,6 +18274,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typical@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "typical@npm:4.0.0"
+  checksum: a242081956825328f535e6195a924240b34daf6e7fdb573a1809a42b9f37fb8114fa99c7ab89a695e0cdb419d4149d067f6723e4b95855ffd39c6c4ca378efb3
+  languageName: node
+  linkType: hard
+
 "uglify-js@npm:^3.1.4":
   version: 3.14.5
   resolution: "uglify-js@npm:3.14.5"