### Example Cypress Command Setup File

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/cypress-commands/TestSetup.mdx

An example of how to set up the custom mount command in your Cypress commands file (commands.ts/js), including necessary imports and the ThemeProvider wrapper.

```tsx
import { mount } from 'cypress/react';
// if you are using Cypress v12 or v13, you need to import the mount command from 'cypress/react18'
// import { mount } from 'cypress/react18';
import { ThemeProvider } from '@ui5/webcomponents-react';

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Cypress mount with ThemeProvider
       */
      mount: typeof mount;
    }
  }
}

/**
 * Cypress mount with ThemeProvider
 */
Cypress.Commands.add('mount', (component, options) => {
  return mount(<ThemeProvider>{component}</ThemeProvider>, options);
});
```

--------------------------------

### Install UI5 Web Components for React

Source: https://github.com/ui5/webcomponents-react/blob/main/README.md

Install the main package along with required peer dependencies. This is the recommended installation method for most projects.

```sh
npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
```

--------------------------------

### Install @ui5/webcomponents-react-cli

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/cli/CLAUDE.md

Install the CLI tool as a development dependency.

```bash
npm install -D @ui5/webcomponents-react-cli
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/ui5/webcomponents-react/blob/main/CONTRIBUTING.md

Clone the ui5-webcomponents-react repository and install project dependencies using Yarn. This command also runs post-install scripts for setup.

```bash
git clone https://github.com/UI5/webcomponents-react.git
cd webcomponents-react
yarn install        # installs dependencies and runs postinstall setup (husky + build:i18n/css/version-info)
```

--------------------------------

### Install @ui5/webcomponents-react-compat

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/compat/README.md

Install the compatibility package using npm.

```bash
npm install @ui5/webcomponents-react-compat
```

--------------------------------

### Install @ui5/webcomponents-react-cli

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/cli/README.md

Install the CLI tool using npm. This is the first step to using its features.

```bash
npm install @ui5/webcomponents-react-cli
```

--------------------------------

### Install @ui5/webcomponents-react-base

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/base/README.md

Install the base utilities package using npm.

```bash
npm install @ui5/webcomponents-react-base
```

--------------------------------

### Basic ThemeProvider Setup

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/CLAUDE.md

Wrap your application with the ThemeProvider to enable theming. This is a fundamental setup step for using the library.

```tsx
import { ThemeProvider } from '@ui5/webcomponents-react';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}
```

--------------------------------

### Default ComboBox Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/ComboBox/ComboBox.mdx

Shows the default rendering and usage of the ComboBox component. No specific setup is required beyond importing the component.

```javascript
import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
import { Canvas, Description, Markdown, Meta } from '@storybook/addon-docs/blocks';
import '@ui5/webcomponents-icons/dist/employee.js';
import { ComboBoxItemGroup } from '../ComboBoxItemGroup';
import { ComboBoxItem } from '../ComboBoxItem';
import * as ComponentStories from './ComboBox.stories';
import { excludePropsForAbstract } from '@sb/utils';

<Meta of={ComponentStories} />

<DocsHeader of={ComponentStories} since="0.9.0" />

<br />

## Example

<Canvas of={ComponentStories.Default} />

## Properties

<ControlsWithNote of={ComponentStories.Default} />
```

--------------------------------

### Install Dependencies

Source: https://github.com/ui5/webcomponents-react/blob/main/examples/react-router-ts/README.md

Install the required node modules for the project.

```bash
npm install
```

--------------------------------

### Install Charts Package

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/charts/README.md

Install the @ui5/webcomponents-react-charts package using npm.

```bash
npm install @ui5/webcomponents-react-charts
```

--------------------------------

### Default AnalyticalTable Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx

A basic example demonstrating how to configure columns and data for the AnalyticalTable. Ensure all necessary props are provided for functionality.

```jsx
const columns = [
  {
    Header: 'Name',
    accessor: 'name'
  },
  {
    Header: 'Age',
    accessor: 'age'
  },
  {
    Header: 'Friend Name',
    accessor: 'friend.name'
  },
  {
    Header: 'Friend Age',
    accessor: 'friend.age'
  }
];

const data = [
  {
    age: 80,
    friend: {
      age: 68,
      name: 'Carver Vance'
    },
    name: 'Allen Best',
    status: 'Positive'
  },
  {
    age: 31,
    friend: {
      age: 70,
      name: 'Strickland Gallegos'
    },
    name: 'Combs Fleming',
    status: 'None'
  }
  // shortened for readability
];

const TableComp = () => {
  return (
    <AnalyticalTable
      columns={columns}
      data={data}
      visibleRows={5}
      onAutoResize={() => {}}
      onColumnsReorder={() => {}}
      onGroup={() => {}}
      onLoadMore={() => {}}
      onRowClick={() => {}}
      onRowExpandChange={() => {}}
      onRowSelect={() => {}}
      onSort={() => {}}
      onTableScroll={() => {}}
    />
  );
};

```

--------------------------------

### Run Development Server

Source: https://github.com/ui5/webcomponents-react/blob/main/examples/react-router-ts/README.md

Start the local development server to preview the application.

```bash
npm run dev
```

--------------------------------

### Run Development Server

Source: https://github.com/ui5/webcomponents-react/blob/main/examples/nextjs-app/README.md

Start the local development server to view the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

--------------------------------

### Install UI5 Web Components for React and Core

Source: https://github.com/ui5/webcomponents-react/blob/main/README.md

Install the core UI5 Web Components for React package along with the essential UI5 Web Components. This is the minimal installation.

```sh
npm install @ui5/webcomponents-react @ui5/webcomponents
```

--------------------------------

### Install Dependencies

Source: https://github.com/ui5/webcomponents-react/blob/main/skills/maintainer/ui5wc-upgrade/SKILL.md

Installs all project dependencies after updating package.json files.

```bash
yarn install
```

--------------------------------

### AnalyticalTable with Context Menu Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx

Demonstrates how to implement a context menu for rows in an AnalyticalTable, allowing users to move selected items between two tables. Requires setup of data, columns, and event handlers for row selection and context menu triggers.

```tsx
const productData = [
  { id: '1', product: 'Laptop Pro 15', category: 'Electronics', price: 1299 },
  { id: '2', product: 'Wireless Mouse', category: 'Accessories', price: 49 },
  // ...
];

type Product = (typeof productData)[number];

const productColumns = [
  { Header: 'Product', accessor: 'product' },
  { Header: 'Category', accessor: 'category' },
  { Header: 'Price', accessor: 'price', hAlign: TextAlign.End },
];

function ContextMenuExample() {
  const [availableProducts, setAvailableProducts] = useState(productData);
  const [selectedProducts, setSelectedProducts] = useState<Product[]>([]);
  const [checkedAvailable, setCheckedAvailable] = useState<Product[]>([]);
  const [checkedSelected, setCheckedSelected] = useState<Product[]>([]);
  const [menuOpen, setMenuOpen] = useState(false);
  const [menuTarget, setMenuTarget] = useState<'available' | 'selected'>('available');
  const [contextRow, setContextRow] = useState<Product | null>(null);
  const anchorRef = useRef<HTMLDivElement>(null);
  const rafId = useRef(0);
  useEffect(() => {
    return () => {
      cancelAnimationFrame(rafId.current);
    };
  }, []);

  const moveToSelected = (rows: Product[]) => {
    const ids = new Set(rows.map((r) => r.id));
    setAvailableProducts((prev) => prev.filter((p) => !ids.has(p.id)));
    setSelectedProducts((prev) => [...prev, ...rows.filter((p) => !prev.some((p) => p.id === r.id))]);
    setCheckedAvailable([]);
  };

  const moveToAvailable = (rows: Product[]) => {
    const ids = new Set(rows.map((r) => r.id));
    setSelectedProducts((prev) => prev.filter((p) => !ids.has(p.id)));
    setAvailableProducts((prev) => [...prev, ...rows.filter((p) => !prev.some((p) => p.id === r.id))]);
    setCheckedSelected([]);
  };

  const handleRowSelect: (
    setter: typeof setCheckedAvailable
  ) => AnalyticalTablePropTypes['onRowSelect'] = (setter) => (e) => {
    const rows = Object.values(e.detail.rowsById)
      .filter((r) => e.detail.selectedRowIds[r.id])
      .map((r) => r.original as Product);
    setter(rows);
  };

  const handleContextMenu: (
    target: 'available' | 'selected'
  ) => AnalyticalTablePropTypes['onRowContextMenu'] = (target) => (e) => {
    e.preventDefault();
    setContextRow(e.detail.row.original as Product);
    setMenuTarget(target);
    if (anchorRef.current) {
      anchorRef.current.style.left = `${e.clientX}px`;
      anchorRef.current.style.top = `${e.clientY}px`;
    }
    // Defer open so it runs after the menu's onClose from the previous right-click.
    setMenuOpen(false);
    rafId.current = requestAnimationFrame(() => setMenuOpen(true));
  };

  const handleMenuItemClick = () => {
    if (!contextRow) {
      return;
    }
    if (menuTarget === 'available') {
      moveToSelected([contextRow]);
    } else {
      moveToAvailable([contextRow]);
    }
    setMenuOpen(false);
    setContextRow(null);
  };

  return (
    <>
      <FlexBox alignItems={FlexBoxAlignItems.Start} style={{ gap: '0.5rem' }}>
        <AnalyticalTable
          header="Available Products"
          columns={productColumns}
          data={availableProducts}
          selectionMode="Multiple"
          onRowContextMenu={handleContextMenu('available')}
          onRowSelect={handleRowSelect(setCheckedAvailable)}
          style={{ flex: 1 }}
        />
        <FlexBox
          direction={FlexBoxDirection.Column}
          justifyContent={FlexBoxJustifyContent.Center}
          style={{ alignSelf: 'center' }}
        >
          <Button icon="navigation-right-arrow" onClick={() => moveToSelected(checkedAvailable)} />
          <Button icon="navigation-left-arrow" onClick={() => moveToAvailable(checkedSelected)} />
        </FlexBox>
        <AnalyticalTable
          header="Selected Products"
          columns={productColumns}
          data={selectedProducts}
          selectionMode="Multiple"
          onRowContextMenu={handleContextMenu('selected')}
          onRowSelect={handleRowSelect(setCheckedSelected)}
          style={{ flex: 1 }}
        />
      </FlexBox>
      {/* Hidden anchor for Menu positioning */}
      <div
        ref={anchorRef}
        style={{ position: 'fixed', width: 0, height: 0, pointerEvents: 'none' }}
      />
      {menuOpen && (
        <Menu open opener={anchorRef.current} onClose={() => setMenuOpen(false)} onItemClick={handleMenuItemClick}>
          <MenuItem
            text={`Move to ${menuTarget === 'available' ? 'Selected Products' : 'Available Products'}`}
            icon={menuTarget === 'available' ? 'navigation-right-arrow' : 'navigation-left-arrow'}
          />
        </Menu>
      )}
    </>
  );
}

```

--------------------------------

### Install @ui5/webcomponents-ai-react

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/ai/CLAUDE.md

Install the React wrappers for AI-focused UI5 Web Components and the core AI Web Components package.

```bash
npm install @ui5/webcomponents-ai-react @ui5/webcomponents-ai
```

--------------------------------

### ObjectPage Rendering Examples

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/ObjectPage/ObjectPage.mdx

Examples demonstrating various ways to render and configure the ObjectPage component.

```APIDOC
## ObjectPage Rendering Examples

### Default Example

This example shows the default rendering of the ObjectPage component.

### ObjectPage with IllustratedMessage Placeholder

Demonstrates using an `IllustratedMessage` as a placeholder when content cannot be loaded.

### ObjectPageSection with Hidden Title and Custom Header

Illustrates how to hide the default `titleText` of an `ObjectPageSection` and provide a custom header.

### TabBar ObjectPage with Fullscreen Section

Shows how to render a single `ObjectPageSection` in fullscreen mode within a `TabBar` layout. Note that this is only supported for sections in `TabBar` mode.

```jsx
<ObjectPageSection titleText="Section with Overflow" id="section3" style={{ height: '100%', overflow: 'auto' }}>
  <div style={{ height: '300%', background: 'lightyellow' }} />
</ObjectPageSection>
```

### ObjectPage with Single Section

When only one section is present, the `TabBar` is automatically hidden.

### Opening Popover Components by Pressing an Action

Refer to the `Toolbar` component documentation for details on opening popover components via actions.

### Legacy Toolbar Support

The ObjectPage component supports legacy React-only `Toolbar` implementations. Considerations for legacy toolbars include:

- Use a `ToolbarSpacer` as the first child for correct action alignment.
- Toggling the `headerArea` by clicking on empty space in the legacy `Toolbar` requires app-side implementation.
- Ensure the `data-in-object-page-title` prop is added to toolbars for the `click` event to fire.
```

--------------------------------

### Build and Run Production

Source: https://github.com/ui5/webcomponents-react/blob/main/examples/react-router-ts/README.md

Commands to compile the application for production and start the production server.

```sh
npm run build
```

```bash
npm start
```

--------------------------------

### Default Radial Chart Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/charts/src/components/RadialChart/RadialChart.mdx

Renders the default Radial Chart component. No specific setup is required beyond importing the component.

```javascript
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
import { Canvas, Meta } from '@storybook/addon-docs/blocks';
import * as ComponentStories from './RadialChart.stories';

<Meta of={ComponentStories} />

<DocsHeader of={ComponentStories} isChart />

## Example

<Canvas of={ComponentStories.Default} />

## Properties

<ControlsWithNote of={ComponentStories.Default} />

<br />
<br />

## More Examples

### With Custom Color

<Canvas of={ComponentStories.WithCustomColor} />

### Micro RadialCharts

<Canvas of={ComponentStories.MicroRadialCharts} />

<Footer />
```

--------------------------------

### Install UI5 Web Components for React CLI

Source: https://github.com/ui5/webcomponents-react/blob/main/docs/knowledge-base/BringYourOwnWebComponents.mdx

Install the CLI tool as a development dependency. If your package is based on UI5 Web Components V1, install the V1 version of the CLI.

```shell
npm install @ui5/webcomponents-react-cli --save-dev
```

```shell
npm install @ui5/webcomponents-react-cli@V1 --save-dev
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/ui5/webcomponents-react/blob/main/examples/nextjs-app/README.md

Install required node modules using npm, yarn, or pnpm.

```bash
npm install
# or
yarn install
# or
pnpm install
```

--------------------------------

### Complete UI5 Web Components for React Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/CLAUDE.md

A comprehensive example demonstrating the usage of Button, Dialog, and SideNavigation components with their respective types and event handlers.

```tsx
import { useState, useRef } from 'react';
import { Button, Dialog, SideNavigation, SideNavigationItem } from '@ui5/webcomponents-react';
import type { ButtonPropTypes, DialogDomRef, SideNavigationPropTypes } from '@ui5/webcomponents-react';
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
import homeIcon from '@ui5/webcomponents-icons/dist/home.js';

function MyComponent() {
  const dialogRef = useRef<DialogDomRef>(null);
  const [open, setOpen] = useState(false);

  const handleClick: ButtonPropTypes['onClick'] = (e) => {
    setOpen(true);
  };

  const handleSelectionChange: SideNavigationPropTypes['onSelectionChange'] = (e) => {
    console.log(e.detail.item.text);
  };

  return (
    <>
      <Button design={ButtonDesign.Emphasized} onClick={handleClick}>
        Open Dialog
      </Button>
      <Dialog ref={dialogRef} open={open} onClose={() => setOpen(false)}>
        Content
      </Dialog>
      <SideNavigation onSelectionChange={handleSelectionChange}>
        <SideNavigationItem text="Home" icon={homeIcon} />
      </SideNavigation>
    </>
  );
}
```

--------------------------------

### Install @ui5/webcomponents-react via npm

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/README.md

Use this command to add the library to your project dependencies.

```bash
npm install @ui5/webcomponents-react
```

--------------------------------

### Install Cypress Commands

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/cypress-commands/CLAUDE.md

Install the package as a development dependency using npm.

```bash
npm install -D @ui5/webcomponents-cypress-commands
```

--------------------------------

### MessageView in a Dialog Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/MessageView/MessageView.mdx

Example of how to use the MessageView component within a Dialog.

```APIDOC
## MessageView in a Dialog

### Description
This example demonstrates integrating the MessageView component within a Dialog, managing navigation between list and detail views.

### Request Example
```tsx
import { useRef, useState } from 'react';
import { MessageView, MessageViewDomRef } from '@ui5/webcomponents-react/dist/MessageView';
import { Dialog } from '@ui5/webcomponents-react/dist/Dialog';
import { Bar } from '@ui5/webcomponents-react/dist/Bar';
import { Title } from '@ui5/webcomponents-react/dist/Title';
import { Button } from '@ui5/webcomponents-react/dist/Button';
import { FlexBox } from '@ui5/webcomponents-react/dist/FlexBox';
import { ButtonDesign } from '@ui5/webcomponents-react/dist/ButtonDesign';
import { FlexBoxAlignItems } from '@ui5/webcomponents-react/dist/FlexBoxAlignItems';
import { TitleLevel } from '@ui5/webcomponents-react/dist/TitleLevel';

function MyComponent() {
  const messageViewRef = useRef<MessageViewDomRef>(null);
  const [isOnDetailsPage, setIsOnDetailsPage] = useState(false);

  return (
    <Dialog
      resizable
      style={{ width: '500px' }}
      className="modal-without-padding"
      onClose={() => {
        messageViewRef.current.navigateBack();
      }}
      header={
        <Bar
          startContent={
            <FlexBox alignItems={FlexBoxAlignItems.Center}>
              {isOnDetailsPage && (
                <Button
                  icon="slim-arrow-left"
                  design={ButtonDesign.Transparent}
                  onClick={() => {
                    setIsOnDetailsPage(false);
                    messageViewRef.current.navigateBack();
                  }}
                  style={{ marginInline: '0 0.5rem' }}
                />
              )}
              <Title level={TitleLevel.H4}>Messages</Title>
            </FlexBox>
          }
        />
      }
    >
      <MessageView
        ref={messageViewRef}
        showDetailsPageHeader={false}
        onItemSelect={() => {
          setIsOnDetailsPage(true);
        }}
      >
        {/* children */}
      </MessageView>
    </Dialog>
  );
}
```
```

--------------------------------

### Storybook Canvas Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.mdx

Displays the default example of the component within a Storybook canvas for interactive preview.

```javascript
<Canvas of={ComponentStories.Default} />
```

--------------------------------

### List Component - Default Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/List/List.mdx

Demonstrates the default usage of the List component.

```APIDOC
## Canvas List - Default

### Description
Displays the default configuration of the List component.

### Endpoint
N/A (Component Example)

### Request Example
```jsx
<Canvas of={ComponentStories.Default} />
```

### Response Example
N/A (Component Example)
```

--------------------------------

### Install and List Internal Skills

Source: https://github.com/ui5/webcomponents-react/blob/main/skills/README.md

Use this command to discover and install internal agent skills by setting the INSTALL_INTERNAL_SKILLS environment variable.

```bash
INSTALL_INTERNAL_SKILLS=1 npx skills add SAP/ui5-webcomponents-react --list
```

--------------------------------

### Install @ui5/webcomponents-cypress-commands

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/cypress-commands/README.md

Run this command in your terminal to add the package to your project dependencies.

```sh
npm install @ui5/webcomponents-cypress-commands
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/ui5/webcomponents-react/blob/main/docs/MigrationGuide.archive.md

Install the required peer dependencies for the project using npm or yarn.

```sh
npm install @ui5/webcomponents --save
npm install @ui5/webcomponents-fiori --save
npm install @ui5/webcomponents-icons --save
```

```sh
yarn add @ui5/webcomponents
yarn add @ui5/webcomponents-fiori
yarn add @ui5/webcomponents-icons
```

--------------------------------

### Button Component Default Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/Button/Button.mdx

This is the default example of the Button component. It is used to demonstrate basic button functionality.

```javascript
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
import { Canvas, Description, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
import * as ComponentStories from './Button.stories';
import { ButtonBadge } from '../ButtonBadge';

<Meta of={ComponentStories} />

<DocsHeader of={ComponentStories} />

<br />

## Example

<Canvas of={ComponentStories.Default} />
```

--------------------------------

### Install Specific Internal Skill Locally

Source: https://github.com/ui5/webcomponents-react/blob/main/skills/README.md

Install a specific internal skill from a local checkout by setting the INSTALL_INTERNAL_SKILLS environment variable and specifying the skill name.

```bash
INSTALL_INTERNAL_SKILLS=1 npx skills add ./skills --skill ui5wc-upgrade
```

--------------------------------

### Running Storybook

Source: https://github.com/ui5/webcomponents-react/blob/main/CLAUDE.md

Command to start the Storybook development server. Opens the Storybook UI at localhost:6006.

```bash
yarn start    # Opens localhost:6006
```

--------------------------------

### Text Component Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/Text/Text.mdx

Demonstrates the usage of the Text component with its default properties and controls.

```APIDOC
## Example Usage of Text Component

### Description
This section shows a basic example of the Text component as rendered in Storybook.

### Method
N/A (Component Rendering Example)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A

## Properties of Text Component

### Description
This section details the configurable properties for the Text component, allowing customization of its appearance and behavior.

### Method
N/A (Component Property Documentation)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Import UI5 Assets Manually (Minimal Installation)

Source: https://github.com/ui5/webcomponents-react/blob/main/README.md

For minimal installations, especially with bundlers like Next.js that have limitations with top-level await, manually import UI5 assets. This includes core assets and i18n imports.

```ts
import '@ui5/webcomponents/dist/Assets.js';
import '@ui5/webcomponents-react/dist/json-imports/i18n.js';
```

```ts
import '@ui5/webcomponents/dist/Assets-fetch.js';
import '@ui5/webcomponents-react/dist/json-imports/i18n-fetch.js';
```

```ts
import '@ui5/webcomponents/dist/Assets-node.js';
import '@ui5/webcomponents-react/dist/json-imports/i18n-node.js';
```

--------------------------------

### Displaying Default MessageViewButton Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/MessageViewButton/MessageViewButton.mdx

Renders the default example of the MessageViewButton component within a Storybook Canvas. Use this to visualize the component's standard appearance and behavior.

```javascript
<Canvas of={ComponentStories.Default} />

```

--------------------------------

### Popover - Usage

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/Modals/Modals.mdx

Information on how to use the Popover component. A canvas example is provided.

```APIDOC
## Popover

<Canvas of={ComponentStories.Popover} />
```

--------------------------------

### Launch MCP Inspector

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/mcp-server/CONTRIBUTING.md

Start the MCP Inspector, a web-based UI for testing your MCP server.

```bash
npm run inspector

```

--------------------------------

### Title Component Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/Title/Title.mdx

Demonstrates the usage of the Title component with its default settings and interactive property controls.

```APIDOC
## Title Component Usage

### Description
This section shows an example of the Title component in action, allowing for interactive exploration of its properties.

### Method
N/A (This is a documentation example, not an API endpoint)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A

## Properties

### Description
Interactive controls to modify the properties of the Title component in the example.

### Method
N/A

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
N/A
```

--------------------------------

### Avatar With Image Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/Avatar/Avatar.mdx

Demonstrates how to display an image within the Avatar component. Ensure the image source is correctly provided.

```javascript
## With Image

The Avatar can show images.

<Canvas of={ComponentStories.WithImage} />
```

--------------------------------

### RatingIndicator Default Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/RatingIndicator/RatingIndicator.mdx

This is the default configuration for the RatingIndicator component. No specific setup is required beyond importing the component.

```javascript
import { RatingIndicator } from '@ui5/webcomponents-react/dist/RatingIndicator';

<RatingIndicator />
```

--------------------------------

### Avatar Default Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/Avatar/Avatar.mdx

This snippet shows the default rendering of the Avatar component. No specific setup is required beyond importing the component.

```javascript
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
import { Canvas, Meta } from '@storybook/addon-docs/blocks';
import * as ComponentStories from './Avatar.stories';

<Meta of={ComponentStories} />

<DocsHeader of={ComponentStories} since="0.9.0" subComponents={['AvatarBadge']}/>

<br />

## Example

<Canvas of={ComponentStories.Default} />
```

--------------------------------

### AnalyticalTable with useOrderedMultiSort

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/AnalyticalTable/docs/PluginOrderedMultiSort.mdx

Example demonstrating the setup of AnalyticalTable with the useOrderedMultiSort hook to define column sorting priority. Ensure 'enableMultiSort: true' is set for columns intended for multi-sort.

```jsx
const columns = [
  {
    Header: 'Name',
    accessor: 'name',
    enableMultiSort: true
  },
  {
    Header: 'Age',
    accessor: 'age',
    enableMultiSort: true
  },
  {
    Header: 'Name 2',
    accessor: 'name2',
    enableMultiSort: true
  },
  {
    Header: 'Age 2',
    accessor: 'age2',
    enableMultiSort: true
  }
];
const data = [
  { name: 'Peter', age: 40, name2: 'Alissa', age2: 18 },
  { name: 'Kristen', age: 40, name2: 'Randolph', age2: 21 },
  { name: 'Peter', age: 30, name2: 'Rose', age2: 90 },
  { name: 'Peter', age: 70, name2: 'Rose', age2: 22 },
  { name: 'Kristen', age: 60, name2: 'Willis', age2: 80 },
  { name: 'Kristen', age: 20, name2: 'Alissa', age2: 80 },
  { name: 'Graham', age: 40, name2: 'Alissa', age2: 80 },
  { name: 'Peter', age: 65, name2: 'Rose', age2: 26 },
  { name: 'Graham', age: 65, name2: 'Rose', age2: 26 },
  { name: 'Graham', age: 65, name2: 'Willis', age2: 26 },
  { name: 'Graham', age: 62, name2: 'Willis', age2: 26 }
];
const orderedIds = ['name', 'name2', 'age', 'age2'];
const tableHooks = [useOrderedMultiSort(orderedIds)]; // should be memoized
const TableComponent = () => {
  return (
    <AnalyticalTable
      columns={columns}
      data={data}
      sortable
      tableHooks={tableHooks}
    />
  );
};

```

--------------------------------

### Initialize Next.js Project with UI5 Web Components

Source: https://github.com/ui5/webcomponents-react/blob/main/examples/nextjs-pages/README.md

Use this command to scaffold a new Next.js project with UI5 Web Components pre-configured. Navigate into the created directory to proceed.

```bash
npx degit UI5/webcomponents-react/examples/nextjs-pages#main my-project
cd my-project
```

--------------------------------

### Hero Banner with Header and Actions Placement

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/HeroBanner/HeroBanner.mdx

Combines `headerBlockPlacement` and `actionsPlacement` with `columnsRatio` to control the layout of header and action elements. This example places the header below the start column and aligns actions to the left.

```javascript
## Header Block and Actions Placement

Combine `headerBlockPlacement="Bottom"` with `actionsPlacement="BottomStart"` and `columnsRatio="Equal"` to push the header below the start column and align the actions to the left under it.

<Canvas of={ComponentStories.HeaderBlockAndActionsPlacement} />
```

--------------------------------

### Initialize project with degit

Source: https://github.com/ui5/webcomponents-react/blob/main/patterns/navigation-layout/README.md

Use degit to clone the tool-page pattern template into a new directory.

```bash
npx degit UI5/webcomponents-react/patterns/tool-page#main my-project
cd my-project
```

--------------------------------

### Jest Setup: Configure Jest environment

Source: https://github.com/ui5/webcomponents-react/blob/main/docs/MigrationGuide.archive.md

In version 0.26.0, import '@ui5/webcomponents-react/jestSetup.js' to set up the Jest environment. If using create-react-app, include this in your `src/setupTests.js` along with `ResizeObserverPolyfill`.

```js
import ResizeObserverPolyfill from 'resize-observer-polyfill';
import '@ui5/webcomponents-react/jestSetup.js';

window.ResizeObserver = ResizeObserverPolyfill;
```

--------------------------------

### Initialize Project with Vite Template

Source: https://github.com/ui5/webcomponents-react/blob/main/examples/vite-ts/README.md

Use this command to scaffold a new project using the Vite + TypeScript template for UI5 Web Components for React. Navigate into the created directory afterwards.

```bash
npx degit UI5/webcomponents-react/examples/vite-ts#main my-project
cd my-project
```

--------------------------------

### Show Dialog with Configuration

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/Modals/Modals.mdx

Demonstrates how to programmatically display a Dialog using the `showDialog` method. It supports passing props for the Dialog and an optional configuration object for mounting.

```typescript
import { Modals } from '@ui5/webcomponents-react/Modals';

// Recommended: using config object
const { ref, close } = Modals.showDialog(props, config);

// Legacy: using container directly
const { ref, close } = Modals.showDialog(props, container);
```

--------------------------------

### Open Dialogs with Ref

Source: https://github.com/ui5/webcomponents-react/blob/main/docs/MigrationGuide.archive.md

Demonstrates the transition from the open() method to the show() method for Dialog components.

```javascript
// with 0.17.x
function MyOldComponent() {
  const ref = useRef(null);
  const openDialog = () => {
    ref.current.open();
  };
  return <Dialog ref={ref}>Content</Dialog>;
}

// with 0.18.x
function MyNewComponent() {
  const ref = useRef(null);
  const openDialog = () => {
    ref.current.show();
  };
  return <Dialog ref={ref}>Content</Dialog>;
}
```

--------------------------------

### Initialize Project with Degit

Source: https://github.com/ui5/webcomponents-react/blob/main/templates/nextjs-app/README.md

Use degit to scaffold a new project from the UI5 Web Components React Next.js template.

```bash
npx degit UI5/webcomponents-react/templates/nextjs-app#main my-project
cd my-project
```

--------------------------------

### Project Binaries via Yarn

Source: https://github.com/ui5/webcomponents-react/blob/main/CLAUDE.md

Shows how to execute project tools like Cypress, ESLint, and TypeScript using yarn. Always use project binaries via yarn for consistency.

```bash
yarn start           # Storybook (localhost:6006)
yarn test            # Cypress component tests
yarn lint            # ESLint
yarn prettier:all    # Format all files
```

--------------------------------

### MessageView in Popover with MessageViewButton Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/MessageView/MessageView.mdx

Example of using MessageView within a Popover, triggered by MessageViewButton.

```APIDOC
## MessageView in Popover with MessageViewButton

### Description
This example shows how to use MessageView inside a Popover, with MessageViewButton acting as the opener. The button's type should reflect the highest message severity.

### Request Example
_(Button and Dialog opening are omitted here)_
```

--------------------------------

### TimePicker Component Documentation Setup

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/TimePicker/TimePicker.mdx

Standard Storybook documentation setup for the TimePicker component using MDX.

```javascript
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
import { Canvas, Meta } from '@storybook/addon-docs/blocks';
import * as ComponentStories from './TimePicker.stories';

<Meta of={ComponentStories} />

<DocsHeader of={ComponentStories} since="0.9.0" />

<br />

## Example

<Canvas of={ComponentStories.Default} />

## Properties

<ControlsWithNote of={ComponentStories.Default} />

<Footer />
```

--------------------------------

### Wizard with WizardSteps

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/Wizard/Wizard.mdx

Example of using Wizard and WizardStep components to create a multi-step process. Ensure WizardStep is used as a direct child of Wizard.

```jsx
const WizardWithSteps = () => {
  return (
    <Wizard initialStep={0}>
      <WizardStep title="Step 1: Information">
        <Text>Content for step 1</Text>
        <Button onClick={() => { /* logic */ }}>Next</Button>
      </WizardStep>
      <WizardStep title="Step 2: Details">
        <Text>Content for step 2</Text>
        <Button onClick={() => { /* logic */ }}>Next</Button>
      </WizardStep>
      <WizardStep title="Step 3: Confirmation">
        <Text>Content for step 3</Text>
        <Button onClick={() => { /* logic */ }}>Submit</Button>
      </WizardStep>
    </Wizard>
  );
};

```

--------------------------------

### Install resize-observer-polyfill for Jest

Source: https://github.com/ui5/webcomponents-react/blob/main/docs/MigrationGuide.archive.md

For running tests with Jest, install `resize-observer-polyfill` as a development dependency if you are using version 0.26.0 or later.

```shell
npm install resize-observer-polyfill --save-dev
# or if you are using yarn
yarn add resize-observer-polyfill --dev
```

```shell
npm install resize-observer-polyfill --save-dev
```

--------------------------------

### Growing Table Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/compat/src/components/Table/Table.mdx

Demonstrates how to implement a growing table that loads more data on demand, using the `growing` and `onLoadMore` props.

```APIDOC
## Growing Table

`Table` with `growing={TableGrowingMode.Scroll}`.

### Code

```jsx
const createRows = (indexOffset) => {
  return new Array(25).fill('').map((_, index) => (
    <TableRow key={`${index + indexOffset} - row`}>
      <TableCell>
        <Label>{index + indexOffset}</Label>
      </TableCell>
      <TableCell>
        <Label>Placeholder</Label>
      </TableCell>
    </TableRow>
  ));
};

const GrowingTable = () => {
  const [rows, setRows] = useState(createRows(1));
  const onLoadMore = () => {
    setRows((prev) => [...prev, ...createRows(prev.length + 1)]);
  };
  return (
    <div style={{ height: '250px', overflow: 'auto' }}>
      <Table
        onLoadMore={onLoadMore}
        growing={TableGrowingMode.Scroll}
        columns={
          <>
            <TableColumn>
              <Label>Column 1</Label>
            </TableColumn>
            <TableColumn>
              <Label>Column 2</Label>
            </TableColumn>
          </>
        }
      >
        {rows}
      </Table>
    </div>
  );
};
```
```

--------------------------------

### Dialog - Usage

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/Modals/Modals.mdx

How to use the `showDialog` method to display a Dialog. It supports configuration objects and legacy container mounting.

```APIDOC
## Dialog

### Usage

```typescript
import { Modals } from '@ui5/webcomponents-react/Modals';

// Recommended: using config object
const { ref, close } = Modals.showDialog(props, config);

// Legacy: using container directly
const { ref, close } = Modals.showDialog(props, container);
```

### Parameters

| Parameter     | Description                                                                                             |
| ------------- | ------------------------------------------------------------------------------------------------------- |
| `props`       | All supported `Dialog` props (see table below). `open` will always be set to `true`.                    |
| _`config`_    | Optional configuration object. See config options below.                                                |
| _`container`_ | _(deprecated)_ Optional container where the `Dialog` should be mounted. Use `config.container` instead. |

### Config Options _(since 2.19.0)_

| Property    | Description                                                                            |
| ----------- | -------------------------------------------------------------------------------------- |
| `container` | Optional container where the component should be mounted. Defaults to `document.body`. |

### Return Value

The `showDialog` method returns an object with the following properties:

| Property  | Description                                                            |
| --------- | ---------------------------------------------------------------------- |
| `ref`     | React `RefObject` which can be used to get interact with the `Dialog`. |
| `close()` | Convenience Method for closing the `Dialog`.                           |

<Panel header={<h4 className="noMargin">Dialog Props</h4>} collapsed>
  <ArgTypes of={Dialog} exclude={['open']} />
</Panel>
```

--------------------------------

### Conventional Commit Message Example

Source: https://github.com/ui5/webcomponents-react/blob/main/docs/Guidelines.md

An example of a commit message following the Conventional Commits specification, including header, body, and footer.

```git
fix(Text): correct focus with 'tab' key

The text should receive a correct focus outline
when the 'tab' key is pressed.

Fixes #42
```

--------------------------------

### Storybook Setup for ExpandableText

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/ExpandableText/ExpandableText.mdx

This snippet shows the basic Storybook setup for the ExpandableText component, including imports for documentation blocks and component stories.

```tsx
import { Canvas, Meta } from '@storybook/addon-docs/blocks';
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
import * as ComponentStories from './ExpandableText.stories.tsx';

<Meta of={ComponentStories} />

<DocsHeader of={ComponentStories} />

<br />

## Example

<Canvas of={ComponentStories.Default} />

## Properties

<ControlsWithNote of={ComponentStories.Default} />

<Footer />
```

--------------------------------

### Initialize Next.js Template

Source: https://github.com/ui5/webcomponents-react/blob/main/templates/nextjs-pages/README.md

Use degit to scaffold a new project from the UI5 Web Components React template.

```bash
npx degit UI5/webcomponents-react/templates/nextjs-pages#main my-project
cd my-project
```

--------------------------------

### Create Theming Parameters

Source: https://github.com/ui5/webcomponents-react/blob/main/skills/maintainer/ui5wc-upgrade/SKILL.md

Run the command to generate or update theming parameters. This step is crucial for synchronizing theming definitions.

```bash
yarn create-theming-parameters
```

--------------------------------

### Implement MultiSelect mode with search

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/components/SelectDialog/SelectDialog.mdx

This example demonstrates how to manage selection state, search functionality, and confirmation/cancellation logic within a SelectDialog.

```tsx
const MultiSelectDialog = () => {
  const [dialogOpen, setDialogOpen] = useState(false);
  // predefined selection
  const selectedProducts = { 'HT-102': true, 'HT-203': true, 'HT-1038': true };
  // number of selected items
  const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(selectedProducts);
  const selectedItemsBeforeOpen = useRef(selectedItems);
  const [searchVal, setSearchVal] = useState();
  const [products, setProducts] = useState(Object.keys(selectedProducts));

  const handleBeforeOpen = () => {
    selectedItemsBeforeOpen.current = selectedItems;
  };
  const handleOpen = () => {
    setDialogOpen(true);
  };
  const handleClose = () => {
    setDialogOpen(false);
  };
  // search
  const handleSearch = (e) => {
    setSearchVal(e.detail.value);
  };
  // reset input value of search field
  const handleSearchReset = () => {
    setSearchVal(undefined);
  };
  // select/unselect
  const handleItemClick = (e) => {
    const itemDescription = e.detail.targetItem.dataset.description;
    setSelectedItems((prev) => {
      if (prev[itemDescription]) {
        const { [itemDescription]: _omit, ...rest } = prev;
        return rest;
      } else {
        return { ...prev, [itemDescription]: true };
      }
    });
  };
  // clear selection
  const handleClear = () => {
    setSelectedItems({});
  };
  // confirm selection
  const handleConfirm = () => {
    setProducts(Object.keys(selectedItems));
  };
  // cancel selection
  const handleCancel = () => {
    setSelectedItems(selectedItemsBeforeOpen.current);
  };

  return (
    <>
      <Button onClick={handleOpen}>Open Dialog</Button>
      <SelectDialog
        open={dialogOpen}
        mode={ListSelectionMode.Multiple}
        numberOfSelectedItems={Object.keys(selectedItems).length}
        listProps={{ onSelectionChange: handleItemClick }}
        showClearButton
        rememberSelections
        onClear={handleClear}
        onConfirm={handleConfirm}
        onClose={handleClose}
        onSearchInput={handleSearch}
        onSearch={handleSearch}
        onSearchReset={handleSearchReset}
        onBeforeOpen={handleBeforeOpen}
        onCancel={handleCancel}
      >
        {new Array(40)
          .fill('')
          .map((_, index) => {
            const currentProduct = listItems[index % 4];
            const description = `${currentProduct.description}${index}`;
            const lowerCaseSearchVal = searchVal?.toLowerCase();
            if (
              searchVal &&
              !description.toLowerCase().includes(lowerCaseSearchVal) &&
              !currentProduct.text.toLowerCase().includes(lowerCaseSearchVal)
            ) {
              return null;
            }
            return (
              <ListItemStandard
                image={currentProduct.img}
                description={`${currentProduct.description}${index}`}
                data-description={`${currentProduct.description}${index}`}
                key={`${currentProduct.text}${index}`}
                selected={selectedItems[description]}
                text={currentProduct.text}
              />
            );
          })
          .filter(Boolean)}
      </SelectDialog>
      <FlexBox>
        <Label>Selected: </Label>
        <Text>{products.join(', ')}</Text>
      </FlexBox>
    </>
  );
};
```

--------------------------------

### Instance Property Mutation Example

Source: https://github.com/ui5/webcomponents-react/blob/main/skills/maintainer/analytical-table/references/PERFORMANCE-PATTERNS.md

Shows how hooks attach properties directly to the `instance` object to store state and computed values. Examples include `virtualRowsRange`, `rawColumnSizing`, `visibleColumnsWidth`, and `pendingSelectEvent`.

```typescript
instance.virtualRowsRange = rowVirtualizer.range;
instance.rawColumnSizing = new Map(); // see REACT-TABLE-PIPELINE.md "Safe Mutation Pattern"
instance.visibleColumnsWidth = [...];
instance.pendingSelectEvent = { event, row }; // consumed by useSelectionChangeCallback's useEffect
```

--------------------------------

### Hero Banner with Columns Ratio

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/HeroBanner/HeroBanner.mdx

Controls the width distribution between the start and end content columns using the `columnsRatio` prop. If `endContent` is absent, the start content occupies the full width.

```javascript
## Columns Ratio

The `columnsRatio` prop controls how the start (default slot) and end (`endContent`) columns share the available width. When `endContent` is not provided, the start content spans the full width.

<Canvas of={ComponentStories.ColumnsRatio} />
```

--------------------------------

### Growing Table Example

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/Table/Table.mdx

Demonstrates a Table with the growing feature enabled. It shows how to implement 'onLoadMore' and switch between 'Scroll' and 'Button' growing modes.

```tsx
const createRows = (indexOffset) => {
  return new Array(25).fill('').map((_, index) => (
    <TableRow key={`${index + indexOffset}-row`}>
      <TableCell>
        <span>{index + indexOffset}</span>
      </TableCell>
      <TableCell>
        <span>Placeholder</span>
      </TableCell>
      <TableCell>
        <span>Placeholder 2</span>
      </TableCell>
      <TableCell>
        <span>Placeholder 3</span>
      </TableCell>
      <TableCell>
        <span>Placeholder 4</span>
      </TableCell>
    </TableRow>
  ));
};

const GrowingTable = (props) => {
  const [mode, setMode] = useState<TableGrowingPropTypes['mode']>(TableGrowingMode.Button);
  const [rows, setRows] = useState(createRows(1));
  const onLoadMore = () => {
    setRows((prev) => [...prev, ...createRows(prev.length + 1)]);
  };
  return (
    <>
      <Label showColon style={{ marginInlineEnd: '0.5rem' }}>
        Growing <code>mode</code>
      </Label>
      <SegmentedButton
        style={{ marginBlockEnd: '0.5rem' }}
        onSelectionChange={(e) => {
          setMode(e.detail.selectedItems[0].textContent as TableGrowingPropTypes['mode']);
        }}
      >
        <SegmentedButtonItem selected={mode === TableGrowingMode.Scroll}>Scroll</SegmentedButtonItem>
        <SegmentedButtonItem selected={mode === TableGrowingMode.Button}>Button</SegmentedButtonItem>
      </SegmentedButton>
      <div style={{ height: '250px', overflow: 'auto' }}>
        <Table {...props} features={<TableGrowing onLoadMore={onLoadMore} mode={mode} />}>
          {rows}
        </Table>
      </div>
    </>
  );
};

```

--------------------------------

### Importing Assets (i18n, Theming, CLDR) in React

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/CLAUDE.md

Essential assets like translations, theme switching, and CLDR locale data must be imported. Use the standard installation for all assets or a minimal installation if @ui5/webcomponents-fiori is not used.

```tsx
// Standard installation (includes fiori package assets)
import '@ui5/webcomponents-react/dist/Assets.js';

// Minimal installation (without @ui5/webcomponents-fiori)
import '@ui5/webcomponents/dist/Assets.js';
import '@ui5/webcomponents-react/dist/json-imports/i18n.js';
```

--------------------------------

### Import Device Utilities

Source: https://github.com/ui5/webcomponents-react/blob/main/docs/knowledge-base/Public-Utils.mdx

Import the Device utility module to access environment detection and event listeners.

```javascript
import * as Device from '@ui5/webcomponents-react-base/Device';
```

--------------------------------

### ListItemGroup Subcomponent

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/List/List.mdx

Documentation and example for the ListItemGroup subcomponent.

```APIDOC
## ListItemGroup

### Description
Represents a group of list items within a UI5 list, used for organizing content.

### Endpoint
N/A (Subcomponent Documentation)

### Request Example
```jsx
<Canvas of={ComponentStories.ListItemGroupStory} />
```

### Parameters
#### Path Parameters
- **metaOf** (object) - Required - Metadata for the component stories.
- **of** (object) - Required - The ListItemGroup component definition.
```

--------------------------------

### ListItemCustom Subcomponent

Source: https://github.com/ui5/webcomponents-react/blob/main/packages/main/src/webComponents/List/List.mdx

Documentation and example for the ListItemCustom subcomponent.

```APIDOC
## ListItemCustom

### Description
Represents a custom list item within a UI5 list, allowing for more flexible content.

### Endpoint
N/A (Subcomponent Documentation)

### Request Example
```jsx
<Canvas of={ComponentStories.ListItemCustomStory} />
```

### Parameters
#### Path Parameters
- **metaOf** (object) - Required - Metadata for the component stories.
- **of** (object) - Required - The ListItemCustom component definition.
```