diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/info.mdx
index ba0cc644c0a..062b7b63db6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Accordion } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Accordion component is a combination of an accessible button (header area) and a content container.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/info.mdx
index 06b36b0f6de..fbd023de8b6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Anchor } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Anchor, also knows as `Link` is used to navigate from one page to the next HTML page.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx
index 0e5a8677c9c..216be9831a4 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { AriaLive } from '@dnb/eufemia'
+```
+
 ## Description
 
 AriaLive is a React component and hook that helps make your web app more accessible by adding or defining an ARIA live region that announces dynamic changes to screen readers.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/info.mdx
index 8684bdb25fa..e6612240850 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/info.mdx
@@ -9,6 +9,12 @@ import {
   AutocompleteContentDecoupledExample,
 } from 'Docs/uilib/components/autocomplete/Examples'
 
+## Import
+
+```tsx
+import { Autocomplete } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Autocomplete component is a combination of an [Input](/uilib/components/input) and a [Dropdown](/uilib/components/dropdown), also called **ComboBox**. During typing, matching data items gets suggested in an option menu (listbox).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/info.mdx
index 0c399431ec0..1db68542f55 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Avatar } from '@dnb/eufemia'
+```
+
 ## Description
 
 Avatars are identifiers that makes people and companies more scannable for payments, spending overviews and social functionality. The fallback for a person is the letter version that uses the first letter of a persons name. A company has the icon version as it’s default/fallback.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/badge/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/badge/info.mdx
index d2f412cde8f..e8d5b718b56 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/badge/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/badge/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Badge } from '@dnb/eufemia'
+```
+
 ## Description
 
 Badge generates a small badge on its child(ren), or can be a inline/standalone badge.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/info.mdx
index a1fa41112f3..3f1e76d995f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Breadcrumb } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Breadcrumb is a component for navigation and for showing the current website path or tree.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/button/info.mdx
index cfa95612b5e..b83a5ccbf18 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/button/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/button/info.mdx
@@ -10,6 +10,12 @@ import {
   IconButtonSizes,
 } from 'Docs/uilib/components/button/Examples'
 
+## Import
+
+```tsx
+import { Button } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Button component should be used as the **primary call-to-action** in a form, or as a user interaction mechanism.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx
index 7d71ee61718..74c44d74dbd 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 import * as Examples from './Examples'
 
+## Import
+
+```tsx
+import { Card } from '@dnb/eufemia'
+```
+
 ## Description
 
 `Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/info.mdx
index 513264426ca..e41f7155ef2 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Checkbox } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Checkbox component is shown as a square box that is ticked (checked) when activated.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/info.mdx
index a9763a7c415..a72ee7780d6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { CopyOnClick } from '@dnb/eufemia'
+```
+
 ## Description
 
 The `CopyOnClick` component provides a convenient way to copy text to the clipboard with a single click. This component is particularly useful in scenarios where users need to quickly copy text, such as when copying codes, IDs, URLs, or any other text content that needs to be easily shared or reused.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/info.mdx
index 4478ffff3c5..35f1d10c377 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { DatePicker } from '@dnb/eufemia'
+```
+
 ## Description
 
 The DatePicker component should be used whenever there is to enter a single date or a date range/period with a start and end date.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/info.mdx
index 2f1d0541ef7..09b9061f322 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/info.mdx
@@ -6,6 +6,12 @@ import InlineImg from 'dnb-design-system-portal/src/shared/tags/Img'
 import DialogConfirmExample from 'Docs/uilib/components/dialog/assets/dialog_confirm.png'
 import DialogInformExample from 'Docs/uilib/components/dialog/assets/dialog_inform.png'
 
+## Import
+
+```tsx
+import { Dialog } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Dialog component is a [Modal](/uilib/components/modal) variation that appears at the center of the screen. The Dialog has similar functionality to a traditional popup window. Similar to Modal, it has to be triggered by the user to appear. Typical usage would be to read an explanation, then closing it.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/info.mdx
index d6eec9a1c40..2445fa9f88e 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Drawer } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Drawer component is a [Modal](/uilib/components/modal) variation that appears as a side panel at any chosen side of the page; top, bottom, left or right (default `right`). A Drawer is typically used to show additional information. It can also be used to have easy/quick tasks while being in context.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.mdx
index ccd8c07f9db..ec0d4424141 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Dropdown } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Dropdown component is a fully custom-made component. This allows us to change its form based on context (small screens, touch devices, etc.)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/info.mdx
index 55644326658..59198a180a8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { FormLabel } from '@dnb/eufemia'
+```
+
 ## Description
 
 The FormLabel component represents a caption for all sorts of HTML elements in a user interface.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/info.mdx
index 4bddee95219..cc13e39868b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/info.mdx
@@ -6,6 +6,12 @@ redirect_from:
 
 import FormStatusIcons from 'Docs/icons/form-status.mdx'
 
+## Import
+
+```tsx
+import { FormStatus } from '@dnb/eufemia'
+```
+
 ## Description
 
 The FormStatus is a simple component meant for displaying the status of a form ( displaying form errors, messages etc. )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx
index 08346ea7c25..be3db436e9f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 import { DrawerListExampleOptionsRender } from 'Docs/uilib/components/fragments/drawer-list/Examples'
 
+## Import
+
+```tsx
+import { DrawerList } from '@dnb/eufemia/fragments'
+```
+
 ## Description
 
 The DrawerList component is a fragment inside other components.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/scroll-view/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/scroll-view/info.mdx
index de9e7798ea3..171f13ea93d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/scroll-view/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/scroll-view/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 import { ScrollViewInfo } from 'Docs/uilib/components/fragments/scroll-view/Examples'
 
+## Import
+
+```tsx
+import { ScrollView } from '@dnb/eufemia/fragments'
+```
+
 ## Description
 
 ScrollView is a tiny helper component helping the user controlling overflowing content horizontally or vertically.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/info.mdx
index 801a11e4d64..27e55b71795 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { TextCounter } from '@dnb/eufemia/fragments'
+```
+
 ## Description
 
 The `TextCounter` is a component designed to provide real-time character count feedback in text input fields.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/info.mdx
index 3b6c90f8425..4e59782dbea 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { GlobalError } from '@dnb/eufemia'
+```
+
 ## Description
 
 The GlobalError is a simple component to integrate when a `404` or `500` has to be shown.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx
index 7996c203ce6..1f4bd1a6124 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx
@@ -11,6 +11,12 @@ import {
   GlobalStatusInfoExampleManipulate3,
 } from 'Docs/uilib/components/global-status/Examples'
 
+## Import
+
+```tsx
+import { GlobalStatus } from '@dnb/eufemia'
+```
+
 ## Description
 
 The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form ( displaying form errors, messages etc. ).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/heading/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/heading/info.mdx
index 4e9492b1479..45ccd62ef21 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/heading/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/heading/info.mdx
@@ -9,6 +9,12 @@ import {
   HeadingInfoBasic,
 } from 'Docs/uilib/components/heading/Examples'
 
+## Import
+
+```tsx
+import { Heading } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Heading component is a helper to create automated semantic headings within a boundary of the web heading rules.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/info.mdx
index cfa0fd72ab0..da75f710667 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { HeightAnimation } from '@dnb/eufemia'
+```
+
 ## Description
 
 The HeightAnimation component calculates the height, and animates from `auto` to `auto` – or from `0` to `auto` in height – powered by CSS transition. It calculates the height on the fly.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/info.mdx
index 26ac76be91d..f724f3b9ba9 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { HelpButton } from '@dnb/eufemia'
+```
+
 ## Description
 
 A help button with custom semantics, helping screen readers determine the meaning of that button. For the visual part, it is a default [icon button](/uilib/components/button#icon-button) with the `question` icon as a basis.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/info.mdx
index d3400aebfb5..91810b98bc6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { IconPrimary } from '@dnb/eufemia'
+```
+
 ## Description
 
 The IconPrimary component loads by default all [Primary Icons](/icons/primary) so they can easily be included and used without additionally importing every icon.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/info.mdx
index 247e93c2da2..f5dae9c07e9 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Icon } from '@dnb/eufemia'
+```
+
 ## Description
 
 The main Icon component is a wrapper for whatever icon you place within it. This means a `span` wrapping an inline `SVG`.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/info-card/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/info-card/info.mdx
index ccad77f558d..510dbbcfb05 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/info-card/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/info-card/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { InfoCard } from '@dnb/eufemia'
+```
+
 ## Description
 
 The InfoCard is used to give the user more information than we can give in a [FormStatus](/uilib/components/form-status/) (message box). It can also be used to give useful tips.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/info.mdx
index 5eedef2f377..66fc5a750ba 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/info.mdx
@@ -12,6 +12,12 @@ import {
   InputMaskedExampleMulti,
 } from 'Docs/uilib/components/input-masked/Examples'
 
+## Import
+
+```tsx
+import { InputMasked } from '@dnb/eufemia'
+```
+
 ## Description
 
 The InputMasked component uses the basic [Input](/uilib/components/input) component, but with some additional masking functionality.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/info.mdx
index 69533437e83..28aa2b6e0df 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/input/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input/info.mdx
@@ -5,6 +5,12 @@ showTabs: true
 import * as Examples from './Examples'
 import { MultipleOneRow } from '../../extensions/forms/base-fields/String/Examples'
 
+## Import
+
+```tsx
+import { Input } from '@dnb/eufemia'
+```
+
 ## Description
 
 The input component is an umbrella component for all inputs which share the same style as the classic `text` input field.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/logo/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/logo/info.mdx
index 8bf0d72bb3d..0baebbbd598 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/logo/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/logo/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Logo } from '@dnb/eufemia'
+```
+
 ## Description
 
 A ready to use DNB or Sbanken logo in SVG format.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/info.mdx
index d85fe208358..04e01da795c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 import { ModalExampleSuffix } from 'Docs/uilib/components/modal/Examples'
 
+## Import
+
+```tsx
+import { Modal } from '@dnb/eufemia'
+```
+
 ## Description
 
 Modal is the root component for [Drawer](/uilib/components/drawer) and [Dialog](/uilib/components/dialog). If one of these satisfy your needs, you want to use those rather than directly using Modal. Using the Modal, it's possible to implement other modal variants than we provide as of now(Drawer and Dialog).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx
index cc6d77d4a40..7d09c2072a6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx
@@ -6,6 +6,12 @@ redirect_from:
 
 import { NumberFormat } from '@dnb/eufemia/src'
 
+## Import
+
+```tsx
+import { NumberFormat } from '@dnb/eufemia'
+```
+
 ## Description
 
 A ready-to-use DNB number formatter. Use it wherever you have to display a number, a currency value, phone number, etc.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/info.mdx
index fafb4434c5a..bddc2490214 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Pagination } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Pagination component is used to split up larger data sets into pages / sections so the users can interact sequentially through the content. It supports both classical **page pagination** and **infinity scrolling**.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/info.mdx
index ff3826a7491..96b5537b9cb 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/info.mdx
@@ -4,6 +4,12 @@ redirect_from:
   - /uilib/components/progress/info
 ---
 
+## Import
+
+```tsx
+import { ProgressIndicator } from '@dnb/eufemia'
+```
+
 ## Description
 
 Use a ProgressIndicator whenever the user has to wait for more than _150ms_. This component is also known as:
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/info.mdx
index b690fd52ff0..9e9151cb881 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Radio } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Radio component is shown as a circle that is filled (checked) when activated.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/section/info.mdx
index 1c16a0bdb4d..2aa6d619239 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/section/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/section/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Section } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Section component is a visual helper. It wraps content inside a visual section banner.
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 d323e6c37db..2e9e746d9fa 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
@@ -10,6 +10,12 @@ import {
   SkeletonInfoCustom,
 } from 'Docs/uilib/components/skeleton/Examples'
 
+## Import
+
+```tsx
+import { Skeleton } from '@dnb/eufemia'
+```
+
 ## 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.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/info.mdx
index 39ea1f2bfc0..b223d693604 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/info.mdx
@@ -8,6 +8,12 @@ import {
   SkipContentInfo2,
 } from 'Docs/uilib/components/skip-content/Examples'
 
+## Import
+
+```tsx
+import { SkipContent } from '@dnb/eufemia'
+```
+
 ## Description
 
 `SkipContent` gives users – using their keyboard for navigation – the option to skip over content which contains a large amount of interactive elements.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.mdx
index 029fa08e741..06627c80791 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Slider } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Slider component provides a visual indication of adjustable value. A value can be adjusted (increased or decreased) by moving the drag handle along a track (usually horizontal or vertical). Remember to inform users that they can also adjust the value directly in the value input field (if it exists).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.mdx
index b89e70d1d23..b3161fb8e75 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { StepIndicator } from '@dnb/eufemia'
+```
+
 ## Description
 
 The step indicator (progress indicator) is a visual representation of a user's progress through a set of steps or series of actions. Their purpose is to both guide the user through the process and to help them create a mental model of the amount of time and effort that is required to fulfill the process.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/info.mdx
index 78d39691c3a..97dafb4dc80 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Switch } from '@dnb/eufemia'
+```
+
 ## Description
 
 _Also known as a toggle switch or a toggle._
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/info.mdx
index b4835be9065..fd2c66da8b7 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/table/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/table/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Table } from '@dnb/eufemia'
+```
+
 ## Tables
 
 The Table component is an all inclusive and accessible table based on correct HTML semantics.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/info.mdx
index b6d0a875c52..c503e0482a3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Tabs } from '@dnb/eufemia'
+```
+
 ## Description
 
 Tabs are a set of buttons that allow navigation between content that is related and on the same level of hierarchy.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tag/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tag/info.mdx
index 29ff9c1cf66..5d4fd3f2e56 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/tag/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tag/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Tag } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Tag is a compact element for displaying discrete information.<br/>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/info.mdx
index 30051f55b3e..ed1d6ddc6fd 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 import * as Examples from './Examples'
 
+## Import
+
+```tsx
+import { Textarea } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Textarea component is used as a multi-line text input control with an unlimited number of characters.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/info.mdx
index 16f167be324..a1ccf4f64ba 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { ToggleButton } from '@dnb/eufemia'
+```
+
 ## Description
 
 The ToggleButton component should be used to toggle on or off a limited number of choices.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/info.mdx
index 8c068aa22a4..7058179af7c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Tooltip } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Tooltip component is primarily meant to enhance the UX for various and additional information.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/info.mdx
index de771b1e274..a21ce45c87b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Upload } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Upload component should be used in scenarios where the user has to upload any kind of files.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden/info.mdx
index 147ed9ba1e7..58f26ee4e90 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { VisuallyHidden } from '@dnb/eufemia'
+```
+
 ## Description
 
 `VisuallyHidden` is a utility component that can be used to hide its children visually, while keeping them visible to screen readers and other assistive technology. It uses the global helper class `.dnb-sr-only` under the hood.