diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index 157d0e5429c..e2a8a86c9d2 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -53,6 +53,7 @@ export * from './dropdownlist/index';
 export * from './dropdowntree/index';
 export * from './maskedtextbox/index';
 export * from './multiselect/index';
+export * from './multiselecttree/index';
 export * from './numerictextbox/index';
 // export * from './rating/index';
 export * from './searchbox/index';
diff --git a/packages/html/src/multiselecttree/index.ts b/packages/html/src/multiselecttree/index.ts
new file mode 100644
index 00000000000..3ceb0134a7b
--- /dev/null
+++ b/packages/html/src/multiselecttree/index.ts
@@ -0,0 +1 @@
+export * from './multiselecttree.spec';
diff --git a/packages/html/src/multiselecttree/multiselecttree.spec.tsx b/packages/html/src/multiselecttree/multiselecttree.spec.tsx
new file mode 100644
index 00000000000..499b8e19e91
--- /dev/null
+++ b/packages/html/src/multiselecttree/multiselecttree.spec.tsx
@@ -0,0 +1,150 @@
+import { classNames, States, Size, Roundness, FillMode } from '../utils';
+import {
+    Input,
+    InputClearValue,
+    InputLoadingIcon,
+    InputPrefix,
+    InputSuffix,
+    InputValidationIcon
+} from '../input';
+import { Button } from '../button';
+import { ChipList } from '../chip';
+import { Popup } from '../popup';
+
+export const MULTISELECTTREE_CLASSNAME = `k-multiselecttree`;
+
+const states = [
+    States.hover,
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.required,
+    States.disabled,
+    States.loading,
+    States.readonly
+];
+
+const options = {
+    size: [ Size.small, Size.medium, Size.large ],
+    rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],
+    fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline ],
+};
+
+const defaultProps = {
+    size: Input.defaultProps.size,
+    rounded: Input.defaultProps.rounded,
+    fillMode: Input.defaultProps.fillMode
+};
+
+export type KendoMultiSelectTreeOptions = {
+    size?: (typeof options.size)[number] | null;
+    rounded?: (typeof options.rounded)[number] | null;
+    fillMode?: (typeof options.fillMode)[number] | null;
+};
+
+export type KendoMultiSelectTreeProps = KendoMultiSelectTreeOptions & {
+    prefix?: JSX.Element;
+    suffix?: JSX.Element;
+    type?: string;
+    placeholder?: string;
+    tags?: JSX.Element;
+    popup?: JSX.Element;
+    showArrowButton?: boolean;
+    opened?: boolean;
+};
+
+export type KendoMultiSelectTreeState = { [K in (typeof states)[number]]?: boolean };
+
+export const MultiSelectTree = (
+    props: KendoMultiSelectTreeProps &
+        KendoMultiSelectTreeState &
+        React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        prefix,
+        suffix,
+        placeholder,
+        tags,
+        popup,
+        size,
+        rounded,
+        fillMode,
+        showArrowButton,
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        loading,
+        disabled,
+        readonly,
+        opened,
+        ...other
+    } = props;
+
+
+    return (
+        <>
+            <Input
+                {...other}
+                size={size}
+                rounded={rounded}
+                fillMode={fillMode}
+                hover={hover}
+                focus={focus}
+                valid={valid}
+                invalid={invalid}
+                required={required}
+                loading={loading}
+                disabled={disabled}
+                readonly={readonly}
+                className={classNames(props.className, MULTISELECTTREE_CLASSNAME)}
+            >
+                <InputPrefix>{prefix}</InputPrefix>
+                <ChipList size={size} className="k-input-values">
+                    <>
+                        {tags}
+                    </>
+                </ChipList>
+                <span className="k-input-inner">
+                    <span className="k-input-value-text">{placeholder}</span>
+                </span>
+                <InputValidationIcon
+                    valid={valid}
+                    invalid={invalid}
+                    loading={loading}
+                    disabled={disabled} />
+                <InputLoadingIcon
+                    loading={loading}
+                    disabled={disabled} />
+                <InputClearValue
+                    loading={loading}
+                    disabled={disabled}
+                    readonly={readonly}
+                    value={tags ? 'value' : ''} />
+                <InputSuffix>{suffix}</InputSuffix>
+                {showArrowButton && (
+                    <Button
+                        className="k-input-button"
+                        icon="caret-alt-down"
+                        rounded={null}
+                        size={size}
+                        fillMode={fillMode}
+                    />
+                )}
+            </Input>
+            { opened && popup &&
+                <Popup className="k-multiselecttree-popup">
+                    {popup}
+                </Popup>
+            }
+        </>
+    );
+};
+
+MultiSelectTree.states = states;
+MultiSelectTree.options = options;
+MultiSelectTree.className = MULTISELECTTREE_CLASSNAME;
+MultiSelectTree.defaultProps = defaultProps;
+
+export default MultiSelectTree;
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-flat.html b/packages/html/src/multiselecttree/tests/multiselecttree-flat.html
new file mode 100644
index 00000000000..d86b36a0a8e
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-flat.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="k-no-animations">
+<head>
+    <title>MultiSelectTree Flat</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
+    <link rel="stylesheet" href="/packages/html/assets/styles.css"/>
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <script src="/packages/html/dist/multiselecttree/tests/multiselecttree-flat.js"></script>
+</body>
+</html>
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-flat.tsx b/packages/html/src/multiselecttree/tests/multiselecttree-flat.tsx
new file mode 100644
index 00000000000..bed3568cefe
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-flat.tsx
@@ -0,0 +1,179 @@
+import ReactDOM from 'react-dom/client';
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree } from '../../multiselecttree';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        grid-template-columns: 160px repeat(2, 300px);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>MultiSelectTree Flat</span>
+            <span>MultiSelectTree Flat RTL</span>
+
+            <div>Empty</div>
+            <div>
+                <MultiSelectTree fillMode="flat" placeholder="MultiSelectTree..." />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat" placeholder="MultiSelectTree..." />
+            </div>
+
+            <div>Arrow button</div>
+            <div>
+                <MultiSelectTree fillMode="flat" showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat" showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+
+            <div>Normal</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+
+            <div>Hover</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+
+            <div>Focus</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+
+            <div>Disabled</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+
+            <div>Invalid</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+
+            <div>Invalid + Focus</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+
+            <div>Loading</div>
+            <div>
+                <MultiSelectTree fillMode="flat" placeholder="Loading..." loading/>
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat" placeholder="Loading..." loading />
+            </div>
+
+            <div>Multi Line + Overflow</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+        </div>
+    </>
+);
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-opened.html b/packages/html/src/multiselecttree/tests/multiselecttree-opened.html
new file mode 100644
index 00000000000..cea833d43ce
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-opened.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="k-no-animations">
+<head>
+    <title>MultiSelect Opened</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
+    <link rel="stylesheet" href="/packages/html/assets/styles.css"/>
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <script src="/packages/html/dist/multiselecttree/tests/multiselecttree-opened.js"></script>
+</body>
+</html>
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-opened.tsx b/packages/html/src/multiselecttree/tests/multiselecttree-opened.tsx
new file mode 100644
index 00000000000..f2c5dfc685a
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-opened.tsx
@@ -0,0 +1,119 @@
+import ReactDOM from 'react-dom/client';
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree } from '..';
+import { Checkbox } from '../../checkbox';
+import { Textbox } from '../../textbox';
+import { Icon } from '../../icon';
+import { Treeview, TreeviewGroup, TreeviewItem } from '../../treeview';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        grid-template-columns: 160px repeat(2, 300px);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>MultiSelectTree</span>
+            <span>MultiSelectTree RTL</span>
+
+            <div>Opened</div>
+            <div>
+                <MultiSelectTree opened
+                    tags={(
+                        <>
+                            <Chip text="Furniture" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                    popup={(
+                        <>
+                            <div className="k-list-filter">
+                                <Textbox
+                                    prefix={
+                                        <>
+                                            <Icon name="search" />
+                                        </>
+                                    }
+                                />
+                            </div>
+                            <div className="k-check-all">
+                                <Checkbox/>
+                                <span className="k-checkbox-label">
+                                    Check all
+                                </span>
+                            </div>
+                            <Treeview>
+                                <TreeviewItem text="Furniture" showCheckbox checked>
+                                    <TreeviewGroup>
+                                        <TreeviewItem text="Child 1" showCheckbox />
+                                        <TreeviewItem text="Child 2" showCheckbox />
+                                        <TreeviewItem text="Child 3" showCheckbox />
+                                    </TreeviewGroup>
+                                </TreeviewItem>
+                                <TreeviewItem text="Decor" showCheckbox>
+                                    <TreeviewGroup>
+                                        <TreeviewItem text="Child 1" showCheckbox />
+                                        <TreeviewItem text="Child 2" showCheckbox />
+                                        <TreeviewItem text="Child 3" showCheckbox />
+                                    </TreeviewGroup>
+                                </TreeviewItem>
+                            </Treeview>
+                        </>
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree opened
+                    tags={(
+                        <>
+                            <Chip text="Furniture" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                    popup={(
+                        <>
+                            <div className="k-list-filter">
+                                <Textbox
+                                    prefix={
+                                        <>
+                                            <Icon name="search" />
+                                        </>
+                                    }
+                                />
+                            </div>
+                            <div className="k-check-all">
+                                <Checkbox/>
+                                <span className="k-checkbox-label">
+                                    Check all
+                                </span>
+                            </div>
+                            <Treeview>
+                                <TreeviewItem text="Furniture" showCheckbox checked>
+                                    <TreeviewGroup>
+                                        <TreeviewItem text="Child 1" showCheckbox />
+                                        <TreeviewItem text="Child 2" showCheckbox />
+                                        <TreeviewItem text="Child 3" showCheckbox />
+                                    </TreeviewGroup>
+                                </TreeviewItem>
+                                <TreeviewItem text="Decor" showCheckbox>
+                                    <TreeviewGroup>
+                                        <TreeviewItem text="Child 1" showCheckbox />
+                                        <TreeviewItem text="Child 2" showCheckbox />
+                                        <TreeviewItem text="Child 3" showCheckbox />
+                                    </TreeviewGroup>
+                                </TreeviewItem>
+                            </Treeview>
+                        </>
+                    )}
+                />
+            </div>
+        </div>
+    </>
+);
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-outline.html b/packages/html/src/multiselecttree/tests/multiselecttree-outline.html
new file mode 100644
index 00000000000..6519b953968
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-outline.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="k-no-animations">
+<head>
+    <title>MultiSelectTree Outline</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
+    <link rel="stylesheet" href="/packages/html/assets/styles.css"/>
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <script src="/packages/html/dist/multiselecttree/tests/multiselecttree-outline.js"></script>
+</body>
+</html>
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-outline.tsx b/packages/html/src/multiselecttree/tests/multiselecttree-outline.tsx
new file mode 100644
index 00000000000..9e781bfd8c6
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-outline.tsx
@@ -0,0 +1,179 @@
+import ReactDOM from 'react-dom/client';
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree } from '../../multiselecttree';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        grid-template-columns: 160px repeat(2, 300px);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>MultiSelectTree Outline</span>
+            <span>MultiSelectTree Outline RTL</span>
+
+            <div>Empty</div>
+            <div>
+                <MultiSelectTree fillMode="outline" placeholder="MultiSelectTree..." />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline" placeholder="MultiSelectTree..." />
+            </div>
+
+            <div>Arrow button</div>
+            <div>
+                <MultiSelectTree fillMode="outline" showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline" showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+
+            <div>Normal</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+
+            <div>Hover</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+
+            <div>Focus</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+
+            <div>Disabled</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+
+            <div>Invalid</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+
+            <div>Invalid + Focus</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+
+            <div>Loading</div>
+            <div>
+                <MultiSelectTree fillMode="outline" placeholder="Loading..." loading/>
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline" placeholder="Loading..." loading />
+            </div>
+
+            <div>Multi Line + Overflow</div>
+            <div>
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="outline"
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+        </div>
+    </>
+);
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-size.html b/packages/html/src/multiselecttree/tests/multiselecttree-size.html
new file mode 100644
index 00000000000..03cfee7eade
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-size.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="k-no-animations">
+<head>
+    <title>MultiSelectTree Size</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
+    <link rel="stylesheet" href="/packages/html/assets/styles.css"/>
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <script src="/packages/html/dist/multiselecttree/tests/multiselecttree-size.js"></script>
+</body>
+</html>
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-size.tsx b/packages/html/src/multiselecttree/tests/multiselecttree-size.tsx
new file mode 100644
index 00000000000..04a1144489d
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-size.tsx
@@ -0,0 +1,54 @@
+import ReactDOM from 'react-dom/client';
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree } from '../../multiselecttree';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        max-width: 600px;
+        grid-template-columns: 120px repeat(1, 1fr);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+            <span>small</span>
+            <MultiSelectTree
+                size="small"
+                tags={(
+                    <>
+                        <Chip text="Chip Text" size="small" actions={ <ChipAction type="remove"/> } />
+                        <Chip text="Chip Text" size="small" actions={ <ChipAction type="remove"/> } />
+                    </>
+                )}
+            />
+
+            <span>medium</span>
+            <MultiSelectTree
+                size="medium"
+                tags={(
+                    <>
+                        <Chip text="Chip Text" size="medium" actions={ <ChipAction type="remove"/> } />
+                        <Chip text="Chip Text" size="medium" actions={ <ChipAction type="remove"/> } />
+                    </>
+                )}
+            />
+
+            <span>large</span>
+            <MultiSelectTree
+                size="large"
+                tags={(
+                    <>
+                        <Chip text="Chip Text" size="large" actions={ <ChipAction type="remove"/> } />
+                        <Chip text="Chip Text" size="large" actions={ <ChipAction type="remove"/> } />
+                    </>
+                )}
+            />
+        </div>
+    </>
+);
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree.html b/packages/html/src/multiselecttree/tests/multiselecttree.html
new file mode 100644
index 00000000000..e1051f2e7cf
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="k-no-animations">
+<head>
+    <title>MultiSelectTree</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
+    <link rel="stylesheet" href="/packages/html/assets/styles.css"/>
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <script src="/packages/html/dist/multiselecttree/tests/multiselecttree.js"></script>
+</body>
+</html>
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree.tsx b/packages/html/src/multiselecttree/tests/multiselecttree.tsx
new file mode 100644
index 00000000000..b02ac35d14b
--- /dev/null
+++ b/packages/html/src/multiselecttree/tests/multiselecttree.tsx
@@ -0,0 +1,179 @@
+import ReactDOM from 'react-dom/client';
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree } from '../../multiselecttree';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        grid-template-columns: 160px repeat(2, 300px);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>MultiSelectTree</span>
+            <span>MultiSelectTree RTL</span>
+
+            <div>Empty</div>
+            <div>
+                <MultiSelectTree placeholder="MultiSelectTree..." />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree placeholder="MultiSelectTree..." />
+            </div>
+
+            <div>Arrow button</div>
+            <div>
+                <MultiSelectTree showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+
+            <div>Normal</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+
+            <div>Hover</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+
+            <div>Focus</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+
+            <div>Disabled</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+
+            <div>Invalid</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+
+            <div>Invalid + Focus</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+
+            <div>Loading</div>
+            <div>
+                <MultiSelectTree placeholder="Loading..." loading/>
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree placeholder="Loading..." loading />
+            </div>
+
+            <div>Multi Line + Overflow</div>
+            <div>
+                <MultiSelectTree
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+        </div>
+    </>
+);