diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx
index 31d821772a..38eb819d4d 100644
--- a/canon-docs/src/app/(docs)/components/button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/button/page.mdx
@@ -129,11 +129,7 @@ Here's a view when buttons are disabled.
 
 Here's a view when buttons are responsive.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<ButtonSnippet story="Responsive" />}
+<CodeBlock
   code={`<Button variant={{ initial: 'primary', lg: 'secondary' }}>
     Responsive Button
   </Button>`}
diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx
index 98bdab6efb..af4ea94648 100644
--- a/canon-docs/src/app/(docs)/components/heading/page.mdx
+++ b/canon-docs/src/app/(docs)/components/heading/page.mdx
@@ -67,10 +67,7 @@ appearance of the heading.
 You can also use the `variant` prop to change the appearance of the text based
 on the screen size.
 
-<Snippet
-  py={4}
-  open
-  preview={<HeadingSnippet story="Responsive" />}
+<CodeBlock
   code={`<Heading variant={{ initial: 'title2', lg: 'title1' }}>
     Responsive heading
   </Heading>`}
diff --git a/canon-docs/src/app/(docs)/components/icon-button/page.mdx b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
index d1ea768a62..12eb8c61ce 100644
--- a/canon-docs/src/app/(docs)/components/icon-button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
@@ -92,10 +92,6 @@ Here's a view when buttons are disabled.
 
 Here's a view when buttons are responsive.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<IconButtonSnippet story="Responsive" />}
+<CodeBlock
   code={`<IconButton icon="cloud" variant={{ initial: 'primary', lg: 'secondary' }} />`}
 />
diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx
index ef18739199..877f953c43 100644
--- a/canon-docs/src/app/(docs)/components/text/page.mdx
+++ b/canon-docs/src/app/(docs)/components/text/page.mdx
@@ -107,9 +107,7 @@ appearance of the text.
 You can also use the `variant` prop to change the appearance of the text based
 on the screen size.
 
-<Snippet
-  open
-  preview={<TextSnippet story="Responsive" />}
+<CodeBlock
   code={`<Text variant={{ initial: 'body', lg: 'subtitle' }}>
     Responsive text
   </Text>`}
diff --git a/canon-docs/src/snippets/box.tsx b/canon-docs/src/snippets/box.tsx
index ff7725a5ad..df254b9f7e 100644
--- a/canon-docs/src/snippets/box.tsx
+++ b/canon-docs/src/snippets/box.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
 
 export const BoxSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(BoxStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Preview') return <stories.Preview />;
 
diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx
index e1b60fa72a..eaf87c7dce 100644
--- a/canon-docs/src/snippets/button.tsx
+++ b/canon-docs/src/snippets/button.tsx
@@ -2,17 +2,9 @@
 
 import { composeStories } from '@storybook/react';
 import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories';
-import { useEffect, useState } from 'react';
 
 export const ButtonSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(ButtonStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Variants') return <stories.Variants />;
   if (story === 'Sizes') return <stories.Sizes />;
diff --git a/canon-docs/src/snippets/checkbox.tsx b/canon-docs/src/snippets/checkbox.tsx
index fe71240d2d..888f24c228 100644
--- a/canon-docs/src/snippets/checkbox.tsx
+++ b/canon-docs/src/snippets/checkbox.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
 
 export const CheckboxSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(CheckboxStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'AllVariants') return <stories.AllVariants />;
diff --git a/canon-docs/src/snippets/container.tsx b/canon-docs/src/snippets/container.tsx
index c73988c28e..9faa6e06e2 100644
--- a/canon-docs/src/snippets/container.tsx
+++ b/canon-docs/src/snippets/container.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
 
 export const ContainerSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(ContainerStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Preview') return <stories.Preview />;
 
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
index dfe16a80a9..2c913472d7 100644
--- a/canon-docs/src/snippets/field.tsx
+++ b/canon-docs/src/snippets/field.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as FieldStories from '../../../packages/canon/src/components/Field/Field.stories';
 
 export const FieldSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(FieldStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'WithLabelAndDescription')
diff --git a/canon-docs/src/snippets/flex.tsx b/canon-docs/src/snippets/flex.tsx
index d020a37537..c4fc40926e 100644
--- a/canon-docs/src/snippets/flex.tsx
+++ b/canon-docs/src/snippets/flex.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
 
 export const FlexSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(FlexStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
 
diff --git a/canon-docs/src/snippets/grid.tsx b/canon-docs/src/snippets/grid.tsx
index 8f72e8453c..1a41fe8ee6 100644
--- a/canon-docs/src/snippets/grid.tsx
+++ b/canon-docs/src/snippets/grid.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
 
 export const GridSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(GridStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
 
diff --git a/canon-docs/src/snippets/heading.tsx b/canon-docs/src/snippets/heading.tsx
index 5ec970c4a7..b4e3ac9997 100644
--- a/canon-docs/src/snippets/heading.tsx
+++ b/canon-docs/src/snippets/heading.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
 
 export const HeadingSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(HeadingStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'Title1') return <stories.Title1 />;
diff --git a/canon-docs/src/snippets/icon-button.tsx b/canon-docs/src/snippets/icon-button.tsx
index 954822cce6..b346d0be4f 100644
--- a/canon-docs/src/snippets/icon-button.tsx
+++ b/canon-docs/src/snippets/icon-button.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories';
 
 export const IconButtonSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(IconButtonStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Variants') return <stories.Variants />;
   if (story === 'Sizes') return <stories.Sizes />;
diff --git a/canon-docs/src/snippets/icon.tsx b/canon-docs/src/snippets/icon.tsx
index b0557ab2cd..978af55204 100644
--- a/canon-docs/src/snippets/icon.tsx
+++ b/canon-docs/src/snippets/icon.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
 
 export const IconSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(IconStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
 
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
index f4536cdde6..00f5dc5a01 100644
--- a/canon-docs/src/snippets/input.tsx
+++ b/canon-docs/src/snippets/input.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories';
 
 export const InputSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(InputStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Primary') return <stories.Primary />;
   if (story === 'Sizes') return <stories.Sizes />;
diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx
index e721dcc094..b42f58b877 100644
--- a/canon-docs/src/snippets/text.tsx
+++ b/canon-docs/src/snippets/text.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
 
 export const TextSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(TextStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'AllVariants') return <stories.AllVariants />;
diff --git a/packages/canon/src/components/Flex/Flex.stories.tsx b/packages/canon/src/components/Flex/Flex.stories.tsx
index 3b7a7a07c5..58f96ce157 100644
--- a/packages/canon/src/components/Flex/Flex.stories.tsx
+++ b/packages/canon/src/components/Flex/Flex.stories.tsx
@@ -61,21 +61,33 @@ const DecorativeBox = () => {
 
 export const Default: Story = {
   args: {
-    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+    children: (
+      <>
+        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+      </>
+    ),
   },
 };
 
 export const ColumnDirection: Story = {
   args: {
     direction: 'column',
-    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+    children: (
+      <>
+        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+      </>
+    ),
   },
 };
 
 export const RowDirection: Story = {
   args: {
     direction: 'row',
-    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+    children: (
+      <>
+        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+      </>
+    ),
   },
 };