diff --git a/frontend/demo/component/menubar/react/menu-bar-basic.tsx b/frontend/demo/component/menubar/react/menu-bar-basic.tsx
index d950992d1e..aa5ceeb917 100644
--- a/frontend/demo/component/menubar/react/menu-bar-basic.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-basic.tsx
@@ -9,7 +9,7 @@ function Example() {
   // tag::snippet[]
   const selectedItem = useSignal<MenuBarItem | undefined>(undefined);
 
-  const items = [
+  const items: Array<MenuBarItem> = [
     { text: 'View' },
     { text: 'Edit' },
     {
diff --git a/frontend/demo/component/menubar/react/menu-bar-checkable.tsx b/frontend/demo/component/menubar/react/menu-bar-checkable.tsx
index d474804425..641a3b3e25 100644
--- a/frontend/demo/component/menubar/react/menu-bar-checkable.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-checkable.tsx
@@ -4,6 +4,7 @@ import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-lin
 import { useSignal } from '@vaadin/hilla-react-signals';
 import {
   MenuBar,
+  type MenuBarItem,
   type MenuBarItemSelectedEvent,
   type SubMenuItem,
 } from '@vaadin/react-components/MenuBar.js';
@@ -11,7 +12,7 @@ import {
 function Example() {
   useSignals(); // hidden-source-line
   // tag::snippet[]
-  const items = useSignal([
+  const items = useSignal<Array<MenuBarItem>>([
     {
       text: 'Options',
       children: [{ text: 'Save automatically', checked: true }, { text: 'Notify watchers' }],
diff --git a/frontend/demo/component/menubar/react/menu-bar-combo-buttons.tsx b/frontend/demo/component/menubar/react/menu-bar-combo-buttons.tsx
index 093290c027..5b1ce9d0f9 100644
--- a/frontend/demo/component/menubar/react/menu-bar-combo-buttons.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-combo-buttons.tsx
@@ -2,11 +2,11 @@ import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
 import { Icon } from '@vaadin/react-components/Icon.js';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     { text: 'Save' },
     {
       component: <Icon icon="vaadin:chevron-down" aria-label="Other save options" />,
diff --git a/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx b/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx
index 885a449bc8..26b0608953 100644
--- a/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx
@@ -1,10 +1,10 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     { text: 'View', className: 'bg-primary text-primary-contrast' },
     { text: 'Edit' },
     {
diff --git a/frontend/demo/component/menubar/react/menu-bar-disabled.tsx b/frontend/demo/component/menubar/react/menu-bar-disabled.tsx
index 905f0c53c6..72fdaa893f 100644
--- a/frontend/demo/component/menubar/react/menu-bar-disabled.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-disabled.tsx
@@ -1,10 +1,10 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     { text: 'View' },
     { text: 'Edit', disabled: true },
     {
diff --git a/frontend/demo/component/menubar/react/menu-bar-dividers.tsx b/frontend/demo/component/menubar/react/menu-bar-dividers.tsx
index e7955b6f99..1bbdacaba3 100644
--- a/frontend/demo/component/menubar/react/menu-bar-dividers.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-dividers.tsx
@@ -1,10 +1,10 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     {
       text: 'Share',
       children: [
diff --git a/frontend/demo/component/menubar/react/menu-bar-drop-down-indicators.tsx b/frontend/demo/component/menubar/react/menu-bar-drop-down-indicators.tsx
index 563f2760b3..1ee3f5f1ca 100644
--- a/frontend/demo/component/menubar/react/menu-bar-drop-down-indicators.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-drop-down-indicators.tsx
@@ -1,9 +1,9 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function Example() {
-  const items = [
+  const items : Array<MenuBarItem> = [
     { text: 'View' },
     { text: 'Edit' },
     {
diff --git a/frontend/demo/component/menubar/react/menu-bar-drop-down.tsx b/frontend/demo/component/menubar/react/menu-bar-drop-down.tsx
index 084886d895..74b632cac6 100644
--- a/frontend/demo/component/menubar/react/menu-bar-drop-down.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-drop-down.tsx
@@ -1,10 +1,10 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     {
       text: 'John Smith',
       children: [
diff --git a/frontend/demo/component/menubar/react/menu-bar-icon-only.tsx b/frontend/demo/component/menubar/react/menu-bar-icon-only.tsx
index 306b1a74fd..8f1b9ebbbf 100644
--- a/frontend/demo/component/menubar/react/menu-bar-icon-only.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-icon-only.tsx
@@ -2,7 +2,7 @@ import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
 import { Icon } from '@vaadin/react-components/Icon.js';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function createItem(iconName: string, ariaLabel: string) {
   return <Icon icon={`vaadin:${iconName}`} aria-label={ariaLabel} />;
@@ -10,7 +10,7 @@ function createItem(iconName: string, ariaLabel: string) {
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     { component: createItem('eye', 'View') },
     { component: createItem('pencil', 'Edit') },
     {
diff --git a/frontend/demo/component/menubar/react/menu-bar-icons.tsx b/frontend/demo/component/menubar/react/menu-bar-icons.tsx
index 6511ed4fef..0d7ebf9389 100644
--- a/frontend/demo/component/menubar/react/menu-bar-icons.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-icons.tsx
@@ -2,7 +2,7 @@ import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
 import { Icon } from '@vaadin/react-components/Icon.js';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function createItem(iconName: string, text: string, isChild = false) {
   const iconStyle: React.CSSProperties = {
@@ -26,7 +26,7 @@ function createItem(iconName: string, text: string, isChild = false) {
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     {
       component: createItem('share', 'Share'),
       children: [
diff --git a/frontend/demo/component/menubar/react/menu-bar-internationalization.tsx b/frontend/demo/component/menubar/react/menu-bar-internationalization.tsx
index 6577c96c3f..f4f5b9c9f0 100644
--- a/frontend/demo/component/menubar/react/menu-bar-internationalization.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-internationalization.tsx
@@ -1,9 +1,9 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { MenuBar, type MenuBarI18n } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, type MenuBarI18n, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function Example() {
-  const items = [
+  const items: Array<MenuBarItem> = [
     { text: 'View' },
     { text: 'Edit' },
     {
diff --git a/frontend/demo/component/menubar/react/menu-bar-open-on-hover.tsx b/frontend/demo/component/menubar/react/menu-bar-open-on-hover.tsx
index 628fa71f0a..6a3ab58988 100644
--- a/frontend/demo/component/menubar/react/menu-bar-open-on-hover.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-open-on-hover.tsx
@@ -1,10 +1,10 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     { text: 'View' },
     { text: 'Edit' },
     {
diff --git a/frontend/demo/component/menubar/react/menu-bar-overflow.tsx b/frontend/demo/component/menubar/react/menu-bar-overflow.tsx
index 165f2b1faa..cc947772ba 100644
--- a/frontend/demo/component/menubar/react/menu-bar-overflow.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-overflow.tsx
@@ -1,11 +1,11 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     { text: 'View' },
     { text: 'Edit' },
     {
diff --git a/frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx b/frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx
index b5f430be77..5eaadbf96c 100644
--- a/frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx
@@ -1,9 +1,9 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 
 function Example() {
-  const items = [
+  const items: Array<MenuBarItem> = [
     { text: 'View' },
     { text: 'Edit' },
     {
diff --git a/frontend/demo/component/menubar/react/menu-bar-tooltip.tsx b/frontend/demo/component/menubar/react/menu-bar-tooltip.tsx
index c855433e66..edceb64cb9 100644
--- a/frontend/demo/component/menubar/react/menu-bar-tooltip.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-tooltip.tsx
@@ -2,7 +2,7 @@ import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
 import { Icon } from '@vaadin/react-components/Icon.js';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 import { Tooltip } from '@vaadin/react-components/Tooltip.js';
 
 function createItem(iconName: string) {
@@ -11,7 +11,7 @@ function createItem(iconName: string) {
 
 function Example() {
   // tag::snippet[]
-  const items = [
+  const items: Array<MenuBarItem> = [
     { component: createItem('eye'), tooltip: 'View' },
     { component: createItem('pencil'), tooltip: 'Edit' },
     { component: createItem('folder'), tooltip: 'Move' },