From ce79949741997981cf744b637cc21fc50bccf420 Mon Sep 17 00:00:00 2001
From: Akash Gautam <akash3gtm@gmail.com>
Date: Thu, 16 Jan 2025 17:20:23 +0530
Subject: [PATCH 1/7] fix: spelling change

---
 .../tutorials/building-ecommerce-app/index.nw.stories.mdx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx b/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx
index b8a593793..bb74f54fd 100644
--- a/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx
@@ -11,6 +11,6 @@ import VadimStream from '../../../extra-components/nativewind/VadimStream';
 
 # Learn about gluestack from Youtube guru [notJust.dev](https://www.youtube.com/@notjustdev)
 
-Vadim, popularly known as "not-just-dev" on YouTube, offers insightful and practical videos that explore a wide range of developer tools and frameworks, including Gluestack-UI.
+Vadim, popularly known as "not-just-dev" on YouTube, offers insightful and practical videos that explore a wide range of developer tools and frameworks, including gluestack-ui.
 
 <VadimStream />

From 5d67dcb65ce93f243b0b3db2b4896163eebddd94 Mon Sep 17 00:00:00 2001
From: Akash Gautam <akash3gtm@gmail.com>
Date: Thu, 16 Jan 2025 17:21:19 +0530
Subject: [PATCH 2/7] fix: spelling change

---
 .../tutorials/building-ecommerce-app/index.nw.stories.mdx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx b/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx
index bb74f54fd..1e3c6a162 100644
--- a/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx
@@ -9,7 +9,7 @@ import VadimStream from '../../../extra-components/nativewind/VadimStream';
 
 <Meta title="with-nativewind/Guides/Tutorials/Building Ecommerce App" />
 
-# Learn about gluestack from Youtube guru [notJust.dev](https://www.youtube.com/@notjustdev)
+# Learn about gluestack from YouTube guru [notJust.dev](https://www.youtube.com/@notjustdev)
 
 Vadim, popularly known as "not-just-dev" on YouTube, offers insightful and practical videos that explore a wide range of developer tools and frameworks, including gluestack-ui.
 

From b352ce5968725ee94f9cc876fbb4cd18fbcbde29 Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Thu, 23 Jan 2025 15:55:23 +0530
Subject: [PATCH 3/7] feat: added script to add imports in component examples

---
 .../scripts/componentsImportList.js           | 247 +++++++++++++++
 .../scripts/update-mdx.js                     | 288 ++++++++++++++++++
 example/storybook-nativewind/src/utils.ts     |   7 +-
 3 files changed, 540 insertions(+), 2 deletions(-)
 create mode 100644 example/storybook-nativewind/scripts/componentsImportList.js
 create mode 100644 example/storybook-nativewind/scripts/update-mdx.js

diff --git a/example/storybook-nativewind/scripts/componentsImportList.js b/example/storybook-nativewind/scripts/componentsImportList.js
new file mode 100644
index 000000000..859289d8a
--- /dev/null
+++ b/example/storybook-nativewind/scripts/componentsImportList.js
@@ -0,0 +1,247 @@
+export const componentsImportMap = {
+  'accordion': [
+    'Accordion',
+    'AccordionItem',
+    'AccordionHeader',
+    'AccordionTrigger',
+    'AccordionTitleText',
+    'AccordionContentText',
+    'AccordionIcon',
+    'AccordionContent',
+  ],
+  'actionsheet': [
+    'Actionsheet',
+    'ActionsheetContent',
+    'ActionsheetItem',
+    'ActionsheetItemText',
+    'ActionsheetDragIndicator',
+    'ActionsheetDragIndicatorWrapper',
+    'ActionsheetBackdrop',
+    'ActionsheetScrollView',
+    'ActionsheetVirtualizedList',
+    'ActionsheetFlatList',
+    'ActionsheetSectionList',
+    'ActionsheetSectionHeaderText',
+    'ActionsheetIcon',
+  ],
+  'bottomsheet': [
+    'BottomSheet',
+    'BottomSheetPortal',
+    'BottomSheetTrigger',
+    'BottomSheetBackdrop',
+    'BottomSheetDragIndicator',
+    'BottomSheetContent',
+    'BottomSheetItem',
+    'BottomSheetItemText',
+    'BottomSheetScrollView',
+    'BottomSheetFlatList',
+    'BottomSheetSectionList',
+    'BottomSheetTextInput',
+  ],
+  'alert': ['Alert', 'AlertText', 'AlertIcon'],
+  'alert-dialog': [
+    'AlertDialog',
+    'AlertDialogContent',
+    'AlertDialogCloseButton',
+    'AlertDialogHeader',
+    'AlertDialogFooter',
+    'AlertDialogBody',
+    'AlertDialogBackdrop',
+  ],
+  'avatar': [
+    'Avatar',
+    'AvatarBadge',
+    'AvatarFallbackText',
+    'AvatarImage',
+    'AvatarGroup',
+  ],
+  'badge': ['Badge', 'BadgeIcon', 'BadgeText'],
+  'box': ['Box'],
+  'button': [
+    'Button',
+    'ButtonText',
+    'ButtonSpinner',
+    'ButtonIcon',
+    'ButtonGroup',
+  ],
+  'card': ['Card'],
+  'center': ['Center'],
+  'checkbox': [
+    'Checkbox',
+    'CheckboxIndicator',
+    'CheckboxLabel',
+    'CheckboxIcon',
+    'CheckboxGroup',
+  ],
+  'divider': ['Divider'],
+  'drawer': [
+    'Drawer',
+    'DrawerBackdrop',
+    'DrawerContent',
+    'DrawerCloseButton',
+    'DrawerHeader',
+    'DrawerBody',
+    'DrawerFooter',
+  ],
+  'fab': ['Fab', 'FabLabel', 'FabIcon'],
+  'flat-list': ['FlatList'],
+  'form-control': [
+    'FormControl',
+    'FormControlError',
+    'FormControlErrorText',
+    'FormControlErrorIcon',
+    'FormControlLabel',
+    'FormControlLabelText',
+    'FormControlLabelAstrick',
+    'FormControlHelper',
+    'FormControlHelperText',
+  ],
+  'grid': ['Grid', 'GridItem'],
+  'gluestack-ui-provider': ['GluestackUIProvider'],
+  'heading': ['Heading'],
+  'hstack': ['HStack'],
+  'image': ['Image'],
+  'image-background': ['ImageBackground'],
+  'image-viewer': [
+    'ImageViewer',
+    'ImageViewerBackdrop',
+    'ImageViewerContent',
+    'ImageViewerImage',
+    'ImageViewerCloseButton',
+  ],
+  'input': ['Input', 'InputField', 'InputIcon', 'InputSlot'],
+  'input-accessory-view': ['InputAccessoryView'],
+  'keyboard-avoiding-view': ['KeyboardAvoidingView'],
+  'link': ['Link', 'LinkText'],
+  'menu': ['Menu', 'MenuItem', 'MenuItemLabel', 'MenuSeparator'],
+  'modal': [
+    'Modal',
+    'ModalBackdrop',
+    'ModalContent',
+    'ModalCloseButton',
+    'ModalHeader',
+    'ModalBody',
+    'ModalFooter',
+  ],
+  'pin-input': ['PinInput', 'PinInputField'],
+  'popover': [
+    'Popover',
+    'PopoverBackdrop',
+    'PopoverArrow',
+    'PopoverCloseButton',
+    'PopoverFooter',
+    'PopoverHeader',
+    'PopoverBody',
+    'PopoverContent',
+  ],
+  'pressable': ['Pressable'],
+  'progress': ['Progress', 'ProgressFilledTrack'],
+  'radio': ['Radio', 'RadioGroup', 'RadioIndicator', 'RadioLabel', 'RadioIcon'],
+  'refresh-control': ['RefreshControl'],
+  'safe-area-view': ['SafeAreaView'],
+  'scroll-view': ['ScrollView'],
+  'section-list': ['SectionList'],
+  'select': [
+    'Select',
+    'SelectTrigger',
+    'SelectInput',
+    'SelectIcon',
+    'SelectPortal',
+    'SelectBackdrop',
+    'SelectContent',
+    'SelectDragIndicator',
+    'SelectDragIndicatorWrapper',
+    'SelectItem',
+    'SelectItemText',
+    'SelectScrollView',
+    'SelectVirtualizedList',
+    'SelectFlatList',
+    'SelectSectionList',
+    'SelectSectionHeaderText',
+  ],
+  'skeleton': ['Skeleton', 'SkeletonText'],
+  'slider': ['Slider', 'SliderThumb', 'SliderTrack', 'SliderFilledTrack'],
+  'spinner': ['Spinner'],
+  'statusbar': ['StatusBar'],
+  'switch': ['Switch'],
+  'table': [
+    'Table',
+    'TableHeader',
+    'TableBody',
+    'TableFooter',
+    'TableHead',
+    'TableRow',
+    'TableData',
+    'TableCaption',
+  ],
+  'text': ['Text'],
+  'textarea': ['Textarea', 'TextareaInput'],
+  'toast': ['useToast', 'Toast', 'ToastTitle', 'ToastDescription'],
+  'tooltip': ['Tooltip', 'TooltipContent', 'TooltipText'],
+  'view': ['View'],
+  'virtualized-list': ['VirtualizedList'],
+  'vstack': ['VStack'],
+  'icon': [
+    'Icon',
+    'createIcon',
+    'AddIcon',
+    'AlertCircleIcon',
+    'ArrowUpIcon',
+    'ArrowDownIcon',
+    'ArrowRightIcon',
+    'ArrowLeftIcon',
+    'AtSignIcon',
+    'BellIcon',
+    'CalendarDaysIcon',
+    'CheckIcon',
+    'CheckCircleIcon',
+    'ChevronUpIcon',
+    'ChevronDownIcon',
+    'ChevronLeftIcon',
+    'ChevronRightIcon',
+    'ChevronsLeftIcon',
+    'ChevronsRightIcon',
+    'ChevronsUpDownIcon',
+    'CircleIcon',
+    'ClockIcon',
+    'CloseIcon',
+    'CloseCircleIcon',
+    'CopyIcon',
+    'DownloadIcon',
+    'EditIcon',
+    'EyeIcon',
+    'EyeOffIcon',
+    'FavouriteIcon',
+    'GlobeIcon',
+    'GripVerticalIcon',
+    'HelpCircleIcon',
+    'InfoIcon',
+    'LinkIcon',
+    'ExternalLinkIcon',
+    'LoaderIcon',
+    'LockIcon',
+    'MailIcon',
+    'MenuIcon',
+    'MessageCircleIcon',
+    'MoonIcon',
+    'PaperclipIcon',
+    'PhoneIcon',
+    'PlayIcon',
+    'RemoveIcon',
+    'RepeatIcon',
+    'Repeat1Icon',
+    'SearchIcon',
+    'SettingsIcon',
+    'ShareIcon',
+    'SlashIcon',
+    'StarIcon',
+    'SunIcon',
+    'ThreeDotsIcon',
+    'TrashIcon',
+    'UnlockIcon',
+  ],
+  'tailwindcss/colors': ['colors'],
+  'react-native': ['Platform'],
+  'react': ['React'],
+  'react-native-svg': ['Path', 'Rect'],
+};
diff --git a/example/storybook-nativewind/scripts/update-mdx.js b/example/storybook-nativewind/scripts/update-mdx.js
new file mode 100644
index 000000000..fd44c4efb
--- /dev/null
+++ b/example/storybook-nativewind/scripts/update-mdx.js
@@ -0,0 +1,288 @@
+// this script is used to add imports to all the examples of the components.
+const fs = require('fs');
+const path = require('path');
+const { parse } = require('@babel/parser');
+const traverse = require('@babel/traverse').default;
+const { componentsImportMap } = require('./componentsImportList');
+
+function removeEmptyLines(code) {
+  return code
+    .split('\n')
+    .filter((line) => line.trim() !== '')
+    .join('\n');
+}
+
+function removeComments(code) {
+  // Remove only JSX comments wrapped in curly braces
+  code = code.replace(/{\s*\/\*[\s\S]*?\*\/\s*}|{\s*\/\/.*?\s*}/g, '');
+
+  const cleanedCode = removeEmptyLines(code);
+  return cleanedCode;
+}
+
+function hasExistingImports(code) {
+  const importRegex = /^\s*import\s+.*?['"].*?['"]\s*;?\s*$/gm;
+  return importRegex.test(code);
+}
+
+// Function to extract code blocks from MDX content
+function extractCodeBlocks(mdxContent) {
+  const codeBlockRegex = /code: `([\s\S]*?)`/g;
+  const matches = [];
+  let match;
+
+  while ((match = codeBlockRegex.exec(mdxContent)) !== null) {
+    matches.push({
+      fullMatch: match[0],
+      codeContent: match[1],
+      startIndex: match.index,
+      endIndex: match.index + match[0].length,
+    });
+  }
+
+  return matches;
+}
+
+// Updated component extraction function using the provided logic
+function extractComponents(code) {
+  const controller = require('jscodeshift');
+  const ast = controller(code);
+  const componentsList = new Set();
+  const codeVariables = [];
+
+  ast.find(controller.VariableDeclaration).forEach((item) => {
+    codeVariables.push(item.value.declarations[0].id.name);
+  });
+
+  ast.find(controller.JSXIdentifier).forEach((item) => {
+    if (item.parentPath.name === 'openingElement') {
+      componentsList.add(item.value.name);
+    }
+  });
+
+  ast.find(controller.JSXAttribute).forEach((item) => {
+    if (item.value.name.name === 'as' && item.value.value.expression.name) {
+      componentsList.add(item.value.value.expression.name);
+    }
+  });
+
+  ast.find(controller.ConditionalExpression).forEach((item) => {
+    if (item.value.consequent?.name) {
+      componentsList.add(item.value.consequent.name);
+    }
+    if (item.value.alternate?.name) {
+      if (item.value.alternate.name !== 'undefined') {
+        componentsList.add(item.value.alternate.name);
+      }
+    }
+  });
+
+  ast.find(controller.Identifier).forEach((item) => {
+    const specialIdentifiers = [
+      'React',
+      'Platform',
+      'colors',
+      'useToast',
+      'createIcon',
+    ];
+    if (specialIdentifiers.includes(item.value.name)) {
+      componentsList.add(item.value.name);
+    }
+  });
+
+  return Array.from(componentsList).filter(
+    (element) => !codeVariables.includes(element)
+  );
+}
+
+// Updated import generation function using the provided logic
+function generateImports(componentsList) {
+  const controller = require('jscodeshift');
+
+  const matchedComponentsImport = Object.entries(componentsImportMap)
+    .map(([key, value]) => {
+      const filteredComponents = value.filter((item) =>
+        componentsList.includes(item)
+      );
+
+      if (filteredComponents.length > 0) {
+        return { [key]: filteredComponents };
+      }
+      return undefined;
+    })
+    .filter((item) => item !== undefined);
+
+  const leftComponents = componentsList.filter(
+    (component) =>
+      !matchedComponentsImport.some((entry) =>
+        Object.values(entry)[0].includes(component)
+      )
+  );
+
+  const allComponentsImport =
+    leftComponents?.length > 0
+      ? [
+          ...matchedComponentsImport,
+          { ['lucide-react-native']: leftComponents },
+        ]
+      : [...matchedComponentsImport];
+
+  return allComponentsImport
+    .map((entry) => {
+      const [key, value] = Object.entries(entry)[0];
+      const importPath = (() => {
+        switch (key) {
+          case 'react':
+            return key;
+          case 'react-native':
+            return key;
+          case 'tailwindcss/colors':
+            return key;
+          case 'lucide-react-native':
+            return key;
+          case 'react-native-svg':
+            return key;
+          default:
+            return `@/components/ui/${key}`;
+        }
+      })();
+
+      if (key === 'react' || key === 'tailwindcss/colors') {
+        return `import ${value[0]} from "${importPath}";`;
+      } else {
+        return `import { ${value.join(', ')} } from "${importPath}";`;
+      }
+    })
+    .join('\n');
+}
+
+// Function to check if code needs wrapping
+function needsComponentWrapping(code) {
+  // First, check if code already has a function or component structure
+  const hasFunction = /function\s+\w+\s*\([^)]*\)/.test(code);
+  const hasConstFunction = /const\s+\w+\s*=\s*(\([^)]*\)\s*=>|function)/.test(
+    code
+  );
+  const hasExportDefault = /export\s+default\s+/.test(code);
+
+  // If it already has any of these structures, don't wrap it
+  if (hasFunction || hasConstFunction || hasExportDefault) {
+    return false;
+  }
+
+  // Check if code contains JSX or starts with return
+  const containsJSX = /<[A-Z][A-Za-z0-9]*/.test(code) || /<[a-z]+>/.test(code);
+  const startsWithReturn = /^\s*return\s*[({]/.test(code);
+
+  // Code needs wrapping if it contains JSX or starts with return
+  return containsJSX || startsWithReturn;
+}
+
+// Function to wrap code in functional component
+function wrapInFunctionalComponent(code) {
+  return `function Example() {
+  return (
+    ${code}
+  );
+}`;
+}
+
+// Function to update transformCode parameter
+function updateTransformCode(mdxContent, blockStartIndex) {
+  const transformCodeRegex =
+    /transformCode:\s*\(code\)\s*=>\s*{\s*return\s*transformedCode\(code[^}]*\);\s*}/;
+  const match = mdxContent.slice(blockStartIndex).match(transformCodeRegex);
+
+  if (match) {
+    const newTransformCode = `transformCode: (code) => {
+        return transformedCode(code, 'function', 'Example');
+      }`;
+    return (
+      mdxContent.slice(0, blockStartIndex + match.index) +
+      newTransformCode +
+      mdxContent.slice(blockStartIndex + match.index + match[0].length)
+    );
+  }
+
+  return mdxContent;
+}
+
+// Function to update a single MDX file
+function updateMDXFile(filePath) {
+  try {
+    let mdxContent = fs.readFileSync(filePath, 'utf8');
+    const codeBlocks = extractCodeBlocks(mdxContent);
+
+    for (let i = codeBlocks.length - 1; i >= 0; i--) {
+      const block = codeBlocks[i];
+      let processedCode = block.codeContent.trim();
+
+      // First check if imports exist
+      if (hasExistingImports(processedCode)) {
+        continue; // Skip this code block if imports exist
+      }
+
+      // Then check and handle functional component wrapping
+      const needsWrapping = needsComponentWrapping(processedCode);
+      if (needsWrapping) {
+        processedCode = wrapInFunctionalComponent(processedCode);
+        mdxContent = updateTransformCode(mdxContent, block.startIndex);
+      }
+
+      // Finally, generate and add imports
+      const components = extractComponents(processedCode);
+      const imports = generateImports(components);
+
+      // Remove comments from the code
+      processedCode = removeComments(processedCode);
+
+      // Combine imports with processed code
+      const newCodeContent = `code: \`${imports}${
+        imports ? '\n' : ''
+      }${processedCode}\``;
+
+      mdxContent =
+        mdxContent.slice(0, block.startIndex) +
+        newCodeContent +
+        mdxContent.slice(block.endIndex);
+    }
+
+    fs.writeFileSync(filePath, mdxContent);
+    // eslint-disable-next-line no-console
+    console.log(`✅ Updated ${path.basename(filePath)}`);
+    // eslint-disable-next-line no-console
+    console.log('📁 File path:', path.dirname(filePath));
+  } catch (error) {
+    console.error(`❌ Error processing ${filePath}:`, error);
+  }
+}
+
+// Function to process all component MDX files
+function processAllComponents(componentsDir) {
+  //to test single component
+  // const componentName = 'accordion';
+  // const mdxPath = path.join(
+  //   componentsDir,
+  //   componentName,
+  //   'index.nw.stories.mdx'
+  // );
+  // if (fs.existsSync(mdxPath)) {
+  //   updateMDXFile(mdxPath);
+  // }
+  const components = fs.readdirSync(componentsDir);
+
+  components.forEach((component) => {
+    const mdxPath = path.join(componentsDir, component, 'index.nw.stories.mdx');
+    if (fs.existsSync(mdxPath)) {
+      updateMDXFile(mdxPath);
+    }
+  });
+}
+
+// Main execution
+const componentsDir = path.join(__dirname, '../src/components');
+// eslint-disable-next-line no-console
+console.log('🚀 Starting MDX update process...');
+processAllComponents(componentsDir);
+// eslint-disable-next-line no-console
+console.log('✨ MDX update process completed!');
diff --git a/example/storybook-nativewind/src/utils.ts b/example/storybook-nativewind/src/utils.ts
index 56733c4c0..8e1ceddfa 100644
--- a/example/storybook-nativewind/src/utils.ts
+++ b/example/storybook-nativewind/src/utils.ts
@@ -4,14 +4,17 @@ export function transformedCode(
   type: 'jsx' | 'function' = 'jsx',
   componentName?: string
 ) {
+  let codeFormat = code;
+  const importRegex = /import[^;]*;/g;
+  codeFormat = codeFormat.replace(importRegex, '');
   if (type === 'function') {
     return `function App() {
-      ${code}
+      ${codeFormat}
     return <Wrapper><${componentName} /></Wrapper>;
   };`;
   }
   return `function App() {
-    return <Wrapper>${code}</Wrapper>;
+    return <Wrapper>${codeFormat}</Wrapper>;
   };`;
 }
 

From 08b2f2f6a53dcde371dd92d083226dcb7df9e9ec Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Thu, 23 Jan 2025 16:15:23 +0530
Subject: [PATCH 4/7] feat: updated script to add space between imports and the
 codebase

---
 example/storybook-nativewind/scripts/update-mdx.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/example/storybook-nativewind/scripts/update-mdx.js b/example/storybook-nativewind/scripts/update-mdx.js
index fd44c4efb..720df210b 100644
--- a/example/storybook-nativewind/scripts/update-mdx.js
+++ b/example/storybook-nativewind/scripts/update-mdx.js
@@ -219,6 +219,13 @@ function updateMDXFile(filePath) {
 
       // First check if imports exist
       if (hasExistingImports(processedCode)) {
+        // Add space after imports if needed
+        processedCode = processedCode.replace(/function/g, '\t\nfunction');
+        const newCodeContent = `code: \`${processedCode}\``;
+        mdxContent =
+          mdxContent.slice(0, block.startIndex) +
+          newCodeContent +
+          mdxContent.slice(block.endIndex);
         continue; // Skip this code block if imports exist
       }
 

From 4045d8f0b40fa962c89bbeb1177b1e98c7b17162 Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Thu, 23 Jan 2025 16:27:15 +0530
Subject: [PATCH 5/7] feat: added imports to all the docs component examples

---
 .../components/Accordion/index.nw.stories.mdx |  63 +++++----
 .../Actionsheet/index.nw.stories.mdx          | 122 ++++++++++++-----
 .../src/components/Alert/index.nw.stories.mdx |  76 ++++++++---
 .../AlertDialog/index.nw.stories.mdx          |  57 +++++---
 .../components/Avatar/index.nw.stories.mdx    | 129 ++++++++++++------
 .../src/components/Badge/index.nw.stories.mdx |  46 +++++--
 .../src/components/Box/index.nw.stories.mdx   |  15 +-
 .../components/Button/index.nw.stories.mdx    |  85 ++++++++----
 .../src/components/Card/index.nw.stories.mdx  |  61 +++++++--
 .../components/Center/index.nw.stories.mdx    |  13 +-
 .../components/Checkbox/index.nw.stories.mdx  | 103 +++++++++-----
 .../components/Divider/index.nw.stories.mdx   |  74 +++++++---
 .../components/Drawer/index.nw.stories.mdx    |  53 ++++---
 .../src/components/Fab/index.nw.stories.mdx   |  86 +++++++++---
 .../FormControl/index.nw.stories.mdx          |  79 +++++++----
 .../src/components/Grid/index.nw.stories.mdx  |  70 ++++++----
 .../components/HStack/index.nw.stories.mdx    |  26 ++--
 .../components/Heading/index.nw.stories.mdx   |  21 +--
 .../src/components/Icon/index.nw.stories.mdx  |  51 ++++---
 .../src/components/Image/index.nw.stories.mdx |  26 ++--
 .../ImageViewer/index.nw.stories.mdx          |  28 ++--
 .../src/components/Input/index.nw.stories.mdx |  40 ++++--
 .../src/components/Link/index.nw.stories.mdx  |  56 +++++---
 .../src/components/Menu/index.nw.stories.mdx  |  40 ++++--
 .../src/components/Modal/index.nw.stories.mdx |  92 +++++++++----
 .../components/PinInput/index.nw.stories.mdx  |  21 +--
 .../components/Popover/index.nw.stories.mdx   |  71 +++++++---
 .../components/Portal/index.nw.stories.mdx    |  13 +-
 .../components/Pressable/index.nw.stories.mdx |  24 +++-
 .../components/Progress/index.nw.stories.mdx  |  55 +++++---
 .../src/components/Radio/index.nw.stories.mdx | 109 ++++++++++-----
 .../components/Select/index.nw.stories.mdx    |  27 ++--
 .../components/Skeleton/index.nw.stories.mdx  |  32 +++--
 .../components/Slider/index.nw.stories.mdx    |  13 +-
 .../components/Spinner/index.nw.stories.mdx   |  42 ++++--
 .../components/Switch/index.nw.stories.mdx    |  43 ++++--
 .../src/components/Table/index.nw.stories.mdx |  40 ++++--
 .../src/components/Text/index.nw.stories.mdx  |  21 +--
 .../components/Textarea/index.nw.stories.mdx  |  25 ++--
 .../src/components/Toast/index.nw.stories.mdx |  68 ++++++---
 .../components/Tooltip/index.nw.stories.mdx   |  41 ++++--
 .../components/VStack/index.nw.stories.mdx    |  26 ++--
 42 files changed, 1523 insertions(+), 660 deletions(-)

diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
index ecf1c8753..38fbfdc89 100644
--- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
@@ -55,8 +55,13 @@ This is an illustration of **Accordion** component.
       justifyContent: 'stretch',
     }}
     metaData={{
-      code: `
-      <Accordion {...props} className="m-5 w-[90%] border border-outline-200">
+      code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion";
+import { Divider } from "@/components/ui/divider";
+import { ChevronUpIcon, ChevronDownIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Accordion {...props} className="m-5 w-[90%] border border-outline-200">
         <AccordionItem value="a">
           <AccordionHeader>
             <AccordionTrigger>
@@ -112,9 +117,10 @@ This is an illustration of **Accordion** component.
           </AccordionContent>
         </AccordionItem>
         </Accordion>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Accordion,
@@ -497,7 +503,9 @@ The following example demonstrates how easily you can customize the Accordion co
       justifyContent: 'stretch',
     }}
     metaData={{
-      code: `
+      code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion";
+import { ChevronUpIcon, ChevronDownIcon } from "@/components/ui/icon";
+	
 function App(){
     return (
       <Accordion
@@ -604,8 +612,7 @@ function App(){
       </AccordionItem>
     </Accordion>
 );
-}
-`,
+}`,
 transformCode: (code) => {
 return transformedCode(code, 'function', 'App');
 },
@@ -640,7 +647,9 @@ The borderRadius prop can be used to create rounded corners for both the Accordi
       justifyContent: 'stretch',
     }}
     metaData={{
-      code: `
+      code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion";
+import { MinusIcon, PlusIcon } from "lucide-react-native";
+	
 function App(){
     return (
           <Accordion className="m-5 w-[80%] max-w-[640px] bg-transparent">
@@ -701,8 +710,7 @@ function App(){
       </AccordionItem>
     </Accordion>
 );
-}
-`,
+}`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -736,7 +744,9 @@ You can disable an item by setting the isDisabled prop to true. This will preven
       justifyContent: 'stretch',
     }}
     metaData={{
-      code: `
+      code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion";
+import { MinusIcon, PlusIcon } from "lucide-react-native";
+	
 function App(){
     return (
           <Accordion variant="unfilled" className="m-5 w-[90%]">
@@ -756,7 +766,6 @@ function App(){
                   ) : (
                     <AccordionIcon as={PlusIcon}  />
                   )}
-                
                 </>
               );
             }}
@@ -768,7 +777,6 @@ function App(){
           </AccordionContentText>
         </AccordionContent>
       </AccordionItem>
-   
       <AccordionItem value="item-2" >
         <AccordionHeader>
           <AccordionTrigger>
@@ -798,8 +806,7 @@ function App(){
       </AccordionItem>
     </Accordion>
 );
-}
-`,
+}`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -834,7 +841,10 @@ Use the defaultValue prop to define the open item by default.
       justifyContent: 'stretch',
     }}
     metaData={{
-      code: `
+      code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion";
+import { Divider } from "@/components/ui/divider";
+import { MinusIcon, PlusIcon } from "lucide-react-native";
+	
 function App(){
     return (
           <Accordion variant="unfilled" type="single" defaultValue="item-3" className="w-[90%] m-5">
@@ -852,7 +862,6 @@ function App(){
                   ) : (
                     <AccordionIcon as={PlusIcon}  />
                   )}
-                
                 </>
               );
             }}
@@ -920,8 +929,7 @@ function App(){
       </AccordionItem>
     </Accordion>
 );
-}
-`,
+}`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -956,7 +964,9 @@ You can nest Accordion components to create a nested accordion. This is useful w
       justifyContent: 'stretch',
     }}
     metaData={{
-      code: `
+      code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion";
+import { MinusIcon, PlusIcon } from "lucide-react-native";
+	
 function App(){
     return (
            <Accordion
@@ -1041,8 +1051,7 @@ function App(){
       </AccordionItem>
     </Accordion>
 );
-}
-`,
+}`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -1078,7 +1087,10 @@ You can make the Accordion component controlled by passing the value prop to the
       justifyContent: 'stretch',
     }}
     metaData={{
-      code: `
+      code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion";
+import React from "react";
+import { MinusIcon, PlusIcon } from "lucide-react-native";
+	
 function App(){
     const [selectedValues, setSelectedValues] = React.useState(['item-1', 'item-2']);
     return (
@@ -1098,7 +1110,6 @@ function App(){
                   ) : (
                     <AccordionIcon as={PlusIcon}  />
                   )}
-                
                 </>
               );
             }}
@@ -1110,7 +1121,6 @@ function App(){
           </AccordionContentText>
         </AccordionContent>
       </AccordionItem>
-   
       <AccordionItem value="item-2"
       >
         <AccordionHeader>
@@ -1166,8 +1176,7 @@ function App(){
       </AccordionItem>
     </Accordion>
 );
-}
-`,
+}`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
index 99e888701..02071ff94 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
@@ -76,8 +76,11 @@ This is an illustration of **Actionsheet** component.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App(){
+      code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop } from "@/components/ui/actionsheet";
+import { Button, ButtonText } from "@/components/ui/button";
+import React from "react";
+	
+function App(){
         const [showActionsheet, setShowActionsheet] = React.useState(false);
         const handleClose = () => setShowActionsheet(false);
           return (
@@ -110,8 +113,7 @@ This is an illustration of **Actionsheet** component.
               </Actionsheet>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -554,8 +556,21 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Actionsheet, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop } from "@/components/ui/actionsheet";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { FormControl, FormControlLabel, FormControlLabelText } from "@/components/ui/form-control";
+import { HStack } from "@/components/ui/hstack";
+import { Image } from "@/components/ui/image";
+import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
+import { KeyboardAvoidingView } from "@/components/ui/keyboard-avoiding-view";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Platform } from "react-native";
+import React from "react";
+import { CreditCardIcon } from "lucide-react-native";
+	
+function App(){
           const [showActionsheet, setShowActionsheet] = React.useState(false);
           const handleClose = () => setShowActionsheet(false);
             return (
@@ -611,8 +626,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
               </KeyboardAvoidingView>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -656,8 +670,20 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Actionsheet, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop } from "@/components/ui/actionsheet";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { FormControl, FormControlLabel, FormControlLabelText } from "@/components/ui/form-control";
+import { HStack } from "@/components/ui/hstack";
+import { Image } from "@/components/ui/image";
+import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
+import { KeyboardAvoidingView } from "@/components/ui/keyboard-avoiding-view";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import React from "react";
+import { CreditCardIcon } from "lucide-react-native";
+	
+function App(){
           const [showActionsheet, setShowActionsheet] = React.useState(false);
           const handleClose = () => setShowActionsheet(false);
             return (
@@ -721,8 +747,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
               </Actionsheet>
             </>
           )
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -768,8 +793,12 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetIcon } from "@/components/ui/actionsheet";
+import { Button, ButtonText } from "@/components/ui/button";
+import { ClockIcon, DownloadIcon, EditIcon, EyeOffIcon, TrashIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App(){
           const [showActionsheet, setShowActionsheet] = React.useState(false);
           const handleClose = () => setShowActionsheet(false);
             return (
@@ -807,8 +836,7 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp
                 </Actionsheet>
               </>
             );
-          }
-        `,
+          }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -844,7 +872,11 @@ The Actionsheet with Virtualized List includes a virtualized list for better per
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `function App(){
+      code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetVirtualizedList } from "@/components/ui/actionsheet";
+import { Button, ButtonText } from "@/components/ui/button";
+import React from "react";
+	
+function App(){
     const [showActionsheet, setShowActionsheet] = React.useState(false);
     const handleClose = () => setShowActionsheet(false);
     const data = React.useMemo(() => Array(50).fill(0).map((_, index) => 'Item' + index),[]);
@@ -885,8 +917,7 @@ The Actionsheet with Virtualized List includes a virtualized list for better per
       </Actionsheet>
     </>
 );
-}
-`,
+}`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -917,7 +948,11 @@ The Actionsheet with Flat List is a variation of the Actionsheet component that
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `function App(){
+      code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetFlatList } from "@/components/ui/actionsheet";
+import { Button, ButtonText } from "@/components/ui/button";
+import React from "react";
+	
+function App(){
     const [showActionsheet, setShowActionsheet] = React.useState(false);
     const handleClose = () => setShowActionsheet(false);
     const DATA = [
@@ -962,8 +997,7 @@ The Actionsheet with Flat List is a variation of the Actionsheet component that
       </Actionsheet>
     </>
 );
-}
-`,
+}`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -994,7 +1028,11 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `function App(){
+      code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetSectionList, ActionsheetSectionHeaderText } from "@/components/ui/actionsheet";
+import { Button, ButtonText } from "@/components/ui/button";
+import React from "react";
+	
+function App(){
     const [showActionsheet, setShowActionsheet] = React.useState(false);
     const handleClose = () => setShowActionsheet(false);
     const DATA = [
@@ -1033,8 +1071,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
       </Actionsheet>
     </>
 );
-}
-`,
+}`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -1064,8 +1101,19 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Actionsheet, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop } from "@/components/ui/actionsheet";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText, ButtonGroup } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Pressable } from "@/components/ui/pressable";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, CloseIcon } from "@/components/ui/icon";
+import React from "react";
+import { UploadCloud } from "lucide-react-native";
+	
+function App(){
           const [showActionsheet, setShowActionsheet] = React.useState(false);
           const handleClose = () => setShowActionsheet(false);
           return (
@@ -1114,8 +1162,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
               </Actionsheet>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -1155,8 +1202,18 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetIcon } from "@/components/ui/actionsheet";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { HStack } from "@/components/ui/hstack";
+import { Pressable } from "@/components/ui/pressable";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, CloseIcon } from "@/components/ui/icon";
+import React from "react";
+import { Send, Percent, DollarSign } from "lucide-react-native";
+	
+function App(){
           const [showActionsheet, setShowActionsheet] = React.useState(false);
           const handleClose = () => setShowActionsheet(false);
           return (
@@ -1235,8 +1292,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
               </Actionsheet>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
index 0e2785534..b440726c7 100644
--- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
@@ -55,16 +55,21 @@ This is an illustration of **Alert** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Alert {...props}>
+      code: `import { Alert, AlertText, AlertIcon } from "@/components/ui/alert";
+import { InfoIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Alert {...props}>
           <AlertIcon as={InfoIcon} />
           <AlertText>
             Description of alert!
           </AlertText>
         </Alert>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Alert,
@@ -243,8 +248,14 @@ The Examples section provides visual representations of the different variants o
       padding: 20
     }}
     metaData={{
-      code: `
-        <Alert
+      code: `import { Alert, AlertText } from "@/components/ui/alert";
+import { Button, ButtonText } from "@/components/ui/button";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, CloseIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Alert
           action="success"
           className="gap-4 max-w-[585px] w-full self-center items-start min-[400px]:items-center"
         >
@@ -258,9 +269,10 @@ The Examples section provides visual representations of the different variants o
           </VStack>
           <Icon as={CloseIcon} />
         </Alert>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Alert,
@@ -288,8 +300,16 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Alert
+      code: `import { Alert, AlertText, AlertIcon } from "@/components/ui/alert";
+import { Button, ButtonText } from "@/components/ui/button";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { RepeatIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Alert
           action="warning"
           className="gap-4 max-w-[516px] w-full flex-row flex py-4 items-start self-center"
         >
@@ -308,9 +328,10 @@ The Examples section provides visual representations of the different variants o
             </Button>
           </HStack>
         </Alert>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Alert,
@@ -339,9 +360,13 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Alert action="error" className="gap-3">
-          {/* Bomb is imported from 'lucide-react-native' */}
+      code: `import { Alert, AlertText, AlertIcon } from "@/components/ui/alert";
+import { Text } from "@/components/ui/text";
+import { Bomb } from "lucide-react-native";
+	
+function Example() {
+  return (
+    <Alert action="error" className="gap-3">
           <AlertIcon as={Bomb} size="lg" />
           <AlertText className="text-typography-900" size="sm">
             <Text className="mr-2 font-semibold text-typography-900">
@@ -350,9 +375,10 @@ The Examples section provides visual representations of the different variants o
             Once done, this action cannot be undone
           </AlertText>
         </Alert>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Alert,
@@ -377,8 +403,16 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function Example() {
+      code: `import { Alert, AlertText, AlertIcon } from "@/components/ui/alert";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { EyeIcon, EyeOffIcon, InfoIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function Example() {
           const [showPassword, setShowPassword] = React.useState(false);
           const handleState = () => {
             setShowPassword((showState) => {
@@ -398,7 +432,6 @@ The Examples section provides visual representations of the different variants o
                     placeholder="Enter password"
                   />
                   <InputSlot className="mr-3" onPress={handleState}>
-                    {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */}
                     <InputIcon
                       size="xs"
                       as={showPassword ? EyeIcon : EyeOffIcon}
@@ -419,8 +452,7 @@ The Examples section provides visual representations of the different variants o
               </Alert>
             </VStack>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
index 2ba955929..ef2cc8781 100644
--- a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
@@ -58,8 +58,13 @@ This is an illustration of **AlertDialog** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        function Example(){
+      code: `import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogBody, AlertDialogBackdrop } from "@/components/ui/alert-dialog";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import React from "react";
+	
+function Example(){
           const [showAlertDialog, setShowAlertDialog] = React.useState(false);
           const handleClose = () => setShowAlertDialog(false);
           return (
@@ -101,8 +106,7 @@ This is an illustration of **AlertDialog** component.
               </AlertDialog>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
@@ -492,8 +496,16 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function Example(){
+      code: `import { AlertDialog, AlertDialogContent, AlertDialogBody, AlertDialogBackdrop } from "@/components/ui/alert-dialog";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Image } from "@/components/ui/image";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import React from "react";
+	
+function Example(){
           const [showAlertDialog, setShowAlertDialog] = React.useState(false);
           const handleClose = () => setShowAlertDialog(false);
           return (
@@ -538,8 +550,7 @@ The Examples section provides visual representations of the different variants o
               </AlertDialog>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
@@ -572,8 +583,17 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function Example(){
+      code: `import { AlertDialog, AlertDialogContent, AlertDialogFooter, AlertDialogBody, AlertDialogBackdrop } from "@/components/ui/alert-dialog";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon } from "@/components/ui/icon";
+import React from "react";
+import { UploadCloud } from "lucide-react-native";
+	
+function Example(){
           const [showAlertDialog, setShowAlertDialog] = React.useState(false);
           const handleClose = () => setShowAlertDialog(false);
           return (
@@ -622,8 +642,7 @@ The Examples section provides visual representations of the different variants o
               </AlertDialog>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
@@ -657,8 +676,15 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function Example(){
+      code: `import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogBody, AlertDialogBackdrop } from "@/components/ui/alert-dialog";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { Icon, TrashIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function Example(){
           const [showAlertDialog, setShowAlertDialog] = React.useState(false);
           const handleClose = () => setShowAlertDialog(false);
           return (
@@ -704,8 +730,7 @@ The Examples section provides visual representations of the different variants o
               </AlertDialog>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
diff --git a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
index bb5088151..5cd6fa1e2 100644
--- a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
@@ -48,8 +48,11 @@ This is an illustration of **Avatar** component.
       showComponentRenderer={ true }
     showArgsController = { true}
     metaData = {{
-      code: `
-        <Avatar {...props}>
+      code: `import { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar";
+	
+function Example() {
+  return (
+    <Avatar {...props}>
           <AvatarFallbackText>Jane Doe</AvatarFallbackText>
         <AvatarImage
           source={{
@@ -58,10 +61,11 @@ This is an illustration of **Avatar** component.
         />
         <AvatarBadge />
         </Avatar>
-      `,
+  );
+}`,
         transformCode: (code) => {
-          return transformedCode(code);
-        },
+        return transformedCode(code, 'function', 'Example');
+      },
           scope: {
           Wrapper,
           Avatar,
@@ -240,7 +244,14 @@ An Avatar component with text displays a stylized representation of a user or en
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Avatar, AvatarBadge, AvatarFallbackText } from "@/components/ui/avatar";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
     <VStack space="2xl">
         <HStack space="md">
             <Avatar className='bg-indigo-600'>
@@ -262,9 +273,10 @@ An Avatar component with text displays a stylized representation of a user or en
         </VStack>
      </HStack>
     </VStack>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -291,11 +303,19 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <VStack space="2xl">
+      code: `import { Avatar } from "@/components/ui/avatar";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon } from "@/components/ui/icon";
+import { User } from "lucide-react-native";
+	
+function Example() {
+  return (
+    <VStack space="2xl">
             <HStack space="md">
               <Avatar className='bg-indigo-600'>
-                {/* User is imported from 'lucide-react-native' */}
                 <Icon as={User} size="lg" className="stroke-white" />
               </Avatar>
               <VStack >
@@ -305,7 +325,6 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
             </HStack>
             <HStack space="md">
                 <Avatar className='bg-pink-600'>
-                 {/* User is imported from 'lucide-react-native' */}
                 <Icon as={User} size="lg" className="stroke-white" />
                 </Avatar>
                 <VStack >
@@ -314,9 +333,10 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
                 </VStack>
           </HStack>
         </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -345,8 +365,15 @@ An Avatar component with an image incorporates a user or entity representation u
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <VStack space="2xl">
+      code: `import { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
+    <VStack space="2xl">
           <HStack space="md">
             <Avatar>
               <AvatarFallbackText>SS</AvatarFallbackText>
@@ -377,9 +404,10 @@ An Avatar component with an image incorporates a user or entity representation u
             </VStack>
           </HStack>
         </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -408,8 +436,9 @@ The avatar group allows users to group avatars and display them in a horizontal
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Avatar, AvatarFallbackText, AvatarGroup } from "@/components/ui/avatar";
+	
+function App(){
           const avatars = [
               { src: 'https://example.com.jpg', alt: 'Sandeep Srivastva', color:'bg-emerald-600' },
               { src: 'https://example.com.jpg', alt: 'Arjun Kapoor', color:'bg-cyan-600' },
@@ -433,8 +462,7 @@ The avatar group allows users to group avatars and display them in a horizontal
               </Avatar>
             </AvatarGroup>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -461,8 +489,11 @@ An Avatar Group component without badges organizes multiple avatars in a visuall
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <AvatarGroup>
+      code: `import { Avatar, AvatarFallbackText, AvatarImage, AvatarGroup } from "@/components/ui/avatar";
+	
+function Example() {
+  return (
+    <AvatarGroup>
           <Avatar size="md">
             <AvatarFallbackText>John Doe</AvatarFallbackText>
             <AvatarImage
@@ -496,9 +527,10 @@ An Avatar Group component without badges organizes multiple avatars in a visuall
             />
           </Avatar>
         </AvatarGroup>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Avatar,
@@ -523,8 +555,11 @@ An Avatar Group component with badges presents a collection of avatars with acco
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <AvatarGroup>
+      code: `import { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage, AvatarGroup } from "@/components/ui/avatar";
+	
+function Example() {
+  return (
+    <AvatarGroup>
           <Avatar size="md">
             <AvatarFallbackText>John Doe</AvatarFallbackText>
             <AvatarImage
@@ -563,9 +598,10 @@ An Avatar Group component with badges presents a collection of avatars with acco
             <AvatarBadge />
           </Avatar>
         </AvatarGroup>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Avatar,
@@ -590,11 +626,19 @@ A custom Avatar component with text allows for personalized user or entity repre
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <VStack space="2xl">
+      code: `import { Avatar } from "@/components/ui/avatar";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon } from "@/components/ui/icon";
+import { User } from "lucide-react-native";
+	
+function Example() {
+  return (
+    <VStack space="2xl">
           <HStack space="md">
             <Avatar size="md" className='bg-indigo-300 border-2 border-indigo-600'>
-              {/* User is imported from 'lucide-react-native' */}
               <Icon as={User} size="xl" className='text-indigo-600' />
             </Avatar>
             <VStack  >
@@ -604,7 +648,6 @@ A custom Avatar component with text allows for personalized user or entity repre
           </HStack>
           <HStack space="md">
             <Avatar size="md" className='bg-pink-300 border-2 border-pink-600'>
-            {/* User is imported from 'lucide-react-native' */}
               <Icon as={User} size="xl" className='text-pink-600' />
             </Avatar>
             <VStack >
@@ -613,9 +656,10 @@ A custom Avatar component with text allows for personalized user or entity repre
             </VStack>
           </HStack>
         </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -644,8 +688,12 @@ Fallback text is shown when the image fails to load, the image is not available
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-     <HStack space="md">
+      code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar";
+import { HStack } from "@/components/ui/hstack";
+	
+function Example() {
+  return (
+    <HStack space="md">
           <Avatar size="md">
             <AvatarFallbackText>John Doe</AvatarFallbackText>
             <AvatarImage
@@ -655,9 +703,10 @@ Fallback text is shown when the image fails to load, the image is not available
             />
           </Avatar>
       </HStack>
-    `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Avatar,
diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
index 36cf57e44..0a9e1f17a 100644
--- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
@@ -62,14 +62,19 @@ This is an illustration of **Badge** component.
 <Wrapper>
   <CodePreview
     metaData={{
-      code: `
-        <Badge {...props}>
+      code: `import { Badge, BadgeIcon, BadgeText } from "@/components/ui/badge";
+import { GlobeIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Badge {...props}>
           <BadgeText>Verified</BadgeText>
           <BadgeIcon as={GlobeIcon} className="ml-2" />
         </Badge>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -255,8 +260,17 @@ An example of the Badge component being used with the Avatar component to displa
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <VStack space="2xl">
+      code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar";
+import { Badge, BadgeIcon, BadgeText } from "@/components/ui/badge";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { BadgeCheckIcon } from "lucide-react-native";
+	
+function Example() {
+  return (
+    <VStack space="2xl">
           <HStack space="md">
             <Avatar>
               <AvatarFallbackText>SS</AvatarFallbackText>
@@ -278,9 +292,10 @@ An example of the Badge component being used with the Avatar component to displa
             </VStack>
           </HStack>
         </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -310,8 +325,14 @@ An example of the Badge component being used with the Composition component, all
   <CodePreview
     showArgsController={false}
     metaData={{
-      code: `
-       <Box className='items-center'>
+      code: `import { Badge, BadgeText } from "@/components/ui/badge";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
+    <Box className='items-center'>
         <VStack>
           <Badge  
             className='z-10 self-end h-[22px] w-[22px] bg-red-600 rounded-full -mb-3.5 -mr-3.5'
@@ -326,9 +347,10 @@ An example of the Badge component being used with the Composition component, all
           </Button>
         </VStack>
     </Box>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
index dd0a82da1..d44afa1a8 100644
--- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
@@ -33,18 +33,23 @@ This is an illustration of **Box** component.
       showComponentRenderer={ true }
     showArgsController = { false}
     metaData = {{
-      code: `
-<Box
+      code: `import { Box } from "@/components/ui/box";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Box
   className="bg-primary-500 p-5"
 >
   <Text className='text-typography-0'>
     This is the Box
   </Text>
 </Box>
-`,
+  );
+}`,
         transformCode: (code) => {
-          return transformedCode(code);
-        },
+        return transformedCode(code, 'function', 'Example');
+      },
           scope: {
         Wrapper,
           Box,
diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
index d20b30b24..bba29803e 100644
--- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
@@ -54,13 +54,17 @@ This is an illustration of **Button** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Button {...props}>
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+	
+function Example() {
+  return (
+    <Button {...props}>
           <ButtonText>Hello World!</ButtonText>
         </Button>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Button, ButtonText, ButtonIcon, Wrapper },
       argsType: {
@@ -580,15 +584,19 @@ A loading button is a type of button component that provides visual feedback to
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Button className='p-3'>
-        {/* colors is imported from tailwindcss/colors */}
+      code: `import { Button, ButtonText, ButtonSpinner } from "@/components/ui/button";
+import colors from "tailwindcss/colors";
+	
+function Example() {
+  return (
+    <Button className='p-3'>
           <ButtonSpinner color={colors.gray[400]} />
           <ButtonText className='font-medium text-sm ml-2'>Please wait...</ButtonText>
         </Button>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Button, ButtonText, Wrapper, ButtonSpinner, colors },
       argsType: {},
@@ -605,16 +613,21 @@ A button with an icon integrates a visual symbol within the button component, en
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Button
+      code: `import { Button, ButtonIcon } from "@/components/ui/button";
+import { EditIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Button
       size='lg'
       className='rounded-full p-3.5'
     >
       <ButtonIcon as={EditIcon} />
     </Button>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Button, ButtonIcon, Wrapper, EditIcon },
       argsType: {},
@@ -631,17 +644,22 @@ A button with a link combines the interactive behavior of a button component wit
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Button variant='link'>
+      code: `import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
+import { ArrowUpIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Button variant='link'>
           <ButtonText className='font-medium text-sm text-typography-900' >
             Back to top
           </ButtonText>
           <ButtonIcon as={ArrowUpIcon}
            className='h-3 w-3 text-background-900 ml-1' />
         </Button>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Button, ButtonText, ButtonIcon, Wrapper, ArrowUpIcon },
       argsType: {},
@@ -658,8 +676,13 @@ The icon component incorporates a button component, combining visual representat
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Box>
+      code: `import { Box } from "@/components/ui/box";
+import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
+import { AddIcon, InfoIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Box>
           <Button>
           <ButtonIcon as={InfoIcon} className='mr-2'/>
             <ButtonText>Left Icon</ButtonText>
@@ -669,9 +692,10 @@ The icon component incorporates a button component, combining visual representat
             <ButtonIcon as={AddIcon} className='ml-2'/>
           </Button>
         </Box>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, InfoIcon, AddIcon, Box },
       argsType: {},
@@ -689,8 +713,18 @@ The button with full width component utilizes a button component, expanding its
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Center>
+      code: `import { Box } from "@/components/ui/box";
+import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
+import { Center } from "@/components/ui/center";
+import { Heading } from "@/components/ui/heading";
+import { Input, InputField } from "@/components/ui/input";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { ArrowLeftIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Center>
           <Box className='p-5 max-w-96 border border-background-300 rounded-lg'>
             <VStack className='pb-4' space='xs'>
               <Heading className='leading-[30px]'>
@@ -738,9 +772,10 @@ The button with full width component utilizes a button component, expanding its
             </VStack>
           </Box>
         </Center>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Button,
diff --git a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
index fea6413d3..65991374f 100644
--- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
@@ -55,16 +55,22 @@ This is an illustration of a **Card** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
+      code: `import { Card } from "@/components/ui/card";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
     <Card {...props} className="m-3">
       <Heading size="md" className="mb-1">
         Quick Start
       </Heading>
       <Text size="sm">Start building your next project in minutes</Text>
     </Card>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Card,
@@ -267,7 +273,14 @@ This is an example of a Card component with an image.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Card } from "@/components/ui/card";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Image } from "@/components/ui/image";
+import { Link, LinkText } from "@/components/ui/link";
+import { Text } from "@/components/ui/text";
+import { Icon, ArrowRightIcon } from "@/components/ui/icon";
+	
 function App(){
     return (
       <Card className="p-5 rounded-lg max-w-[360px] m-3">
@@ -303,8 +316,7 @@ function App(){
       </Link>
     </Card>
 );
-}
-`,
+}`,
 transformCode: (code) => {
 return transformedCode(code, 'function', 'App');
 },
@@ -334,7 +346,16 @@ This is an example of a Card component with other components like Avatar, Image
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Divider } from "@/components/ui/divider";
+import { Heading } from "@/components/ui/heading";
+import { Image } from "@/components/ui/image";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
 function App(){
     return (
     <Card className="p-6 rounded-lg max-w-[360px] m-3">
@@ -415,8 +436,7 @@ function App(){
       </Button>
     </Card>
 );
-}
-`,
+}`,
 transformCode: (code) => {
 return transformedCode(code, 'function', 'App');
 },
@@ -449,7 +469,14 @@ This example illustrates a card showcasing a product.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Heading } from "@/components/ui/heading";
+import { Image } from "@/components/ui/image";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
 function App(){
     return (
     <Card className="p-5 rounded-lg max-w-[360px] m-3">
@@ -496,8 +523,7 @@ function App(){
       </Box>
     </Card>
 );
-}
-`,
+}`,
 transformCode: (code) => {
 return transformedCode(code, 'function', 'App');
 },
@@ -526,7 +552,13 @@ This is an example of a Card component with a blog post.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar";
+import { Box } from "@/components/ui/box";
+import { Card } from "@/components/ui/card";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
 function App(){
     return (
     <Card className="p-5 rounded-lg max-w-[360px] m-3"
@@ -567,8 +599,7 @@ function App(){
       </Box>
     </Card>
 );
-}
-`,
+}`,
 transformCode: (code) => {
 return transformedCode(code, 'function', 'App');
 },
diff --git a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
index 39c553202..7dabb4449 100644
--- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
@@ -33,15 +33,20 @@ This is an illustration of **Center** component.
   showComponentRenderer = { true}
   showArgsController = { false}
   metaData = {{
-    code: `
-<Center className="bg-primary-500 h-[200px] w-[300px]">
+    code: `import { Center } from "@/components/ui/center";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Center className="bg-primary-500 h-[200px] w-[300px]">
   <Text className="text-typography-0 font-bold">
     This is the center.
   </Text>
 </Center>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
         scope: {
       Wrapper,
diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
index 8dd09b129..0546d4e38 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
@@ -53,16 +53,21 @@ This is an illustration of **Checkbox** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-          <Checkbox   {...props}  >
+      code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon } from "@/components/ui/checkbox";
+import { CheckIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Checkbox   {...props}  >
             <CheckboxIndicator>
               <CheckboxIcon as={CheckIcon}/>
             </CheckboxIndicator>
             <CheckboxLabel>Label</CheckboxLabel>
           </Checkbox>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Checkbox,
@@ -724,8 +729,12 @@ Checkbox provide a mutually exclusive selection mechanism, allowing users to cho
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { VStack } from "@/components/ui/vstack";
+import { CheckIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App(){
             const [values, setValues] = React.useState(["Eng"]);
             return (
               <CheckboxGroup value={values}  onChange={(keys) => {
@@ -753,8 +762,7 @@ Checkbox provide a mutually exclusive selection mechanism, allowing users to cho
               </VStack>
               </CheckboxGroup>
            )
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -785,8 +793,12 @@ A horizontal component incorporating a checkbox allows for intuitive and space-e
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-          function App(){
+      code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { HStack } from "@/components/ui/hstack";
+import { CheckIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App(){
              const [values, setValues] = React.useState(["Illustration"]);
            return (
              <CheckboxGroup value={values}  onChange={(keys) => {
@@ -814,8 +826,7 @@ A horizontal component incorporating a checkbox allows for intuitive and space-e
                </HStack>
                  </CheckboxGroup>
            )
-        }
-`,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -845,8 +856,14 @@ A checkbox component with help text provides informative guidance alongside sele
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Box } from "@/components/ui/box";
+import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { CheckIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App(){
              const [values, setValues] = React.useState(["Design"]);
            return (
              <CheckboxGroup value={values}  onChange={(keys) => {
@@ -874,8 +891,7 @@ A checkbox component with help text provides informative guidance alongside sele
         </VStack>
                  </CheckboxGroup>
            )
-        }
-`,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -908,8 +924,16 @@ A checkbox component integrated with form control enhances the user experience b
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-       <FormControl>
+      code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon } from "@/components/ui/checkbox";
+import { FormControl } from "@/components/ui/form-control";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { CheckIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <FormControl>
            <VStack space="sm">
               <Heading size="sm" >Sign up for newsletters</Heading>
               <Checkbox >
@@ -933,9 +957,10 @@ A checkbox component integrated with form control enhances the user experience b
               <Text size="sm">Subscribe to newsletters for updates</Text>
            </VStack>
             </FormControl>
-        `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Checkbox,
@@ -966,8 +991,12 @@ A checkbox component with Label left configuration aligns the label to the left,
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-       function App(){
+      code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { VStack } from "@/components/ui/vstack";
+import { CheckIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App(){
              const [values, setValues] = React.useState(["Jane"]);
            return (
              <CheckboxGroup value={values}  onChange={(keys) => {
@@ -1027,8 +1056,12 @@ A controlled component architecture incorporates a checkbox component, allowing
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { VStack } from "@/components/ui/vstack";
+import { CheckIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
          const [values, setValues] = React.useState(['UX Research']);
         return (
           <CheckboxGroup value={values}  onChange={(keys)=>{
@@ -1050,8 +1083,7 @@ A controlled component architecture incorporates a checkbox component, allowing
             </VStack>
           </CheckboxGroup>
         )
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -1082,7 +1114,11 @@ An uncontrolled component utilizes a checkbox component, providing a simpler imp
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { VStack } from "@/components/ui/vstack";
+import { CheckIcon } from "@/components/ui/icon";
+import React from "react";
+	
 function App() {
        const radioRef = React.useRef(null);
         const handleCheckboxChange = (e) => {
@@ -1106,8 +1142,7 @@ function App() {
             </VStack>
           </CheckboxGroup>
                )
-        }
-        `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -1138,7 +1173,12 @@ The checkbox group component allows users to group checkbox and display them in
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Center } from "@/components/ui/center";
+import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { VStack } from "@/components/ui/vstack";
+import { CheckIcon } from "@/components/ui/icon";
+import React from "react";
+	
 function CheckboxExample(){
   const [values, setValues] = React.useState([]);
   return (
@@ -1169,8 +1209,7 @@ function CheckboxExample(){
         </CheckboxGroup>
       </Center>
   );
-}
-`,
+}`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'CheckboxExample');
       },
diff --git a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
index 6d66ee3df..1916af8d4 100644
--- a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
@@ -44,8 +44,13 @@ This is an illustration of **Divider** component.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Center>
+      code: `import { Center } from "@/components/ui/center";
+import { Divider } from "@/components/ui/divider";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Center>
           <Text className="font-semibold">
             Easy
           </Text>
@@ -54,9 +59,10 @@ This is an illustration of **Divider** component.
             Difficult
           </Text>
         </Center>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -236,7 +242,14 @@ A Divider component with different layouts offers versatile options for visually
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Divider } from "@/components/ui/divider";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
     <VStack>
       <Heading>gluestack-ui</Heading>
       <Text>Universal component library</Text>
@@ -255,9 +268,10 @@ A Divider component with different layouts offers versatile options for visually
         <Text>Examples</Text>
       </HStack>
     </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -282,8 +296,16 @@ A Divider component with a specified divider orientation allows for clear visual
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <VStack
+      code: `import { Box } from "@/components/ui/box";
+import { Divider } from "@/components/ui/divider";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
+    <VStack
           space='lg'
           className="p-12 border border-outline-300 rounded-lg mx-5"
           >
@@ -344,9 +366,10 @@ A Divider component with a specified divider orientation allows for clear visual
             </HStack>
           </Box>
         </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -372,7 +395,13 @@ A Divider component used with or without inset adds visual hierarchy and distinc
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Divider } from "@/components/ui/divider";
+import { HStack } from "@/components/ui/hstack";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
     <VStack space="2xl">
       <HStack className="px-3 h-8 rounded border border-solid border-outline-300">
         <Button variant="link" size="xs">
@@ -405,9 +434,10 @@ A Divider component used with or without inset adds visual hierarchy and distinc
         </Button>
       </HStack>
     </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -432,8 +462,15 @@ A Divider component with added content allows for the inclusion of additional te
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Box
+      code: `import { Box } from "@/components/ui/box";
+import { Divider } from "@/components/ui/divider";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Box
         className="py-9 px-20 m-5 rounded-lg
         border border-outline-300
         "
@@ -464,9 +501,10 @@ A Divider component with added content allows for the inclusion of additional te
             </HStack>
           </Box>
         </Box>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx
index 00d2e637a..115e71af0 100644
--- a/example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx
@@ -73,8 +73,13 @@ This is an illustration of **Drawer** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Drawer, DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter } from "@/components/ui/drawer";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import React from "react";
+	
+function App() {
           const [showDrawer, setShowDrawer] = React.useState(false);
           return (
             <>
@@ -116,8 +121,7 @@ This is an illustration of **Drawer** component.
               </Drawer>
             </>
           );
-        };
-      `,
+        };`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -529,8 +533,20 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { Divider } from "@/components/ui/divider";
+import { Drawer, DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody } from "@/components/ui/drawer";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Slider, SliderThumb, SliderTrack, SliderFilledTrack } from "@/components/ui/slider";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, CheckIcon, CircleIcon } from "@/components/ui/icon";
+import colors from "tailwindcss/colors";
+import React from "react";
+	
+function App() {
           const [showDrawer, setShowDrawer] = React.useState(false);
           const [categories, setCategories] = React.useState([]);
           const [brands, setBrands] = React.useState([]);
@@ -791,8 +807,7 @@ The Examples section provides visual representations of the different variants o
               </Drawer>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -837,8 +852,18 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar";
+import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
+import { Divider } from "@/components/ui/divider";
+import { Drawer, DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter } from "@/components/ui/drawer";
+import { Pressable } from "@/components/ui/pressable";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, PhoneIcon, StarIcon } from "@/components/ui/icon";
+import React from "react";
+import { User, Home, ShoppingCart, Wallet, LogOut } from "lucide-react-native";
+	
+function App() {
             const [showDrawer, setShowDrawer] = React.useState(false);
             return (
               <>
@@ -876,17 +901,14 @@ The Examples section provides visual representations of the different variants o
                     <Divider className="my-4" />
                     <DrawerBody contentContainerClassName="gap-2">
                       <Pressable className="gap-3 flex-row items-center hover:bg-background-50 p-2 rounded-md">
-                        {/* User is imported from 'lucide-react-native' */}
                         <Icon as={User} size="lg" className="text-typography-600" />
                         <Text>My Profile</Text>
                       </Pressable>
                       <Pressable className="gap-3 flex-row items-center hover:bg-background-50 p-2 rounded-md">
-                        {/* Home is imported from 'lucide-react-native' */}
                         <Icon as={Home} size="lg" className="text-typography-600" />
                         <Text>Saved Address</Text>
                       </Pressable>
                       <Pressable className="gap-3 flex-row items-center hover:bg-background-50 p-2 rounded-md">
-                        {/* ShoppingCart is imported from 'lucide-react-native' */}
                         <Icon
                           as={ShoppingCart}
                           size="lg"
@@ -895,7 +917,6 @@ The Examples section provides visual representations of the different variants o
                         <Text>Orders</Text>
                       </Pressable>
                       <Pressable className="gap-3 flex-row items-center hover:bg-background-50 p-2 rounded-md">
-                        {/* Wallet is imported from 'lucide-react-native' */}
                         <Icon as={Wallet} size="lg" className="text-typography-600" />
                         <Text>Saved Cards</Text>
                       </Pressable>
@@ -915,7 +936,6 @@ The Examples section provides visual representations of the different variants o
                         action="secondary"
                       >
                         <ButtonText>Logout</ButtonText>
-                        {/* LogOut is imported from 'lucide-react-native' */}
                         <ButtonIcon as={LogOut} />
                       </Button>
                     </DrawerFooter>
@@ -923,8 +943,7 @@ The Examples section provides visual representations of the different variants o
                 </Drawer>
               </>
             );
-          }
-        `,
+          }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
index f3f806335..a45618b69 100644
--- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
@@ -59,8 +59,13 @@ This is an illustration of **Fab** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Box
+      code: `import { Box } from "@/components/ui/box";
+import { Fab, FabLabel, FabIcon } from "@/components/ui/fab";
+import { AddIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Box
           className='h-[360px] w-80 bg-background-50 rounded-md'
         >
           <Fab {...props}>
@@ -68,9 +73,10 @@ This is an illustration of **Fab** component.
             <FabLabel>Quick start</FabLabel>
           </Fab>
         </Box>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Box, Wrapper, Fab, FabIcon, FabLabel, AddIcon },
       argsType: {
@@ -458,8 +464,16 @@ A Fab component with an icon adds a visually striking and easily recognizable bu
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Box } from "@/components/ui/box";
+import { Fab, FabIcon } from "@/components/ui/fab";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { EditIcon } from "@/components/ui/icon";
+	
+function App() {
           const data = [
             {
               uri: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
@@ -506,13 +520,11 @@ A Fab component with an icon adds a visually striking and easily recognizable bu
                 })}
               </VStack>
               <Fab size='lg' className='bg-primary-600 hover:bg-primary-700 active:bg-primary-800' >
-                {/* EditIcon is imported from 'lucide-react-native' */}
                 <FabIcon as={EditIcon} color="white"/>
               </Fab>
             </Box>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -544,8 +556,18 @@ A Fab component with an icon and text combines a visual icon with accompanying t
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Box
+      code: `import { Box } from "@/components/ui/box";
+import { Divider } from "@/components/ui/divider";
+import { Fab, FabLabel, FabIcon } from "@/components/ui/fab";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { SearchIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Box
           className='max-w-96 border rounded-lg border-outline-200 py-[56px] px-6 mx-5 bg-background-100'
         >
           <Fab className="top-4 h-10 bg-primary-600 hover:bg-primary-700 active:bg-primary-900 py-2">
@@ -614,9 +636,10 @@ A Fab component with an icon and text combines a visual icon with accompanying t
             </Box>
           </VStack>
         </Box>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Fab,
@@ -646,8 +669,16 @@ A Fab component with placement options allows for flexible positioning of the bu
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Box
+      code: `import { Box } from "@/components/ui/box";
+import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon } from "@/components/ui/checkbox";
+import { Fab, FabIcon } from "@/components/ui/fab";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { AddIcon, CheckIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Box
           className='border rounded-lg border-outline-300 py-4 bg-background-0 mx-5'
         >
           <VStack space='lg' className='mb-2 px-6 py-2'>
@@ -686,9 +717,10 @@ A Fab component with placement options allows for flexible positioning of the bu
             <FabIcon as={AddIcon} size='sm'/>
           </Fab>
         </Box>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Box,
@@ -720,8 +752,18 @@ A Fab component with custom placement allows for flexible positioning of the but
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Box
+      code: `import { Box } from "@/components/ui/box";
+import { Fab, FabIcon } from "@/components/ui/fab";
+import { Heading } from "@/components/ui/heading";
+import { Image } from "@/components/ui/image";
+import { Link } from "@/components/ui/link";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { ShoppingCartIcon } from "lucide-react-native";
+	
+function Example() {
+  return (
+    <Box
           className='max-w-96 border rounded-lg border-outline-200 overflow-hidden mx-5  bg-background-100'
         >
           <Box>
@@ -756,13 +798,13 @@ A Fab component with custom placement allows for flexible positioning of the but
             </Link>
           </VStack>
           <Fab size='lg' className='bg-primary-600 right-4 bottom-16 hover:bg-primary-700 active:bg-primary-800'>
-            {/* ShoppingCartIcon is imported from 'lucide-react-native' */}
             <FabIcon as={ShoppingCartIcon} className='h-4 w-4'/>
           </Fab>
         </Box>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Fab,
diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
index 335dd6795..fd0b27f91 100644
--- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
@@ -98,8 +98,14 @@ This is an illustration of **FormControl** component.
       p: '$3',
     }}
     metaData={{
-      code: `
-        function App () {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { FormControl, FormControlError, FormControlErrorText, FormControlErrorIcon, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control";
+import { Input, InputField } from "@/components/ui/input";
+import { VStack } from "@/components/ui/vstack";
+import { AlertCircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App () {
         const [isInvalid, setIsInvalid] = React.useState(false);
         const [inputValue, setInputValue] = React.useState('12345');
         const handleSubmit = () => {
@@ -140,8 +146,7 @@ This is an illustration of **FormControl** component.
             </Button>
           </VStack>
         );
-      };
-      `,
+      };`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -421,8 +426,13 @@ The Radio Component can be incorporated within the FormControl.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App () {
+      code: `import { FormControl, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control";
+import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { VStack } from "@/components/ui/vstack";
+import { CircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App () {
         const [values, setValues] = React.useState("Mango");
         return (
         <FormControl>
@@ -466,8 +476,7 @@ The Radio Component can be incorporated within the FormControl.
           </FormControlHelper>
         </FormControl>
         )
-       }
-      `,
+       }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -506,8 +515,13 @@ The Checkbox Component can be incorporated within the FormControl.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { FormControl, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control";
+import { VStack } from "@/components/ui/vstack";
+import { CheckIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
       const [values, setValues] = React.useState(['bits']);
         return (
           <FormControl>
@@ -549,8 +563,7 @@ The Checkbox Component can be incorporated within the FormControl.
             </FormControlHelper>
           </FormControl>
         );
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -590,8 +603,12 @@ The Textarea Component can be incorporated within the FormControl.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <FormControl>
+      code: `import { FormControl, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control";
+import { Textarea, TextareaInput } from "@/components/ui/textarea";
+	
+function Example() {
+  return (
+    <FormControl>
           <FormControlLabel>
             <FormControlLabelText>
               Comment
@@ -606,9 +623,10 @@ The Textarea Component can be incorporated within the FormControl.
             </FormControlHelperText>
           </FormControlHelper>
         </FormControl>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -639,8 +657,14 @@ Error messages can be displayed using FormControl.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <FormControl isInvalid>
+      code: `import { FormControl, FormControlError, FormControlErrorText, FormControlErrorIcon, FormControlLabel, FormControlLabelText } from "@/components/ui/form-control";
+import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { VStack } from "@/components/ui/vstack";
+import { AlertCircleIcon, CircleIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <FormControl isInvalid>
           <FormControlLabel>
             <FormControlLabelText>
               Which time slot works best for you?
@@ -681,9 +705,10 @@ Error messages can be displayed using FormControl.
             </FormControlErrorText>
           </FormControlError>
         </FormControl>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -720,8 +745,13 @@ Form Action Buttons can also be utilized in conjunction with FormControl.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <HStack>
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { FormControl } from "@/components/ui/form-control";
+import { HStack } from "@/components/ui/hstack";
+	
+function Example() {
+  return (
+    <HStack>
           <FormControl>
             <Button variant='outline' action='secondary'>
               <ButtonText>
@@ -737,9 +767,10 @@ Form Action Buttons can also be utilized in conjunction with FormControl.
             </Button>
           </FormControl>
         </HStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx
index 117c6f10d..15d69975d 100644
--- a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx
@@ -45,8 +45,11 @@ This is an illustration of **Grid** component.
       padding: 20,
     }}
     metaData = {{
-      code: `
-<Grid className="gap-5" _extra={{
+      code: `import { Grid, GridItem } from "@/components/ui/grid";
+	
+function Example() {
+  return (
+    <Grid className="gap-5" _extra={{
   className: 'grid-cols-8'
 }} >
       <GridItem
@@ -80,10 +83,11 @@ This is an illustration of **Grid** component.
 }}
       />
     </Grid>
-`,
+  );
+}`,
         transformCode: (code) => {
-          return transformedCode(code);
-        },
+        return transformedCode(code, 'function', 'Example');
+      },
           scope: {
         Wrapper,
         Grid,
@@ -367,7 +371,11 @@ Use the gap-* utilities to change the gap between both rows and columns in grid
       padding: 20,
     }}
     metaData={{
-      code: `
+      code: `import { Grid, GridItem } from "@/components/ui/grid";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
     <Grid className="gap-4" _extra={{
       className: 'grid-cols-9',
     }}>
@@ -396,9 +404,10 @@ Use the gap-* utilities to change the gap between both rows and columns in grid
         <Text>C</Text>
       </GridItem>
     </Grid>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
        Grid,
@@ -423,8 +432,12 @@ Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows
       padding: 20,
     }}
     metaData = {{
-      code: `
-<Grid className="gap-y-2 gap-x-4" _extra={{
+      code: `import { Grid, GridItem } from "@/components/ui/grid";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Grid className="gap-y-2 gap-x-4" _extra={{
   className: 'grid-cols-6',
 }}>
       <GridItem
@@ -476,10 +489,11 @@ Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows
         <Text className="text-sm">06</Text>
       </GridItem>
     </Grid>
-`,
+  );
+}`,
         transformCode: (code) => {
-          return transformedCode(code);
-        },
+        return transformedCode(code, 'function', 'Example');
+      },
           scope: {
         Wrapper,
         Grid,
@@ -505,8 +519,12 @@ The following example depicts how easily you can nest grids to create complex la
       padding: 20,
     }}
     metaData = {{
-      code: `
-<Grid className="gap-3" _extra={{
+      code: `import { Grid, GridItem } from "@/components/ui/grid";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Grid className="gap-3" _extra={{
   className: 'grid-cols-8',
 }}>
       <GridItem
@@ -566,10 +584,11 @@ The following example depicts how easily you can nest grids to create complex la
         </Grid>
       </GridItem>
     </Grid>
-`,
+  );
+}`,
         transformCode: (code) => {
-          return transformedCode(code);
-        },
+        return transformedCode(code, 'function', 'Example');
+      },
           scope: {
         Wrapper,
         Grid,
@@ -595,8 +614,12 @@ You can pass different grid-cols-* and col-span-* values at different breakpoint
       padding: 20,
     }}
     metaData = {{
-      code: `
-<Grid className="gap-y-2 gap-x-4" _extra={{
+      code: `import { Grid, GridItem } from "@/components/ui/grid";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Grid className="gap-y-2 gap-x-4" _extra={{
   className: 'grid-cols-6',
 }}>
       <GridItem
@@ -648,10 +671,11 @@ You can pass different grid-cols-* and col-span-* values at different breakpoint
         <Text className="text-sm">06</Text>
       </GridItem>
     </Grid>
-`,
+  );
+}`,
         transformCode: (code) => {
-          return transformedCode(code);
-        },
+        return transformedCode(code, 'function', 'Example');
+      },
           scope: {
         Wrapper,
         Grid,
diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
index 1dd5e19ba..394589cf7 100644
--- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
@@ -38,15 +38,20 @@ This is an illustration of **HStack** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <HStack {...props}>
+      code: `import { Box } from "@/components/ui/box";
+import { HStack } from "@/components/ui/hstack";
+	
+function Example() {
+  return (
+    <HStack {...props}>
           <Box  className="h-20 w-20 bg-primary-300" />
           <Box  className="h-20 w-20 bg-primary-400" />
           <Box  className="h-20 w-20 bg-primary-500" />
         </HStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Box, Wrapper, HStack },
       argsType: {
@@ -260,15 +265,20 @@ An HStack component with the reversed prop reverses the order of horizontally st
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <HStack space="md" reversed>
+      code: `import { Box } from "@/components/ui/box";
+import { HStack } from "@/components/ui/hstack";
+	
+function Example() {
+  return (
+    <HStack space="md" reversed>
           <Box className="w-20 h-20 bg-primary-300"/>
           <Box className="w-20 h-20 bg-primary-400"/>
           <Box className="w-20 h-20 bg-primary-500"/>
         </HStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Box, Wrapper, HStack },
       argsType: {},
diff --git a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
index 33d775b9c..8d819570d 100644
--- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
@@ -37,11 +37,15 @@ This is an illustration of **Heading** component.
     showComponentRenderer={ true }
   showArgsController = { false}
   metaData = {{
-    code: `
-        <Heading>I am a Heading</Heading>
-      `,
+    code: `import { Heading } from "@/components/ui/heading";
+	
+function Example() {
+  return (
+    <Heading>I am a Heading</Heading>
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
         scope: {
       Wrapper,
@@ -406,8 +410,10 @@ Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Center } from "@/components/ui/center";
+import { Heading } from "@/components/ui/heading";
+	
+function App() {
           const sizes = [
             'xs',
             'sm',
@@ -426,8 +432,7 @@ Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl
                 ))}
               </Center>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
index 76f135e0e..9482c1c60 100644
--- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
@@ -106,11 +106,15 @@ This is an illustration of **Icon** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Icon as={EditIcon} {...props} />
-      `,
+      code: `import { Icon, EditIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Icon as={EditIcon} {...props} />
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -257,8 +261,13 @@ Below is a list of all of the icons in the library.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      <Center>
+      code: `import { Center } from "@/components/ui/center";
+import { HStack } from "@/components/ui/hstack";
+import { Icon, AddIcon, AlertCircleIcon, ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, ArrowLeftIcon, AtSignIcon, BellIcon, CalendarDaysIcon, CheckIcon, CheckCircleIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleIcon, ClockIcon, CloseIcon, CloseCircleIcon, CopyIcon, DownloadIcon, EditIcon, EyeIcon, EyeOffIcon, FavouriteIcon, GlobeIcon, GripVerticalIcon, HelpCircleIcon, InfoIcon, LinkIcon, ExternalLinkIcon, LoaderIcon, LockIcon, MailIcon, MenuIcon, MessageCircleIcon, MoonIcon, PaperclipIcon, PhoneIcon, PlayIcon, RemoveIcon, RepeatIcon, Repeat1Icon, SearchIcon, SettingsIcon, ShareIcon, SlashIcon, StarIcon, SunIcon, ThreeDotsIcon, TrashIcon, UnlockIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Center>
   <HStack className="w-[70%] flex flex-wrap">
         <Icon as={AddIcon} className="text-typography-500 m-2 w-4 h-4" />
         <Icon as={ArrowLeftIcon} className="text-typography-500 m-2 w-4 h-4" />
@@ -317,9 +326,10 @@ Below is a list of all of the icons in the library.
         <Icon as={PlayIcon} className="text-typography-500 m-2 w-4 h-4" />
   </HStack>
   </Center>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Center,
@@ -396,16 +406,22 @@ Below is a list of all of the icons in the library.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      <VStack space="md" className="items-center">
+      code: `import { VStack } from "@/components/ui/vstack";
+import { Icon } from "@/components/ui/icon";
+import { Camera, ChromeIcon, InstagramIcon, FacebookIcon } from "lucide-react-native";
+	
+function Example() {
+  return (
+    <VStack space="md" className="items-center">
         <Icon className="text-typography-500" as={Camera} />
         <Icon className="text-typography-500" as={ChromeIcon}  />
         <Icon className="text-typography-500" as={InstagramIcon} />
         <Icon className="text-typography-500" as={FacebookIcon} />
       </VStack>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -444,14 +460,14 @@ on Native :
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App () {
+      code: `import { Icon, createIcon } from "@/components/ui/icon";
+import { Path } from "react-native-svg";
+	
+function App () {
         const GluestackIcon = createIcon({
           viewBox: '0 0 32 32',
           path: (
             <>
-              {/* Rect, Path is imported from 'react-native-svg' */}
-              {/* <Rect width="32" height="32" rx="2" fill="currentColor"/> */}
               <Path d="M9.5 14.6642L15.9999 9.87633V12.1358L9.5 16.9236V14.6642Z" fill="white"/>
               <Path d="M22.5 14.6642L16.0001 9.87639V12.1359L22.5 16.9237V14.6642Z" fill="white"/>
               <Path d="M9.5 19.8641L15.9999 15.0763V17.3358L9.5 22.1236V19.8641Z" fill="white"/>
@@ -460,8 +476,7 @@ on Native :
           ),
         });
         return <Icon as={GluestackIcon} size='xl' className="text-typography-black"/>;
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
index c492e34fd..9462fcced 100644
--- a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
@@ -42,17 +42,21 @@ This is an illustration of **Image** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-       <Image
+      code: `import { Image } from "@/components/ui/image";
+	
+function Example() {
+  return (
+    <Image
        {...props}
          source={{
             uri: 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
           }}
           alt="image"
       />
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -157,18 +161,22 @@ import Image from '@unitools/image';
     showComponentRenderer={false}
     showArgsController={false}
     metaData={{
-      code: `
-        <Image
+      code: `import { Image } from "@/components/ui/image";
+	
+function Example() {
+  return (
+    <Image
           source={{
             uri: "https://gluestack.github.io/public-blog-video-assets/mountains.png",
           }}
           alt="Logo"
           size='none'
           className="aspect-[320/208] w-full max-w-[320px]"
-        />        
-      `,
+        />
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
index 3af3162af..3ab895045 100644
--- a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx
@@ -55,8 +55,15 @@ This is an illustration of **ImageViewer** component.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Center } from "@/components/ui/center";
+import { Image } from "@/components/ui/image";
+import { ImageViewer, ImageViewerBackdrop, ImageViewerContent, ImageViewerImage, ImageViewerCloseButton } from "@/components/ui/image-viewer";
+import { Pressable } from "@/components/ui/pressable";
+import { StatusBar } from "@/components/ui/statusbar";
+import { Icon, CloseIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
         const [visible, setVisible] = React.useState(false);
         const Images = [{ id: 1, url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg' }];
         return (
@@ -86,8 +93,7 @@ This is an illustration of **ImageViewer** component.
           </ImageViewer>
         </Center>
         );
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -379,8 +385,15 @@ import { StatusBar } from 'expo-status-bar';
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Center } from "@/components/ui/center";
+import { Image } from "@/components/ui/image";
+import { ImageViewer, ImageViewerBackdrop, ImageViewerContent, ImageViewerImage, ImageViewerCloseButton } from "@/components/ui/image-viewer";
+import { Pressable } from "@/components/ui/pressable";
+import { StatusBar } from "@/components/ui/statusbar";
+import { Icon, CloseIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
         const [visible, setVisible] = React.useState(false);
         const Images = [{ id: 1, url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg' }];
         return (
@@ -410,8 +423,7 @@ import { StatusBar } from 'expo-status-bar';
           </ImageViewer>
         </Center>
         );
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
index c9804e5c1..cc83fb764 100644
--- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
@@ -51,15 +51,19 @@ This is an illustration of **Input** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Input {...props}>
+      code: `import { Input, InputField } from "@/components/ui/input";
+	
+function Example() {
+  return (
+    <Input {...props}>
           <InputField
             placeholder='Enter Text here...'
           />
         </Input>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -605,8 +609,16 @@ The Input component integrates with an icon and a button, providing users with a
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { FormControl } from "@/components/ui/form-control";
+import { Heading } from "@/components/ui/heading";
+import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { EyeIcon, EyeOffIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
           const [showPassword, setShowPassword] = React.useState(false);
           const handleState = () => {
             setShowPassword((showState) => {
@@ -645,8 +657,7 @@ The Input component integrates with an icon and a button, providing users with a
               </VStack>
             </FormControl>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -680,8 +691,12 @@ The Input with Icons is a variation of the Input component that displays icons n
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <Input>
+      code: `import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
+import { SearchIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Input>
           <InputSlot className='pl-3'>
             <InputIcon as={SearchIcon}/>
           </InputSlot>
@@ -689,9 +704,10 @@ The Input with Icons is a variation of the Input component that displays icons n
             placeholder="Search..."
           />
         </Input>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
index 646aecc38..d51ff1a60 100644
--- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
@@ -38,13 +38,17 @@ This is an illustration of **Link** component.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      <Link href="https://gluestack.io/">
+      code: `import { Link, LinkText } from "@/components/ui/link";
+	
+function Example() {
+  return (
+    <Link href="https://gluestack.io/">
         <LinkText>gluestack</LinkText>
       </Link>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -397,8 +401,13 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-          <HStack>
+      code: `import { HStack } from "@/components/ui/hstack";
+import { Link, LinkText } from "@/components/ui/link";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <HStack>
             <Text
               size="lg"
             >Design inspiration from&nbsp;</Text>
@@ -406,9 +415,10 @@ The Examples section provides visual representations of the different variants o
                 <LinkText size="lg">pinterest.com</LinkText>
               </Link>
           </HStack>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Link, LinkText, Wrapper, Icon, HStack, Text },
       argsType: {},
@@ -423,21 +433,28 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <HStack>
+      code: `import { HStack } from "@/components/ui/hstack";
+import { Link, LinkText } from "@/components/ui/link";
+import { Text } from "@/components/ui/text";
+import { Icon } from "@/components/ui/icon";
+import { ArrowUpRight } from "lucide-react-native";
+	
+function Example() {
+  return (
+    <HStack>
               <Text
                size="lg">Go to&nbsp;</Text>
               <Link href="https://gluestack.io/" isExternal>
                 <HStack>
                 <LinkText size="lg">Pinterest</LinkText>
-                {/* ArrowUpRight is imported from 'lucide-react-native' */}
                 <Icon as={ArrowUpRight} size="lg" className='mt-0.5 text-info-600'/>
                 </HStack>
               </Link>
          </HStack>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Link, LinkText, Wrapper, ArrowUpRight, Icon, HStack, Text },
       argsType: {},
@@ -459,13 +476,18 @@ import Link from "@unitools/link";
     showComponentRenderer={false}
     showArgsController={false}
     metaData={{
-      code: `
-        <Link href="https://gluestack.io/">
+      code: `import { Link } from "@/components/ui/link";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Link href="https://gluestack.io/">
           <Text>gluestack</Text>
         </Link>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx
index c8a92f501..f8a2ca010 100644
--- a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx
@@ -63,8 +63,13 @@ This is an illustration of a **Menu** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-      <Menu
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Menu, MenuItem, MenuItemLabel } from "@/components/ui/menu";
+import { Icon, AddIcon, GlobeIcon, PlayIcon, SettingsIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Menu
         {...props}
         offset={5}
         disabledKeys={['Settings']}
@@ -93,9 +98,10 @@ This is an illustration of a **Menu** component.
           <MenuItemLabel size="sm">Settings</MenuItemLabel>
         </MenuItem>
       </Menu>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -557,8 +563,14 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      <Menu
+      code: `import { Badge, BadgeText } from "@/components/ui/badge";
+import { Button, ButtonIcon } from "@/components/ui/button";
+import { Menu, MenuItem, MenuItemLabel, MenuSeparator } from "@/components/ui/menu";
+import { MenuIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Menu
         offset={5}
         trigger={({ ...triggerProps }) => {
           return (
@@ -607,9 +619,10 @@ The Examples section provides visual representations of the different variants o
           <MenuItemLabel size="sm">Logout</MenuItemLabel>
         </MenuItem>
       </Menu>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -637,8 +650,12 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function Example() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Menu, MenuItem, MenuItemLabel, MenuSeparator } from "@/components/ui/menu";
+import { Icon, HelpCircleIcon, MessageCircleIcon, SettingsIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function Example() {
         const [selected, setSelected] = React.useState(new Set([]));
         return (
           <Menu
@@ -707,8 +724,7 @@ The Examples section provides visual representations of the different variants o
             </MenuItem>
           </Menu>
         );
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
index 57e762ee9..c6f48b1a3 100644
--- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
@@ -70,8 +70,15 @@ This is an illustration of **Modal** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Center } from "@/components/ui/center";
+import { Heading } from "@/components/ui/heading";
+import { Modal, ModalBackdrop, ModalContent, ModalCloseButton, ModalHeader, ModalBody, ModalFooter } from "@/components/ui/modal";
+import { Text } from "@/components/ui/text";
+import { Icon, CloseIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App(){
           const [showModal, setShowModal] = React.useState(false);
           return (
             <Center className='h-[300px]'>
@@ -125,8 +132,7 @@ This is an illustration of **Modal** component.
               </Modal>
             </Center>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -546,8 +552,17 @@ A user interface featuring multiple modal components that allow for layered inte
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Input, InputField } from "@/components/ui/input";
+import { Link, LinkText } from "@/components/ui/link";
+import { Modal, ModalBackdrop, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@/components/ui/modal";
+import { Text } from "@/components/ui/text";
+import { ArrowLeftIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
           const [showModal, setShowModal] = React.useState(false);
           const [showModal2, setShowModal2] = React.useState(false);
           const [showModal3, setShowModal3] = React.useState(false);
@@ -700,8 +715,7 @@ A user interface featuring multiple modal components that allow for layered inte
               </Modal>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -742,8 +756,14 @@ A user interface featuring multiple modal components that allow for layered inte
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Image } from "@/components/ui/image";
+import { Modal, ModalBackdrop, ModalContent, ModalBody, ModalFooter } from "@/components/ui/modal";
+import { Text } from "@/components/ui/text";
+import React from "react";
+	
+function App() {
         const [showModal, setShowModal] = React.useState(false);
         return (
           <>
@@ -800,8 +820,7 @@ A user interface featuring multiple modal components that allow for layered inte
             </Modal>
           </>
         );
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -832,8 +851,15 @@ A user interface featuring multiple modal components that allow for layered inte
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Modal, ModalBackdrop, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@/components/ui/modal";
+import { Text } from "@/components/ui/text";
+import { Icon, TrashIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
         const [showModal, setShowModal] = React.useState(false);
         return (
           <>
@@ -888,8 +914,7 @@ A user interface featuring multiple modal components that allow for layered inte
             </Modal>
           </>
         );
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -923,8 +948,20 @@ A user interface featuring multiple modal components that allow for layered inte
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Image } from "@/components/ui/image";
+import { Modal, ModalBackdrop, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@/components/ui/modal";
+import { Radio, RadioGroup, RadioIndicator, RadioIcon } from "@/components/ui/radio";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, CircleIcon } from "@/components/ui/icon";
+import React from "react";
+import { CreditCard } from "lucide-react-native";
+	
+function App() {
         const paymentOptions = [
           {
             value: 'visa',
@@ -1031,8 +1068,7 @@ A user interface featuring multiple modal components that allow for layered inte
           </Modal>
           </>
         );
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -1083,8 +1119,17 @@ A user interface featuring multiple modal components that allow for layered inte
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Input, InputField } from "@/components/ui/input";
+import { Modal, ModalBackdrop, ModalContent, ModalCloseButton, ModalHeader, ModalBody } from "@/components/ui/modal";
+import { Pressable } from "@/components/ui/pressable";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, CloseIcon, CopyIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
           const [showModal, setShowModal] = React.useState(false);
           return (
             <>
@@ -1128,8 +1173,7 @@ A user interface featuring multiple modal components that allow for layered inte
               </Modal>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/PinInput/index.nw.stories.mdx b/example/storybook-nativewind/src/components/PinInput/index.nw.stories.mdx
index 8541ad566..62e10417e 100644
--- a/example/storybook-nativewind/src/components/PinInput/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/PinInput/index.nw.stories.mdx
@@ -52,15 +52,19 @@ This is an illustration of a **PinInput** component.
       overflow: 'scroll',
     }}
     metaData={{
-      code: `
-        <PinInput noOfFields={4}>
+      code: `import { PinInput, PinInputField } from "@/components/ui/pin-input";
+	
+function Example() {
+  return (
+    <PinInput noOfFields={4}>
           {Array.from({ length: 4 }).map((_, index) => (
             <PinInputField key={index} index={index} />
           ))}
         </PinInput>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         PinInput,
@@ -272,8 +276,10 @@ This is an example of a PinInput component with a caption.
       overflow: 'scroll',
     }}
     metaData={{
-      code: `
-        function App(){
+      code: `import { FormControl, FormControlLabel, FormControlLabelText } from "@/components/ui/form-control";
+import { PinInput, PinInputField } from "@/components/ui/pin-input";
+	
+function App(){
           const [value, setValue] = useState('');
           useEffect(() => {
             console.log(value);
@@ -292,8 +298,7 @@ This is an example of a PinInput component with a caption.
               </PinInput>
             </FormControl>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx
index 95557793d..0b717cd1f 100644
--- a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx
@@ -80,8 +80,12 @@ This is an illustration of **Popover** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Popover, PopoverBackdrop, PopoverArrow, PopoverBody, PopoverContent } from "@/components/ui/popover";
+import { Text } from "@/components/ui/text";
+import React from "react";
+	
+function App() {
         const [isOpen, setIsOpen] = React.useState(false);
         const handleOpen = () => {
           setIsOpen(true);
@@ -119,8 +123,7 @@ This is an illustration of **Popover** component.
             </PopoverContent>
           </Popover>
         )
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -706,8 +709,13 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Avatar, AvatarFallbackText, AvatarImage, AvatarGroup } from "@/components/ui/avatar";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Popover, PopoverBackdrop, PopoverArrow, PopoverBody, PopoverContent } from "@/components/ui/popover";
+import { Text } from "@/components/ui/text";
+import React from "react";
+	
+function App() {
         const [isOpen, setIsOpen] = React.useState(false);
         const handleOpen = () => {
           setIsOpen(true);
@@ -786,8 +794,7 @@ The Examples section provides visual representations of the different variants o
             </PopoverContent>
           </Popover>
         )
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -818,8 +825,17 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
+import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox";
+import { Heading } from "@/components/ui/heading";
+import { Popover, PopoverBackdrop, PopoverFooter, PopoverBody, PopoverContent } from "@/components/ui/popover";
+import { Pressable } from "@/components/ui/pressable";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { ArrowRightIcon, CheckIcon, ChevronRightIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
         const [isOpen, setIsOpen] = React.useState(false);
         const [values, setValues] = React.useState(['work']);
         const handleOpen = () => {
@@ -891,8 +907,7 @@ The Examples section provides visual representations of the different variants o
             </PopoverContent>
           </Popover>
         )
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -934,8 +949,16 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Image } from "@/components/ui/image";
+import { Input, InputField } from "@/components/ui/input";
+import { Popover, PopoverBackdrop, PopoverBody, PopoverContent } from "@/components/ui/popover";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import React from "react";
+	
+function App() {
         const [isOpen, setIsOpen] = React.useState(false);
         const handleOpen = () => {
           setIsOpen(true);
@@ -993,8 +1016,7 @@ The Examples section provides visual representations of the different variants o
             </PopoverContent>
           </Popover>
         )
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -1030,8 +1052,18 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar";
+import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Input, InputField } from "@/components/ui/input";
+import { Popover, PopoverBackdrop, PopoverHeader, PopoverBody, PopoverContent } from "@/components/ui/popover";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { ChevronDownIcon, ShareIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
         const [isOpen, setIsOpen] = React.useState(false);
         const handleOpen = () => {
           setIsOpen(true);
@@ -1151,8 +1183,7 @@ The Examples section provides visual representations of the different variants o
             </PopoverContent>
           </Popover>
         )
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx
index f73ff0069..b8d723803 100644
--- a/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx
@@ -47,8 +47,14 @@ This is an illustration of **Pressable** component.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App(){
+      code: `import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { CloseIcon } from "@/components/ui/icon";
+import React from "react";
+import { Portal } from "lucide-react-native";
+	
+function App(){
           const [visible, setVisible] = React.useState(false);
           const handleClose = () => setVisible(false);
           return (
@@ -74,8 +80,7 @@ This is an illustration of **Pressable** component.
               </Button>
             </>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
index 178771540..a50b88b5d 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
@@ -29,14 +29,19 @@ This is an illustration of **Pressable** component.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
- <Pressable
+      code: `import { Pressable } from "@/components/ui/pressable";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Pressable
   onPress={() => console.log('Hello')} className="p-5 bg-primary-500">
   <Text className="text-typography-0">Press me</Text>
 </Pressable>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -187,7 +192,11 @@ You can change the child elements according to the states of Pressable component
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
+      code: `import { Pressable } from "@/components/ui/pressable";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
     <Pressable className="p-16 bg-primary-500">
       {({ pressed }) => (
         <Text className={pressed ? 'text-pink-400' : 'text-amber-400'}>
@@ -195,9 +204,10 @@ You can change the child elements according to the states of Pressable component
         </Text>
       )}
     </Pressable>
-    `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx
index 1f777dfc4..263e77853 100644
--- a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx
@@ -40,15 +40,20 @@ This is an illustration of **Progress** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Center className='w-[300px] h-[150px]'>
+      code: `import { Center } from "@/components/ui/center";
+import { Progress, ProgressFilledTrack } from "@/components/ui/progress";
+	
+function Example() {
+  return (
+    <Center className='w-[300px] h-[150px]'>
           <Progress value={40} {...props} >
             <ProgressFilledTrack />
           </Progress>
         </Center>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Wrapper, Progress, ProgressFilledTrack, Center },
       argsType: {
@@ -262,16 +267,22 @@ Progress component with value
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      <VStack space="lg" className="max-w-80 w-full">
+      code: `import { Progress, ProgressFilledTrack } from "@/components/ui/progress";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
+    <VStack space="lg" className="max-w-80 w-full">
         <Text size="lg">Downloading 55%</Text>
         <Progress value={55} className='w-full h-1'>
           <ProgressFilledTrack className='h-1' />
         </Progress>
       </VStack>
-    `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -295,8 +306,12 @@ You can add track color to progress bar as per our needs.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <VStack space="3xl" className="max-w-96 w-full">
+      code: `import { Progress, ProgressFilledTrack } from "@/components/ui/progress";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
+    <VStack space="3xl" className="max-w-96 w-full">
           <Progress value={46} className='w-full h-2' size="sm">
             <ProgressFilledTrack className='bg-emerald-600'/>
           </Progress>
@@ -310,9 +325,10 @@ You can add track color to progress bar as per our needs.
             <ProgressFilledTrack className='bg-cyan-600'/>
           </Progress>
         </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -334,17 +350,24 @@ You can customize the progress bar. Below is the example where we have change th
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <VStack space="lg" className="max-w-[410px] w-full">
+      code: `import { Heading } from "@/components/ui/heading";
+import { Progress, ProgressFilledTrack } from "@/components/ui/progress";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
+    <VStack space="lg" className="max-w-[410px] w-full">
         <Heading>Internal Storage</Heading>
         <Progress value={46} className='w-full h-2 bg-lime-100'>
           <ProgressFilledTrack className='h-2 bg-lime-500' />
         </Progress>
         <Text size="md">14GB</Text>
         </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
index f61fac231..acc83f4d9 100644
--- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
@@ -45,8 +45,12 @@ This is an illustration of **Radio** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <RadioGroup>
+      code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { CircleIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <RadioGroup>
           <Radio value="change" {...props}>
             <RadioIndicator>
               <RadioIcon as={CircleIcon}/>
@@ -54,9 +58,10 @@ This is an illustration of **Radio** component.
             <RadioLabel>Label</RadioLabel>
           </Radio>
         </RadioGroup>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -581,8 +586,12 @@ Radio buttons provide a mutually exclusive selection mechanism, allowing users t
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App () {
+      code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { VStack } from "@/components/ui/vstack";
+import { CircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App () {
         const [values, setValues] = React.useState("Eng");
         return (
           <RadioGroup value={values} onChange={setValues}>
@@ -608,8 +617,7 @@ Radio buttons provide a mutually exclusive selection mechanism, allowing users t
             </VStack>
           </RadioGroup>
         )
-       }
-      `,
+       }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -638,8 +646,12 @@ Radio buttons can be used horizontally.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { HStack } from "@/components/ui/hstack";
+import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { CircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
           const [values, setValues] = React.useState("Cash On Delivery");
           return (
             <RadioGroup value={values} onChange={setValues} >
@@ -659,8 +671,7 @@ Radio buttons can be used horizontally.
               </HStack>
             </RadioGroup>
           )
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -689,8 +700,14 @@ Radio buttons can be used with helper text.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App () {
+      code: `import { Box } from "@/components/ui/box";
+import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { CircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App () {
           const [values, setValues] = React.useState("Read-only");
           return (
             <RadioGroup value={values} onChange={setValues}>
@@ -716,8 +733,7 @@ Radio buttons can be used with helper text.
               </VStack>
             </RadioGroup>
           )
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -748,8 +764,16 @@ Radio buttons can be used inside FormControl for better control of states and fu
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <FormControl>
+      code: `import { FormControl } from "@/components/ui/form-control";
+import { Heading } from "@/components/ui/heading";
+import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { CircleIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <FormControl>
           <VStack space="md">
             <Heading size="sm">
               Which time slot works best for you?
@@ -781,9 +805,10 @@ Radio buttons can be used inside FormControl for better control of states and fu
             </Text>
           </VStack>
         </FormControl>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -813,8 +838,12 @@ Radio buttons can be used horizontally
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App() {
+      code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { VStack } from "@/components/ui/vstack";
+import { CircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App() {
         const [values, setValues] = React.useState("Monday");
         return (
           <RadioGroup value={values} onChange={setValues} >
@@ -834,8 +863,7 @@ Radio buttons can be used horizontally
             </VStack>
           </RadioGroup >
         )
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -865,8 +893,12 @@ The Radio components can be used with a controlled state, enabling precise manag
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App () {
+      code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { VStack } from "@/components/ui/vstack";
+import { CircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App () {
         const [values, setValues] = React.useState('Apartments');
         return (
           <RadioGroup value={values} onChange={setValues}>
@@ -886,8 +918,7 @@ The Radio components can be used with a controlled state, enabling precise manag
             </VStack>
           </RadioGroup>
           )
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -917,8 +948,12 @@ The Radio components can be used with either a ref or no state, providing an unc
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function App () {
+      code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { VStack } from "@/components/ui/vstack";
+import { CircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function App () {
         const radioRef = React.useRef(null);
         const handleRadioChange = (e) => {
           e.preventDefault();
@@ -942,8 +977,7 @@ The Radio components can be used with either a ref or no state, providing an unc
             </VStack>
           </RadioGroup>
         );
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -973,8 +1007,12 @@ The Radio group component allows users to group radio and display them in a hori
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function RadioGroupExample() {
+      code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio";
+import { VStack } from "@/components/ui/vstack";
+import { CircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function RadioGroupExample() {
           const [values, setValues] = React.useState("1st");
           return (
             <RadioGroup value={values} onChange={setValues}>
@@ -1000,8 +1038,7 @@ The Radio group component allows users to group radio and display them in a hori
               </VStack>
             </RadioGroup>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'RadioGroupExample');
       },
diff --git a/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx
index 37f9abc8d..5abe0ed5d 100644
--- a/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx
@@ -57,8 +57,12 @@ This is an illustration of **Select** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Select>
+      code: `import { Select, SelectTrigger, SelectInput, SelectIcon, SelectPortal, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectItem } from "@/components/ui/select";
+import { ChevronDownIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <Select>
           <SelectTrigger {...props}>
             <SelectInput placeholder="Select option" />
             <SelectIcon className="mr-3" as={ChevronDownIcon} />
@@ -87,9 +91,10 @@ This is an illustration of **Select** component.
             </SelectContent>
           </SelectPortal>
         </Select>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -761,8 +766,13 @@ The Select component with FormControl example demonstrates how to manage its sta
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <FormControl isRequired isInvalid>
+      code: `import { FormControl, FormControlError, FormControlErrorText, FormControlErrorIcon, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control";
+import { Select, SelectTrigger, SelectInput, SelectIcon, SelectPortal, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectItem } from "@/components/ui/select";
+import { AlertCircleIcon, ChevronDownIcon } from "@/components/ui/icon";
+	
+function Example() {
+  return (
+    <FormControl isRequired isInvalid>
           <FormControlLabel>
             <FormControlLabelText>
               Choose your favorite color
@@ -797,9 +807,10 @@ The Select component with FormControl example demonstrates how to manage its sta
             <FormControlErrorText>Mandatory field</FormControlErrorText>
           </FormControlError>
         </FormControl>
-`,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx
index 00911b6da..77691dd85 100644
--- a/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx
@@ -32,8 +32,13 @@ This is an illustration of **Skeleton** component.
       padding: 20,
     }}
     metaData={{
-      code: `
-      <Box className="w-[325px] gap-4 p-3 rounded-md bg-background-100">
+      code: `import { Box } from "@/components/ui/box";
+import { HStack } from "@/components/ui/hstack";
+import { Skeleton, SkeletonText } from "@/components/ui/skeleton";
+	
+function Example() {
+  return (
+    <Box className="w-[325px] gap-4 p-3 rounded-md bg-background-100">
       <Skeleton variant="sharp" className="h-[150px]" />
       <SkeletonText _lines={3} className="h-3" />
       <HStack className="gap-2 align-middle">
@@ -41,9 +46,10 @@ This is an illustration of **Skeleton** component.
         <SkeletonText _lines={2} gap={1} className="h-2 w-2/5" />
       </HStack>
       </Box>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Wrapper, Skeleton, SkeletonText, Box, HStack  },
       argsType: {},
@@ -410,8 +416,17 @@ Use the `isLoaded` prop to show the content after the skeleton content is loaded
         padding: 20,
       }}
     metaData={{
-      code: `
-       <Box className="w-[290px] h-[400px] p-4 rounded-sm bg-background-100 gap-3">
+      code: `import { Avatar, AvatarFallbackText } from "@/components/ui/avatar";
+import { Box } from "@/components/ui/box";
+import { HStack } from "@/components/ui/hstack";
+import { Image } from "@/components/ui/image";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
+    <Box className="w-[290px] h-[400px] p-4 rounded-sm bg-background-100 gap-3">
         <Skeleton variant="rounded" className="h-44 w-64 rounded-sm" {...props}>
           <Image
           className="h-44 w-64 rounded-sm"
@@ -437,9 +452,10 @@ Use the `isLoaded` prop to show the content after the skeleton content is loaded
         <Text className="text-sm font-bold">John Smith</Text>
       </HStack>
       </Box>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Wrapper, Skeleton, SkeletonText, Box, Image, Text, HStack, VStack, Avatar, AvatarFallbackText },
       argsType: {
diff --git a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx
index bd262c8a3..4fa656a65 100644
--- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx
@@ -51,8 +51,12 @@ This is an illustration of **Slider** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-      <Center className="w-[300px] h-[150px]">
+      code: `import { Center } from "@/components/ui/center";
+import { Slider, SliderThumb, SliderTrack, SliderFilledTrack } from "@/components/ui/slider";
+	
+function Example() {
+  return (
+    <Center className="w-[300px] h-[150px]">
           <Slider  defaultValue={30} {...props}  >
             <SliderTrack>
               <SliderFilledTrack />
@@ -60,9 +64,10 @@ This is an illustration of **Slider** component.
             <SliderThumb />
           </Slider>
       </Center>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx
index 9642429b6..eb6459842 100644
--- a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx
@@ -29,11 +29,16 @@ This is an illustration of **Spinner** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Spinner {...props} color={colors.gray[500]} />
-      `,
+      code: `import { Spinner } from "@/components/ui/spinner";
+import colors from "tailwindcss/colors";
+	
+function Example() {
+  return (
+    <Spinner {...props} color={colors.gray[500]} />
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Wrapper, Spinner, colors },
       argsType: {
@@ -138,14 +143,20 @@ A Spinner component with a label provides informative text or a label alongside
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <HStack space="sm" >
+      code: `import { HStack } from "@/components/ui/hstack";
+import { Spinner } from "@/components/ui/spinner";
+import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <HStack space="sm" >
           <Spinner/>
           <Text size="md">Please Wait</Text>
         </HStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -167,17 +178,22 @@ A Spinner component with a color scheme enhances visual appeal by incorporating
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      <VStack space="md" >
-      {/* colors is imported from 'tailwindcss/colors' */}
+      code: `import { Spinner } from "@/components/ui/spinner";
+import { VStack } from "@/components/ui/vstack";
+import colors from "tailwindcss/colors";
+	
+function Example() {
+  return (
+    <VStack space="md" >
         <Spinner color={colors.indigo[600]} />
         <Spinner color={colors.emerald[600]} />
         <Spinner color={colors.amber[600]} />
         <Spinner color={colors.fuchsia[600]} />
       </VStack>
-    `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx
index 995dc17a6..69c0ffbc2 100644
--- a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx
@@ -38,15 +38,20 @@ This is an illustration of **Switch** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Switch {...props} trackColor={{ false: colors.neutral[300], true: colors.neutral[600] }}
+      code: `import { Switch } from "@/components/ui/switch";
+import colors from "tailwindcss/colors";
+	
+function Example() {
+  return (
+    <Switch {...props} trackColor={{ false: colors.neutral[300], true: colors.neutral[600] }}
           thumbColor={colors.neutral[50]}
           activeThumbColor={colors.neutral[50]}
           ios_backgroundColor={colors.neutral[300]} 
         />
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Wrapper, Switch, colors },
       argsType: {
@@ -337,8 +342,14 @@ An example of a switch component with a label, which includes another switch com
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <HStack space="md">
+      code: `import { HStack } from "@/components/ui/hstack";
+import { Switch } from "@/components/ui/switch";
+import { Text } from "@/components/ui/text";
+import colors from "tailwindcss/colors";
+	
+function Example() {
+  return (
+    <HStack space="md">
           <Switch
             trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
             thumbColor={colors.gray[50]}
@@ -347,9 +358,10 @@ An example of a switch component with a label, which includes another switch com
           />
           <Text size="sm" >Allow notifications</Text>
         </HStack>
-     `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -372,8 +384,14 @@ An example of a switch component used within a checked state component to repres
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <HStack space="md">
+      code: `import { HStack } from "@/components/ui/hstack";
+import { Switch } from "@/components/ui/switch";
+import { Text } from "@/components/ui/text";
+import colors from "tailwindcss/colors";
+	
+function Example() {
+  return (
+    <HStack space="md">
           <Switch
             defaultValue={true}
             trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
@@ -383,9 +401,10 @@ An example of a switch component used within a checked state component to repres
           />
           <Text size="sm" >Public profile</Text>
         </HStack>
-     `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx
index 435e88553..b1926e849 100644
--- a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx
@@ -56,7 +56,10 @@ This is an illustration of a **Table** component.
       overflow: 'scroll',
     }}
     metaData={{
-      code: `
+      code: `import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableData } from "@/components/ui/table";
+	
+function Example() {
+  return (
     <Table className="w-full">
       <TableHeader>
         <TableRow>
@@ -100,9 +103,10 @@ This is an illustration of a **Table** component.
         </TableRow>
       </TableFooter>
     </Table>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
        Table,
@@ -357,7 +361,9 @@ This is an example of a Table component with a caption.
       overflow: 'scroll',
     }}
     metaData={{
-      code: `
+      code: `import { Box } from "@/components/ui/box";
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableData, TableCaption } from "@/components/ui/table";
+	
 function App(){
     return (
         <Box className="rounded-lg overflow-hidden w-full">
@@ -407,8 +413,7 @@ function App(){
       </Table>
     </Box>
 );
-}
-`,
+}`,
 transformCode: (code) => {
 return transformedCode(code, 'function', 'App');
 },
@@ -443,7 +448,10 @@ This example demonstrates a table with a striped background.
       overflow: 'scroll',
     }}
     metaData={{
-      code: `
+      code: `import { Badge, BadgeText } from "@/components/ui/badge";
+import { Box } from "@/components/ui/box";
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableData } from "@/components/ui/table";
+	
 function App(){
     return (
          <Box className="p-3 bg-background-0 rounded-lg overflow-hidden">
@@ -547,8 +555,7 @@ function App(){
       </Table>
     </Box>
 );
-}
-`,
+}`,
 transformCode: (code) => {
 return transformedCode(code, 'function', 'App');
 },
@@ -584,7 +591,10 @@ This example illustrates a table component with a badge component.
       overflow: 'scroll',
     }}
     metaData={{
-      code: `
+      code: `import { Badge, BadgeText } from "@/components/ui/badge";
+import { Box } from "@/components/ui/box";
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableData } from "@/components/ui/table";
+	
 function App(){
     return (
  <Box className="rounded-lg overflow-hidden">
@@ -688,8 +698,7 @@ function App(){
       </Table>
     </Box>
 );
-}
-`,
+}`,
 transformCode: (code) => {
 return transformedCode(code, 'function', 'App');
 },
@@ -725,7 +734,9 @@ This example illustrates a table component with a top and a side header.
       overflow: 'scroll',
     }}
     metaData={{
-      code: `
+      code: `import { Box } from "@/components/ui/box";
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableData } from "@/components/ui/table";
+	
 function App(){
     return (
 <Box className="border border-solid border-outline-200 rounded-lg overflow-hidden w-full">
@@ -777,8 +788,7 @@ function App(){
       </Table>
     </Box>
 );
-}
-`,
+}`,
 transformCode: (code) => {
 return transformedCode(code, 'function', 'App');
 },
diff --git a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx
index 48231d83d..2741bc7a6 100644
--- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx
@@ -36,13 +36,17 @@ This is an illustration of **Text** component.
     showComponentRenderer={ true }
   showArgsController = { false}
   metaData = {{
-    code: `
-        <Text>
+    code: `import { Text } from "@/components/ui/text";
+	
+function Example() {
+  return (
+    <Text>
           Hello World!
         </Text>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
         scope: {
       Wrapper,
@@ -319,8 +323,10 @@ Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, `
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App() {
+      code: `import { Center } from "@/components/ui/center";
+import { Text } from "@/components/ui/text";
+	
+function App() {
           const sizes = [
             'xs',
             'sm',
@@ -340,8 +346,7 @@ Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, `
               ))}
             </Center>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
index 659f42381..d0b12ef8d 100644
--- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
@@ -44,15 +44,19 @@ This is an illustration of **Textarea** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Textarea {...props} className="w-64">
+      code: `import { Textarea, TextareaInput } from "@/components/ui/textarea";
+	
+function Example() {
+  return (
+    <Textarea {...props} className="w-64">
           <TextareaInput
             placeholder="Your text goes here..."
           />
         </Textarea>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -485,8 +489,12 @@ The Textarea Component can be incorporated within the FormControl.
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <FormControl size="sm" className="max-w-[200px] w-full">
+      code: `import { FormControl, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control";
+import { Textarea, TextareaInput } from "@/components/ui/textarea";
+	
+function Example() {
+  return (
+    <FormControl size="sm" className="max-w-[200px] w-full">
           <FormControlLabel>
             <FormControlLabelText>
               Write with me
@@ -501,9 +509,10 @@ The Textarea Component can be incorporated within the FormControl.
             </FormControlHelperText>
           </FormControlHelper>
         </FormControl>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
index eaae7cc96..71b558c58 100644
--- a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
@@ -61,8 +61,11 @@ This is an illustration of **Toast** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        function Example() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { useToast, Toast, ToastTitle, ToastDescription } from "@/components/ui/toast";
+import React from "react";
+	
+function Example() {
           const toast = useToast();
           const [toastId, setToastId] = React.useState(0);
           const handleToast = () => {
@@ -95,8 +98,7 @@ This is an illustration of **Toast** component.
               <ButtonText>Press Me</ButtonText>
             </Button>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
@@ -415,8 +417,15 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function Example() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { HStack } from "@/components/ui/hstack";
+import { Pressable } from "@/components/ui/pressable";
+import { useToast, Toast, ToastTitle, ToastDescription } from "@/components/ui/toast";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, CloseIcon, HelpCircleIcon } from "@/components/ui/icon";
+import React from "react";
+	
+function Example() {
           const toast = useToast();
           const [toastId, setToastId] = React.useState(0);
           const handleToast = () => {
@@ -470,8 +479,7 @@ The Examples section provides visual representations of the different variants o
               <ButtonText>Press Me</ButtonText>
             </Button>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
@@ -503,8 +511,15 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function Example() {
+      code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { useToast, Toast } from "@/components/ui/toast";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
           const toast = useToast();
           return (
             <Button
@@ -551,8 +566,7 @@ The Examples section provides visual representations of the different variants o
               <ButtonText>Show Toast</ButtonText>
             </Button>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
@@ -589,8 +603,17 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function Example() {
+      code: `import { Box } from "@/components/ui/box";
+import { Button, ButtonText, ButtonGroup } from "@/components/ui/button";
+import { HStack } from "@/components/ui/hstack";
+import { Pressable } from "@/components/ui/pressable";
+import { useToast, Toast, ToastTitle, ToastDescription } from "@/components/ui/toast";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, CloseIcon } from "@/components/ui/icon";
+import React from "react";
+import { RefreshCw } from "lucide-react-native";
+	
+function Example() {
         const toast = useToast();
         const [toastId, setToastId] = React.useState(0);
         const handleToast = () => {
@@ -613,7 +636,6 @@ The Examples section provides visual representations of the different variants o
                   className="p-4 gap-4 w-full max-w-[386px] bg-background-0 shadow-hard-2 flex-row"
                 >
                   <Box className="h-11 w-11 items-center justify-center hidden min-[400px]:flex bg-background-50">
-                    {/* RefreshCw is imported from 'lucide-react-native' */}
                     <Icon
                       as={RefreshCw}
                       size="xl"
@@ -658,8 +680,7 @@ The Examples section provides visual representations of the different variants o
             <ButtonText>Press Me</ButtonText>
           </Button>
         );
-      }
-      `,
+      }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
@@ -693,8 +714,13 @@ The Examples section provides visual representations of the different variants o
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-      function Example() {
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Divider } from "@/components/ui/divider";
+import { useToast, Toast, ToastTitle } from "@/components/ui/toast";
+import { Icon } from "@/components/ui/icon";
+import { Send } from "lucide-react-native";
+	
+function Example() {
           const toast = useToast();
           return (
             <Button
@@ -708,7 +734,6 @@ The Examples section provides visual representations of the different variants o
                         nativeID={toastId}
                         className="px-5 py-3 gap-4 shadow-soft-1 items-center flex-row"
                       >
-                        {/* Send is imported from 'lucide-react-native' */}
                         <Icon
                           as={Send}
                           size="xl"
@@ -728,8 +753,7 @@ The Examples section provides visual representations of the different variants o
               <ButtonText>Show Toast</ButtonText>
             </Button>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
diff --git a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx
index fbf81f108..8765539eb 100644
--- a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx
@@ -55,8 +55,12 @@ This is an illustration of **Tooltip** component.
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
-      code: `
-        <Tooltip
+      code: `import { Button, ButtonText } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipText } from "@/components/ui/tooltip";
+	
+function Example() {
+  return (
+    <Tooltip
           {...props}
           trigger={(triggerProps) => {
             return (
@@ -70,9 +74,10 @@ This is an illustration of **Tooltip** component.
            <TooltipText>Tooltip</TooltipText>
           </TooltipContent>
         </Tooltip>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: {
         Wrapper,
@@ -503,8 +508,15 @@ A tooltip component with an avatar is a user interface element that displays a s
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-       function App(){
+      code: `import { Avatar, AvatarFallbackText, AvatarGroup } from "@/components/ui/avatar";
+import { Box } from "@/components/ui/box";
+import { Center } from "@/components/ui/center";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { Tooltip, TooltipContent } from "@/components/ui/tooltip";
+import { VStack } from "@/components/ui/vstack";
+	
+function App(){
           return (
             <Box className="justify-center h-96">
               <AvatarGroup className="flex-row">
@@ -549,8 +561,7 @@ A tooltip component with an avatar is a user interface element that displays a s
               </AvatarGroup>
             </Box>
           );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
@@ -583,8 +594,15 @@ A tooltip component with an icon is a user interface element that provides conte
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        function App(){
+      code: `import { Avatar, AvatarFallbackText } from "@/components/ui/avatar";
+import { Box } from "@/components/ui/box";
+import { HStack } from "@/components/ui/hstack";
+import { Text } from "@/components/ui/text";
+import { Tooltip, TooltipContent } from "@/components/ui/tooltip";
+import { Icon, EditIcon } from "@/components/ui/icon";
+import { Command } from "lucide-react-native";
+	
+function App(){
           return (
             <Box className="h-96 justify-center">
               <Tooltip
@@ -615,8 +633,7 @@ A tooltip component with an icon is a user interface element that provides conte
               </Tooltip>
             </Box>
         );
-        }
-      `,
+        }`,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
diff --git a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
index 145264283..89cedd655 100644
--- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
@@ -37,17 +37,22 @@ This is an illustration of **VStack** component.
     showComponentRenderer={ true }
   showArgsController = { true}
   metaData = {{
-    code: `
-        <Box className='justify-center h-80'>
+    code: `import { Box } from "@/components/ui/box";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
+    <Box className='justify-center h-80'>
           <VStack {...props}>
             <Box  className="h-20 w-20 bg-primary-300" />
             <Box  className="h-20 w-20 bg-primary-400" />
             <Box  className="h-20 w-20 bg-primary-500" />
           </VStack>
         </Box>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
         scope: {
       Wrapper,
@@ -269,15 +274,20 @@ A VStack component with the reversed prop reverses the order of vertically stack
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
-      code: `
-        <VStack space='md'>
+      code: `import { Box } from "@/components/ui/box";
+import { VStack } from "@/components/ui/vstack";
+	
+function Example() {
+  return (
+    <VStack space='md'>
           <Box className='w-20 h-20 bg-primary-300' />
           <Box className='w-20 h-20 bg-primary-400' />
           <Box className='w-20 h-20 bg-primary-500' />
         </VStack>
-      `,
+  );
+}`,
       transformCode: (code) => {
-        return transformedCode(code);
+        return transformedCode(code, 'function', 'Example');
       },
       scope: { Box, Wrapper, VStack },
       argsType: {},

From bd1b4258110af95481f8fac8273035e4f5a56949 Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Fri, 24 Jan 2025 15:24:51 +0530
Subject: [PATCH 6/7] fix: imports is useBreakPoint value hook and Portal
 component import

---
 .../scripts/componentsImportList.js           |  1 +
 .../components/Portal/index.nw.stories.mdx    |  2 +-
 .../hooks/use-break-point-value.ts            |  2 +-
 .../core-components/nativewind/grid/index.tsx |  2 +-
 yarn.lock                                     | 31 ++-----------------
 5 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/example/storybook-nativewind/scripts/componentsImportList.js b/example/storybook-nativewind/scripts/componentsImportList.js
index 859289d8a..88e8d9ac9 100644
--- a/example/storybook-nativewind/scripts/componentsImportList.js
+++ b/example/storybook-nativewind/scripts/componentsImportList.js
@@ -134,6 +134,7 @@ export const componentsImportMap = {
     'PopoverBody',
     'PopoverContent',
   ],
+  'portal': ['Portal'],
   'pressable': ['Pressable'],
   'progress': ['Progress', 'ProgressFilledTrack'],
   'radio': ['Radio', 'RadioGroup', 'RadioIndicator', 'RadioLabel', 'RadioIcon'],
diff --git a/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx
index b8d723803..df6130870 100644
--- a/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx
@@ -52,7 +52,7 @@ import { HStack } from "@/components/ui/hstack";
 import { Text } from "@/components/ui/text";
 import { CloseIcon } from "@/components/ui/icon";
 import React from "react";
-import { Portal } from "lucide-react-native";
+import { Portal } from "@/components/ui/portal";
 	
 function App(){
           const [visible, setVisible] = React.useState(false);
diff --git a/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts b/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts
index f50c91e62..d88593295 100644
--- a/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts
+++ b/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts
@@ -2,7 +2,7 @@ import { Dimensions, useWindowDimensions } from 'react-native';
 import { useEffect, useState } from 'react';
 
 import resolveConfig from 'tailwindcss/resolveConfig';
-import tailwindConfig from 'tailwind.config';
+import * as tailwindConfig from '@/tailwind.config';
 
 const TailwindTheme = resolveConfig(tailwindConfig as any);
 const screenSize = TailwindTheme.theme.screens;
diff --git a/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx
index 8df058665..7e0d36b98 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx
@@ -13,7 +13,7 @@ import { cssInterop } from 'nativewind';
 import {
   useBreakpointValue,
   getBreakPointValue,
-} from '../../hooks/use-break-point-value';
+} from '@/components/ui/utils/use-break-point-value';
 
 const { width: DEVICE_WIDTH } = Dimensions.get('window');
 
diff --git a/yarn.lock b/yarn.lock
index 4882a525c..b3afa25c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20385,16 +20385,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -20514,7 +20505,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -20542,13 +20533,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -22548,7 +22532,7 @@ worker-rpc@^0.1.0:
   dependencies:
     microevent.ts "~0.1.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -22575,15 +22559,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 28718337fce60e7b73a5118e5296cf3df452e8f4 Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Fri, 24 Jan 2025 15:26:30 +0530
Subject: [PATCH 7/7] fix: tailwindcss version

---
 .../src/core-components/nativewind/dependencies.json            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json
index ffa53f067..9f0d9b6a3 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json
+++ b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json
@@ -2,7 +2,7 @@
   "components": {
     "gluestack-ui-provider": {
       "dependencies": {
-        "tailwindcss": "",
+        "tailwindcss": "3.4.17",
         "@gluestack-ui/overlay": "latest",
         "@gluestack-ui/toast": "latest",
         "@gluestack-ui/nativewind-utils": "latest",