From a029588a8681df10638111b0660884ebd8114e80 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 3 Aug 2026 15:04:41 +0200
Subject: [PATCH] docs: render live examples on the pages still using preview
 fences

footer, icon, form control, checks & radios, grid, columns and gutters
still carried the pre-Astro ```jsx preview fences. The docs engine has no
handler for the `preview` meta, so all 60 of them rendered as code blocks
with no demo. Move each snippet to an `examples/*.tsx` file mounted through
<Example>, the pattern every other page already uses.
---
 .../components/examples/FooterExample.tsx     |  14 +
 .../examples/IconCssVariablesExample.tsx      |  10 +
 .../components/examples/IconSizingExample.tsx |  13 +
 .../examples/IconUtilityClassesExample.tsx    |  14 +
 .../src/content/docs/components/footer.mdx    |  18 +-
 .../docs/src/content/docs/components/icon.mdx |  40 +--
 .../src/content/docs/forms/checks-radios.mdx  | 186 ++++++-------
 ...iosCheckboxToggleButtonsCheckedExample.tsx |  11 +
 ...osCheckboxToggleButtonsDisabledExample.tsx |  11 +
 ...ecksRadiosCheckboxToggleButtonsExample.tsx |  10 +
 .../examples/ChecksRadiosChecksExample.tsx    |   8 +
 .../examples/ChecksRadiosDisabledExample.tsx  |   8 +
 .../ChecksRadiosIndeterminateExample.tsx      |   5 +
 .../examples/ChecksRadiosInlineExample.tsx    |   9 +
 .../ChecksRadiosInlineRadiosExample.tsx       |  31 +++
 .../ChecksRadiosOutlinedStylesExample.tsx     |  42 +++
 .../ChecksRadiosRadioToggleButtonsExample.tsx |  40 +++
 .../ChecksRadiosRadiosDisabledExample.tsx     |  21 ++
 .../examples/ChecksRadiosRadiosExample.tsx    |  14 +
 .../examples/ChecksRadiosStackedExample.tsx   |   8 +
 .../ChecksRadiosStackedRadiosExample.tsx      |  29 ++
 .../ChecksRadiosSwitchSizesExample.tsx        |  13 +
 .../examples/ChecksRadiosSwitchesExample.tsx  |  15 +
 .../ChecksRadiosWithoutLabelsExample.tsx      |  12 +
 .../examples/FormControlColorExample.tsx      |  13 +
 .../examples/FormControlDisabledExample.tsx   |  19 ++
 .../forms/examples/FormControlExample.tsx     |  14 +
 .../examples/FormControlFileInputExample.tsx  |  26 ++
 .../examples/FormControlReadonlyExample.tsx   |  10 +
 .../FormControlReadonlyPlainTextExample.tsx   |  28 ++
 ...mControlReadonlyPlainTextInlineExample.tsx |  29 ++
 .../examples/FormControlSizingExample.tsx     |   9 +
 .../src/content/docs/forms/form-control.mdx   | 122 +++-----
 .../docs/src/content/docs/layout/columns.mdx  | 262 +++++-------------
 .../layout/examples/ColumnsBreaksExample.tsx  |  21 ++
 .../ColumnsBreaksResponsiveExample.tsx        |  21 ++
 .../ColumnsHorizontalAlignmentExample.tsx     |  30 ++
 .../ColumnsMarginUtilitiesExample.tsx         |  26 ++
 .../layout/examples/ColumnsOffsetExample.tsx  |  17 ++
 .../examples/ColumnsOffsetResetExample.tsx    |  22 ++
 .../layout/examples/ColumnsOrderExample.tsx   |  11 +
 .../examples/ColumnsOrderFirstLastExample.tsx |  11 +
 .../examples/ColumnsStandaloneExample.tsx     |  12 +
 .../ColumnsVerticalAlignmentExample.tsx       |  21 ++
 .../ColumnsVerticalAlignmentSelfExample.tsx   |  11 +
 .../examples/ColumnsWrappingExample.tsx       |  20 ++
 .../examples/GridAllBreakpointsExample.tsx    |  16 ++
 .../layout/examples/GridEqualWidthExample.tsx |  15 +
 .../docs/layout/examples/GridExample.tsx      |  11 +
 .../examples/GridMixAndMatchExample.tsx       |  27 ++
 .../examples/GridRowColumns2Example.tsx       |  12 +
 .../examples/GridRowColumns3Example.tsx       |  12 +
 .../examples/GridRowColumns4ColExample.tsx    |  12 +
 .../examples/GridRowColumns4Example.tsx       |  12 +
 .../examples/GridRowColumnsAutoExample.tsx    |  12 +
 .../GridRowColumnsResponsiveExample.tsx       |  12 +
 .../GridSettingOneColumnWidthExample.tsx      |  16 ++
 .../GridStackedToHorizontalExample.tsx        |  15 +
 .../GridVariableWidthContentExample.tsx       |  22 ++
 .../examples/GuttersHorizontalExample.tsx     |  14 +
 ...GuttersHorizontalOverflowHiddenExample.tsx |  14 +
 .../GuttersHorizontalVerticalExample.tsx      |  20 ++
 .../examples/GuttersNoGuttersExample.tsx      |  12 +
 .../examples/GuttersRowColumnsExample.tsx     |  38 +++
 .../examples/GuttersVerticalExample.tsx       |  20 ++
 .../docs/src/content/docs/layout/grid.mdx     | 244 +++++-----------
 .../docs/src/content/docs/layout/gutters.mdx  | 133 +++------
 67 files changed, 1337 insertions(+), 689 deletions(-)
 create mode 100644 packages/docs/src/content/docs/components/examples/FooterExample.tsx
 create mode 100644 packages/docs/src/content/docs/components/examples/IconCssVariablesExample.tsx
 create mode 100644 packages/docs/src/content/docs/components/examples/IconSizingExample.tsx
 create mode 100644 packages/docs/src/content/docs/components/examples/IconUtilityClassesExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsCheckedExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsDisabledExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosChecksExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosDisabledExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosIndeterminateExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosInlineExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosInlineRadiosExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosOutlinedStylesExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosRadioToggleButtonsExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosRadiosDisabledExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosRadiosExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosStackedExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosStackedRadiosExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosSwitchSizesExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosSwitchesExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/ChecksRadiosWithoutLabelsExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/FormControlColorExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/FormControlDisabledExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/FormControlExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/FormControlFileInputExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/FormControlReadonlyExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextInlineExample.tsx
 create mode 100644 packages/docs/src/content/docs/forms/examples/FormControlSizingExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsBreaksExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsBreaksResponsiveExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsHorizontalAlignmentExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsMarginUtilitiesExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsOffsetExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsOffsetResetExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsOrderExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsOrderFirstLastExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsStandaloneExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentSelfExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/ColumnsWrappingExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridAllBreakpointsExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridEqualWidthExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridMixAndMatchExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridRowColumns2Example.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridRowColumns3Example.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridRowColumns4ColExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridRowColumns4Example.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridRowColumnsAutoExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridRowColumnsResponsiveExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridSettingOneColumnWidthExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridStackedToHorizontalExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GridVariableWidthContentExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GuttersHorizontalExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GuttersHorizontalOverflowHiddenExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GuttersHorizontalVerticalExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GuttersNoGuttersExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GuttersRowColumnsExample.tsx
 create mode 100644 packages/docs/src/content/docs/layout/examples/GuttersVerticalExample.tsx

diff --git a/packages/docs/src/content/docs/components/examples/FooterExample.tsx b/packages/docs/src/content/docs/components/examples/FooterExample.tsx
new file mode 100644
index 00000000..aace8ecb
--- /dev/null
+++ b/packages/docs/src/content/docs/components/examples/FooterExample.tsx
@@ -0,0 +1,14 @@
+import { CFooter, CLink } from '@coreui/react'
+
+export const FooterExample = () => (
+  <CFooter>
+    <div>
+      <CLink href="https://coreui.io">CoreUI</CLink>
+      <span>&copy; 2026 creativeLabs.</span>
+    </div>
+    <div>
+      <span>Powered by</span>
+      <CLink href="https://coreui.io">CoreUI</CLink>
+    </div>
+  </CFooter>
+)
diff --git a/packages/docs/src/content/docs/components/examples/IconCssVariablesExample.tsx b/packages/docs/src/content/docs/components/examples/IconCssVariablesExample.tsx
new file mode 100644
index 00000000..e5e927e6
--- /dev/null
+++ b/packages/docs/src/content/docs/components/examples/IconCssVariablesExample.tsx
@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'react'
+import { CIcon } from '@coreui/icons-react/src/index'
+import { cilList } from '@coreui/icons'
+
+export const IconCssVariablesExample = () => (
+  <>
+    <CIcon icon={cilList} size="xl" style={{ '--ci-primary-color': 'red' } as CSSProperties} />
+    <CIcon icon={cilList} size="xl" style={{ '--ci-primary-color': 'green' } as CSSProperties} />
+  </>
+)
diff --git a/packages/docs/src/content/docs/components/examples/IconSizingExample.tsx b/packages/docs/src/content/docs/components/examples/IconSizingExample.tsx
new file mode 100644
index 00000000..2f0b2c4b
--- /dev/null
+++ b/packages/docs/src/content/docs/components/examples/IconSizingExample.tsx
@@ -0,0 +1,13 @@
+import { CIcon } from '@coreui/icons-react/src/index'
+import { cilList } from '@coreui/icons'
+
+export const IconSizingExample = () => (
+  <>
+    <CIcon icon={cilList} size="sm" />
+    <CIcon icon={cilList} />
+    <CIcon icon={cilList} size="lg" />
+    <CIcon icon={cilList} size="xl" />
+    <CIcon icon={cilList} size="xxl" />
+    <CIcon icon={cilList} size="3xl" />
+  </>
+)
diff --git a/packages/docs/src/content/docs/components/examples/IconUtilityClassesExample.tsx b/packages/docs/src/content/docs/components/examples/IconUtilityClassesExample.tsx
new file mode 100644
index 00000000..86ecff08
--- /dev/null
+++ b/packages/docs/src/content/docs/components/examples/IconUtilityClassesExample.tsx
@@ -0,0 +1,14 @@
+import { CIcon } from '@coreui/icons-react/src/index'
+import { cilList } from '@coreui/icons'
+
+export const IconUtilityClassesExample = () => (
+  <>
+    <CIcon icon={cilList} size="xl" />
+    <CIcon icon={cilList} className="text-primary" size="xl" />
+    <CIcon icon={cilList} className="text-secondary" size="xl" />
+    <CIcon icon={cilList} className="text-success" size="xl" />
+    <CIcon icon={cilList} className="text-danger" size="xl" />
+    <CIcon icon={cilList} className="text-warning" size="xl" />
+    <CIcon icon={cilList} className="text-info" size="xl" />
+  </>
+)
diff --git a/packages/docs/src/content/docs/components/footer.mdx b/packages/docs/src/content/docs/components/footer.mdx
index 25818374..a7a44ba6 100644
--- a/packages/docs/src/content/docs/components/footer.mdx
+++ b/packages/docs/src/content/docs/components/footer.mdx
@@ -8,20 +8,14 @@ otherFrameworks:
 
 import CFooterData from '@api/CFooter.api.json'
 
+import { FooterExample } from './examples/FooterExample'
+import FooterExampleRaw from './examples/FooterExample.tsx?raw'
+
 ## Example
 
-```jsx preview demo
-<CFooter>
-  <div>
-    <CLink href="https://coreui.io">CoreUI</CLink>
-    <span>&copy; 2026 creativeLabs.</span>
-  </div>
-  <div>
-    <span>Powered by</span>
-    <CLink href="https://coreui.io">CoreUI</CLink>
-  </div>
-</CFooter>
-```
+<Example code={FooterExampleRaw} name="FooterExample" componentName="React Footer">
+  <FooterExample client:only="react" />
+</Example>
 
 ## Customizing
 
diff --git a/packages/docs/src/content/docs/components/icon.mdx b/packages/docs/src/content/docs/components/icon.mdx
index fdd5f4a9..2ca8127a 100644
--- a/packages/docs/src/content/docs/components/icon.mdx
+++ b/packages/docs/src/content/docs/components/icon.mdx
@@ -19,10 +19,12 @@ import { IconDemo0 } from './examples/IconDemo0'
 import IconDemo0Raw from './examples/IconDemo0.tsx?raw'
 import { IconDemo1 } from './examples/IconDemo1'
 import IconDemo1Raw from './examples/IconDemo1.tsx?raw'
-
-import {CIcon, CIconSvg} from '@coreui/icons-react/src/index'
-import { cilList, cilShieldAlt } from '@coreui/icons'
-import * as icon from '@coreui/icons';
+import { IconUtilityClassesExample } from './examples/IconUtilityClassesExample'
+import IconUtilityClassesExampleRaw from './examples/IconUtilityClassesExample.tsx?raw'
+import { IconCssVariablesExample } from './examples/IconCssVariablesExample'
+import IconCssVariablesExampleRaw from './examples/IconCssVariablesExample.tsx?raw'
+import { IconSizingExample } from './examples/IconSizingExample'
+import IconSizingExampleRaw from './examples/IconSizingExample.tsx?raw'
 
 ## Installation
 
@@ -87,37 +89,25 @@ The CoreUI React Icon component offers versatile color customization options, em
 
 With some [color utility classes](https://coreui.io/bootstrap/docs/utilities/colors/), you may use color to convey message.
 
-```jsx preview
-<CIcon icon={cilList} size="xl" />
-<CIcon icon={cilList} className="text-primary" size="xl" />
-<CIcon icon={cilList} className="text-secondary" size="xl" />
-<CIcon icon={cilList} className="text-success" size="xl" />
-<CIcon icon={cilList} className="text-danger" size="xl" />
-<CIcon icon={cilList} className="text-warning" size="xl" />
-<CIcon icon={cilList} className="text-info" size="xl" />
-```
+<Example code={IconUtilityClassesExampleRaw} name="IconUtilityClassesExample" componentName="React Icon">
+  <IconUtilityClassesExample client:only="react" />
+</Example>
 
 #### CSS Variables
 
 CoreUI React Icons leverage local CSS variables, such as `--ci-primary-color` and `--ci-secondary-color` (for Duotone icons), to facilitate real-time customization. This allows developers to easily customize the icons by providing their own custom CSS variables.
 
-```jsx preview
-<CIcon icon={cilList} size="xl" style={{'--ci-primary-color': 'red'}} />
-<CIcon icon={cilList} size="xl" style={{'--ci-primary-color': 'green'}} />
-```
+<Example code={IconCssVariablesExampleRaw} name="IconCssVariablesExample" componentName="React Icon">
+  <IconCssVariablesExample client:only="react" />
+</Example>
 
 ### Sizing
 
 Set heights of React icons using size property like size="lg" and size="sm".
 
-```jsx preview
-<CIcon icon={cilList} size="sm" />
-<CIcon icon={cilList} />
-<CIcon icon={cilList} size="lg" />
-<CIcon icon={cilList} size="xl" />
-<CIcon icon={cilList} size="xxl" />
-<CIcon icon={cilList} size="3xl" />
-```
+<Example code={IconSizingExampleRaw} name="IconSizingExample" componentName="React Icon">
+  <IconSizingExample client:only="react" />
+</Example>
 
 ### Custom SVG Icons
 
diff --git a/packages/docs/src/content/docs/forms/checks-radios.mdx b/packages/docs/src/content/docs/forms/checks-radios.mdx
index 9ec4fbfb..28e1cc1e 100644
--- a/packages/docs/src/content/docs/forms/checks-radios.mdx
+++ b/packages/docs/src/content/docs/forms/checks-radios.mdx
@@ -7,112 +7,126 @@ description: "Create consistent cross-browser and cross-device checkboxes and ra
 import CFormCheckData from '@api/CFormCheck.api.json'
 import CFormSwitchData from '@api/CFormSwitch.api.json'
 
+import { ChecksRadiosChecksExample } from './examples/ChecksRadiosChecksExample'
+import ChecksRadiosChecksExampleRaw from './examples/ChecksRadiosChecksExample.tsx?raw'
+import { ChecksRadiosIndeterminateExample } from './examples/ChecksRadiosIndeterminateExample'
+import ChecksRadiosIndeterminateExampleRaw from './examples/ChecksRadiosIndeterminateExample.tsx?raw'
+import { ChecksRadiosDisabledExample } from './examples/ChecksRadiosDisabledExample'
+import ChecksRadiosDisabledExampleRaw from './examples/ChecksRadiosDisabledExample.tsx?raw'
+import { ChecksRadiosRadiosExample } from './examples/ChecksRadiosRadiosExample'
+import ChecksRadiosRadiosExampleRaw from './examples/ChecksRadiosRadiosExample.tsx?raw'
+import { ChecksRadiosRadiosDisabledExample } from './examples/ChecksRadiosRadiosDisabledExample'
+import ChecksRadiosRadiosDisabledExampleRaw from './examples/ChecksRadiosRadiosDisabledExample.tsx?raw'
+import { ChecksRadiosSwitchesExample } from './examples/ChecksRadiosSwitchesExample'
+import ChecksRadiosSwitchesExampleRaw from './examples/ChecksRadiosSwitchesExample.tsx?raw'
+import { ChecksRadiosSwitchSizesExample } from './examples/ChecksRadiosSwitchSizesExample'
+import ChecksRadiosSwitchSizesExampleRaw from './examples/ChecksRadiosSwitchSizesExample.tsx?raw'
+import { ChecksRadiosStackedExample } from './examples/ChecksRadiosStackedExample'
+import ChecksRadiosStackedExampleRaw from './examples/ChecksRadiosStackedExample.tsx?raw'
+import { ChecksRadiosStackedRadiosExample } from './examples/ChecksRadiosStackedRadiosExample'
+import ChecksRadiosStackedRadiosExampleRaw from './examples/ChecksRadiosStackedRadiosExample.tsx?raw'
+import { ChecksRadiosInlineExample } from './examples/ChecksRadiosInlineExample'
+import ChecksRadiosInlineExampleRaw from './examples/ChecksRadiosInlineExample.tsx?raw'
+import { ChecksRadiosInlineRadiosExample } from './examples/ChecksRadiosInlineRadiosExample'
+import ChecksRadiosInlineRadiosExampleRaw from './examples/ChecksRadiosInlineRadiosExample.tsx?raw'
+import { ChecksRadiosWithoutLabelsExample } from './examples/ChecksRadiosWithoutLabelsExample'
+import ChecksRadiosWithoutLabelsExampleRaw from './examples/ChecksRadiosWithoutLabelsExample.tsx?raw'
+import { ChecksRadiosCheckboxToggleButtonsExample } from './examples/ChecksRadiosCheckboxToggleButtonsExample'
+import ChecksRadiosCheckboxToggleButtonsExampleRaw from './examples/ChecksRadiosCheckboxToggleButtonsExample.tsx?raw'
+import { ChecksRadiosCheckboxToggleButtonsCheckedExample } from './examples/ChecksRadiosCheckboxToggleButtonsCheckedExample'
+import ChecksRadiosCheckboxToggleButtonsCheckedExampleRaw from './examples/ChecksRadiosCheckboxToggleButtonsCheckedExample.tsx?raw'
+import { ChecksRadiosCheckboxToggleButtonsDisabledExample } from './examples/ChecksRadiosCheckboxToggleButtonsDisabledExample'
+import ChecksRadiosCheckboxToggleButtonsDisabledExampleRaw from './examples/ChecksRadiosCheckboxToggleButtonsDisabledExample.tsx?raw'
+import { ChecksRadiosRadioToggleButtonsExample } from './examples/ChecksRadiosRadioToggleButtonsExample'
+import ChecksRadiosRadioToggleButtonsExampleRaw from './examples/ChecksRadiosRadioToggleButtonsExample.tsx?raw'
+import { ChecksRadiosOutlinedStylesExample } from './examples/ChecksRadiosOutlinedStylesExample'
+import ChecksRadiosOutlinedStylesExampleRaw from './examples/ChecksRadiosOutlinedStylesExample.tsx?raw'
+
 ## Approach
 
 Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
 
 ## Checks
 
-```jsx preview
-<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
-<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
-```
+<Example code={ChecksRadiosChecksExampleRaw} name="ChecksRadiosChecksExample" componentName="React Checks & Radios">
+  <ChecksRadiosChecksExample client:only="react" />
+</Example>
 
 ## Indeterminate
 
 Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
 
-```jsx preview
-<CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
-```
+<Example code={ChecksRadiosIndeterminateExampleRaw} name="ChecksRadiosIndeterminateExample" componentName="React Checks & Radios">
+  <ChecksRadiosIndeterminateExample client:only="react" />
+</Example>
 
 ### Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
 
-```jsx preview
-<CFormCheck label="Disabled checkbox" disabled/>
-<CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
-```
+<Example code={ChecksRadiosDisabledExampleRaw} name="ChecksRadiosDisabledExample" componentName="React Checks & Radios">
+  <ChecksRadiosDisabledExample client:only="react" />
+</Example>
 
 ## Radios
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
 
-```jsx preview
-<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
-<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
-```
+<Example code={ChecksRadiosRadiosExampleRaw} name="ChecksRadiosRadiosExample" componentName="React Checks & Radios">
+  <ChecksRadiosRadiosExample client:only="react" />
+</Example>
 
 ### Disabled
 
-```jsx preview
-<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>
-<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
-```
+<Example code={ChecksRadiosRadiosDisabledExampleRaw} name="ChecksRadiosRadiosDisabledExample" componentName="React Checks & Radios">
+  <ChecksRadiosRadiosDisabledExample client:only="react" />
+</Example>
 
 ## Switches
 
 A switch has the markup of a custom checkbox but uses the `switch` boolean properly to render a toggle switch. Switches also support the `disabled` attribute.
 
-```jsx preview
-<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
-<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
-<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
-<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
-```
+<Example code={ChecksRadiosSwitchesExampleRaw} name="ChecksRadiosSwitchesExample" componentName="React Checks & Radios">
+  <ChecksRadiosSwitchesExample client:only="react" />
+</Example>
 
 ### Sizes
 
-```jsx preview
-<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
-<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
-<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
-```
+<Example code={ChecksRadiosSwitchSizesExampleRaw} name="ChecksRadiosSwitchSizesExample" componentName="React Checks & Radios">
+  <ChecksRadiosSwitchSizesExample client:only="react" />
+</Example>
 
 ## Default (stacked)
 
 By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.
 
-```jsx preview
-<CFormCheck id="defaultCheck1" label="Default checkbox"/>
-<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled/>
-```
+<Example code={ChecksRadiosStackedExampleRaw} name="ChecksRadiosStackedExample" componentName="React Checks & Radios">
+  <ChecksRadiosStackedExample client:only="react" />
+</Example>
 
-```jsx preview
-<CFormCheck type="radio" name="exampleRadios" id="exampleRadios1" value="option1" label="Default radio" defaultChecked/>
-<CFormCheck type="radio" name="exampleRadios" id="exampleRadios2" value="option2" label="Second default radio"/>
-<CFormCheck type="radio" name="exampleRadios" id="exampleRadios3" value="option3" label="Disabled radio" disabled/>
-```
+<Example code={ChecksRadiosStackedRadiosExampleRaw} name="ChecksRadiosStackedRadiosExample" componentName="React Checks & Radios">
+  <ChecksRadiosStackedRadiosExample client:only="react" />
+</Example>
 
 ## Inline
 
 Group checkboxes or radios on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
 
-```jsx preview
-<CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>
-<CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>
-<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
-```
+<Example code={ChecksRadiosInlineExampleRaw} name="ChecksRadiosInlineExample" componentName="React Checks & Radios">
+  <ChecksRadiosInlineExample client:only="react" />
+</Example>
 
-```jsx preview
-<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>
-<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>
-<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
-```
+<Example code={ChecksRadiosInlineRadiosExampleRaw} name="ChecksRadiosInlineRadiosExample" componentName="React Checks & Radios">
+  <ChecksRadiosInlineRadiosExample client:only="react" />
+</Example>
 
 ## Without labels
 
 Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
 
-```jsx preview
-<div>
-  <CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>
-</div>
-<div>
-  <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>
-</div>
-```
+<Example code={ChecksRadiosWithoutLabelsExampleRaw} name="ChecksRadiosWithoutLabelsExample" componentName="React Checks & Radios">
+  <ChecksRadiosWithoutLabelsExample client:only="react" />
+</Example>
 
 ## Toggle buttons
 
@@ -120,55 +134,31 @@ Create button-like checkboxes and radio buttons by using `button` boolean proper
 
 ### Checkbox toggle buttons
 
-```jsx preview
-<CFormCheck button={{ color: 'primary' }} id="btn-check" autoComplete="off" label="Single toggle" />
-```
-
-```jsx preview
-<CFormCheck
-  button={{ color: 'primary' }}
-  id="btn-check-2"
-  autoComplete="off"
-  label="Checked"
-  defaultChecked
-/>
-```
-
-```jsx preview
-<CFormCheck
-  button={{ color: 'primary' }}
-  id="btn-check-3"
-  autoComplete="off"
-  label="Disabled"
-  disabled
-/>
-```
+<Example code={ChecksRadiosCheckboxToggleButtonsExampleRaw} name="ChecksRadiosCheckboxToggleButtonsExample" componentName="React Checks & Radios">
+  <ChecksRadiosCheckboxToggleButtonsExample client:only="react" />
+</Example>
+
+<Example code={ChecksRadiosCheckboxToggleButtonsCheckedExampleRaw} name="ChecksRadiosCheckboxToggleButtonsCheckedExample" componentName="React Checks & Radios">
+  <ChecksRadiosCheckboxToggleButtonsCheckedExample client:only="react" />
+</Example>
+
+<Example code={ChecksRadiosCheckboxToggleButtonsDisabledExampleRaw} name="ChecksRadiosCheckboxToggleButtonsDisabledExample" componentName="React Checks & Radios">
+  <ChecksRadiosCheckboxToggleButtonsDisabledExample client:only="react" />
+</Example>
 
 ### Radio toggle buttons
 
-```jsx preview
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
-```
+<Example code={ChecksRadiosRadioToggleButtonsExampleRaw} name="ChecksRadiosRadioToggleButtonsExample" componentName="React Checks & Radios">
+  <ChecksRadiosRadioToggleButtonsExample client:only="react" />
+</Example>
 
 ### Outlined styles
 
 Different variants of button, such at the various outlined styles, are supported.
 
-```jsx preview
-<div>
-  <CFormCheck button={{ color: 'primary', variant: 'outline' }} id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
-</div>
-<div>
-  <CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
-</div>
-<div>
-  <CFormCheck button={{ color: 'success', variant: 'outline' }} type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
-  <CFormCheck button={{ color: 'danger', variant: 'outline' }} type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
-</div>
-```
+<Example code={ChecksRadiosOutlinedStylesExampleRaw} name="ChecksRadiosOutlinedStylesExample" componentName="React Checks & Radios">
+  <ChecksRadiosOutlinedStylesExample client:only="react" />
+</Example>
 
 ## API
 
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsCheckedExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsCheckedExample.tsx
new file mode 100644
index 00000000..63c77668
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsCheckedExample.tsx
@@ -0,0 +1,11 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosCheckboxToggleButtonsCheckedExample = () => (
+  <CFormCheck
+    button={{ color: 'primary' }}
+    id="btn-check-2"
+    autoComplete="off"
+    label="Checked"
+    defaultChecked
+  />
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsDisabledExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsDisabledExample.tsx
new file mode 100644
index 00000000..dd06e5a5
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsDisabledExample.tsx
@@ -0,0 +1,11 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosCheckboxToggleButtonsDisabledExample = () => (
+  <CFormCheck
+    button={{ color: 'primary' }}
+    id="btn-check-3"
+    autoComplete="off"
+    label="Disabled"
+    disabled
+  />
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsExample.tsx
new file mode 100644
index 00000000..9ee7409d
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsExample.tsx
@@ -0,0 +1,10 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosCheckboxToggleButtonsExample = () => (
+  <CFormCheck
+    button={{ color: 'primary' }}
+    id="btn-check"
+    autoComplete="off"
+    label="Single toggle"
+  />
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosChecksExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosChecksExample.tsx
new file mode 100644
index 00000000..22cac6f2
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosChecksExample.tsx
@@ -0,0 +1,8 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosChecksExample = () => (
+  <>
+    <CFormCheck id="flexCheckDefault" label="Default checkbox" />
+    <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosDisabledExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosDisabledExample.tsx
new file mode 100644
index 00000000..38f80cb3
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosDisabledExample.tsx
@@ -0,0 +1,8 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosDisabledExample = () => (
+  <>
+    <CFormCheck label="Disabled checkbox" disabled />
+    <CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosIndeterminateExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosIndeterminateExample.tsx
new file mode 100644
index 00000000..79b16f36
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosIndeterminateExample.tsx
@@ -0,0 +1,5 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosIndeterminateExample = () => (
+  <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosInlineExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosInlineExample.tsx
new file mode 100644
index 00000000..d38bd694
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosInlineExample.tsx
@@ -0,0 +1,9 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosInlineExample = () => (
+  <>
+    <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
+    <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
+    <CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosInlineRadiosExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosInlineRadiosExample.tsx
new file mode 100644
index 00000000..79fbe16c
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosInlineRadiosExample.tsx
@@ -0,0 +1,31 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosInlineRadiosExample = () => (
+  <>
+    <CFormCheck
+      inline
+      type="radio"
+      name="inlineRadioOptions"
+      id="inlineCheckbox1"
+      value="option1"
+      label="1"
+    />
+    <CFormCheck
+      inline
+      type="radio"
+      name="inlineRadioOptions"
+      id="inlineCheckbox2"
+      value="option2"
+      label="2"
+    />
+    <CFormCheck
+      inline
+      type="radio"
+      name="inlineRadioOptions"
+      id="inlineCheckbox3"
+      value="option3"
+      label="3 (disabled)"
+      disabled
+    />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosOutlinedStylesExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosOutlinedStylesExample.tsx
new file mode 100644
index 00000000..361d7f8d
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosOutlinedStylesExample.tsx
@@ -0,0 +1,42 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosOutlinedStylesExample = () => (
+  <>
+    <div>
+      <CFormCheck
+        button={{ color: 'primary', variant: 'outline' }}
+        id="btn-check-outlined"
+        autoComplete="off"
+        label="Single toggle"
+      />
+    </div>
+    <div>
+      <CFormCheck
+        button={{ color: 'secondary', variant: 'outline' }}
+        id="btn-check-2-outlined"
+        autoComplete="off"
+        label="Checked"
+        defaultChecked
+      />
+    </div>
+    <div>
+      <CFormCheck
+        button={{ color: 'success', variant: 'outline' }}
+        type="radio"
+        name="options-outlined"
+        id="success-outlined"
+        autoComplete="off"
+        label="Radio"
+        defaultChecked
+      />
+      <CFormCheck
+        button={{ color: 'danger', variant: 'outline' }}
+        type="radio"
+        name="options-outlined"
+        id="danger-outlined"
+        autoComplete="off"
+        label="Radio"
+      />
+    </div>
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadioToggleButtonsExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadioToggleButtonsExample.tsx
new file mode 100644
index 00000000..9dc0e4f8
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadioToggleButtonsExample.tsx
@@ -0,0 +1,40 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosRadioToggleButtonsExample = () => (
+  <>
+    <CFormCheck
+      button={{ color: 'secondary' }}
+      type="radio"
+      name="options"
+      id="option1"
+      autoComplete="off"
+      label="Checked"
+      defaultChecked
+    />
+    <CFormCheck
+      button={{ color: 'secondary' }}
+      type="radio"
+      name="options"
+      id="option2"
+      autoComplete="off"
+      label="Radio"
+    />
+    <CFormCheck
+      button={{ color: 'secondary' }}
+      type="radio"
+      name="options"
+      id="option3"
+      autoComplete="off"
+      label="Radio"
+      disabled
+    />
+    <CFormCheck
+      button={{ color: 'secondary' }}
+      type="radio"
+      name="options"
+      id="option4"
+      autoComplete="off"
+      label="Radio"
+    />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadiosDisabledExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadiosDisabledExample.tsx
new file mode 100644
index 00000000..4a8312ba
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadiosDisabledExample.tsx
@@ -0,0 +1,21 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosRadiosDisabledExample = () => (
+  <>
+    <CFormCheck
+      type="radio"
+      name="flexRadioDisabled"
+      id="flexRadioDisabled"
+      label="Disabled radio"
+      disabled
+    />
+    <CFormCheck
+      type="radio"
+      name="flexRadioDisabled"
+      id="flexRadioCheckedDisabled"
+      label="Disabled checked radio"
+      defaultChecked
+      disabled
+    />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadiosExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadiosExample.tsx
new file mode 100644
index 00000000..830c0fc8
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadiosExample.tsx
@@ -0,0 +1,14 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosRadiosExample = () => (
+  <>
+    <CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio" />
+    <CFormCheck
+      type="radio"
+      name="flexRadioDefault"
+      id="flexRadioDefault2"
+      label="Checked radio"
+      defaultChecked
+    />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosStackedExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosStackedExample.tsx
new file mode 100644
index 00000000..b4189ffc
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosStackedExample.tsx
@@ -0,0 +1,8 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosStackedExample = () => (
+  <>
+    <CFormCheck id="defaultCheck1" label="Default checkbox" />
+    <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosStackedRadiosExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosStackedRadiosExample.tsx
new file mode 100644
index 00000000..80e3b61d
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosStackedRadiosExample.tsx
@@ -0,0 +1,29 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosStackedRadiosExample = () => (
+  <>
+    <CFormCheck
+      type="radio"
+      name="exampleRadios"
+      id="exampleRadios1"
+      value="option1"
+      label="Default radio"
+      defaultChecked
+    />
+    <CFormCheck
+      type="radio"
+      name="exampleRadios"
+      id="exampleRadios2"
+      value="option2"
+      label="Second default radio"
+    />
+    <CFormCheck
+      type="radio"
+      name="exampleRadios"
+      id="exampleRadios3"
+      value="option3"
+      label="Disabled radio"
+      disabled
+    />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosSwitchSizesExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosSwitchSizesExample.tsx
new file mode 100644
index 00000000..ef241b3a
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosSwitchSizesExample.tsx
@@ -0,0 +1,13 @@
+import { CFormSwitch } from '@coreui/react'
+
+export const ChecksRadiosSwitchSizesExample = () => (
+  <>
+    <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
+    <CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg" />
+    <CFormSwitch
+      size="xl"
+      label="Extra large switch checkbox input"
+      id="formSwitchCheckDefaultXL"
+    />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosSwitchesExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosSwitchesExample.tsx
new file mode 100644
index 00000000..4e91c776
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosSwitchesExample.tsx
@@ -0,0 +1,15 @@
+import { CFormSwitch } from '@coreui/react'
+
+export const ChecksRadiosSwitchesExample = () => (
+  <>
+    <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
+    <CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked />
+    <CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled />
+    <CFormSwitch
+      label="Disabled checked switch checkbox input"
+      id="formSwitchCheckCheckedDisabled"
+      defaultChecked
+      disabled
+    />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosWithoutLabelsExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosWithoutLabelsExample.tsx
new file mode 100644
index 00000000..d877ee4a
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosWithoutLabelsExample.tsx
@@ -0,0 +1,12 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosWithoutLabelsExample = () => (
+  <>
+    <div>
+      <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
+    </div>
+    <div>
+      <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..." />
+    </div>
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlColorExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlColorExample.tsx
new file mode 100644
index 00000000..33408cf7
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlColorExample.tsx
@@ -0,0 +1,13 @@
+import { CFormInput, CFormLabel } from '@coreui/react'
+
+export const FormControlColorExample = () => (
+  <>
+    <CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
+    <CFormInput
+      type="color"
+      id="exampleColorInput"
+      defaultValue="#563d7c"
+      title="Choose your color"
+    />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlDisabledExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlDisabledExample.tsx
new file mode 100644
index 00000000..585d9bc6
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlDisabledExample.tsx
@@ -0,0 +1,19 @@
+import { CFormInput } from '@coreui/react'
+
+export const FormControlDisabledExample = () => (
+  <>
+    <CFormInput
+      type="text"
+      placeholder="Disabled input"
+      aria-label="Disabled input example"
+      disabled
+    />
+    <CFormInput
+      type="text"
+      placeholder="Disabled readonly input"
+      aria-label="Disabled input example"
+      disabled
+      readOnly
+    />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlExample.tsx
new file mode 100644
index 00000000..8dcd2d8f
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlExample.tsx
@@ -0,0 +1,14 @@
+import { CForm, CFormInput, CFormLabel, CFormTextarea } from '@coreui/react'
+
+export const FormControlExample = () => (
+  <CForm>
+    <div className="mb-3">
+      <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
+      <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com" />
+    </div>
+    <div className="mb-3">
+      <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
+      <CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
+    </div>
+  </CForm>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlFileInputExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlFileInputExample.tsx
new file mode 100644
index 00000000..8bd5d96d
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlFileInputExample.tsx
@@ -0,0 +1,26 @@
+import { CFormInput, CFormLabel } from '@coreui/react'
+
+export const FormControlFileInputExample = () => (
+  <>
+    <div className="mb-3">
+      <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
+      <CFormInput type="file" id="formFile" />
+    </div>
+    <div className="mb-3">
+      <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
+      <CFormInput type="file" id="formFileMultiple" multiple />
+    </div>
+    <div className="mb-3">
+      <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
+      <CFormInput type="file" id="formFileDisabled" disabled />
+    </div>
+    <div className="mb-3">
+      <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
+      <CFormInput type="file" size="sm" id="formFileSm" />
+    </div>
+    <div>
+      <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
+      <CFormInput type="file" size="lg" id="formFileLg" />
+    </div>
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlReadonlyExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyExample.tsx
new file mode 100644
index 00000000..fa5b2d56
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyExample.tsx
@@ -0,0 +1,10 @@
+import { CFormInput } from '@coreui/react'
+
+export const FormControlReadonlyExample = () => (
+  <CFormInput
+    type="text"
+    placeholder="Readonly input here..."
+    aria-label="readonly input example"
+    readOnly
+  />
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextExample.tsx
new file mode 100644
index 00000000..b34a6814
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextExample.tsx
@@ -0,0 +1,28 @@
+import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+export const FormControlReadonlyPlainTextExample = () => (
+  <>
+    <CRow className="mb-3">
+      <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
+        Email
+      </CFormLabel>
+      <CCol sm={10}>
+        <CFormInput
+          type="text"
+          id="staticEmail"
+          defaultValue="email@example.com"
+          readOnly
+          plainText
+        />
+      </CCol>
+    </CRow>
+    <CRow className="mb-3">
+      <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">
+        Password
+      </CFormLabel>
+      <CCol sm={10}>
+        <CFormInput type="password" id="inputPassword" />
+      </CCol>
+    </CRow>
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextInlineExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextInlineExample.tsx
new file mode 100644
index 00000000..eb6ad256
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextInlineExample.tsx
@@ -0,0 +1,29 @@
+import { CButton, CCol, CForm, CFormInput, CFormLabel } from '@coreui/react'
+
+export const FormControlReadonlyPlainTextInlineExample = () => (
+  <CForm className="row g-3">
+    <CCol xs="auto">
+      <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
+        Email
+      </CFormLabel>
+      <CFormInput
+        type="text"
+        id="staticEmail2"
+        defaultValue="email@example.com"
+        readOnly
+        plainText
+      />
+    </CCol>
+    <CCol xs="auto">
+      <CFormLabel htmlFor="inputPassword2" className="visually-hidden">
+        Password
+      </CFormLabel>
+      <CFormInput type="password" id="inputPassword2" placeholder="Password" />
+    </CCol>
+    <CCol xs="auto">
+      <CButton color="primary" type="submit" className="mb-3">
+        Confirm identity
+      </CButton>
+    </CCol>
+  </CForm>
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlSizingExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlSizingExample.tsx
new file mode 100644
index 00000000..73102bbb
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlSizingExample.tsx
@@ -0,0 +1,9 @@
+import { CFormInput } from '@coreui/react'
+
+export const FormControlSizingExample = () => (
+  <>
+    <CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example" />
+    <CFormInput type="text" placeholder="Default input" aria-label="default input example" />
+    <CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example" />
+  </>
+)
diff --git a/packages/docs/src/content/docs/forms/form-control.mdx b/packages/docs/src/content/docs/forms/form-control.mdx
index 3a9e0592..b10f483c 100644
--- a/packages/docs/src/content/docs/forms/form-control.mdx
+++ b/packages/docs/src/content/docs/forms/form-control.mdx
@@ -7,114 +7,76 @@ description: "React input and textarea components. Give textual form controls li
 import CFormInputData from '@api/CFormInput.api.json'
 import CFormTextareaData from '@api/CFormTextarea.api.json'
 
+import { FormControlExample } from './examples/FormControlExample'
+import FormControlExampleRaw from './examples/FormControlExample.tsx?raw'
+import { FormControlSizingExample } from './examples/FormControlSizingExample'
+import FormControlSizingExampleRaw from './examples/FormControlSizingExample.tsx?raw'
+import { FormControlDisabledExample } from './examples/FormControlDisabledExample'
+import FormControlDisabledExampleRaw from './examples/FormControlDisabledExample.tsx?raw'
+import { FormControlReadonlyExample } from './examples/FormControlReadonlyExample'
+import FormControlReadonlyExampleRaw from './examples/FormControlReadonlyExample.tsx?raw'
+import { FormControlReadonlyPlainTextExample } from './examples/FormControlReadonlyPlainTextExample'
+import FormControlReadonlyPlainTextExampleRaw from './examples/FormControlReadonlyPlainTextExample.tsx?raw'
+import { FormControlReadonlyPlainTextInlineExample } from './examples/FormControlReadonlyPlainTextInlineExample'
+import FormControlReadonlyPlainTextInlineExampleRaw from './examples/FormControlReadonlyPlainTextInlineExample.tsx?raw'
+import { FormControlFileInputExample } from './examples/FormControlFileInputExample'
+import FormControlFileInputExampleRaw from './examples/FormControlFileInputExample.tsx?raw'
+import { FormControlColorExample } from './examples/FormControlColorExample'
+import FormControlColorExampleRaw from './examples/FormControlColorExample.tsx?raw'
+
 ## Example
 
-```jsx preview
-<CForm>
-  <div className="mb-3">
-    <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
-    <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com"/>
-  </div>
-  <div className="mb-3">
-    <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
-    <CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
-  </div>
-</CForm>
-```
+<Example code={FormControlExampleRaw} name="FormControlExample" componentName="React Form Control">
+  <FormControlExample client:only="react" />
+</Example>
 
 ## Sizing
 
 Set heights using `size` property like `size="lg"` and `size="sm"`.
 
-```jsx preview
-<CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
-<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
-<CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example"/>
-```
+<Example code={FormControlSizingExampleRaw} name="FormControlSizingExample" componentName="React Form Control">
+  <FormControlSizingExample client:only="react" />
+</Example>
 
 ## Disabled
 
 Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
 
-```jsx preview
-<CFormInput type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled/>
-<CFormInput type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readOnly/>
-```
+<Example code={FormControlDisabledExampleRaw} name="FormControlDisabledExample" componentName="React Form Control">
+  <FormControlDisabledExample client:only="react" />
+</Example>
 
 ## Readonly
 
 Add the `readOnly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
 
-```jsx preview
-<CFormInput type="text" placeholder="Readonly input here..." aria-label="readonly input example" readOnly/>
-```
+<Example code={FormControlReadonlyExampleRaw} name="FormControlReadonlyExample" componentName="React Form Control">
+  <FormControlReadonlyExample client:only="react" />
+</Example>
 
 ## Readonly plain text
 
 If you want to have `<input readonly>` elements in your form styled as plain text, use the `plainText` boolean property to remove the default form field styling and preserve the correct margin and padding.
 
-```jsx preview
-<CRow className="mb-3">
-  <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">Email</CFormLabel>
-  <CCol sm={10}>
-    <CFormInput type="text" id="staticEmail" defaultValue="email@example.com" readOnly plainText/>
-  </CCol>
-</CRow>
-<CRow className="mb-3">
-  <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">Password</CFormLabel>
-  <CCol sm={10}>
-    <CFormInput type="password" id="inputPassword"/>
-  </CCol>
-</CRow>
-```
-
-```jsx preview
-<CForm className="row g-3">
-  <CCol xs="auto">
-    <CFormLabel htmlFor="staticEmail2" className="visually-hidden">Email</CFormLabel>
-    <CFormInput type="text" id="staticEmail2" defaultValue="email@example.com" readOnly plainText/>
-  </CCol>
-  <CCol xs="auto">
-    <CFormLabel htmlFor="inputPassword2" className="visually-hidden">Password</CFormLabel>
-    <CFormInput type="password" id="inputPassword2" placeholder="Password"/>
-  </CCol>
-  <CCol xs="auto">
-    <CButton color="primary" type="submit" className="mb-3">Confirm identity</CButton>
-  </CCol>
-</CForm>
-```
+<Example code={FormControlReadonlyPlainTextExampleRaw} name="FormControlReadonlyPlainTextExample" componentName="React Form Control">
+  <FormControlReadonlyPlainTextExample client:only="react" />
+</Example>
+
+<Example code={FormControlReadonlyPlainTextInlineExampleRaw} name="FormControlReadonlyPlainTextInlineExample" componentName="React Form Control">
+  <FormControlReadonlyPlainTextInlineExample client:only="react" />
+</Example>
 
 ## File input
 
-```jsx preview
-<div className="mb-3">
-  <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
-  <CFormInput type="file" id="formFile"/>
-</div>
-<div className="mb-3">
-  <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
-  <CFormInput type="file" id="formFileMultiple" multiple/>
-</div>
-<div className="mb-3">
-  <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
-  <CFormInput type="file" id="formFileDisabled" disabled/>
-</div>
-<div className="mb-3">
-  <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
-  <CFormInput type="file" size="sm" id="formFileSm"/>
-</div>
-<div>
-  <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
-  <CFormInput type="file" size="lg" id="formFileLg"/>
-</div>
-```
+<Example code={FormControlFileInputExampleRaw} name="FormControlFileInputExample" componentName="React Form Control">
+  <FormControlFileInputExample client:only="react" />
+</Example>
 
 ## Color
 
-```jsx preview
-<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
-<CFormInput type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" />
-```
+<Example code={FormControlColorExampleRaw} name="FormControlColorExample" componentName="React Form Control">
+  <FormControlColorExample client:only="react" />
+</Example>
 
 ## API
 
diff --git a/packages/docs/src/content/docs/layout/columns.mdx b/packages/docs/src/content/docs/layout/columns.mdx
index 184a2299..c0ec7634 100644
--- a/packages/docs/src/content/docs/layout/columns.mdx
+++ b/packages/docs/src/content/docs/layout/columns.mdx
@@ -6,6 +6,31 @@ description: "Learn how to modify columns with a handful of options for alignmen
 
 import CColData from '@api/CCol.api.json'
 
+import { ColumnsVerticalAlignmentExample } from './examples/ColumnsVerticalAlignmentExample'
+import ColumnsVerticalAlignmentExampleRaw from './examples/ColumnsVerticalAlignmentExample.tsx?raw'
+import { ColumnsVerticalAlignmentSelfExample } from './examples/ColumnsVerticalAlignmentSelfExample'
+import ColumnsVerticalAlignmentSelfExampleRaw from './examples/ColumnsVerticalAlignmentSelfExample.tsx?raw'
+import { ColumnsHorizontalAlignmentExample } from './examples/ColumnsHorizontalAlignmentExample'
+import ColumnsHorizontalAlignmentExampleRaw from './examples/ColumnsHorizontalAlignmentExample.tsx?raw'
+import { ColumnsWrappingExample } from './examples/ColumnsWrappingExample'
+import ColumnsWrappingExampleRaw from './examples/ColumnsWrappingExample.tsx?raw'
+import { ColumnsBreaksExample } from './examples/ColumnsBreaksExample'
+import ColumnsBreaksExampleRaw from './examples/ColumnsBreaksExample.tsx?raw'
+import { ColumnsBreaksResponsiveExample } from './examples/ColumnsBreaksResponsiveExample'
+import ColumnsBreaksResponsiveExampleRaw from './examples/ColumnsBreaksResponsiveExample.tsx?raw'
+import { ColumnsOrderExample } from './examples/ColumnsOrderExample'
+import ColumnsOrderExampleRaw from './examples/ColumnsOrderExample.tsx?raw'
+import { ColumnsOrderFirstLastExample } from './examples/ColumnsOrderFirstLastExample'
+import ColumnsOrderFirstLastExampleRaw from './examples/ColumnsOrderFirstLastExample.tsx?raw'
+import { ColumnsOffsetExample } from './examples/ColumnsOffsetExample'
+import ColumnsOffsetExampleRaw from './examples/ColumnsOffsetExample.tsx?raw'
+import { ColumnsOffsetResetExample } from './examples/ColumnsOffsetResetExample'
+import ColumnsOffsetResetExampleRaw from './examples/ColumnsOffsetResetExample.tsx?raw'
+import { ColumnsMarginUtilitiesExample } from './examples/ColumnsMarginUtilitiesExample'
+import ColumnsMarginUtilitiesExampleRaw from './examples/ColumnsMarginUtilitiesExample.tsx?raw'
+import { ColumnsStandaloneExample } from './examples/ColumnsStandaloneExample'
+import ColumnsStandaloneExampleRaw from './examples/ColumnsStandaloneExample.tsx?raw'
+
 ## How they work
 
 - **Columns build on the grid's flexbox architecture.** Flexbox means we have options for changing individual columns and [modifying groups of columns at the row level](./../grid#row-columns). You choose how columns grow, shrink, or otherwise change.
@@ -20,135 +45,41 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Vertical alignment
 
-```jsx preview className="docs-example-row docs-example-row-flex-cols"
-<CContainer>
-  <CRow className="align-items-start">
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-  </CRow>
-  <CRow className="align-items-center">
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-  </CRow>
-  <CRow className="align-items-end">
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row docs-example-row-flex-cols"
-<CContainer>
-  <CRow>
-    <CCol className="align-self-start">One of three columns</CCol>
-    <CCol className="align-self-center">One of three columns</CCol>
-    <CCol className="align-self-end">One of three columns</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row docs-example-row-flex-cols" code={ColumnsVerticalAlignmentExampleRaw} name="ColumnsVerticalAlignmentExample" componentName="React Columns">
+  <ColumnsVerticalAlignmentExample client:only="react" />
+</Example>
+
+<Example className="docs-example-row docs-example-row-flex-cols" code={ColumnsVerticalAlignmentSelfExampleRaw} name="ColumnsVerticalAlignmentSelfExample" componentName="React Columns">
+  <ColumnsVerticalAlignmentSelfExample client:only="react" />
+</Example>
 
 ### Horizontal alignment
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow className="justify-content-start">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-center">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-end">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-around">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-between">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-evenly">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={ColumnsHorizontalAlignmentExampleRaw} name="ColumnsHorizontalAlignmentExample" componentName="React Columns">
+  <ColumnsHorizontalAlignmentExample client:only="react" />
+</Example>
 
 ### Column wrapping
 
 If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol xs={9}>.col-9</CCol>
-    <CCol xs={4}>
-      .col-4
-      <br />
-      Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one
-      contiguous unit.
-    </CCol>
-    <CCol xs={6}>
-      .col-6
-      <br />
-      Subsequent columns continue along the new line.
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={ColumnsWrappingExampleRaw} name="ColumnsWrappingExample" componentName="React Columns">
+  <ColumnsWrappingExample client:only="react" />
+</Example>
 
 ### Column breaks
 
 Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `<CRow>`s, but not every implementation method can account for this.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol xs={6} sm={3}>
-      .col-6 .col-sm-3
-    </CCol>
-    <CCol xs={6} sm={3}>
-      .col-6 .col-sm-3
-    </CCol>
-    <div className="w-100"></div>
-    <CCol xs={6} sm={3}>
-      .col-6 .col-sm-3
-    </CCol>
-    <CCol xs={6} sm={3}>
-      .col-6 .col-sm-3
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={ColumnsBreaksExampleRaw} name="ColumnsBreaksExample" componentName="React Columns">
+  <ColumnsBreaksExample client:only="react" />
+</Example>
 
 You may also apply this break at specific breakpoints with our [responsive display utilities](https://coreui.io/bootstrap/docs/utilities/display).
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol xs={6} sm={4}>
-      .col-6 .col-sm-4
-    </CCol>
-    <CCol xs={6} sm={4}>
-      .col-6 .col-sm-4
-    </CCol>
-    <div className="w-100 d-none d-md-block"></div>
-    <CCol xs={6} sm={4}>
-      .col-6 .col-sm-4
-    </CCol>
-    <CCol xs={6} sm={4}>
-      .col-6 .col-sm-4
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={ColumnsBreaksResponsiveExampleRaw} name="ColumnsBreaksResponsiveExample" componentName="React Columns">
+  <ColumnsBreaksResponsiveExample client:only="react" />
+</Example>
 
 ## Reordering
 
@@ -156,27 +87,15 @@ You may also apply this break at specific breakpoints with our [responsive displ
 
 Use `xs|sm|md|lg|xl|xxl={{ order: 1-5 }}` props for controlling the **visual order** of your content. These props are responsive, so you can set the `order` by breakpoint (e.g., `xs={{ order: 1}} md={{ order: 2}}`). Includes support for `1` through `5` across all six grid tiers.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol>First in DOM, no order applied</CCol>
-    <CCol xs={{ span: true, order: 5 }}>Second in DOM, with a larger order</CCol>
-    <CCol xs={{ span: true, order: 1 }}>Third in DOM, with an order of 1</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={ColumnsOrderExampleRaw} name="ColumnsOrderExample" componentName="React Columns">
+  <ColumnsOrderExample client:only="react" />
+</Example>
 
 There are also responsive `xs|sm|md|lg|xl|xxl={{ order: 'first' }}` and `xs|sm|md|lg|xl|xxl={{ order: 'last' }}` props that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These values can also be intermixed with the numbered `xs|sm|md|lg|xl|xxl={{ order: 1-5 }}` values as needed.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol xs={{ span: true, order: 'last' }}>First in DOM, ordered last</CCol>
-    <CCol>Second in DOM, unordered</CCol>
-    <CCol xs={{ span: true, order: 'first' }}>Third in DOM, ordered first</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={ColumnsOrderFirstLastExampleRaw} name="ColumnsOrderFirstLastExample" componentName="React Columns">
+  <ColumnsOrderFirstLastExample client:only="react" />
+</Example>
 
 ### Offsetting columns
 
@@ -186,84 +105,29 @@ You can offset grid columns in two ways: our responsive `xs|sm|md|lg|xl|xxl={{ o
 
 Move columns to the right using `md={{ offset: * }}` props. These props increase the left margin of a column by `*` columns. For example, `md={{ offset: 4 }}` moves `.col-md-4` over four columns.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol md={4}>.col-md-4</CCol>
-    <CCol md={{ span: 4, offset: 4 }}>.col-md-4 .offset-md-4</CCol>
-  </CRow>
-  <CRow>
-    <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
-    <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
-  </CRow>
-  <CRow>
-    <CCol md={{ span: 6, offset: 3 }}>.col-md-6 .offset-md-3</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol sm={5} md={6}>
-      .col-sm-5 .col-md-6
-    </CCol>
-    <CCol sm={{ span: 5, offset: 2 }} md={{ span: 6, offset: 0 }}>
-      .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol sm={6} md={5} lg={6}>
-      .col-sm-6 .col-md-5 .col-lg-6
-    </CCol>
-    <CCol sm={6} md={{ span: 5, offset: 2 }} lg={{ span: 6, offset: 0 }}>
-      .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={ColumnsOffsetExampleRaw} name="ColumnsOffsetExample" componentName="React Columns">
+  <ColumnsOffsetExample client:only="react" />
+</Example>
+
+<Example className="docs-example-row" code={ColumnsOffsetResetExampleRaw} name="ColumnsOffsetResetExample" componentName="React Columns">
+  <ColumnsOffsetResetExample client:only="react" />
+</Example>
 
 #### Margin utilities
 
 You can use margin utilities like `.me-auto` to force sibling columns away from one another.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol md={4}>.col-md-4</CCol>
-    <CCol md={4} className="ms-auto">
-      .col-md-4 .ms-auto
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol md={3} className="ms-md-auto">
-      .col-md-3 .ms-md-auto
-    </CCol>
-    <CCol md={3} className="ms-md-auto">
-      .col-md-3 .ms-md-auto
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol xs="auto" className="me-auto">
-      .col-auto .me-auto
-    </CCol>
-    <CCol xs="auto">.col-auto</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={ColumnsMarginUtilitiesExampleRaw} name="ColumnsMarginUtilitiesExample" componentName="React Columns">
+  <ColumnsMarginUtilitiesExample client:only="react" />
+</Example>
 
 ## Standalone column component
 
 The `<CCol>` component can also be used outside a `<CRow>` to give an element a specific width. Whenever column component are used as non direct children of a row, the paddings are omitted.
 
-```jsx preview
-<CCol xs={3} className="bg-light p-3 border">
-  .col-3: width of 25%
-</CCol>
-<CCol sm={9} className="bg-light p-3 border">
-  .col-sm-9: width of 75% above sm breakpoint
-</CCol>
-```
+<Example code={ColumnsStandaloneExampleRaw} name="ColumnsStandaloneExample" componentName="React Columns">
+  <ColumnsStandaloneExample client:only="react" />
+</Example>
 
 ## API
 
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsBreaksExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsBreaksExample.tsx
new file mode 100644
index 00000000..17c66692
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsBreaksExample.tsx
@@ -0,0 +1,21 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsBreaksExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol xs={6} sm={3}>
+        .col-6 .col-sm-3
+      </CCol>
+      <CCol xs={6} sm={3}>
+        .col-6 .col-sm-3
+      </CCol>
+      <div className="w-100"></div>
+      <CCol xs={6} sm={3}>
+        .col-6 .col-sm-3
+      </CCol>
+      <CCol xs={6} sm={3}>
+        .col-6 .col-sm-3
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsBreaksResponsiveExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsBreaksResponsiveExample.tsx
new file mode 100644
index 00000000..51845306
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsBreaksResponsiveExample.tsx
@@ -0,0 +1,21 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsBreaksResponsiveExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol xs={6} sm={4}>
+        .col-6 .col-sm-4
+      </CCol>
+      <CCol xs={6} sm={4}>
+        .col-6 .col-sm-4
+      </CCol>
+      <div className="w-100 d-none d-md-block"></div>
+      <CCol xs={6} sm={4}>
+        .col-6 .col-sm-4
+      </CCol>
+      <CCol xs={6} sm={4}>
+        .col-6 .col-sm-4
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsHorizontalAlignmentExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsHorizontalAlignmentExample.tsx
new file mode 100644
index 00000000..c54bf32b
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsHorizontalAlignmentExample.tsx
@@ -0,0 +1,30 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsHorizontalAlignmentExample = () => (
+  <CContainer>
+    <CRow className="justify-content-start">
+      <CCol xs={4}>One of two columns</CCol>
+      <CCol xs={4}>One of two columns</CCol>
+    </CRow>
+    <CRow className="justify-content-center">
+      <CCol xs={4}>One of two columns</CCol>
+      <CCol xs={4}>One of two columns</CCol>
+    </CRow>
+    <CRow className="justify-content-end">
+      <CCol xs={4}>One of two columns</CCol>
+      <CCol xs={4}>One of two columns</CCol>
+    </CRow>
+    <CRow className="justify-content-around">
+      <CCol xs={4}>One of two columns</CCol>
+      <CCol xs={4}>One of two columns</CCol>
+    </CRow>
+    <CRow className="justify-content-between">
+      <CCol xs={4}>One of two columns</CCol>
+      <CCol xs={4}>One of two columns</CCol>
+    </CRow>
+    <CRow className="justify-content-evenly">
+      <CCol xs={4}>One of two columns</CCol>
+      <CCol xs={4}>One of two columns</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsMarginUtilitiesExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsMarginUtilitiesExample.tsx
new file mode 100644
index 00000000..af7d09b5
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsMarginUtilitiesExample.tsx
@@ -0,0 +1,26 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsMarginUtilitiesExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol md={4}>.col-md-4</CCol>
+      <CCol md={4} className="ms-auto">
+        .col-md-4 .ms-auto
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol md={3} className="ms-md-auto">
+        .col-md-3 .ms-md-auto
+      </CCol>
+      <CCol md={3} className="ms-md-auto">
+        .col-md-3 .ms-md-auto
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol xs="auto" className="me-auto">
+        .col-auto .me-auto
+      </CCol>
+      <CCol xs="auto">.col-auto</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsOffsetExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsOffsetExample.tsx
new file mode 100644
index 00000000..0886d393
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsOffsetExample.tsx
@@ -0,0 +1,17 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsOffsetExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol md={4}>.col-md-4</CCol>
+      <CCol md={{ span: 4, offset: 4 }}>.col-md-4 .offset-md-4</CCol>
+    </CRow>
+    <CRow>
+      <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
+      <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
+    </CRow>
+    <CRow>
+      <CCol md={{ span: 6, offset: 3 }}>.col-md-6 .offset-md-3</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsOffsetResetExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsOffsetResetExample.tsx
new file mode 100644
index 00000000..774f29ff
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsOffsetResetExample.tsx
@@ -0,0 +1,22 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsOffsetResetExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol sm={5} md={6}>
+        .col-sm-5 .col-md-6
+      </CCol>
+      <CCol sm={{ span: 5, offset: 2 }} md={{ span: 6, offset: 0 }}>
+        .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm={6} md={5} lg={6}>
+        .col-sm-6 .col-md-5 .col-lg-6
+      </CCol>
+      <CCol sm={6} md={{ span: 5, offset: 2 }} lg={{ span: 6, offset: 0 }}>
+        .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsOrderExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsOrderExample.tsx
new file mode 100644
index 00000000..0188bf0d
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsOrderExample.tsx
@@ -0,0 +1,11 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsOrderExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol>First in DOM, no order applied</CCol>
+      <CCol xs={{ span: true, order: 5 }}>Second in DOM, with a larger order</CCol>
+      <CCol xs={{ span: true, order: 1 }}>Third in DOM, with an order of 1</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsOrderFirstLastExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsOrderFirstLastExample.tsx
new file mode 100644
index 00000000..000b7345
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsOrderFirstLastExample.tsx
@@ -0,0 +1,11 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsOrderFirstLastExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol xs={{ span: true, order: 'last' }}>First in DOM, ordered last</CCol>
+      <CCol>Second in DOM, unordered</CCol>
+      <CCol xs={{ span: true, order: 'first' }}>Third in DOM, ordered first</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsStandaloneExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsStandaloneExample.tsx
new file mode 100644
index 00000000..726b08ab
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsStandaloneExample.tsx
@@ -0,0 +1,12 @@
+import { CCol } from '@coreui/react'
+
+export const ColumnsStandaloneExample = () => (
+  <>
+    <CCol xs={3} className="bg-light p-3 border">
+      .col-3: width of 25%
+    </CCol>
+    <CCol sm={9} className="bg-light p-3 border">
+      .col-sm-9: width of 75% above sm breakpoint
+    </CCol>
+  </>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentExample.tsx
new file mode 100644
index 00000000..fc823cfa
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentExample.tsx
@@ -0,0 +1,21 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsVerticalAlignmentExample = () => (
+  <CContainer>
+    <CRow className="align-items-start">
+      <CCol>One of three columns</CCol>
+      <CCol>One of three columns</CCol>
+      <CCol>One of three columns</CCol>
+    </CRow>
+    <CRow className="align-items-center">
+      <CCol>One of three columns</CCol>
+      <CCol>One of three columns</CCol>
+      <CCol>One of three columns</CCol>
+    </CRow>
+    <CRow className="align-items-end">
+      <CCol>One of three columns</CCol>
+      <CCol>One of three columns</CCol>
+      <CCol>One of three columns</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentSelfExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentSelfExample.tsx
new file mode 100644
index 00000000..5379b675
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentSelfExample.tsx
@@ -0,0 +1,11 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsVerticalAlignmentSelfExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol className="align-self-start">One of three columns</CCol>
+      <CCol className="align-self-center">One of three columns</CCol>
+      <CCol className="align-self-end">One of three columns</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsWrappingExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsWrappingExample.tsx
new file mode 100644
index 00000000..8e7d8caf
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsWrappingExample.tsx
@@ -0,0 +1,20 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsWrappingExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol xs={9}>.col-9</CCol>
+      <CCol xs={4}>
+        .col-4
+        <br />
+        Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one
+        contiguous unit.
+      </CCol>
+      <CCol xs={6}>
+        .col-6
+        <br />
+        Subsequent columns continue along the new line.
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridAllBreakpointsExample.tsx b/packages/docs/src/content/docs/layout/examples/GridAllBreakpointsExample.tsx
new file mode 100644
index 00000000..a5aee853
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridAllBreakpointsExample.tsx
@@ -0,0 +1,16 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridAllBreakpointsExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol>col</CCol>
+      <CCol>col</CCol>
+      <CCol>col</CCol>
+      <CCol>col</CCol>
+    </CRow>
+    <CRow>
+      <CCol xs={8}>col-8</CCol>
+      <CCol xs={4}>col-4</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridEqualWidthExample.tsx b/packages/docs/src/content/docs/layout/examples/GridEqualWidthExample.tsx
new file mode 100644
index 00000000..8e039049
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridEqualWidthExample.tsx
@@ -0,0 +1,15 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridEqualWidthExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol>1 of 2</CCol>
+      <CCol>2 of 2</CCol>
+    </CRow>
+    <CRow>
+      <CCol>1 of 3</CCol>
+      <CCol>2 of 3</CCol>
+      <CCol>3 of 3</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridExample.tsx b/packages/docs/src/content/docs/layout/examples/GridExample.tsx
new file mode 100644
index 00000000..5f3e3b47
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridExample.tsx
@@ -0,0 +1,11 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol sm="auto">One of three columns</CCol>
+      <CCol sm="auto">One of three columns</CCol>
+      <CCol sm="auto">One of three columns</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridMixAndMatchExample.tsx b/packages/docs/src/content/docs/layout/examples/GridMixAndMatchExample.tsx
new file mode 100644
index 00000000..b9938177
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridMixAndMatchExample.tsx
@@ -0,0 +1,27 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridMixAndMatchExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol md={8}>.col-md-8</CCol>
+      <CCol xs={6} md={4}>
+        .col-6 .col-md-4
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol xs={6} md={4}>
+        .col-6 .col-md-4
+      </CCol>
+      <CCol xs={6} md={4}>
+        .col-6 .col-md-4
+      </CCol>
+      <CCol xs={6} md={4}>
+        .col-6 .col-md-4
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol xs={6}>.col-6</CCol>
+      <CCol xs={6}>.col-6</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumns2Example.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumns2Example.tsx
new file mode 100644
index 00000000..cbc33675
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumns2Example.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumns2Example = () => (
+  <CContainer>
+    <CRow xs={{ cols: 2 }}>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumns3Example.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumns3Example.tsx
new file mode 100644
index 00000000..050ff46a
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumns3Example.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumns3Example = () => (
+  <CContainer>
+    <CRow xs={{ cols: 3 }}>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumns4ColExample.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumns4ColExample.tsx
new file mode 100644
index 00000000..391d5cfa
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumns4ColExample.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumns4ColExample = () => (
+  <CContainer>
+    <CRow xs={{ cols: 4 }}>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol xs={6}>Column</CCol>
+      <CCol>Column</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumns4Example.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumns4Example.tsx
new file mode 100644
index 00000000..2dad81f7
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumns4Example.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumns4Example = () => (
+  <CContainer>
+    <CRow xs={{ cols: 4 }}>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumnsAutoExample.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumnsAutoExample.tsx
new file mode 100644
index 00000000..9561646a
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumnsAutoExample.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumnsAutoExample = () => (
+  <CContainer>
+    <CRow xs={{ cols: 'auto' }}>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumnsResponsiveExample.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumnsResponsiveExample.tsx
new file mode 100644
index 00000000..ec845d0c
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumnsResponsiveExample.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumnsResponsiveExample = () => (
+  <CContainer>
+    <CRow xs={{ cols: 1 }} sm={{ cols: 2 }} md={{ cols: 4 }}>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+      <CCol>Column</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridSettingOneColumnWidthExample.tsx b/packages/docs/src/content/docs/layout/examples/GridSettingOneColumnWidthExample.tsx
new file mode 100644
index 00000000..112bf80d
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridSettingOneColumnWidthExample.tsx
@@ -0,0 +1,16 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridSettingOneColumnWidthExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol>1 of 3</CCol>
+      <CCol xs={6}>2 of 3 (wider)</CCol>
+      <CCol>3 of 3</CCol>
+    </CRow>
+    <CRow>
+      <CCol>1 of 3</CCol>
+      <CCol xs={6}>2 of 3 (wider)</CCol>
+      <CCol>3 of 3</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridStackedToHorizontalExample.tsx b/packages/docs/src/content/docs/layout/examples/GridStackedToHorizontalExample.tsx
new file mode 100644
index 00000000..72be3116
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridStackedToHorizontalExample.tsx
@@ -0,0 +1,15 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridStackedToHorizontalExample = () => (
+  <CContainer>
+    <CRow>
+      <CCol sm={8}>col-sm-8</CCol>
+      <CCol sm={4}>col-sm-4</CCol>
+    </CRow>
+    <CRow>
+      <CCol sm>col-sm</CCol>
+      <CCol sm>col-sm</CCol>
+      <CCol sm>col-sm</CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridVariableWidthContentExample.tsx b/packages/docs/src/content/docs/layout/examples/GridVariableWidthContentExample.tsx
new file mode 100644
index 00000000..94739311
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridVariableWidthContentExample.tsx
@@ -0,0 +1,22 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridVariableWidthContentExample = () => (
+  <CContainer>
+    <div className="row justify-content-md-center">
+      <CCol xs lg={2}>
+        1 of 3
+      </CCol>
+      <CCol md="auto">Variable width content</CCol>
+      <CCol xs lg={2}>
+        3 of 3
+      </CCol>
+    </div>
+    <CRow>
+      <CCol>1 of 3</CCol>
+      <CCol md="auto">Variable width content</CCol>
+      <CCol xs lg={2}>
+        3 of 3
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersHorizontalExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalExample.tsx
new file mode 100644
index 00000000..313cb062
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalExample.tsx
@@ -0,0 +1,14 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersHorizontalExample = () => (
+  <CContainer className="px-4">
+    <CRow xs={{ gutterX: 5 }}>
+      <CCol>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersHorizontalOverflowHiddenExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalOverflowHiddenExample.tsx
new file mode 100644
index 00000000..8d5236e7
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalOverflowHiddenExample.tsx
@@ -0,0 +1,14 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersHorizontalOverflowHiddenExample = () => (
+  <CContainer className="overflow-hidden">
+    <CRow xs={{ gutterX: 5 }}>
+      <CCol>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersHorizontalVerticalExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalVerticalExample.tsx
new file mode 100644
index 00000000..dad9a6b8
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalVerticalExample.tsx
@@ -0,0 +1,20 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersHorizontalVerticalExample = () => (
+  <CContainer>
+    <CRow xs={{ gutter: 2 }}>
+      <CCol xs={{ span: 6 }}>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+      <CCol xs={{ span: 6 }}>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+      <CCol xs={{ span: 6 }}>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+      <CCol xs={{ span: 6 }}>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersNoGuttersExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersNoGuttersExample.tsx
new file mode 100644
index 00000000..180c69ac
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersNoGuttersExample.tsx
@@ -0,0 +1,12 @@
+import { CCol, CRow } from '@coreui/react'
+
+export const GuttersNoGuttersExample = () => (
+  <CRow xs={{ gutter: 0 }}>
+    <CCol sm={6} md={8}>
+      .col-sm-6 .col-md-8
+    </CCol>
+    <CCol xs={6} md={4}>
+      .col-6 .col-md-4
+    </CCol>
+  </CRow>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersRowColumnsExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersRowColumnsExample.tsx
new file mode 100644
index 00000000..9e67af41
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersRowColumnsExample.tsx
@@ -0,0 +1,38 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersRowColumnsExample = () => (
+  <CContainer>
+    <CRow xs={{ cols: 2, gutter: 2 }} lg={{ cols: 5, gutter: 3 }}>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+      <CCol>
+        <div className="p-3">Row column</div>
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersVerticalExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersVerticalExample.tsx
new file mode 100644
index 00000000..fd405578
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersVerticalExample.tsx
@@ -0,0 +1,20 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersVerticalExample = () => (
+  <CContainer className="overflow-hidden">
+    <CRow xs={{ gutterY: 5 }}>
+      <CCol xs={{ span: 6 }}>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+      <CCol xs={{ span: 6 }}>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+      <CCol xs={{ span: 6 }}>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+      <CCol xs={{ span: 6 }}>
+        <div className="p-3">Custom column padding</div>
+      </CCol>
+    </CRow>
+  </CContainer>
+)
diff --git a/packages/docs/src/content/docs/layout/grid.mdx b/packages/docs/src/content/docs/layout/grid.mdx
index 7d28bd8d..8ac085fb 100644
--- a/packages/docs/src/content/docs/layout/grid.mdx
+++ b/packages/docs/src/content/docs/layout/grid.mdx
@@ -8,19 +8,40 @@ import CContainerData from '@api/CContainer.api.json'
 import CRowData from '@api/CRow.api.json'
 import CColData from '@api/CCol.api.json'
 
+import { GridExample } from './examples/GridExample'
+import GridExampleRaw from './examples/GridExample.tsx?raw'
+import { GridEqualWidthExample } from './examples/GridEqualWidthExample'
+import GridEqualWidthExampleRaw from './examples/GridEqualWidthExample.tsx?raw'
+import { GridSettingOneColumnWidthExample } from './examples/GridSettingOneColumnWidthExample'
+import GridSettingOneColumnWidthExampleRaw from './examples/GridSettingOneColumnWidthExample.tsx?raw'
+import { GridVariableWidthContentExample } from './examples/GridVariableWidthContentExample'
+import GridVariableWidthContentExampleRaw from './examples/GridVariableWidthContentExample.tsx?raw'
+import { GridAllBreakpointsExample } from './examples/GridAllBreakpointsExample'
+import GridAllBreakpointsExampleRaw from './examples/GridAllBreakpointsExample.tsx?raw'
+import { GridStackedToHorizontalExample } from './examples/GridStackedToHorizontalExample'
+import GridStackedToHorizontalExampleRaw from './examples/GridStackedToHorizontalExample.tsx?raw'
+import { GridMixAndMatchExample } from './examples/GridMixAndMatchExample'
+import GridMixAndMatchExampleRaw from './examples/GridMixAndMatchExample.tsx?raw'
+import { GridRowColumns2Example } from './examples/GridRowColumns2Example'
+import GridRowColumns2ExampleRaw from './examples/GridRowColumns2Example.tsx?raw'
+import { GridRowColumns3Example } from './examples/GridRowColumns3Example'
+import GridRowColumns3ExampleRaw from './examples/GridRowColumns3Example.tsx?raw'
+import { GridRowColumnsAutoExample } from './examples/GridRowColumnsAutoExample'
+import GridRowColumnsAutoExampleRaw from './examples/GridRowColumnsAutoExample.tsx?raw'
+import { GridRowColumns4Example } from './examples/GridRowColumns4Example'
+import GridRowColumns4ExampleRaw from './examples/GridRowColumns4Example.tsx?raw'
+import { GridRowColumns4ColExample } from './examples/GridRowColumns4ColExample'
+import GridRowColumns4ColExampleRaw from './examples/GridRowColumns4ColExample.tsx?raw'
+import { GridRowColumnsResponsiveExample } from './examples/GridRowColumnsResponsiveExample'
+import GridRowColumnsResponsiveExampleRaw from './examples/GridRowColumnsResponsiveExample.tsx?raw'
+
 ## Example
 
 CoreUI's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol sm="auto">One of three columns</CCol>
-    <CCol sm="auto">One of three columns</CCol>
-    <CCol sm="auto">One of three columns</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={GridExampleRaw} name="GridExample" componentName="React Grid">
+  <GridExample client:only="react" />
+</Example>
 
 The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent `<CContainer>`.
 
@@ -136,63 +157,25 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
 For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
 
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol>1 of 2</CCol>
-    <CCol>2 of 2</CCol>
-  </CRow>
-  <CRow>
-    <CCol>1 of 3</CCol>
-    <CCol>2 of 3</CCol>
-    <CCol>3 of 3</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={GridEqualWidthExampleRaw} name="GridEqualWidthExample" componentName="React Grid">
+  <GridEqualWidthExample client:only="react" />
+</Example>
 
 ### Setting one column width
 
 Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol>1 of 3</CCol>
-    <CCol xs={6}>2 of 3 (wider)</CCol>
-    <CCol>3 of 3</CCol>
-  </CRow>
-  <CRow>
-    <CCol>1 of 3</CCol>
-    <CCol xs={6}>2 of 3 (wider)</CCol>
-    <CCol>3 of 3</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={GridSettingOneColumnWidthExampleRaw} name="GridSettingOneColumnWidthExample" componentName="React Grid">
+  <GridSettingOneColumnWidthExample client:only="react" />
+</Example>
 
 ### Variable width content
 
 Use `<CCol {breakpoint}="auto"` props to size columns based on the natural width of their content.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <div className="row justify-content-md-center">
-    <CCol xs lg={2}>
-      1 of 3
-    </CCol>
-    <CCol md="auto">Variable width content</CCol>
-    <CCol xs lg={2}>
-      3 of 3
-    </CCol>
-  </div>
-  <CRow>
-    <CCol>1 of 3</CCol>
-    <CCol md="auto">Variable width content</CCol>
-    <CCol xs lg={2}>
-      3 of 3
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={GridVariableWidthContentExampleRaw} name="GridVariableWidthContentExample" componentName="React Grid">
+  <GridVariableWidthContentExample client:only="react" />
+</Example>
 
 ## Responsive classes
 
@@ -202,68 +185,25 @@ CoreUI's grid includes six tiers of predefined classes for building complex resp
 
 For grids that are the same from the smallest of devices to the largest, use the `<CCol>` and `<CCol xs={*}>` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `<CCol>`.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol>col</CCol>
-    <CCol>col</CCol>
-    <CCol>col</CCol>
-    <CCol>col</CCol>
-  </CRow>
-  <CRow>
-    <CCol xs={8}>col-8</CCol>
-    <CCol xs={4}>col-4</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={GridAllBreakpointsExampleRaw} name="GridAllBreakpointsExample" componentName="React Grid">
+  <GridAllBreakpointsExample client:only="react" />
+</Example>
 
 ### Stacked to horizontal
 
 Using a single set of `<CCol sm={*}>` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol sm={8}>col-sm-8</CCol>
-    <CCol sm={4}>col-sm-4</CCol>
-  </CRow>
-  <CRow>
-    <CCol sm>col-sm</CCol>
-    <CCol sm>col-sm</CCol>
-    <CCol sm>col-sm</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={GridStackedToHorizontalExampleRaw} name="GridStackedToHorizontalExample" componentName="React Grid">
+  <GridStackedToHorizontalExample client:only="react" />
+</Example>
 
 ### Mix and match
 
 Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol md={8}>.col-md-8</CCol>
-    <CCol xs={6} md={4}>
-      .col-6 .col-md-4
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol xs={6} md={4}>
-      .col-6 .col-md-4
-    </CCol>
-    <CCol xs={6} md={4}>
-      .col-6 .col-md-4
-    </CCol>
-    <CCol xs={6} md={4}>
-      .col-6 .col-md-4
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol xs={6}>.col-6</CCol>
-    <CCol xs={6}>.col-6</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={GridMixAndMatchExampleRaw} name="GridMixAndMatchExample" componentName="React Grid">
+  <GridMixAndMatchExample client:only="react" />
+</Example>
 
 ### Row columns
 
@@ -271,71 +211,29 @@ Use the responsive `{breakpoint}={{ cols: * }}` classes to quickly set the numbe
 
 Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
 
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 2 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 3 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 'auto' }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 4 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 4 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol xs={6}>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 1 }} sm={{ cols: 2 }} md={{ cols: 4 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-row" code={GridRowColumns2ExampleRaw} name="GridRowColumns2Example" componentName="React Grid">
+  <GridRowColumns2Example client:only="react" />
+</Example>
+
+<Example className="docs-example-row" code={GridRowColumns3ExampleRaw} name="GridRowColumns3Example" componentName="React Grid">
+  <GridRowColumns3Example client:only="react" />
+</Example>
+
+<Example className="docs-example-row" code={GridRowColumnsAutoExampleRaw} name="GridRowColumnsAutoExample" componentName="React Grid">
+  <GridRowColumnsAutoExample client:only="react" />
+</Example>
+
+<Example className="docs-example-row" code={GridRowColumns4ExampleRaw} name="GridRowColumns4Example" componentName="React Grid">
+  <GridRowColumns4Example client:only="react" />
+</Example>
+
+<Example className="docs-example-row" code={GridRowColumns4ColExampleRaw} name="GridRowColumns4ColExample" componentName="React Grid">
+  <GridRowColumns4ColExample client:only="react" />
+</Example>
+
+<Example className="docs-example-row" code={GridRowColumnsResponsiveExampleRaw} name="GridRowColumnsResponsiveExample" componentName="React Grid">
+  <GridRowColumnsResponsiveExample client:only="react" />
+</Example>
 
 ## API
 
diff --git a/packages/docs/src/content/docs/layout/gutters.mdx b/packages/docs/src/content/docs/layout/gutters.mdx
index 33e62924..9888955e 100644
--- a/packages/docs/src/content/docs/layout/gutters.mdx
+++ b/packages/docs/src/content/docs/layout/gutters.mdx
@@ -8,6 +8,19 @@ import CContainerData from '@api/CContainer.api.json'
 import CRowData from '@api/CRow.api.json'
 import CColData from '@api/CCol.api.json'
 
+import { GuttersHorizontalExample } from './examples/GuttersHorizontalExample'
+import GuttersHorizontalExampleRaw from './examples/GuttersHorizontalExample.tsx?raw'
+import { GuttersHorizontalOverflowHiddenExample } from './examples/GuttersHorizontalOverflowHiddenExample'
+import GuttersHorizontalOverflowHiddenExampleRaw from './examples/GuttersHorizontalOverflowHiddenExample.tsx?raw'
+import { GuttersVerticalExample } from './examples/GuttersVerticalExample'
+import GuttersVerticalExampleRaw from './examples/GuttersVerticalExample.tsx?raw'
+import { GuttersHorizontalVerticalExample } from './examples/GuttersHorizontalVerticalExample'
+import GuttersHorizontalVerticalExampleRaw from './examples/GuttersHorizontalVerticalExample.tsx?raw'
+import { GuttersRowColumnsExample } from './examples/GuttersRowColumnsExample'
+import GuttersRowColumnsExampleRaw from './examples/GuttersRowColumnsExample.tsx?raw'
+import { GuttersNoGuttersExample } from './examples/GuttersNoGuttersExample'
+import GuttersNoGuttersExampleRaw from './examples/GuttersNoGuttersExample.tsx?raw'
+
 ## How they work
 
 - **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content.
@@ -20,120 +33,39 @@ import CColData from '@api/CCol.api.json'
 
 `{breakpoint}={{ gutterX: * }}` props can be used to control the horizontal gutter widths. The `<CContainer>` or `<CContainer fluid>` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
 
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer className="px-4">
-  <CRow xs={{ gutterX: 5 }}>
-    <CCol>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-cols" code={GuttersHorizontalExampleRaw} name="GuttersHorizontalExample" componentName="React Gutters">
+  <GuttersHorizontalExample client:only="react" />
+</Example>
 
 An alternative solution is to add a wrapper around the `<CRow>` with the `.overflow-hidden` class:
 
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer className="overflow-hidden">
-  <CRow xs={{ gutterX: 5 }}>
-    <CCol>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-cols" code={GuttersHorizontalOverflowHiddenExampleRaw} name="GuttersHorizontalOverflowHiddenExample" componentName="React Gutters">
+  <GuttersHorizontalOverflowHiddenExample client:only="react" />
+</Example>
 
 ## Vertical gutters
 
 `{breakpoint}={{ gutterY: * }}` props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `<CRow>` at the end of a page. If this occurs, you add a wrapper around `<CRow>` with the `.overflow-hidden` class:
 
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer className="overflow-hidden">
-  <CRow xs={{ gutterY: 5 }}>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-cols" code={GuttersVerticalExampleRaw} name="GuttersVerticalExample" componentName="React Gutters">
+  <GuttersVerticalExample client:only="react" />
+</Example>
 
 ## Horizontal & vertical gutters
 
 `{breakpoint}={{ gutter: * }}` props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
 
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer>
-  <CRow xs={{ gutter: 2 }}>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-cols" code={GuttersHorizontalVerticalExampleRaw} name="GuttersHorizontalVerticalExample" componentName="React Gutters">
+  <GuttersHorizontalVerticalExample client:only="react" />
+</Example>
 
 ## Row columns gutters
 
 Gutter props can also be added to [row columns](../grid#row-columns). In the following example, we use responsive row columns and responsive gutter props.
 
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer>
-  <CRow xs={{ cols:2, gutter: 2 }} lg={{ cols: 5, gutter: 3}}>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
+<Example className="docs-example-cols" code={GuttersRowColumnsExampleRaw} name="GuttersRowColumnsExample" componentName="React Gutters">
+  <GuttersRowColumnsExample client:only="react" />
+</Example>
 
 ## No gutters
 
@@ -143,12 +75,9 @@ The gutters between columns in our predefined grid props can be removed with `{b
 
 In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more).
 
-```jsx preview className="docs-example m-0 border-0 docs-example-row"
-<CRow xs={{ gutter: 0 }}>
-  <CCol sm={6} md={8}>.col-sm-6 .col-md-8</CCol>
-  <CCol xs={6} md={4}>.col-6 .col-md-4</CCol>
-</CRow>
-```
+<Example className="docs-example-row" code={GuttersNoGuttersExampleRaw} name="GuttersNoGuttersExample" componentName="React Gutters">
+  <GuttersNoGuttersExample client:only="react" />
+</Example>
 
 ## Change the gutters