diff --git a/dev/kitchen-sink/Row8.tsx b/dev/kitchen-sink/Row8.tsx
index e38dbd16..3786ae8f 100644
--- a/dev/kitchen-sink/Row8.tsx
+++ b/dev/kitchen-sink/Row8.tsx
@@ -1,18 +1,19 @@
 import { BoardRow } from '../../packages/react-components-pro/src/BoardRow.js';
-import { Item } from '../../packages/react-components/src/Item.js';
 import { ListBox } from '../../packages/react-components/src/ListBox.js';
 import { RadioButton } from '../../packages/react-components/src/RadioButton.js';
 import { RadioGroup } from '../../packages/react-components/src/RadioGroup.js';
 import { RichTextEditor } from '../../packages/react-components-pro/src/RichTextEditor.js';
 import { Select } from '../../packages/react-components/src/Select.js';
+import { SelectItem } from '../../packages/react-components/src/SelectItem.js';
+import { SelectListBox } from '../../packages/react-components/src/SelectListBox.js';
 import { Tooltip } from '../../packages/react-components/src/Tooltip.js';
 
-function SelectListBox() {
+function SelectRenderer() {
   return (
-    <ListBox>
-      <Item value="1">One</Item>
-      <Item value="2">Two</Item>
-    </ListBox>
+    <SelectListBox>
+      <SelectItem value="1">One</SelectItem>
+      <SelectItem value="2">Two</SelectItem>
+    </SelectListBox>
   );
 }
 
@@ -29,7 +30,7 @@ export default function Row8() {
       </RadioGroup>
       <RichTextEditor></RichTextEditor>
       <Select label="Select" value="2">
-        {SelectListBox}
+        {SelectRenderer}
         <span slot="prefix">+</span>
         <Tooltip slot="tooltip" text="Select tooltip"></Tooltip>
       </Select>
diff --git a/dev/pages/Select.tsx b/dev/pages/Select.tsx
index 22910652..c92495c0 100644
--- a/dev/pages/Select.tsx
+++ b/dev/pages/Select.tsx
@@ -1,12 +1,12 @@
 import { Select } from '../../packages/react-components/src/Select.js';
-import type { SelectItem } from '../../packages/react-components/src/Select.js';
+import type { SelectItemData } from '../../packages/react-components/src/Select.js';
 import { ListBox } from '../../packages/react-components/src/ListBox.js';
 import { Item } from '../../packages/react-components/src/Item.js';
 import { Tooltip } from '../../packages/react-components/src/Tooltip.js';
 import { useEffect, useState } from 'react';
 import type { SelectInvalidChangedEvent, SelectValidatedEvent } from '@vaadin/select';
 
-const items: SelectItem[] = [
+const items: SelectItemData[] = [
   { label: 'Option 1', value: 'opt1' },
   { label: 'Option 2', value: 'opt2' },
   { component: 'hr' },
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 611dd214..ee7243e6 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -373,6 +373,14 @@
       "types": "./Select.d.ts",
       "default": "./Select.js"
     },
+    "./SelectItem.js": {
+      "types": "./SelectItem.d.ts",
+      "default": "./SelectItem.js"
+    },
+    "./SelectListBox.js": {
+      "types": "./SelectListBox.d.ts",
+      "default": "./SelectListBox.js"
+    },
     "./SideNav.js": {
       "types": "./SideNav.d.ts",
       "default": "./SideNav.js"
@@ -507,6 +515,8 @@
     "./RangeSlider": "./RangeSlider.js",
     "./Scroller": "./Scroller.js",
     "./Select": "./Select.js",
+    "./SelectItem": "./SelectItem.js",
+    "./SelectListBox": "./SelectListBox.js",
     "./SideNav": "./SideNav.js",
     "./SideNavItem": "./SideNavItem.js",
     "./Slider": "./Slider.js",
diff --git a/packages/react-components/src/SelectItem.ts b/packages/react-components/src/SelectItem.ts
new file mode 100644
index 00000000..8a8bb0c7
--- /dev/null
+++ b/packages/react-components/src/SelectItem.ts
@@ -0,0 +1 @@
+export * from './generated/SelectItem.js';
diff --git a/packages/react-components/src/SelectListBox.ts b/packages/react-components/src/SelectListBox.ts
new file mode 100644
index 00000000..722ec1e9
--- /dev/null
+++ b/packages/react-components/src/SelectListBox.ts
@@ -0,0 +1 @@
+export * from './generated/SelectListBox.js';