diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index 1661fa55a0..ba26af177b 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -104,6 +104,7 @@ export * from './grid/index';
export * from './listview/index';
export * from './spreadsheet/index';
export * from './pivotgrid/index';
+export * from './propertygrid/index';
export * from './treelist/index';
export * from './filter/index';
export * from './filemanager/index';
diff --git a/packages/html/src/propertygrid/index.ts b/packages/html/src/propertygrid/index.ts
new file mode 100644
index 0000000000..d78dec1781
--- /dev/null
+++ b/packages/html/src/propertygrid/index.ts
@@ -0,0 +1,3 @@
+export * from './propertygrid.spec';
+export * from './templates/propertygrid-normal';
+export * from './templates/propertygrid-with-preview';
diff --git a/packages/html/src/propertygrid/propertygrid.spec.tsx b/packages/html/src/propertygrid/propertygrid.spec.tsx
new file mode 100644
index 0000000000..64f551d57e
--- /dev/null
+++ b/packages/html/src/propertygrid/propertygrid.spec.tsx
@@ -0,0 +1,33 @@
+import { classNames } from '../misc';
+import { KendoGridProps } from '../grid';
+import { TreeList } from '../treelist';
+
+const PROPERTYGRID_CLASSNAME = 'k-property-grid';
+
+const states = [];
+
+const options = {};
+
+const defaultOptions = {};
+
+export const PropertyGrid = (
+ props: KendoGridProps &
+ React.HTMLAttributes
+) => (
+
+ {props.children}
+
+);
+
+PropertyGrid.states = states;
+PropertyGrid.options = options;
+PropertyGrid.className = PROPERTYGRID_CLASSNAME;
+PropertyGrid.defaultOptions = defaultOptions;
+
+export default PropertyGrid;
diff --git a/packages/html/src/propertygrid/templates/propertygrid-normal.tsx b/packages/html/src/propertygrid/templates/propertygrid-normal.tsx
new file mode 100644
index 0000000000..fa79bf9e94
--- /dev/null
+++ b/packages/html/src/propertygrid/templates/propertygrid-normal.tsx
@@ -0,0 +1,98 @@
+import { PropertyGrid } from "..";
+import { Button } from "../../button";
+import { DropdownList } from "../../dropdownlist";
+import { GridToolbar, GridContainer, GridContent, GridTable } from "../../grid";
+import { Icon } from "../../icon";
+import { TableTbody, TableRow, TableTd } from "../../table";
+import { Textbox } from "../../textbox";
+
+export const PropertyGridNormal = ({ content, ...other }: any) => (
+
+ } placeholder="Search..." />
+
+
+
+
+ )}
+ {...other}
+ >
+
+ {content ||
+
+
+
+
+
+
+
+
+
+
+ size
+
+ medium
+
+
+
+
+ themeColor
+
+ base
+
+
+
+
+ fillMode
+
+ solid
+
+
+
+
+ rounded
+
+ medium
+
+
+
+
+ icon
+
+
+
+
+
+
+ font
+
+ Roboto 400
+
+
+
+
+
+ font-weight
+
+ 400
+
+
+
+
+
+ font-family
+
+ Roboto
+
+
+
+
+
+
+
+ }
+
+
+);
diff --git a/packages/html/src/propertygrid/templates/propertygrid-with-preview.tsx b/packages/html/src/propertygrid/templates/propertygrid-with-preview.tsx
new file mode 100644
index 0000000000..164ba6306e
--- /dev/null
+++ b/packages/html/src/propertygrid/templates/propertygrid-with-preview.tsx
@@ -0,0 +1,14 @@
+import { PropertyGridNormal } from "..";
+import { Button } from "../../button";
+import { Splitter, SplitterPane } from "../../splitter";
+
+export const PropertyGridWithPreview = ({ content, ...other }: any) => (
+
+
+
+
+
+
+
+
+);
diff --git a/packages/html/src/propertygrid/tests/propertygrid.tsx b/packages/html/src/propertygrid/tests/propertygrid.tsx
new file mode 100644
index 0000000000..95ab1b9ec8
--- /dev/null
+++ b/packages/html/src/propertygrid/tests/propertygrid.tsx
@@ -0,0 +1,18 @@
+import { PropertyGridWithPreview } from "..";
+
+const styles = `
+ .k-pane:nth-child(1) {
+ text-align: center;
+ margin-top: 10%;
+ }
+`;
+
+
+export default () => (
+ <>
+
+
+
+);