diff --git a/docs-ui/src/app/components/avatar/page.mdx b/docs-ui/src/app/components/avatar/page.mdx
index 01e647ef7c..0074eda5b8 100644
--- a/docs-ui/src/app/components/avatar/page.mdx
+++ b/docs-ui/src/app/components/avatar/page.mdx
@@ -36,13 +36,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 Avatar sizes can be set using the `size` prop.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<Sizes />}
-  code={sizesSnippet}
-/>
+<Snippet align="center" py={4} open preview={<Sizes />} code={sizesSnippet} />
 
 ### Fallback
 
@@ -60,12 +54,7 @@ If the image is not available, the avatar will show the initials of the name.
 
 Control how the avatar is announced to screen readers using the `purpose` prop.
 
-<Snippet
-  align="center"
-  py={4}
-  preview={<Purpose />}
-  code={purposeSnippet}
-/>
+<Snippet align="center" py={4} preview={<Purpose />} code={purposeSnippet} />
 
 <Theming definition={AvatarDefinition} />
 
diff --git a/docs-ui/src/app/components/button-icon/page.mdx b/docs-ui/src/app/components/button-icon/page.mdx
index 4fa239959b..776b016671 100644
--- a/docs-ui/src/app/components/button-icon/page.mdx
+++ b/docs-ui/src/app/components/button-icon/page.mdx
@@ -48,13 +48,7 @@ Here's a view when buttons have different variants.
 
 Here's a view when buttons have different sizes.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<Sizes />}
-  code={sizesSnippet}
-/>
+<Snippet align="center" py={4} open preview={<Sizes />} code={sizesSnippet} />
 
 ### Disabled
 
diff --git a/docs-ui/src/app/components/button-link/page.mdx b/docs-ui/src/app/components/button-link/page.mdx
index cb2b0c19da..2da3177c55 100644
--- a/docs-ui/src/app/components/button-link/page.mdx
+++ b/docs-ui/src/app/components/button-link/page.mdx
@@ -20,12 +20,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
   description="A button component that can be used as a link."
 />
 
-<Snippet
-  align="center"
-  py={4}
-  preview={<Variants />}
-  code={variantsSnippet}
-/>
+<Snippet align="center" py={4} preview={<Variants />} code={variantsSnippet} />
 
 ## Usage
 
@@ -53,13 +48,7 @@ Here's a view when buttons have different variants.
 
 Here's a view when buttons have different sizes.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<Sizes />}
-  code={sizesSnippet}
-/>
+<Snippet align="center" py={4} open preview={<Sizes />} code={sizesSnippet} />
 
 ### With Icons
 
diff --git a/docs-ui/src/app/components/card/page.mdx b/docs-ui/src/app/components/card/page.mdx
index 3f50c7c160..e0b6e81fff 100644
--- a/docs-ui/src/app/components/card/page.mdx
+++ b/docs-ui/src/app/components/card/page.mdx
@@ -24,12 +24,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
   description="A card component that can be used to display content in a box."
 />
 
-<Snippet
-  align="center"
-  py={4}
-  preview={<Default />}
-  code={defaultSnippet}
-/>
+<Snippet align="center" py={4} preview={<Default />} code={defaultSnippet} />
 
 ## Usage
 
diff --git a/docs-ui/src/app/components/dialog/page.mdx b/docs-ui/src/app/components/dialog/page.mdx
index 0047b216b1..1910cef5a8 100644
--- a/docs-ui/src/app/components/dialog/page.mdx
+++ b/docs-ui/src/app/components/dialog/page.mdx
@@ -1,7 +1,11 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { Default, PreviewFixedWidthAndHeight, PreviewWithForm } from './components';
+import {
+  Default,
+  PreviewFixedWidthAndHeight,
+  PreviewWithForm,
+} from './components';
 import {
   dialogPropDefs,
   dialogTriggerPropDefs,
diff --git a/docs-ui/src/app/components/grid/page.mdx b/docs-ui/src/app/components/grid/page.mdx
index 7018310ba3..e75f277226 100644
--- a/docs-ui/src/app/components/grid/page.mdx
+++ b/docs-ui/src/app/components/grid/page.mdx
@@ -36,7 +36,6 @@ The grid component also accepts all the spacing props from the Box component.
 
 <PropsTable data={spacingPropDefs} />
 
-
 <Theming definition={GridDefinition} />
 
 <ChangelogComponent component="grid" />
diff --git a/docs-ui/src/app/components/header-page/page.mdx b/docs-ui/src/app/components/header-page/page.mdx
index faa01ab1c0..cf17bf46b7 100644
--- a/docs-ui/src/app/components/header-page/page.mdx
+++ b/docs-ui/src/app/components/header-page/page.mdx
@@ -1,7 +1,13 @@
 import { PropsTable } from '@/components/PropsTable';
 import { CodeBlock } from '@/components/CodeBlock';
 import { Snippet } from '@/components/Snippet';
-import { WithEverything, WithLongBreadcrumbs, WithTabs, WithCustomActions, WithMenuItems } from './components';
+import {
+  WithEverything,
+  WithLongBreadcrumbs,
+  WithTabs,
+  WithCustomActions,
+  WithMenuItems,
+} from './components';
 import { propDefs } from './props-definition';
 import {
   usage,
@@ -22,11 +28,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
   description="A header page component for the plugin that should sit under the Header component."
 />
 
-<Snippet
-  py={4}
-  preview={<WithEverything />}
-  code={defaultSnippet}
-/>
+<Snippet py={4} preview={<WithEverything />} code={defaultSnippet} />
 
 ## Usage
 
@@ -43,44 +45,28 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 You can add breadcrumbs to the header page to help users navigate to the previous page. The `breadcrumbs`
 prop is an array of objects with a `label` and `href` property. By default we truncate the breadcrumb label to 240px.
 
-<Snippet
-  open
-  preview={<WithLongBreadcrumbs />}
-  code={withBreadcrumbs}
-/>
+<Snippet open preview={<WithLongBreadcrumbs />} code={withBreadcrumbs} />
 
 ### With Tabs
 
 You can add tabs to the header page to help users navigate to the different sections of the page. The `tabs`
 prop is an array of objects with a `label` and `href` property.
 
-<Snippet
-  open
-  preview={<WithTabs />}
-  code={withTabs}
-/>
+<Snippet open preview={<WithTabs />} code={withTabs} />
 
 ### With Custom Actions
 
 You can add custom actions to the header page to help users navigate to the different sections of the page. The `customActions`
 prop is a React node.
 
-<Snippet
-  open
-  preview={<WithCustomActions />}
-  code={withCustomActions}
-/>
+<Snippet open preview={<WithCustomActions />} code={withCustomActions} />
 
 ### With Menu Items
 
 You can add menu items to the header page to help users navigate to the different sections of the page. The `menuItems`
 prop is an array of objects with a `label`, `value` and `onClick` property.
 
-<Snippet
-  open
-  preview={<WithMenuItems />}
-  code={withMenuItems}
-/>
+<Snippet open preview={<WithMenuItems />} code={withMenuItems} />
 
 <Theming definition={HeaderPageDefinition} />
 
diff --git a/docs-ui/src/app/components/header/page.mdx b/docs-ui/src/app/components/header/page.mdx
index ea66cf9703..22343cd6c5 100644
--- a/docs-ui/src/app/components/header/page.mdx
+++ b/docs-ui/src/app/components/header/page.mdx
@@ -1,7 +1,12 @@
 import { PropsTable } from '@/components/PropsTable';
 import { CodeBlock } from '@/components/CodeBlock';
 import { Snippet } from '@/components/Snippet';
-import { WithAllOptionsAndTabs, WithAllOptions, WithBreadcrumbs, WithHeaderPage } from './components';
+import {
+  WithAllOptionsAndTabs,
+  WithAllOptions,
+  WithBreadcrumbs,
+  WithHeaderPage,
+} from './components';
 import { propDefs } from './props-definition';
 import {
   usage,
@@ -22,11 +27,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
   description="A header component for the plugin."
 />
 
-<Snippet
-  py={4}
-  preview={<WithAllOptionsAndTabs />}
-  code={defaultSnippet}
-/>
+<Snippet py={4} preview={<WithAllOptionsAndTabs />} code={defaultSnippet} />
 
 ## Usage
 
@@ -42,12 +43,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 A simple example of how to use the Header component.
 
-<Snippet
-  py={4}
-  preview={<WithAllOptions />}
-  code={simple}
-  open
-/>
+<Snippet py={4} preview={<WithAllOptions />} code={simple} open />
 
 ### Header with tabs
 
@@ -65,21 +61,13 @@ open
 
 Breacrumbs should appear when you scroll down (and not directly visible as it is in the demo below).
 
-<Snippet
-  preview={<WithBreadcrumbs />}
-  code={withBreadcrumbs}
-  open
-/>
+<Snippet preview={<WithBreadcrumbs />} code={withBreadcrumbs} open />
 
 ### Header with HeaderPage
 
 You can use the `Header` component inside the [HeaderPage](/components/header-page) component to compose your multi-level navigation.
 
-<Snippet
-  preview={<WithHeaderPage />}
-  code={withHeaderPage}
-  open
-/>
+<Snippet preview={<WithHeaderPage />} code={withHeaderPage} open />
 
 <Theming definition={HeaderDefinition} />
 
diff --git a/docs-ui/src/app/components/link/page.mdx b/docs-ui/src/app/components/link/page.mdx
index b138067a26..fb44c7084f 100644
--- a/docs-ui/src/app/components/link/page.mdx
+++ b/docs-ui/src/app/components/link/page.mdx
@@ -10,7 +10,13 @@ import {
   allColorsSnippet,
   underlineSnippet,
 } from './snippets';
-import { Default, ExternalLink, AllVariants, AllColors, Underline } from './components';
+import {
+  Default,
+  ExternalLink,
+  AllVariants,
+  AllColors,
+  Underline,
+} from './components';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
diff --git a/docs-ui/src/app/components/menu/page.mdx b/docs-ui/src/app/components/menu/page.mdx
index 7d22397ff2..86f2778e01 100644
--- a/docs-ui/src/app/components/menu/page.mdx
+++ b/docs-ui/src/app/components/menu/page.mdx
@@ -1,7 +1,17 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { Preview, PreviewSubmenu, PreviewIcons, PreviewLinks, PreviewSections, PreviewSeparators, PreviewAutocompleteMenu, PreviewAutocompleteListbox, PreviewAutocompleteListboxMultiple } from './components';
+import {
+  Preview,
+  PreviewSubmenu,
+  PreviewIcons,
+  PreviewLinks,
+  PreviewSections,
+  PreviewSeparators,
+  PreviewAutocompleteMenu,
+  PreviewAutocompleteListbox,
+  PreviewAutocompleteListboxMultiple,
+} from './components';
 import {
   menuTriggerPropDefs,
   submenuTriggerPropDefs,
@@ -36,12 +46,7 @@ import { MenuDefinition } from '../../../utils/definitions';
   description="A list of actions in a dropdown, enhanced with keyboard navigation."
 />
 
-<Snippet
-  align="center"
-  py={4}
-  preview={<Preview />}
-  code={preview}
-/>
+<Snippet align="center" py={4} preview={<Preview />} code={preview} />
 
 ## Usage
 
@@ -152,26 +157,14 @@ the submenu is displayed in the correct position. The best practice is to use th
 
 You can use the `iconStart` prop to add an icon to the menu item.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<PreviewIcons />}
-  code={icons}
-/>
+<Snippet align="center" py={4} open preview={<PreviewIcons />} code={icons} />
 
 ### With links
 
 You can use the `href` prop to add a link to the menu item. This is using our router provider under the hood
 to work for both internal and external links.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<PreviewLinks />}
-  code={links}
-/>
+<Snippet align="center" py={4} open preview={<PreviewLinks />} code={links} />
 
 ### With sections
 
diff --git a/docs-ui/src/app/components/password-field/page.mdx b/docs-ui/src/app/components/password-field/page.mdx
index 50d52cd939..5cd556e2fb 100644
--- a/docs-ui/src/app/components/password-field/page.mdx
+++ b/docs-ui/src/app/components/password-field/page.mdx
@@ -19,7 +19,12 @@ import { PasswordFieldDefinition } from '../../../utils/definitions';
   description="A password field component for your forms."
 />
 
-<Snippet align="center" py={4} preview={<WithLabel />} code={withLabelSnippet} />
+<Snippet
+  align="center"
+  py={4}
+  preview={<WithLabel />}
+  code={withLabelSnippet}
+/>
 
 ## Usage
 
@@ -35,13 +40,7 @@ import { PasswordFieldDefinition } from '../../../utils/definitions';
 
 We support two different sizes: `small`, `medium`.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<Sizes />}
-  code={sizesSnippet}
-/>
+<Snippet align="center" py={4} open preview={<Sizes />} code={sizesSnippet} />
 
 ### With description
 
diff --git a/docs-ui/src/app/components/popover/page.mdx b/docs-ui/src/app/components/popover/page.mdx
index b0d943d673..5a3b0e990c 100644
--- a/docs-ui/src/app/components/popover/page.mdx
+++ b/docs-ui/src/app/components/popover/page.mdx
@@ -14,12 +14,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
   description="A popover displays floating content anchored to a trigger element with automatic positioning and collision detection."
 />
 
-<Snippet
-  align="center"
-  py={4}
-  preview={<Default />}
-  code={defaultSnippet}
-/>
+<Snippet align="center" py={4} preview={<Default />} code={defaultSnippet} />
 
 ## Usage
 
diff --git a/docs-ui/src/app/components/radio-group/page.mdx b/docs-ui/src/app/components/radio-group/page.mdx
index a0a1fc36b5..9f76c0be9c 100644
--- a/docs-ui/src/app/components/radio-group/page.mdx
+++ b/docs-ui/src/app/components/radio-group/page.mdx
@@ -10,7 +10,14 @@ import {
   validationSnippet,
   readOnlySnippet,
 } from './snippets';
-import { Default, Horizontal, Disabled, DisabledSingle, Validation, ReadOnly } from './components';
+import {
+  Default,
+  Horizontal,
+  Disabled,
+  DisabledSingle,
+  Validation,
+  ReadOnly,
+} from './components';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
diff --git a/docs-ui/src/app/components/search-field/page.mdx b/docs-ui/src/app/components/search-field/page.mdx
index 59b1197e7b..f5b7054361 100644
--- a/docs-ui/src/app/components/search-field/page.mdx
+++ b/docs-ui/src/app/components/search-field/page.mdx
@@ -8,7 +8,12 @@ import {
   withDescriptionSnippet,
   startCollapsedSnippet,
 } from './snippets';
-import { WithLabel, Sizes, WithDescription, StartCollapsed } from './components';
+import {
+  WithLabel,
+  Sizes,
+  WithDescription,
+  StartCollapsed,
+} from './components';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
@@ -20,7 +25,12 @@ import { SearchFieldDefinition } from '../../../utils/definitions';
   description="A SearchField is a text field designed for searches."
 />
 
-<Snippet align="center" py={4} preview={<WithLabel />} code={withLabelSnippet} />
+<Snippet
+  align="center"
+  py={4}
+  preview={<WithLabel />}
+  code={withLabelSnippet}
+/>
 
 ## Usage
 
@@ -36,13 +46,7 @@ import { SearchFieldDefinition } from '../../../utils/definitions';
 
 We support two different sizes: `small`, `medium`.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<Sizes />}
-  code={sizesSnippet}
-/>
+<Snippet align="center" py={4} open preview={<Sizes />} code={sizesSnippet} />
 
 ### With description
 
diff --git a/docs-ui/src/app/components/select/page.mdx b/docs-ui/src/app/components/select/page.mdx
index d394fd698e..08e29c4a29 100644
--- a/docs-ui/src/app/components/select/page.mdx
+++ b/docs-ui/src/app/components/select/page.mdx
@@ -1,7 +1,17 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { Preview, WithLabelAndDescription, Sizes, WithIcon, Disabled, DisabledOption, Searchable, MultipleSelection, SearchableMultiple } from './components';
+import {
+  Preview,
+  WithLabelAndDescription,
+  Sizes,
+  WithIcon,
+  Disabled,
+  DisabledOption,
+  Searchable,
+  MultipleSelection,
+  SearchableMultiple,
+} from './components';
 import { selectPropDefs } from './props-definition';
 import {
   selectUsageSnippet,
diff --git a/docs-ui/src/app/components/skeleton/page.mdx b/docs-ui/src/app/components/skeleton/page.mdx
index 21eb35ac5f..42f8975b5a 100644
--- a/docs-ui/src/app/components/skeleton/page.mdx
+++ b/docs-ui/src/app/components/skeleton/page.mdx
@@ -2,11 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
 import { skeletonPropDefs } from './props-definition';
-import {
-  skeletonUsageSnippet,
-  demo1Snippet,
-  demo2Snippet,
-} from './snippets';
+import { skeletonUsageSnippet, demo1Snippet, demo2Snippet } from './snippets';
 import { Demo1, Demo2 } from './components';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
@@ -34,25 +30,13 @@ import { SkeletonDefinition } from '../../../utils/definitions';
 
 You can use a mix of different sizes to create a more complex skeleton.
 
-<Snippet
-  align="center"
-  py={4}
-  preview={<Demo1 />}
-  code={demo1Snippet}
-  open
-/>
+<Snippet align="center" py={4} preview={<Demo1 />} code={demo1Snippet} open />
 
 ### Demo 2
 
 You can use a mix of different sizes to create a more complex skeleton.
 
-<Snippet
-  align="center"
-  py={4}
-  preview={<Demo2 />}
-  code={demo2Snippet}
-  open
-/>
+<Snippet align="center" py={4} preview={<Demo2 />} code={demo2Snippet} open />
 
 <Theming definition={SkeletonDefinition} />
 
diff --git a/docs-ui/src/app/components/table/page.mdx b/docs-ui/src/app/components/table/page.mdx
index d3461124d2..f9b27cd8d3 100644
--- a/docs-ui/src/app/components/table/page.mdx
+++ b/docs-ui/src/app/components/table/page.mdx
@@ -1,7 +1,12 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { TableRockBand, SelectionModePlayground, SelectionBehaviorPlayground, SelectionToggleWithActions } from './components';
+import {
+  TableRockBand,
+  SelectionModePlayground,
+  SelectionBehaviorPlayground,
+  SelectionToggleWithActions,
+} from './components';
 import {
   tablePropDefs,
   tableHeaderPropDefs,
@@ -28,11 +33,7 @@ import { TableDefinition } from '../../../utils/definitions';
   description="A flexible table component built on top of TanStack Table with built-in styling, interactions, and pagination support."
 />
 
-<Snippet
-  py={4}
-  preview={<TableRockBand />}
-  code={tableBasicSnippet}
-/>
+<Snippet py={4} preview={<TableRockBand />} code={tableBasicSnippet} />
 
 ## Usage
 
diff --git a/docs-ui/src/app/components/tabs/page.mdx b/docs-ui/src/app/components/tabs/page.mdx
index 0c51b96471..0b9478a503 100644
--- a/docs-ui/src/app/components/tabs/page.mdx
+++ b/docs-ui/src/app/components/tabs/page.mdx
@@ -14,7 +14,12 @@ import {
   disabledTabsSnippet,
   orientationSnippet,
 } from './snippets';
-import { Default, DefaultSelectedKey, DisabledTabs, Orientation } from './components';
+import {
+  Default,
+  DefaultSelectedKey,
+  DisabledTabs,
+  Orientation,
+} from './components';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { TabsDefinition } from '../../../utils/definitions';
@@ -25,11 +30,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
   description="A component for toggling between related panels on the same page."
 />
 
-<Snippet
-  py={4}
-  preview={<Default />}
-  code={defaultSnippet}
-/>
+<Snippet py={4} preview={<Default />} code={defaultSnippet} />
 
 ## Usage
 
@@ -66,23 +67,13 @@ Here's how to set which tab is selected by default.
 
 Here's how to disable specific tabs.
 
-<Snippet
-  py={4}
-  preview={<DisabledTabs />}
-  code={disabledTabsSnippet}
-  open
-/>
+<Snippet py={4} preview={<DisabledTabs />} code={disabledTabsSnippet} open />
 
 ### Orientation
 
 Here's how to display tabs vertically.
 
-<Snippet
-  py={4}
-  preview={<Orientation />}
-  code={orientationSnippet}
-  open
-/>
+<Snippet py={4} preview={<Orientation />} code={orientationSnippet} open />
 
 <Theming definition={TabsDefinition} />
 
diff --git a/docs-ui/src/app/components/tag-group/page.mdx b/docs-ui/src/app/components/tag-group/page.mdx
index 098179f623..2c6226284f 100644
--- a/docs-ui/src/app/components/tag-group/page.mdx
+++ b/docs-ui/src/app/components/tag-group/page.mdx
@@ -1,11 +1,15 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { Default, WithLink, WithIcon, Sizes, RemovingTags, Disabled } from './components';
 import {
-  tagGroupPropDefs,
-  tagPropDefs,
-} from './props-definition';
+  Default,
+  WithLink,
+  WithIcon,
+  Sizes,
+  RemovingTags,
+  Disabled,
+} from './components';
+import { tagGroupPropDefs, tagPropDefs } from './props-definition';
 import {
   usage,
   preview,
@@ -25,12 +29,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
   description="A tag group is a list of labels, categories, keywords, filters, or other items, that can be used to group and filter content."
 />
 
-<Snippet
-  align="center"
-  py={4}
-  preview={<Default />}
-  code={preview}
-/>
+<Snippet align="center" py={4} preview={<Default />} code={preview} />
 
 ## Usage
 
@@ -56,37 +55,19 @@ A tag is a single item in a tag group.
 
 A tag can be a link by passing a `href` prop.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<WithLink />}
-  code={withLink}
-/>
+<Snippet align="center" py={4} open preview={<WithLink />} code={withLink} />
 
 ### With Icons
 
 A tag can have an icon by passing a `icon` prop.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<WithIcon />}
-  code={withIcons}
-/>
+<Snippet align="center" py={4} open preview={<WithIcon />} code={withIcons} />
 
 ### Sizes
 
 A tag can have a size by passing a `size` prop. It could be `small` or `medium`.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<Sizes />}
-  code={sizes}
-/>
+<Snippet align="center" py={4} open preview={<Sizes />} code={sizes} />
 
 ### Removing tags
 
@@ -104,13 +85,7 @@ A tag can be removed by passing a `onRemove` prop.
 
 A switch can be disabled using the `isDisabled` prop.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<Disabled />}
-  code={disabled}
-/>
+<Snippet align="center" py={4} open preview={<Disabled />} code={disabled} />
 
 <Theming definition={TagGroupDefinition} />
 
diff --git a/docs-ui/src/app/components/text-field/page.mdx b/docs-ui/src/app/components/text-field/page.mdx
index 7824de6842..0fd19d35f3 100644
--- a/docs-ui/src/app/components/text-field/page.mdx
+++ b/docs-ui/src/app/components/text-field/page.mdx
@@ -19,7 +19,12 @@ import { CodeBlock } from '@/components/CodeBlock';
   description="A text field component for your forms."
 />
 
-<Snippet align="center" py={4} preview={<WithLabel />} code={withLabelSnippet} />
+<Snippet
+  align="center"
+  py={4}
+  preview={<WithLabel />}
+  code={withLabelSnippet}
+/>
 
 ## Usage
 
@@ -35,13 +40,7 @@ import { CodeBlock } from '@/components/CodeBlock';
 
 We support two different sizes: `small`, `medium`.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<Sizes />}
-  code={sizesSnippet}
-/>
+<Snippet align="center" py={4} open preview={<Sizes />} code={sizesSnippet} />
 
 ### With description
 
diff --git a/docs-ui/src/app/components/text/page.mdx b/docs-ui/src/app/components/text/page.mdx
index aff78e17ef..0bf07f73e7 100644
--- a/docs-ui/src/app/components/text/page.mdx
+++ b/docs-ui/src/app/components/text/page.mdx
@@ -21,11 +21,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
   description="The `Text` component is used to display content on your page."
 />
 
-<Snippet
-  py={4}
-  preview={<Default />}
-  code={defaultSnippet}
-/>
+<Snippet py={4} preview={<Default />} code={defaultSnippet} />
 
 ## Usage
 
@@ -42,43 +38,27 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 The `Text` component has a `variant` prop that can be used to change the
 appearance of the text.
 
-<Snippet
-  open
-  preview={<Variants />}
-  code={variantsSnippet}
-/>
+<Snippet open preview={<Variants />} code={variantsSnippet} />
 
 ### All weights
 
 The `Text` component has a `weight` prop that can be used to change the
 appearance of the text.
 
-<Snippet
-  open
-  preview={<Weights />}
-  code={weightsSnippet}
-/>
+<Snippet open preview={<Weights />} code={weightsSnippet} />
 
 ### All colors
 
 The `Text` component has a `color` prop that can be used to change the
 appearance of the text.
 
-<Snippet
-  open
-  preview={<Colors />}
-  code={colorsSnippet}
-/>
+<Snippet open preview={<Colors />} code={colorsSnippet} />
 
 ### Truncate
 
 The `Text` component has a `truncate` prop that can be used to truncate the text.
 
-<Snippet
-  open
-  preview={<Truncate />}
-  code={truncateSnippet}
-/>
+<Snippet open preview={<Truncate />} code={truncateSnippet} />
 
 <Theming definition={TextDefinition} />
 
diff --git a/docs-ui/src/app/components/toggle-button/page.mdx b/docs-ui/src/app/components/toggle-button/page.mdx
index d2707fe84e..776144d089 100644
--- a/docs-ui/src/app/components/toggle-button/page.mdx
+++ b/docs-ui/src/app/components/toggle-button/page.mdx
@@ -49,13 +49,7 @@ import { ToggleButtonDefinition } from '../../../utils/definitions';
 
 ### Sizes
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<Sizes />}
-  code={sizesSnippet}
-/>
+<Snippet align="center" py={4} open preview={<Sizes />} code={sizesSnippet} />
 
 ### Disabled