diff --git a/docuilib/src/components/pageComponents/Usage.tsx b/docuilib/src/components/pageComponents/Usage.tsx
index 2cb8130534..eddb3a87cc 100644
--- a/docuilib/src/components/pageComponents/Usage.tsx
+++ b/docuilib/src/components/pageComponents/Usage.tsx
@@ -2,15 +2,13 @@ import _ from 'lodash';
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
 import '../ComponentPage.module.scss';
+import ReactLiveScope from '../../theme/ReactLiveScope';
+import UILivePreview from '../UILivePreview';
 
 export const Usage = ({component}) => {
+  const componentLivePlaygroundSupport = !!ReactLiveScope[component.name];
+  const code = component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n');
   if (component.snippet) {
-    return (
-      <div>
-        <CodeBlock language="jsx">
-          {component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n')}
-        </CodeBlock>
-      </div>
-    );
+    return componentLivePlaygroundSupport ? <UILivePreview code={code}/> : <CodeBlock language="jsx">{code}</CodeBlock>;
   }
 };
diff --git a/src/components/checkbox/checkbox.api.json b/src/components/checkbox/checkbox.api.json
index 8cfed3e45b..3eb3659645 100644
--- a/src/components/checkbox/checkbox.api.json
+++ b/src/components/checkbox/checkbox.api.json
@@ -10,9 +10,7 @@
     "background"
   ],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx",
-  "images": [
-    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true"
-  ],
+  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true"],
   "props": [
     {
       "name": "value",
@@ -95,16 +93,7 @@
       "description": "Custom styling for the checkbox and label container"
     }
   ],
-  "snippet": [
-    "function Example(props) {",
-    "  const [value, setValue] = useState(false$1);",
-    "  return (",
-    "    <div>",
-    "      <Checkbox value={value$2} onValueChange={setValue$3}/>",
-    "    </div>",
-    "  );",
-    "}"
-  ],
+  "snippet": ["<Checkbox value={value} onValueChange={setValue}/>"],
   "docs": {
     "hero": {
       "title": "Checkbox",
diff --git a/src/components/radioButton/radioButton.api.json b/src/components/radioButton/radioButton.api.json
index 1dfed8c8cf..821095eeea 100644
--- a/src/components/radioButton/radioButton.api.json
+++ b/src/components/radioButton/radioButton.api.json
@@ -85,16 +85,7 @@
       "description": "Additional styling for the container"
     }
   ],
-  "snippet": [
-    "function Example(props) {",
-    "  const [value, setValue] = useState(false$1);",
-    "  return (",
-    "    <div>",
-    "      <RadioButton label={'Individual Radio Button'} selected={value$2} onPress={() => setValue(!value)$3}/>",
-    "    </div>",
-    "  );",
-    "}"
-  ],
+  "snippet": ["<RadioButton label={'Individual Radio Button'} selected={value} onPress={() => setValue(!value)}/>"],
   "docs": {
     "hero": {
       "title": "RadioButton",
diff --git a/src/components/switch/switch.api.json b/src/components/switch/switch.api.json
index 335a5ee373..5155aabcb2 100644
--- a/src/components/switch/switch.api.json
+++ b/src/components/switch/switch.api.json
@@ -3,9 +3,7 @@
   "category": "controls",
   "description": "Switch component for toggling boolean value related to some context",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SwitchScreen.tsx",
-  "images": [
-    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Switch/Switch.gif?raw=true"
-  ],
+  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Switch/Switch.gif?raw=true"],
   "props": [
     {
       "name": "value",
@@ -78,16 +76,7 @@
       "description": "Component id"
     }
   ],
-  "snippet": [
-    "function Example(props) {",
-    "  const [value, setValue] = useState(false$1);",
-    "  return (",
-    "    <div>",
-    "      <Switch value={value$2} onValueChange={setValue$3}/>",
-    "    </div>",
-    "  );",
-    "}"
-  ],
+  "snippet": ["<Switch value={value$2} onValueChange={setValue$3}/>"],
   "docs": {
     "hero": {
       "title": "Switch",
@@ -106,10 +95,7 @@
         "sections": [
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Preview"
-            ],
+            "columns": ["Property", "Preview"],
             "items": [
               {
                 "title": "Default",
@@ -135,11 +121,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Default Style",
-              "Light Style"
-            ],
+            "columns": ["Property", "Default Style", "Light Style"],
             "items": [
               {
                 "title": "ON",