diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/Examples.tsx
index 5a3f8236fb0..8e5ec395bed 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/Examples.tsx
@@ -3,8 +3,10 @@
  *
  */
 
-import React from 'react'
+import React, { Suspense } from 'react'
+import { createBrowserHistory } from 'history'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
+import Context from '@dnb/eufemia/src/shared/Context'
 import {
   Input,
   H2,
@@ -13,10 +15,15 @@ import {
   Skeleton,
   ToggleButton,
   FormRow,
+  Div,
 } from '@dnb/eufemia/src'
 import { AllComponents } from '../form-row/Examples'
 import Provider from '@dnb/eufemia/src/shared/Provider'
 import { Article } from '@dnb/eufemia/src/components/skeleton/figures'
+import {
+  createSkeletonClass,
+  skeletonDOMAttributes,
+} from '@dnb/eufemia/src/components/skeleton/SkeletonHelper'
 
 export const SkeletonInputExample = () => (
   <ComponentBox>
@@ -124,3 +131,86 @@ export const SkeletonVisualTests = () => {
     </>
   )
 }
+
+export const SkeletonInfoProvider = () => (
+  <ComponentBox hidePreview>
+    <Div id="your-app">
+      <Skeleton show={true}>
+        <Input>I'm hidden behind the skeleton</Input>
+        <Input>I'm hidden behind the skeleton</Input>
+      </Skeleton>
+    </Div>
+  </ComponentBox>
+)
+
+export const SkeletonInfoGlobalProvider = () => (
+  <ComponentBox scope={{ Provider }} hidePreview>
+    <Provider locale="nb-NO">
+      <Div id="your-app">
+        <Provider skeleton={true}>
+          <Input>I'm hidden behind the skeleton</Input>
+          <Input>I'm hidden behind the skeleton</Input>
+        </Provider>
+      </Div>
+    </Provider>
+  </ComponentBox>
+)
+
+export const SkeletonInfoExclude = () => (
+  <ComponentBox hidePreview>
+    <Skeleton show={true}>
+      <Input>I'm hidden behind the skeleton</Input>
+
+      <Skeleton.Exclude>
+        <Input>I'm NOT hidden</Input>
+      </Skeleton.Exclude>
+    </Skeleton>
+  </ComponentBox>
+)
+
+export const SkeletonInfoSuspense = () => (
+  <ComponentBox scope={{ Suspense }} hidePreview hideToolbar>
+    <Suspense
+      fallback={
+        <Skeleton show={true}>
+          <Div id="user-data" />
+        </Skeleton>
+      }
+    >
+      <Div id="user-data" />
+    </Suspense>
+  </ComponentBox>
+)
+
+export const SkeletonInfoCustom = () => (
+  <ComponentBox
+    hidePreview
+    hideToolbar
+    scope={{
+      createBrowserHistory,
+      skeletonDOMAttributes,
+      createSkeletonClass,
+      Context,
+    }}
+  >
+    {() => {
+      function Component({ skeleton = false, ...params } = {}) {
+        const context = React.useContext(Context)
+
+        // Handle accessibility features
+        skeletonDOMAttributes(params, skeleton, context)
+
+        // Handle CSS classes – use either "shape" or "font"
+        const className = createSkeletonClass('font', skeleton, context)
+
+        return (
+          <div {...params} id="my-component" className={className}>
+            Hello World
+          </div>
+        )
+      }
+
+      return <Component />
+    }}
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx
index 579c90ceb7a..088d4a52ba1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx
@@ -2,6 +2,14 @@
 showTabs: true
 ---
 
+import {
+  SkeletonInfoProvider,
+  SkeletonInfoGlobalProvider,
+  SkeletonInfoExclude,
+  SkeletonInfoSuspense,
+  SkeletonInfoCustom,
+} from 'Docs/uilib/components/skeleton/Examples'
+
 ## Description
 
 The Skeleton component is a visual building block helper. It will provide loading placeholders that display a non-interactive preview of the app’s actual UI to visually communicate that content is being processed.
@@ -55,95 +63,28 @@ If you use the skeleton as a provider, the [Space](/uilib/components/space) comp
 
 But the Skeleton component also supports a set of ready-to-use figures. Use it like `figure="article"`.
 
-```jsx
-<App>
-  ...
-  <Skeleton show={true}>
-    ...
-    <Input>I'm hidden behind the skeleton</Input>
-    <Input>I'm hidden behind the skeleton</Input>
-    ...
-  </Skeleton>
-  ...
-</App>
-```
+<SkeletonInfoProvider />
 
 ### Global Provider
 
 You can also use the global [Eufemia Provider](/uilib/usage/customisation/provider) to enable the underlying skeletons. You can even have multiple providers wrapped.
 
-```jsx
-<Provider locale="nb-NO">
-  <App>
-    ...
-    <Provider skeleton={true}>
-      ...
-      <Input>I'm hidden behind the skeleton</Input>
-      <Input>I'm hidden behind the skeleton</Input>
-      ...
-    </Provider>
-    ...
-  </App>
-</Provider>
-```
+<SkeletonInfoGlobalProvider />
 
 ### Exclude a part
 
 You can easily exclude a part from being transformed to a skeleton by using `Skeleton.Exclude`.
 
-```jsx
-<Skeleton show={true}>
-  <Input>I'm hidden behind the skeleton</Input>
-
-  <Skeleton.Exclude>
-    <Input>I'm NOT hidden</Input>
-  </Skeleton.Exclude>
-</Skeleton>
-```
+<SkeletonInfoExclude />
 
 ### Suspense
 
 You can take advantage of an async component by using the React Suspense with a skeleton fallback.
 
-```jsx
-...
-<Suspense
-  fallback={
-    <Skeleton show={true}>
-      <UserData />
-    </Skeleton>
-  }
->
-  <UserData />
-</Suspense>
-...
-```
+<SkeletonInfoSuspense />
 
 ### Create a custom skeleton
 
 In order to create the same skeletons as the build-ins, you can make use of a couple of helper tools.
 
-```jsx
-import EufemiaContext from '@dnb/eufemia/shared/Context'
-import {
-  skeletonDOMAttributes,
-  createSkeletonClass,
-} from '@dnb/eufemia/components/skeleton/SkeletonHelper'
-
-function Component({ className, skeleton = false, ...params } = {}) {
-  const context = React.useContext(EufemiaContext)
-
-  // Handle accessibility features
-  skeletonDOMAttributes(params, skeleton, context)
-
-  // Handle CSS classes – use either "shape" or "font"
-  params.className = createSkeletonClass(
-    'shape',
-    skeleton,
-    context,
-    className
-  )
-
-  return <my-component {...params} />
-}
-```
+<SkeletonInfoCustom />