diff --git a/packages/react-docs/pages/components/color-mode/dark-mode.js b/packages/react-docs/pages/components/color-mode/dark-mode.js
new file mode 100644
index 0000000000..e65f10cb1d
--- /dev/null
+++ b/packages/react-docs/pages/components/color-mode/dark-mode.js
@@ -0,0 +1,32 @@
+import {
+  Box,
+  DarkMode,
+  Text,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const Component = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The color mode is set to {colorMode}
+      </Text>
+    </Box>
+  );
+};
+
+const App = () => (
+  <DarkMode>
+    <Component />
+  </DarkMode>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-mode/dark-mode.page.mdx b/packages/react-docs/pages/components/color-mode/dark-mode.page.mdx
index c1eb9d22d6..a5ae6cf9db 100644
--- a/packages/react-docs/pages/components/color-mode/dark-mode.page.mdx
+++ b/packages/react-docs/pages/components/color-mode/dark-mode.page.mdx
@@ -10,29 +10,7 @@ import { DarkMode } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx noInline
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      color={colorStyle.color.primary}
-    >
-      <Text px="4x" py="3x">
-        The color mode is set to {colorMode}
-      </Text>
-    </Box>
-  );
-}
-
-render(
-  <DarkMode>
-    <Example />
-  </DarkMode>
-);
-```
+{render('./dark-mode')}
 
 ## Props
 
diff --git a/packages/react-docs/pages/components/color-mode/inverted-mode-tooltip.js b/packages/react-docs/pages/components/color-mode/inverted-mode-tooltip.js
new file mode 100644
index 0000000000..a0ff5e4faa
--- /dev/null
+++ b/packages/react-docs/pages/components/color-mode/inverted-mode-tooltip.js
@@ -0,0 +1,25 @@
+import {
+  Divider,
+  InvertedMode,
+  Text,
+  Tooltip,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => {
+  return (
+    <Tooltip
+      label={(
+        <InvertedMode width={80} py="1x">
+          <Text>Title</Text>
+          <Divider my="2x" />
+          <Text>Content</Text>
+        </InvertedMode>
+      )}
+    >
+      <Text display="inline-block">Hover Me</Text>
+    </Tooltip>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-mode/inverted-mode.js b/packages/react-docs/pages/components/color-mode/inverted-mode.js
new file mode 100644
index 0000000000..395296ee07
--- /dev/null
+++ b/packages/react-docs/pages/components/color-mode/inverted-mode.js
@@ -0,0 +1,32 @@
+import {
+  Box,
+  InvertedMode,
+  Text,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const Component = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The current color mode is inverted to {colorMode} mode
+      </Text>
+    </Box>
+  );
+};
+
+const App = () => (
+  <InvertedMode>
+    <Component />
+  </InvertedMode>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-mode/inverted-mode.page.mdx b/packages/react-docs/pages/components/color-mode/inverted-mode.page.mdx
index a4937133cc..087927da30 100644
--- a/packages/react-docs/pages/components/color-mode/inverted-mode.page.mdx
+++ b/packages/react-docs/pages/components/color-mode/inverted-mode.page.mdx
@@ -10,47 +10,13 @@ import { InvertedMode } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx noInline
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      color={colorStyle.color.primary}
-    >
-      <Text px="4x" py="3x">
-        The current color mode is inverted to {colorMode} mode
-      </Text>
-    </Box>
-  );
-}
-
-render(
-  <InvertedMode>
-    <Example />
-  </InvetedMode>
-);
-```
+{render('./inverted-mode')}
 
 ### Rendering tooltip label
 
 The `InvertedMode` component is useful when you want to render a tooltip label in inverted mode.
 
-```jsx
-<Tooltip
-  label={(
-    <InvertedMode width={80} py="1x">
-      <Text>Title</Text>
-      <Divider my="2x" />
-      <Text>Content</Text>
-    </InvertedMode>
-  )}
->
-  <Text display="inline-block">Hover Me</Text>
-</Tooltip>
-```
+{render('./inverted-mode-tooltip')}
 
 ## Props
 
diff --git a/packages/react-docs/pages/components/color-mode/light-mode.js b/packages/react-docs/pages/components/color-mode/light-mode.js
new file mode 100644
index 0000000000..081bbd1287
--- /dev/null
+++ b/packages/react-docs/pages/components/color-mode/light-mode.js
@@ -0,0 +1,32 @@
+import {
+  Box,
+  LightMode,
+  Text,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const Component = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The color mode is set to {colorMode}
+      </Text>
+    </Box>
+  );
+};
+
+const App = () => (
+  <LightMode>
+    <Component />
+  </LightMode>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-mode/light-mode.page.mdx b/packages/react-docs/pages/components/color-mode/light-mode.page.mdx
index 55428d2d97..a8bdd58a16 100644
--- a/packages/react-docs/pages/components/color-mode/light-mode.page.mdx
+++ b/packages/react-docs/pages/components/color-mode/light-mode.page.mdx
@@ -10,29 +10,7 @@ import { LightMode } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx noInline
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      color={colorStyle.color.primary}
-    >
-      <Text px="4x" py="3x">
-        The color mode is set to {colorMode}
-      </Text>
-    </Box>
-  );
-}
-
-render(
-  <LightMode>
-    <Example />
-  </LightMode>
-);
-```
+{render('./light-mode')}
 
 ## Props
 
diff --git a/packages/react-docs/pages/components/color-style/useColorStyle.js b/packages/react-docs/pages/components/color-style/useColorStyle.js
index 0241142580..d558d694d8 100644
--- a/packages/react-docs/pages/components/color-style/useColorStyle.js
+++ b/packages/react-docs/pages/components/color-style/useColorStyle.js
@@ -9,7 +9,7 @@ import React from 'react';
 
 const App = () => {
   const [colorMode] = useColorMode();
-  const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
+  const [colorStyle] = useColorStyle({ colorMode });
   const invertedPrimaryColor = {
     dark: 'black:primary',
     light: 'white:primary',