diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx
index 53274fb85..306ae3062 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx
@@ -8,7 +8,7 @@ export default function LinkExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Link Component."
       >
         <Example
           title={trans("componentDoc.default")}
@@ -25,12 +25,123 @@ export default function LinkExample() {
           config={{ text: trans("componentDoc.link"), disabled: true }}
           compFactory={LinkComp}
         />
+        <Example
+          title="Hiding the Link component"
+          config={{ text: trans("componentDoc.link"), hidden: true }}
+          compFactory={LinkComp}
+        />
       </ExampleGroup>
-      <ExampleGroup title={trans("componentDoc.style")}>
+
+      <ExampleGroup 
+        title="Layout Options"
+        description="The Following Examples Show the Layout Options of the Link Component."
+      >
+        <Example
+          title="Prefix Icon"
+          config={{
+            prefixIcon: "/icon:solid/arrow-down-wide-short",
+          }}
+          compFactory={LinkComp}
+        />
+        <Example
+          title="Suffix Icon"
+          config={{
+            suffixIcon: "/icon:solid/arrow-up-wide-short",
+          }}
+          compFactory={LinkComp}
+        />
+        <Example
+          title="Prefix & Suffix Icon"
+          config={{
+            prefixIcon: "/icon:solid/arrow-down-wide-short",
+            suffixIcon: "/icon:solid/arrow-up-wide-short",
+          }}
+          compFactory={LinkComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the Link Component."
+      >
+        <Example
+          title="Background Color, Border Radius,Style,Width,Color"
+          config={{
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "borderStyle": "solid",
+              "hoverText": "#36B389",
+              "activeText": "#222222",
+            },
+          }}
+          compFactory={LinkComp}
+        />
+        <Example
+          title="Margin & Padding"
+          config={{
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "margin": "10px",
+              "padding": "10px",
+              "borderStyle": "dashed",
+            },
+          }}
+          compFactory={LinkComp}
+        />
+        <Example
+          title="Rotation - 90deg"
+          config={{
+            style: {
+              "rotation": "90deg",
+            },
+          }}
+          compFactory={LinkComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Link Component."
+      >
+        <Example
+          title="Bounce Animation"
+          config={{
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite",
+            },
+          }}
+          compFactory={LinkComp}
+        />
+        <Example
+          title="Swing Animation"
+          config={{
+            animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite",
+            },
+          }}
+          compFactory={LinkComp}
+        />
         <Example
-          title={trans("componentDoc.customAppearance")}
+          title="Tada Animation"
           config={{
-            style: { color: "#A7392F" },
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite",
+            },
           }}
           compFactory={LinkComp}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
index 22375e860..b7547a974 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
@@ -45,6 +45,15 @@ export default function CalendarExample() {
           }}
           compFactory={ChartCompWithDefault}
         />
+        <Example
+          title="Non-Editable - New Events can't be added to a Calendar"
+          width={700}
+          height={600}
+          config={{
+            editable: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
         <Example
           title="Hiding Event Times"
           width={700}
@@ -169,6 +178,172 @@ export default function CalendarExample() {
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties of the Calendar Component."
+      >
+        <Example
+          title="Background Color"
+          width={700}
+          height={600}
+          config={{
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Border Properties : Color and Radius"
+          width={700}
+          height={600}
+          config={{
+            style: {
+              "border": "#053AF9",
+              "radius": "10px",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Text Color"
+          width={700}
+          height={600}
+          config={{
+            style: {
+              "text": "#EF0404",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Button Background Color & Text Color"
+          width={700}
+          height={600}
+          config={{
+            style: {
+              "headerBtnBackground": "#36B389",
+              "btnText": "#080808",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Color"
+          width={700}
+          height={600}
+          config={{
+            style: {
+              "title": "#FFA608",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Selected Background Color - Select any time slot to see the Color"
+          width={700}
+          height={600}
+          config={{
+            style: {
+              "selectBackground": "#FFA608",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Modal Style"
+        description="The Following Examples Show the different Styling properties on the Modal of the Calendar Component."
+      >
+        <Example
+          title="Background Color"
+          width={700}
+          height={600}
+          config={{
+            modalStyle: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Border Properties - Color, Width & Style"
+          width={700}
+          height={600}
+          config={{
+            modalStyle: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#053CFF",
+              "borderWidth": "2px",
+              "borderStyle": "dashed",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Input Text Color & Input fields Background Color"
+          width={700}
+          height={600}
+          config={{
+            modalStyle: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "text": "#FFFFFF",
+              "labelBackground": "#0702F2"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different Animation Styles on the Calendar Component."
+      >
+        <Example
+          title="Bounce Animation"
+          width={700}
+          height={600}
+          config={{
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Swing Animation"
+          width={700}
+          height={600}
+          config={{
+            animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Tada Animation"
+          width={700}
+          height={600}
+          config={{
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
     </>
   );
 }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
index eac134170..100dc105f 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
@@ -143,6 +143,77 @@ export default function GanttChartExample() {
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties of the Component."
+      >
+        <Example
+          title="Gantt Chart Styles"
+          width={1000}
+          config={{
+            ganttChartStyle: {
+              "textSize": "15px",
+              "fontFamily": "Courier New",
+              "textColor": "#DA0303",
+              "barBackgroundColor": "#8D8D8E",
+              "barProgressColor": "#06EA9B",
+              "arrowColor": "#FC6B01",
+              "radius": "10px",
+              "todayColor": "#F2AB2E",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+         <Example
+          title="Legend Header Styles"
+          width={1000}
+          config={{
+            headerHeight: "50",
+            legendWidth: "400px",
+            legendHeaderStyle: {
+              "textSize": "20px",
+              "fontFamily": "Verdana",
+              "textColor": "#FFFFFF",
+              "headerBackground": "#36B389",
+              "padding": "10px",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+
+        <Example
+          title="Legend Styles"
+          width={1000}
+          config={{
+            legendWidth: "500px",
+            legendStyle: {
+              "textSize": "20px",
+              "fontFamily": "Courier New",
+              "textColor": "#AE8D1C",
+              "headerBackground": "#00FFFF",
+              "padding": "20px"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+         <Example
+          title="Tooltip Styles - Hover over individual Task to view the Tooltip"
+          width={1000}
+          config={{
+            tooltipStyle: {
+              "textSize": "20px",
+              "textColor": "#85878C",
+              "headerBackground": "#FFF6E6",
+              "padding": "20px",
+              "borderColor": "#707278",
+              "borderWidth": "3px",
+              "radius": "20px"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
     </>
   );
 }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
index 43d87a45d..3583210b7 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
@@ -170,6 +170,44 @@ const stageGuageOption = {
   ]
 };
 
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "dashed",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
+
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
+
+const labelStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#020101",
+  chartTextColor: "#FFFFFF",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
+const legendStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFD701",
+  chartTextColor: "#7A7A7B",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
 export default function GaugeChartExample() {
   return (
     <>
@@ -438,6 +476,70 @@ export default function GaugeChartExample() {
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Gauge Chart Component."
+      >
+        <Example
+          title="Chart Styling - Background Color, Box Shadow, Border"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            chartStyle: chartStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            titleStyle: titleStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Label Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            labelStyle: labelStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Lagend Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            legendStyle: legendStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Axis Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            axisLabelStyle: {
+              "chartTextColor": "#FF8A39",
+              "chartTextSize": "20px",
+              "chartTextWeight": "bold",
+              "chartFontFamily": "Courier New",
+              "chartShadowColor": "#222222",
+              "chartBoxShadow": "2px 2px 2px"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
index f7fd46951..a0038a53e 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
@@ -6,6 +6,8 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["hillchart"].comp;
 
+const data = "[\n  {\n    \"id\": 1,\n    \"color\": \"gray\",\n    \"description\": \"Validation: Sales and Marketing Strategy\",\n    \"x\": 15,\n    \"size\": 15\n  },\n  {\n    \"id\": 2,\n    \"color\": \"maroon\",\n    \"description\": \"Improvement & Renewals\",\n    \"x\": 80,\n    \"size\": 10\n  },\n  {\n    \"id\": 6,\n    \"color\": \"maroon\",\n    \"description\": \"Track & Measurement\",\n    \"x\": 70,\n    \"size\": 10\n  },\n  {\n    \"id\": 3,\n    \"color\": \"maroon\",\n    \"description\": \"Salesforce Integration\",\n    \"x\": 25,\n    \"size\": 10\n  },\n  {\n    \"id\": 4,\n    \"color\": \"cyan\",\n    \"description\": \"Marketing Tools integration\",\n    \"x\": 35,\n    \"size\": 10\n  },\n  {\n    \"id\": 5,\n    \"color\": \"yellow\",\n    \"description\": \"Execution\",\n    \"x\": 50,\n    \"size\": 20\n  }\n]";
+
 export default function HillChartExample() {
   return (
     <>
@@ -21,6 +23,75 @@ export default function HillChartExample() {
           }}
           compFactory={ChartCompWithDefault}
         />
+        <Example
+          title="Hill Chart with Custom Data"
+          hideSettings={true}
+          width={700}
+          config={{
+            data: data,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties of the Hill Chart Component."
+      >
+        <Example
+          title="Background Color"
+          hideSettings={true}
+          width={700}
+          config={{
+            data: data,
+            styles: {
+              "backgroundColor": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Border Properties : Color, Width & Radius"
+          hideSettings={true}
+          width={700}
+          config={{
+            data: data,
+            styles: {
+              "border": "#053EFF",
+              "radius": "40px",
+              "borderWidth": "3px",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Margin & Padding"
+          hideSettings={true}
+          width={700}
+          config={{
+            data: data,
+            styles: {
+              "border": "#053EFF",
+              "radius": "40px",
+              "borderWidth": "3px",
+              "margin": "10px",
+              "padding": "25px",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Text Size"
+          hideSettings={true}
+          width={700}
+          config={{
+            data: data,
+            styles: {
+              "textSize": "30px",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx
index f7fb4d23c..1e12ad842 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx
@@ -421,17 +421,3038 @@ const container = {
 export default function CollapsibleContainerExample() {
   return (
     <>
+
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
         description="The Following Examples Show the Basic Usage of the Collapsiable Container Component."
       >
         <Example
-          title="Default Container"
+          title="Default Collapsible Container"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Custom Collapsible Container"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: container,
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Hiding Collapsible Container"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: container,
+            hidden: true,
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Disabling Collapsible Container"
           hideSettings={true}
           height={500}
           width={1000}
           config={{
             container: container,
+            disabled: true,
+          }}
+          compFactory={ContainerComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Layout Options"
+        description="The Following Examples Show the different Layout Options of the Collapsiable Container Component."
+      >
+        <Example
+          title="Show Header - False"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: {
+                "header": {
+                    "layout": {
+                        "fedaa62": {
+                            "i": "fedaa62",
+                            "h": 5,
+                            "w": 6,
+                            "x": 0,
+                            "y": 0
+                        },
+                        "5661db3a": {
+                            "i": "5661db3a",
+                            "h": 5,
+                            "w": 10,
+                            "x": 14,
+                            "y": 0
+                        }
+                    },
+                    "items": {
+                        "fedaa62": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "## Personal Details",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "left",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "0",
+                                    "lineHeight": "18px",
+                                    "links": "#3377FF"
+                                },
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "text6"
+                        },
+                        "5661db3a": {
+                            "compType": "toggleButton",
+                            "comp": {
+                                "value": "true",
+                                "showText": false,
+                                "trueText": "Hide",
+                                "falseText": "Show",
+                                "trueIcon": "/icon:solid/AngleUp",
+                                "falseIcon": "/icon:solid/AngleDown",
+                                "iconPosition": "right",
+                                "alignment": "right",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "1px",
+                                    "lineHeight": "18px"
+                                },
+                                "showBorder": false,
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "toggleButton3"
+                        }
+                    }
+                },
+                "body": {
+                    "0": {
+                        "view": {
+                            "layout": {
+                                "c93dc520": {
+                                    "i": "c93dc520",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 0,
+                                    "pos": 0
+                                },
+                                "54dd6cc": {
+                                    "i": "54dd6cc",
+                                    "h": 10,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0,
+                                    "pos": 5
+                                },
+                                "aa36926a": {
+                                    "i": "aa36926a",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 7,
+                                    "pos": 1
+                                },
+                                "fc179ca5": {
+                                    "i": "fc179ca5",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 14,
+                                    "pos": 4
+                                },
+                                "99d1503e": {
+                                    "i": "99d1503e",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 14,
+                                    "pos": 6
+                                }
+                            },
+                            "items": {
+                                "c93dc520": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Full Name",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Full name",
+                                        "required": true,
+                                        "validationType": "Text",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/file-lines",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input1"
+                                },
+                                "aa36926a": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Email",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Email Address",
+                                        "required": true,
+                                        "validationType": "Email",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/inbox",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input2"
+                                },
+                                "54dd6cc": {
+                                    "compType": "radio",
+                                    "comp": {
+                                        "defaultValue": "1",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Gender",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "options": {
+                                            "optionType": "manual",
+                                            "manual": {
+                                                "manual": [
+                                                    {
+                                                        "value": "1",
+                                                        "label": "Male"
+                                                    },
+                                                    {
+                                                        "value": "2",
+                                                        "label": "Female"
+                                                    }
+                                                ]
+                                            },
+                                            "mapData": {
+                                                "data": "[]"
+                                            }
+                                        },
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "layout": "horizontal",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "staticText": "#222222",
+                                            "textSize": "14px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "checkedBackground": "#3377FF",
+                                            "uncheckedBorder": "#D7D9E0",
+                                            "checkedBorder": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "radio1"
+                                },
+                                "fc179ca5": {
+                                    "compType": "date",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "userTimeZone": "Europe/Madrid",
+                                        "label": {
+                                            "text": "DOB",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Select Date",
+                                        "inputFormat": "YYYY-MM-DD",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px"
+                                        },
+                                        "suffixIcon": "/icon:regular/calendar",
+                                        "minDate": "1960-01-01",
+                                        "maxDate": "2010-12-31",
+                                        "inputFieldStyle": {
+                                            "border": "#D7D9E0",
+                                            "radius": "4px",
+                                            "text": "#222222",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "timeZone": "Europe/Madrid",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "date1"
+                                },
+                                "99d1503e": {
+                                    "compType": "numberInput",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "placeholder": "+449827222541",
+                                        "label": {
+                                            "text": "Phone #",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "formatter": "standard",
+                                        "step": "",
+                                        "controls": false,
+                                        "thousandsSeparator": false,
+                                        "prefixText": "",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "numberInput1"
+                                }
+                            }
+                        }
+                    }
+                },
+                "footer": {
+                    "layout": {}
+                },
+                "showHeader": false,
+                "showBody": true,
+                "autoHeight": "auto",
+                "showVerticalScrollbar": false,
+                "horizontalGridCells": 24,
+                "scrollbars": false,
+                "style": {
+                    "border": "#D7D9E0",
+                    "background": "#FFFFFF",
+                    "radius": "4px",
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "margin": "3px",
+                    "padding": "3px"
+                },
+                "appliedThemeId": "default-theme-id"
+            },
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Show Body - False"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: {
+                "header": {
+                    "layout": {
+                        "fedaa62": {
+                            "i": "fedaa62",
+                            "h": 5,
+                            "w": 6,
+                            "x": 0,
+                            "y": 0
+                        },
+                        "5661db3a": {
+                            "i": "5661db3a",
+                            "h": 5,
+                            "w": 10,
+                            "x": 14,
+                            "y": 0
+                        }
+                    },
+                    "items": {
+                        "fedaa62": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "## Personal Details",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "left",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "0",
+                                    "lineHeight": "18px",
+                                    "links": "#3377FF"
+                                },
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "text6"
+                        },
+                        "5661db3a": {
+                            "compType": "toggleButton",
+                            "comp": {
+                                "value": "true",
+                                "showText": false,
+                                "trueText": "Hide",
+                                "falseText": "Show",
+                                "trueIcon": "/icon:solid/AngleUp",
+                                "falseIcon": "/icon:solid/AngleDown",
+                                "iconPosition": "right",
+                                "alignment": "right",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "1px",
+                                    "lineHeight": "18px"
+                                },
+                                "showBorder": false,
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "toggleButton3"
+                        }
+                    }
+                },
+                "body": {
+                    "0": {
+                        "view": {
+                            "layout": {
+                                "c93dc520": {
+                                    "i": "c93dc520",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 0,
+                                    "pos": 0
+                                },
+                                "54dd6cc": {
+                                    "i": "54dd6cc",
+                                    "h": 10,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0,
+                                    "pos": 5
+                                },
+                                "aa36926a": {
+                                    "i": "aa36926a",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 7,
+                                    "pos": 1
+                                },
+                                "fc179ca5": {
+                                    "i": "fc179ca5",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 14,
+                                    "pos": 4
+                                },
+                                "99d1503e": {
+                                    "i": "99d1503e",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 14,
+                                    "pos": 6
+                                }
+                            },
+                            "items": {
+                                "c93dc520": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Full Name",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Full name",
+                                        "required": true,
+                                        "validationType": "Text",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/file-lines",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input1"
+                                },
+                                "aa36926a": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Email",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Email Address",
+                                        "required": true,
+                                        "validationType": "Email",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/inbox",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input2"
+                                },
+                                "54dd6cc": {
+                                    "compType": "radio",
+                                    "comp": {
+                                        "defaultValue": "1",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Gender",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "options": {
+                                            "optionType": "manual",
+                                            "manual": {
+                                                "manual": [
+                                                    {
+                                                        "value": "1",
+                                                        "label": "Male"
+                                                    },
+                                                    {
+                                                        "value": "2",
+                                                        "label": "Female"
+                                                    }
+                                                ]
+                                            },
+                                            "mapData": {
+                                                "data": "[]"
+                                            }
+                                        },
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "layout": "horizontal",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "staticText": "#222222",
+                                            "textSize": "14px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "checkedBackground": "#3377FF",
+                                            "uncheckedBorder": "#D7D9E0",
+                                            "checkedBorder": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "radio1"
+                                },
+                                "fc179ca5": {
+                                    "compType": "date",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "userTimeZone": "Europe/Madrid",
+                                        "label": {
+                                            "text": "DOB",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Select Date",
+                                        "inputFormat": "YYYY-MM-DD",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px"
+                                        },
+                                        "suffixIcon": "/icon:regular/calendar",
+                                        "minDate": "1960-01-01",
+                                        "maxDate": "2010-12-31",
+                                        "inputFieldStyle": {
+                                            "border": "#D7D9E0",
+                                            "radius": "4px",
+                                            "text": "#222222",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "timeZone": "Europe/Madrid",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "date1"
+                                },
+                                "99d1503e": {
+                                    "compType": "numberInput",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "placeholder": "+449827222541",
+                                        "label": {
+                                            "text": "Phone #",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "formatter": "standard",
+                                        "step": "",
+                                        "controls": false,
+                                        "thousandsSeparator": false,
+                                        "prefixText": "",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "numberInput1"
+                                }
+                            }
+                        }
+                    }
+                },
+                "footer": {
+                    "layout": {}
+                },
+                "showHeader": true,
+                "showBody": false,
+                "autoHeight": "auto",
+                "showVerticalScrollbar": false,
+                "horizontalGridCells": 24,
+                "scrollbars": false,
+                "style": {
+                    "border": "#D7D9E0",
+                    "background": "#FFFFFF",
+                    "radius": "4px",
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "margin": "3px",
+                    "padding": "3px"
+                },
+                "appliedThemeId": "default-theme-id"
+            },
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Show Footer - True"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: {
+                "header": {
+                    "layout": {
+                        "fedaa62": {
+                            "i": "fedaa62",
+                            "h": 5,
+                            "w": 6,
+                            "x": 0,
+                            "y": 0
+                        },
+                        "5661db3a": {
+                            "i": "5661db3a",
+                            "h": 5,
+                            "w": 10,
+                            "x": 14,
+                            "y": 0
+                        }
+                    },
+                    "items": {
+                        "fedaa62": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "## Personal Details",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "left",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "0",
+                                    "lineHeight": "18px",
+                                    "links": "#3377FF"
+                                },
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "text6"
+                        },
+                        "5661db3a": {
+                            "compType": "toggleButton",
+                            "comp": {
+                                "value": "true",
+                                "showText": false,
+                                "trueText": "Hide",
+                                "falseText": "Show",
+                                "trueIcon": "/icon:solid/AngleUp",
+                                "falseIcon": "/icon:solid/AngleDown",
+                                "iconPosition": "right",
+                                "alignment": "right",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "1px",
+                                    "lineHeight": "18px"
+                                },
+                                "showBorder": false,
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "toggleButton3"
+                        }
+                    }
+                },
+                "body": {
+                    "0": {
+                        "view": {
+                            "layout": {
+                                "c93dc520": {
+                                    "i": "c93dc520",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 0,
+                                    "pos": 0
+                                },
+                                "54dd6cc": {
+                                    "i": "54dd6cc",
+                                    "h": 10,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0,
+                                    "pos": 5
+                                },
+                                "aa36926a": {
+                                    "i": "aa36926a",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 7,
+                                    "pos": 1
+                                },
+                                "fc179ca5": {
+                                    "i": "fc179ca5",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 14,
+                                    "pos": 4
+                                },
+                                "99d1503e": {
+                                    "i": "99d1503e",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 14,
+                                    "pos": 6
+                                }
+                            },
+                            "items": {
+                                "c93dc520": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Full Name",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Full name",
+                                        "required": true,
+                                        "validationType": "Text",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/file-lines",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input1"
+                                },
+                                "aa36926a": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Email",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Email Address",
+                                        "required": true,
+                                        "validationType": "Email",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/inbox",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input2"
+                                },
+                                "54dd6cc": {
+                                    "compType": "radio",
+                                    "comp": {
+                                        "defaultValue": "1",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Gender",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "options": {
+                                            "optionType": "manual",
+                                            "manual": {
+                                                "manual": [
+                                                    {
+                                                        "value": "1",
+                                                        "label": "Male"
+                                                    },
+                                                    {
+                                                        "value": "2",
+                                                        "label": "Female"
+                                                    }
+                                                ]
+                                            },
+                                            "mapData": {
+                                                "data": "[]"
+                                            }
+                                        },
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "layout": "horizontal",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "staticText": "#222222",
+                                            "textSize": "14px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "checkedBackground": "#3377FF",
+                                            "uncheckedBorder": "#D7D9E0",
+                                            "checkedBorder": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "radio1"
+                                },
+                                "fc179ca5": {
+                                    "compType": "date",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "userTimeZone": "Europe/Madrid",
+                                        "label": {
+                                            "text": "DOB",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Select Date",
+                                        "inputFormat": "YYYY-MM-DD",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px"
+                                        },
+                                        "suffixIcon": "/icon:regular/calendar",
+                                        "minDate": "1960-01-01",
+                                        "maxDate": "2010-12-31",
+                                        "inputFieldStyle": {
+                                            "border": "#D7D9E0",
+                                            "radius": "4px",
+                                            "text": "#222222",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "timeZone": "Europe/Madrid",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "date1"
+                                },
+                                "99d1503e": {
+                                    "compType": "numberInput",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "placeholder": "+449827222541",
+                                        "label": {
+                                            "text": "Phone #",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "formatter": "standard",
+                                        "step": "",
+                                        "controls": false,
+                                        "thousandsSeparator": false,
+                                        "prefixText": "",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "numberInput1"
+                                }
+                            }
+                        }
+                    }
+                },
+                "footer": {
+                    "layout": {}
+                },
+                "showHeader": true,
+                "showBody": true,
+                "showFooter": true,
+                "autoHeight": "auto",
+                "showVerticalScrollbar": false,
+                "horizontalGridCells": 24,
+                "scrollbars": false,
+                "style": {
+                    "border": "#D7D9E0",
+                    "background": "#FFFFFF",
+                    "radius": "4px",
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "margin": "3px",
+                    "padding": "3px"
+                },
+                "appliedThemeId": "default-theme-id"
+            },
+          }}
+          compFactory={ContainerComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling Properties of the Collapsiable Container Component."
+      >
+        <Example
+          title="Overall Styling"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: {
+                "header": {
+                    "layout": {
+                        "fedaa62": {
+                            "i": "fedaa62",
+                            "h": 5,
+                            "w": 6,
+                            "x": 0,
+                            "y": 0
+                        },
+                        "5661db3a": {
+                            "i": "5661db3a",
+                            "h": 5,
+                            "w": 10,
+                            "x": 14,
+                            "y": 0
+                        }
+                    },
+                    "items": {
+                        "fedaa62": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "## Personal Details",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "left",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "0",
+                                    "lineHeight": "18px",
+                                    "links": "#3377FF"
+                                },
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "text6"
+                        },
+                        "5661db3a": {
+                            "compType": "toggleButton",
+                            "comp": {
+                                "value": "true",
+                                "showText": false,
+                                "trueText": "Hide",
+                                "falseText": "Show",
+                                "trueIcon": "/icon:solid/AngleUp",
+                                "falseIcon": "/icon:solid/AngleDown",
+                                "iconPosition": "right",
+                                "alignment": "right",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "1px",
+                                    "lineHeight": "18px"
+                                },
+                                "showBorder": false,
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "toggleButton3"
+                        }
+                    }
+                },
+                "body": {
+                    "0": {
+                        "view": {
+                            "layout": {
+                                "c93dc520": {
+                                    "i": "c93dc520",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 0,
+                                    "pos": 0
+                                },
+                                "54dd6cc": {
+                                    "i": "54dd6cc",
+                                    "h": 10,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0,
+                                    "pos": 5
+                                },
+                                "aa36926a": {
+                                    "i": "aa36926a",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 7,
+                                    "pos": 1
+                                },
+                                "fc179ca5": {
+                                    "i": "fc179ca5",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 14,
+                                    "pos": 4
+                                },
+                                "99d1503e": {
+                                    "i": "99d1503e",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 14,
+                                    "pos": 6
+                                }
+                            },
+                            "items": {
+                                "c93dc520": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Full Name",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Full name",
+                                        "required": true,
+                                        "validationType": "Text",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/file-lines",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input1"
+                                },
+                                "aa36926a": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Email",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Email Address",
+                                        "required": true,
+                                        "validationType": "Email",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/inbox",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input2"
+                                },
+                                "54dd6cc": {
+                                    "compType": "radio",
+                                    "comp": {
+                                        "defaultValue": "1",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Gender",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "options": {
+                                            "optionType": "manual",
+                                            "manual": {
+                                                "manual": [
+                                                    {
+                                                        "value": "1",
+                                                        "label": "Male"
+                                                    },
+                                                    {
+                                                        "value": "2",
+                                                        "label": "Female"
+                                                    }
+                                                ]
+                                            },
+                                            "mapData": {
+                                                "data": "[]"
+                                            }
+                                        },
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "layout": "horizontal",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "staticText": "#222222",
+                                            "textSize": "14px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "checkedBackground": "#3377FF",
+                                            "uncheckedBorder": "#D7D9E0",
+                                            "checkedBorder": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "radio1"
+                                },
+                                "fc179ca5": {
+                                    "compType": "date",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "userTimeZone": "Europe/Madrid",
+                                        "label": {
+                                            "text": "DOB",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Select Date",
+                                        "inputFormat": "YYYY-MM-DD",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px"
+                                        },
+                                        "suffixIcon": "/icon:regular/calendar",
+                                        "minDate": "1960-01-01",
+                                        "maxDate": "2010-12-31",
+                                        "inputFieldStyle": {
+                                            "border": "#D7D9E0",
+                                            "radius": "4px",
+                                            "text": "#222222",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "timeZone": "Europe/Madrid",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "date1"
+                                },
+                                "99d1503e": {
+                                    "compType": "numberInput",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "placeholder": "+449827222541",
+                                        "label": {
+                                            "text": "Phone #",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "formatter": "standard",
+                                        "step": "",
+                                        "controls": false,
+                                        "thousandsSeparator": false,
+                                        "prefixText": "",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "numberInput1"
+                                }
+                            }
+                        }
+                    }
+                },
+                "footer": {
+                    "layout": {}
+                },
+                "showHeader": true,
+                "showBody": true,
+                "showFooter": true,
+                "autoHeight": "auto",
+                "showVerticalScrollbar": false,
+                "horizontalGridCells": 24,
+                "scrollbars": false,
+                "style": {
+                    "border": "#5589F2",
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "margin": "5px",
+                    "padding": "15px"
+                    },
+                "appliedThemeId": "default-theme-id"
+            },
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Header Styling"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: {
+                "header": {
+                    "layout": {
+                        "fedaa62": {
+                            "i": "fedaa62",
+                            "h": 5,
+                            "w": 6,
+                            "x": 0,
+                            "y": 0
+                        },
+                        "5661db3a": {
+                            "i": "5661db3a",
+                            "h": 5,
+                            "w": 10,
+                            "x": 14,
+                            "y": 0
+                        }
+                    },
+                    "items": {
+                        "fedaa62": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "## Personal Details",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "left",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "0",
+                                    "lineHeight": "18px",
+                                    "links": "#3377FF"
+                                },
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "text6"
+                        },
+                        "5661db3a": {
+                            "compType": "toggleButton",
+                            "comp": {
+                                "value": "true",
+                                "showText": false,
+                                "trueText": "Hide",
+                                "falseText": "Show",
+                                "trueIcon": "/icon:solid/AngleUp",
+                                "falseIcon": "/icon:solid/AngleDown",
+                                "iconPosition": "right",
+                                "alignment": "right",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "1px",
+                                    "lineHeight": "18px"
+                                },
+                                "showBorder": false,
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "toggleButton3"
+                        }
+                    }
+                },
+                "body": {
+                    "0": {
+                        "view": {
+                            "layout": {
+                                "c93dc520": {
+                                    "i": "c93dc520",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 0,
+                                    "pos": 0
+                                },
+                                "54dd6cc": {
+                                    "i": "54dd6cc",
+                                    "h": 10,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0,
+                                    "pos": 5
+                                },
+                                "aa36926a": {
+                                    "i": "aa36926a",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 7,
+                                    "pos": 1
+                                },
+                                "fc179ca5": {
+                                    "i": "fc179ca5",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 14,
+                                    "pos": 4
+                                },
+                                "99d1503e": {
+                                    "i": "99d1503e",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 14,
+                                    "pos": 6
+                                }
+                            },
+                            "items": {
+                                "c93dc520": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Full Name",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Full name",
+                                        "required": true,
+                                        "validationType": "Text",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/file-lines",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input1"
+                                },
+                                "aa36926a": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Email",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Email Address",
+                                        "required": true,
+                                        "validationType": "Email",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/inbox",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input2"
+                                },
+                                "54dd6cc": {
+                                    "compType": "radio",
+                                    "comp": {
+                                        "defaultValue": "1",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Gender",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "options": {
+                                            "optionType": "manual",
+                                            "manual": {
+                                                "manual": [
+                                                    {
+                                                        "value": "1",
+                                                        "label": "Male"
+                                                    },
+                                                    {
+                                                        "value": "2",
+                                                        "label": "Female"
+                                                    }
+                                                ]
+                                            },
+                                            "mapData": {
+                                                "data": "[]"
+                                            }
+                                        },
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "layout": "horizontal",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "staticText": "#222222",
+                                            "textSize": "14px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "checkedBackground": "#3377FF",
+                                            "uncheckedBorder": "#D7D9E0",
+                                            "checkedBorder": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "radio1"
+                                },
+                                "fc179ca5": {
+                                    "compType": "date",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "userTimeZone": "Europe/Madrid",
+                                        "label": {
+                                            "text": "DOB",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Select Date",
+                                        "inputFormat": "YYYY-MM-DD",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px"
+                                        },
+                                        "suffixIcon": "/icon:regular/calendar",
+                                        "minDate": "1960-01-01",
+                                        "maxDate": "2010-12-31",
+                                        "inputFieldStyle": {
+                                            "border": "#D7D9E0",
+                                            "radius": "4px",
+                                            "text": "#222222",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "timeZone": "Europe/Madrid",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "date1"
+                                },
+                                "99d1503e": {
+                                    "compType": "numberInput",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "placeholder": "+449827222541",
+                                        "label": {
+                                            "text": "Phone #",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "formatter": "standard",
+                                        "step": "",
+                                        "controls": false,
+                                        "thousandsSeparator": false,
+                                        "prefixText": "",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "numberInput1"
+                                }
+                            }
+                        }
+                    }
+                },
+                "footer": {
+                    "layout": {}
+                },
+                "showHeader": true,
+                "showBody": true,
+                "showFooter": true,
+                "autoHeight": "auto",
+                "showVerticalScrollbar": false,
+                "horizontalGridCells": 24,
+                "scrollbars": false,
+                "style": {
+                    "border": "#5589F2",
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "margin": "5px",
+                    "padding": "15px"
+                    },
+                "headerStyle": {
+                    "containerHeaderPadding": "20px",
+                    "headerBackground": "#E68E50"
+                },
+                "appliedThemeId": "default-theme-id"
+            },
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Body Styling"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: {
+                "header": {
+                    "layout": {
+                        "fedaa62": {
+                            "i": "fedaa62",
+                            "h": 5,
+                            "w": 6,
+                            "x": 0,
+                            "y": 0
+                        },
+                        "5661db3a": {
+                            "i": "5661db3a",
+                            "h": 5,
+                            "w": 10,
+                            "x": 14,
+                            "y": 0
+                        }
+                    },
+                    "items": {
+                        "fedaa62": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "## Personal Details",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "left",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "0",
+                                    "lineHeight": "18px",
+                                    "links": "#3377FF"
+                                },
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "text6"
+                        },
+                        "5661db3a": {
+                            "compType": "toggleButton",
+                            "comp": {
+                                "value": "true",
+                                "showText": false,
+                                "trueText": "Hide",
+                                "falseText": "Show",
+                                "trueIcon": "/icon:solid/AngleUp",
+                                "falseIcon": "/icon:solid/AngleDown",
+                                "iconPosition": "right",
+                                "alignment": "right",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "1px",
+                                    "lineHeight": "18px"
+                                },
+                                "showBorder": false,
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "toggleButton3"
+                        }
+                    }
+                },
+                "body": {
+                    "0": {
+                        "view": {
+                            "layout": {
+                                "c93dc520": {
+                                    "i": "c93dc520",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 0,
+                                    "pos": 0
+                                },
+                                "54dd6cc": {
+                                    "i": "54dd6cc",
+                                    "h": 10,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0,
+                                    "pos": 5
+                                },
+                                "aa36926a": {
+                                    "i": "aa36926a",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 7,
+                                    "pos": 1
+                                },
+                                "fc179ca5": {
+                                    "i": "fc179ca5",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 14,
+                                    "pos": 4
+                                },
+                                "99d1503e": {
+                                    "i": "99d1503e",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 14,
+                                    "pos": 6
+                                }
+                            },
+                            "items": {
+                                "c93dc520": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Full Name",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Full name",
+                                        "required": true,
+                                        "validationType": "Text",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/file-lines",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input1"
+                                },
+                                "aa36926a": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Email",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Email Address",
+                                        "required": true,
+                                        "validationType": "Email",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/inbox",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input2"
+                                },
+                                "54dd6cc": {
+                                    "compType": "radio",
+                                    "comp": {
+                                        "defaultValue": "1",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Gender",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "options": {
+                                            "optionType": "manual",
+                                            "manual": {
+                                                "manual": [
+                                                    {
+                                                        "value": "1",
+                                                        "label": "Male"
+                                                    },
+                                                    {
+                                                        "value": "2",
+                                                        "label": "Female"
+                                                    }
+                                                ]
+                                            },
+                                            "mapData": {
+                                                "data": "[]"
+                                            }
+                                        },
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "layout": "horizontal",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "staticText": "#222222",
+                                            "textSize": "14px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "checkedBackground": "#3377FF",
+                                            "uncheckedBorder": "#D7D9E0",
+                                            "checkedBorder": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "radio1"
+                                },
+                                "fc179ca5": {
+                                    "compType": "date",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "userTimeZone": "Europe/Madrid",
+                                        "label": {
+                                            "text": "DOB",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Select Date",
+                                        "inputFormat": "YYYY-MM-DD",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px"
+                                        },
+                                        "suffixIcon": "/icon:regular/calendar",
+                                        "minDate": "1960-01-01",
+                                        "maxDate": "2010-12-31",
+                                        "inputFieldStyle": {
+                                            "border": "#D7D9E0",
+                                            "radius": "4px",
+                                            "text": "#222222",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "timeZone": "Europe/Madrid",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "date1"
+                                },
+                                "99d1503e": {
+                                    "compType": "numberInput",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "placeholder": "+449827222541",
+                                        "label": {
+                                            "text": "Phone #",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "formatter": "standard",
+                                        "step": "",
+                                        "controls": false,
+                                        "thousandsSeparator": false,
+                                        "prefixText": "",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "numberInput1"
+                                }
+                            }
+                        }
+                    }
+                },
+                "footer": {
+                    "layout": {}
+                },
+                "showHeader": true,
+                "showBody": true,
+                "showFooter": true,
+                "autoHeight": "auto",
+                "showVerticalScrollbar": false,
+                "horizontalGridCells": 24,
+                "scrollbars": false,
+                "style": {
+                    "border": "#5589F2",
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "margin": "5px",
+                    },
+                "headerStyle": {
+                    "containerHeaderPadding": "20px",
+                    "headerBackground": "#E68E50"
+                },
+                "bodyStyle": {
+                    "containerBodyPadding": "20px",
+                    "background": "#F2DB0A"
+                },
+                "appliedThemeId": "default-theme-id"
+            },
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Footer Styling"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: {
+                "header": {
+                    "layout": {
+                        "fedaa62": {
+                            "i": "fedaa62",
+                            "h": 5,
+                            "w": 6,
+                            "x": 0,
+                            "y": 0
+                        },
+                        "5661db3a": {
+                            "i": "5661db3a",
+                            "h": 5,
+                            "w": 10,
+                            "x": 14,
+                            "y": 0
+                        }
+                    },
+                    "items": {
+                        "fedaa62": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "## Personal Details",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "left",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "0",
+                                    "lineHeight": "18px",
+                                    "links": "#3377FF"
+                                },
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "text6"
+                        },
+                        "5661db3a": {
+                            "compType": "toggleButton",
+                            "comp": {
+                                "value": "true",
+                                "showText": false,
+                                "trueText": "Hide",
+                                "falseText": "Show",
+                                "trueIcon": "/icon:solid/AngleUp",
+                                "falseIcon": "/icon:solid/AngleDown",
+                                "iconPosition": "right",
+                                "alignment": "right",
+                                "style": {
+                                    "background": "#F5F5F6",
+                                    "margin": "3px",
+                                    "padding": "3px",
+                                    "text": "#222222",
+                                    "textSize": "14px",
+                                    "border": "#D7D9E0",
+                                    "borderStyle": "solid",
+                                    "radius": "4px",
+                                    "borderWidth": "1px",
+                                    "lineHeight": "18px"
+                                },
+                                "showBorder": false,
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "default-theme-id",
+                                "version": "latest"
+                            },
+                            "name": "toggleButton3"
+                        }
+                    }
+                },
+                "body": {
+                    "0": {
+                        "view": {
+                            "layout": {
+                                "c93dc520": {
+                                    "i": "c93dc520",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 0,
+                                    "pos": 0
+                                },
+                                "54dd6cc": {
+                                    "i": "54dd6cc",
+                                    "h": 10,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0,
+                                    "pos": 5
+                                },
+                                "aa36926a": {
+                                    "i": "aa36926a",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 7,
+                                    "pos": 1
+                                },
+                                "fc179ca5": {
+                                    "i": "fc179ca5",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 14,
+                                    "pos": 4
+                                },
+                                "99d1503e": {
+                                    "i": "99d1503e",
+                                    "h": 7,
+                                    "w": 10,
+                                    "x": 0,
+                                    "y": 14,
+                                    "pos": 6
+                                }
+                            },
+                            "items": {
+                                "c93dc520": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Full Name",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Full name",
+                                        "required": true,
+                                        "validationType": "Text",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/file-lines",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input1"
+                                },
+                                "aa36926a": {
+                                    "compType": "input",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Email",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Email Address",
+                                        "required": true,
+                                        "validationType": "Email",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "prefixIcon": "/icon:solid/inbox",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "text": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "input2"
+                                },
+                                "54dd6cc": {
+                                    "compType": "radio",
+                                    "comp": {
+                                        "defaultValue": "1",
+                                        "value": "",
+                                        "label": {
+                                            "text": "Gender",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "options": {
+                                            "optionType": "manual",
+                                            "manual": {
+                                                "manual": [
+                                                    {
+                                                        "value": "1",
+                                                        "label": "Male"
+                                                    },
+                                                    {
+                                                        "value": "2",
+                                                        "label": "Female"
+                                                    }
+                                                ]
+                                            },
+                                            "mapData": {
+                                                "data": "[]"
+                                            }
+                                        },
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "layout": "horizontal",
+                                        "inputFieldStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "staticText": "#222222",
+                                            "textSize": "14px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "checkedBackground": "#3377FF",
+                                            "uncheckedBorder": "#D7D9E0",
+                                            "checkedBorder": "#3377FF"
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "radio1"
+                                },
+                                "fc179ca5": {
+                                    "compType": "date",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "userTimeZone": "Europe/Madrid",
+                                        "label": {
+                                            "text": "DOB",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "placeholder": "Select Date",
+                                        "inputFormat": "YYYY-MM-DD",
+                                        "style": {
+                                            "background": "#00000000",
+                                            "border": "#D7D9E0",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "radius": "4px",
+                                            "borderWidth": "0px",
+                                            "opacity": "1"
+                                        },
+                                        "labelStyle": {
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "label": "#222222",
+                                            "textSize": "14px",
+                                            "border": "#D7D9E0",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "0px"
+                                        },
+                                        "suffixIcon": "/icon:regular/calendar",
+                                        "minDate": "1960-01-01",
+                                        "maxDate": "2010-12-31",
+                                        "inputFieldStyle": {
+                                            "border": "#D7D9E0",
+                                            "radius": "4px",
+                                            "text": "#222222",
+                                            "margin": "3px",
+                                            "padding": "3px",
+                                            "borderStyle": "solid",
+                                            "borderWidth": "1px",
+                                            "accent": "#3377FF"
+                                        },
+                                        "timeZone": "Europe/Madrid",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "date1"
+                                },
+                                "99d1503e": {
+                                    "compType": "numberInput",
+                                    "comp": {
+                                        "defaultValue": "",
+                                        "value": "",
+                                        "placeholder": "+449827222541",
+                                        "label": {
+                                            "text": "Phone #",
+                                            "width": "33",
+                                            "widthUnit": "%",
+                                            "position": "row",
+                                            "align": "left"
+                                        },
+                                        "formatter": "standard",
+                                        "step": "",
+                                        "controls": false,
+                                        "thousandsSeparator": false,
+                                        "prefixText": "",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "default-theme-id",
+                                        "version": "latest"
+                                    },
+                                    "name": "numberInput1"
+                                }
+                            }
+                        }
+                    }
+                },
+                "footer": {
+                    "layout": {}
+                },
+                "showHeader": true,
+                "showBody": true,
+                "showFooter": true,
+                "autoHeight": "auto",
+                "showVerticalScrollbar": false,
+                "horizontalGridCells": 24,
+                "scrollbars": false,
+                "style": {
+                    "border": "#5589F2",
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "margin": "5px",
+                    },
+                "headerStyle": {
+                    "containerHeaderPadding": "20px",
+                    "headerBackground": "#E68E50"
+                },
+                "bodyStyle": {
+                    "containerBodyPadding": "20px",
+                    "background": "#F2DB0A"
+                },
+                "footerStyle": {
+                    "containerFooterPadding": "20px",
+                    "footerBackground": "#EA7B7B"
+                },
+                "appliedThemeId": "default-theme-id"
+            },
           }}
           compFactory={ContainerComp}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
index b86f4ce3b..0abac1936 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
@@ -1140,6 +1140,1025 @@ export default function ColumnLayoutExample() {
             compFactory={ColumnLayoutComp}
           />
         </ExampleGroup>
+
+        <ExampleGroup
+          title="Styling Properties"
+          description="The Following Examples Show the different Styling Properties of the Column Layout Component."
+        >
+            <Example
+                title="Style"
+                    hideSettings={true}
+                    width={1000}
+                    config={{
+                    containers: {
+                        "0": {
+                            "layout": {
+                                "164dcb77": {
+                                    "i": "164dcb77",
+                                    "h": 8,
+                                    "w": 19,
+                                    "x": 3,
+                                    "y": 4,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "164dcb77": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row1, Column1",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text1"
+                                }
+                            }
+                        },
+                        "1": {
+                            "layout": {
+                                "6e4f0687": {
+                                    "i": "6e4f0687",
+                                    "h": 6,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 5,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "6e4f0687": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row1, Column2",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text3"
+                                }
+                            }
+                        },
+                        "2": {
+                            "layout": {
+                                "b47baba7": {
+                                    "i": "b47baba7",
+                                    "h": 10,
+                                    "w": 18,
+                                    "x": 5,
+                                    "y": 4,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "b47baba7": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row1, Column3",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text2"
+                                }
+                            }
+                        },
+                        "3": {
+                            "layout": {
+                                "ce02a8ee": {
+                                    "i": "ce02a8ee",
+                                    "h": 8,
+                                    "w": 17,
+                                    "x": 2,
+                                    "y": 16,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "ce02a8ee": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row2, Column1",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text4"
+                                }
+                            }
+                        },
+                        "4": {
+                            "layout": {
+                                "7ff66f36": {
+                                    "i": "7ff66f36",
+                                    "h": 6,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 16,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "7ff66f36": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row2, Column2",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text5"
+                                }
+                            }
+                        },
+                        "5": {
+                            "layout": {
+                                "8e25033d": {
+                                    "i": "8e25033d",
+                                    "h": 8,
+                                    "w": 19,
+                                    "x": 3,
+                                    "y": 16,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "8e25033d": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row2, Column3",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text6"
+                                }
+                            }
+                        },
+                        "6": {
+                            "layout": {
+                                "e92230c": {
+                                    "i": "e92230c",
+                                    "h": 8,
+                                    "w": 19,
+                                    "x": 2,
+                                    "y": 3,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "e92230c": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row3, Column1",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text7"
+                                }
+                            }
+                        },
+                        "7": {
+                            "layout": {
+                                "5e09b262": {
+                                    "i": "5e09b262",
+                                    "h": 6,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 4,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "5e09b262": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row3, Column2",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text8"
+                                }
+                            }
+                        },
+                        "8": {
+                            "layout": {
+                                "1bc7c61f": {
+                                    "i": "1bc7c61f",
+                                    "h": 8,
+                                    "w": 20,
+                                    "x": 1,
+                                    "y": 2,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "1bc7c61f": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row3, Column3",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text9"
+                                }
+                            }
+                        }
+                    },
+                    columns: {
+                        "manual": [
+                            {
+                                "id": 0,
+                                "label": "Column1",
+                                "key": "Column1",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 1,
+                                "label": "Column2",
+                                "key": "Column2",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 2,
+                                "label": "Add Column1",
+                                "key": "Add Column1",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 3,
+                                "label": "Add Column2",
+                                "key": "Add Column2",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 4,
+                                "label": "Add Column3",
+                                "key": "Add Column3",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 5,
+                                "label": "Add Column4",
+                                "key": "Add Column4",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 6,
+                                "label": "Add Column5",
+                                "key": "Add Column5",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 7,
+                                "label": "Add Column6",
+                                "key": "Add Column6",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 8,
+                                "label": "Add Column7",
+                                "key": "Add Column7",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            }
+                        ]
+                    },
+                    templateRows: "1fr 3fr 1fr",
+                    templateColumns: "1fr 3fr 1fr",
+                    style: {
+                        "border": "#EBFF04",
+                        "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                        "radius": "20px",
+                        "borderWidth": "5px",
+                        "margin": "10px",
+                        "padding": "20px",
+                        },
+                    matchColumnsHeight: true,
+                    }}
+                    compFactory={ColumnLayoutComp}
+            />
+            <Example
+                title="Style"
+                    hideSettings={true}
+                    width={1000}
+                    config={{
+                    containers: {
+                        "0": {
+                            "layout": {
+                                "164dcb77": {
+                                    "i": "164dcb77",
+                                    "h": 8,
+                                    "w": 19,
+                                    "x": 3,
+                                    "y": 4,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "164dcb77": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row1, Column1",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text1"
+                                }
+                            }
+                        },
+                        "1": {
+                            "layout": {
+                                "6e4f0687": {
+                                    "i": "6e4f0687",
+                                    "h": 6,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 5,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "6e4f0687": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row1, Column2",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text3"
+                                }
+                            }
+                        },
+                        "2": {
+                            "layout": {
+                                "b47baba7": {
+                                    "i": "b47baba7",
+                                    "h": 10,
+                                    "w": 18,
+                                    "x": 5,
+                                    "y": 4,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "b47baba7": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row1, Column3",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text2"
+                                }
+                            }
+                        },
+                        "3": {
+                            "layout": {
+                                "ce02a8ee": {
+                                    "i": "ce02a8ee",
+                                    "h": 8,
+                                    "w": 17,
+                                    "x": 2,
+                                    "y": 16,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "ce02a8ee": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row2, Column1",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text4"
+                                }
+                            }
+                        },
+                        "4": {
+                            "layout": {
+                                "7ff66f36": {
+                                    "i": "7ff66f36",
+                                    "h": 6,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 16,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "7ff66f36": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row2, Column2",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text5"
+                                }
+                            }
+                        },
+                        "5": {
+                            "layout": {
+                                "8e25033d": {
+                                    "i": "8e25033d",
+                                    "h": 8,
+                                    "w": 19,
+                                    "x": 3,
+                                    "y": 16,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "8e25033d": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row2, Column3",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text6"
+                                }
+                            }
+                        },
+                        "6": {
+                            "layout": {
+                                "e92230c": {
+                                    "i": "e92230c",
+                                    "h": 8,
+                                    "w": 19,
+                                    "x": 2,
+                                    "y": 3,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "e92230c": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row3, Column1",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text7"
+                                }
+                            }
+                        },
+                        "7": {
+                            "layout": {
+                                "5e09b262": {
+                                    "i": "5e09b262",
+                                    "h": 6,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 4,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "5e09b262": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row3, Column2",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text8"
+                                }
+                            }
+                        },
+                        "8": {
+                            "layout": {
+                                "1bc7c61f": {
+                                    "i": "1bc7c61f",
+                                    "h": 8,
+                                    "w": 20,
+                                    "x": 1,
+                                    "y": 2,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "1bc7c61f": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Row3, Column3",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "text9"
+                                }
+                            }
+                        }
+                    },
+                    columns: {
+                        "manual": [
+                            {
+                                "id": 0,
+                                "label": "Column1",
+                                "key": "Column1",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 1,
+                                "label": "Column2",
+                                "key": "Column2",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 2,
+                                "label": "Add Column1",
+                                "key": "Add Column1",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 3,
+                                "label": "Add Column2",
+                                "key": "Add Column2",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 4,
+                                "label": "Add Column3",
+                                "key": "Add Column3",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 5,
+                                "label": "Add Column4",
+                                "key": "Add Column4",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 6,
+                                "label": "Add Column5",
+                                "key": "Add Column5",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 7,
+                                "label": "Add Column6",
+                                "key": "Add Column6",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            },
+                            {
+                                "id": 8,
+                                "label": "Add Column7",
+                                "key": "Add Column7",
+                                "minWidth": "",
+                                "background": "",
+                                "backgroundImage": "",
+                                "border": "",
+                                "radius": "",
+                                "margin": "",
+                                "padding": ""
+                            }
+                        ]
+                    },
+                    templateRows: "1fr 3fr 1fr",
+                    templateColumns: "1fr 3fr 1fr",
+                    style: {
+                        "border": "#EBFF04",
+                        "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                        "radius": "20px",
+                        "borderWidth": "5px",
+                        "margin": "10px",
+                        "padding": "20px",
+                        },
+                    columnStyle: {
+                        "background": "linear-gradient(45deg, #d53369 0%, #daae51 100%)",
+                        "border": "#FFFF07",
+                        "radius": "50px",
+                        "borderWidth": "3px",
+                        "borderStyle": "solid",
+                        "margin": "10px",
+                        "padding": "15px",
+                        },
+                    matchColumnsHeight: true,
+                    }}
+                    compFactory={ColumnLayoutComp}
+            />
+        </ExampleGroup>
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
index cc90bdf6e..40736a95a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
@@ -149,6 +149,7 @@ const container={
 export default function ContainerExample() {
     return (
       <>
+
         <ExampleGroup
           title="Basic Usage"
           description="The Following Examples Show the Basic Usage of the Container Component."
@@ -637,7 +638,665 @@ export default function ContainerExample() {
                   }}
                   compFactory={ContainerComp}
                 />
-        </ExampleGroup>      
+        </ExampleGroup>
+
+        <ExampleGroup
+            title="Styling Properties"
+            description="The Following Examples Show the different Styling Properties of the Container Component."
+            >
+            <Example
+                title="Overall Styling"
+                hideSettings={true}
+                height={500}
+                width={1000}
+                config={{
+                    container: {
+                        "header": {
+                            "layout": {
+                                "a6083c0a": {
+                                    "i": "a6083c0a",
+                                    "h": 5,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "a6083c0a": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Welcome Back!",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formTitle1"
+                                }
+                            }
+                        },
+                        "body": {
+                            "0": {
+                                "view": {
+                                    "layout": {
+                                        "a6f7c0e4": {
+                                            "i": "a6f7c0e4",
+                                            "h": 7,
+                                            "w": 14,
+                                            "x": 0,
+                                            "y": 0,
+                                            "pos": 0
+                                        },
+                                        "c5b32ee6": {
+                                            "i": "c5b32ee6",
+                                            "h": 7,
+                                            "w": 14,
+                                            "x": 0,
+                                            "y": 7,
+                                            "pos": 1
+                                        }
+                                    },
+                                    "items": {
+                                        "a6f7c0e4": {
+                                            "compType": "input",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Email",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Email",
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "input1"
+                                        },
+                                        "c5b32ee6": {
+                                            "compType": "password",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Password",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Regex",
+                                                "visibilityToggle": true,
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "password1"
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        "footer": {
+                            "layout": {
+                                "95ccf34e": {
+                                    "i": "95ccf34e",
+                                    "h": 5,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "95ccf34e": {
+                                    "compType": "button",
+                                    "comp": {
+                                        "text": "Login",
+                                        "type": "submit",
+                                        "form": "form1",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formButton1"
+                                }
+                            }
+                        },
+                        "showHeader": true,
+                        "showBody": true,
+                        "showFooter": true,
+                        "autoHeight": "auto",
+                        "showVerticalScrollbar": false,
+                        "horizontalGridCells": 24,
+                        "scrollbars": false,
+                        "style": {
+                            "border": "#5589F2",
+                            "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                            "radius": "20px",
+                            "borderWidth": "3px",
+                            "margin": "5px",
+                            "padding": "15px"
+                        },
+                        "appliedThemeId": ""
+                      },
+                }}
+                compFactory={ContainerComp}
+            />
+            <Example
+                title="Header Styling"
+                hideSettings={true}
+                height={500}
+                width={1000}
+                config={{
+                    container: {
+                        "header": {
+                            "layout": {
+                                "a6083c0a": {
+                                    "i": "a6083c0a",
+                                    "h": 5,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "a6083c0a": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Welcome Back!",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formTitle1"
+                                }
+                            }
+                        },
+                        "body": {
+                            "0": {
+                                "view": {
+                                    "layout": {
+                                        "a6f7c0e4": {
+                                            "i": "a6f7c0e4",
+                                            "h": 7,
+                                            "w": 14,
+                                            "x": 0,
+                                            "y": 0,
+                                            "pos": 0
+                                        },
+                                        "c5b32ee6": {
+                                            "i": "c5b32ee6",
+                                            "h": 7,
+                                            "w": 14,
+                                            "x": 0,
+                                            "y": 7,
+                                            "pos": 1
+                                        }
+                                    },
+                                    "items": {
+                                        "a6f7c0e4": {
+                                            "compType": "input",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Email",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Email",
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "input1"
+                                        },
+                                        "c5b32ee6": {
+                                            "compType": "password",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Password",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Regex",
+                                                "visibilityToggle": true,
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "password1"
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        "footer": {
+                            "layout": {
+                                "95ccf34e": {
+                                    "i": "95ccf34e",
+                                    "h": 5,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "95ccf34e": {
+                                    "compType": "button",
+                                    "comp": {
+                                        "text": "Login",
+                                        "type": "submit",
+                                        "form": "form1",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formButton1"
+                                }
+                            }
+                        },
+                        "showHeader": true,
+                        "showBody": true,
+                        "showFooter": true,
+                        "autoHeight": "auto",
+                        "showVerticalScrollbar": false,
+                        "horizontalGridCells": 24,
+                        "scrollbars": false,
+                        "style": {
+                            "border": "#5589F2",
+                            "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                            "radius": "20px",
+                            "borderWidth": "3px",
+                            "margin": "5px",
+                            "padding": "15px"
+                        },
+                        "headerStyle": {
+                            "containerHeaderPadding": "20px",
+                            "headerBackground": "#E68E50"
+                        },
+                        "appliedThemeId": ""
+                      },
+                }}
+                compFactory={ContainerComp}
+            />
+            <Example
+                title="Body Styling"
+                hideSettings={true}
+                height={500}
+                width={1000}
+                config={{
+                    container: {
+                        "header": {
+                            "layout": {
+                                "a6083c0a": {
+                                    "i": "a6083c0a",
+                                    "h": 5,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "a6083c0a": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Welcome Back!",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formTitle1"
+                                }
+                            }
+                        },
+                        "body": {
+                            "0": {
+                                "view": {
+                                    "layout": {
+                                        "a6f7c0e4": {
+                                            "i": "a6f7c0e4",
+                                            "h": 7,
+                                            "w": 14,
+                                            "x": 0,
+                                            "y": 0,
+                                            "pos": 0
+                                        },
+                                        "c5b32ee6": {
+                                            "i": "c5b32ee6",
+                                            "h": 7,
+                                            "w": 14,
+                                            "x": 0,
+                                            "y": 7,
+                                            "pos": 1
+                                        }
+                                    },
+                                    "items": {
+                                        "a6f7c0e4": {
+                                            "compType": "input",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Email",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Email",
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "input1"
+                                        },
+                                        "c5b32ee6": {
+                                            "compType": "password",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Password",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Regex",
+                                                "visibilityToggle": true,
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "password1"
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        "footer": {
+                            "layout": {
+                                "95ccf34e": {
+                                    "i": "95ccf34e",
+                                    "h": 5,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "95ccf34e": {
+                                    "compType": "button",
+                                    "comp": {
+                                        "text": "Login",
+                                        "type": "submit",
+                                        "form": "form1",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formButton1"
+                                }
+                            }
+                        },
+                        "showHeader": true,
+                        "showBody": true,
+                        "showFooter": true,
+                        "autoHeight": "auto",
+                        "showVerticalScrollbar": false,
+                        "horizontalGridCells": 24,
+                        "scrollbars": false,
+                        "style": {
+                            "border": "#5589F2",
+                            "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                            "radius": "20px",
+                            "borderWidth": "3px",
+                            "margin": "5px",
+                            "padding": "15px",
+                        },
+                        "headerStyle": {
+                            "containerHeaderPadding": "20px",
+                            "headerBackground": "#E68E50",
+                        },
+                        "bodyStyle": {
+                            "containerBodyPadding": "20px",
+                            "background": "#F2DB0A",
+                        },
+                        "appliedThemeId": ""
+                        },
+                }}
+                compFactory={ContainerComp}
+            />
+            <Example
+                title="Footer Styling"
+                hideSettings={true}
+                height={500}
+                width={1000}
+                config={{
+                    container: {
+                        "header": {
+                            "layout": {
+                                "a6083c0a": {
+                                    "i": "a6083c0a",
+                                    "h": 5,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "a6083c0a": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Welcome Back!",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formTitle1"
+                                }
+                            }
+                        },
+                        "body": {
+                            "0": {
+                                "view": {
+                                    "layout": {
+                                        "a6f7c0e4": {
+                                            "i": "a6f7c0e4",
+                                            "h": 7,
+                                            "w": 14,
+                                            "x": 0,
+                                            "y": 0,
+                                            "pos": 0
+                                        },
+                                        "c5b32ee6": {
+                                            "i": "c5b32ee6",
+                                            "h": 7,
+                                            "w": 14,
+                                            "x": 0,
+                                            "y": 7,
+                                            "pos": 1
+                                        }
+                                    },
+                                    "items": {
+                                        "a6f7c0e4": {
+                                            "compType": "input",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Email",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Email",
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "input1"
+                                        },
+                                        "c5b32ee6": {
+                                            "compType": "password",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Password",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Regex",
+                                                "visibilityToggle": true,
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "password1"
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        "footer": {
+                            "layout": {
+                                "95ccf34e": {
+                                    "i": "95ccf34e",
+                                    "h": 5,
+                                    "w": 10,
+                                    "x": 14,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "95ccf34e": {
+                                    "compType": "button",
+                                    "comp": {
+                                        "text": "Login",
+                                        "type": "submit",
+                                        "form": "form1",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formButton1"
+                                }
+                            }
+                        },
+                        "showHeader": true,
+                        "showBody": true,
+                        "showFooter": true,
+                        "autoHeight": "auto",
+                        "showVerticalScrollbar": false,
+                        "horizontalGridCells": 24,
+                        "scrollbars": false,
+                        "style": {
+                            "border": "#5589F2",
+                            "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                            "radius": "20px",
+                            "borderWidth": "3px",
+                            "margin": "5px",
+                            "padding": "15px",
+                        },
+                        "headerStyle": {
+                            "containerHeaderPadding": "20px",
+                            "headerBackground": "#E68E50",
+                        },
+                        "bodyStyle": {
+                            "containerBodyPadding": "20px",
+                            "background": "#F2DB0A",
+                        },
+                        "footerStyle": {
+                            "containerFooterPadding": "20px",
+                            "footerBackground": "#EA7B7B"
+                        },
+                        "appliedThemeId": ""
+                        },
+                }}
+                compFactory={ContainerComp}
+            />
+        </ExampleGroup>     
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
index a80ce5f57..3c1d84e38 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
@@ -619,7 +619,7 @@ const container={
   "siderScrollbars": false,
   "contentScrollbars": false,
   "mainScrollbars": false,
-  "appliedThemeId": ""
+  "appliedThemeId": "",
 };
 
 export default function PageLayoutExample() {
@@ -659,7 +659,7 @@ export default function PageLayoutExample() {
 
         <ExampleGroup
           title="Layout"
-          description="The Following Examples Show the Layout options on Component."
+          description="The Following Examples Show the Layout options on the Page Layout Component."
         >
           <Example
             title="Hiding Page Layout Header"
@@ -5049,6 +5049,3280 @@ export default function PageLayoutExample() {
             compFactory={PageLayoutComp}
           />
         </ExampleGroup>
+
+        <ExampleGroup
+          title="Styling Properties"
+          description="The Following Examples Show the different Styling properties of the Page Layout Component."
+        >
+          <Example
+            title="Style"
+            hideSettings={true}
+            config={{ 
+              container: {
+                "header": {
+                    "layout": {
+                        "f7820dbc": {
+                            "i": "f7820dbc",
+                            "h": 6,
+                            "w": 24,
+                            "x": 0,
+                            "y": 0,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "f7820dbc": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Page Layout Header",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text1"
+                        }
+                    }
+                },
+                "sider": {
+                    "layout": {
+                        "a9d16086": {
+                            "i": "a9d16086",
+                            "h": 6,
+                            "w": 22,
+                            "x": 0,
+                            "y": 0,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "a9d16086": {
+                            "compType": "dropdown",
+                            "comp": {
+                                "text": "Menu",
+                                "options": {
+                                    "optionType": "manual",
+                                    "manual": {
+                                        "manual": [
+                                            {
+                                                "label": "Option 1"
+                                            },
+                                            {
+                                                "label": "Option 2"
+                                            }
+                                        ]
+                                    },
+                                    "mapData": {
+                                        "data": "[]"
+                                    }
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "dropdown1"
+                        }
+                    }
+                },
+                "body": {
+                    "0": {
+                        "view": {
+                            "layout": {
+                                "163bc2f3": {
+                                    "i": "163bc2f3",
+                                    "h": 45,
+                                    "w": 21,
+                                    "x": 3,
+                                    "y": 0,
+                                    "pos": 0
+                                }
+                            },
+                            "items": {
+                                "163bc2f3": {
+                                    "compType": "table",
+                                    "comp": {
+                                        "showRowGridBorder": true,
+                                        "showHRowGridBorder": true,
+                                        "autoHeight": "auto",
+                                        "data": "[\n {\n  \"id\": 1,\n  \"name\": \"Reagen Gilberthorpe\",\n  \"date\": \"7/5/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 2,\n  \"name\": \"Haroun Lortzing\",\n  \"date\": \"11/6/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 3,\n  \"name\": \"Garret Kilmaster\",\n  \"date\": \"11/14/2021\",\n  \"department\": \"Research and Development\"\n },\n {\n  \"id\": 4,\n  \"name\": \"Israel Harrowsmith\",\n  \"date\": \"4/3/2022\",\n  \"department\": \"Training\"\n },\n {\n  \"id\": 5,\n  \"name\": \"Loren O'Lagen\",\n  \"date\": \"9/10/2022\",\n  \"department\": \"Services\"\n },\n {\n  \"id\": 6,\n  \"name\": \"Wallis Hothersall\",\n  \"date\": \"4/18/2022\",\n  \"department\": \"Accounting\"\n },\n {\n  \"id\": 7,\n  \"name\": \"Kaia Biskup\",\n  \"date\": \"3/4/2022\",\n  \"department\": \"Sales\"\n },\n {\n  \"id\": 8,\n  \"name\": \"Travers Saterweyte\",\n  \"date\": \"1/9/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 9,\n  \"name\": \"Mikey Niemetz\",\n  \"date\": \"1/4/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 10,\n  \"name\": \"Mano Meckiff\",\n  \"date\": \"2/19/2022\",\n  \"department\": \"Research and Development\"\n }\n]",
+                                        "showDataLoadSpinner": true,
+                                        "columns": [
+                                            {
+                                                "title": "ID",
+                                                "showTitle": true,
+                                                "isCustom": false,
+                                                "dataIndex": "id",
+                                                "width": "55",
+                                                "autoWidth": "fixed",
+                                                "render": {
+                                                    "compType": "text",
+                                                    "comp": {
+                                                        "text": "{{currentCell}}"
+                                                    }
+                                                },
+                                                "align": "left",
+                                                "fixed": "close",
+                                                "background": "",
+                                                "margin": "",
+                                                "text": "",
+                                                "border": "",
+                                                "borderWidth": "",
+                                                "radius": "",
+                                                "textSize": "",
+                                                "textWeight": "normal",
+                                                "fontFamily": "sans-serif",
+                                                "fontStyle": "normal",
+                                                "textOverflow": "ellipsis",
+                                                "linkColor": "#3377ff",
+                                                "linkHoverColor": "",
+                                                "linkActiveColor": "",
+                                                "summaryColumns": [
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    },
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    },
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                "title": "Name",
+                                                "showTitle": true,
+                                                "isCustom": false,
+                                                "dataIndex": "name",
+                                                "width": "200",
+                                                "autoWidth": "fixed",
+                                                "render": {
+                                                    "compType": "text",
+                                                    "comp": {
+                                                        "text": "{{currentCell}}"
+                                                    }
+                                                },
+                                                "align": "left",
+                                                "fixed": "close",
+                                                "background": "",
+                                                "margin": "",
+                                                "text": "",
+                                                "border": "",
+                                                "borderWidth": "",
+                                                "radius": "",
+                                                "textSize": "",
+                                                "textWeight": "normal",
+                                                "fontFamily": "sans-serif",
+                                                "fontStyle": "normal",
+                                                "textOverflow": "ellipsis",
+                                                "linkColor": "#3377ff",
+                                                "linkHoverColor": "",
+                                                "linkActiveColor": "",
+                                                "summaryColumns": [
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    },
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    },
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                "title": "Date",
+                                                "showTitle": true,
+                                                "isCustom": false,
+                                                "dataIndex": "date",
+                                                "width": "110",
+                                                "autoWidth": "fixed",
+                                                "render": {
+                                                    "compType": "text",
+                                                    "comp": {
+                                                        "text": "{{currentCell}}"
+                                                    }
+                                                },
+                                                "align": "left",
+                                                "fixed": "close",
+                                                "background": "",
+                                                "margin": "",
+                                                "text": "",
+                                                "border": "",
+                                                "borderWidth": "",
+                                                "radius": "",
+                                                "textSize": "",
+                                                "textWeight": "normal",
+                                                "fontFamily": "sans-serif",
+                                                "fontStyle": "normal",
+                                                "textOverflow": "ellipsis",
+                                                "linkColor": "#3377ff",
+                                                "linkHoverColor": "",
+                                                "linkActiveColor": "",
+                                                "summaryColumns": [
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    },
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    },
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                "title": "Department",
+                                                "showTitle": true,
+                                                "isCustom": false,
+                                                "dataIndex": "department",
+                                                "width": "250",
+                                                "autoWidth": "fixed",
+                                                "render": {
+                                                    "compType": "tag",
+                                                    "comp": {
+                                                        "text": "{{currentCell}}",
+                                                        "tagColors": {
+                                                            "optionType": "manual",
+                                                            "manual": {
+                                                                "manual": [
+                                                                    {
+                                                                        "label": "Tag1",
+                                                                        "icon": "/icon:solid/tag",
+                                                                        "color": "#f50"
+                                                                    },
+                                                                    {
+                                                                        "label": "Tag2",
+                                                                        "icon": "/icon:solid/tag",
+                                                                        "color": "#2db7f5"
+                                                                    }
+                                                                ]
+                                                            },
+                                                            "mapData": {
+                                                                "data": "[]",
+                                                                "mapData": {
+                                                                    "color": ""
+                                                                }
+                                                            }
+                                                        }
+                                                    }
+                                                },
+                                                "align": "left",
+                                                "fixed": "close",
+                                                "background": "",
+                                                "margin": "",
+                                                "text": "",
+                                                "border": "",
+                                                "borderWidth": "",
+                                                "radius": "",
+                                                "textSize": "",
+                                                "textWeight": "normal",
+                                                "fontFamily": "sans-serif",
+                                                "fontStyle": "normal",
+                                                "textOverflow": "ellipsis",
+                                                "linkColor": "#3377ff",
+                                                "linkHoverColor": "",
+                                                "linkActiveColor": "",
+                                                "summaryColumns": [
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    },
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    },
+                                                    {
+                                                        "isCustom": false,
+                                                        "dataIndex": "",
+                                                        "render": {
+                                                            "compType": "text",
+                                                            "comp": {}
+                                                        },
+                                                        "align": "left",
+                                                        "background": "",
+                                                        "margin": "",
+                                                        "text": "",
+                                                        "border": "",
+                                                        "radius": "",
+                                                        "textSize": "",
+                                                        "textWeight": "normal",
+                                                        "fontFamily": "sans-serif",
+                                                        "fontStyle": "normal",
+                                                        "textOverflow": "ellipsis",
+                                                        "linkColor": "#3377ff",
+                                                        "linkHoverColor": "",
+                                                        "linkActiveColor": ""
+                                                    }
+                                                ]
+                                            }
+                                        ],
+                                        "size": "middle",
+                                        "selection": {
+                                            "mode": "single"
+                                        },
+                                        "pagination": {
+                                            "changeablePageSize": null,
+                                            "pageSizeOptions": "[5, 10, 20, 50]"
+                                        },
+                                        "sort": [],
+                                        "toolbar": {
+                                            "showRefresh": true,
+                                            "showDownload": true,
+                                            "showFilter": true,
+                                            "position": "below",
+                                            "columnSeparator": ",",
+                                            "showUpdateButtons": true
+                                        },
+                                        "summaryRows": "1",
+                                        "rowAutoHeight": "auto",
+                                        "tableAutoHeight": "auto",
+                                        "expansion": {
+                                            "slot": {
+                                                "container": {
+                                                    "layout": {}
+                                                }
+                                            }
+                                        },
+                                        "editModeClicks": "single",
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "table1"
+                                }
+                            }
+                        }
+                    }
+                },
+                "footer": {
+                    "layout": {
+                        "3a74e36e": {
+                            "i": "3a74e36e",
+                            "h": 6,
+                            "w": 24,
+                            "x": 0,
+                            "y": 2,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "3a74e36e": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Page Layout Footer",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "style": {
+                                    "background": "#fff"
+                                },
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text2"
+                        }
+                    }
+                },
+                "showHeader": true,
+                "showSider": true,
+                "innerSider": true,
+                "siderCollapsible": true,
+                "siderCollapsed": true,
+                "siderRight": false,
+                "siderWidth": "20%",
+                "siderCollapsedWidth": "0",
+                "showFooter": true,
+                "horizontalGridCells": 24,
+                "autoHeight": "auto",
+                "siderScrollbars": false,
+                "contentScrollbars": false,
+                "mainScrollbars": false,
+                "appliedThemeId": "",
+                "style": {
+                    "border": "#6D83F2",
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "dashed",
+                    "margin": "5px",
+                    "padding": "10px"
+                },
+              },
+            }}
+            compFactory={PageLayoutComp}
+          />
+          <Example
+            title="Header Styling"
+            hideSettings={true}
+            config={{ 
+                container: {
+                  "header": {
+                      "layout": {
+                          "f7820dbc": {
+                              "i": "f7820dbc",
+                              "h": 6,
+                              "w": 24,
+                              "x": 0,
+                              "y": 0,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "f7820dbc": {
+                              "compType": "text",
+                              "comp": {
+                                  "text": "### Page Layout Header",
+                                  "autoHeight": "auto",
+                                  "type": "markdown",
+                                  "horizontalAlignment": "center",
+                                  "contentScrollBar": true,
+                                  "verticalAlignment": "center",
+                                  "margin": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "padding": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "text1"
+                          }
+                      }
+                  },
+                  "sider": {
+                      "layout": {
+                          "a9d16086": {
+                              "i": "a9d16086",
+                              "h": 6,
+                              "w": 22,
+                              "x": 0,
+                              "y": 0,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "a9d16086": {
+                              "compType": "dropdown",
+                              "comp": {
+                                  "text": "Menu",
+                                  "options": {
+                                      "optionType": "manual",
+                                      "manual": {
+                                          "manual": [
+                                              {
+                                                  "label": "Option 1"
+                                              },
+                                              {
+                                                  "label": "Option 2"
+                                              }
+                                          ]
+                                      },
+                                      "mapData": {
+                                          "data": "[]"
+                                      }
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "dropdown1"
+                          }
+                      }
+                  },
+                  "body": {
+                      "0": {
+                          "view": {
+                              "layout": {
+                                  "163bc2f3": {
+                                      "i": "163bc2f3",
+                                      "h": 45,
+                                      "w": 21,
+                                      "x": 3,
+                                      "y": 0,
+                                      "pos": 0
+                                  }
+                              },
+                              "items": {
+                                  "163bc2f3": {
+                                      "compType": "table",
+                                      "comp": {
+                                          "showRowGridBorder": true,
+                                          "showHRowGridBorder": true,
+                                          "autoHeight": "auto",
+                                          "data": "[\n {\n  \"id\": 1,\n  \"name\": \"Reagen Gilberthorpe\",\n  \"date\": \"7/5/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 2,\n  \"name\": \"Haroun Lortzing\",\n  \"date\": \"11/6/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 3,\n  \"name\": \"Garret Kilmaster\",\n  \"date\": \"11/14/2021\",\n  \"department\": \"Research and Development\"\n },\n {\n  \"id\": 4,\n  \"name\": \"Israel Harrowsmith\",\n  \"date\": \"4/3/2022\",\n  \"department\": \"Training\"\n },\n {\n  \"id\": 5,\n  \"name\": \"Loren O'Lagen\",\n  \"date\": \"9/10/2022\",\n  \"department\": \"Services\"\n },\n {\n  \"id\": 6,\n  \"name\": \"Wallis Hothersall\",\n  \"date\": \"4/18/2022\",\n  \"department\": \"Accounting\"\n },\n {\n  \"id\": 7,\n  \"name\": \"Kaia Biskup\",\n  \"date\": \"3/4/2022\",\n  \"department\": \"Sales\"\n },\n {\n  \"id\": 8,\n  \"name\": \"Travers Saterweyte\",\n  \"date\": \"1/9/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 9,\n  \"name\": \"Mikey Niemetz\",\n  \"date\": \"1/4/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 10,\n  \"name\": \"Mano Meckiff\",\n  \"date\": \"2/19/2022\",\n  \"department\": \"Research and Development\"\n }\n]",
+                                          "showDataLoadSpinner": true,
+                                          "columns": [
+                                              {
+                                                  "title": "ID",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "id",
+                                                  "width": "55",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Name",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "name",
+                                                  "width": "200",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Date",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "date",
+                                                  "width": "110",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Department",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "department",
+                                                  "width": "250",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "tag",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}",
+                                                          "tagColors": {
+                                                              "optionType": "manual",
+                                                              "manual": {
+                                                                  "manual": [
+                                                                      {
+                                                                          "label": "Tag1",
+                                                                          "icon": "/icon:solid/tag",
+                                                                          "color": "#f50"
+                                                                      },
+                                                                      {
+                                                                          "label": "Tag2",
+                                                                          "icon": "/icon:solid/tag",
+                                                                          "color": "#2db7f5"
+                                                                      }
+                                                                  ]
+                                                              },
+                                                              "mapData": {
+                                                                  "data": "[]",
+                                                                  "mapData": {
+                                                                      "color": ""
+                                                                  }
+                                                              }
+                                                          }
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              }
+                                          ],
+                                          "size": "middle",
+                                          "selection": {
+                                              "mode": "single"
+                                          },
+                                          "pagination": {
+                                              "changeablePageSize": null,
+                                              "pageSizeOptions": "[5, 10, 20, 50]"
+                                          },
+                                          "sort": [],
+                                          "toolbar": {
+                                              "showRefresh": true,
+                                              "showDownload": true,
+                                              "showFilter": true,
+                                              "position": "below",
+                                              "columnSeparator": ",",
+                                              "showUpdateButtons": true
+                                          },
+                                          "summaryRows": "1",
+                                          "rowAutoHeight": "auto",
+                                          "tableAutoHeight": "auto",
+                                          "expansion": {
+                                              "slot": {
+                                                  "container": {
+                                                      "layout": {}
+                                                  }
+                                              }
+                                          },
+                                          "editModeClicks": "single",
+                                          "preventStyleOverwriting": false,
+                                          "appliedThemeId": "",
+                                          "version": "latest"
+                                      },
+                                      "name": "table1"
+                                  }
+                              }
+                          }
+                      }
+                  },
+                  "footer": {
+                      "layout": {
+                          "3a74e36e": {
+                              "i": "3a74e36e",
+                              "h": 6,
+                              "w": 24,
+                              "x": 0,
+                              "y": 2,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "3a74e36e": {
+                              "compType": "text",
+                              "comp": {
+                                  "text": "### Page Layout Footer",
+                                  "autoHeight": "auto",
+                                  "type": "markdown",
+                                  "horizontalAlignment": "center",
+                                  "contentScrollBar": true,
+                                  "verticalAlignment": "center",
+                                  "style": {
+                                      "background": "#fff"
+                                  },
+                                  "margin": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "padding": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "text2"
+                          }
+                      }
+                  },
+                  "showHeader": true,
+                  "showSider": true,
+                  "innerSider": true,
+                  "siderCollapsible": true,
+                  "siderCollapsed": true,
+                  "siderRight": false,
+                  "siderWidth": "20%",
+                  "siderCollapsedWidth": "0",
+                  "showFooter": true,
+                  "horizontalGridCells": 24,
+                  "autoHeight": "auto",
+                  "siderScrollbars": false,
+                  "contentScrollbars": false,
+                  "mainScrollbars": false,
+                  "appliedThemeId": "",
+                  "style": {
+                      "border": "#6D83F2",
+                      "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                      "radius": "20px",
+                      "borderWidth": "3px",
+                      "borderStyle": "dashed",
+                      "margin": "5px",
+                      "padding": "10px"
+                  },
+                  "headerStyle": {
+                      "containerHeaderPadding": "20px",
+                      "headerBackground": "#E68E50"
+                  },
+                },
+            }}
+            compFactory={PageLayoutComp}
+          />
+          <Example
+            title="Sider Styling"
+            hideSettings={true}
+            config={{
+                container: {
+                  "header": {
+                      "layout": {
+                          "f7820dbc": {
+                              "i": "f7820dbc",
+                              "h": 6,
+                              "w": 24,
+                              "x": 0,
+                              "y": 0,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "f7820dbc": {
+                              "compType": "text",
+                              "comp": {
+                                  "text": "### Page Layout Header",
+                                  "autoHeight": "auto",
+                                  "type": "markdown",
+                                  "horizontalAlignment": "center",
+                                  "contentScrollBar": true,
+                                  "verticalAlignment": "center",
+                                  "margin": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "padding": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "text1"
+                          }
+                      }
+                  },
+                  "sider": {
+                      "layout": {
+                          "a9d16086": {
+                              "i": "a9d16086",
+                              "h": 6,
+                              "w": 22,
+                              "x": 0,
+                              "y": 0,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "a9d16086": {
+                              "compType": "dropdown",
+                              "comp": {
+                                  "text": "Menu",
+                                  "options": {
+                                      "optionType": "manual",
+                                      "manual": {
+                                          "manual": [
+                                              {
+                                                  "label": "Option 1"
+                                              },
+                                              {
+                                                  "label": "Option 2"
+                                              }
+                                          ]
+                                      },
+                                      "mapData": {
+                                          "data": "[]"
+                                      }
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "dropdown1"
+                          }
+                      }
+                  },
+                  "body": {
+                      "0": {
+                          "view": {
+                              "layout": {
+                                  "163bc2f3": {
+                                      "i": "163bc2f3",
+                                      "h": 45,
+                                      "w": 21,
+                                      "x": 3,
+                                      "y": 0,
+                                      "pos": 0
+                                  }
+                              },
+                              "items": {
+                                  "163bc2f3": {
+                                      "compType": "table",
+                                      "comp": {
+                                          "showRowGridBorder": true,
+                                          "showHRowGridBorder": true,
+                                          "autoHeight": "auto",
+                                          "data": "[\n {\n  \"id\": 1,\n  \"name\": \"Reagen Gilberthorpe\",\n  \"date\": \"7/5/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 2,\n  \"name\": \"Haroun Lortzing\",\n  \"date\": \"11/6/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 3,\n  \"name\": \"Garret Kilmaster\",\n  \"date\": \"11/14/2021\",\n  \"department\": \"Research and Development\"\n },\n {\n  \"id\": 4,\n  \"name\": \"Israel Harrowsmith\",\n  \"date\": \"4/3/2022\",\n  \"department\": \"Training\"\n },\n {\n  \"id\": 5,\n  \"name\": \"Loren O'Lagen\",\n  \"date\": \"9/10/2022\",\n  \"department\": \"Services\"\n },\n {\n  \"id\": 6,\n  \"name\": \"Wallis Hothersall\",\n  \"date\": \"4/18/2022\",\n  \"department\": \"Accounting\"\n },\n {\n  \"id\": 7,\n  \"name\": \"Kaia Biskup\",\n  \"date\": \"3/4/2022\",\n  \"department\": \"Sales\"\n },\n {\n  \"id\": 8,\n  \"name\": \"Travers Saterweyte\",\n  \"date\": \"1/9/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 9,\n  \"name\": \"Mikey Niemetz\",\n  \"date\": \"1/4/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 10,\n  \"name\": \"Mano Meckiff\",\n  \"date\": \"2/19/2022\",\n  \"department\": \"Research and Development\"\n }\n]",
+                                          "showDataLoadSpinner": true,
+                                          "columns": [
+                                              {
+                                                  "title": "ID",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "id",
+                                                  "width": "55",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Name",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "name",
+                                                  "width": "200",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Date",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "date",
+                                                  "width": "110",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Department",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "department",
+                                                  "width": "250",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "tag",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}",
+                                                          "tagColors": {
+                                                              "optionType": "manual",
+                                                              "manual": {
+                                                                  "manual": [
+                                                                      {
+                                                                          "label": "Tag1",
+                                                                          "icon": "/icon:solid/tag",
+                                                                          "color": "#f50"
+                                                                      },
+                                                                      {
+                                                                          "label": "Tag2",
+                                                                          "icon": "/icon:solid/tag",
+                                                                          "color": "#2db7f5"
+                                                                      }
+                                                                  ]
+                                                              },
+                                                              "mapData": {
+                                                                  "data": "[]",
+                                                                  "mapData": {
+                                                                      "color": ""
+                                                                  }
+                                                              }
+                                                          }
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              }
+                                          ],
+                                          "size": "middle",
+                                          "selection": {
+                                              "mode": "single"
+                                          },
+                                          "pagination": {
+                                              "changeablePageSize": null,
+                                              "pageSizeOptions": "[5, 10, 20, 50]"
+                                          },
+                                          "sort": [],
+                                          "toolbar": {
+                                              "showRefresh": true,
+                                              "showDownload": true,
+                                              "showFilter": true,
+                                              "position": "below",
+                                              "columnSeparator": ",",
+                                              "showUpdateButtons": true
+                                          },
+                                          "summaryRows": "1",
+                                          "rowAutoHeight": "auto",
+                                          "tableAutoHeight": "auto",
+                                          "expansion": {
+                                              "slot": {
+                                                  "container": {
+                                                      "layout": {}
+                                                  }
+                                              }
+                                          },
+                                          "editModeClicks": "single",
+                                          "preventStyleOverwriting": false,
+                                          "appliedThemeId": "",
+                                          "version": "latest"
+                                      },
+                                      "name": "table1"
+                                  }
+                              }
+                          }
+                      }
+                  },
+                  "footer": {
+                      "layout": {
+                          "3a74e36e": {
+                              "i": "3a74e36e",
+                              "h": 6,
+                              "w": 24,
+                              "x": 0,
+                              "y": 2,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "3a74e36e": {
+                              "compType": "text",
+                              "comp": {
+                                  "text": "### Page Layout Footer",
+                                  "autoHeight": "auto",
+                                  "type": "markdown",
+                                  "horizontalAlignment": "center",
+                                  "contentScrollBar": true,
+                                  "verticalAlignment": "center",
+                                  "style": {
+                                      "background": "#fff"
+                                  },
+                                  "margin": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "padding": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "text2"
+                          }
+                      }
+                  },
+                  "showHeader": true,
+                  "showSider": true,
+                  "innerSider": true,
+                  "siderCollapsible": true,
+                  "siderCollapsed": true,
+                  "siderRight": false,
+                  "siderWidth": "20%",
+                  "siderCollapsedWidth": "0",
+                  "showFooter": true,
+                  "horizontalGridCells": 24,
+                  "autoHeight": "auto",
+                  "siderScrollbars": false,
+                  "contentScrollbars": false,
+                  "mainScrollbars": false,
+                  "appliedThemeId": "",
+                  "style": {
+                      "border": "#6D83F2",
+                      "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                      "radius": "20px",
+                      "borderWidth": "3px",
+                      "borderStyle": "dashed",
+                      "margin": "5px",
+                      "padding": "10px"
+                  },
+                  "siderStyle": {
+                      "containerSiderPadding": "15px",
+                      "siderBackground": "#5589F2",
+                  },
+                  "headerStyle": {
+                    "containerHeaderPadding": "20px",
+                    "headerBackground": "#E68E50"
+                },
+                },
+            }}
+            compFactory={PageLayoutComp}
+          />
+          <Example
+            title="Body Styling"
+            hideSettings={true}
+            config={{
+                container: {
+                  "header": {
+                      "layout": {
+                          "f7820dbc": {
+                              "i": "f7820dbc",
+                              "h": 6,
+                              "w": 24,
+                              "x": 0,
+                              "y": 0,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "f7820dbc": {
+                              "compType": "text",
+                              "comp": {
+                                  "text": "### Page Layout Header",
+                                  "autoHeight": "auto",
+                                  "type": "markdown",
+                                  "horizontalAlignment": "center",
+                                  "contentScrollBar": true,
+                                  "verticalAlignment": "center",
+                                  "margin": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "padding": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "text1"
+                          }
+                      }
+                  },
+                  "sider": {
+                      "layout": {
+                          "a9d16086": {
+                              "i": "a9d16086",
+                              "h": 6,
+                              "w": 22,
+                              "x": 0,
+                              "y": 0,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "a9d16086": {
+                              "compType": "dropdown",
+                              "comp": {
+                                  "text": "Menu",
+                                  "options": {
+                                      "optionType": "manual",
+                                      "manual": {
+                                          "manual": [
+                                              {
+                                                  "label": "Option 1"
+                                              },
+                                              {
+                                                  "label": "Option 2"
+                                              }
+                                          ]
+                                      },
+                                      "mapData": {
+                                          "data": "[]"
+                                      }
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "dropdown1"
+                          }
+                      }
+                  },
+                  "body": {
+                      "0": {
+                          "view": {
+                              "layout": {
+                                  "163bc2f3": {
+                                      "i": "163bc2f3",
+                                      "h": 45,
+                                      "w": 21,
+                                      "x": 3,
+                                      "y": 0,
+                                      "pos": 0
+                                  }
+                              },
+                              "items": {
+                                  "163bc2f3": {
+                                      "compType": "table",
+                                      "comp": {
+                                          "showRowGridBorder": true,
+                                          "showHRowGridBorder": true,
+                                          "autoHeight": "auto",
+                                          "data": "[\n {\n  \"id\": 1,\n  \"name\": \"Reagen Gilberthorpe\",\n  \"date\": \"7/5/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 2,\n  \"name\": \"Haroun Lortzing\",\n  \"date\": \"11/6/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 3,\n  \"name\": \"Garret Kilmaster\",\n  \"date\": \"11/14/2021\",\n  \"department\": \"Research and Development\"\n },\n {\n  \"id\": 4,\n  \"name\": \"Israel Harrowsmith\",\n  \"date\": \"4/3/2022\",\n  \"department\": \"Training\"\n },\n {\n  \"id\": 5,\n  \"name\": \"Loren O'Lagen\",\n  \"date\": \"9/10/2022\",\n  \"department\": \"Services\"\n },\n {\n  \"id\": 6,\n  \"name\": \"Wallis Hothersall\",\n  \"date\": \"4/18/2022\",\n  \"department\": \"Accounting\"\n },\n {\n  \"id\": 7,\n  \"name\": \"Kaia Biskup\",\n  \"date\": \"3/4/2022\",\n  \"department\": \"Sales\"\n },\n {\n  \"id\": 8,\n  \"name\": \"Travers Saterweyte\",\n  \"date\": \"1/9/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 9,\n  \"name\": \"Mikey Niemetz\",\n  \"date\": \"1/4/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 10,\n  \"name\": \"Mano Meckiff\",\n  \"date\": \"2/19/2022\",\n  \"department\": \"Research and Development\"\n }\n]",
+                                          "showDataLoadSpinner": true,
+                                          "columns": [
+                                              {
+                                                  "title": "ID",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "id",
+                                                  "width": "55",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Name",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "name",
+                                                  "width": "200",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Date",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "date",
+                                                  "width": "110",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Department",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "department",
+                                                  "width": "250",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "tag",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}",
+                                                          "tagColors": {
+                                                              "optionType": "manual",
+                                                              "manual": {
+                                                                  "manual": [
+                                                                      {
+                                                                          "label": "Tag1",
+                                                                          "icon": "/icon:solid/tag",
+                                                                          "color": "#f50"
+                                                                      },
+                                                                      {
+                                                                          "label": "Tag2",
+                                                                          "icon": "/icon:solid/tag",
+                                                                          "color": "#2db7f5"
+                                                                      }
+                                                                  ]
+                                                              },
+                                                              "mapData": {
+                                                                  "data": "[]",
+                                                                  "mapData": {
+                                                                      "color": ""
+                                                                  }
+                                                              }
+                                                          }
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              }
+                                          ],
+                                          "size": "middle",
+                                          "selection": {
+                                              "mode": "single"
+                                          },
+                                          "pagination": {
+                                              "changeablePageSize": null,
+                                              "pageSizeOptions": "[5, 10, 20, 50]"
+                                          },
+                                          "sort": [],
+                                          "toolbar": {
+                                              "showRefresh": true,
+                                              "showDownload": true,
+                                              "showFilter": true,
+                                              "position": "below",
+                                              "columnSeparator": ",",
+                                              "showUpdateButtons": true
+                                          },
+                                          "summaryRows": "1",
+                                          "rowAutoHeight": "auto",
+                                          "tableAutoHeight": "auto",
+                                          "expansion": {
+                                              "slot": {
+                                                  "container": {
+                                                      "layout": {}
+                                                  }
+                                              }
+                                          },
+                                          "editModeClicks": "single",
+                                          "preventStyleOverwriting": false,
+                                          "appliedThemeId": "",
+                                          "version": "latest"
+                                      },
+                                      "name": "table1"
+                                  }
+                              }
+                          }
+                      }
+                  },
+                  "footer": {
+                      "layout": {
+                          "3a74e36e": {
+                              "i": "3a74e36e",
+                              "h": 6,
+                              "w": 24,
+                              "x": 0,
+                              "y": 2,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "3a74e36e": {
+                              "compType": "text",
+                              "comp": {
+                                  "text": "### Page Layout Footer",
+                                  "autoHeight": "auto",
+                                  "type": "markdown",
+                                  "horizontalAlignment": "center",
+                                  "contentScrollBar": true,
+                                  "verticalAlignment": "center",
+                                  "style": {
+                                      "background": "#fff"
+                                  },
+                                  "margin": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "padding": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "text2"
+                          }
+                      }
+                  },
+                  "showHeader": true,
+                  "showSider": true,
+                  "innerSider": true,
+                  "siderCollapsible": true,
+                  "siderCollapsed": true,
+                  "siderRight": false,
+                  "siderWidth": "20%",
+                  "siderCollapsedWidth": "0",
+                  "showFooter": true,
+                  "horizontalGridCells": 24,
+                  "autoHeight": "auto",
+                  "siderScrollbars": false,
+                  "contentScrollbars": false,
+                  "mainScrollbars": false,
+                  "appliedThemeId": "",
+                  "style": {
+                      "border": "#6D83F2",
+                      "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                      "radius": "20px",
+                      "borderWidth": "3px",
+                      "borderStyle": "dashed",
+                      "margin": "5px",
+                      "padding": "10px"
+                  },
+                  "siderStyle": {
+                      "containerSiderPadding": "15px",
+                      "siderBackground": "#5589F2",
+                  },
+                  "headerStyle": {
+                    "containerHeaderPadding": "20px",
+                    "headerBackground": "#E68E50"
+                    },
+                    "bodyStyle":{
+                        "containerBodyPadding": "20px",
+                        "background": "linear-gradient(45deg, #cfd9df 0%, #e2ebf0 100%)"
+                    },
+                },
+            }}
+            compFactory={PageLayoutComp}
+            />
+
+          <Example
+            title="Body Styling"
+            hideSettings={true}
+            config={{
+                container: {
+                  "header": {
+                      "layout": {
+                          "f7820dbc": {
+                              "i": "f7820dbc",
+                              "h": 6,
+                              "w": 24,
+                              "x": 0,
+                              "y": 0,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "f7820dbc": {
+                              "compType": "text",
+                              "comp": {
+                                  "text": "### Page Layout Header",
+                                  "autoHeight": "auto",
+                                  "type": "markdown",
+                                  "horizontalAlignment": "center",
+                                  "contentScrollBar": true,
+                                  "verticalAlignment": "center",
+                                  "margin": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "padding": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "text1"
+                          }
+                      }
+                  },
+                  "sider": {
+                      "layout": {
+                          "a9d16086": {
+                              "i": "a9d16086",
+                              "h": 6,
+                              "w": 22,
+                              "x": 0,
+                              "y": 0,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "a9d16086": {
+                              "compType": "dropdown",
+                              "comp": {
+                                  "text": "Menu",
+                                  "options": {
+                                      "optionType": "manual",
+                                      "manual": {
+                                          "manual": [
+                                              {
+                                                  "label": "Option 1"
+                                              },
+                                              {
+                                                  "label": "Option 2"
+                                              }
+                                          ]
+                                      },
+                                      "mapData": {
+                                          "data": "[]"
+                                      }
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "dropdown1"
+                          }
+                      }
+                  },
+                  "body": {
+                      "0": {
+                          "view": {
+                              "layout": {
+                                  "163bc2f3": {
+                                      "i": "163bc2f3",
+                                      "h": 45,
+                                      "w": 21,
+                                      "x": 3,
+                                      "y": 0,
+                                      "pos": 0
+                                  }
+                              },
+                              "items": {
+                                  "163bc2f3": {
+                                      "compType": "table",
+                                      "comp": {
+                                          "showRowGridBorder": true,
+                                          "showHRowGridBorder": true,
+                                          "autoHeight": "auto",
+                                          "data": "[\n {\n  \"id\": 1,\n  \"name\": \"Reagen Gilberthorpe\",\n  \"date\": \"7/5/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 2,\n  \"name\": \"Haroun Lortzing\",\n  \"date\": \"11/6/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 3,\n  \"name\": \"Garret Kilmaster\",\n  \"date\": \"11/14/2021\",\n  \"department\": \"Research and Development\"\n },\n {\n  \"id\": 4,\n  \"name\": \"Israel Harrowsmith\",\n  \"date\": \"4/3/2022\",\n  \"department\": \"Training\"\n },\n {\n  \"id\": 5,\n  \"name\": \"Loren O'Lagen\",\n  \"date\": \"9/10/2022\",\n  \"department\": \"Services\"\n },\n {\n  \"id\": 6,\n  \"name\": \"Wallis Hothersall\",\n  \"date\": \"4/18/2022\",\n  \"department\": \"Accounting\"\n },\n {\n  \"id\": 7,\n  \"name\": \"Kaia Biskup\",\n  \"date\": \"3/4/2022\",\n  \"department\": \"Sales\"\n },\n {\n  \"id\": 8,\n  \"name\": \"Travers Saterweyte\",\n  \"date\": \"1/9/2022\",\n  \"department\": \"Human Resources\"\n },\n {\n  \"id\": 9,\n  \"name\": \"Mikey Niemetz\",\n  \"date\": \"1/4/2022\",\n  \"department\": \"Marketing\"\n },\n {\n  \"id\": 10,\n  \"name\": \"Mano Meckiff\",\n  \"date\": \"2/19/2022\",\n  \"department\": \"Research and Development\"\n }\n]",
+                                          "showDataLoadSpinner": true,
+                                          "columns": [
+                                              {
+                                                  "title": "ID",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "id",
+                                                  "width": "55",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Name",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "name",
+                                                  "width": "200",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Date",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "date",
+                                                  "width": "110",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "text",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}"
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              },
+                                              {
+                                                  "title": "Department",
+                                                  "showTitle": true,
+                                                  "isCustom": false,
+                                                  "dataIndex": "department",
+                                                  "width": "250",
+                                                  "autoWidth": "fixed",
+                                                  "render": {
+                                                      "compType": "tag",
+                                                      "comp": {
+                                                          "text": "{{currentCell}}",
+                                                          "tagColors": {
+                                                              "optionType": "manual",
+                                                              "manual": {
+                                                                  "manual": [
+                                                                      {
+                                                                          "label": "Tag1",
+                                                                          "icon": "/icon:solid/tag",
+                                                                          "color": "#f50"
+                                                                      },
+                                                                      {
+                                                                          "label": "Tag2",
+                                                                          "icon": "/icon:solid/tag",
+                                                                          "color": "#2db7f5"
+                                                                      }
+                                                                  ]
+                                                              },
+                                                              "mapData": {
+                                                                  "data": "[]",
+                                                                  "mapData": {
+                                                                      "color": ""
+                                                                  }
+                                                              }
+                                                          }
+                                                      }
+                                                  },
+                                                  "align": "left",
+                                                  "fixed": "close",
+                                                  "background": "",
+                                                  "margin": "",
+                                                  "text": "",
+                                                  "border": "",
+                                                  "borderWidth": "",
+                                                  "radius": "",
+                                                  "textSize": "",
+                                                  "textWeight": "normal",
+                                                  "fontFamily": "sans-serif",
+                                                  "fontStyle": "normal",
+                                                  "textOverflow": "ellipsis",
+                                                  "linkColor": "#3377ff",
+                                                  "linkHoverColor": "",
+                                                  "linkActiveColor": "",
+                                                  "summaryColumns": [
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      },
+                                                      {
+                                                          "isCustom": false,
+                                                          "dataIndex": "",
+                                                          "render": {
+                                                              "compType": "text",
+                                                              "comp": {}
+                                                          },
+                                                          "align": "left",
+                                                          "background": "",
+                                                          "margin": "",
+                                                          "text": "",
+                                                          "border": "",
+                                                          "radius": "",
+                                                          "textSize": "",
+                                                          "textWeight": "normal",
+                                                          "fontFamily": "sans-serif",
+                                                          "fontStyle": "normal",
+                                                          "textOverflow": "ellipsis",
+                                                          "linkColor": "#3377ff",
+                                                          "linkHoverColor": "",
+                                                          "linkActiveColor": ""
+                                                      }
+                                                  ]
+                                              }
+                                          ],
+                                          "size": "middle",
+                                          "selection": {
+                                              "mode": "single"
+                                          },
+                                          "pagination": {
+                                              "changeablePageSize": null,
+                                              "pageSizeOptions": "[5, 10, 20, 50]"
+                                          },
+                                          "sort": [],
+                                          "toolbar": {
+                                              "showRefresh": true,
+                                              "showDownload": true,
+                                              "showFilter": true,
+                                              "position": "below",
+                                              "columnSeparator": ",",
+                                              "showUpdateButtons": true
+                                          },
+                                          "summaryRows": "1",
+                                          "rowAutoHeight": "auto",
+                                          "tableAutoHeight": "auto",
+                                          "expansion": {
+                                              "slot": {
+                                                  "container": {
+                                                      "layout": {}
+                                                  }
+                                              }
+                                          },
+                                          "editModeClicks": "single",
+                                          "preventStyleOverwriting": false,
+                                          "appliedThemeId": "",
+                                          "version": "latest"
+                                      },
+                                      "name": "table1"
+                                  }
+                              }
+                          }
+                      }
+                  },
+                  "footer": {
+                      "layout": {
+                          "3a74e36e": {
+                              "i": "3a74e36e",
+                              "h": 6,
+                              "w": 24,
+                              "x": 0,
+                              "y": 2,
+                              "pos": 0
+                          }
+                      },
+                      "items": {
+                          "3a74e36e": {
+                              "compType": "text",
+                              "comp": {
+                                  "text": "### Page Layout Footer",
+                                  "autoHeight": "auto",
+                                  "type": "markdown",
+                                  "horizontalAlignment": "center",
+                                  "contentScrollBar": true,
+                                  "verticalAlignment": "center",
+                                  "style": {
+                                      "background": "#fff"
+                                  },
+                                  "margin": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "padding": {
+                                      "left": "",
+                                      "right": "",
+                                      "top": "",
+                                      "bottom": ""
+                                  },
+                                  "preventStyleOverwriting": false,
+                                  "appliedThemeId": "",
+                                  "version": "latest"
+                              },
+                              "name": "text2"
+                          }
+                      }
+                  },
+                  "showHeader": true,
+                  "showSider": true,
+                  "innerSider": true,
+                  "siderCollapsible": true,
+                  "siderCollapsed": true,
+                  "siderRight": false,
+                  "siderWidth": "20%",
+                  "siderCollapsedWidth": "0",
+                  "showFooter": true,
+                  "horizontalGridCells": 24,
+                  "autoHeight": "auto",
+                  "siderScrollbars": false,
+                  "contentScrollbars": false,
+                  "mainScrollbars": false,
+                  "appliedThemeId": "",
+                  "style": {
+                      "border": "#6D83F2",
+                      "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                      "radius": "20px",
+                      "borderWidth": "3px",
+                      "borderStyle": "dashed",
+                      "margin": "5px",
+                      "padding": "10px"
+                  },
+                  "siderStyle": {
+                      "containerSiderPadding": "15px",
+                      "siderBackground": "#5589F2",
+                  },
+                  "headerStyle": {
+                    "containerHeaderPadding": "20px",
+                    "headerBackground": "#E68E50"
+                    },
+                    "bodyStyle":{
+                        "containerBodyPadding": "20px",
+                        "background": "linear-gradient(45deg, #cfd9df 0%, #e2ebf0 100%)"
+                    },
+                    "footerStyle":{
+                        "containerFooterPadding": "20px",
+                        "footerBackground": "#E67373"
+                    },
+                },
+            }}
+            compFactory={PageLayoutComp}
+            />
+        </ExampleGroup>
+
+        <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different Animation Styles on the Page Layout Component."
+        >
+        <Example
+            title="Bounce Animation"
+            width={1000}
+            hideSettings={true}
+            config={{
+                container: container,
+                animationStyle: 
+                {
+                    "animation": "bounce",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite",
+                },
+            }}
+            compFactory={PageLayoutComp}
+        />
+        <Example
+            title="Swing Animation"
+            width={1000}
+            hideSettings={true}
+            config={{
+                container: container,
+                animationStyle: {
+                    "animation": "swing",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite"
+                },
+            }}
+            compFactory={PageLayoutComp}
+        />
+        <Example
+            title="Tada Animation"
+            width={1000}
+            hideSettings={true}
+            config={{
+                container: container,
+                animationStyle: {
+                    "animation": "tada",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite"
+                },
+            }}
+            compFactory={PageLayoutComp}
+        />
+        </ExampleGroup>
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
index 23152d129..02e34dd8a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
@@ -342,7 +342,7 @@ export default function ResponsiveLayoutExample() {
       <>
         <ExampleGroup
           title="Basic Usage"
-          description="The Following Examples Show the Basic Usage of the Component."
+          description="The Following Examples Show the Basic Usage of the Responsive Layout Component."
         >
           <Example
             title="Hiding the Component"
@@ -376,7 +376,7 @@ export default function ResponsiveLayoutExample() {
 
         <ExampleGroup
           title="Layout"
-          description="The Following Examples Show the Layout options on Component."
+          description="The Following Examples Show the Layout options on the Responsive Layout Component."
         >
           <Example
             title="Column Height - Matching"
@@ -420,6 +420,181 @@ export default function ResponsiveLayoutExample() {
             compFactory={ResponsiveLayoutComp}
           />
         </ExampleGroup>
+
+        <ExampleGroup
+          title="Styling Properties"
+          description="The Following Examples Show the different Styling properties of the Responsive Layout Component."
+        >
+          <Example
+            title="Row Styling"
+            hideSettings={true}
+            width={1000}
+            config={{
+                containers: container,
+                columns: column,
+                style: {
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "border": "#043BFD",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "dashed",
+                    "margin": "5px",
+                    "padding": "20px",
+                    },
+                rowBreak: true,
+            }}
+            compFactory={ResponsiveLayoutComp}
+          />
+          <Example
+            title="Column Styling"
+            hideSettings={true}
+            width={1000}
+            config={{
+                containers: container,
+                columns: column,
+                columnStyle: 
+                {
+                    "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
+                    "border": "#222222",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "solid",
+                    "margin": "5px",
+                    "padding": "10px",
+                },
+                style: 
+                {
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "border": "#043BFD",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "dashed",
+                    "margin": "5px",
+                    "padding": "20px",
+                },
+                rowBreak: true,
+            }}
+            compFactory={ResponsiveLayoutComp}
+          />
+        </ExampleGroup>
+
+        <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different Animation Styles on the Responsive Layout Component."
+        >
+        <Example
+            title="Bounce Animation"
+            width={1000}
+            hideSettings={true}
+            config={{
+                containers: container,
+                columns: column,
+                columnStyle: 
+                {
+                    "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
+                    "border": "#222222",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "solid",
+                    "margin": "5px",
+                    "padding": "10px",
+                },
+                style: 
+                {
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "border": "#043BFD",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "dashed",
+                    "margin": "5px",
+                    "padding": "20px",
+                },
+                rowBreak: true,
+                animationStyle: 
+                {
+                    "animation": "bounce",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite",
+                },
+            }}
+            compFactory={ResponsiveLayoutComp}
+        />
+        <Example
+            title="Swing Animation"
+            width={1000}
+            hideSettings={true}
+            config={{
+                containers: container,
+                columns: column,
+                columnStyle: 
+                {
+                    "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
+                    "border": "#222222",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "solid",
+                    "margin": "5px",
+                    "padding": "10px",
+                },
+                style: 
+                {
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "border": "#043BFD",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "dashed",
+                    "margin": "5px",
+                    "padding": "20px",
+                },
+                rowBreak: true,
+                animationStyle: {
+                    "animation": "swing",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite"
+                },
+            }}
+            compFactory={ResponsiveLayoutComp}
+        />
+        <Example
+            title="Tada Animation"
+            width={1000}
+            hideSettings={true}
+            config={{
+                containers: container,
+                columns: column,
+                columnStyle: 
+                {
+                    "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
+                    "border": "#222222",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "solid",
+                    "margin": "5px",
+                    "padding": "10px",
+                },
+                style: 
+                {
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "border": "#043BFD",
+                    "radius": "20px",
+                    "borderWidth": "3px",
+                    "borderStyle": "dashed",
+                    "margin": "5px",
+                    "padding": "20px",
+                },
+                rowBreak: true,
+                animationStyle: {
+                    "animation": "tada",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite"
+                },
+            }}
+            compFactory={ResponsiveLayoutComp}
+        />
+        </ExampleGroup>
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx
index 84cade537..b25f0c150 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx
@@ -71,6 +71,17 @@ export default function SplitLayoutExample() {
             }}
             compFactory={SplitLayoutComp}
           />
+          <Example
+            title="Hiding the Split Layout component"
+            hideSettings={true}
+            width={1000}
+            config={{
+                bodyStyle: bodyStyle,
+                columnStyle: columnStyle, 
+                hidden: true,
+            }}
+            compFactory={SplitLayoutComp}
+          />
           <Example
             title="Multiple Split Layout containers ( Click on the icon at the center on right side ) "
             hideSettings={true}
@@ -185,8 +196,11 @@ export default function SplitLayoutExample() {
                 bodyStyle: {
                     "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
                     "border": "#222222",
-                    "borderWidth": "2px",
+                    "borderWidth": "3px",
                     "padding": "10px",
+                    "borderRadius": "20px",
+                    "margin": "5px",
+                    "borderStyle": "dashed",                   
                 },
                 columnStyle: columnStyle,
             }}
@@ -201,14 +215,71 @@ export default function SplitLayoutExample() {
                 columnStyle: {
                     "background": "linear-gradient(0deg, #f43b47 0%, #453a94 100%)",
                     "border": "#222222",
-                    "borderWidth": "2px",
+                    "borderWidth": "3px",
                     "borderStyle": "solid",
                     "margin": "10px",
+                    "padding": "20px",
+                    "borderRadius": "20px",
                 },
             }}
             compFactory={SplitLayoutComp}
           />
         </ExampleGroup>
+
+        <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different Animation Styles on the Split Layout Component."
+        >
+        <Example
+            title="Bounce Animation"
+            width={1000}
+            hideSettings={true}
+            config={{
+              bodyStyle: bodyStyle,
+              columnStyle: columnStyle,
+                animationStyle: 
+                {
+                    "animation": "bounce",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite",
+                },
+            }}
+            compFactory={SplitLayoutComp}
+        />
+        <Example
+            title="Swing Animation"
+            width={1000}
+            hideSettings={true}
+            config={{
+              bodyStyle: bodyStyle,
+              columnStyle: columnStyle,
+                animationStyle: {
+                    "animation": "swing",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite"
+                },
+            }}
+            compFactory={SplitLayoutComp}
+        />
+        <Example
+            title="Tada Animation"
+            width={1000}
+            hideSettings={true}
+            config={{
+              bodyStyle: bodyStyle,
+              columnStyle: columnStyle,
+                animationStyle: {
+                    "animation": "tada",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite"
+                },
+            }}
+            compFactory={SplitLayoutComp}
+        />
+        </ExampleGroup>
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
index 599157687..93c78ec9c 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
@@ -248,10 +248,18 @@ const tab={
 export default function TabbedContainerExample() {
     return (
       <>
+
         <ExampleGroup
           title="Basic Usage"
           description="The Following Examples Show the Basic Usage of the Tabbed Container Component."
         >
+          <Example
+            title="Default Tabbed Container Component"
+            hideSettings={true}
+            config={{
+            }}
+            compFactory={TabbedContainerComp}
+          />
           <Example
             title="Hiding the Tabbed Container Component"
             hideSettings={true}
@@ -365,6 +373,229 @@ export default function TabbedContainerExample() {
             compFactory={TabbedContainerComp}
           />
         </ExampleGroup>
+
+        <ExampleGroup
+          title="Styling Properties"
+          description="The Following Examples Show the different Styling Properties of the Tabbed Container Component."
+        >
+          <Example
+            title="Overall Component Styling"
+            hideSettings={true}
+            config={{ 
+              containers: container,
+              tabs: tab,
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "margin": "5px",
+                "padding": "15px",
+                "tabText": "#7F7F86",
+                "textTransform": "Uppercase",
+                "textDecoration": "underline",
+                "textSize": "20px",
+                "textWeight": "bold",
+                "fontFamily": "Courier New",
+                "fontStyle": "italic",
+                "border": "#5589F2",
+                "borderStyle": "solid",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "accent": "#222222",
+              },
+            }}
+            compFactory={TabbedContainerComp}
+          />
+          <Example
+            title="Header Styling"
+            hideSettings={true}
+            config={{ 
+              containers: container,
+              tabs: tab,
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "margin": "5px",
+                "padding": "15px",
+                "tabText": "#7F7F86",
+                "textTransform": "Uppercase",
+                "textDecoration": "underline",
+                "textSize": "20px",
+                "textWeight": "bold",
+                "fontFamily": "Courier New",
+                "fontStyle": "italic",
+                "border": "#5589F2",
+                "borderStyle": "solid",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "accent": "#222222",
+              },
+              headerStyle:{
+                "containerHeaderPadding": "10px",
+                "headerBackground": "#FFE607"
+              },
+            }}
+            compFactory={TabbedContainerComp}
+          />
+          <Example
+            title="Body Styling"
+            hideSettings={true}
+            config={{ 
+              containers: container,
+              tabs: tab,
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "margin": "5px",
+                "padding": "15px",
+                "tabText": "#7F7F86",
+                "textTransform": "Uppercase",
+                "textDecoration": "underline",
+                "textSize": "20px",
+                "textWeight": "bold",
+                "fontFamily": "Courier New",
+                "fontStyle": "italic",
+                "border": "#5589F2",
+                "borderStyle": "solid",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "accent": "#222222",
+              },
+              headerStyle:{
+                "containerHeaderPadding": "10px",
+                "headerBackground": "#FFE607",
+              },
+              bodyStyle:{
+                "containerBodyPadding": "20px",
+                "background": "#E1825A",
+              },
+            }}
+            compFactory={TabbedContainerComp}
+          />
+        </ExampleGroup>
+
+        <ExampleGroup
+          title="Animation Style"
+          description="The Following Examples Show different Animation Styles on the Tabbed Container Component."
+          >
+          <Example
+              title="Bounce Animation"
+              hideSettings={true}
+              config={{
+                containers: container,
+                tabs: tab,
+                style: {
+                  "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                  "margin": "5px",
+                  "padding": "15px",
+                  "tabText": "#7F7F86",
+                  "textTransform": "Uppercase",
+                  "textDecoration": "underline",
+                  "textSize": "20px",
+                  "textWeight": "bold",
+                  "fontFamily": "Courier New",
+                  "fontStyle": "italic",
+                  "border": "#5589F2",
+                  "borderStyle": "solid",
+                  "radius": "20px",
+                  "borderWidth": "3px",
+                  "accent": "#222222",
+                },
+                headerStyle:{
+                  "containerHeaderPadding": "10px",
+                  "headerBackground": "#FFE607",
+                },
+                bodyStyle:{
+                  "containerBodyPadding": "20px",
+                  "background": "#E1825A",
+                },
+                animationStyle: 
+                {
+                    "animation": "bounce",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite",
+                },
+              }}
+              compFactory={TabbedContainerComp}
+          />
+          <Example
+              title="Swing Animation"
+              hideSettings={true}
+              config={{
+                containers: container,
+                tabs: tab,
+                style: {
+                  "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                  "margin": "5px",
+                  "padding": "15px",
+                  "tabText": "#7F7F86",
+                  "textTransform": "Uppercase",
+                  "textDecoration": "underline",
+                  "textSize": "20px",
+                  "textWeight": "bold",
+                  "fontFamily": "Courier New",
+                  "fontStyle": "italic",
+                  "border": "#5589F2",
+                  "borderStyle": "solid",
+                  "radius": "20px",
+                  "borderWidth": "3px",
+                  "accent": "#222222",
+                },
+                headerStyle:{
+                  "containerHeaderPadding": "10px",
+                  "headerBackground": "#FFE607",
+                },
+                bodyStyle:{
+                  "containerBodyPadding": "20px",
+                  "background": "#E1825A",
+                },
+                animationStyle: {
+                    "animation": "swing",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite"
+                },
+              }}
+              compFactory={TabbedContainerComp}
+          />
+          <Example
+              title="Tada Animation"
+              hideSettings={true}
+              config={{
+                containers: container,
+                tabs: tab,
+                style: {
+                  "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                  "margin": "5px",
+                  "padding": "15px",
+                  "tabText": "#7F7F86",
+                  "textTransform": "Uppercase",
+                  "textDecoration": "underline",
+                  "textSize": "20px",
+                  "textWeight": "bold",
+                  "fontFamily": "Courier New",
+                  "fontStyle": "italic",
+                  "border": "#5589F2",
+                  "borderStyle": "solid",
+                  "radius": "20px",
+                  "borderWidth": "3px",
+                  "accent": "#222222",
+                },
+                headerStyle:{
+                  "containerHeaderPadding": "10px",
+                  "headerBackground": "#FFE607",
+                },
+                bodyStyle:{
+                  "containerBodyPadding": "20px",
+                  "background": "#E1825A",
+                },
+                animationStyle: {
+                    "animation": "tada",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite"
+                },
+              }}
+              compFactory={TabbedContainerComp}
+        />
+        </ExampleGroup>
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
index e0725ab3c..04f46183a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
@@ -54,6 +54,18 @@ export default function BPMNEditorExample() {
           }}
           compFactory={ChartCompWithDefault}
         />
+        <Example
+          title="Naming Downloaded File - Click on Download link"
+          height={400}
+          width={1000}
+          hideSettings={true}
+          config={{
+            designer: true,
+            svgDownload: true,
+            imageName: "Lowcoder_Image",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
       </ExampleGroup>
 
       <ExampleGroup
@@ -71,7 +83,9 @@ export default function BPMNEditorExample() {
               "margin": "10px",
               "textSize": "30px",
               "backgroundColor": "#D7D9E0",
-              "border": "#222222"
+              "border": "#222222",
+              "radius": "20px",
+              "borderWidth": "3px",
             },
           }}
           compFactory={ChartCompWithDefault}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
index 40ce62bc2..5a6e1d6c0 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
@@ -47,6 +47,333 @@ export default function ContentCardExample() {
             compFactory={CardComp}
           />
         </ExampleGroup>
+
+        <ExampleGroup
+          title="Styling Properties"
+          description="The Following Examples Show the different Styling properties of the Card Component."
+        >
+          <Example
+            title="Backround Color, Icon Color, Padding and Border properties"
+            config={{
+              title: "Jennifer Holmes",
+              metaTitle: "Head Cook",
+              metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "IconColor": "#FF0101",
+                "activateColor": "#5589F2",
+                "containerBodyPadding": "20px",
+                "padding": "10px",
+                "border": "#023BFF",
+                "borderStyle": "dashed",
+                "radius": "20px",
+                "borderWidth": "3px",
+              },
+            }}
+            compFactory={CardComp}
+          />
+          <Example
+            title="Box Shadow & Rotation"
+            config={{
+              title: "Jennifer Holmes",
+              metaTitle: "Head Cook",
+              metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",           
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "IconColor": "#FF0101",
+                "activateColor": "#5589F2",
+                "containerBodyPadding": "20px",
+                "padding": "10px",
+                "border": "#023BFF",
+                "borderStyle": "dashed",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "boxShadow": "16px 16px 16px",
+                "boxShadowColor": "#181717",
+                "rotation": "45deg"
+              },
+            }}
+            compFactory={CardComp}
+          />
+          <Example
+            title="Header Styling"
+            width={500}
+            config={{
+              title: "Jennifer Holmes",
+              metaTitle: "Head Cook",
+              metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "IconColor": "#FF0101",
+                "activateColor": "#5589F2",
+                "containerBodyPadding": "20px",
+                "padding": "10px",
+                "border": "#023BFF",
+                "borderStyle": "dashed",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "boxShadow": "16px 16px 16px",
+                "boxShadowColor": "#181717",
+              },
+              headerStyle: {
+                "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+                "margin": "10px",
+                "padding": "20px",
+                "text": "#4A5EC4",
+                "textTransform": "Uppercase",
+                "textDecoration": "underline",
+                "textSize": "20px",
+                "textWeight": "bold",
+                "fontFamily": "Courier New",
+                "fontStyle": "Italic",
+                "border": "#FA0101",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "rotation": "-2deg",
+             },
+            }}
+            compFactory={CardComp}
+          />
+          <Example
+            title="Body Styling"
+            width={500}
+            config={{
+              title: "Jennifer Holmes",
+              metaTitle: "Head Cook",
+              metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "IconColor": "#FF0101",
+                "activateColor": "#5589F2",
+                "containerBodyPadding": "20px",
+                "padding": "10px",
+                "border": "#023BFF",
+                "borderStyle": "dashed",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "boxShadow": "16px 16px 16px",
+                "boxShadowColor": "#181717",
+              },
+              headerStyle: {
+                "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+                "margin": "10px",
+                "padding": "20px",
+                "text": "#4A5EC4",
+                "textTransform": "Uppercase",
+                "textDecoration": "underline",
+                "textSize": "20px",
+                "textWeight": "bold",
+                "fontFamily": "Courier New",
+                "fontStyle": "Italic",
+                "border": "#FA0101",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "rotation": "-2deg",
+             },
+             bodyStyle: {
+                "background": "#FFD90D",
+                "margin": "5px",
+                "padding": "20px",
+                "text": "#027B0E",
+                "textTransform": "lowercase",
+                "textSize": "16px",
+                "textWeight": "bold",
+                "fontFamily": "Verdana",
+                "fontStyle": "Italic",
+                "border": "#F76F01",
+                "borderStyle": "dashed",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "rotation": "3deg"
+              },
+            }}
+            compFactory={CardComp}
+          />
+        </ExampleGroup>
+
+        <ExampleGroup
+          title="Animation Style"
+          description="The Following Examples Show different Animation Styles on the Content Card Component."
+          >
+          <Example
+            title="Bounce Animation"
+            hideSettings={true}
+            config={{
+                animationStyle: 
+                {
+                    "animation": "bounce",
+                    "animationDelay": "1s",
+                    "animationDuration": "3s",
+                    "animationIterationCount": "infinite",
+                },
+                title: "Jennifer Holmes",
+                metaTitle: "Head Cook",
+                metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+                style: {
+                  "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                  "IconColor": "#FF0101",
+                  "activateColor": "#5589F2",
+                  "containerBodyPadding": "20px",
+                  "padding": "10px",
+                  "border": "#023BFF",
+                  "borderStyle": "dashed",
+                  "radius": "20px",
+                  "borderWidth": "3px",
+                  "boxShadow": "16px 16px 16px",
+                  "boxShadowColor": "#181717",
+                },
+                headerStyle: {
+                  "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+                  "margin": "10px",
+                  "padding": "20px",
+                  "text": "#4A5EC4",
+                  "textTransform": "Uppercase",
+                  "textDecoration": "underline",
+                  "textSize": "20px",
+                  "textWeight": "bold",
+                  "fontFamily": "Courier New",
+                  "fontStyle": "Italic",
+                  "border": "#FA0101",
+                  "radius": "20px",
+                  "borderWidth": "3px",
+                },
+                bodyStyle: {
+                  "background": "#FFD90D",
+                  "margin": "5px",
+                  "padding": "20px",
+                  "text": "#027B0E",
+                  "textTransform": "lowercase",
+                  "textSize": "12px",
+                  "textWeight": "bold",
+                  "fontFamily": "Verdana",
+                  "fontStyle": "Italic",
+                  "border": "#F76F01",
+                  "borderStyle": "solid",
+                  "radius": "20px",
+                  "borderWidth": "3px",
+                },
+            }}
+            compFactory={CardComp}
+          />
+          <Example
+            title="Swing Animation"
+            hideSettings={true}
+            config={{
+              title: "Jennifer Holmes",
+              metaTitle: "Head Cook",
+              metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "IconColor": "#FF0101",
+                "activateColor": "#5589F2",
+                "containerBodyPadding": "20px",
+                "padding": "10px",
+                "border": "#023BFF",
+                "borderStyle": "dashed",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "boxShadow": "16px 16px 16px",
+                "boxShadowColor": "#181717",
+              },
+              headerStyle: {
+                "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+                "margin": "10px",
+                "padding": "20px",
+                "text": "#4A5EC4",
+                "textTransform": "Uppercase",
+                "textDecoration": "underline",
+                "textSize": "20px",
+                "textWeight": "bold",
+                "fontFamily": "Courier New",
+                "fontStyle": "Italic",
+                "border": "#FA0101",
+                "radius": "20px",
+                "borderWidth": "3px",
+              },
+              bodyStyle: {
+                "background": "#FFD90D",
+                "margin": "5px",
+                "padding": "20px",
+                "text": "#027B0E",
+                "textTransform": "lowercase",
+                "textSize": "12px",
+                "textWeight": "bold",
+                "fontFamily": "Verdana",
+                "fontStyle": "Italic",
+                "border": "#F76F01",
+                "borderStyle": "solid",
+                "radius": "20px",
+                "borderWidth": "3px",
+              },
+              animationStyle: {
+                "animation": "swing",
+                "animationDelay": "1s",
+                "animationDuration": "3s",
+                "animationIterationCount": "infinite"
+              },
+            }}
+            compFactory={CardComp}
+          />
+          <Example
+            title="Tada Animation"
+            hideSettings={true}
+            config={{
+              title: "Jennifer Holmes",
+              metaTitle: "Head Cook",
+              metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "IconColor": "#FF0101",
+                "activateColor": "#5589F2",
+                "containerBodyPadding": "20px",
+                "padding": "10px",
+                "border": "#023BFF",
+                "borderStyle": "dashed",
+                "radius": "20px",
+                "borderWidth": "3px",
+                "boxShadow": "16px 16px 16px",
+                "boxShadowColor": "#181717",
+              },
+              headerStyle: {
+                "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+                "margin": "10px",
+                "padding": "20px",
+                "text": "#4A5EC4",
+                "textTransform": "Uppercase",
+                "textDecoration": "underline",
+                "textSize": "20px",
+                "textWeight": "bold",
+                "fontFamily": "Courier New",
+                "fontStyle": "Italic",
+                "border": "#FA0101",
+                "radius": "20px",
+                "borderWidth": "3px",
+              },
+              bodyStyle: {
+                "background": "#FFD90D",
+                "margin": "5px",
+                "padding": "20px",
+                "text": "#027B0E",
+                "textTransform": "lowercase",
+                "textSize": "12px",
+                "textWeight": "bold",
+                "fontFamily": "Verdana",
+                "fontStyle": "Italic",
+                "border": "#F76F01",
+                "borderStyle": "solid",
+                "radius": "20px",
+                "borderWidth": "3px",
+              },
+              animationStyle: {
+                "animation": "tada",
+                "animationDelay": "1s",
+                "animationDuration": "3s",
+                "animationIterationCount": "infinite"
+              },
+            }}
+            compFactory={CardComp}
+        />
+        </ExampleGroup>
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
index f6a05c68b..102723691 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
@@ -30,14 +30,29 @@ export default function MentionCompExample() {
           }}
           compFactory={MentionComp}
         />
+        <Example
+          title="Disabling the Mention Component"
+          config={{
+            disabled: true,
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Hiding the Mention Component"
+          config={{
+            hidden: true,
+          }}
+          compFactory={MentionComp}
+        />
       </ExampleGroup>
 
       <ExampleGroup
-        title="Styling Properties"
-        description="The Following Examples Show the Styling Properties of the Mention Component."
+        title="Label Properties"
+        description="The Following Examples Show the Label Properties of the Mention Component."
       >
         <Example
           title="Label Name"
+          width={500}
           config={{
             label: {
               "text": "Mention Component",
@@ -47,6 +62,7 @@ export default function MentionCompExample() {
         />
         <Example
           title="Label Tooltip"
+          width={500}
           config={{
             label: {
               "text": "Mention Component",
@@ -57,6 +73,7 @@ export default function MentionCompExample() {
         />
         <Example
           title="Label Position & Alignment - Left & Left"
+          width={500}
           config={{
             label: {
               "text": "Mention Component",
@@ -68,6 +85,7 @@ export default function MentionCompExample() {
         />
         <Example
           title="Label Position & Alignment - Left & Right"
+          width={500}
           config={{
             label: {
               "text": "Mention Component",
@@ -79,6 +97,7 @@ export default function MentionCompExample() {
         />
         <Example
           title="Label Position & Alignment - Top & Left"
+          width={500}
           config={{
             label: {
               "text": "Mention Component",
@@ -90,6 +109,7 @@ export default function MentionCompExample() {
         />
         <Example
           title="Label Position & Alignment - Top & Right"
+          width={500}
           config={{
             label: {
               "text": "Mention Component",
@@ -101,6 +121,7 @@ export default function MentionCompExample() {
         />
         <Example
           title="Label Width - 10%"
+          width={500}
           config={{
             label: {
               "text": "Mention Component",
@@ -122,6 +143,107 @@ export default function MentionCompExample() {
           compFactory={MentionComp}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the Segmented Control Component."
+      >
+        <Example
+          title="Background Color, Border Radius,Style,Width,Color"
+          config={{
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#0139FF",
+              "borderStyle": "dashed",
+              "radius": "10px",
+              "borderWidth": "2px",
+              "accent": "#FAD301",
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Margin & Padding"
+          config={{
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "margin": "5px",
+              "padding": "10px",
+              "border": "#0139FF",
+              "borderStyle": "dashed",
+              "radius": "10px",
+              "borderWidth": "2px",
+              "accent": "#FAD301",
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Text Color, Size, Weight, Font family, Border properties"
+          config={{
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "margin": "5px",
+              "padding": "10px",
+              "text": "#FF0404",
+              "textTransform": "uppercase",
+              "textDecoration": "underline",
+              "textSize": "20px",
+              "textWeight": "bold",
+              "fontFamily": "Courier New",
+              "fontStyle": "oblique",
+              "border": "#0139FF",
+              "borderStyle": "dashed",
+              "radius": "10px",
+              "borderWidth": "2px",
+              "accent": "#FAD301",
+            },
+          }}
+          compFactory={MentionComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Segmented Control Component."
+      >
+        <Example
+          title="Bounce Animation"
+          config={{
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Swing Animation"
+          config={{
+            animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Tada Animation"
+          config={{
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={MentionComp}
+        />
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
index eaa8ddada..bb9d05308 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
@@ -186,7 +186,7 @@ export default function FormExample() {
           hideSettings={true}
           config={{
             container: container,
-            disableSubmit: "true", 
+            disableSubmit: "true",
           }}
           compFactory={FormComp}
         />
@@ -199,9 +199,26 @@ export default function FormExample() {
           }}
           compFactory={FormComp}
         />
+        <Example
+          title="Reset after Form Submit - True"
+          hideSettings={true}
+          config={{
+            container: container,
+            resetAfterSubmit: true, 
+          }}
+          compFactory={FormComp}
+        />
+        <Example
+          title="Reset after Form Submit - False"
+          hideSettings={true}
+          config={{
+            container: container,
+            resetAfterSubmit: false, 
+          }}
+          compFactory={FormComp}
+        />
       </ExampleGroup>
 
-
       <ExampleGroup
         title="Layout"
         description="The Following Examples Show the Layout options on the Form Component."
@@ -659,6 +676,380 @@ export default function FormExample() {
           compFactory={FormComp}
         />
       </ExampleGroup>
+
+        <ExampleGroup
+            title="Styling Properties"
+            description="The Following Examples Show the different Styling properties on the Form Component."
+            >
+            <Example
+                title="Background Color, Border Radius,Style,Width,Color"
+                hideSettings={true}
+                config={{
+                    container: {
+                        "header": {
+                            "layout": {
+                                "68d42007": {
+                                    "i": "68d42007",
+                                    "h": 5,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "68d42007": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Welcome Back",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "showDataLoadingIndicators": false,
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formTitle1"
+                                }
+                            }
+                        },
+                        "body": {
+                            "0": {
+                                "view": {
+                                    "layout": {
+                                        "4b9ae86d": {
+                                            "i": "4b9ae86d",
+                                            "h": 7,
+                                            "w": 8,
+                                            "x": 0,
+                                            "y": 0,
+                                            "pos": 0
+                                        },
+                                        "e74dc9d9": {
+                                            "i": "e74dc9d9",
+                                            "h": 7,
+                                            "w": 8,
+                                            "x": 0,
+                                            "y": 7,
+                                            "pos": 1
+                                        }
+                                    },
+                                    "items": {
+                                        "4b9ae86d": {
+                                            "compType": "input",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Email",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Email",
+                                                "showDataLoadingIndicators": false,
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "input1"
+                                        },
+                                        "e74dc9d9": {
+                                            "compType": "password",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Password",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Regex",
+                                                "regex": "test",
+                                                "visibilityToggle": true,
+                                                "showDataLoadingIndicators": false,
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "password1"
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        "footer": {
+                            "layout": {
+                                "64227c09": {
+                                    "i": "64227c09",
+                                    "h": 6,
+                                    "w": 5,
+                                    "x": 19,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "64227c09": {
+                                    "compType": "button",
+                                    "comp": {
+                                        "text": "Login",
+                                        "type": "submit",
+                                        "form": "form1",
+                                        "showDataLoadingIndicators": false,
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formButton1"
+                                }
+                            }
+                        },
+                        "showHeader": true,
+                        "showBody": true,
+                        "showFooter": true,
+                        "autoHeight": "auto",
+                        "showVerticalScrollbar": false,
+                        "horizontalGridCells": 24,
+                        "scrollbars": false,
+                        "style": {
+                            "border": "#3377FF",
+                            "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                            "radius": "20px",
+                            "borderWidth": "3px",
+                            "borderStyle": "dashed",
+                        },
+                        "appliedThemeId": ""
+                    },
+                }}
+                compFactory={FormComp}
+            />
+            <Example
+                title="Margin & Padding"
+                hideSettings={true}
+                config={{
+                    container: {
+                        "header": {
+                            "layout": {
+                                "68d42007": {
+                                    "i": "68d42007",
+                                    "h": 5,
+                                    "w": 24,
+                                    "x": 0,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "68d42007": {
+                                    "compType": "text",
+                                    "comp": {
+                                        "text": "### Welcome Back",
+                                        "autoHeight": "auto",
+                                        "type": "markdown",
+                                        "horizontalAlignment": "center",
+                                        "contentScrollBar": true,
+                                        "verticalAlignment": "center",
+                                        "margin": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "padding": {
+                                            "left": "",
+                                            "right": "",
+                                            "top": "",
+                                            "bottom": ""
+                                        },
+                                        "showDataLoadingIndicators": false,
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formTitle1"
+                                }
+                            }
+                        },
+                        "body": {
+                            "0": {
+                                "view": {
+                                    "layout": {
+                                        "4b9ae86d": {
+                                            "i": "4b9ae86d",
+                                            "h": 7,
+                                            "w": 8,
+                                            "x": 0,
+                                            "y": 0,
+                                            "pos": 0
+                                        },
+                                        "e74dc9d9": {
+                                            "i": "e74dc9d9",
+                                            "h": 7,
+                                            "w": 8,
+                                            "x": 0,
+                                            "y": 7,
+                                            "pos": 1
+                                        }
+                                    },
+                                    "items": {
+                                        "4b9ae86d": {
+                                            "compType": "input",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Email",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Email",
+                                                "showDataLoadingIndicators": false,
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "input1"
+                                        },
+                                        "e74dc9d9": {
+                                            "compType": "password",
+                                            "comp": {
+                                                "defaultValue": "",
+                                                "value": "",
+                                                "label": {
+                                                    "text": "Password",
+                                                    "width": "33",
+                                                    "widthUnit": "%",
+                                                    "position": "row",
+                                                    "align": "left"
+                                                },
+                                                "validationType": "Regex",
+                                                "regex": "test",
+                                                "visibilityToggle": true,
+                                                "showDataLoadingIndicators": false,
+                                                "preventStyleOverwriting": false,
+                                                "appliedThemeId": "",
+                                                "version": "latest"
+                                            },
+                                            "name": "password1"
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        "footer": {
+                            "layout": {
+                                "64227c09": {
+                                    "i": "64227c09",
+                                    "h": 6,
+                                    "w": 5,
+                                    "x": 19,
+                                    "y": 0
+                                }
+                            },
+                            "items": {
+                                "64227c09": {
+                                    "compType": "button",
+                                    "comp": {
+                                        "text": "Login",
+                                        "type": "submit",
+                                        "form": "form1",
+                                        "showDataLoadingIndicators": false,
+                                        "preventStyleOverwriting": false,
+                                        "appliedThemeId": "",
+                                        "version": "latest"
+                                    },
+                                    "name": "formButton1"
+                                }
+                            }
+                        },
+                        "showHeader": true,
+                        "showBody": true,
+                        "showFooter": true,
+                        "autoHeight": "auto",
+                        "showVerticalScrollbar": false,
+                        "horizontalGridCells": 24,
+                        "scrollbars": false,
+                        "style": {
+                            "border": "#3377FF",
+                            "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                            "radius": "20px",
+                            "borderWidth": "3px",
+                            "borderStyle": "dashed",
+                            "margin": "5px",
+                            "padding": "20px"
+                        },
+                        "appliedThemeId": ""
+                    },
+                }}
+                compFactory={FormComp}
+            />
+        </ExampleGroup>
+
+        <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Form Component."
+        >
+        <Example
+        title="Bounce Animation"
+        hideSettings={true}
+        config={{
+            container: container, 
+            animationStyle: {
+            "animation": "bounce",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+        }}
+        compFactory={FormComp}
+        />
+        <Example
+        title="Swing Animation"
+        hideSettings={true}
+        config={{
+            container: container, 
+            animationStyle: {
+            "animation": "swing",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+        }}
+        compFactory={FormComp}
+        />
+        <Example
+        title="Tada Animation"
+        hideSettings={true}
+        config={{
+            container: container, 
+            animationStyle: {
+            "animation": "tada",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+        }}
+        compFactory={FormComp}
+        />
+        </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
index dc1b3db1f..6f618a863 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
@@ -18,9 +18,6 @@ export default function JsonEditorExample() {
           title="A Simple JSON Editor Form "
           hideSettings={true}
           config={{
-            schema: schema,
-            uiSchema: uiSchema,
-            data: data,
           }}
           compFactory={JsonEditorComp}
         />
@@ -28,9 +25,6 @@ export default function JsonEditorExample() {
           title="Hiding the JSON Editor Form "
           hideSettings={true}
           config={{
-            schema: schema,
-            uiSchema: uiSchema,
-            data: data,
             hidden: true,
           }}
           compFactory={JsonEditorComp}
@@ -127,6 +121,51 @@ export default function JsonEditorExample() {
           compFactory={JsonEditorComp}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the JSON Editor Component."
+        >
+        <Example
+          title="Bounce Animation"
+          hideSettings={true}
+          config={{
+            animationStyle: {
+            "animation": "bounce",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+         compFactory={JsonEditorComp}
+        />
+        <Example
+          title="Swing Animation"
+          hideSettings={true}
+          config={{
+            animationStyle: {
+            "animation": "swing",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={JsonEditorComp}
+        />
+      <Example
+      title="Tada Animation"
+      hideSettings={true}
+      config={{
+          animationStyle: {
+          "animation": "tada",
+          "animationDelay": "1s",
+          "animationDuration": "3s",
+          "animationIterationCount": "infinite"
+          },
+      }}
+      compFactory={JsonEditorComp}
+      />
+      </ExampleGroup> 
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
index 022c55088..156e3b15f 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
@@ -68,6 +68,51 @@ export default function JsonExplorerExample() {
           compFactory={JsonExplorerComp}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the JSON Explorer Component."
+        >
+        <Example
+          title="Bounce Animation"
+          hideSettings={true}
+          config={{
+            animationStyle: {
+            "animation": "bounce",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={JsonExplorerComp}
+        />
+        <Example
+          title="Swing Animation"
+          hideSettings={true}
+          config={{
+            animationStyle: {
+            "animation": "swing",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={JsonExplorerComp}
+        />
+        <Example
+        title="Tada Animation"
+        hideSettings={true}
+        config={{
+            animationStyle: {
+            "animation": "tada",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+        }}
+        compFactory={JsonExplorerComp}
+      />
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
index 61b2fa22a..834169e73 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
@@ -13,28 +13,96 @@ export default function jsonSchemaFormExample() {
         <Example
           title="A Simple JSON Schema Form"
           hideSettings={true}
-          config={{
-            schema:
-              '{\n  "title": "User profile",\n  "description": "form example",\n  "type": "object",\n  "required": [\n    "name",\n    "phone"\n  ],\n  "properties": {\n    "name": {\n      "type": "string",\n      "title": "Name"\n    },\n    "phone": {\n      "type": "string",\n      "title": "Phone",\n      "minLength": 11\n    },\n    "birthday": {\n      "type": "string",\n      "title": "Birthday"\n    }\n  }\n}',
-            uiSchema:
-              '{\n  "name": {\n    "ui:autofocus": true,\n    "ui:emptyValue": ""\n  },\n  "phone": {\n    "ui:help": "Please input a 11 digits number"\n  },\n  "birthday": {\n    "ui:widget": "date"\n  }\n}',
-            data: '{\n  "name": "Tom",\n  "phone": "13488886666",\n  "birthday": "1980-03-16"\n}',
-          }}
+          config={{}}
           compFactory={JsonSchemaFormComp}
         />
         <Example
           title="Hiding the JSON Schema Form"
           hideSettings={true}
           config={{
-            schema:
-              '{\n  "title": "User profile",\n  "description": "form example",\n  "type": "object",\n  "required": [\n    "name",\n    "phone"\n  ],\n  "properties": {\n    "name": {\n      "type": "string",\n      "title": "Name"\n    },\n    "phone": {\n      "type": "string",\n      "title": "Phone",\n      "minLength": 11\n    },\n    "birthday": {\n      "type": "string",\n      "title": "Birthday"\n    }\n  }\n}',
-            uiSchema:
-              '{\n  "name": {\n    "ui:autofocus": true,\n    "ui:emptyValue": ""\n  },\n  "phone": {\n    "ui:help": "Please input a 11 digits number"\n  },\n  "birthday": {\n    "ui:widget": "date"\n  }\n}',
-            data: '{\n  "name": "Tom",\n  "phone": "13488886666",\n  "birthday": "1980-03-16"\n}',
             hidden: true,
           }}
           compFactory={JsonSchemaFormComp}
         />
+        <Example
+          title="Reset after Form Submit - True"
+          hideSettings={true}
+          config={{
+            resetAfterSubmit: true, 
+          }}
+          compFactory={JsonSchemaFormComp}
+        />
+        <Example
+          title="Reset after Form Submit - False"
+          hideSettings={true}
+          config={{
+            resetAfterSubmit: false, 
+          }}
+          compFactory={JsonSchemaFormComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the JSON Schema Component."
+        >
+        <Example
+          title="Background Color, Border Radius and Color"
+          hideSettings={true}
+          config={{
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#3377FF",
+              "radius": "20px"
+            },
+          }}
+          compFactory={JsonSchemaFormComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the JSON Schema Component."
+        >
+        <Example
+          title="Bounce Animation"
+          hideSettings={true}
+          config={{
+            animationStyle: {
+            "animation": "bounce",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={JsonSchemaFormComp}
+        />
+        <Example
+          title="Swing Animation"
+          hideSettings={true}
+          config={{
+            animationStyle: {
+            "animation": "swing",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={JsonSchemaFormComp}
+        />
+        <Example
+        title="Tada Animation"
+        hideSettings={true}
+        config={{
+            animationStyle: {
+            "animation": "tada",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+        }}
+        compFactory={JsonSchemaFormComp}
+      />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
index 66d448281..c01ecb089 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
@@ -8,45 +8,57 @@ export default function RangeSliderExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Range Slider Component."
       >
         <Example
           title={trans("componentDoc.default")}
           config={{
-            value: "60",
-            disabled: "false",
-            start: "10",
-            end: "70",
-            min: "0",
-            max: "100",
-            step: "10",
           }}
           compFactory={RangeSliderComp}
         />
         <Example
           title={trans("componentDoc.disabled")}
           config={{
-            value: "60",
             disabled: "true",
-            start: "10",
-            end: "70",
-            max: "100",
-            min: "0",
-            step: "10",
           }}
           compFactory={RangeSliderComp}
         />
         <Example
-          title={trans("componentDoc.default")}
+          title="Hiding the Range Slider component"
+          config={{
+            hidden: true,
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Step Size - 10"
           config={{
-            value: "60",
-            disabled: "false",
-            start: "10",
-            end: "70",
-            min: "0",
-            max: "100",
             step: "10",
-            vertical: true,
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Step Size - 20"
+          config={{
+            step: "20",
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Setting Minimum & Maximum Values"
+          config={{
+            min: "30",
+            max: "150",
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Setting Minimum & Maximum Values"
+          config={{
+            min: "30",
+            max: "150",
+            start: "70",
+            end: "140",
           }}
           compFactory={RangeSliderComp}
         />
@@ -97,6 +109,198 @@ export default function RangeSliderExample() {
           }}
           compFactory={RangeSliderComp}
         />
+        <Example
+          title="Tooltip on Hover"
+          config={{
+            label: {
+              text: trans("componentDoc.labelText"),
+              tooltip: "This is a Tooltip displayed on Hover",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup 
+        title="Layout Options"
+        description="The Following Examples Show the Layout Options of the Slider Component."
+      >
+        <Example
+          title="Prefix Icon"
+          config={{
+            prefixIcon: "/icon:solid/arrow-down-wide-short",
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Suffix Icon"
+          config={{
+            suffixIcon: "/icon:solid/arrow-up-wide-short",
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Prefix & Suffix Icon"
+          config={{
+            prefixIcon: "/icon:solid/arrow-down-wide-short",
+            suffixIcon: "/icon:solid/arrow-up-wide-short",
+          }}
+          compFactory={RangeSliderComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the Range Slider Component."
+      >
+        <Example
+          title="Background Color, Border Radius,Style,Width,Color"
+          config={{
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "borderStyle": "solid",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Margin & Padding"
+          config={{
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "margin": "10px",
+              "padding": "10px",
+              "borderStyle": "dashed",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Opacity - 0.2"
+          config={{
+            style: {
+              "opacity": "0.2",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Opacity - 0.5"
+          config={{
+            style: {
+              "opacity": "0.5",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Opacity - 0.7"
+          config={{
+            style: {
+              "opacity": "0.7",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Opacity - 1"
+          config={{
+            style: {
+              "opacity": "1",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Rotation - 90deg"
+          config={{
+            style: {
+              "rotation": "90deg",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Label - Text Color, Size, Weight, Font family, Border properties"
+          config={{
+            labelStyle: {
+              "margin": "5px",
+              "padding": "5px",
+              "label": "#3377FF",
+              "textTransform": "Uppercase",
+              "textDecoration": "underline",
+              "textSize": "13px",
+              "textWeight": "bold",
+              "fontFamily": "Courier New",
+              "fontStyle": "Italic",
+              "border": "#36B389",
+              "borderStyle": "solid",
+              "borderWidth": "2px",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Input Field Style"
+          config={{
+            inputFieldStyle: {
+              "fill": "#36B389",
+              "thumbBorder": "#222222",
+              "thumb": "#FFD501",
+              "track": "#E68E50",
+              "margin": "5px",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Slider Component."
+      >
+        <Example
+          title="Bounce Animation"
+          config={{
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Swing Animation"
+          config={{
+            animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
+        <Example
+          title="Tada Animation"
+          config={{
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite",
+            },
+          }}
+          compFactory={RangeSliderComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
index 24fbdbf66..3fab535bb 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
@@ -8,16 +8,12 @@ export default function SliderExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Slider Component."
       >
         <Example
           title={trans("componentDoc.default")}
           config={{
             value: "60",
-            disabled: "false",
-            min: "0",
-            max: "100",
-            step: "10",
           }}
           compFactory={SliderComp}
         />
@@ -25,28 +21,43 @@ export default function SliderExample() {
           title={trans("componentDoc.disabled")}
           config={{
             disabled: "true",
-            value: "60",
-            max: "100",
-            min: "0",
-            step: "10",
           }}
           compFactory={SliderComp}
         />
         <Example
-          title={trans("componentDoc.default")}
+          title="Hiding the Slider component"
+          config={{
+            hidden: "true",
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Step Size - 10"
           config={{
-            value: "60",
-            disabled: "false",
-            min: "0",
-            max: "100",
             step: "10",
-            vertical: true,
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Step Size - 20"
+          config={{
+            step: "20",
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Setting Minimum & Maximum Values"
+          config={{
+            min: "30",
+            max: "150",
           }}
           compFactory={SliderComp}
         />
       </ExampleGroup>
 
-      <ExampleGroup title={trans("componentDoc.labelText")} description="">
+      <ExampleGroup 
+        title={trans("componentDoc.labelText")} 
+        description="The Following Examples Show the Basic Usage of the Slider Component.">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
           config={{
@@ -91,6 +102,198 @@ export default function SliderExample() {
           }}
           compFactory={SliderComp}
         />
+        <Example
+          title="Tooltip on Hover"
+          config={{
+            label: {
+              text: trans("componentDoc.labelText"),
+              tooltip: "This is a tooltip displayed on Slider component",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup 
+        title="Layout Options"
+        description="The Following Examples Show the Layout Options of the Slider Component."
+      >
+        <Example
+          title="Prefix Icon"
+          config={{
+            prefixIcon: "/icon:solid/arrow-down-wide-short",
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Suffix Icon"
+          config={{
+            suffixIcon: "/icon:solid/arrow-up-wide-short",
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Prefix & Suffix Icon"
+          config={{
+            prefixIcon: "/icon:solid/arrow-down-wide-short",
+            suffixIcon: "/icon:solid/arrow-up-wide-short",
+          }}
+          compFactory={SliderComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the Slider Component."
+      >
+        <Example
+          title="Background Color, Border Radius,Style,Width,Color"
+          config={{
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "borderStyle": "solid",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Margin & Padding"
+          config={{
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "margin": "10px",
+              "padding": "10px",
+              "borderStyle": "dashed",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Opacity - 0.2"
+          config={{
+            style: {
+              "opacity": "0.2",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Opacity - 0.5"
+          config={{
+            style: {
+              "opacity": "0.5",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Opacity - 0.7"
+          config={{
+            style: {
+              "opacity": "0.7",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Opacity - 1"
+          config={{
+            style: {
+              "opacity": "1",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Rotation - 90deg"
+          config={{
+            style: {
+              "rotation": "90deg",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Label - Text Color, Size, Weight, Font family, Border properties"
+          config={{
+            labelStyle: {
+              "margin": "5px",
+              "padding": "5px",
+              "label": "#3377FF",
+              "textTransform": "Uppercase",
+              "textDecoration": "underline",
+              "textSize": "13px",
+              "textWeight": "bold",
+              "fontFamily": "Courier New",
+              "fontStyle": "Italic",
+              "border": "#36B389",
+              "borderStyle": "solid",
+              "borderWidth": "2px",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Input Field Style"
+          config={{
+            inputFieldStyle: {
+              "fill": "#36B389",
+              "thumbBorder": "#222222",
+              "thumb": "#FFD501",
+              "track": "#E68E50",
+              "margin": "5px",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Slider Component."
+      >
+        <Example
+          title="Bounce Animation"
+          config={{
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Swing Animation"
+          config={{
+            animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite",
+            },
+          }}
+          compFactory={SliderComp}
+        />
+        <Example
+          title="Tada Animation"
+          config={{
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite",
+            },
+          }}
+          compFactory={SliderComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
index 40e21298b..bb01d6691 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
@@ -157,6 +157,113 @@ export default function KanbanExample() {
           }}
           compFactory={ChartCompWithDefault}
         />
+        <Example
+          title="Separate Sections by Assignees"
+          hideSettings={true}
+          width={1000}
+          config={{
+            data: data,
+            assigneeOptions: assigneeOptions,
+            separateAssigneeSections: true,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties of the Kanban Component."
+      >
+        <Example
+          title="Board Styling - Text Size & Color"
+          hideSettings={true}
+          width={1000}
+          config={{
+            data: data,
+            assigneeOptions: assigneeOptions,
+            boardStyles: {
+              "textSize": "22px",
+              "textColor": "#07875C",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Card Header Styling - Text Size & Color"
+          hideSettings={true}
+          width={1000}
+          config={{
+            data: data,
+            assigneeOptions: assigneeOptions,
+            cardHeaderStyles: {
+              "textSize": "22px",
+              "textColor": "#6D83F2",
+            },
+            boardStyles: {
+              "textSize": "22px",
+              "textColor": "#07875C",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Card Styling - Padding, Text Size, Border properties, Box Shadow"
+          hideSettings={true}
+          width={1000}
+          config={{
+            data: data,
+            assigneeOptions: assigneeOptions,
+            cardContentStyles: {
+              "padding": "12px",
+              "textSize": "16px",
+              "backgroundColor": "linear-gradient(135deg, RGB(123, 156, 174) 0%, rgba(150,230,161,1) 100%)",
+              "border": "#36B389",
+              "radius": "20px",
+              "borderWidth": "3px",
+              "boxShadow": "0px 4px 8px",
+            },
+            boardStyles: {
+              "textSize": "22px",
+              "textColor": "#07875C",
+            },
+            cardHeaderStyles: {
+              "textSize": "22px",
+              "textColor": "#6D83F2",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Tag Styling - Text Size & Color"
+          hideSettings={true}
+          width={1000}
+          config={{
+            data: data,
+            assigneeOptions: assigneeOptions,
+            cardContentStyles: {
+              "padding": "12px",
+              "textSize": "16px",
+              "backgroundColor": "linear-gradient(135deg, RGB(123, 156, 174) 0%, rgba(150,230,161,1) 100%)",
+              "border": "#36B389",
+              "radius": "20px",
+              "borderWidth": "3px",
+              "boxShadow": "0px 4px 8px",
+            },
+            boardStyles: {
+              "textSize": "22px",
+              "textColor": "#07875C",
+            },
+            cardHeaderStyles: {
+              "textSize": "22px",
+              "textColor": "#6D83F2",
+            },
+            tagStyles: {
+              "textSize": "14px",
+              "textColor": "#F40101",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
index 5f4d1ea61..1c4123a1d 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
@@ -12,6 +12,7 @@ export default function CommentExample() {
       >
         <Example
           title="Setting Title of the Comment Component"
+          width={500}
           config={{
             title: "%d Comments in Total",
           }}
@@ -19,6 +20,7 @@ export default function CommentExample() {
         />
         <Example
           title="Hiding the Comment Component"
+          width={500}
           config={{
             hidden: true,
           }}
@@ -26,6 +28,7 @@ export default function CommentExample() {
         />
         <Example
           title="Disallowing Users to Comment"
+          width={500}
           config={{
             sendCommentAble: false,
           }}
@@ -33,6 +36,7 @@ export default function CommentExample() {
         />
         <Example
           title="Allowing Users to Delete a Comment"
+          width={500}
           config={{
             deleteAble: true,
           }}
@@ -46,6 +50,7 @@ export default function CommentExample() {
       >
         <Example
           title="Setting the Button Title and Placeholder Text on the Comment Component"
+          width={500}
           config={{
             buttonText:"Click on me to Comment",
             placeholder:"I am Placeholder text on the Comment Component :)",
@@ -53,6 +58,70 @@ export default function CommentExample() {
           compFactory={CommentComp}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the Comment Component."
+        >
+        <Example
+          title="Background Color, Border Radius and Color"
+          width={500}
+          config={{
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "margin": "10px",
+              "padding": "20px",
+              "radius": "20px",
+            }
+          }}
+          compFactory={CommentComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Comment Component."
+        >
+        <Example
+          title="Bounce Animation"
+          width={600}
+          config={{
+            animationStyle: {
+            "animation": "bounce",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={CommentComp}
+        />
+        <Example
+          title="Swing Animation"
+          width={600}
+          config={{
+            animationStyle: {
+            "animation": "swing",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={CommentComp}
+        />
+        <Example
+        title="Tada Animation"
+        width={600}
+        config={{
+            animationStyle: {
+            "animation": "tada",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+        }}
+        compFactory={CommentComp}
+      />
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
index 00071dae1..e71949115 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
@@ -197,6 +197,63 @@ export default function DividerExample() {
           compFactory={DividerComp}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Cascader Component."
+      >
+        <Example
+          title="Bounce Animation"
+          config={{
+            style: {
+              borderStyle: "solid",
+              border: "#000",
+              borderWidth: "2px"
+            },
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={DividerComp}
+        />
+        <Example
+          title="Swing Animation"
+          config={{
+            style: {
+              borderStyle: "solid",
+              border: "#000",
+              borderWidth: "2px"
+            },
+            animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={DividerComp}
+        />
+        <Example
+          title="Tada Animation"
+          config={{
+            style: {
+              borderStyle: "solid",
+              border: "#000",
+              borderWidth: "2px"
+            },
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={DividerComp}
+        />
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
index 8471b2e2f..f351eeef7 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
@@ -9,10 +9,10 @@ export default function FileViewerExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the File Viewer Component."
       >
         <Example
-          title=""
+          title="Default File Viewer component"
           width={1000}
           height={600}
           blackListConfig={blackListConfig}
@@ -22,6 +22,117 @@ export default function FileViewerExample() {
           }}
           compFactory={FileViewerComp}
         />
+        <Example
+          title="Hiding the File Viewer component"
+          width={1000}
+          height={600}
+          blackListConfig={blackListConfig}
+          hideSettings={true}
+          config={{
+            src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+            hidden: true,
+          }}
+          compFactory={FileViewerComp}
+        />
+        
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties of the File Viewer Component."
+      >
+        <Example
+          title="Background Color, Margin & Padding"
+          width={1000}
+          height={600}
+          blackListConfig={blackListConfig}
+          hideSettings={true}
+          config={{
+            src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "margin": "10px",
+              "padding": "40px",
+            },
+          }}
+          compFactory={FileViewerComp}
+        />
+        <Example
+          title="Border Color, Radius & Width"
+          width={1000}
+          height={600}
+          blackListConfig={blackListConfig}
+          hideSettings={true}
+          config={{
+            src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#3377FF",
+              "radius": "20px",
+              "margin": "10px",
+              "padding": "40px",
+              "borderWidth": "3px"
+            },
+          }}
+          compFactory={FileViewerComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Cascader Component."
+      >
+        <Example
+          title="Bounce Animation"
+          width={1000}
+          height={600}
+          blackListConfig={blackListConfig}
+          hideSettings={true}
+          config={{
+            src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={FileViewerComp}
+        />
+        <Example
+          title="Swing Animation"
+          width={1000}
+          height={600}
+          blackListConfig={blackListConfig}
+          hideSettings={true}
+          config={{
+            src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+             animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={FileViewerComp}
+        />
+        <Example
+          title="Tada Animation"
+          width={1000}
+          height={600}
+          blackListConfig={blackListConfig}
+          hideSettings={true}
+          config={{
+            src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={FileViewerComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
index 31eaea4cc..404e17908 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
@@ -95,6 +95,8 @@ const container={
   }
 };
 
+const rows= "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Godfather Part II\",\n    \"url\": \"https://www.imdb.com/title/tt0071562/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMWMwMGQzZTItY2JlNC00OWZiLWIyMDctNDk2ZDQ2YjRjMWQ0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"12 Angry Men\",\n    \"url\": \"https://www.imdb.com/title/tt0050083/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMWU4N2FjNzYtNTVkNC00NzQ0LTg0MjAtYTJlMjFhNGUxZDFmXkEyXkFqcGdeQXVyNjc1NTYyMjg@._V1_UX45_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"8.9\",\n    \"title\": \"Schindler's List\",\n    \"url\": \"https://www.imdb.com/title/tt0108052/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BNDE4OTMxMTctNmRhYy00NWE2LTg3YzItYTk3M2UwOTU5Njg4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UX45_CR0,0,45,67_AL_.jpg\"\n  }\n]";
+
 export default function GridViewExample() {
 
   const blackListConfig: string[] = [
@@ -237,6 +239,111 @@ export default function GridViewExample() {
           compFactory={GridComp}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling Properties on the ListView Component."
+
+      >
+        <Example
+          title="Background Color, Border Color & Radius"
+          hideSettings
+          config={{
+            container: container,
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#043CFF",
+              "radius": "20px",
+            },
+            noOfRows: rows,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={GridComp}
+        />
+        <Example
+          title="Rotation - 45 Deg"
+          hideSettings
+          config={{
+            container: container,
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#043CFF",
+              "radius": "20px",
+              "rotation": "45deg"
+            },
+            noOfRows: rows,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={GridComp}
+        />
+        <Example
+          title="Rotation - 135 Deg"
+          hideSettings
+          config={{
+            container: container,
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#043CFF",
+              "radius": "20px",
+              "rotation": "135deg"
+            },
+            noOfRows: rows,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={GridComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the List View Component."
+        >
+        <Example
+          title="Bounce Animation"
+          hideSettings={true}
+          config={{
+            noOfRows: rows,
+            container: container, 
+            animationStyle: {
+            "animation": "bounce",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={GridComp}
+        />
+        <Example
+          title="Swing Animation"
+          hideSettings={true}
+          config={{
+            noOfRows: rows,
+            container: container, 
+            animationStyle: {
+            "animation": "swing",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={GridComp}
+        />
+        <Example
+          title="Tada Animation"
+          hideSettings={true}
+          config={{
+            noOfRows: rows,
+            container: container, 
+            animationStyle: {
+            "animation": "tada",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={GridComp}
+        />
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx
index 51d5704e5..a00a6c191 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx
@@ -100,6 +100,9 @@ export default function ListViewExample() {
   const blackListConfig: string[] = [
     "container"
   ];
+
+  const rows= "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Godfather Part II\",\n    \"url\": \"https://www.imdb.com/title/tt0071562/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMWMwMGQzZTItY2JlNC00OWZiLWIyMDctNDk2ZDQ2YjRjMWQ0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"12 Angry Men\",\n    \"url\": \"https://www.imdb.com/title/tt0050083/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMWU4N2FjNzYtNTVkNC00NzQ0LTg0MjAtYTJlMjFhNGUxZDFmXkEyXkFqcGdeQXVyNjc1NTYyMjg@._V1_UX45_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"8.9\",\n    \"title\": \"Schindler's List\",\n    \"url\": \"https://www.imdb.com/title/tt0108052/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BNDE4OTMxMTctNmRhYy00NWE2LTg3YzItYTk3M2UwOTU5Njg4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UX45_CR0,0,45,67_AL_.jpg\"\n  }\n]";
+
   return (
     <>
       <ExampleGroup
@@ -112,7 +115,7 @@ export default function ListViewExample() {
           hideSettings
           config={{
             container: container,
-            noOfRows: "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  }\n]",
+            noOfRows: rows,
           }}
           blackListConfig={blackListConfig}
           compFactory={ListViewComp}
@@ -122,8 +125,8 @@ export default function ListViewExample() {
           hideSettings
           config={{
             container: container,
-            hidden: "true",
-            noOfRows: "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  }\n]",
+            hidden: true,
+            noOfRows: rows,
           }}
           blackListConfig={blackListConfig}
           compFactory={ListViewComp}
@@ -136,7 +139,7 @@ export default function ListViewExample() {
             pagination:{
               pageSize:"2",
             },
-            noOfRows: "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  }\n]",
+            noOfRows: rows,
           }}
           blackListConfig={blackListConfig}
           compFactory={ListViewComp}
@@ -156,7 +159,7 @@ export default function ListViewExample() {
             pagination:{
               pageSize:"2",
             },
-            noOfRows: "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  }\n]",
+            noOfRows: rows,
           }}
           blackListConfig={blackListConfig}
           compFactory={ListViewComp}
@@ -170,7 +173,7 @@ export default function ListViewExample() {
               pageSize:"2",
               showQuickJumper: true,
             },
-            noOfRows: "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  }\n]",
+            noOfRows: rows,          
           }}
           blackListConfig={blackListConfig}
           compFactory={ListViewComp}
@@ -187,7 +190,7 @@ export default function ListViewExample() {
               pageSizeOptions: "[2,4,6,8]",
 
             },
-            noOfRows: "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  }\n]",
+            noOfRows: rows,
           }}
           blackListConfig={blackListConfig}
           compFactory={ListViewComp}
@@ -209,7 +212,7 @@ export default function ListViewExample() {
             pagination:{
               pageSize:"2",
             },
-            noOfRows: "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  }\n]",
+            noOfRows: rows,
           }}
           blackListConfig={blackListConfig}
           compFactory={ListViewComp}
@@ -223,11 +226,116 @@ export default function ListViewExample() {
               pageSize:"2",
               showQuickJumper: true,
             },
-            noOfRows: "[\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Shawshank Redemption\",\n    \"url\": \"https://www.imdb.com/title/tt0111161/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.2\",\n    \"title\": \"The Godfather\",\n    \"url\": \"https://www.imdb.com/title/tt0068646/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n  },\n  {\n    \"rate\": \"9.0\",\n    \"title\": \"The Dark Knight\",\n    \"url\": \"https://www.imdb.com/title/tt0468569/\",\n    \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n  }\n]",
+            noOfRows: rows,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={ListViewComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling Properties on the ListView Component."
+
+      >
+        <Example
+          title="Background Color, Border Color & Radius"
+          hideSettings
+          config={{
+            container: container,
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#043CFF",
+              "radius": "20px",
+            },
+            noOfRows: rows,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={ListViewComp}
+        />
+        <Example
+          title="Rotation - 45 Deg"
+          hideSettings
+          config={{
+            container: container,
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#043CFF",
+              "radius": "20px",
+              "rotation": "45deg"
+            },
+            noOfRows: rows,
           }}
           blackListConfig={blackListConfig}
           compFactory={ListViewComp}
         />
+        <Example
+          title="Rotation - 135 Deg"
+          hideSettings
+          config={{
+            container: container,
+            style: {
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+              "border": "#043CFF",
+              "radius": "20px",
+              "rotation": "135deg"
+            },
+            noOfRows: rows,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={ListViewComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the List View Component."
+        >
+        <Example
+          title="Bounce Animation"
+          hideSettings={true}
+          config={{
+            noOfRows: rows,
+            container: container, 
+            animationStyle: {
+            "animation": "bounce",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={ListViewComp}
+        />
+        <Example
+          title="Swing Animation"
+          hideSettings={true}
+          config={{
+            noOfRows: rows,
+            container: container, 
+            animationStyle: {
+            "animation": "swing",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={ListViewComp}
+        />
+        <Example
+          title="Tada Animation"
+          hideSettings={true}
+          config={{
+            noOfRows: rows,
+            container: container, 
+            animationStyle: {
+            "animation": "tada",
+            "animationDelay": "1s",
+            "animationDuration": "3s",
+            "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={ListViewComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx
index be97c5bdb..964ce918b 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx
@@ -139,6 +139,102 @@ export default function FileExample() {
           compFactory={FileComp}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the Cascader Component."
+      >
+        <Example
+          title="Background Color, Border Radius,Style,Width,Color"
+          config={{
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "borderStyle": "solid",
+            },
+          }}
+          compFactory={FileComp}
+        />
+        <Example
+          title="Margin & Padding"
+          config={{
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "margin": "10px",
+              "padding": "10px",
+              "borderStyle": "dashed",
+            },
+          }}
+          compFactory={FileComp}
+        />
+        <Example
+          title="Text Color, Size, Weight, Font family, Border properties"
+          config={{
+            style: {
+              "margin": "5px",
+              "padding": "5px",
+              "label": "#3377FF",
+              "textTransform": "Uppercase",
+              "textDecoration": "underline",
+              "textSize": "13px",
+              "textWeight": "bold",
+              "fontFamily": "Courier New",
+              "fontStyle": "Italic",
+              "border": "#36B389",
+              "borderStyle": "solid",
+              "borderWidth": "2px"
+            },
+          }}
+          compFactory={FileComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Cascader Component."
+      >
+        <Example
+          title="Bounce Animation"
+          config={{
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={FileComp}
+        />
+        <Example
+          title="Swing Animation"
+          config={{
+            animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={FileComp}
+        />
+        <Example
+          title="Tada Animation"
+          config={{
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={FileComp}
+        />
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/SegmentedControl.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/SegmentedControl.tsx
index aa134c2d7..724d9faf9 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/SegmentedControl.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/SegmentedControl.tsx
@@ -29,13 +29,12 @@ export default function SegmentedControlExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Segmented Control Component."
       >
         <Example
           title={trans("componentDoc.value")}
           config={{
-            value: trans("componentDoc.appleOptionLabel"),
-            disabled: false,
+            defaultValue: trans("componentDoc.appleOptionLabel"),
             options: options,
             label: {
               text: trans("componentDoc.likedFruits"),
@@ -48,7 +47,6 @@ export default function SegmentedControlExample() {
           title={trans("componentDoc.noDefaultValue")}
           config={{
             value: trans("componentDoc.noValue"),
-            disabled: false,
             options: options,
             label: {
               text: trans("componentDoc.likedFruits"),
@@ -60,7 +58,6 @@ export default function SegmentedControlExample() {
         <Example
           title={trans("componentDoc.disabled")}
           config={{
-            value: trans("componentDoc.appleOptionLabel"),
             disabled: true,
             options: options,
             label: {
@@ -70,12 +67,27 @@ export default function SegmentedControlExample() {
           blackListConfig={blackListConfig}
           compFactory={SegmentedControlComp}
         />
+        <Example
+          title="Hiding the Segmented Control Component"
+          config={{
+            hidden: true,
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+            },
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={SegmentedControlComp}
+        />
       </ExampleGroup>
-      <ExampleGroup title={trans("componentDoc.labelText")} description="">
+
+      <ExampleGroup 
+        title={trans("componentDoc.labelText")} 
+        description="The Following Examples Show the different Label alignment of the Segmented Control Component.">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
           config={{
-            value: trans("componentDoc.appleOptionLabel"),
+            defaultValue: trans("componentDoc.coconutOptionLabel"),
             options: options,
             label: {
               text: trans("componentDoc.likedFruits"),
@@ -89,7 +101,7 @@ export default function SegmentedControlExample() {
         <Example
           title={trans("componentDoc.leftRightAlign")}
           config={{
-            value: trans("componentDoc.appleOptionLabel"),
+            defaultValue: trans("componentDoc.appleOptionLabel"),
             options: options,
             label: {
               text: trans("componentDoc.likedFruits"),
@@ -103,7 +115,7 @@ export default function SegmentedControlExample() {
         <Example
           title={trans("componentDoc.topLeftAlign")}
           config={{
-            value: trans("componentDoc.appleOptionLabel"),
+            defaultValue: trans("componentDoc.appleOptionLabel"),
             options: options,
             label: {
               text: trans("componentDoc.likedFruits"),
@@ -117,7 +129,7 @@ export default function SegmentedControlExample() {
         <Example
           title={trans("componentDoc.topRightAlign")}
           config={{
-            value: trans("componentDoc.appleOptionLabel"),
+            defaultValue: trans("componentDoc.appleOptionLabel"),
             options: options,
             label: {
               text: trans("componentDoc.likedFruits"),
@@ -128,7 +140,21 @@ export default function SegmentedControlExample() {
           blackListConfig={blackListConfig}
           compFactory={SegmentedControlComp}
         />
+        <Example
+          title="Displaying Tooltip on Hover"
+          config={{
+            defaultValue: trans("componentDoc.appleOptionLabel"),
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+              tooltip: "This is a Tooltip on Segmented Control component"
+            },
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={SegmentedControlComp}
+        />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.required")}
@@ -143,6 +169,173 @@ export default function SegmentedControlExample() {
           compFactory={SegmentedControlComp}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the Segmented Control Component."
+      >
+        <Example
+          title="Background Color, Border Radius,Style,Width,Color"
+          width={500}
+          config={{
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+            },
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "borderStyle": "solid",
+            },
+          }}
+          compFactory={SegmentedControlComp}
+        />
+        <Example
+          title="Margin & Padding"
+          width={500}
+          config={{
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+            },
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "margin": "10px",
+              "padding": "10px",
+              "borderStyle": "dashed",
+            },
+          }}
+          compFactory={SegmentedControlComp}
+        />
+        <Example
+          title="Text Color, Size, Weight, Font family, Border properties"
+          width={500}
+          config={{
+            defaultValue: trans("componentDoc.coconutOptionLabel"),
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+            },
+            style: {
+              "margin": "3px",
+              "padding": "3px",
+              "textTransform": "Uppercase",
+              "textDecoration": "underline",
+              "textSize": "13px",
+              "textWeight": "bold",
+              "fontFamily": "Courier New",
+              "fontStyle": "Italic",
+              "border": "#36B389",
+              "borderStyle": "solid",
+              "borderWidth": "3px",
+              "background": "#00FFFF",
+              "indicatorBackground": "#F4EA05",
+
+            },
+          }}
+          compFactory={SegmentedControlComp}
+        />
+        <Example
+          title="Rotation - 90deg"
+          config={{
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+            },
+            style: {
+              "rotation": "90deg",
+            },
+          }}
+          compFactory={SegmentedControlComp}
+        />
+        <Example
+          title="Label - Text Color, Size, Weight, Font family, Border properties"
+          width={500}
+          config={{
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+            },
+            labelStyle: {
+              "margin": "5px",
+              "padding": "5px",
+              "label": "#3377FF",
+              "textTransform": "Uppercase",
+              "textDecoration": "underline",
+              "textSize": "13px",
+              "textWeight": "bold",
+              "fontFamily": "Courier New",
+              "fontStyle": "Italic",
+              "border": "#36B389",
+              "borderStyle": "solid",
+              "borderWidth": "2px"
+            },
+          }}
+          compFactory={SegmentedControlComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Segmented Control Component."
+      >
+        <Example
+          title="Bounce Animation"
+          width={500}
+          config={{
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+            },
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={SegmentedControlComp}
+        />
+        <Example
+          title="Swing Animation"
+          width={500}
+          config={{
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+            },
+            animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={SegmentedControlComp}
+        />
+        <Example
+          title="Tada Animation"
+          width={500}
+          config={{
+            options: options,
+            label: {
+              text: trans("componentDoc.likedFruits"),
+            },
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={SegmentedControlComp}
+        />
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx
index d2e51248a..535ca1b8b 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx
@@ -23,6 +23,41 @@ export default function StepControlExample() {
             }}
             compFactory={StepComp}
           />
+          <Example
+            title="Start Step Numbers at - 0"
+            config={{
+              initialValue: "0",
+            }}
+            compFactory={StepComp}
+          />
+          <Example
+            title="Start Step Numbers at - 1"
+            config={{
+              initialValue: "1",
+            }}
+            compFactory={StepComp}
+          />
+          <Example
+            title="Start Step Numbers at - 2"
+            config={{
+              initialValue: "2",
+            }}
+            compFactory={StepComp}
+          />
+          <Example
+            title="Selectable Steps - True"
+            config={{
+              selectable: true,
+            }}
+            compFactory={StepComp}
+          />
+          <Example
+            title="Selectable Steps - False"
+            config={{
+              selectable: false,
+            }}
+            compFactory={StepComp}
+          />
         </ExampleGroup>
 
         <ExampleGroup
@@ -106,7 +141,111 @@ export default function StepControlExample() {
             }}
             compFactory={StepComp}
           />
-        </ExampleGroup>      
+        </ExampleGroup> 
+
+        <ExampleGroup
+          title="Styling Properties"
+          description="The Following Examples Show the different Styling properties on the Step Control Component."
+          >
+          <Example
+            title="Background Color, Border Radius,Style,Width,Color"
+            config={{
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "border": "#0139FF",
+                "borderStyle": "dashed",
+                "radius": "10px",
+                "borderWidth": "2px",
+                "accent": "#FAD301",
+              },
+            }}
+            compFactory={StepComp}
+          />
+          <Example
+            title="Margin & Padding"
+            config={{
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "margin": "5px",
+                "padding": "10px",
+                "border": "#0139FF",
+                "borderStyle": "dashed",
+                "radius": "10px",
+                "borderWidth": "2px",
+                "accent": "#FAD301",
+              },
+            }}
+            compFactory={StepComp}
+          />
+          <Example
+            title="Text Color, Size, Weight, Font family, Border properties"
+            config={{
+              style: {
+                "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                "margin": "5px",
+                "padding": "10px",
+                "text": "#FF0404",
+                "textTransform": "uppercase",
+                "textDecoration": "underline",
+                "textSize": "20px",
+                "textWeight": "bold",
+                "fontFamily": "Courier New",
+                "fontStyle": "oblique",
+                "border": "#0139FF",
+                "borderStyle": "dashed",
+                "radius": "10px",
+                "borderWidth": "2px",
+                "accent": "#FAD301",
+              },
+            }}
+            compFactory={StepComp}
+          />
+        </ExampleGroup>
+  
+        <ExampleGroup
+          title="Animation Style"
+          description="The Following Examples Show different animations on the Step Control Component."
+          >
+          <Example
+            title="Bounce Animation"
+            width={600}
+            config={{
+              animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+              },
+            }}
+            compFactory={StepComp}
+          />
+          <Example
+            title="Swing Animation"
+            width={600}
+            config={{
+              animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+              },
+            }}
+            compFactory={StepComp}
+          />
+          <Example
+          title="Tada Animation"
+          width={600}
+          config={{
+              animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+              },
+          }}
+          compFactory={StepComp}
+        />
+        </ExampleGroup>     
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Switch.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Switch.tsx
index 60e2df337..6fb21b012 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Switch.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Switch.tsx
@@ -14,7 +14,6 @@ export default function SwitchExample() {
           title={trans("componentDoc.open")}
           config={{
             value: "true",
-            disabled: false,
           }}
           compFactory={SwitchComp}
         />
@@ -22,7 +21,6 @@ export default function SwitchExample() {
           title={trans("componentDoc.close")}
           config={{
             value: "false",
-            disabled: false,
           }}
           compFactory={SwitchComp}
         />
@@ -34,7 +32,16 @@ export default function SwitchExample() {
           }}
           compFactory={SwitchComp}
         />
+        <Example
+          title="Hiding the Switch component"
+          config={{
+            value: "true",
+            hidden: true,
+          }}
+          compFactory={SwitchComp}
+        />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
@@ -84,6 +91,181 @@ export default function SwitchExample() {
           }}
           compFactory={SwitchComp}
         />
+        <Example
+          title="Tooltip on Hover"
+          config={{
+            value: "true",
+            label: {
+              text: trans("componentDoc.labelText"),
+              tooltip: "This is a tooltip on Switch component"
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the Switch Component."
+      >
+        <Example
+          title="Background Color, Border Radius,Style,Width,Color"
+          config={{
+            value: "true",
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "borderStyle": "solid",
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Margin & Padding"
+          config={{
+            value: "true",
+            style: {
+              "background": "#00FFFF",
+              "border": "#3377FF",
+              "radius": "10px",
+              "borderWidth": "3px",
+              "margin": "10px",
+              "padding": "10px",
+              "borderStyle": "dashed",
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Opacity - 0.2"
+          config={{
+            value: "true",
+            style: {
+              "opacity": "0.2",
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Opacity - 0.5"
+          width={500}
+          config={{
+            value: "true",
+            style: {
+              "opacity": "0.5",
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Opacity - 0.7"
+          config={{
+            value: "true",
+            style: {
+              "opacity": "0.7",
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Opacity - 1"
+          config={{
+            value: "true",
+            style: {
+              "opacity": "1",
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Rotation - 90deg"
+          width={500}
+          config={{
+            value: "true",
+            style: {
+              "rotation": "90deg",
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Label - Text Color, Size, Weight, Font family, Border properties"
+          config={{
+            value: "true",
+            labelStyle: {
+              "margin": "5px",
+              "padding": "5px",
+              "label": "#3377FF",
+              "textTransform": "Uppercase",
+              "textDecoration": "underline",
+              "textSize": "13px",
+              "textWeight": "bold",
+              "fontFamily": "Courier New",
+              "fontStyle": "Italic",
+              "border": "#36B389",
+              "borderStyle": "solid",
+              "borderWidth": "2px"
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Input Field Style"
+          config={{
+            inputFieldStyle: {
+              "handle": "#D71616",
+              "unchecked": "#F7DF01",
+              "checked": "#36B389",
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Animation Style"
+        description="The Following Examples Show different animations on the Switch Component."
+      >
+        <Example
+          title="Bounce Animation"
+          config={{
+            value: "true",
+            animationStyle: {
+              "animation": "bounce",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Swing Animation"
+          config={{
+            animationStyle: {
+              "animation": "swing",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={SwitchComp}
+        />
+        <Example
+          title="Tada Animation"
+          config={{
+            value: "true",
+            animationStyle: {
+              "animation": "tada",
+              "animationDelay": "1s",
+              "animationDuration": "3s",
+              "animationIterationCount": "infinite"
+            },
+          }}
+          compFactory={SwitchComp}
+        />
       </ExampleGroup>
     </>
   );