diff --git a/docuilib/src/theme/ReactLiveScope/index.js b/docuilib/src/theme/ReactLiveScope/index.js
index 64529c8e04..ebe7424f41 100644
--- a/docuilib/src/theme/ReactLiveScope/index.js
+++ b/docuilib/src/theme/ReactLiveScope/index.js
@@ -10,6 +10,7 @@ import Card from 'react-native-ui-lib/card';
 import Carousel from 'react-native-ui-lib/carousel';
 import Checkbox from 'react-native-ui-lib/checkbox';
 import Chip from 'react-native-ui-lib/chip';
+import ChipsInput from 'react-native-ui-lib/chipsInput';
 import ColorPalette from 'react-native-ui-lib/colorPalette';
 import ColorPicker from 'react-native-ui-lib/colorPicker';
 import ColorSwatch from 'react-native-ui-lib/colorSwatch';
@@ -87,6 +88,7 @@ const ReactLiveScope = {
   Carousel,
   Checkbox,
   Chip,
+  ChipsInput,
   ColorPalette,
   ColorPicker,
   Colors,
diff --git a/scripts/docs/buildDocsCommon.js b/scripts/docs/buildDocsCommon.js
index 3012c72b32..faa278da79 100644
--- a/scripts/docs/buildDocsCommon.js
+++ b/scripts/docs/buildDocsCommon.js
@@ -26,7 +26,8 @@ const VALID_COMPONENTS_CATEGORIES = [
   'incubator',
   'infra',
   // non components categories
-  'services'
+  'services',
+  'dev' // development category for components we don't want to render in our docs (used in test.api.json)
 ];
 
 function buildDocs(apiFolders, componentsPreProcess) {
diff --git a/src/components/chip/chip.api.json b/src/components/chip/chip.api.json
index 492421721f..b303c38a74 100644
--- a/src/components/chip/chip.api.json
+++ b/src/components/chip/chip.api.json
@@ -53,6 +53,12 @@
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
   ],
   "snippet": [
-    "<Chip label={'Chip'$1} onPress={() => console.log('pressed')$2}/>"
+    "<View flex center gap-s4>",
+    "<Chip label={'Chip'} onPress={() => console.log('pressed')}/>",
+    "<Chip label={'Square'} borderRadius={2} backgroundColor={Colors.blue50}/>",
+    "<Chip label={'Badge'} badgeProps={{label: '2', backgroundColor: Colors.red30}}/>",
+    "<Chip label={'Avatar'} avatarProps={{source: {uri: 'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg'}}}/>",
+    "<Chip label={'Accessories'} rightElement={<Icon source={Assets.icons.demo.chevronRight}/>}/>",
+    "</View>"
   ]
 }
diff --git a/src/components/chipsInput/chipsInput.api.json b/src/components/chipsInput/chipsInput.api.json
index 746ce8958a..432cc76829 100644
--- a/src/components/chipsInput/chipsInput.api.json
+++ b/src/components/chipsInput/chipsInput.api.json
@@ -21,9 +21,19 @@
     {"name": "maxChips", "type": "number", "description": "The maximum chips to allow adding"}
   ],
   "snippet": [
-    "<ChipsInput",
-    "  placeholder={'Placeholder'$1}",
-    "  chips={[{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}]$2}",
-    "/>"
+    "function Example(props) {",
+    "  const [chips, setChips] = useState([{label: 'Falcon 9'}, {label: 'Enterprise'}]);",
+  
+    "  return (",
+    "    <View flex padding-s5>",
+    "      <ChipsInput",
+    "        onChange={setChips}",
+    "        placeholder={'Placeholder'}",
+    "        defaultChipProps={{borderRadius: 0}}",
+    "        chips={chips}",
+    "      />",
+    "    </View>",
+    "  );",
+    "}"
   ]
 }
diff --git a/src/components/colorPalette/ColorPalette.api.json b/src/components/colorPalette/ColorPalette.api.json
index a2ead5ff61..dc819dd543 100644
--- a/src/components/colorPalette/ColorPalette.api.json
+++ b/src/components/colorPalette/ColorPalette.api.json
@@ -79,11 +79,18 @@
     }
   ],
   "snippet": [
-    "<ColorPalette",
-    " colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]$1}",
-    " value={selectedColor$2}",
-    " onValueChange={() => console.log('value changed')$3}",
-    "/>"
+    "function Example(props) {",
+    "  const [value, setValue] = useState(Colors.yellow30);",
+    "  return (",
+    "    <View flex padding-s5 gap-s4>",
+    "      <ColorPalette",
+    "        colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]}",
+    "        value={value}",
+    "        onValueChange={setValue}",
+    "      />",
+    "    </View>",
+    "  );",
+    "}"
   ],
   "docs": {
     "hero": {
diff --git a/src/components/colorPicker/colorPicker.api.json b/src/components/colorPicker/colorPicker.api.json
index b2cfe55846..868afbcf6a 100644
--- a/src/components/colorPicker/colorPicker.api.json
+++ b/src/components/colorPicker/colorPicker.api.json
@@ -47,14 +47,22 @@
     }
   ],
   "snippet": [
-    "<ColorPicker",
-    " colors={[Colors.green10, Colors.green20, Colors.green30, Colors.green40, Colors.green50, Colors.green60, Colors.green70]$1}",
-    " initialColor={Colors.green10$2}",
-    " value={currentColor$3}",
-    " onDismiss={() => console.log('dismissed')$4}",
-    " onSubmit={() => console.log('submit')$5}",
-    " onValueChange={() => console.log('value changed')$6}",
-    "/>"
+    "function Example(props) {",
+    "  const [colors, setColors] = useState([Colors.green30, Colors.yellow30, Colors.red30]);",
+    "  const [color, setColor] = useState();",
+    "  return (",
+    "    <View flex padding-s5>",
+    "     <ColorPicker",
+    "       colors={colors}",
+    "       initialColor={Colors.green10}",
+    "       value={color}",
+    "       onDismiss={() => console.log('dismissed')}",
+    "       onSubmit={(newColor) => setColors([newColor, ...colors])}",
+    "       onValueChange={setColor}",
+    "     />",
+    "    </View>",
+    "  );",
+    "}"
   ],
   "docs": {
     "hero": {
@@ -77,7 +85,7 @@
             "items": [
               {
                 "title": "",
-                "description": "markdown:1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
  \n2. Using HLS controls (or even typing actual HEX value) user can achieve any color. ",
+                "description": "markdown:  1. Tapping 'Add New' in the Color Palette opens a color picker dialog.  \n2. Using HLS controls (or even typing actual HEX value) user can achieve any color. ",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage1.png"
@@ -113,7 +121,7 @@
             "items": [
               {
                 "title": "",
-                "description": "markdown:1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value.  \n2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color. ",
+                "description": "markdown:  1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value.  \n2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color. ",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex1.png"
@@ -122,7 +130,7 @@
               },
               {
                 "title": "",
-                "description": "markdown:3. ‘#’ symbol is permanent and cant be deleted.  \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
+                "description": "markdown:  3. ‘#’ symbol is permanent and cant be deleted.  \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex2.png"
diff --git a/src/components/radioButton/radioButton.api.json b/src/components/radioButton/radioButton.api.json
index 1dfed8c8cf..ab9657586d 100644
--- a/src/components/radioButton/radioButton.api.json
+++ b/src/components/radioButton/radioButton.api.json
@@ -87,11 +87,15 @@
   ],
   "snippet": [
     "function Example(props) {",
-    "  const [value, setValue] = useState(false$1);",
+    "  const [value, setValue] = useState(false);",
+    "  const [value2, setValue2] = useState(false);",
+    "  const [value3, setValue3] = useState(false);",
     "  return (",
-    "    <div>",
-    "      <RadioButton label={'Individual Radio Button'} selected={value$2} onPress={() => setValue(!value)$3}/>",
-    "    </div>",
+    "    <View flex padding-s5 gap-s4>",
+    "      <RadioButton label={'Radio Button'} selected={value} onPress={() => setValue(!value)}/>",
+    "      <RadioButton label={'Green Radio Button'} color={Colors.green30} selected={value2} onPress={() => setValue2(!value2)}/>",
+    "      <RadioButton label={'Square Radio Button'} borderRadius={0} size={20} selected={value3} onPress={() => setValue3(!value3)}/>",
+    "    </View>",
     "  );",
     "}"
   ],
diff --git a/src/components/radioGroup/radioGroup.api.json b/src/components/radioGroup/radioGroup.api.json
index 70f2fae4a4..39d3e4d137 100644
--- a/src/components/radioGroup/radioGroup.api.json
+++ b/src/components/radioGroup/radioGroup.api.json
@@ -23,14 +23,15 @@
   ],
   "snippet": [
     "function Example(props) {",
-    "  const [currentValue, setCurrentValue] = useState('yes'$1);",
+    "  const [currentValue, setCurrentValue] = useState('yes');",
     "  return (",
-    "    <div>",
-    "      <RadioGroup initialValue={currentValue$2} onValueChange={setCurrentValue$3}>",
-    "        <RadioButton value={'yes'$4} label={'Yes'$5}/>",
-    "        <RadioButton marginT-10 value={'no'$6} label={'No'$7}/>",
+    "    <View flex padding-s5>",
+    "      <RadioGroup initialValue={currentValue} onValueChange={setCurrentValue} gap-s4>",
+    "        <RadioButton value={'yes'} label={'Yes'}/>",
+    "        <RadioButton value={'no'} label={'No'}/>",
+    "        <RadioButton value={'maybe'} label={'Maybe'}/>",
     "      </RadioGroup>",
-    "    </div>",
+    "    </View>",
     "  );",
     "}"
   ]
diff --git a/src/components/segmentedControl/segmentedControl.api.json b/src/components/segmentedControl/segmentedControl.api.json
index 43a8030ee7..01e3cdbd70 100644
--- a/src/components/segmentedControl/segmentedControl.api.json
+++ b/src/components/segmentedControl/segmentedControl.api.json
@@ -96,18 +96,22 @@
       "description": "Pass props for the SegmentedControl label"
     },
     {
-      "name":"preset",
+      "name": "preset",
       "type": "SegmentedControlPreset",
       "description": "Preset of the SegmentedControl [default, form]"
     }
   ],
   "snippet": [
-    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}]$1}/>"
+    "<View flex padding-s5 gap-s4>",
+    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]}/>",
+    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} preset='form'/>",
+    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} borderRadius={12} outlineColor={Colors.yellow30} outlineWidth={3} activeColor={Colors.yellow20}/>",
+    "</View>"
   ],
   "docs": {
     "hero": {
       "title": "SegmentedControl",
-      "description": "A segmented control is a linear set of two or more segments.
Segmented control is often used to display and switch between different views.",
+      "description": "A segmented control is a linear set of two or more segments.Segmented control is often used to display and switch between different views.",
       "type": "hero",
       "layout": "horizontal",
       "content": [
@@ -131,10 +135,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Preview"
-            ],
+            "columns": ["Property", "Preview"],
             "items": [
               {
                 "title": "Default",
@@ -147,7 +148,7 @@
               },
               {
                 "title": "Form",
-                "description": "markdown:\nSuitable for form or settings screens, matches with other related components such as textField, Picker and others.  \n    preset=\"form\"",
+                "description": "Suitable for form or settings screens, matches with other related components such as textField, Picker and others.  \n    preset=\"form\"",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_style_form.png"
@@ -159,10 +160,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Preview"
-            ],
+            "columns": ["Property", "Preview"],
             "items": [
               {
                 "title": "Full width",
diff --git a/src/components/slider/slider.api.json b/src/components/slider/slider.api.json
index 61de92fda2..307de5642d 100644
--- a/src/components/slider/slider.api.json
+++ b/src/components/slider/slider.api.json
@@ -227,7 +227,7 @@
               }
             ],
             "title": "Spec",
-            "description": "Markdown:\n\n**Linear slider**\n\n**Default**\nThumb: 24px  \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
+            "description": "markdown:\n\n**Linear slider**\n\n**Default**\nThumb: 24px  \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
           },
           {
             "type": "section",
@@ -237,7 +237,7 @@
                 "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
               }
             ],
-            "description": "Markdown:\n\n**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
+            "description": "markdown:\n\n**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
           }
         ]
       }
diff --git a/src/components/stepper/stepper.api.json b/src/components/stepper/stepper.api.json
index 98d1d724ef..ca74501ffa 100644
--- a/src/components/stepper/stepper.api.json
+++ b/src/components/stepper/stepper.api.json
@@ -58,7 +58,9 @@
     }
   ],
   "snippet": [
-    "<Stepper$1/>"
+    "<View flex center>",
+    "<Stepper minValue={0} maxValue={5}/>",
+    "</View>"
   ],
   "docs": {
     "hero": {
diff --git a/src/components/test.api.json b/src/components/test.api.json
index e5943b166b..875312ce8c 100644
--- a/src/components/test.api.json
+++ b/src/components/test.api.json
@@ -1,6 +1,6 @@
 {
   "name": "Tests",
-  "category": "basic",
+  "category": "dev",
   "description": "This is just a tests page for the new docs component page",
   "extends": [
     "Text",
diff --git a/src/incubator/slider/slider.api.json b/src/incubator/slider/slider.api.json
index ca01367066..48ad78c1c7 100644
--- a/src/incubator/slider/slider.api.json
+++ b/src/incubator/slider/slider.api.json
@@ -100,10 +100,10 @@
   ],
   "snippet": [
     "<Incubator.Slider",
-    "  value={0$1}",
-    "  minimumValue={0$2}",
-    "  maximumValue={10$3}",
-    "  onValueChange={value => console.log(\\`value changed: \\${value}\\`)$4}",
+    "  value={0}",
+    "  minimumValue={0}",
+    "  maximumValue={10}",
+    "  onValueChange={value => console.log(\\`value changed: \\${value}\\`)}",
     "/>"
   ],
   "docs": {
@@ -187,7 +187,7 @@
               }
             ],
             "title": "Spec",
-            "description": "**Linear slider**\n\n**Default**\nThumb: 24px  \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
+            "description": "markdown:  **Linear slider**\n\n**Default**\nThumb: 24px  \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
           },
           {
             "type": "section",
@@ -197,7 +197,7 @@
                 "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
               }
             ],
-            "description": "**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
+            "description": "markdown:  **Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
           }
         ]
       }