diff --git a/.github/workflows/trigger-ui-update-docs.yml b/.github/workflows/trigger-ui-update-docs.yml
new file mode 100644
index 0000000000..f5f8be606b
--- /dev/null
+++ b/.github/workflows/trigger-ui-update-docs.yml
@@ -0,0 +1,25 @@
+name: Trigger gluestack-style-website | Create PR when pushed to master
+
+on:
+  pull_request:
+    branches:
+      - patch
+
+jobs:
+  build:
+    name: Dispatch to 'gluestack-style-website'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Emit repository_dispatch
+        uses: mvasigh/dispatch-action@main
+        with:
+          # You should create a personal access token and store it in your repository
+          token: ${{ secrets.MY_GITHUB_TOKEN }}
+          repo: ui-website
+          owner: gluestack
+          event_type: build_ui_docs
+          message: |
+            {
+              "repo": "ui",
+              "branch": "${{ github.head_ref }}"
+            }
diff --git a/.prettierignore b/.prettierignore
index a56a7ef437..3984825263 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,2 @@
 node_modules
-
+*.mdx
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1fb8e30a75..c2896b9710 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,7 +17,13 @@
   "prettier.ignorePath": ".prettierignore",
   // If true, puts the `>` of a multi-line jsx element at the end of the last line instead of being alone on the next line
   "editor.wordWrap": "on",
-  "cSpell.words": ["Actionsheet", "gluestack", "nativewind", "themeable"],
+  "cSpell.words": [
+    "Actionsheet",
+    "gluestack",
+    "nativewind",
+    "tailwindcss",
+    "themeable"
+  ],
   "cSpell.enableFiletypes": ["mdx"],
   "tailwindCSS.experimental.classRegex": [
     ["tva\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js
index 31f92fb93f..9b4bbf185a 100644
--- a/example/storybook-nativewind/.storybook/preview.js
+++ b/example/storybook-nativewind/.storybook/preview.js
@@ -3,12 +3,12 @@ import { DocsContainer } from '@storybook/addon-docs/blocks';
 import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
 
-import { GluestackUIProvider as GluestackUIWithNativewindProvider } from '../src/components-example/nativewind/GluestackUIProvider';
+import { GluestackUIProvider as GluestackUIWithNativewindProvider } from '../src/core-components/nativewind/gluestack-ui-provider';
 
 // global css getting resolved from babel.config.js
 import 'global.css';
 
-import { GluestackUIProvider as GluestackUIWithGluestackStyleProvider } from '../src/components-example/themed/GluestackUIProvider';
+import { GluestackUIProvider as GluestackUIWithGluestackStyleProvider } from '../src/core-components/themed/gluestack-ui-provider';
 
 import gstheme from './gstheme';
 import { themes } from '@storybook/theming';
diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js
index a6d51a3d52..2f1016e1de 100644
--- a/example/storybook-nativewind/babel.config.js
+++ b/example/storybook-nativewind/babel.config.js
@@ -14,8 +14,8 @@ module.exports = function (api) {
           alias: {
             '@/components/ui':
               process.env.STYLE_ENGINE === 'nativewind'
-                ? path.resolve(__dirname, './src/components-example/nativewind')
-                : path.resolve(__dirname, './src/components-example/themed'),
+                ? path.resolve(__dirname, './src/core-components/nativewind')
+                : path.resolve(__dirname, './src/core-components/themed'),
 
             'global.css':
               process.env.STYLE_ENGINE === 'nativewind'
@@ -46,6 +46,10 @@ module.exports = function (api) {
               __dirname,
               '../../packages/unstyled/button/src'
             ),
+            '@gluestack-ui/link': path.resolve(
+              __dirname,
+              '../../packages/unstyled/link/src'
+            ),
             '@gluestack-ui/accordion': path.resolve(
               __dirname,
               '../../packages/unstyled/accordion/src'
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Box/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Box/index.tsx
deleted file mode 100644
index e4c5400c8b..0000000000
--- a/example/storybook-nativewind/src/components-example/nativewind/Box/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils';
-
-const boxStyle = tva({});
-const Box = React.forwardRef(({ className, ...props }: any, ref) => {
-  return (
-    <View ref={ref} {...props} className={boxStyle({ class: className })} />
-  );
-});
-
-Box.displayName = 'Box';
-export { Box };
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx
deleted file mode 100644
index 10812670c3..0000000000
--- a/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { createLink } from '@gluestack-ui/link';
-import { Pressable, Text, Platform } from 'react-native';
-import {
-  tva,
-  withStyleContextAndStates,
-  withStyleContext,
-} from '@gluestack-ui/nativewind-utils';
-import React from 'react';
-import { cssInterop } from 'nativewind';
-export const UILink = createLink({
-  // @ts-ignore
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(Pressable)
-      : withStyleContextAndStates(Pressable),
-  Text: Text,
-});
-
-cssInterop(UILink, { className: 'style' });
-cssInterop(UILink.Text, { className: 'style' });
-
-const linkStyle = tva({
-  base: 'web:outline-0 web:disabled:cursor-not-allowed web:focus-visible:outline-2 web:focus-visible:outline-primary-700 web:focus-visible:outline',
-});
-
-const linkTextStyle = tva({
-  base: 'underline text-info-700 hover:text-info-600 hover:no-underline active:text-info-700 disabled:opacity-40',
-});
-
-export const Link = React.forwardRef(({ className, ...props }: any, ref) => {
-  return (
-    <UILink
-      ref={ref}
-      {...props}
-      className={linkStyle({ class: className })}
-      context={{}}
-    />
-  );
-});
-
-export const LinkText = React.forwardRef(
-  ({ className, ...props }: any, ref) => {
-    return (
-      <UILink.Text
-        ref={ref}
-        {...props}
-        className={linkTextStyle({
-          class: className,
-        })}
-      />
-    );
-  }
-);
diff --git a/example/storybook-nativewind/src/components-example/nativewind/VStack/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/VStack/index.tsx
deleted file mode 100644
index bca5d509c8..0000000000
--- a/example/storybook-nativewind/src/components-example/nativewind/VStack/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils';
-import { View } from 'react-native';
-
-const vstackStyle = tva({
-  base: 'flex-column',
-  variants: {
-    space: {
-      'xs': 'gap-1',
-      'sm': 'gap-2',
-      'md': 'gap-3',
-      'lg': 'gap-4',
-      'xl': 'gap-5',
-      '2xl': 'gap-6',
-      '3xl': 'gap-7',
-      '4xl': 'gap-8',
-    },
-    reversed: {
-      true: 'flex-col-reverse',
-    },
-  },
-});
-
-const VStack = ({ className, space, reversed, ...props }: any) => {
-  return (
-    <View
-      className={vstackStyle({ space, reversed, class: className })}
-      {...props}
-    />
-  );
-};
-
-VStack.displayName = 'VStack';
-
-export { VStack };
diff --git a/example/storybook-nativewind/src/components-example/themed/Link/index.tsx b/example/storybook-nativewind/src/components-example/themed/Link/index.tsx
deleted file mode 100644
index f95f84ce27..0000000000
--- a/example/storybook-nativewind/src/components-example/themed/Link/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { styled } from '@gluestack-style/react';
-import { createLink } from '@gluestack-ui/link';
-import { Pressable, Text } from 'react-native';
-
-const StyledRoot = styled(
-  Pressable,
-  {
-    _web: {
-      'outlineWidth': 0,
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
-      ':focusVisible': {
-        outlineWidth: 2,
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-      },
-    },
-    _text: {
-      ':hover': {
-        color: '$info600',
-        textDecorationLine: 'none',
-      },
-
-      ':active': {
-        color: '$info700',
-      },
-
-      ':disabled': {
-        opacity: 0.4,
-      },
-    },
-  },
-  {
-    componentName: 'Link',
-  } as const
-);
-
-const StyledText = styled(
-  Text,
-  {
-    textDecorationLine: 'underline',
-    color: '$info700',
-  },
-  {
-    ancestorStyle: ['_text'],
-  } as const
-);
-
-export const Link = createLink({
-  Root: StyledRoot,
-  Text: StyledText,
-});
-export const LinkText = Link.Text;
diff --git a/example/storybook-nativewind/src/components-example/themed/index.ts b/example/storybook-nativewind/src/components-example/themed/index.ts
deleted file mode 100644
index fbef73b84a..0000000000
--- a/example/storybook-nativewind/src/components-example/themed/index.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export * from './Button';
-export * from './Accordion';
-export * from './Actionsheet';
-export * from './Alert';
-export * from './AlertDialog';
-export * from './Avatar';
-export * from './Badge';
-export * from './Box';
-export * from './Card';
-export * from './FlatList';
-export * from './Center';
-export * from './Checkbox';
-export * from './HStack';
-export * from './Pressable';
-export * from './Icon';
-export * from './Heading';
-export * from './Divider';
-export * from './Fab';
-export * from './FormControl';
-export * from './Input';
-export * from './InputAccessoryView';
-export * from './Image';
-export * from './KeyboardAvoidingView';
-export * from './LinearGradient';
-export * from './Link';
-export * from './Menu';
-export * from './Modal';
-export * from './Popover';
-export * from './Progress';
-export * from './Text';
-export * from './Radio';
-export * from './ScrollView';
-export * from './SafeAreaView';
-export * from './Select';
-export * from './Slider';
-export * from './Spinner';
-export * from './StatusBar';
-export * from './SectionList';
-export * from './Switch';
-export * from './Textarea';
-export * from './Toast';
-export * from './Tooltip';
-export * from './View';
-export * from './VStack';
-export { GluestackUIProvider } from './GluestackUIProvider';
-export * from './VirtualizedList';
-export * from './RefreshControl';
-export * from './ImageBackground';
diff --git a/example/storybook-nativewind/src/components/Accordion/Accordion.tsx b/example/storybook-nativewind/src/components/Accordion/Accordion.tsx
index 992e06a004..a22452fb6f 100644
--- a/example/storybook-nativewind/src/components/Accordion/Accordion.tsx
+++ b/example/storybook-nativewind/src/components/Accordion/Accordion.tsx
@@ -8,7 +8,7 @@ import {
   AccordionIcon,
   AccordionContent,
   AccordionContentText,
-} from '@/components/ui/Accordion';
+} from '@/components/ui/accordion';
 import {
   ChevronDownIcon,
   ChevronUpIcon,
diff --git a/example/storybook-nativewind/src/components/Accordion/index.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.stories.mdx
index 900983f754..e52f1eb2da 100644
--- a/example/storybook-nativewind/src/components/Accordion/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Accordion/index.stories.mdx
@@ -42,7 +42,7 @@ import { transformedCode } from '../../utils';
 
 <Meta title="common/components/Accordion" />
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Accordion** component.
 
diff --git a/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx
index 5ac2900f98..7fbc58b159 100644
--- a/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx
@@ -1,5 +1,4 @@
 ---
-
 title: Accordion | gluestack-ui | Installation, Usage, and API
 
 description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
@@ -9,7 +8,7 @@ pageTitle: Accordion
 pageDescription: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
 
 showHeader: true
-
+---
 import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Disclosure/Accordion" />
@@ -28,7 +27,7 @@ import {
   ChevronUpIcon,
   PlusIcon,
   MinusIcon,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 import {
   AppProvider,
   CodePreview,
@@ -40,8 +39,8 @@ import {
   Alert,
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-import { config } from '../../components-example/themed/GluestackUIProvider/config';
-import Wrapper from '../../components-example/themed/Wrapper';
+import { config } from '../../core-components/themed/gluestack-ui-provider/config';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 # Accordion
 
diff --git a/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx b/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
index 3d4aacd699..298d687f37 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
@@ -34,7 +34,7 @@ import {
   ActionsheetSectionList,
   ActionsheetSectionHeaderText,
   ActionsheetVirtualizedList,
-} from '@/components/ui/Actionsheet';
+} from '@/components/ui/actionsheet';
 
 const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => {
   const [showActionsheet, setShowActionsheet] = React.useState(false);
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx
index 622b5fde49..a47636e23b 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx
+++ b/example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx
@@ -65,17 +65,17 @@ import {
   Alert,
 } from '@gluestack/design-system';
 import { config } from '@gluestack-ui/config';
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Actionsheet** component.
 
-<Wrapper config={config}>
+< Wrapper config = { config } >
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { false}
+  metaData = {{
+    code: `
 function App(){
   const [showActionsheet, setShowActionsheet] = React.useState(false);
   const handleClose = () => setShowActionsheet(!showActionsheet);
@@ -114,8 +114,8 @@ function App(){
       transformCode: (code) => {
         return transformedCode(code, 'function', 'App');
       },
-      scope: {
-        Button,
+        scope: {
+      Button,
         ButtonText,
         ButtonText,
         Actionsheet,
@@ -128,11 +128,12 @@ function App(){
         Wrapper,
         Box,
       },
-    }}
-  />
+  }
+}
+/>
 </Wrapper>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -147,9 +148,11 @@ npm i @gluestack-ui/actionsheet
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Actionsheet/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/actionsheet/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -159,7 +162,7 @@ npm i @gluestack-ui/actionsheet
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Actionsheet } from '@/components/ui/Actionsheet';
+import { Actionsheet } from '@/components/ui/actionsheet';
 ```
 
 ```jsx
@@ -559,11 +562,11 @@ We have outlined the various features that ensure the Actionsheet component is a
 Explore the comprehensive details of the Actionsheet in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
 
 <iframe
-  style={{
-    borderRadius: '8px',
+style = {{
+  borderRadius: '8px',
     border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
+      aspectRatio: 736 / 585,
   }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6203-27912%26t%3DzQi1VCxZQbqoZ7AP-1%26scaling%3Dscale-down%26page-id%3D6203%253A25990%26starting-point-node-id%3D6203%253A27912%26mode%3Ddesign"
-  allowFullScreen
-/>
+src = "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6203-27912%26t%3DzQi1VCxZQbqoZ7AP-1%26scaling%3Dscale-down%26page-id%3D6203%253A25990%26starting-point-node-id%3D6203%253A27912%26mode%3Ddesign"
+allowFullScreen
+  />
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx
index 82d94361de..ab786f53ee 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx
@@ -64,7 +64,7 @@ import {
   Alert,
 } from '@gluestack/design-system';
 import { config } from '@gluestack-ui/config';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Actionsheet** component.
 
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
index faa69319c4..04f7b06ac3 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
@@ -33,8 +33,6 @@ import {
   Button,
   ButtonText,
   Box,
-} from './Actionsheet';
-import {
   VStack,
   Input,
   InputIcon,
@@ -46,13 +44,20 @@ import {
   FormControlHelper,
   FormControlHelperText,
   HStack,
+  Image,
+  Text,
+  PlayIcon,
+  FavouriteIcon,
+  CloseIcon,
+  Icon,
+  TrashIcon,
+  ShareIcon
+} from '../../core-components/themed';
+import {
   KeyboardAvoidingView,
   Platform,
 } from '@gluestack-ui/themed';
 import { LeadingIcon, IconRoot } from '@gluestack-ui/themed';
-import { Image, Text } from '@gluestack-ui/themed';
-import { Icon, TrashIcon, ShareIcon } from '@gluestack-ui/themed';
-import { PlayIcon, FavouriteIcon, CloseIcon } from '@gluestack-ui/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -65,7 +70,7 @@ import {
   Alert,
 } from '@gluestack/design-system';
 import { config } from '@gluestack-ui/config';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Actionsheet** component.
@@ -147,7 +152,11 @@ npm i @gluestack-ui/actionsheet
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Actionsheet/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/actionsheet/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -157,7 +166,7 @@ npm i @gluestack-ui/actionsheet
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Actionsheet } from '@/components/ui/Actionsheet';
+import { Actionsheet } from '@/components/ui/actionsheet';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Alert/Alert.tsx b/example/storybook-nativewind/src/components/Alert/Alert.tsx
index b6623702df..7b035ab410 100644
--- a/example/storybook-nativewind/src/components/Alert/Alert.tsx
+++ b/example/storybook-nativewind/src/components/Alert/Alert.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
+import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
 import {
   InfoIcon,
   CheckCircleIcon,
   CloseCircleIcon,
   BellIcon,
   AlertCircleIcon,
-  VStack,
   Icon,
-} from '@gluestack-ui/themed';
-
-import { Alert, AlertIcon, AlertText } from '@/components/ui/Alert';
+} from '@/components/ui/icon';
+import { VStack } from '@/components/ui/vstack';
+import { Center } from '@/components/ui/center';
+import { HStack } from '@/components/ui/hstack';
 
 const AlertBasic = ({ ...props }: any) => {
   return (
-    <Alert {...props} gap="$3">
+    <Alert {...props} className="gap-3">
       <AlertIcon as={InfoIcon} />
       <AlertText>Selection successfully moved!</AlertText>
     </Alert>
@@ -36,4 +37,6 @@ export {
   AlertCircleIcon,
   Icon,
   VStack,
+  Center,
+  HStack,
 };
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 a04790a58d..6a74705b43 100644
--- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
@@ -1,5 +1,5 @@
 ---
-title: gluestack-ui Slider Alert | Installation, Usage, and API
+title: gluestack-ui Alert Component | Installation, Usage, and API
 
 description: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
 
@@ -14,19 +14,22 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Feedback/Alert" />
 
-import { Alert, AlertIcon, AlertText } from './Alert';
 import {
+  Alert,
+  AlertIcon,
+  AlertText,
+  InfoIcon,
   CheckCircleIcon,
   CloseCircleIcon,
-  Icon,
   BellIcon,
   AlertCircleIcon,
-  Center,
+  Icon,
   VStack,
-  InfoIcon,
-} from '@gluestack-ui/themed';
+  Center,
+  HStack,
+} from '../../core-components/nativewind';
+
 
-import { HStack } from '@gluestack-ui/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -36,8 +39,7 @@ import {
   TableContainer,
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
-
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 
 This is an illustration of **Alert** component.
 
@@ -48,7 +50,7 @@ This is an illustration of **Alert** component.
     showArgsController={true}
     metaData={{
       code: `
-        <Alert className="mx-2.5"  {...props}>
+        <Alert className="mx-2.5" {...props}>
           <AlertIcon as={InfoIcon} className="mr-3"  />
           <AlertText>
             We have updated our terms of service. Please review and accept to continue using our service.
@@ -96,9 +98,11 @@ npm i @gluestack-ui/alert
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Alert/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/alert/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -108,7 +112,7 @@ npm i @gluestack-ui/alert
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Alert, AlertIcon, AlertText } from '@/components/ui/Alert';
+import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
 ```
 
 ```jsx
@@ -140,17 +144,96 @@ Contains all spinner related layout style props and actions. It inherits all the
 
 Alert component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props).
 
-<!--
-## Spec Doc
+#### Alert
 
-Explore the comprehensive details of the Alert in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Name</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Value</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>action</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>error | warning | success | info | muted</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>info</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>variant</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>solid | outline | accent</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>solid</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Alert with Heading
+
+An example of an alert component with a heading, which further contains another alert component for displaying supplementary information.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Alert action='success'>
+          <AlertIcon as={CheckCircleIcon} size="xl" className='mr-3' />
+          <VStack space='xs'>
+            <AlertText className='font-bold' >
+              Congratulations!
+            </AlertText >
+            <AlertText >
+              Thank you for your submission. You will receive a confirmation email shortly.
+            </AlertText>
+          </VStack>
+        </Alert>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Alert,
+        AlertIcon,
+        AlertText,
+        Wrapper,
+        CheckCircleIcon,
+        VStack,
+        Icon,
+      },
+      argsType: {},
+    }}
+/>
 
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6300-43142%26t%3DZPsVa5mi34R2dR7W-1%26scaling%3Dscale-down%26page-id%3D6300%253A41240%26starting-point-node-id%3D6300%253A43142%26mode%3Ddesign"
-  allowFullScreen
-/> -->
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx
index 035a777a83..2990fbab5a 100644
--- a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx
@@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Feedback/Alert" />
 
-import { Alert, AlertIcon, AlertText } from './Alert';
+import { Alert, AlertIcon, AlertText } from '../../core-components/themed';
 import {
   CheckCircleIcon,
   CloseCircleIcon,
@@ -24,9 +24,9 @@ import {
   Center,
   VStack,
   InfoIcon,
-} from '@gluestack-ui/themed';
+} from '../../core-components/themed';
 
-import { HStack } from '@gluestack-ui/themed';
+import { HStack } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -37,7 +37,7 @@ import {
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Alert** component.
 
@@ -96,7 +96,11 @@ npm i @gluestack-ui/alert
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Alert/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/alert/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -106,7 +110,7 @@ npm i @gluestack-ui/alert
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Alert, AlertIcon, AlertText } from '@/components/ui/Alert';
+import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/AlertDialog/AlertDialog.tsx b/example/storybook-nativewind/src/components/AlertDialog/AlertDialog.tsx
index edaf9e4b52..6b3259b546 100644
--- a/example/storybook-nativewind/src/components/AlertDialog/AlertDialog.tsx
+++ b/example/storybook-nativewind/src/components/AlertDialog/AlertDialog.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { Button, ButtonText } from '@/components/ui/Button';
-import { Text } from '@/components/ui/Text';
-import { Heading } from '@/components/ui/Heading';
+import { Button, ButtonText } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { Heading } from '@/components/ui/heading';
 import { X } from 'lucide-react-native';
 
 import {
@@ -12,7 +12,7 @@ import {
   AlertDialogCloseButton,
   AlertDialogFooter,
   AlertDialogBody,
-} from '@/components/ui/AlertDialog';
+} from '@/components/ui/alert-dialog';
 
 const AlertDialogBasic = ({ ...props }) => {
   const [showAlertDialog, setShowAlertDialog] = useState(false);
diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.nw.storiesold.mdx
index f9e64314a6..99aa329449 100644
--- a/example/storybook-nativewind/src/components/AlertDialog/index.nw.storiesold.mdx
+++ b/example/storybook-nativewind/src/components/AlertDialog/index.nw.storiesold.mdx
@@ -22,7 +22,7 @@ import {
   AlertDialogCloseButton,
   AlertDialogFooter,
   AlertDialogBody,
-} from './AlertDialog';
+} from '../../core-components/nativewind';
 import {
   CloseIcon,
   Button,
@@ -31,9 +31,9 @@ import {
   Center,
   HStack,
   AlertTriangleIcon,
-} from '@gluestack-ui/themed';
-import { Heading, Icon, AlertCircleIcon } from '@gluestack-ui/themed';
-import { Text, CheckCircleIcon } from '@gluestack-ui/themed';
+} from '../../core-components/nativewind;
+import { Heading, Icon, AlertCircleIcon } from '../../core-components/nativewind';
+import { Text, CheckCircleIcon } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -44,16 +44,16 @@ import {
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 
 This is an illustration of **AlertDialog** component.
 
 <Wrapper>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { false}
+  metaData = {{
+    code: `
         function Example(){
           const [showAlertDialog, setShowAlertDialog] = React.useState(false);
           return (
@@ -111,8 +111,8 @@ This is an illustration of **AlertDialog** component.
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         AlertDialog,
         AlertDialogBackdrop,
         AlertDialogContent,
@@ -130,12 +130,13 @@ This is an illustration of **AlertDialog** component.
         Icon,
         AlertCircleIcon,
       },
-      argsType: {},
-    }}
-  />
+    argsType: { },
+  }
+}
+/>
 </Wrapper>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -150,9 +151,11 @@ npm i @gluestack-ui/alert-dialog
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-%%-- File: components-example/nativewind/AlertDialog/index.tsx --%% 
+
+```jsx 
+%%-- File: core-components/nativewind/alert-dialog/index.tsx --%% 
 ```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -531,11 +534,11 @@ AlertDialog component is created using View component from react-native. It exte
 Explore the comprehensive details of the AlertDialog in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
 
 <iframe
-  style={{
-    borderRadius: '8px',
+style = {{
+  borderRadius: '8px',
     border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
+      aspectRatio: 736 / 585,
   }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5653%253A34732%26type%3Ddesign%26node-id%3D5658-36648%26viewport%3D1433%252C11%252C0.08%26t%3DWy4Bx2pKvlcvatlJ-1%26scaling%3Dcontain%26starting-point-node-id%3D5658%253A36648%26mode%3Ddesign"
-  allowFullScreen
-/>
+src = "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5653%253A34732%26type%3Ddesign%26node-id%3D5658-36648%26viewport%3D1433%252C11%252C0.08%26t%3DWy4Bx2pKvlcvatlJ-1%26scaling%3Dcontain%26starting-point-node-id%3D5658%253A36648%26mode%3Ddesign"
+allowFullScreen
+  />
diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
index 3a56cadd8c..83d4d68fad 100644
--- a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
@@ -22,7 +22,7 @@ import {
   AlertDialogCloseButton,
   AlertDialogFooter,
   AlertDialogBody,
-} from './AlertDialog';
+} from '../../core-components/themed';
 import {
   CloseIcon,
   Button,
@@ -32,8 +32,8 @@ import {
   HStack,
   AlertTriangleIcon,
 } from '@gluestack-ui/themed';
-import { Heading, Icon, AlertCircleIcon } from '@gluestack-ui/themed';
-import { Text, CheckCircleIcon } from '@gluestack-ui/themed';
+import { Heading, Icon, AlertCircleIcon } from '../../core-components/themed';
+import { Text, CheckCircleIcon } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -44,16 +44,16 @@ import {
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **AlertDialog** component.
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { false}
+  metaData = {{
+    code: `
         function Example(){
           const [showAlertDialog, setShowAlertDialog] = React.useState(false);
           return (
@@ -111,8 +111,8 @@ This is an illustration of **AlertDialog** component.
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         AlertDialog,
         AlertDialogBackdrop,
         AlertDialogContent,
@@ -130,12 +130,13 @@ This is an illustration of **AlertDialog** component.
         Icon,
         AlertCircleIcon,
       },
-      argsType: {},
-    }}
-  />
+    argsType: { },
+  }
+}
+/>
 </>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -151,8 +152,8 @@ npm i @gluestack-ui/alert-dialog
 
 <CollapsibleCode>
 
-```jsx
-%%-- File: components-example/themed/AlertDialog/index.tsx --%%
+```jsx 
+%%-- File: core-components/themed/alert-dialog/index.tsx --%% 
 ```
 
 </CollapsibleCode>
@@ -209,7 +210,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
           </Table.TH>
           <Table.TH>
             <Table.TText>Type</Table.TText>
-          </Table.TH>
+         </Table.TH>
           <Table.TH>
             <Table.TText>Default</Table.TText>
           </Table.TH>
@@ -353,7 +354,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
               <InlineCode>isKeyboardDismissable</InlineCode>
             </Table.TText>
           </Table.TD>
-          <Table.TD>
+          <Table.TD >
             <Table.TText>boolean</Table.TText>
           </Table.TD>
           <Table.TD>
@@ -413,7 +414,6 @@ Props to style child components.
         </Table.TR>
       </Table.TBody>
     </Table>
-
   </TableContainer>
 </>
 
@@ -440,7 +440,7 @@ Props to style child components.
           <Table.TH>
             <Table.TText>Sx Prop</Table.TText>
           </Table.TH>
-          <Table.TH>
+          <Table.TH >
             <Table.TText>Description</Table.TText>
           </Table.TH>
         </Table.TR>
@@ -501,7 +501,7 @@ AlertDialog component is created using View component from react-native. It exte
           <Table.TH>
             <Table.TText>Name</Table.TText>
           </Table.TH>
-          <Table.TH>
+          <Table.TH >
             <Table.TText>Value</Table.TText>
           </Table.TH>
           <Table.TH>
@@ -533,11 +533,11 @@ AlertDialog component is created using View component from react-native. It exte
 Explore the comprehensive details of the AlertDialog in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
 
 <iframe
-  style={{
-    borderRadius: '8px',
+style = {{
+  borderRadius: '8px',
     border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
+      aspectRatio: 736 / 585,
   }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5653%253A34732%26type%3Ddesign%26node-id%3D5658-36648%26viewport%3D1433%252C11%252C0.08%26t%3DWy4Bx2pKvlcvatlJ-1%26scaling%3Dcontain%26starting-point-node-id%3D5658%253A36648%26mode%3Ddesign"
-  allowFullScreen
-/>
+src = "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5653%253A34732%26type%3Ddesign%26node-id%3D5658-36648%26viewport%3D1433%252C11%252C0.08%26t%3DWy4Bx2pKvlcvatlJ-1%26scaling%3Dcontain%26starting-point-node-id%3D5658%253A36648%26mode%3Ddesign"
+allowFullScreen
+  />
diff --git a/example/storybook-nativewind/src/components/Avatar/Avatar.tsx b/example/storybook-nativewind/src/components/Avatar/Avatar.tsx
index 4e4dfaf4bb..f2a005f0d8 100644
--- a/example/storybook-nativewind/src/components/Avatar/Avatar.tsx
+++ b/example/storybook-nativewind/src/components/Avatar/Avatar.tsx
@@ -1,31 +1,28 @@
 import React from 'react';
-
-import { VStack, HStack, Icon, Heading, Text } from '@gluestack-ui/themed';
 import {
   Avatar,
   AvatarGroup,
   AvatarBadge,
   AvatarFallbackText,
   AvatarImage,
-} from '@/components/ui/Avatar';
+} from '@/components/ui/avatar';
 import { User } from 'lucide-react-native';
+import { HStack } from '@/components/ui/hstack';
+import { VStack } from '@/components/ui/vstack';
+import { Icon } from '@/components/ui/icon';
+import { Heading } from '@/components/ui/heading';
+import { Text } from '@/components/ui/text';
 
-const AvatarBasic = ({
-  size = 'md',
-  uri = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
-  badge = true,
-  fallbackText = 'John Doe',
-  ...props
-}: any) => {
+const AvatarBasic = (props: any) => {
   return (
-    <Avatar size={size} {...props} bg="$red400">
-      <AvatarFallbackText>{fallbackText}</AvatarFallbackText>
+    <Avatar {...props}>
+      <AvatarFallbackText>{props.fallbackText}</AvatarFallbackText>
       <AvatarImage
         source={{
-          uri: uri,
+          uri: props.uri,
         }}
       />
-      {badge && <AvatarBadge />}
+      {props.badge && <AvatarBadge />}
     </Avatar>
   );
 };
diff --git a/example/storybook-nativewind/src/components/Avatar/AvatarGroup.tsx b/example/storybook-nativewind/src/components/Avatar/AvatarGroup.tsx
index 5a6b54da34..f50ce40498 100644
--- a/example/storybook-nativewind/src/components/Avatar/AvatarGroup.tsx
+++ b/example/storybook-nativewind/src/components/Avatar/AvatarGroup.tsx
@@ -5,7 +5,7 @@ import {
   AvatarBadge,
   AvatarFallbackText,
   AvatarImage,
-} from '@/components/ui/Avatar';
+} from '@/components/ui/avatar';
 import React from 'react';
 import { HStack } from '@gluestack-ui/themed';
 
diff --git a/example/storybook-nativewind/src/components/Avatar/AvatarSizes.tsx b/example/storybook-nativewind/src/components/Avatar/AvatarSizes.tsx
index 00a1131d85..bc62e62378 100644
--- a/example/storybook-nativewind/src/components/Avatar/AvatarSizes.tsx
+++ b/example/storybook-nativewind/src/components/Avatar/AvatarSizes.tsx
@@ -4,7 +4,7 @@ import {
   AvatarBadge,
   AvatarFallbackText,
   AvatarImage,
-} from '@/components/ui/Avatar';
+} from '@/components/ui/avatar';
 import { VStack } from '@gluestack-ui/themed';
 import React from 'react';
 
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 305d6728ca..ac0b4f4b71 100644
--- a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
@@ -1,8 +1,12 @@
 ---
-title: Avatar | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Avatar Component | Installation, Usage, and API
+
 description: The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.
+
 pageTitle: Avatar
+
 pageDescription: The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.
+
 showHeader: true
 ---
 
@@ -16,15 +20,14 @@ import {
   AvatarBadge,
   AvatarFallbackText,
   AvatarImage,
-} from './Avatar';
-import {
   HStack,
   VStack,
   Text,
   Icon,
   Heading,
-  User,
-} from '@gluestack-ui/themed';
+} from '../../core-components/nativewind';
+import { User } from "lucide-react-native";
+import colors from 'tailwindcss/colors';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -35,42 +38,43 @@ import {
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 
 This is an illustration of **Avatar** component.
 
 <Wrapper>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={true}
-    metaData={{
+      showComponentRenderer={ true }
+    showArgsController = { true}
+    metaData = {{
       code: `
-        <Avatar {...props}>
+        <Avatar {...props} className='bg-amber-600'>
           <AvatarFallbackText>Sandeep Srivastava</AvatarFallbackText>
         </Avatar>
       `,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
-      scope: {
+        transformCode: (code) => {
+          return transformedCode(code);
+        },
+          scope: {
         Wrapper,
-        Avatar,
-        AvatarBadge,
-        AvatarFallbackText,
-        AvatarImage,
-      },
+          Avatar,
+          AvatarBadge,
+          AvatarFallbackText,
+          AvatarImage,
+        },
       argsType: {
         size: {
           control: 'select',
-          options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
-          default: 'md',
-        },
+            options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+            default: 'md',
+          },
       },
-    }}
+    }
+  }
   />
 </Wrapper>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -85,9 +89,11 @@ npm i @gluestack-ui/avatar
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Avatar/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/avatar/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -102,7 +108,7 @@ import {
   AvatarBadge,
   AvatarFallbackText,
   AvatarImage,
-} from '@/components/ui/Avatar';
+} from '@/components/ui/avatar';
 ```
 
 > IOS: It is highly recommended to use `<AvatarFallbackText />` before `<AvatarImage />` to avoid indexing issues in IOS.
@@ -146,3 +152,488 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 ### Features
 
 - Returns a fallback to FallbackText if given an invalid image source.
+
+### Props
+
+Avatar component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
+
+#### Avatar
+
+<>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Name</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Value</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>size</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>xs | sm | md | lg | xl | 2xl</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</>
+
+## Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Avatar with letters
+
+An Avatar component with text displays a stylized representation of a user or entity alongside accompanying text, providing a visual and textual identification within a user interface.
+
+<>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+    <VStack space="2xl">
+        <HStack space="md">
+            <Avatar className='bg-indigo-600'>
+              <AvatarFallbackText>Ronald Richards</AvatarFallbackText>
+              <AvatarBadge $dark-borderColor="$black"/>
+            </Avatar>
+          <VStack>
+             <Heading size="sm" >Ronald Richards</Heading>
+             <Text size="sm" >Nursing Assistant</Text>
+          </VStack>
+      </HStack>
+      <HStack space="md">
+        <Avatar className='bg-orange-600'>
+            <AvatarFallbackText>Arlene McCoy</AvatarFallbackText>
+        </Avatar>
+        <VStack>
+            <Heading size="sm" >Arlene McCoy</Heading>
+            <Text size="sm" >Marketing Coordinator</Text>
+        </VStack>
+     </HStack>
+    </VStack>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Avatar,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Text,
+        HStack,
+        VStack,
+        Heading,
+      },
+      argsType: {},
+    }}
+  />
+</>
+
+#### Avatar with Icon
+
+An Avatar component with an icon combines a graphical symbol or icon with a user or entity representation, providing a visually appealing and easily recognizable identification within a user interface.
+
+<>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="2xl">
+            <HStack space="md">
+              <Avatar className='bg-indigo-600'>
+                {/* User is imported from 'lucide-react-native' */}
+                <Icon as={User} color="white" size="lg"/>
+              </Avatar>
+              <VStack >
+                <Heading size="sm" >Ronald Richards</Heading>
+                <Text size="sm" >Nursing Assistant</Text>
+              </VStack>
+            </HStack>
+            <HStack space="md">
+                <Avatar className='bg-pink-600'>
+                 {/* User is imported from 'lucide-react-native' */}
+                <Icon as={User} size="lg"/>
+                </Avatar>
+                <VStack >
+                  <Heading size="sm" >Kevin James</Heading>
+                  <Text size="sm" >Web Designer</Text>
+                </VStack>
+          </HStack>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Avatar,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Text,
+        HStack,
+        VStack,
+        Icon,
+        Heading,
+        User,
+      },
+      argsType: {},
+    }}
+  />
+</>
+
+#### Avatar with Image
+
+An Avatar component with an image incorporates a user or entity representation using a profile picture or image, adding a personalized touch and visual identification within a user interface.
+
+<>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="2xl">
+          <HStack space="md">
+            <Avatar>
+              <AvatarFallbackText>SS</AvatarFallbackText>
+              <AvatarImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
+                }}
+              />
+            </Avatar>
+            <VStack>
+                <Heading size="sm" >Ronald Richards</Heading>
+                <Text size="sm" >Nursing Assistant</Text>
+            </VStack>
+          </HStack>
+          <HStack space="md">
+            <Avatar>
+               <AvatarFallbackText>SS</AvatarFallbackText>
+               <AvatarImage
+                  source={{
+                    uri: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
+                  }}
+              />
+            </Avatar>
+            <VStack>
+              <Heading size="sm" >Arlene McCoy</Heading>
+              <Text size="sm" >Marketing Coordinator</Text>
+            </VStack>
+          </HStack>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Avatar,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Heading,
+        Text,
+        HStack,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</>
+
+#### Avatar Group
+
+The avatar group allows users to group avatars and display them in a horizontal or vertical row for better visual representation and functionality.
+
+> To reverse the order of avatars in case of multiple avatars use `flexDirection="row"` in `<AvatarGroup>`
+
+<>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        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' },
+              { src: 'https://example.com.jpg', alt: 'Ritik Sharma ', color:'bg-indigo-600' },
+              { src: 'https://example.com.jpg', alt: 'Akhil Sharma', color:'bg-gray-600' },
+              { src: 'https://example.com.jpg', alt: 'Rahul Sharma ', color:'bg-red-400' },
+          ];
+          const extraAvatars = avatars.slice(3);
+          const remainingCount = extraAvatars.length;
+          return (
+            <AvatarGroup>
+              {avatars.slice(0, 3).map((avatar, index) => {
+                return (
+                  <Avatar key={index} size="lg" className={'border-2 border-outline-0 ' + avatar.color}>
+                    <AvatarFallbackText>{avatar.alt}</AvatarFallbackText>
+                  </Avatar>
+                );
+              })}
+              <Avatar size="lg">
+                  <AvatarFallbackText >{"+ " + remainingCount + ""}</AvatarFallbackText>
+              </Avatar>
+            </AvatarGroup>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Avatar,
+        AvatarGroup,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Wrapper,
+        HStack,
+      },
+      argsType: {},
+    }}
+  />
+</>
+
+#### Avatar Group (Without Badge)
+
+An Avatar Group component without badges organizes multiple avatars in a visually cohesive manner, offering a streamlined display of user or entity representations without additional visual indicators or badges within a user interface.
+
+<>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <AvatarGroup>
+          <Avatar size="md">
+            <AvatarFallbackText>John Doe</AvatarFallbackText>
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
+              }}
+            />
+          </Avatar>
+          <Avatar size="md">
+            <AvatarFallbackText>John Doe</AvatarFallbackText>
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+              }}
+            />
+          </Avatar>
+          <Avatar size="md">
+            <AvatarFallbackText>John Doe</AvatarFallbackText>
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
+              }}
+            />
+          </Avatar>
+          <Avatar size="md">
+            <AvatarFallbackText>John Doe</AvatarFallbackText>
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+              }}
+            />
+          </Avatar>
+        </AvatarGroup>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Avatar,
+        AvatarGroup,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Wrapper,
+        HStack,
+      },
+      argsType: {},
+    }}
+  />
+</>
+
+#### Avatar Group (with Badge)
+
+An Avatar Group component with badges presents a collection of avatars with accompanying badges, providing visual indicators or additional information associated with each user or entity representation within a user interface.
+
+<>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <AvatarGroup>
+          <Avatar size="md">
+            <AvatarFallbackText>John Doe</AvatarFallbackText>
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
+              }}
+            />
+            <AvatarBadge 
+          />
+          </Avatar>
+          <Avatar size="md">
+            <AvatarFallbackText>John Doe</AvatarFallbackText>
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+              }}
+            />
+            <AvatarBadge/>
+          </Avatar>
+          <Avatar size="md">
+            <AvatarFallbackText>John Doe</AvatarFallbackText>
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
+              }}
+            />
+            <AvatarBadge/>
+          </Avatar>
+          <Avatar size="md">
+            <AvatarFallbackText>John Doe</AvatarFallbackText>
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+              }}
+            />
+            <AvatarBadge />
+          </Avatar>
+        </AvatarGroup>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Avatar,
+        AvatarGroup,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Wrapper,
+        HStack,
+      },
+      argsType: {},
+    }}
+  />
+</>
+
+#### Custom
+
+A custom Avatar component with text allows for personalized user or entity representations by combining customized visuals, such as an image or icon, with accompanying text, providing a unique and identifiable presentation within a user interface.
+
+<>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <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  >
+              <Heading size="sm" >Ronald Richards</Heading>
+              <Text size="sm" >Nursing Assistant</Text>
+            </VStack>
+          </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 >
+              <Heading size="sm" >Kevin James</Heading>
+              <Text size="sm" >Web Designer</Text>
+            </VStack>
+          </HStack>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Avatar,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Text,
+        HStack,
+        VStack,
+        Heading,
+        Icon,
+        User,
+      },
+      argsType: {},
+    }}
+  />
+</>
+
+#### Fallback
+
+Fallback text is shown when the image fails to load, the image is not available or the provided image url is not correct.
+
+<>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+     <HStack space="md" h="100%" justifyContent="center" alignItems="center">
+          <Avatar size="md">
+            <AvatarFallbackText>John Doe</AvatarFallbackText>
+            <AvatarImage
+              source={{
+                uri: 'https://wrong-url',
+              }}
+            />
+          </Avatar>
+      </HStack>
+    `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Avatar,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Wrapper,
+        HStack,
+      },
+      argsType: {},
+    }}
+  />
+</>
diff --git a/example/storybook-nativewind/src/components/Avatar/index.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.stories.mdx
index 064b97f684..1cd347565b 100644
--- a/example/storybook-nativewind/src/components/Avatar/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Avatar/index.stories.mdx
@@ -35,16 +35,16 @@ import {
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Avatar** component.
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={true}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { true}
+  metaData = {{
+    code: `
         <Avatar {...props}>
           <AvatarFallbackText>Sandeep Srivastava</AvatarFallbackText>
         </Avatar>
@@ -52,25 +52,26 @@ This is an illustration of **Avatar** component.
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         Avatar,
         AvatarBadge,
         AvatarFallbackText,
         AvatarImage,
       },
-      argsType: {
-        size: {
-          control: 'select',
+    argsType: {
+      size: {
+        control: 'select',
           options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
           default: 'md',
         },
-      },
-    }}
-  />
+    },
+  }
+}
+/>
 </>
 
-<br />
+<br/>
 
 ## API Reference
 
@@ -119,9 +120,11 @@ npm install @gluestack-ui/nativewind-utils
 Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-%%-- File: components-example/nativewind/Avatar/index.tsx --%% 
+
+```jsx 
+%%-- File: core-components/nativewind/avatar/index.tsx --%% 
 ```
+
 </CollapsibleCode>
 
 Step 3: Update the import paths to match your project setup.
@@ -140,9 +143,11 @@ npm install @gluestack-style/react
 Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-%%-- File: components-example/themed/Avatar/index.tsx --%% 
+
+```jsx 
+%%-- File: core-components/themed/avatar/index.tsx --%% 
 ```
+
 </CollapsibleCode>
 
 Step 3: Update the import paths to match your project setup.
@@ -304,10 +309,10 @@ An Avatar component with text displays a stylized representation of a user or en
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+showArgsController = { false}
+metaData = {{
+  code: `
     <VStack space="2xl">
         <HStack space="md">
             <Avatar>
@@ -330,23 +335,23 @@ An Avatar component with text displays a stylized representation of a user or en
      </HStack>
     </VStack>
 `,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
+    transformCode: (code) => {
+      return transformedCode(code);
+    },
       scope: {
-        Wrapper,
-        Avatar,
-        AvatarBadge,
-        AvatarFallbackText,
-        AvatarImage,
-        Text,
-        HStack,
-        VStack,
-        Heading,
+    Wrapper,
+      Avatar,
+      AvatarBadge,
+      AvatarFallbackText,
+      AvatarImage,
+      Text,
+      HStack,
+      VStack,
+      Heading,
       },
-      argsType: {},
-    }}
-  />
+  argsType: { },
+}}
+/>
 </>
 
 #### Avatar with Icon
@@ -355,10 +360,10 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+showArgsController = { false}
+metaData = {{
+  code: `
         <VStack space="2xl">
             <HStack space="md">
               <Avatar >
@@ -382,25 +387,25 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
           </HStack>
         </VStack>
       `,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
+    transformCode: (code) => {
+      return transformedCode(code);
+    },
       scope: {
-        Wrapper,
-        Avatar,
-        AvatarBadge,
-        AvatarFallbackText,
-        AvatarImage,
-        Text,
-        HStack,
-        VStack,
-        Icon,
-        Heading,
-        User,
+    Wrapper,
+      Avatar,
+      AvatarBadge,
+      AvatarFallbackText,
+      AvatarImage,
+      Text,
+      HStack,
+      VStack,
+      Icon,
+      Heading,
+      User,
       },
-      argsType: {},
-    }}
-  />
+  argsType: { },
+}}
+/>
 </>
 
 #### Avatar with Image
@@ -409,10 +414,10 @@ An Avatar component with an image incorporates a user or entity representation u
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+showArgsController = { false}
+metaData = {{
+  code: `
         <VStack space="2xl">
           <HStack space="md">
             <Avatar >
@@ -444,23 +449,23 @@ An Avatar component with an image incorporates a user or entity representation u
           </HStack>
         </VStack>
       `,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
+    transformCode: (code) => {
+      return transformedCode(code);
+    },
       scope: {
-        Wrapper,
-        Avatar,
-        AvatarBadge,
-        AvatarFallbackText,
-        AvatarImage,
-        Heading,
-        Text,
-        HStack,
-        VStack,
+    Wrapper,
+      Avatar,
+      AvatarBadge,
+      AvatarFallbackText,
+      AvatarImage,
+      Heading,
+      Text,
+      HStack,
+      VStack,
       },
-      argsType: {},
-    }}
-  />
+  argsType: { },
+}}
+/>
 </>
 
 #### Avatar Group
@@ -471,10 +476,10 @@ The avatar group allows users to group avatars and display them in a horizontal
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+showArgsController = { false}
+metaData = {{
+  code: `
         function App(){
           const avatars = [
               { src: 'https://example.com.jpg', alt: 'Sandeep Srivastva' , color:'$emerald600' },
@@ -501,21 +506,21 @@ The avatar group allows users to group avatars and display them in a horizontal
           );
         }
       `,
-      transformCode: (code) => {
-        return transformedCode(code, 'function', 'App');
-      },
+    transformCode: (code) => {
+      return transformedCode(code, 'function', 'App');
+    },
       scope: {
-        Avatar,
-        AvatarGroup,
-        AvatarBadge,
-        AvatarFallbackText,
-        AvatarImage,
-        Wrapper,
-        HStack,
+    Avatar,
+      AvatarGroup,
+      AvatarBadge,
+      AvatarFallbackText,
+      AvatarImage,
+      Wrapper,
+      HStack,
       },
-      argsType: {},
-    }}
-  />
+  argsType: { },
+}}
+/>
 </>
 
 #### Avatar Group (Without Badge)
@@ -524,10 +529,10 @@ An Avatar Group component without badges organizes multiple avatars in a visuall
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+showArgsController = { false}
+metaData = {{
+  code: `
         <AvatarGroup>
           <Avatar size="md">
             <AvatarFallbackText>John Doe</AvatarFallbackText>
@@ -563,21 +568,21 @@ An Avatar Group component without badges organizes multiple avatars in a visuall
           </Avatar>
         </AvatarGroup>
 `,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
+    transformCode: (code) => {
+      return transformedCode(code);
+    },
       scope: {
-        Avatar,
-        AvatarGroup,
-        AvatarBadge,
-        AvatarFallbackText,
-        AvatarImage,
-        Wrapper,
-        HStack,
+    Avatar,
+      AvatarGroup,
+      AvatarBadge,
+      AvatarFallbackText,
+      AvatarImage,
+      Wrapper,
+      HStack,
       },
-      argsType: {},
-    }}
-  />
+  argsType: { },
+}}
+/>
 </>
 
 #### Avatar Group (with Badge)
@@ -586,10 +591,10 @@ An Avatar Group component with badges presents a collection of avatars with acco
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+showArgsController = { false}
+metaData = {{
+  code: `
         <AvatarGroup>
           <Avatar size="md">
             <AvatarFallbackText>John Doe</AvatarFallbackText>
@@ -630,21 +635,21 @@ An Avatar Group component with badges presents a collection of avatars with acco
           </Avatar>
         </AvatarGroup>
 `,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
+    transformCode: (code) => {
+      return transformedCode(code);
+    },
       scope: {
-        Avatar,
-        AvatarGroup,
-        AvatarBadge,
-        AvatarFallbackText,
-        AvatarImage,
-        Wrapper,
-        HStack,
+    Avatar,
+      AvatarGroup,
+      AvatarBadge,
+      AvatarFallbackText,
+      AvatarImage,
+      Wrapper,
+      HStack,
       },
-      argsType: {},
-    }}
-  />
+  argsType: { },
+}}
+/>
 </>
 
 #### Custom
@@ -653,10 +658,10 @@ A custom Avatar component with text allows for personalized user or entity repre
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+showArgsController = { false}
+metaData = {{
+  code: `
         <VStack space="2xl">
           <HStack space="md">
             <Avatar size="md">
@@ -680,25 +685,25 @@ A custom Avatar component with text allows for personalized user or entity repre
           </HStack>
         </VStack>
       `,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
+    transformCode: (code) => {
+      return transformedCode(code);
+    },
       scope: {
-        Wrapper,
-        Avatar,
-        AvatarBadge,
-        AvatarFallbackText,
-        AvatarImage,
-        Text,
-        HStack,
-        VStack,
-        Heading,
-        Icon,
-        User,
+    Wrapper,
+      Avatar,
+      AvatarBadge,
+      AvatarFallbackText,
+      AvatarImage,
+      Text,
+      HStack,
+      VStack,
+      Heading,
+      Icon,
+      User,
       },
-      argsType: {},
-    }}
-  />
+  argsType: { },
+}}
+/>
 </>
 
 #### Fallback
@@ -707,10 +712,10 @@ Fallback text is shown when the image fails to load, the image is not available
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+showArgsController = { false}
+metaData = {{
+  code: `
      <HStack space="md" h="100%" justifyContent="center" alignItems="center">
           <Avatar size="md">
             <AvatarFallbackText>John Doe</AvatarFallbackText>
@@ -722,18 +727,18 @@ Fallback text is shown when the image fails to load, the image is not available
           </Avatar>
       </HStack>
     `,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
+    transformCode: (code) => {
+      return transformedCode(code);
+    },
       scope: {
-        Avatar,
-        AvatarBadge,
-        AvatarFallbackText,
-        AvatarImage,
-        Wrapper,
-        HStack,
+    Avatar,
+      AvatarBadge,
+      AvatarFallbackText,
+      AvatarImage,
+      Wrapper,
+      HStack,
       },
-      argsType: {},
-    }}
-  />
+  argsType: { },
+}}
+/>
 </>
diff --git a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx
index af4e55f8ad..5508e0f728 100644
--- a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx
@@ -1,8 +1,12 @@
 ---
-title: Avatar | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Avatar Component | Installation, Usage, and API
+
 description: The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.
+
 pageTitle: Avatar
+
 pageDescription: The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.
+
 showHeader: true
 ---
 
@@ -16,7 +20,7 @@ import {
   AvatarBadge,
   AvatarFallbackText,
   AvatarImage,
-} from './Avatar';
+} from '../../core-components/themed';
 import {
   HStack,
   VStack,
@@ -24,7 +28,7 @@ import {
   Icon,
   Heading,
   User,
-} from '@gluestack-ui/themed';
+} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -35,16 +39,16 @@ import {
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Avatar** component.
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={true}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { true}
+  metaData = {{
+    code: `
         <Avatar {...props}>
           <AvatarFallbackText>Sandeep Srivastava</AvatarFallbackText>
         </Avatar>
@@ -52,25 +56,26 @@ This is an illustration of **Avatar** component.
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         Avatar,
         AvatarBadge,
         AvatarFallbackText,
         AvatarImage,
       },
-      argsType: {
-        size: {
-          control: 'select',
+    argsType: {
+      size: {
+        control: 'select',
           options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
           default: 'md',
         },
-      },
-    }}
-  />
+    },
+  }
+}
+/>
 </>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -85,9 +90,11 @@ npm i @gluestack-ui/avatar
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-%%-- File: components-example/themed/Avatar/index.tsx --%% 
+
+```jsx 
+%%-- File: core-components/themed/avatar/index.tsx --%% 
 ```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Badge/Badge.tsx b/example/storybook-nativewind/src/components/Badge/Badge.tsx
index 80203c1c6a..eb08d9574a 100644
--- a/example/storybook-nativewind/src/components/Badge/Badge.tsx
+++ b/example/storybook-nativewind/src/components/Badge/Badge.tsx
@@ -29,7 +29,7 @@ import {
   BadgeCheckIcon,
   BadgePlusIcon,
 } from 'lucide-react-native';
-import { Badge, BadgeText, BadgeIcon } from '@/components/ui/Badge';
+import { Badge, BadgeText, BadgeIcon } from '@/components/ui/badge';
 
 const BadgeBasic = ({ text = 'NEW FEATURE', _colorMode, ...props }: any) => {
   return (
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 119ab08c8f..d9c8d34c20 100644
--- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
@@ -17,32 +17,34 @@ import { Meta } from '@storybook/addon-docs';
 import {
   Badge,
   BadgeText,
-  BadgeIcon,
-} from '../../components-example/nativewind/Badge';
-
-import {
   Icon,
   Box,
-  BadgePlusIcon,
-  PuzzleIcon,
-  SettingsIcon,
-  AddIcon,
-  PaintBucket,
   Avatar,
   AvatarImage,
   AvatarFallbackText,
-  GlobeIcon,
-} from '@gluestack-ui/themed';
-import { Divider, Image, CheckIcon, Heading } from '@gluestack-ui/themed';
-import {
+  Divider,
+  Image,
+  Heading,
   VStack,
   HStack,
   Button,
   ButtonText,
+  Menu,
+  MenuItem,
+  MenuItemLabel,
+} from '../../core-components/nativewind';
+import {
+  PaintBucket,
+  PuzzleIcon,
   BadgeCheckIcon,
-} from '@gluestack-ui/themed';
-import { Menu, MenuIcon, MenuItem, MenuItemLabel } from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
+  BadgePlusIcon,
+  SettingsIcon,
+  AddIcon,
+  BadgeIcon,
+  CheckIcon,
+  MenuIcon,
+  Globe,
+} from 'lucide-react-native';
 import {
   AppProvider,
   CodePreview,
@@ -51,7 +53,8 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import { transformedCode } from '../../utils';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Badge** component.
@@ -62,7 +65,7 @@ This is an illustration of **Badge** component.
       code: `
 <Badge {...props}>
   <BadgeText>New feature</BadgeText>
-  <BadgeIcon as={GlobeIcon} className="ml-2" />
+  <BadgeIcon as={Globe} className="ml-2" />
 </Badge>
 `,
       transformCode: (code) => {
@@ -73,7 +76,7 @@ This is an illustration of **Badge** component.
         Badge,
         BadgeText,
         BadgeIcon,
-        GlobeIcon,
+        Globe,
       },
       argsType: {
         size: {
@@ -111,7 +114,11 @@ npm i @gluestack-ui/badge
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Badge/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/badge/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -121,7 +128,7 @@ npm i @gluestack-ui/badge
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Badge } from '@/components/ui/Badge';
+import { Badge } from '@/components/ui/badge';
 ```
 
 ```jsx
@@ -200,3 +207,207 @@ export default () => (
 );
 ```
 -->
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Badge with Avatar
+
+An example of the Badge component being used with the Avatar component to display badges alongside user avatars for enhanced visual representation or identification.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="2xl">
+          <HStack space="md">
+            <Avatar>
+              <AvatarFallbackText>SS</AvatarFallbackText>
+              <AvatarImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
+                }}
+              />
+            </Avatar>
+            <VStack>
+            <HStack>
+              <Heading size="sm" >Ronald Richards</Heading>
+              <Badge  size="sm" variant="solid"  action="success" className='ml-1'>
+                  <BadgeText>Verified</BadgeText>
+                  <BadgeIcon as={BadgeCheckIcon} className='ml-1'/>
+              </Badge>
+            </HStack>
+            <Text className='text-sm' >Nursing Assistant</Text>
+            </VStack>
+          </HStack>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Avatar,
+        AvatarFallbackText,
+        AvatarImage,
+        Heading,
+        Text,
+        HStack,
+        VStack,
+        Badge,
+        BadgeText,
+        BadgeIcon,
+        Globe,
+        BadgeCheckIcon,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Badge in Menu
+
+A Badge component used with a menu adds a visual indicator, such as a badge, to highlight specific items or provide additional information within the menu, enhancing user interaction and improving the visibility of important elements.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <Menu
+        placement={"top"}
+          trigger={({ ...triggerProps }) => {
+            return (
+              <Button {...triggerProps}>
+                <ButtonText>Menu</ButtonText>
+              </Button>
+            );
+          }}
+        >
+          <MenuItem key="Community" textValue="Community" 
+           className='bg-white'
+          >
+            <HStack space="sm" className='items-center'>
+              <Icon as={Globe} size="sm" />
+              <Text className='text-sm leading-5'>
+                Community
+              </Text>
+            </HStack>
+          </MenuItem>
+          <MenuItem key="Plugins" textValue="Plugins" className='bg-white'>
+            <HStack space="sm" className='items-center'>
+              <Icon as={PuzzleIcon} size="sm" />
+              <Text className='text-sm leading-5'>
+                Plugins
+              </Text>
+            </HStack>
+          </MenuItem>
+          <MenuItem key="Theme" textValue="Theme" className='bg-white'>
+            <HStack space="sm" className='items-center'>
+              <Icon as={PaintBucket} size="sm" />
+              <Text className='text-sm leading-5'>
+                Theme
+              </Text>
+               <Badge className='bg-slate-600'>
+                 <BadgeText className='color-slate-50'>New</BadgeText>
+               </Badge>
+            </HStack>
+          </MenuItem>
+          <MenuItem key="Settings" textValue="Settings" className='bg-white'>
+            <HStack space="sm" className='items-center'>
+              <Icon as={SettingsIcon} size="sm" />
+              <Text className='text-sm leading-5'>
+                Settings
+              </Text>
+            </HStack>
+          </MenuItem>
+          <MenuItem key="Add account" textValue="Add account" className='bg-white'>
+            <HStack space="sm" className='items-center'>
+              <Icon as={AddIcon} size="sm" />
+              <Text className='text-sm leading-5'>
+                Add account
+              </Text>
+            </HStack>
+          </MenuItem>
+        </Menu>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Button,
+        ButtonText,
+        Menu,
+        MenuIcon,
+        MenuItem,
+        MenuItemLabel,
+        Text,
+        Box,
+        HStack,
+        Icon,
+        Globe,
+        PuzzleIcon,
+        PaintBucket,
+        SettingsIcon,
+        AddIcon,
+        Badge,
+        BadgeText,
+        BadgeIcon,
+        BadgePlusIcon,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+### Badge Composition
+
+An example of the Badge component being used with the Composition component, allowing for the display of badges within a composition of other UI elements.
+
+<AppProvider>
+  <CodePreview
+    showArgsController={false}
+    metaData={{
+      code: `
+       <Box className='items-center'>
+        <VStack>
+          <Badge  
+            className='z-10 self-end h-6 w-6 bg-red-600 rounded-full -mb-3.5 -mr-3.5'
+            variant="solid"
+          >
+            <BadgeText className='color-white'>2</BadgeText>
+          </Badge>
+          <Button>
+            <ButtonText>
+              Notifications
+            </ButtonText>
+          </Button>
+        </VStack>
+    </Box>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Badge,
+        BadgeText,
+        BadgeIcon,
+        Globe,
+        Box,
+        Text,
+        HStack,
+        VStack,
+        Heading,
+        Button,
+        ButtonText,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx
index a159d1ed80..be9612f2cb 100644
--- a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx
@@ -42,7 +42,7 @@ import {
   ButtonText,
   BadgeCheckIcon,
   Badge,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 import {
   AppProvider,
   CodePreview,
@@ -53,7 +53,7 @@ import {
   CollapsibleCode,
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Badge** component.
 
@@ -112,7 +112,11 @@ npm i @gluestack-ui/badge
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Badge/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/badge/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -122,7 +126,7 @@ npm i @gluestack-ui/badge
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Badge } from '@/components/ui/Badge';
+import { Badge } from '@/components/ui/badge';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Box/Box.tsx b/example/storybook-nativewind/src/components/Box/Box.tsx
index 2afd8e0388..490df7a02b 100644
--- a/example/storybook-nativewind/src/components/Box/Box.tsx
+++ b/example/storybook-nativewind/src/components/Box/Box.tsx
@@ -1,5 +1,5 @@
-import { Text } from '@/components/ui/Text';
-import { Box } from '@/components/ui/Box';
+import { Text } from '@/components/ui/text';
+import { Box } from '@/components/ui/box';
 import React from 'react';
 
 const BoxBasic: any = ({
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 1ec4895396..871f4cba13 100644
--- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
@@ -15,22 +15,22 @@ import { useRef, useEffect, useState } from 'react';
 
 <Meta title="with-nativewind/components/Layout/Box" />
 
-import { Box } from './Box';
-import { Text } from '../../components-example/nativewind/Text';
+import { Box } from '../../core-components/nativewind';
+import { Text } from '../../core-components/nativewind/text';
 
 import { transformedCode } from '../../utils';
 import { AppProvider, CodePreview } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Box** component.
 
 <Wrapper>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
+      showComponentRenderer={ true }
+    showArgsController = { false}
+    metaData = {{
       code: `
 <Box
   className="bg-primary-500 p-5"
@@ -40,20 +40,21 @@ This is an illustration of **Box** component.
   </Text>
 </Box>
 `,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
-      scope: {
+        transformCode: (code) => {
+          return transformedCode(code);
+        },
+          scope: {
         Wrapper,
-        Box,
-        Text,
-      },
-      argsType: {},
-    }}
+          Box,
+          Text,
+        },
+      argsType: { },
+    }
+  }
   />
 </Wrapper>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -61,8 +62,8 @@ This is an illustration of **Box** component.
 
 <CollapsibleCode>
 
-```jsx
-%%-- File: components-example/nativewind/Box/index.tsx --%%
+```jsx 
+%%-- File: core-components/nativewind/box/index.tsx --%% 
 ```
 
 </CollapsibleCode>
@@ -72,7 +73,7 @@ This is an illustration of **Box** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Box } from '@/components/ui/Box';
+import { Box } from '@/components/ui/box';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx
index 623b638b37..e41a24799c 100644
--- a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx
@@ -15,23 +15,23 @@ import { useRef, useEffect, useState } from 'react';
 
 <Meta title="with-gluestack-style/components/Layout/Box" />
 
-import { Box } from './Box';
-import { Text } from '../../components-example/themed/Text';
+import { Box } from '../../core-components/themed';
+import { Text } from '../../core-components/themed';
 
 import { transformedCode } from '../../utils';
 import { AppProvider, CodePreview } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Box** component.
 
 <>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { false}
+  metaData = {{
+    code: `
 <Box
   bg="$primary500"
   p="$5"
@@ -44,17 +44,18 @@ This is an illustration of **Box** component.
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         Box,
         Text,
       },
-      argsType: {},
-    }}
-  />
+    argsType: { },
+  }
+}
+/>
 </>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -62,8 +63,8 @@ This is an illustration of **Box** component.
 
 <CollapsibleCode>
 
-```jsx
-%%-- File: components-example/themed/Box/index.tsx --%%
+```jsx 
+%%-- File: core-components/themed/box/index.tsx --%% 
 ```
 
 </CollapsibleCode>
@@ -73,7 +74,7 @@ This is an illustration of **Box** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Box } from '@/components/ui/Box';
+import { Box } from '@/components/ui/box';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Button/Button.tsx b/example/storybook-nativewind/src/components/Button/Button.tsx
index 11cbeaf0ae..b1f5ebc506 100644
--- a/example/storybook-nativewind/src/components/Button/Button.tsx
+++ b/example/storybook-nativewind/src/components/Button/Button.tsx
@@ -1,31 +1,19 @@
 import React from 'react';
+
 import {
   Button,
   ButtonText,
-  ButtonIcon,
   ButtonSpinner,
-} from '@/components/ui/Button';
-import { EditIcon, ArrowLeftIcon } from 'lucide-react-native';
-import {
-  Icon,
-  ArrowUpIcon,
-  AddIcon,
-  InfoIcon,
-  ThreeDotsIcon,
-} from '@/components/ui/Icon';
-import { Input, InputField } from '@/components/ui/Input';
-import { HStack } from '@/components/ui/HStack';
-import { VStack } from '@/components/ui/VStack';
-import { Text } from '@/components/ui/Text';
-import { Heading } from '@/components/ui/Heading';
-import { Box } from '@/components/ui/Box';
-import { Center } from '@/components/ui/Center';
+  ButtonIcon,
+} from '@/components/ui/button';
 
 export const ButtonBasic = (props: any) => {
   return (
-    <Button {...props}>
-      <ButtonText>Hello World 22</ButtonText>
-    </Button>
+    <>
+      <Button {...props}>
+        <ButtonText>Hello World</ButtonText>
+      </Button>
+    </>
   );
 };
 
@@ -34,24 +22,4 @@ ButtonBasic.description =
 
 export default ButtonBasic;
 
-export {
-  Button,
-  ButtonText,
-  ButtonIcon,
-  ButtonSpinner,
-  EditIcon,
-  ArrowLeftIcon,
-  Icon,
-  ArrowUpIcon,
-  AddIcon,
-  InfoIcon,
-  ThreeDotsIcon,
-  Input,
-  InputField,
-  HStack,
-  VStack,
-  Text,
-  Heading,
-  Box,
-  Center,
-};
+export { Button, ButtonText, ButtonSpinner, ButtonIcon };
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 f7ea84718f..d5c8a4c7f2 100644
--- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
@@ -17,24 +17,22 @@ import { Meta } from '@storybook/addon-docs';
 import {
   Button,
   ButtonText,
-  ButtonIcon,
   ButtonSpinner,
-  EditIcon,
-  ArrowLeftIcon,
+  ButtonIcon,
   Icon,
   ArrowUpIcon,
-  AddIcon,
   InfoIcon,
-  ThreeDotsIcon,
-  Input,
-  InputField,
-  HStack,
+  AddIcon,
+  Box,
   VStack,
-  Text,
   Heading,
-  Box,
+  Text,
+  Input,
+  InputField,
   Center,
-} from './Button';
+  ArrowLeftIcon,
+  EditIcon
+} from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -43,8 +41,7 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Button** component.
@@ -99,7 +96,11 @@ npm i @gluestack-ui/button
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Button/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/button/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -115,7 +116,7 @@ import {
   ButtonSpinner,
   ButtonIcon,
   ButtonGroup,
-} from '@/components/ui/Button';
+} from '@/components/ui/button';
 ```
 
 ```jsx
@@ -472,7 +473,7 @@ A loading button is a type of button component that provides visual feedback to
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Button, ButtonText, ButtonIcon, Wrapper, ButtonSpinner },
+      scope: { Button, ButtonText, Wrapper, ButtonSpinner },
       argsType: {},
     }}
   />
@@ -519,16 +520,23 @@ A button with a link combines the interactive behavior of a button component wit
           <ButtonText className='font-medium text-sm text-typography-900' >
             Back to top
           </ButtonText>
-          <ButtonIcon as={ArrowUpIcon} className='h-3 w-3 color-background-900 ml-1' />
+          <ButtonIcon as={ArrowUpIcon}
+           className='h-3 w-3 text-background-900 ml-1' />
         </Button>
       `,
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, ArrowUpIcon },
-      argsType: {},
+      scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, ArrowUpIcon 
+      },
+
+      argsType:
+       {},
+
     }}
+
   />
+
 </AppProvider>
 
 #### Button With Icon
diff --git a/example/storybook-nativewind/src/components/Button/index.stories.mdx b/example/storybook-nativewind/src/components/Button/index.stories.mdx
index f89cd5328e..b651cb48e9 100644
--- a/example/storybook-nativewind/src/components/Button/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.stories.mdx
@@ -19,7 +19,7 @@ import { Button, ButtonText, ButtonIcon } from './Button';
 import { transformedCode } from '../../utils';
 import { CodePreview } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Button** component.
@@ -74,7 +74,11 @@ npm install @gluestack-ui/button
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Button/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/button/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -90,7 +94,7 @@ import {
   ButtonSpinner,
   ButtonIcon,
   ButtonGroup,
-} from '@/components/ui/Button';
+} from '@/components/ui/button';
 ```
 
 ```jsx
@@ -668,7 +672,11 @@ npm install @gluestack-style/react
 Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Button/index.tsx --%% ```
+
+```jsx 
+  %%-- File: core-components/themed/button/index.tsx --%% 
+  ```
+
 </CollapsibleCode>
 
 Step 3: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx
index 9c3fe75f55..93914eb623 100644
--- a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx
@@ -14,7 +14,21 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Forms/Button" />
 
-import { Button, ButtonText, ButtonIcon } from './Button';
+import { Button, ButtonText, ButtonIcon, 
+  Icon,
+  ArrowUpIcon,
+  InfoIcon,
+  AddIcon,
+  Box,
+  VStack,
+  Heading,
+  Text,
+  Input,
+  InputField,
+  Center,
+  ArrowLeftIcon,
+  ButtonSpinner,
+  EditIcon } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -24,7 +38,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Button** component.
@@ -80,8 +94,8 @@ npm install @gluestack-ui/button
 
 <CollapsibleCode>
 
-```jsx
-%%-- File: components-example/themed/Button/index.tsx --%%
+```jsx 
+%%-- File: core-components/themed/button/index.tsx --%% 
 ```
 
 </CollapsibleCode>
@@ -99,7 +113,7 @@ import {
   ButtonSpinner,
   ButtonIcon,
   ButtonGroup,
-} from '@/components/ui/Button';
+} from '@/components/ui/button';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Card/Card.tsx b/example/storybook-nativewind/src/components/Card/Card.tsx
index e98e0f3471..34e9821a4d 100644
--- a/example/storybook-nativewind/src/components/Card/Card.tsx
+++ b/example/storybook-nativewind/src/components/Card/Card.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Card } from '@/components/ui/Card';
-import { Text } from '@/components/ui/Text';
-import { Heading } from '@/components/ui/Heading';
+import { Card } from '@/components/ui/card';
+import { Text } from '@/components/ui/text';
+import { Heading } from '@/components/ui/heading';
 
 const CardBasic = ({ ...props }: any) => {
   return (
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 3f0a4789cf..c37124f5e2 100644
--- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
@@ -32,7 +32,7 @@ import {
   Button,
   ButtonText,
   Divider,
-} from './Card';
+} from '../../core-components/nativewind';
 import {
   AppProvider,
   CodePreview,
@@ -40,10 +40,10 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-import { transformedCode } from '../../../utils';
+import { transformedCode } from '../../utils';
 
 import { config } from '@gluestack-ui/config';
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of a **Card** component.
@@ -101,7 +101,11 @@ npm i @gluestack-ui/card
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Card/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/card/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -111,7 +115,7 @@ npm i @gluestack-ui/card
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Card } from '@/components/ui/Card';
+import { Card } from '@/components/ui/card';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Card/index.stories.mdx b/example/storybook-nativewind/src/components/Card/index.stories.mdx
index 334d246d1a..ec8878fc85 100644
--- a/example/storybook-nativewind/src/components/Card/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Card/index.stories.mdx
@@ -43,7 +43,7 @@ import {
 import { transformedCode } from '../../../utils';
 
 import { config } from '@gluestack-ui/config';
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of a **Themed Card** component with default configuration.
@@ -101,7 +101,11 @@ npm install @gluestack-ui/card
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Button/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/button/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -113,7 +117,7 @@ npm install @gluestack-ui/card
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Card } from '@/components/ui/Card';
+import { Card } from '@/components/ui/card';
 ```
 
 ```jsx
@@ -684,7 +688,11 @@ npm install @gluestack-style/react
 Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Card/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/card/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 Step 3: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx
index a5a571da0d..e484337d62 100644
--- a/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx
@@ -32,7 +32,7 @@ import {
   Button,
   ButtonText,
   Divider,
-} from './Card';
+} from '../../core-components/themed';
 import {
   AppProvider,
   CodePreview,
@@ -40,10 +40,10 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-import { transformedCode } from '../../../utils';
+import { transformedCode } from '../../utils';
 
 import { config } from '@gluestack-ui/config';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of a **Card** component.
@@ -101,7 +101,11 @@ npm i @gluestack-ui/card
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Card/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/card/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -111,7 +115,7 @@ npm i @gluestack-ui/card
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Card } from '@/components/ui/Card';
+import { Card } from '@/components/ui/card';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Center/Center.tsx b/example/storybook-nativewind/src/components/Center/Center.tsx
index 703b050601..7f9e782225 100644
--- a/example/storybook-nativewind/src/components/Center/Center.tsx
+++ b/example/storybook-nativewind/src/components/Center/Center.tsx
@@ -1,5 +1,5 @@
-import { Text } from '@/components/ui/Text';
-import { Center } from '@/components/ui/Center';
+import { Text } from '@/components/ui/text';
+import { Center } from '@/components/ui/center';
 import React from 'react';
 
 const CenterBasic = () => {
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 fd3aed4e2f..0d0bbcdd31 100644
--- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
@@ -14,24 +14,24 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Layout/Center" />
 
-import { Center } from './Center';
-import { Text } from '../../components-example/nativewind/Text';
+import { Center } from '../../core-components/nativewind';
+import { Text } from '../../core-components/nativewind/text';
 
 import { transformedCode } from '../../utils';
 import { AppProvider, CodePreview, Table } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Center** component.
 
 <Wrapper>
   <CodePreview
-    _rendererWrapper={{ py: '$6' }}
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    _rendererWrapper={ { py: '$6' } }
+  showComponentRenderer = { true}
+  showArgsController = { false}
+  metaData = {{
+    code: `
 <Center className="bg-primary-500 h-[200px] w-[300px]">
   <Text className="text-typography-0 font-bold">
     This is the center.
@@ -41,17 +41,18 @@ This is an illustration of **Center** component.
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         Center,
         Text,
       },
-      argsType: {},
-    }}
-  />
+    argsType: { },
+  }
+}
+/>
 </Wrapper>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -59,8 +60,8 @@ This is an illustration of **Center** component.
 
 <CollapsibleCode>
 
-```jsx
-%%-- File: components-example/nativewind/Center/index.tsx --%%
+```jsx 
+%%-- File: core-components/nativewind/center/index.tsx --%% 
 ```
 
 </CollapsibleCode>
@@ -72,7 +73,7 @@ This is an illustration of **Center** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Center } from '@/components/ui/Center';
+import { Center } from '@/components/ui/center';
 ```
 
 ```jsx
@@ -92,11 +93,11 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 Explore the comprehensive details of the Center in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
 
 <iframe
-  style={{
-    borderRadius: '8px',
+style = {{
+  borderRadius: '8px',
     border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
+      aspectRatio: 736 / 585,
   }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2Fgluestack-UI-handbook%3Fpage-id%3D222%253A12635%26type%3Ddesign%26node-id%3D225-14926%26viewport%3D-207%252C386%252C0.13%26scaling%3Dcontain%26starting-point-node-id%3D225%253A14926"
-  allowFullScreen
-></iframe>
+src = "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2Fgluestack-UI-handbook%3Fpage-id%3D222%253A12635%26type%3Ddesign%26node-id%3D225-14926%26viewport%3D-207%252C386%252C0.13%26scaling%3Dcontain%26starting-point-node-id%3D225%253A14926"
+allowFullScreen
+  > </iframe>
diff --git a/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx
index b9f3729ac7..ab5ab27951 100644
--- a/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx
@@ -14,24 +14,24 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Layout/Center" />
 
-import { Center } from './Center';
-import { Text } from '../../components-example/themed/Text';
+import { Center } from '../../core-components/themed';
+import { Text } from '../../core-components/themed';
 
 import { transformedCode } from '../../utils';
 import { AppProvider, CodePreview, Table } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Center** component.
 
 <>
   <CodePreview
-    _rendererWrapper={{ py: '$6' }}
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    _rendererWrapper={ { py: '$6' } }
+  showComponentRenderer = { true}
+  showArgsController = { false}
+  metaData = {{
+    code: `
 <Center bg="$primary500" h={200} w={300}>
   <Text color="$text0" fontWeight="$bold">
     This is the center.
@@ -41,17 +41,18 @@ This is an illustration of **Center** component.
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         Center,
         Text,
       },
-      argsType: {},
-    }}
-  />
+    argsType: { },
+  }
+}
+/>
 </>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -59,8 +60,8 @@ This is an illustration of **Center** component.
 
 <CollapsibleCode>
 
-```jsx
- %%-- File: components-example/themed/Center/index.tsx --%%
+```jsx 
+%%-- File: core-components/themed/center/index.tsx --%% 
 ```
 
 </CollapsibleCode>
@@ -72,7 +73,7 @@ This is an illustration of **Center** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Center } from '@/components/ui/Center';
+import { Center } from '@/components/ui/center';
 ```
 
 ```jsx
@@ -92,11 +93,11 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 Explore the comprehensive details of the Center in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
 
 <iframe
-  style={{
-    borderRadius: '8px',
+style = {{
+  borderRadius: '8px',
     border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
+      aspectRatio: 736 / 585,
   }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2Fgluestack-UI-handbook%3Fpage-id%3D222%253A12635%26type%3Ddesign%26node-id%3D225-14926%26viewport%3D-207%252C386%252C0.13%26scaling%3Dcontain%26starting-point-node-id%3D225%253A14926"
-  allowFullScreen
-></iframe>
+src = "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2Fgluestack-UI-handbook%3Fpage-id%3D222%253A12635%26type%3Ddesign%26node-id%3D225-14926%26viewport%3D-207%252C386%252C0.13%26scaling%3Dcontain%26starting-point-node-id%3D225%253A14926"
+allowFullScreen
+  > </iframe>
diff --git a/example/storybook-nativewind/src/components/Checkbox/Checkbox.tsx b/example/storybook-nativewind/src/components/Checkbox/Checkbox.tsx
index bad00ef33c..fdf1cff838 100644
--- a/example/storybook-nativewind/src/components/Checkbox/Checkbox.tsx
+++ b/example/storybook-nativewind/src/components/Checkbox/Checkbox.tsx
@@ -5,15 +5,15 @@ import {
   CheckboxIndicator,
   CheckboxLabel,
   CheckboxGroup,
-} from '@/components/ui/Checkbox';
-import { Text } from '@/components/ui/Text';
-import { RemoveIcon, Icon, CheckIcon } from '@/components/ui/Icon';
-import { FormControl } from '@/components/ui/FormControl';
-import { Center } from '@/components/ui/Center';
-import { VStack } from '@/components/ui/VStack';
-import { HStack } from '@/components/ui/HStack';
-import { Heading } from '@/components/ui/Heading';
-import { Box } from '@/components/ui/Box';
+} from '@/components/ui/checkbox';
+import { Text } from '@/components/ui/text';
+import { RemoveIcon, Icon, CheckIcon } from '@/components/ui/icon';
+import { FormControl } from '@/components/ui/form-control';
+import { Center } from '@/components/ui/center';
+import { VStack } from '@/components/ui/vstack';
+import { HStack } from '@/components/ui/hstack';
+import { Heading } from '@/components/ui/heading';
+import { Box } from '@/components/ui/box';
 
 const CheckboxGroupBasic = ({ ...props }: any) => {
   return (
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 cf9b7252d0..893439e22b 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
@@ -30,7 +30,7 @@ import {
   HStack,
   Heading,
   Box,
-} from './Checkbox';
+} from '../../core-components/nativewind';
 import { useState, useRef } from 'react';
 import { transformedCode } from '../../utils';
 import {
@@ -41,7 +41,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Checkbox** component.
@@ -105,7 +105,11 @@ npm i @gluestack-ui/checkbox
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Checkbox/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/checkbox/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -115,7 +119,7 @@ npm i @gluestack-ui/checkbox
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Checkbox } from '@/components/ui/Checkbox';
+import { Checkbox } from '@/components/ui/checkbox';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx
index 6405b3687b..5d02e583ce 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx
@@ -20,17 +20,17 @@ import {
   CheckboxIndicator,
   CheckboxIcon,
   CheckboxLabel,
-} from './Checkbox';
+} from '../../core-components/themed';
 import {
   Text,
   RemoveIcon,
   FormControl,
   Icon,
   CheckIcon,
-} from '@gluestack-ui/themed';
+} from '../../core-components/themed';
 import { useState, useRef } from 'react';
-import { Center, VStack } from '@gluestack-ui/themed';
-import { HStack, Heading, Box } from '@gluestack-ui/themed';
+import { Center, VStack } from '../../core-components/themed';
+import { HStack, Heading, Box } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 
 import {
@@ -41,7 +41,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Checkbox** component.
@@ -105,7 +105,11 @@ npm i @gluestack-ui/checkbox
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Checkbox/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/checkbox/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -115,7 +119,7 @@ npm i @gluestack-ui/checkbox
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Checkbox } from '@/components/ui/Checkbox';
+import { Checkbox } from '@/components/ui/checkbox';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Divider/Divider.tsx b/example/storybook-nativewind/src/components/Divider/Divider.tsx
index 10b32281b5..358d58ce16 100644
--- a/example/storybook-nativewind/src/components/Divider/Divider.tsx
+++ b/example/storybook-nativewind/src/components/Divider/Divider.tsx
@@ -1,32 +1,27 @@
 import React from 'react';
-import {
-  Text,
-  VStack,
-  HStack,
-  Box,
-  Center,
-  Heading,
-  Button,
-  ButtonText,
-} from '@gluestack-ui/themed';
-import { Divider } from '@/components/ui/Divider';
+import { Divider } from '@/components/ui/divider';
+import { HStack } from '@/components/ui/hstack';
+import { Heading } from '@/components/ui/heading';
+import { Center } from '@/components/ui/center';
+import { Text } from '@/components/ui/text';
+import { VStack } from '@/components/ui/vstack';
+import { Box } from '@/components/ui/box';
+import { Button, ButtonText } from '@/components/ui/button';
 
 const DividerBasic = ({ ...props }) => {
   return (
     <HStack
-      flexDirection={props.orientation === 'vertical' ? 'row' : 'column'}
-      h={props.orientation === 'vertical' ? 30 : 'auto'}
-      alignItems="center"
-      justifyContent="center"
-      style={{
-        gap: 10,
-      }}
+      className={`items-center justify-center ${
+        props.orientation === 'vertical'
+          ? 'flex-row h-[30px]'
+          : 'flex-col h-auto'
+      } gap-2.5`}
     >
-      <Heading size="sm" fontWeight="$semibold">
+      <Heading size="sm" className="font-semibold">
         Firefox
       </Heading>
       <Divider {...props} />
-      <Heading size="sm" fontWeight="$semibold">
+      <Heading size="sm" className="font-semibold">
         Chrome
       </Heading>
     </HStack>
@@ -44,8 +39,8 @@ export {
   HStack,
   Divider,
   Box,
-  Center,
   Heading,
   Button,
   ButtonText,
+  Center,
 };
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 7bd0289d71..f60172e36a 100644
--- a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
@@ -14,16 +14,17 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Layout/Divider" />
 
-import { Divider } from './Divider';
 import {
+  Divider,
   Center,
   Text,
+  HStack,
+  VStack,
+  Box,
+  Heading,
   Button,
   ButtonText,
-  VStack,
-  HStack,
-} from '@gluestack-ui/themed';
-import { Box, Heading } from '@gluestack-ui/themed';
+} from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -32,7 +33,7 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Divider** component.
@@ -82,9 +83,11 @@ npm i @gluestack-ui/divider
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Divider/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/divider/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -94,7 +97,7 @@ npm i @gluestack-ui/divider
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Divider } from '@/components/ui/Divider';
+import { Divider } from '@/components/ui/divider';
 ```
 
 ```jsx
@@ -195,3 +198,285 @@ const Divider = createDivider({
 export default () => <Divider />;
 ```
 -->
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Variants
+
+A Divider component with different layouts offers versatile options for visually dividing content in various arrangements, such as horizontal or vertical orientations, enabling flexible and visually appealing designs for organizing and structuring elements within a user interface.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack
+          space="md"
+          className="justify-center items-center"
+        >
+          <HStack
+            className="h-[40px] justify-center items-center"
+          >
+            <Text>Simple</Text>
+            <Divider
+              orientation="vertical"
+              className="mx-2.5 bg-emerald-500 h-[15px]"
+            />
+            <Text>Easy</Text>
+            <Divider
+              orientation="vertical"
+              className="mx-2.5 bg-indigo-500 h-[15px]"
+            />
+            <Text>Beautiful</Text>
+          </HStack>
+          <VStack
+            className="w-[100px] justify-center items-center"
+          >
+            <Text>Firefox</Text>
+            <Divider
+              variant="horizontal"
+              className="w-[55px] bg-red-500"
+            />
+            <Text>Chrome</Text>
+          </VStack>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Divider,
+        VStack,
+        HStack,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Orientation
+
+A Divider component with a specified divider orientation allows for clear visual separation of content, either horizontally or vertically, providing a structured and organized layout within a user interface.
+
+<AppProvider>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack
+          space='lg'
+          className="p-12 border border-outline-300 rounded-lg mx-5"
+          >
+          <Box>
+            <Text size='xs'
+            className="font-bold text-blue-600">
+              HEALTH
+            </Text>
+            <Heading>
+              Benefits of Oranges
+            </Heading>
+            <Text size='sm' className="mt-1.5">
+              Oranges are a great source of vitamin C, which is essential for a healthy immune system.
+            </Text>
+            <HStack space='sm'
+            className="mt-3 h-5"
+            >
+              <Text size='xs'>
+                Wade Warrem
+              </Text>
+              <Divider orientation='vertical' className="bg-gray-300"/>
+              <Text size='xs'>
+                6th Oct, 2019
+              </Text>
+              <Divider orientation='vertical' className="bg-gray-300"/>
+              <Text size='xs'>
+                5 mins read
+              </Text>
+            </HStack>
+          </Box>
+          <Divider
+            className="bg-gray-300"
+            />
+          <Box>
+            <Text size='xs' className="font-bold text-blue-600">
+              TECHNOLOGY
+            </Text>
+            <Heading>
+              How AI can benefit your business
+            </Heading>
+            <Text size='sm' className="mt-1.5">
+              AI can automate tasks and processes, allowing for increasing efficiency and productivity.
+            </Text>
+            <HStack space='sm'
+            className="mt-3 h-5"
+            >
+              <Text size='xs'>
+                Wade Warrem
+              </Text>
+              <Divider orientation='vertical' className="bg-gray-300"/>
+              <Text size='xs'>
+                6th Oct, 2019
+              </Text>
+              <Divider orientation='vertical' className="bg-gray-300"/>
+              <Text size='xs'>
+                5 mins read
+              </Text>
+            </HStack>
+          </Box>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Divider,
+        Box,
+        Text,
+        VStack,
+        Heading,
+        HStack,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### With & Without Inset
+
+A Divider component used with or without inset adds visual hierarchy and distinction by creating a dividing line either with or without indentation, providing options for organizing and structuring content within a user interface.
+
+<AppProvider>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space='2xl'>
+          <HStack 
+          className="px-3 h-8 rounded border border-outline-300"
+          >
+            <Button variant='link' size='xs'>
+              <ButtonText >
+                Github
+              </ButtonText>
+            </Button>
+            <Divider orientation='vertical' className="mx-2.5"/>
+            <Button variant='link' size='xs'>
+              <ButtonText >
+                Twitter
+              </ButtonText>
+            </Button>
+            <Divider orientation='vertical' className="mx-2.5"/>
+            <Button variant='link' size='xs'>
+              <ButtonText >
+                Discord
+              </ButtonText>
+            </Button>
+          </HStack>
+          <HStack 
+          className="px-3 h-8 rounded border border-outline-300 items-center"
+          >
+            <Button variant='link' size='xs'>
+              <ButtonText >
+                Github
+              </ButtonText>
+            </Button>
+            <Divider orientation='vertical' className="h-[50%] mx-2.5"/>
+            <Button variant='link' size='xs'>
+              <ButtonText >
+                Twitter
+              </ButtonText>
+            </Button>
+            <Divider orientation='vertical' className="h-[50%]
+            mx-2.5"/>
+            <Button variant='link' size='xs'>
+              <ButtonText >
+                Discord
+              </ButtonText>
+            </Button>
+          </HStack>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        HStack,
+        Divider,
+        Button,
+        ButtonText,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Adding content within a Divider
+
+A Divider component with added content allows for the inclusion of additional text or elements alongside the dividing line, enhancing the visual and informational aspects of the divider while providing a seamless integration of content within a user interface.
+
+<AppProvider>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Box
+        className="py-9 px-20 m-5 rounded-lg
+        border border-outline-300
+        "
+        >
+          <Heading size='3xl' >
+            Search Results
+          </Heading>
+          <Divider className="mt-4 mb-6"/>
+          <Box>
+            <Text size='xs' className='font-bold text-amber-700'>
+              TECHNOLOGY
+            </Text>
+            <Heading>
+              How AI can benefit your business
+            </Heading>
+            <Text size='sm' className="mt-1.5">
+              AI can automate tasks and processes, allowing for increasing efficiency and productivity.
+            </Text>
+            <HStack space='sm'
+            className="mt-3 items-center"
+            >
+              <Divider 
+              className="w-[18px] bg-amber-700"
+              />
+              <Text size='xs' className="text-amber-700">
+                5 mins read
+              </Text>
+            </HStack>
+          </Box>
+        </Box>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        HStack,
+        Divider,
+        Box,
+        Heading,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx
index 39c91fe999..ae5670aea7 100644
--- a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx
@@ -24,7 +24,7 @@ import {
   Text,
   Button,
   ButtonText,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 import {
   AppProvider,
   CodePreview,
@@ -34,7 +34,7 @@ import {
   CollapsibleCode,
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Divider** component.
 
@@ -83,7 +83,11 @@ npm i @gluestack-ui/divider
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: ../../components-example/themed/Divider/index.tsx --%% ````
+
+```jsx 
+%%-- File: core-components/themed/divider/index.tsx --%% 
+````
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -93,7 +97,7 @@ npm i @gluestack-ui/divider
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Divider } from '@/components/ui/Divider';
+import { Divider } from '@/components/ui/divider';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Fab/Fab.tsx b/example/storybook-nativewind/src/components/Fab/Fab.tsx
index 9c55173c66..2b60b98241 100644
--- a/example/storybook-nativewind/src/components/Fab/Fab.tsx
+++ b/example/storybook-nativewind/src/components/Fab/Fab.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
-import { Fab, FabIcon, FabLabel } from '@/components/ui/Fab';
-import { Avatar, AvatarImage } from '@/components/ui/Avatar';
-import { AddIcon, MenuIcon, SearchIcon, CheckIcon } from '@/components/ui/Icon';
-import { Box } from '@/components/ui/Box';
+import { Fab, FabIcon, FabLabel } from '@/components/ui/fab';
+import { Avatar, AvatarImage } from '@/components/ui/avatar';
+import { AddIcon, MenuIcon, SearchIcon, CheckIcon } from '@/components/ui/icon';
+import { Box } from '@/components/ui/box';
 import {
   Checkbox,
   CheckboxIndicator,
   CheckboxLabel,
   CheckboxIcon,
-} from '@/components/ui/Checkbox';
-import { Link } from '@/components/ui/Link';
-import { VStack } from '@/components/ui/VStack';
-import { HStack } from '@/components/ui/HStack';
-import { Heading } from '@/components/ui/Heading';
-import { Text } from '@/components/ui/Text';
-import { Divider } from '@/components/ui/Divider';
-import { Image } from '@/components/ui/Image';
+} from '@/components/ui/checkbox';
+import { Link } from '@/components/ui/link';
+import { VStack } from '@/components/ui/vstack';
+import { HStack } from '@/components/ui/hstack';
+import { Heading } from '@/components/ui/heading';
+import { Text } from '@/components/ui/text';
+import { Divider } from '@/components/ui/divider';
+import { Image } from '@/components/ui/image';
 import { EditIcon, ShoppingCartIcon } from 'lucide-react-native';
 
 const FabBasic = (props: any) => {
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 5633f87f88..4e643b0c71 100644
--- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
@@ -38,7 +38,7 @@ import {
   Image,
   EditIcon,
   ShoppingCartIcon,
-} from './Fab';
+} from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -48,7 +48,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Fab** component.
@@ -125,7 +125,11 @@ npm i @gluestack-ui/fab
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Fab/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/fab/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Fab/index.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.stories.mdx
index 24874f1681..be7ef575da 100644
--- a/example/storybook-nativewind/src/components/Fab/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.stories.mdx
@@ -39,7 +39,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Fab** component.
 
diff --git a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx
index 63fe497b42..6f5a2b1c74 100644
--- a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx
@@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Others/Fab" />
 
-import { Fab, FabIcon, FabLabel } from '../../components-example/themed/Fab';
+import { Fab, FabIcon, FabLabel } from '../../core-components/themed/fab';
 import {
   Checkbox,
   CheckboxIndicator,
@@ -25,12 +25,12 @@ import {
   Image,
   Box,
   Link,
-} from '@gluestack-ui/themed';
-import { HStack, VStack, Avatar, AvatarImage } from '@gluestack-ui/themed';
-import { Heading, Text, Divider } from '@gluestack-ui/themed';
+} from '../../core-components/themed';
+import { HStack, VStack, Avatar, AvatarImage } from '../../core-components/themed';
+import { Heading, Text, Divider } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
-import { AddIcon, EditIcon } from '@gluestack-ui/themed';
-import { SearchIcon } from '@gluestack-ui/themed';
+import { AddIcon, EditIcon } from '../../core-components/themed';
+import { SearchIcon } from '../../core-components/themed';
 import {
   AppProvider,
   CodePreview,
@@ -39,7 +39,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Fab** component.
@@ -120,7 +120,11 @@ npm i @gluestack-ui/fab
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Fab/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/fab/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/FormControl/FormControl.tsx b/example/storybook-nativewind/src/components/FormControl/FormControl.tsx
index cfb5001776..dcea6a4323 100644
--- a/example/storybook-nativewind/src/components/FormControl/FormControl.tsx
+++ b/example/storybook-nativewind/src/components/FormControl/FormControl.tsx
@@ -56,10 +56,10 @@ import {
   FormControlError,
   FormControlErrorIcon,
   FormControlErrorText,
-} from '@/components/ui/FormControl';
+} from '@/components/ui/form-control';
 import { AlertCircleIcon } from 'lucide-react-native';
 
-import { Input, InputField } from '@/components/ui/Input';
+import { Input, InputField } from '@/components/ui/input';
 const FormControlBasic = ({ ...props }: any) => {
   return (
     <FormControl {...props}>
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 4b755853b7..bafb924717 100644
--- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
@@ -15,28 +15,22 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="with-nativewind/components/Forms/FormControl" />
 
 import {
-  Icon,
+  FormControlHelper,
+  FormControlError,
+  Input,
+  Box,
+  Center,
+  AlertCircleIcon,
   CircleIcon,
   CheckIcon,
-} from '@gluestack-ui/themed';
-import {
-  FormControl,
-  FormControlLabel,
+  ChevronDownIcon,
   FormControlLabelText,
-  FormControlHelper,
   FormControlHelperText,
-  FormControlError,
   FormControlErrorIcon,
   FormControlErrorText,
-  Input,
   InputField,
-  AlertCircleIcon,
-} from './FormControl';
-import { Center, Text as FormControlText, Heading } from '@gluestack-ui/themed';
-import {
-  ChevronDownIcon,
-  Button,
-  ButtonText,
+  Text as FormControlText,
+  Heading,
   Radio,
   RadioGroup,
   RadioIcon,
@@ -47,8 +41,6 @@ import {
   CheckboxIndicator,
   CheckboxIcon,
   CheckboxLabel,
-} from '@gluestack-ui/themed';
-import {
   Textarea,
   TextareaInput,
   Select,
@@ -62,8 +54,6 @@ import {
   SelectDragIndicator,
   SelectItem,
   Switch,
-} from '@gluestack-ui/themed';
-import {
   Slider,
   SliderTrack,
   SliderFilledTrack,
@@ -77,8 +67,12 @@ import {
   ModalFooter,
   HStack,
   VStack,
-} from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
+  FormControl,
+  FormControlLabel,
+  Icon,
+  Button,
+  ButtonText,
+} from '../../core-components/nativewind';
 import {
   AppProvider,
   CodePreview,
@@ -86,20 +80,18 @@ import {
   TableContainer,
   Text,
   InlineCode,
+  CollapsibleCode,
 } from '@gluestack/design-system';
-
+import { transformedCode } from '../../utils';
 import { useState } from 'react';
-
-import Wrapper from '../../components-example/nativewind/Wrapper';
-import { Box } from '../../components-example/nativewind/Box';
-import { CollapsibleCode } from '@gluestack/design-system';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 
 This is an illustration of **FormControl** component.
 
-<Wrapper>
+<AppProvider>
   <CodePreview
     showComponentRenderer={true}
-    showArgsController={true}
+    showArgsController={false}
     metaData={{
       code: `
         <Box className="h-32 w-72">
@@ -121,6 +113,7 @@ This is an illustration of **FormControl** component.
             </FormControlHelper>
             <FormControlError>
               <FormControlErrorIcon
+                size={10}
                 as={AlertCircleIcon}
               />
               <FormControlErrorText>
@@ -149,32 +142,96 @@ This is an illustration of **FormControl** component.
         AlertCircleIcon,
         Box,
       },
-      argsType: {
-        size: {
-          control: 'select',
-          options: ['sm', 'md', 'lg'],
-          default: 'md',
-        },
-        isDisabled: {
-          control: 'boolean',
-          default: false,
-        },
-        isInvalid: {
-          control: 'boolean',
-          default: false,
-        },
-        isReadOnly: {
-          control: 'boolean',
-          default: false,
-        },
-        isRequired: {
-          control: 'boolean',
-          default: false,
-        },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Form Control with Radio
+
+The Radio Component can be incorporated within the FormControl.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <FormControl>
+          <FormControlLabel>
+            <FormControlLabelText>
+              Favourite fruit
+            </FormControlLabelText>
+          </FormControlLabel>
+          <RadioGroup className='my-2'>
+            <VStack space="sm">
+              <Radio size="sm" value="Mango">
+                <RadioIndicator className='mr-2'>
+                  <RadioIcon>
+                    <CircleIcon/>
+                  </RadioIcon>
+                </RadioIndicator>
+                <RadioLabel>
+                  Mango
+                </RadioLabel>
+              </Radio>
+              <Radio size="sm" value="Apple">
+                <RadioIndicator className='mr-2'>
+                  <RadioIcon>
+                    <CircleIcon/>
+                  </RadioIcon>
+                </RadioIndicator>
+                <RadioLabel>
+                  Apple
+                </RadioLabel>
+              </Radio>
+              <Radio size="sm" value="Orange">
+                <RadioIndicator className='mr-2'>
+                  <RadioIcon>
+                    <CircleIcon/>
+                  </RadioIcon>
+                </RadioIndicator>
+                <RadioLabel>
+                  Orange
+                </RadioLabel>
+              </Radio>
+            </VStack>
+          </RadioGroup>
+          <FormControlHelper>
+            <FormControlHelperText>
+              Choose the fruit you like the most
+            </FormControlHelperText>
+          </FormControlHelper>
+        </FormControl>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+        FormControlError,
+        FormControlErrorIcon,
+        FormControlErrorText,
+        Icon,
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        AlertCircleIcon,
+        VStack,
+        CircleIcon,
+        Heading,
       },
+      argsType: {},
     }}
   />
-</Wrapper>
+</AppProvider>
 
 <br />
 
@@ -191,9 +248,11 @@ npm i @gluestack-ui/form-control
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/FormControl/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/form-control/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -203,7 +262,7 @@ npm i @gluestack-ui/form-control
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { FormControl } from '@/components/ui/FormControl';
+import { FormControl } from '@/components/ui/form-control';
 ```
 
 ```jsx
@@ -388,3 +447,597 @@ Explore the comprehensive details of the Input in this document, including its i
   src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D5030-22048%26t%3DIS25mxEIlIP9OacJ-1%26scaling%3Dscale-down%26page-id%3D5030%253A19919%26starting-point-node-id%3D5030%253A22048%26mode%3Ddesign"
   allowfullscreen
 ></iframe> -->
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Form Control with Input
+
+The Input Component can be incorporated within the FormControl.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={true}
+    metaData={{
+      code: `
+        <Box className="h-32 w-72">
+          <FormControl {...props}>
+            <FormControlLabel className="mb-1">
+              <FormControlLabelText>Password</FormControlLabelText>
+            </FormControlLabel>
+            <Input>
+              <InputField
+                type="password"
+                defaultValue="12345"
+                placeholder="password"
+              />
+            </Input>
+            <FormControlHelper>
+              <FormControlHelperText>
+                Must be at least 6 characters.
+              </FormControlHelperText>
+            </FormControlHelper>
+            <FormControlError>
+              <FormControlErrorIcon
+                size={10}
+                as={AlertCircleIcon}
+              />
+              <FormControlErrorText>
+                At least 6 characters are required.
+              </FormControlErrorText>
+            </FormControlError>
+          </FormControl>
+        </Box>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+        FormControlError,
+        FormControlErrorIcon,
+        FormControlErrorText,
+        Icon,
+        Input,
+        InputField,
+        AlertCircleIcon,
+        Box,
+      },
+      argsType: {
+        size: {
+          control: 'select',
+          options: ['sm', 'md', 'lg'],
+          default: 'md',
+        },
+        isDisabled: {
+          control: 'boolean',
+          default: false,
+        },
+        isInvalid: {
+          control: 'boolean',
+          default: false,
+        },
+        isReadOnly: {
+          control: 'boolean',
+          default: false,
+        },
+        isRequired: {
+          control: 'boolean',
+          default: false,
+        },
+      },
+    }}
+  />
+</Wrapper>
+
+#### Form Control with Checkbox
+
+The Checkbox Component can be incorporated within the FormControl.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <FormControl>
+          <FormControlLabel>
+            <FormControlLabelText>
+              Sign up for newsletters
+            </FormControlLabelText>
+          </FormControlLabel>
+          <CheckboxGroup className='my-2'>
+            <VStack space="sm">
+              <Checkbox size="sm" value="Mango">
+                <CheckboxIndicator className='mr-2'>
+                  <CheckboxIcon>
+                    <CheckIcon />
+                  </CheckboxIcon>
+                </CheckboxIndicator>
+                <CheckboxLabel>
+                  Daily Bits
+                </CheckboxLabel>
+              </Checkbox>
+              <Checkbox size="sm" value="Apple">
+                <CheckboxIndicator className='mr-2'>
+                  <CheckboxIcon>
+                    <CheckIcon />
+                  </CheckboxIcon>
+                </CheckboxIndicator>
+                <CheckboxLabel>
+                  Event Updates
+                </CheckboxLabel>
+              </Checkbox>
+              <Checkbox size="sm" value="Orange">
+                <CheckboxIndicator className='mr-2'>
+                  <CheckboxIcon>
+                    <CheckIcon />
+                  </CheckboxIcon>
+                </CheckboxIndicator>
+                <CheckboxLabel>
+                  Sponsorship
+                </CheckboxLabel>
+              </Checkbox>
+            </VStack>
+          </CheckboxGroup>
+          <FormControlHelper>
+            <FormControlHelperText>
+              Subscribe to newsletters for updates
+            </FormControlHelperText>
+          </FormControlHelper>
+        </FormControl>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+        FormControlError,
+        FormControlErrorIcon,
+        FormControlErrorText,
+        Icon,
+        Checkbox,
+        CheckboxGroup,
+        CheckboxIndicator,
+        CheckboxIcon,
+        CheckboxLabel,
+        AlertCircleIcon,
+        VStack,
+        CheckIcon,
+        Heading,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Form Control with Textarea
+
+The Textarea Component can be incorporated within the FormControl.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <FormControl>
+          <FormControlLabel>
+            <FormControlLabelText>
+              Comment
+            </FormControlLabelText>
+          </FormControlLabel>
+          <Textarea>
+            <TextareaInput />
+          </Textarea>
+          <FormControlHelper >
+            <FormControlHelperText>
+              Type your comment above
+            </FormControlHelperText>
+          </FormControlHelper>
+        </FormControl>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+        FormControlError,
+        FormControlErrorIcon,
+        FormControlErrorText,
+        Icon,
+        Textarea,
+        TextareaInput,
+        AlertCircleIcon,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Form Control with Inline Form
+
+Inline forms can utilize FormControl for seamless integration and enhanced functionality.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack space='md'>
+          <FormControl>
+            <Input>
+              <InputField
+                placeholder="Username"
+              />
+            </Input>
+          </FormControl>
+          <FormControl>
+            <Select>
+              <SelectTrigger>
+                <SelectInput placeholder="Country"/>
+                <SelectIcon className='mr-3'>
+                  <Icon as={ChevronDownIcon} />
+                </SelectIcon>
+              </SelectTrigger>
+              <SelectPortal>
+                <SelectBackdrop />
+                <SelectContent>
+                  <SelectDragIndicatorWrapper>
+                    <SelectDragIndicator />
+                  </SelectDragIndicatorWrapper>
+                  <SelectItem label="India" value="India" />
+                  <SelectItem label="Sri Lanka" value="Sri Lanka" />
+                  <SelectItem label="Uganda" value="Uganda" />
+                  <SelectItem label="Japan" value="Japan" />
+                </SelectContent>
+              </SelectPortal>
+            </Select>
+          </FormControl>
+          <FormControl>
+            <Button className='bg-blue-600'>
+              <ButtonText className='font-medium text-sm' >
+                Next
+              </ButtonText>
+            </Button>
+          </FormControl>
+        </HStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+        FormControlError,
+        FormControlErrorIcon,
+        FormControlErrorText,
+        Icon,
+        HStack,
+        ChevronDownIcon,
+        Input,
+        InputField,
+        Select,
+        SelectTrigger,
+        SelectInput,
+        SelectIcon,
+        SelectPortal,
+        SelectBackdrop,
+        SelectContent,
+        SelectDragIndicatorWrapper,
+        SelectDragIndicator,
+        SelectItem,
+        Button,
+        ButtonText,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Form Control with Form in Modal
+
+Modal or other Overlay components can utilize FormControl for state management and error control.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      function App() {
+        const [showModal, setShowModal] = useState(false);
+        return(
+          <Center className='h-[500px]'>
+            <Button
+              className='bg-blue-600 py-2.5 px-3'
+              onPress={()=>{
+                setShowModal(true);
+              }}
+            >
+              <ButtonText>
+                Change Settings
+              </ButtonText>
+            </Button>
+            <Modal
+              isOpen={showModal}
+              onClose={() => {
+                setShowModal(false)
+              }}
+              className='bg-white'
+            >
+              <ModalBackdrop/>
+              <ModalContent className='max-w-96'>
+                <ModalBody className='p-5'>
+                  <VStack space='xs' className='mb-4'>
+                    <Heading>
+                      Change Settings
+                    </Heading>
+                    <Text size='sm'>
+                      Make modifications to the settings with ease.
+                    </Text>
+                  </VStack>
+                  <VStack className='py-2' space='xl'>
+                    <FormControl>
+                      <FormControlLabel>
+                        <FormControlLabelText>
+                          Name
+                        </FormControlLabelText>
+                      </FormControlLabel>
+                      <Input>
+                        <InputField
+                          value='Wade Warren'
+                        />
+                      </Input>
+                    </FormControl>
+                    <FormControl>
+                      <FormControlLabel>
+                        <FormControlLabelText>
+                          Email
+                        </FormControlLabelText>
+                      </FormControlLabel>
+                      <Input>
+                        <InputField
+                          value='wadewarren@sample.com'
+                        />
+                      </Input>
+                    </FormControl>
+                    <FormControl>
+                      <FormControlLabel>
+                        <FormControlLabelText>
+                          Volume
+                        </FormControlLabelText>
+                      </FormControlLabel>
+                      <Slider defaultValue={60} sliderTrackHeight={4}>
+                        <SliderTrack>
+                          <SliderFilledTrack/>
+                        </SliderTrack>
+                        <SliderThumb
+                        />
+                    </Slider>
+                    </FormControl>
+                    <FormControl>
+                      <HStack space='sm'>
+                        <Switch size='sm'/>
+                        <FormControlLabelText>
+                          Dark Mode
+                        </FormControlLabelText>
+                      </HStack>
+                    </FormControl>
+                  </VStack>
+                  <Button
+                    className='mt-4'
+                    onPress={()=>{
+                      setShowModal(false);
+                    }}
+                  >
+                    <ButtonText>
+                      Save Changes
+                    </ButtonText>
+                  </Button>
+                </ModalBody>
+              </ModalContent>
+            </Modal>
+          </Center>
+        );
+      }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        useState,
+        Box,
+        Center,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+        FormControlError,
+        FormControlErrorIcon,
+        FormControlErrorText,
+        Input,
+        InputField,
+        Button,
+        ButtonText,
+        Slider,
+        SliderTrack,
+        SliderFilledTrack,
+        SliderThumb,
+        Switch,
+        Modal,
+        ModalBackdrop,
+        ModalContent,
+        ModalHeader,
+        ModalCloseButton,
+        ModalBody,
+        ModalFooter,
+        Text: FormControlText,
+        Heading,
+        VStack,
+        HStack,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Form Control with Error
+
+Error messages can be displayed using FormControl.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <FormControl isInvalid>
+          <FormControlLabel>
+            <FormControlLabelText>
+              Which time slot works best for you?
+            </FormControlLabelText>
+          </FormControlLabel>
+          <RadioGroup className='my-2'>
+            <VStack space="sm">
+              <Radio size="sm" value="Mango">
+                <RadioIndicator className='mr-2'>
+                  <RadioIcon>
+                    <CircleIcon/>
+                  </RadioIcon>
+                </RadioIndicator>
+                <RadioLabel>
+                  Monday
+                </RadioLabel>
+              </Radio>
+              <Radio size="sm" value="Apple">
+                <RadioIndicator className='mr-2'>
+                  <RadioIcon>
+                    <CircleIcon/>
+                  </RadioIcon>
+                </RadioIndicator>
+                <RadioLabel>
+                  Tuesday
+                </RadioLabel>
+              </Radio>
+              <Radio size="sm" value="Orange">
+                <RadioIndicator className='mr-2'>
+                  <RadioIcon>
+                    <CircleIcon/>
+                  </RadioIcon>
+                </RadioIndicator>
+                <RadioLabel>
+                  Wednesday
+                </RadioLabel>
+              </Radio>
+            </VStack>
+          </RadioGroup>
+          <FormControlError>
+            <FormControlErrorIcon size={10} as={AlertCircleIcon}/>
+            <FormControlErrorText>
+              Choose one time slot for the meeting
+            </FormControlErrorText>
+          </FormControlError>
+        </FormControl>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+        FormControlError,
+        FormControlErrorIcon,
+        FormControlErrorText,
+        Icon,
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        AlertCircleIcon,
+        VStack,
+        CircleIcon,
+        Heading,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Form Control with Form Actions
+
+Form Action Buttons can also be utilized in conjunction with FormControl.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack>
+          <FormControl>
+            <Button action='negative' className='mr-4'>
+              <ButtonText>
+                Delete
+              </ButtonText>
+            </Button>
+          </FormControl>
+          <FormControl>
+            <Button variant='outline' action='secondary'>
+              <ButtonText>
+                Cancel
+              </ButtonText>
+            </Button>
+          </FormControl>
+        </HStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+        FormControlError,
+        FormControlErrorIcon,
+        FormControlErrorText,
+        HStack,
+        Button,
+        ButtonText,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx
new file mode 100644
index 0000000000..4787295fc9
--- /dev/null
+++ b/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx
@@ -0,0 +1,391 @@
+---
+title: FormControl | gluestack-ui | Installation, Usage, and API
+
+description: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.
+
+pageTitle: FormControl
+
+pageDescription: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.
+
+showHeader: true
+---
+
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="with-nativewind/components/Forms/FormControl" />
+
+import {
+  Icon,
+  AlertCircleIcon,
+  CircleIcon,
+  CheckIcon,
+} from '@gluestack-ui/themed';
+import {
+  FormControl,
+  FormControlLabel,
+  FormControlLabelText,
+  FormControlHelper,
+  FormControlHelperText,
+  FormControlError,
+  FormControlErrorIcon,
+  FormControlErrorText,
+  Input,
+  InputField,
+} from './FormControl';
+import { Center, Text as FormControlText, Heading } from '@gluestack-ui/themed';
+import {
+  ChevronDownIcon,
+  Button,
+  ButtonText,
+  Radio,
+  RadioGroup,
+  RadioIcon,
+  RadioIndicator,
+  RadioLabel,
+  Checkbox,
+  CheckboxGroup,
+  CheckboxIndicator,
+  CheckboxIcon,
+  CheckboxLabel,
+} from '@gluestack-ui/themed';
+import {
+  Textarea,
+  TextareaInput,
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicatorWrapper,
+  SelectDragIndicator,
+  SelectItem,
+  Switch,
+} from '@gluestack-ui/themed';
+import {
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+  Modal,
+  ModalBackdrop,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  HStack,
+  VStack,
+} from '@gluestack-ui/themed';
+import { transformedCode } from '../../utils';
+import {
+  AppProvider,
+  CodePreview,
+  Table,
+  TableContainer,
+  Text,
+  InlineCode,
+} from '@gluestack/design-system';
+
+import { useState } from 'react';
+
+import Wrapper from '../../core-components/nativewind/Wrapper';
+import { Box } from '../../core-components/nativewind/box';
+import { CollapsibleCode } from '@gluestack/design-system';
+
+This is an illustration of **FormControl** component.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={true}
+    metaData={{
+      code: `
+        <Box className="h-32 w-72">
+          <FormControl {...props}>
+            <FormControlLabel className="mb-1">
+              <FormControlLabelText>Password</FormControlLabelText>
+            </FormControlLabel>
+            <Input>
+              <InputField
+                type="password"
+                defaultValue="12345"
+                placeholder="password"
+              />
+            </Input>
+            <FormControlHelper>
+              <FormControlHelperText>
+                Must be at least 6 characters.
+              </FormControlHelperText>
+            </FormControlHelper>
+            <FormControlError>
+              <FormControlErrorIcon
+                as={AlertCircleIcon}
+              />
+              <FormControlErrorText>
+                At least 6 characters are required.
+              </FormControlErrorText>
+            </FormControlError>
+          </FormControl>
+        </Box>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+        FormControlError,
+        FormControlErrorIcon,
+        FormControlErrorText,
+        Icon,
+        Input,
+        InputField,
+        AlertCircleIcon,
+        Box,
+      },
+      argsType: {
+        size: {
+          control: 'select',
+          options: ['sm', 'md', 'lg'],
+          default: 'md',
+        },
+        isDisabled: {
+          control: 'boolean',
+          default: false,
+        },
+        isInvalid: {
+          control: 'boolean',
+          default: false,
+        },
+        isReadOnly: {
+          control: 'boolean',
+          default: false,
+        },
+        isRequired: {
+          control: 'boolean',
+          default: false,
+        },
+      },
+    }}
+  />
+</Wrapper>
+
+<br />
+
+## Installation
+
+### Step 1: Install the following dependencies:
+
+```bash
+
+npm i @gluestack-ui/form-control
+
+```
+
+### Step 2: Copy and paste the following code into your project.
+
+<CollapsibleCode>
+
+```jsx  %%-- File: core-components/nativewind/form-control/index.tsx --%% 
+```
+
+</CollapsibleCode>
+
+### Step 3: Update the import paths to match your project setup.
+
+## API Reference
+
+To use this component in your project, include the following import statement in your file.
+
+```bash
+import { FormControl } from '@/components/ui/form-control';
+```
+
+```jsx
+export default () => (
+  <FormControl>
+    <FormControlLabel>
+      <FormControlLabelText />
+    </FormControlLabel>
+    <FormControlHelper>
+      <FormControlHelperText />
+    </FormControlHelper>
+    <FormControlError>
+      <FormControlErrorIcon />
+      <FormControlErrorText />
+    </FormControlError>
+  </FormControl>
+);
+```
+
+### Component Props
+
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
+
+#### FormControl
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+<Wrapper>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Type</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>isInvalid</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>bool</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`When true, invalid state.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>isRequired</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>bool</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`If true, astrick gets activated.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>isDisabled</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>bool</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Disabled state true.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>isReadOnly</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>bool</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`To manually set read-only state.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>isDisabled</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>bool</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`To manually set disable to the FormControl.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</Wrapper>
+
+#### FormControlLabel
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+#### FormControlLabelText
+
+It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
+
+#### FormControlHelper
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+#### FormControlHelperText
+
+It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
+
+#### FormControlError
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+#### FormControlErrorIcon
+
+It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
+
+#### FormControlErrorText
+
+It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
+
+### Features
+
+- Keyboard support for actions.
+- Support for hover, focus and active states.
+- Option to add your styles or use the default styles.
+
+### Props
+
+FormControl component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props).
+
+<!--
+## Spec Doc
+
+Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
+
+<iframe
+  style={{
+    borderRadius: '8px',
+    border: ' 1px solid rgba(0, 0, 0, 0.1)',
+    aspectRatio: 736 / 585,
+  }}
+  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D5030-22048%26t%3DIS25mxEIlIP9OacJ-1%26scaling%3Dscale-down%26page-id%3D5030%253A19919%26starting-point-node-id%3D5030%253A22048%26mode%3Ddesign"
+  allowfullscreen
+></iframe> -->
diff --git a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx
index 343460624f..c7a77ac500 100644
--- a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx
@@ -72,7 +72,7 @@ import {
   Icon,
   Button,
   ButtonText,
-} from './FormControl';
+} from '../../core-components/themed';
 import {
   AppProvider,
   CodePreview,
@@ -84,7 +84,7 @@ import {
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
 import { useState } from 'react';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **FormControl** component.
 
@@ -183,7 +183,11 @@ npm i @gluestack-ui/form-control
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/FormControl/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/form-control/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -193,7 +197,7 @@ npm i @gluestack-ui/form-control
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { FormControl } from '@/components/ui/FormControl';
+import { FormControl } from '@/components/ui/form-control';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/HStack/HStack.tsx b/example/storybook-nativewind/src/components/HStack/HStack.tsx
index 141648d1f9..51764f6b38 100644
--- a/example/storybook-nativewind/src/components/HStack/HStack.tsx
+++ b/example/storybook-nativewind/src/components/HStack/HStack.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { HStack } from '@/components/ui/HStack';
+import { HStack } from '@/components/ui/hstack';
 import { Box } from '@gluestack-ui/themed';
 
 const HStackBasic = ({ space, reversed, ...props }: any) => {
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 e068372fa6..6c663710bd 100644
--- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
@@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Layout/HStack" />
 
-import { HStack } from './HStack';
+import { HStack } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -25,9 +25,9 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
-import { Box } from '../../components-example/nativewind/Box';
+import { Box } from '../../core-components/nativewind/box';
 
 This is an illustration of **HStack** component.
 
@@ -70,7 +70,11 @@ This is an illustration of **HStack** component.
 ### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/HStack/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/hstack/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 2: Update the import paths to match your project setup.
@@ -80,7 +84,7 @@ This is an illustration of **HStack** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { HStack } from '@/components/ui/HStack';
+import { HStack } from '@/components/ui/hstack';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx
index dd7296ae54..07b79ce754 100644
--- a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx
@@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Layout/HStack" />
 
-import { HStack } from './HStack';
+import { HStack } from '../../core-components/themed';
 import { Box } from '@gluestack-ui/themed';
 import { transformedCode } from '../../utils';
 import {
@@ -26,7 +26,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **HStack** component.
@@ -70,7 +70,11 @@ This is an illustration of **HStack** component.
 ### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/HStack/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/hstack/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 2: Update the import paths to match your project setup.
@@ -80,7 +84,7 @@ This is an illustration of **HStack** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { HStack } from '@/components/ui/HStack';
+import { HStack } from '@/components/ui/hstack';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Heading/Heading.tsx b/example/storybook-nativewind/src/components/Heading/Heading.tsx
index 40d3b52af9..01990b147f 100644
--- a/example/storybook-nativewind/src/components/Heading/Heading.tsx
+++ b/example/storybook-nativewind/src/components/Heading/Heading.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Center } from '@gluestack-ui/themed';
-import { Heading } from '@/components/ui/Heading';
+import { Heading } from '@/components/ui/heading';
 
 const HeadingBasic = ({ text = "I'm the heading", ...props }) => {
   return <Heading {...props}>{text}</Heading>;
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 bd36d41190..81a32933a7 100644
--- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
@@ -1,5 +1,5 @@
 ---
-title: Heading | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Heading Component | Installation, Usage, and API
 
 description: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6.
 
@@ -14,8 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Typography/Heading" />
 
-import { Heading } from './Heading';
-import { Center } from '@gluestack-ui/themed';
+import { Heading, Center } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -26,32 +25,33 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Heading** component.
 
 <Wrapper>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { false}
+  metaData = {{
+    code: `
         <Heading>I am a Heading</Heading>
       `,
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         Heading,
       },
-      argsType: {},
-    }}
-  />
+    argsType: { },
+  }
+}
+/>
 </Wrapper>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -66,9 +66,11 @@ npm i @expo/html-elements
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Heading/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/heading/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -78,7 +80,7 @@ npm i @expo/html-elements
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Heading } from '@/components/ui/Heading';
+import { Heading } from '@/components/ui/heading';
 ```
 
 ```jsx
@@ -226,3 +228,48 @@ Heading component is created using H1 component from @expo/html-elements. It ext
     </Table>
   </TableContainer>
 </Wrapper>
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Heading Sizes
+
+Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, and `5xl`, allowing users to customize the size of the heading according to their design requirements.
+
+<AppProvider>
+  <CodePreview
+    _rendererWrapper={{ py: '$2.5' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App() {
+          const sizes = [
+            'xs',
+            'sm',
+            'md',
+            'lg',
+            'xl',
+            '2xl',
+            '3xl',
+            '4xl',
+            '5xl',
+          ];
+          return (
+              <Center>
+                {sizes.map((size) => (
+                  <Heading size={size}>{size}</Heading>
+                ))}
+              </Center>
+          );
+        };
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: { Wrapper, Center, Heading },
+      argsType: {},
+    }}
+  />
+</AppProvider>
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx
index 513d3f1f6d..cd9187d4eb 100644
--- a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx
@@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Typography/Heading" />
 
-import { Heading, Center } from '../../components-example/themed';
+import { Heading, Center } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -25,7 +25,7 @@ import {
   InlineCode,
   CollapsibleCode,
 } from '@gluestack/design-system';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Heading** component.
 
@@ -64,7 +64,11 @@ npm i @expo/html-elements
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Heading/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/heading/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -74,7 +78,7 @@ npm i @expo/html-elements
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Heading } from '@/components/ui/Heading';
+import { Heading } from '@/components/ui/heading';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Icon/Icon.tsx b/example/storybook-nativewind/src/components/Icon/Icon.tsx
index 78c1e8a962..2d7fbfd710 100644
--- a/example/storybook-nativewind/src/components/Icon/Icon.tsx
+++ b/example/storybook-nativewind/src/components/Icon/Icon.tsx
@@ -57,9 +57,9 @@ import {
   TrashIcon,
   UnlockIcon,
   createIcon,
-} from '@/components/ui/Icon';
-import { HStack } from '@/components/ui/HStack';
-import { VStack } from '@/components/ui/VStack';
+} from '@/components/ui/icon';
+import { HStack } from '@/components/ui/hstack';
+import { VStack } from '@/components/ui/vstack';
 
 import {
   ChromeIcon,
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 6731ef0bb8..3e61748b5a 100644
--- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
@@ -78,10 +78,10 @@ import {
   FacebookIcon,
   createIcon,
   Camera,
-} from './Icon';
+} from '../../core-components/nativewind';
 
 import { Path, Rect } from 'react-native-svg';
-
+import { CollapsibleCode } from "@gluestack/design-system"
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -91,7 +91,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 
 This is an illustration of **Icon** component.
 
@@ -137,7 +137,11 @@ npm i @gluestack-ui/icon
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Icon/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/icon/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -147,7 +151,7 @@ npm i @gluestack-ui/icon
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Icon } from '@/components/ui/Icon';
+import { Icon } from '@/components/ui/icon';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx
index f1592394af..973ac160c1 100644
--- a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx
@@ -78,8 +78,8 @@ import {
   FacebookIcon,
   createIcon,
   Camera,
-} from './Icon';
-
+} from '../../core-components/themed';
+import { CollapsibleCode } from "@gluestack/design-system";
 import { Path, Rect } from 'react-native-svg';
 
 import { transformedCode } from '../../utils';
@@ -91,7 +91,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Icon** component.
 
@@ -137,7 +137,11 @@ npm i @gluestack-ui/icon
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Icon/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/icon/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -147,7 +151,7 @@ npm i @gluestack-ui/icon
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Icon } from '@/components/ui/Icon';
+import { Icon } from '@/components/ui/icon';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Image/Image.tsx b/example/storybook-nativewind/src/components/Image/Image.tsx
index 84710c12de..737dab98c2 100644
--- a/example/storybook-nativewind/src/components/Image/Image.tsx
+++ b/example/storybook-nativewind/src/components/Image/Image.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image } from '@/components/ui/Image';
+import { Image } from '@/components/ui/image';
 
 const ImageBasic = ({
   uri = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
diff --git a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
index fff6b72be0..9baaaff5cd 100644
--- a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
+++ b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
@@ -1,4 +1,4 @@
-import { Image } from '@/components/ui/Image';
+import { Image } from '@/components/ui/image';
 import { VStack } from '@gluestack-ui/themed';
 import React from 'react';
 
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 25028c1268..8a7c0448b7 100644
--- a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
@@ -14,9 +14,9 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Media And Icons/Image" />
 
-import { Image } from './Image';
+import { Image } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 
 import {
   AppProvider,
@@ -80,9 +80,11 @@ npm i @gluestack-ui/image
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Image/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/image/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -92,7 +94,7 @@ npm i @gluestack-ui/image
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Image } from '@/components/ui/Image';
+import { Image } from '@/components/ui/image';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx
index d7f586b7cf..747041d4c4 100644
--- a/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx
@@ -14,9 +14,9 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Media And Icons/Image" />
 
-import { Image } from './Image';
+import { Image } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 import {
   AppProvider,
@@ -80,7 +80,11 @@ npm i @gluestack-ui/image
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Image/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/image/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -90,7 +94,7 @@ npm i @gluestack-ui/image
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Image } from '@/components/ui/Image';
+import { Image } from '@/components/ui/image';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Input/Input.tsx b/example/storybook-nativewind/src/components/Input/Input.tsx
index 743be8c2a4..c249853522 100644
--- a/example/storybook-nativewind/src/components/Input/Input.tsx
+++ b/example/storybook-nativewind/src/components/Input/Input.tsx
@@ -7,10 +7,10 @@ import {
   Icon,
   FormControl,
 } from '@gluestack-ui/themed';
-import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/Input';
-import { Center } from '@/components/ui/Center';
-import { VStack } from '@/components/ui/VStack';
-import { Text } from '@/components/ui/Text';
+import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/input';
+import { Center } from '@/components/ui/center';
+import { VStack } from '@/components/ui/vstack';
+import { Text } from '@/components/ui/text';
 import { EyeIcon, EyeOffIcon, SearchIcon } from 'lucide-react-native';
 import { useState } from 'react';
 
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 8bee360808..53a957d6f1 100644
--- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
@@ -14,8 +14,11 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Forms/Input" />
 
-import { Input, InputField, InputIcon, InputSlot } from './Input';
 import {
+  Input,
+  InputField,
+  InputIcon,
+  InputSlot,
   Button,
   ButtonText,
   VStack,
@@ -23,9 +26,10 @@ import {
   Center,
   Box,
   FormControl,
-} from '@gluestack-ui/themed';
-import { Heading, useState } from '@gluestack-ui/themed';
-import { Icon, SearchIcon, EyeIcon, EyeOffIcon } from '@gluestack-ui/themed';
+  Heading,
+  Icon,
+} from '../../core-components/nativewind';
+import { SearchIcon, EyeIcon, EyeOffIcon } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -34,9 +38,10 @@ import {
   TableContainer,
   Text,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 
 This is an illustration of **Input** component.
 
@@ -104,9 +109,11 @@ npm i @gluestack-ui/input
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Input/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/input/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -116,7 +123,7 @@ npm i @gluestack-ui/input
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Input } from '@/components/ui/Input';
+import { Input } from '@/components/ui/input';
 ```
 
 ```jsx
@@ -484,3 +491,133 @@ Explore the comprehensive details of the Input in this document, including its i
   src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D213%253A12091%26type%3Ddesign%26node-id%3D213-12092%26viewport%3D256%252C289%252C0.03%26t%3DYlY4Jjtl91JuXCZS-1%26scaling%3Dscale-down%26starting-point-node-id%3D213%253A12092%26mode%3Ddesign"
   allowFullScreen
 ></iframe>
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Input type password with FormControl
+
+The Input component integrates with an icon and a button, providing users with a comprehensive login window inside a FormControl component.
+
+<AppProvider>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App() {
+          const [showPassword, setShowPassword] = React.useState(false);
+          const handleState = () => {
+            setShowPassword((showState) => {
+              return !showState;
+            });
+          };
+          return (
+            <FormControl
+              className='p-4 border-1 rounded-lg ring-borderLight300 dark:border-1 dark:rounded-lg dark:ring-borderDark800'
+            >
+              <VStack space='xl'>
+                <Heading className='color-text-900 leading-3'>
+                  Login
+                </Heading>
+                <VStack space='xs'>
+                  <Text className='color-text-500 leading-1'>
+                    Email
+                  </Text>
+                  <Input>
+                    <InputField
+                      type="text"
+                    />
+                  </Input>
+                </VStack>
+                <VStack space='xs'>
+                  <Text className='color-text-500 leading-1'>
+                    Password
+                  </Text>
+                  <Input className='text-center'>
+                    <InputField
+                      type={showPassword ? 'text' : 'password'}
+                    />
+                    <InputSlot className='pr-3' onPress={handleState}>
+                      {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */}
+                      <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} className='color-darkBlue-500' />
+                    </InputSlot>
+                  </Input>
+                </VStack>
+                <Button
+                  className='ml-auto'
+                  onPress={()=>{
+                    setShowModal(false);
+                  }}
+                >
+                  <ButtonText className='color-white'>
+                    Save
+                  </ButtonText>
+                </Button>
+              </VStack>
+            </FormControl>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Input,
+        InputField,
+        InputIcon,
+        Button,
+        ButtonText,
+        VStack,
+        Text: GSText,
+        Heading,
+        Icon,
+        EyeIcon,
+        EyeOffIcon,
+        FormControl,
+        InputSlot,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+### Input with Icons
+
+The Input with Icons is a variation of the Input component that displays icons next to input field. It's commonly used in apps for a more visual representation of options and easier navigation.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Input>
+          <InputSlot className='pl-3'>
+            <InputIcon as={SearchIcon}/>
+          </InputSlot>
+          <InputField
+            placeholder="Search..."
+          />
+        </Input>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Input,
+        InputField,
+        InputIcon,
+        SearchIcon,
+        Icon,
+        InputSlot,
+      },
+      argsType: {},
+    }}
+/>
+
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
index bd5805cb7a..377e193625 100644
--- a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
@@ -31,7 +31,7 @@ import {
   SearchIcon,
   EyeIcon,
   EyeOffIcon,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -40,9 +40,10 @@ import {
   TableContainer,
   Text,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Input** component.
 
@@ -110,7 +111,11 @@ npm i @gluestack-ui/input
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Input/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/input/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -120,7 +125,7 @@ npm i @gluestack-ui/input
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Input } from '@/components/ui/Input';
+import { Input } from '@/components/ui/input';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/InputAcessoryView/InputAccessoryView.tsx b/example/storybook-nativewind/src/components/InputAcessoryView/InputAccessoryView.tsx
index 29551be035..ffbf3bfd27 100644
--- a/example/storybook-nativewind/src/components/InputAcessoryView/InputAccessoryView.tsx
+++ b/example/storybook-nativewind/src/components/InputAcessoryView/InputAccessoryView.tsx
@@ -5,7 +5,7 @@ import {
   Center,
   Input,
 } from '@gluestack-ui/themed';
-import { InputAccessoryView } from '@/components/ui/InputAccessoryView';
+import { InputAccessoryView } from '@/components/ui/input-accessory-view';
 import { config } from '@gluestack-ui/config';
 import React, { useState } from 'react';
 
diff --git a/example/storybook-nativewind/src/components/Link/Link.tsx b/example/storybook-nativewind/src/components/Link/Link.tsx
index d9b0a16bbf..f6766910d0 100644
--- a/example/storybook-nativewind/src/components/Link/Link.tsx
+++ b/example/storybook-nativewind/src/components/Link/Link.tsx
@@ -1,18 +1,20 @@
 import React from 'react';
-
-import { Icon, HStack, Text } from '@gluestack-ui/themed';
-import { Link, LinkText } from '@/components/ui/Link';
+import { Link, LinkText } from '@/components/ui/link';
+import { Icon } from '@/components/ui/icon';
+import { HStack } from '@/components/ui/hstack';
+import { Text } from '@/components/ui/text';
 import { ArrowUpRightIcon } from 'lucide-react-native';
-
 const LinkBasic = ({ ...props }: any) => {
   return (
-    <Link href="https://google.com" isExternal {...props}>
-      <LinkText
-      // @ts-ignore
-      >
-        GLUESTACK
-      </LinkText>
-    </Link>
+    <>
+      <Link href="https://google.com" {...props} isExternal>
+        <LinkText
+        // @ts-ignore
+        >
+          GLUESTACK
+        </LinkText>
+      </Link>
+    </>
   );
 };
 
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 847207f073..50d6082740 100644
--- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
@@ -1,5 +1,5 @@
 ---
-title: Link | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Link Component | Installation, Usage, and API
 
 description: With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience.
 
@@ -14,9 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Forms/Link" />
 
-import { Link } from './Link';
-import { LinkText } from '../../components-example/nativewind/Link';
-import { ArrowUpRightIcon, Icon, HStack, Text } from '@gluestack-ui/themed';
+import { ArrowUpRightIcon, Icon, HStack, Text, Link, LinkText } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -26,7 +24,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Link** component.
@@ -69,9 +67,11 @@ npm i @gluestack-ui/link
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Link/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/link/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -81,7 +81,7 @@ npm i @gluestack-ui/link
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Link } from '@/components/ui/Link';
+import { Link } from '@/components/ui/link';
 ```
 
 ```jsx
@@ -229,73 +229,101 @@ We have outlined the various features that ensure the Link component is accessib
 
 Link component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
 
-<!--
-## Spec Doc
-
-Explore the comprehensive details of the Link in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5671%253A39182%26type%3Ddesign%26node-id%3D5671-40987%26viewport%3D1063%252C162%252C0.06%26t%3DMz98WWj2BmQkXQjS-1%26scaling%3Dcontain%26starting-point-node-id%3D5671%253A40987%26mode%3Ddesign"
-  allowFullScreen
-/> -->
-
-<!--
-
-### Customizing the Link
-
-We have a function called `createLink` which can be used to create a custom link component. This function takes in a configuration object which contains the styled components that you want to use for the link. You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.
-
-#### Usage
-
-Default styling of all these components can be found in the `components/core/link` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Link) of the styled `Link` components.
-
-```jsx
-// import the styles
-import { Root } from 'components/core/link/styled-components';
-
-// import the createLink function
-import { createLink } from '@gluestack-ui/link';
-
-// Understanding the API
-const Link = createLink({
-  Root,
-});
-
-// Using the link component
-export default () => (
-  <Link href="">
-    <LinkText />
-  </Link>
-);
-```
-
--->
-
-<!-- ### How to use Next.js Link
+#### Link
 
-By default, Link component uses an anchor tag on web and pressable on native. If you want to use Next.js Link component on web, you have to create a new styled component for link and map it to Link component. You can also change the already present styled-component for link on the path `./components/core/link/styled-components` in your project. For web specific styling, you can create a file with `.web` extension. For example, if you want to create a custom link component, you can create a file named `Link.tsx` and `Linkweb.tsx` in the same directory. The `.web` file will be used only on web and the `Link.tsx` file will be used on native.
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Name</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Value</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>size</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>
+              xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
 
-```jsx
-import Link from 'next/link';
+> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
 
+### Examples
 
-// Using the Next Link component
-const StyledLink = styled(Link, styling, componentConfig, extendedBaseConfig);
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
 
-// if some styling are direct props, you can pass them as props in the styling
-props: {
-  w: 100,
-  h: 100,
-  borderRadius: '$full',
-};
+#### Default
 
-// you can also /style/docs/getting-started/styled to style the component
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+          <HStack>
+            <Text
+              size="lg"
+            >Design inspiration from </Text>
+              <Link href="https://gluestack.io/" isExternal>
+                <LinkText size="lg">pinterest.com</LinkText>
+              </Link>
+          </HStack>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
+      argsType: {},
+    }}
+  />
+</AppProvider>
 
+#### Link with icon
 
-export default () => <StyledLink />;
-``` -->
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack>
+              <Text
+               size="lg">Go to </Text>
+              <Link href="https://gluestack.io/" isExternal>
+                <HStack alignItems="center">
+                <LinkText size="lg">Pinterest</LinkText>
+                <Icon as={ArrowUpRightIcon} size="lg" className='mt-0.5 text-info-600'/>
+                </HStack>
+              </Link>
+         </HStack>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
+      argsType: {},
+    }}
+  />
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx
index 1fcd544ca9..32935907ab 100644
--- a/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx
@@ -21,7 +21,7 @@ import {
   Icon,
   HStack,
   Text,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 import {
   AppProvider,
   CodePreview,
@@ -30,7 +30,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Link** component.
@@ -73,7 +73,11 @@ npm i @gluestack-ui/link
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Link/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/link/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -83,7 +87,7 @@ npm i @gluestack-ui/link
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Link } from '@/components/ui/Link';
+import { Link } from '@/components/ui/link';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Menu/Menu.tsx b/example/storybook-nativewind/src/components/Menu/Menu.tsx
index d261138043..e044f7cd98 100644
--- a/example/storybook-nativewind/src/components/Menu/Menu.tsx
+++ b/example/storybook-nativewind/src/components/Menu/Menu.tsx
@@ -17,7 +17,7 @@ import {
   // MenuIcon,
   MenuItem,
   MenuItemLabel,
-} from '@/components/ui/Menu';
+} from '@/components/ui/menu';
 import { Icon } from '@gluestack-ui/themed';
 import { PaintBucket, PuzzleIcon } from 'lucide-react-native';
 
diff --git a/example/storybook-nativewind/src/components/Menu/index.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.stories.mdx
index 2be5d96238..00a03d1897 100644
--- a/example/storybook-nativewind/src/components/Menu/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Menu/index.stories.mdx
@@ -16,7 +16,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="common/components/Menu" />
 
-import { Menu, MenuIcon, MenuItem, MenuItemLabel } from './Menu';
+import { Menu, MenuIcon, MenuItem, MenuItemLabel } from '../../core-components/themed';
 import {
   ThemeIcon,
   SettingsIcon,
@@ -44,7 +44,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Menu** component.
 
diff --git a/example/storybook-nativewind/src/components/Modal/Modal.tsx b/example/storybook-nativewind/src/components/Modal/Modal.tsx
index 99f39493a2..f8920311a0 100644
--- a/example/storybook-nativewind/src/components/Modal/Modal.tsx
+++ b/example/storybook-nativewind/src/components/Modal/Modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonText } from '@/components/ui/Button';
+import { Button, ButtonText } from '@/components/ui/button';
 import {
   Modal,
   ModalBackdrop,
@@ -8,11 +8,11 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@/components/ui/Modal';
-import { Center } from '@/components/ui/Center';
+} from '@/components/ui/modal';
+import { Center } from '@/components/ui/center';
 
 import { X } from 'lucide-react-native';
-import { Text } from '@/components/ui/Text';
+import { Text } from '@/components/ui/text';
 
 const ModalBasic = (props: any) => {
   const [showModal, setShowModal] = React.useState(false);
diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.storiesold.mdx
index b4d7ac1b95..756ec455bd 100644
--- a/example/storybook-nativewind/src/components/Modal/index.nw.storiesold.mdx
+++ b/example/storybook-nativewind/src/components/Modal/index.nw.storiesold.mdx
@@ -54,7 +54,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Modal** component.
@@ -163,9 +163,11 @@ npm i @gluestack-ui/modal
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Modal/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/modal/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -175,7 +177,7 @@ npm i @gluestack-ui/modal
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Modal } from '@/components/ui/Modal';
+import { Modal } from '@/components/ui/modal';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx
index 1be3111bdc..9303430914 100644
--- a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx
@@ -24,7 +24,7 @@ import {
   Text as ModalText,
   Center,
   CheckCircleIcon,
-} from '@gluestack-ui/themed';
+} from '../../core-components/themed';
 import {
   Modal,
   ModalBackdrop,
@@ -33,7 +33,7 @@ import {
   ModalCloseButton,
   ModalBody,
   ModalFooter,
-} from './Modal';
+} from '../../core-components/themed';
 import {
   VStack,
   HStack,
@@ -54,7 +54,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Modal** component.
@@ -164,7 +164,11 @@ npm i @gluestack-ui/modal
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Modal/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/modal/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -174,7 +178,7 @@ npm i @gluestack-ui/modal
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Modal } from '@/components/ui/Modal';
+import { Modal } from '@/components/ui/modal';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Popover/Popover.tsx b/example/storybook-nativewind/src/components/Popover/Popover.tsx
index 067c76abb0..3ca895f647 100644
--- a/example/storybook-nativewind/src/components/Popover/Popover.tsx
+++ b/example/storybook-nativewind/src/components/Popover/Popover.tsx
@@ -26,7 +26,7 @@ import {
   PopoverBody,
   PopoverFooter,
   PopoverCloseButton,
-} from '@/components/ui/Popover';
+} from '@/components/ui/popover';
 
 import { PhoneIcon, Clock3Icon, MailIcon } from 'lucide-react-native';
 
diff --git a/example/storybook-nativewind/src/components/Popover/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/Popover/index.nw.storiesold.mdx
index c0595fd237..208332c8e8 100644
--- a/example/storybook-nativewind/src/components/Popover/index.nw.storiesold.mdx
+++ b/example/storybook-nativewind/src/components/Popover/index.nw.storiesold.mdx
@@ -54,7 +54,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Popover** component.
@@ -306,9 +306,11 @@ npm i @gluestack-ui/popover
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-%%-- File: components-example/nativewind/Popover/index.tsx --%% 
+
+```jsx 
+%%-- File: core-components/nativewind/popover/index.tsx --%% 
 ```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx
index a2a19312fb..5cf5e5cf0e 100644
--- a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx
@@ -41,7 +41,7 @@ import {
   Clock3Icon,
   MailIcon,
   Center,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 import {
   AppProvider,
   CodePreview,
@@ -52,7 +52,7 @@ import {
   CollapsibleCode,
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Popover** component.
 
@@ -303,7 +303,11 @@ npm i @gluestack-ui/popover
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Popover/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/popover/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Pressable/Pressable.tsx b/example/storybook-nativewind/src/components/Pressable/Pressable.tsx
index 7750a21dc1..9e418b858e 100644
--- a/example/storybook-nativewind/src/components/Pressable/Pressable.tsx
+++ b/example/storybook-nativewind/src/components/Pressable/Pressable.tsx
@@ -1,24 +1,15 @@
 import React from 'react';
 import { Center, Text } from '@gluestack-ui/themed';
-import { Pressable } from '@/components/ui/Pressable';
+import { Pressable } from '@/components/ui/pressable';
 
 const PressableBasic = ({ ...props }: any) => {
   return (
     <Pressable
-      // eslint-disable-next-line no-console
-      onPress={() => console.log('Hello')}
+      // onPress={() => console.log('Hello')}
       {...props}
-      sx={{ h: 100, w: 200 }}
+      className="p-5 bg-primary-500"
     >
-      <Center
-        sx={{
-          h: '100%',
-          w: '100%',
-          bg: '$primary500',
-        }}
-      >
-        <Text sx={{ color: '$white' }}>PRESSABLE</Text>
-      </Center>
+      <Text className="text-typography-0">PRESSABLE</Text>
     </Pressable>
   );
 };
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 274b960315..6f4933fae7 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
@@ -14,11 +14,12 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Forms/Pressable" />
 
-import { Pressable, Text } from './Pressable';
+import { Pressable, Text } from '../../core-components/nativewind';
+
 import { transformedCode } from '../../utils';
 import { AppProvider, CodePreview } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Pressable** component.
@@ -30,7 +31,7 @@ This is an illustration of **Pressable** component.
     metaData={{
       code: `
  <Pressable
-  onPress={() => console.log('Hello')} className="p-5 bg-primary-500 hover:bg-primary-400">
+  onPress={() => console.log('Hello')} className="p-5 bg-primary-500">
   <Text className="text-typography-0">Press me</Text>
 </Pressable>
 `,
@@ -62,7 +63,11 @@ npm i @gluestack-ui/pressable
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Pressable/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/pressable/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -72,7 +77,7 @@ npm i @gluestack-ui/pressable
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Pressable } from '@/components/ui/Pressable';
+import { Pressable } from '@/components/ui/pressable';
 ```
 
 ```jsx
@@ -101,12 +106,14 @@ You can change the child elements according to the states of Pressable component
     showArgsController={false}
     metaData={{
       code: `
- <Pressable className='p-16 bg-primary-500 hover:bg-primary-400'>
-   {({ pressed }) => (
-        <Text color={pressed ? 'pink' : 'yellow'}>PRESSABLE</Text>
+    <Pressable className="p-16 bg-primary-500">
+      {({ pressed }) => (
+        <Text className={pressed ? 'text-pink-400' : 'text-yellow-400'}>
+          PRESSABLE
+        </Text>
       )}
-</Pressable>
-`,
+    </Pressable>
+    `,
       transformCode: (code) => {
         return transformedCode(code);
       },
diff --git a/example/storybook-nativewind/src/components/Pressable/index.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.stories.mdx
index 4aead56b36..61f03cbda8 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.stories.mdx
@@ -18,7 +18,7 @@ import { Pressable } from './Pressable';
 import { transformedCode } from '../../utils';
 import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Pressable** component.
 
diff --git a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
index 20c89b1832..47005e2548 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
@@ -14,13 +14,13 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Forms/Pressable" />
 
-import { Pressable } from './Pressable';
-import { Text } from '../../components-example/themed/Text';
+import { Pressable } from '../../core-components/themed';
+import { Text } from '../../core-components/themed';
 
 import { transformedCode } from '../../utils';
 import { AppProvider, CodePreview } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Pressable** component.
@@ -64,7 +64,11 @@ npm i @gluestack-ui/pressable
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Pressable/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/pressable/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -74,7 +78,7 @@ npm i @gluestack-ui/pressable
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Pressable } from '@/components/ui/Pressable';
+import { Pressable } from '@/components/ui/pressable';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Progress/Progress.tsx b/example/storybook-nativewind/src/components/Progress/Progress.tsx
index dbc60519bc..ec6dd39998 100644
--- a/example/storybook-nativewind/src/components/Progress/Progress.tsx
+++ b/example/storybook-nativewind/src/components/Progress/Progress.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { VStack, Text, Box, Heading, Center } from '@gluestack-ui/themed';
 
-import { Progress, ProgressFilledTrack } from '@/components/ui/Progress';
+import { Progress, ProgressFilledTrack } from '@/components/ui/progress';
 
 const ProgressBasic = ({ value = 50, ...props }: any) => {
   return (
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 5f8497f3ec..b381a6df3f 100644
--- a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx
@@ -14,12 +14,8 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Feedback/Progress" />
 
-import {
-  Progress,
-  ProgressFilledTrack,
-} from '../../components-example/nativewind/Progress';
 
-import { VStack, Box, Heading } from '@gluestack-ui/themed';
+import { Progress, ProgressFilledTrack, VStack, Box, Heading } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -30,7 +26,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Progress** component.
@@ -75,7 +71,11 @@ npm i @gluestack-ui/progress
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Progress/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/progress/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -85,7 +85,7 @@ npm i @gluestack-ui/progress
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Progress, ProgressFilledTrack } from '@/components/ui/Progress';
+import { Progress, ProgressFilledTrack } from '@/components/ui/progress';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx
index b32be59ff4..940d6e5747 100644
--- a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx
@@ -17,9 +17,9 @@ import { Meta } from '@storybook/addon-docs';
 import {
   Progress,
   ProgressFilledTrack,
-} from '../../components-example/themed/Progress';
+} from '../../core-components/themed';
 
-import { VStack, Box, Heading } from '@gluestack-ui/themed';
+import { VStack, Box, Heading } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -30,7 +30,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Progress** component.
@@ -75,7 +75,11 @@ npm i @gluestack-ui/progress
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Progress/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/progress/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -85,7 +89,7 @@ npm i @gluestack-ui/progress
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Progress, ProgressFilledTrack } from '@/components/ui/Progress';
+import { Progress, ProgressFilledTrack } from '@/components/ui/progress';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Radio/Radio.tsx b/example/storybook-nativewind/src/components/Radio/Radio.tsx
index ee06740019..f1eed53d00 100644
--- a/example/storybook-nativewind/src/components/Radio/Radio.tsx
+++ b/example/storybook-nativewind/src/components/Radio/Radio.tsx
@@ -16,7 +16,7 @@ import {
   RadioIcon,
   RadioIndicator,
   RadioLabel,
-} from '@/components/ui/Radio';
+} from '@/components/ui/radio';
 
 const RadioBasic = ({ ...props }: any) => {
   const [values, setValues] = React.useState('Label 1');
diff --git a/example/storybook-nativewind/src/components/Radio/RadioGroup.tsx b/example/storybook-nativewind/src/components/Radio/RadioGroup.tsx
index 6f2511247f..065c24c82c 100644
--- a/example/storybook-nativewind/src/components/Radio/RadioGroup.tsx
+++ b/example/storybook-nativewind/src/components/Radio/RadioGroup.tsx
@@ -7,7 +7,7 @@ import {
   RadioIcon,
   RadioIndicator,
   RadioLabel,
-} from '@/components/ui/Radio';
+} from '@/components/ui/radio';
 
 const RadioGroupBasic = ({
   size,
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 bd52771cb7..f6965b8195 100644
--- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
@@ -20,9 +20,9 @@ import {
   RadioIcon,
   RadioIndicator,
   RadioLabel,
-} from './Radio';
-import { HStack, Box, Heading, CircleIcon, Center } from '@gluestack-ui/themed';
-import { VStack, Text, FormControl } from '@gluestack-ui/themed';
+} from '../../core-components/nativewind';
+import { HStack, Box, Heading, CircleIcon, Center } from '../../core-components/nativewind';
+import { VStack, Text, FormControl } from '../../core-components/nativewind';
 import { useState, useRef } from 'react';
 import { transformedCode } from '../../utils';
 import {
@@ -33,7 +33,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Radio** component.
@@ -97,9 +97,10 @@ npm i @gluestack-ui/radio
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-   %%-- File: components-example/nativewind/Radio/index.tsx --%% 
-  ```
+
+```jsx  %%-- File: core-components/nativewind/radio/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx
index 099ec353f2..e86b8ff52a 100644
--- a/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx
@@ -24,7 +24,7 @@ import {
   InlineCode,
   CollapsibleCode,
 } from '@gluestack/design-system';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import {
   Radio,
   RadioGroup,
@@ -39,7 +39,7 @@ import {
   VStack,
   Text,
   FormControl,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 
 This is an illustration of **Radio** component.
 
@@ -102,7 +102,11 @@ npm i @gluestack-ui/radio
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Radio/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/radio/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Select/Select.tsx b/example/storybook-nativewind/src/components/Select/Select.tsx
index 0d9cb1d9b3..99dcc38fa5 100644
--- a/example/storybook-nativewind/src/components/Select/Select.tsx
+++ b/example/storybook-nativewind/src/components/Select/Select.tsx
@@ -13,7 +13,7 @@ import {
   SelectDragIndicatorWrapper,
   SelectDragIndicator,
   SelectItem,
-} from '@/components/ui/Select';
+} from '@/components/ui/select';
 
 const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => {
   return (
diff --git a/example/storybook-nativewind/src/components/Select/index.stories.mdx b/example/storybook-nativewind/src/components/Select/index.stories.mdx
index e25668a3ae..d952004f7b 100644
--- a/example/storybook-nativewind/src/components/Select/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Select/index.stories.mdx
@@ -27,7 +27,7 @@ import {
   SelectDragIndicatorWrapper,
   SelectDragIndicator,
   SelectItem,
-} from './Select';
+} from '../../core-components/themed';
 import {
   Icon,
   ChevronDownIcon,
@@ -51,7 +51,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Select** component.
 
diff --git a/example/storybook-nativewind/src/components/Slider/Slider.tsx b/example/storybook-nativewind/src/components/Slider/Slider.tsx
index a255bdf037..0954b467ac 100644
--- a/example/storybook-nativewind/src/components/Slider/Slider.tsx
+++ b/example/storybook-nativewind/src/components/Slider/Slider.tsx
@@ -17,7 +17,7 @@ import {
   SliderTrack,
   SliderFilledTrack,
   SliderThumb,
-} from '@/components/ui/Slider';
+} from '@/components/ui/slider';
 
 import { Volume, Volume2Icon, LightbulbIcon } from 'lucide-react-native';
 
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 4ebacf4392..e38fb52c02 100644
--- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx
@@ -15,14 +15,14 @@ import { useRef, useEffect, useState } from 'react';
 
 <Meta title="with-nativewind/components/Forms/Slider" />
 
-import { Slider } from './Slider';
+import { Slider } from '../../core-components/nativewind';
 import {
   SliderTrack,
   SliderFilledTrack,
   SliderThumb,
-} from '../../components-example/nativewind/Slider';
+} from '../../core-components/nativewind';
 
-import { HStack, Volume2Icon, Box } from '@gluestack-ui/themed';
+import { HStack, Volume2Icon, Box } from '../../core-components/nativewind';
 import {
   VStack,
   Volume,
@@ -30,10 +30,8 @@ import {
   LightbulbIcon,
   Icon,
   Heading,
-  Tooltip,
-  TooltipContent,
   Button,
-} from '@gluestack-ui/themed';
+} from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -43,8 +41,8 @@ import {
   TableContainer,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
-import { Center } from '../../components-example/nativewind/Center';
+import Wrapper from '../../core-components/nativewind/Wrapper';
+import { Center } from '../../core-components/nativewind/center';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Slider** component.
@@ -112,7 +110,11 @@ npm i @gluestack-ui/slider
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Slider/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/slider/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -122,7 +124,7 @@ npm i @gluestack-ui/slider
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Slider } from '@/components/ui/Slider';
+import { Slider } from '@/components/ui/slider';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx
index b1f46db1c6..5cb379e261 100644
--- a/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx
@@ -15,13 +15,13 @@ import { useRef, useEffect, useState } from 'react';
 
 <Meta title="with-gluestack-style/components/Forms/Slider" />
 
-import { Slider } from './Slider';
+import { Slider } from '../../core-components/themed';
 import {
   SliderTrack,
   SliderFilledTrack,
   SliderThumb,
-} from '../../components-example/themed/Slider';
-import { HStack, Volume2Icon, Box, Center } from '@gluestack-ui/themed';
+} from '../../core-components/themed';
+import { HStack, Volume2Icon, Box, Center } from '../../core-components/themed';
 import {
   VStack,
   Volume,
@@ -32,7 +32,7 @@ import {
   Tooltip,
   TooltipContent,
   Button,
-} from '@gluestack-ui/themed';
+} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -42,7 +42,7 @@ import {
   TableContainer,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Slider** component.
@@ -110,7 +110,11 @@ npm i @gluestack-ui/slider
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Slider/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/slider/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -120,7 +124,7 @@ npm i @gluestack-ui/slider
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Slider } from '@/components/ui/Slider';
+import { Slider } from '@/components/ui/slider';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Spinner/Spinner.tsx b/example/storybook-nativewind/src/components/Spinner/Spinner.tsx
index f3323df697..4baa6284d0 100644
--- a/example/storybook-nativewind/src/components/Spinner/Spinner.tsx
+++ b/example/storybook-nativewind/src/components/Spinner/Spinner.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
+import { Spinner } from '@/components/ui/spinner';
+import { HStack } from '@/components/ui/hstack';
+import { Text } from '@/components/ui/text';
+import { VStack } from '@/components/ui/vstack';
+import colors from 'tailwindcss/colors';
 
-import { HStack, Text, VStack } from '@gluestack-ui/themed';
-import { Spinner } from '@/components/ui/Spinner';
-
-const SpinnerBasic = ({ ...props }) => <Spinner {...props} />;
+const SpinnerBasic = ({ ...props }) => (
+  <Spinner {...props} color={colors.gray[500]} />
+);
 
 SpinnerBasic.description =
   'This is a basic Spinner component example. Spinners are used to show a loading state of a component or page.';
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 97e48dc519..796220bcb9 100644
--- a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx
@@ -14,12 +14,12 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Feedback/Spinner" />
 
-import { Spinner } from './Spinner';
-import { HStack, VStack, Text } from '@gluestack-ui/themed';
+import { Spinner, HStack, VStack, Text } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import { AppProvider, CodePreview } from '@gluestack/design-system';
+import colors from 'tailwindcss/colors';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Spinner** component.
@@ -62,9 +62,11 @@ npm i @gluestack-ui/spinner
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Spinner/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/spinner/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -74,7 +76,7 @@ npm i @gluestack-ui/spinner
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Spinner } from '@/components/ui/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 ```
 
 ```jsx
@@ -102,16 +104,67 @@ We have outlined the various features that ensure the Fab component is accessibl
 
 - VoiceOver: When the Spinner is focused, the screen reader will announce the loading indicator.
 
-<!-- ## Spec Doc
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
 
-Explore the comprehensive details of the Spinner in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
+#### Spinner with Label
 
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6300-39672%26t%3DS9Au6CP5yb4upkgu-1%26scaling%3Dscale-down%26page-id%3D6300%253A37770%26starting-point-node-id%3D6300%253A39672%26mode%3Ddesign"
-  allowFullScreen
-/> -->
+A Spinner component with a label provides informative text or a label alongside the spinner, offering descriptive context and improving user understanding and interaction with the spinner element within a user interface.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack space="sm" >
+          <Spinner/>
+          <Text size="md">Please Wait</Text>
+        </HStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Spinner,
+        HStack,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Color Scheme
+
+A Spinner component with a color scheme enhances visual appeal by incorporating distinct colors, adding a touch of customization and style to the spinner element within a user interface.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <VStack space="md" >
+      {/* colors is imported from 'tailwindcss/colors' */}
+        <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);
+      },
+      scope: {
+        Wrapper,
+        Spinner,
+        VStack,
+        colors,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx
index 8537bdd2de..2c9953dcc2 100644
--- a/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx
@@ -14,12 +14,12 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Feedback/Spinner" />
 
-import { Spinner } from './Spinner';
-import { HStack, VStack, Text } from '@gluestack-ui/themed';
+import { Spinner } from '../../core-components/themed';
+import { HStack, VStack, Text } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import { AppProvider, CodePreview } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Spinner** component.
@@ -62,7 +62,11 @@ npm i @gluestack-ui/spinner
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Spinner/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/spinner/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -72,7 +76,7 @@ npm i @gluestack-ui/spinner
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Spinner } from '@/components/ui/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Switch/Switch.tsx b/example/storybook-nativewind/src/components/Switch/Switch.tsx
index 46fc9f3ffd..887e642676 100644
--- a/example/storybook-nativewind/src/components/Switch/Switch.tsx
+++ b/example/storybook-nativewind/src/components/Switch/Switch.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { VStack, Text, HStack } from '@gluestack-ui/themed';
-import { Switch } from '@/components/ui/Switch';
+import { Switch } from '@/components/ui/switch';
 
 const SwitchBasic = ({ ...props }: any) => {
   return <Switch defaultValue={true} value={props.isEnabled} {...props} />;
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 cf75ade7e4..b8921c98df 100644
--- a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx
@@ -16,9 +16,9 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Forms/Switch" />
 
-import { Switch } from './Switch';
-import { VStack, Text } from '@gluestack-ui/themed';
-import { HStack } from '@gluestack-ui/themed';
+import { Switch } from '../../core-components/nativewind';
+import { VStack, Text } from '../../core-components/nativewind';
+import { HStack } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -28,7 +28,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Switch** component.
@@ -74,9 +74,11 @@ npm i @gluestack-ui/switch
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Switch/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/switch/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -86,7 +88,7 @@ npm i @gluestack-ui/switch
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Switch } from '@/components/ui/Switch';
+import { Switch } from '@/components/ui/switch';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx
index 367bcd69f8..64fedab797 100644
--- a/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx
@@ -25,8 +25,8 @@ import {
   CollapsibleCode,
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-import { Switch, VStack, Text, HStack } from '../../components-example/themed';
-import Wrapper from '../../components-example/themed/Wrapper';
+import { Switch, VStack, Text, HStack } from '../../core-components/themed';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Switch** component.
 
@@ -71,7 +71,11 @@ npm i @gluestack-ui/switch
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Switch/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/switch/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -81,7 +85,7 @@ npm i @gluestack-ui/switch
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Switch } from '@/components/ui/Switch';
+import { Switch } from '@/components/ui/switch';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Table/index.stories.mdx b/example/storybook-nativewind/src/components/Table/index.stories.mdx
index f35e582805..a767977ce8 100644
--- a/example/storybook-nativewind/src/components/Table/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Table/index.stories.mdx
@@ -14,7 +14,7 @@ tag: api-draft
 
 import { Meta } from '@storybook/addon-docs';
 import { Table, TableContainer, InlineCode } from '@gluestack/design-system';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 <Meta title="common/components/Table" />
 
diff --git a/example/storybook-nativewind/src/components/Tabs/index.stories.mdx b/example/storybook-nativewind/src/components/Tabs/index.stories.mdx
index 42bf2811ec..a4f0c18f85 100644
--- a/example/storybook-nativewind/src/components/Tabs/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Tabs/index.stories.mdx
@@ -14,7 +14,7 @@ tag: api-draft
 
 import { Meta } from '@storybook/addon-docs';
 import { Table, TableContainer, InlineCode } from '@gluestack/design-system';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 <Meta title="common/components/Tabs" />
 
diff --git a/example/storybook-nativewind/src/components/Text/Text.tsx b/example/storybook-nativewind/src/components/Text/Text.tsx
index 01d25b2ae2..bd63b76ed6 100644
--- a/example/storybook-nativewind/src/components/Text/Text.tsx
+++ b/example/storybook-nativewind/src/components/Text/Text.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Center } from '@gluestack-ui/themed';
-import { Text } from '@/components/ui/Text';
+import { Text } from '@/components/ui/text';
+import { Center } from '@/components/ui/center';
 
 const TextBasic = ({
   size = 'md',
@@ -8,8 +8,24 @@ const TextBasic = ({
   fontWeight = 'bold',
   ...props
 }: any) => {
+  const fontWeights = {
+    hairline: 'font-hairline',
+    thin: 'font-thin',
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+    extrabold: 'font-extrabold',
+    black: 'font-black',
+  };
+
   return (
-    <Text size={size} {...props} fontWeight={`$${fontWeight}`}>
+    <Text
+      size={size}
+      {...props}
+      className={`${fontWeights[fontWeight as keyof typeof fontWeights]}`}
+    >
       {text}
     </Text>
   );
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 edc6ccf6fe..58ace6d8e6 100644
--- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx
@@ -14,9 +14,9 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Typography/Text" />
 
-import { Text } from './Text';
+import { Text, Center } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 import {
@@ -31,10 +31,10 @@ This is an illustration of **Text** component.
 
 <Wrapper>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { false}
+  metaData = {{
+    code: `
         <Text>
           Hello World!
         </Text>
@@ -42,25 +42,28 @@ This is an illustration of **Text** component.
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         Text,
       },
-      argsType: {},
-    }}
-  />
+    argsType: { },
+  }
+}
+/>
 </Wrapper>
 
-<br />
+<br/>
 
 ## Installation
 
 ### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Text/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/text/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 2: Update the import paths to match your project setup.
@@ -70,7 +73,7 @@ This is an illustration of **Text** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Text } from '@/components/ui/Text';
+import { Text } from '@/components/ui/text';
 ```
 
 ```jsx
@@ -218,3 +221,172 @@ Text component is created using Text component from react-native. It extends all
     </Table>
   </TableContainer>
 </Wrapper>
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Text Sizes
+
+Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, and `6xl` allowing users to adjust the button size based on their design needs.
+
+<AppProvider>
+  <CodePreview
+    _rendererWrapper={{ py: '$2.5' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App() {
+          const sizes = [
+            'xs',
+            'sm',
+            'md',
+            'lg',
+            'xl',
+            '2xl',
+            '3xl',
+            '4xl',
+            '5xl',
+            '6xl',
+          ];
+          return (
+            <Center>
+              {sizes.map((size) => (
+                <Text size={size} className="text-center">{size}</Text>
+              ))}
+            </Center>
+          );
+        };
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: { Wrapper, Center, Text },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+Text component also accepts some shorthands for basic quick styling.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Type</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>bold</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>boolean</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Used to make the text bold.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>isTruncated</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>boolean</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>italic</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>boolean</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Used to make the text italic.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>underline</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>boolean</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Used underline the text.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>strikeThrough</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>boolean</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`A horizontal line through the center of the text.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>highlight</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>boolean</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Used to highlight the text with a yellow background.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/Text/index.stories.mdx b/example/storybook-nativewind/src/components/Text/index.stories.mdx
index 32dc685ec5..ce9c613837 100644
--- a/example/storybook-nativewind/src/components/Text/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Text/index.stories.mdx
@@ -17,7 +17,7 @@ import { Meta } from '@storybook/addon-docs';
 import { Text } from './Text';
 import { Center } from '@gluestack-ui/themed';
 import { transformedCode } from '../../utils';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 import {
   AppProvider,
diff --git a/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx
index dc6d19ac32..08b1aaf15a 100644
--- a/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx
@@ -23,8 +23,8 @@ import {
   CollapsibleCode,
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-import { Text, Center } from '../../components-example/themed';
-import Wrapper from '../../components-example/themed/Wrapper';
+import { Text, Center } from '../../core-components/themed';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Text** component.
 
@@ -57,7 +57,11 @@ This is an illustration of **Text** component.
 ### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Text/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/text/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 2: Update the import paths to match your project setup.
@@ -67,7 +71,7 @@ This is an illustration of **Text** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Text } from '@/components/ui/Text';
+import { Text } from '@/components/ui/text';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Textarea/Textarea.tsx b/example/storybook-nativewind/src/components/Textarea/Textarea.tsx
index 4fb3d21abd..e646f0dc89 100644
--- a/example/storybook-nativewind/src/components/Textarea/Textarea.tsx
+++ b/example/storybook-nativewind/src/components/Textarea/Textarea.tsx
@@ -8,7 +8,7 @@ import {
   FormControlLabelText,
 } from '@gluestack-ui/themed';
 
-import { Textarea, TextareaInput } from '@/components/ui/Textarea';
+import { Textarea, TextareaInput } from '@/components/ui/textarea';
 
 const TextareaBasic = ({ ...props }: any) => {
   return (
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 8e88de99df..4fa3d3fda9 100644
--- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
@@ -14,7 +14,6 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Forms/Textarea" />
 
-import { Textarea, TextareaInput } from './Textarea';
 import {
   FormControl,
   FormControlError,
@@ -22,7 +21,9 @@ import {
   FormControlLabelText,
   FormControlHelper,
   FormControlHelperText,
-} from '@gluestack-ui/themed';
+  Textarea,
+  TextareaInput,
+} from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -31,8 +32,7 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 
 This is an illustration of **Textarea** component.
 
@@ -42,7 +42,7 @@ This is an illustration of **Textarea** component.
     showArgsController={true}
     metaData={{
       code: `
-        <Textarea {...props} w='$64'>
+        <Textarea {...props} className="w-64">
           <TextareaInput
             placeholder="Your text goes here..."
           />
@@ -97,7 +97,7 @@ npm i @gluestack-ui/textarea
 ### Step 2: Copy and paste the following code into your project.
 
 ```jsx
-%%-- File: components-example/nativewind/Textarea/index.tsx --%%
+%%-- File: core-components/nativewind/textarea/index.tsx --%%
 ```
 
 ### Step 3: Update the import paths to match your project setup.
@@ -107,7 +107,7 @@ npm i @gluestack-ui/textarea
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Textarea } from '@/components/ui/Textarea';
+import { Textarea } from '@/components/ui/textarea';
 ```
 
 ```jsx
@@ -354,6 +354,56 @@ Textarea component is created using TextInput component from react-native. It ex
   </TableContainer>
 </>
 
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### FormControl
+
+The Textarea Component can be incorporated within the FormControl.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <FormControl>
+          <FormControlLabel>
+            <FormControlLabelText>
+              Write with me
+            </FormControlLabelText>
+          </FormControlLabel>
+          <Textarea>
+            <TextareaInput placeholder='Once upon a time...'/>
+          </Textarea>
+          <FormControlHelper>
+            <FormControlHelperText>
+              Start your story
+            </FormControlHelperText>
+          </FormControlHelper>
+        </FormControl>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Textarea,
+        TextareaInput,
+        FormControl,
+        FormControlError,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
 ## Spec Doc
 
 Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
@@ -367,3 +417,4 @@ Explore the comprehensive details of the Input in this document, including its i
   src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5262%253A23948%26type%3Ddesign%26node-id%3D5262-25827%26viewport%3D713%252C121%252C0.03%26t%3DKYZLJTBIKhIjLoLC-1%26scaling%3Dscale-down%26starting-point-node-id%3D5262%253A25827%26mode%3Ddesign"
   allowfullscreen
 ></iframe>
+
diff --git a/example/storybook-nativewind/src/components/Textarea/index.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.stories.mdx
index d68fcd7580..ecd303efe6 100644
--- a/example/storybook-nativewind/src/components/Textarea/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Textarea/index.stories.mdx
@@ -32,7 +32,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Textarea** component.
 
diff --git a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx
index f0406077fa..41169bdbb1 100644
--- a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx
@@ -23,7 +23,7 @@ import {
   FormControlHelperText,
   Textarea,
   TextareaInput,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -33,7 +33,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Textarea** component.
 
@@ -98,7 +98,7 @@ npm i @gluestack-ui/textarea
 ### Step 2: Copy and paste the following code into your project.
 
 ```jsx
-%%-- File: components-example/themed/Textarea/index.tsx --%%
+%%-- File: core-components/themed/textarea/index.tsx --%%
 ```
 
 ### Step 3: Update the import paths to match your project setup.
@@ -108,7 +108,7 @@ npm i @gluestack-ui/textarea
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Textarea } from '@/components/ui/Textarea';
+import { Textarea } from '@/components/ui/textarea';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Toast/Toast.tsx b/example/storybook-nativewind/src/components/Toast/Toast.tsx
index 2bd4905b90..afe2148ee6 100644
--- a/example/storybook-nativewind/src/components/Toast/Toast.tsx
+++ b/example/storybook-nativewind/src/components/Toast/Toast.tsx
@@ -12,8 +12,8 @@ import {
   ToastTitle,
   ToastDescription,
   useToast,
-} from '@/components/ui/Toast';
-import { Button, ButtonText } from '@/components/ui/Button';
+} from '@/components/ui/toast';
+import { Button, ButtonText } from '@/components/ui/button';
 import { MessageCircle, AlertTriangleIcon } from 'lucide-react-native';
 
 const ToastFigmaStory = ({ _placement = 'top', _colorMode, ...props }: any) => {
diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.storiesold.mdx
index 5c9a8e8f48..b61eba94ee 100644
--- a/example/storybook-nativewind/src/components/Toast/index.nw.storiesold.mdx
+++ b/example/storybook-nativewind/src/components/Toast/index.nw.storiesold.mdx
@@ -43,7 +43,7 @@ import {
 
 import { View } from 'react-native';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Toast** component.
@@ -129,9 +129,11 @@ npm i @gluestack-ui/toast
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Toast/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/toast/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -141,7 +143,7 @@ npm i @gluestack-ui/toast
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { useToast, Toast } from '@/components/ui/Toast';
+import { useToast, Toast } from '@/components/ui/toast';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx
index 8248cced2b..7cba185d3a 100644
--- a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx
@@ -21,7 +21,7 @@ import {
   useToast,
   Button,
   ButtonText,
-} from './Toast';
+} from '../../core-components/themed';
 import { CheckIcon, MessageCircle } from '@gluestack-ui/themed';
 import {
   Icon,
@@ -43,7 +43,7 @@ import {
 
 import { View } from 'react-native';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Toast** component.
@@ -129,7 +129,11 @@ npm i @gluestack-ui/toast
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Toast/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/toast/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -139,7 +143,7 @@ npm i @gluestack-ui/toast
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { useToast, Toast } from '@/components/ui/Toast';
+import { useToast, Toast } from '@/components/ui/toast';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx b/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx
index 7d1b9e6e2d..28a79ac09f 100644
--- a/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx
+++ b/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx
@@ -11,8 +11,8 @@ import {
   HStack,
   Icon,
 } from '@gluestack-ui/themed';
-import { Tooltip, TooltipContent, TooltipText } from '@/components/ui/Tooltip';
-import { Button, ButtonText } from '@/components/ui/Button';
+import { Tooltip, TooltipContent, TooltipText } from '@/components/ui/tooltip';
+import { Button, ButtonText } from '@/components/ui/button';
 import { Edit, Command } from 'lucide-react-native';
 
 const TooltipBasic = ({
diff --git a/example/storybook-nativewind/src/components/Tooltip/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/Tooltip/index.nw.storiesold.mdx
index 39bdebc4f1..45b1a675d6 100644
--- a/example/storybook-nativewind/src/components/Tooltip/index.nw.storiesold.mdx
+++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.storiesold.mdx
@@ -39,17 +39,17 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Tooltip** component.
 
 <Wrapper>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={true}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { true}
+  metaData = {{
+    code: `
         <Tooltip
           {...props}
           trigger={(triggerProps) => {
@@ -68,8 +68,8 @@ This is an illustration of **Tooltip** component.
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         Tooltip,
         TooltipContent,
         TooltipText,
@@ -77,9 +77,9 @@ This is an illustration of **Tooltip** component.
         Button,
         ButtonText,
       },
-      argsType: {
-        placement: {
-          control: 'select',
+    argsType: {
+      placement: {
+        control: 'select',
           options: [
             'top left',
             'top',
@@ -96,12 +96,13 @@ This is an illustration of **Tooltip** component.
           ],
           default: 'top',
         },
-      },
-    }}
-  />
+    },
+  }
+}
+/>
 </Wrapper>
 
-<br />
+<br/>
 
 ## Installation
 
@@ -116,9 +117,11 @@ npm i @gluestack-ui/tooltip
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/Tooltip/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/tooltip/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -128,7 +131,7 @@ npm i @gluestack-ui/tooltip
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Tooltip } from '@/components/ui/Tooltip';
+import { Tooltip } from '@/components/ui/tooltip';
 ```
 
 ```jsx
@@ -224,7 +227,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>{'() => void'}</Table.TText>
+            <Table.TText>{ '() => void'}</Table.TText>
           </Table.TD>
           <Table.TD>
             <Table.TText>true</Table.TText>
@@ -240,7 +243,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>{'() => void'}</Table.TText>
+            <Table.TText>{ '() => void'}</Table.TText>
           </Table.TD>
           <Table.TD>
             <Table.TText>-</Table.TText>
@@ -256,7 +259,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>{'number'}</Table.TText>
+            <Table.TText>{ 'number'}</Table.TText>
           </Table.TD>
           <Table.TD>
             <Table.TText>0</Table.TText>
@@ -272,7 +275,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>{'number'}</Table.TText>
+            <Table.TText>{ 'number'}</Table.TText>
           </Table.TD>
           <Table.TD>
             <Table.TText>0</Table.TText>
@@ -496,11 +499,11 @@ We have outlined the various features that ensure the Tooltip component is acces
 Explore the comprehensive details of the Tooltip in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
 
 <iframe
-  style={{
-    borderRadius: '8px',
+style = {{
+  borderRadius: '8px',
     border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
+      aspectRatio: 736 / 585,
   }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6003-30473%26t%3D94Rlaz8y4WQXlTT6-1%26scaling%3Dscale-down%26page-id%3D6003%253A28666%26starting-point-node-id%3D6003%253A30473%26mode%3Ddesign"
-  allowFullScreen
-/>
+src = "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6003-30473%26t%3D94Rlaz8y4WQXlTT6-1%26scaling%3Dscale-down%26page-id%3D6003%253A28666%26starting-point-node-id%3D6003%253A30473%26mode%3Ddesign"
+allowFullScreen
+  />
diff --git a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
index 943b4871cc..83887ff071 100644
--- a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
@@ -20,7 +20,7 @@ import {
   TooltipText,
   Button,
   ButtonText,
-} from './Tooltip';
+} from '../../core-components/themed';
 import { Box, Heading, Edit, Center } from '@gluestack-ui/themed';
 import { VStack, Command, Icon } from '@gluestack-ui/themed';
 import {
@@ -39,7 +39,7 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Tooltip** component.
@@ -116,7 +116,11 @@ npm i @gluestack-ui/tooltip
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Tooltip/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/tooltip/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -126,7 +130,7 @@ npm i @gluestack-ui/tooltip
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Tooltip } from '@/components/ui/Tooltip';
+import { Tooltip } from '@/components/ui/tooltip';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/VStack/VStack.tsx b/example/storybook-nativewind/src/components/VStack/VStack.tsx
index 7826be3626..3195a3f5b9 100644
--- a/example/storybook-nativewind/src/components/VStack/VStack.tsx
+++ b/example/storybook-nativewind/src/components/VStack/VStack.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Box } from '@gluestack-ui/themed';
-import { VStack } from '@/components/ui/VStack';
+import { VStack } from '@/components/ui/vstack';
 
 const VStackBasic = ({ space, reversed, ...props }: any) => {
   return (
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 a83b2109cd..a5ddfdaa53 100644
--- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
@@ -14,8 +14,6 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Layout/VStack" />
 
-import { VStack } from './VStack';
-import { transformedCode } from '../../utils';
 import {
   AppProvider,
   CodePreview,
@@ -24,19 +22,19 @@ import {
   Text,
   InlineCode,
 } from '@gluestack/design-system';
-
-import Wrapper from '../../components-example/nativewind/Wrapper';
-import { Box } from '../../components-example/nativewind/Box';
+import { Box, VStack } from '../../core-components/nativewind';
+import { transformedCode } from '../../utils';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **VStack** component.
 
 <Wrapper>
   <CodePreview
-    showComponentRenderer={true}
-    showArgsController={true}
-    metaData={{
-      code: `
+    showComponentRenderer={ true }
+  showArgsController = { true}
+  metaData = {{
+    code: `
         <Box className='justify-center h-80'>
           <VStack {...props}>
             <Box  className="h-20 w-20 bg-primary-300" />
@@ -48,37 +46,40 @@ This is an illustration of **VStack** component.
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: {
-        Wrapper,
+        scope: {
+      Wrapper,
         VStack,
         Box,
       },
-      argsType: {
-        space: {
-          control: 'select',
+    argsType: {
+      space: {
+        control: 'select',
           options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
           default: 'md',
         },
-        reversed: {
-          control: 'boolean',
+      reversed: {
+        control: 'boolean',
           options: [true, false],
           default: false,
         },
-      },
-    }}
-  />
+    },
+  }
+}
+/>
 </Wrapper>
 
-<br />
+<br/>
 
 ## Installation
 
 ### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/nativewind/VStack/index.tsx --%% 
-  ```
+
+```jsx 
+%%-- File: core-components/nativewind/vstack/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 2: Update the import paths to match your project setup.
@@ -88,7 +89,7 @@ This is an illustration of **VStack** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { VStack } from '@/components/ui/VStack';
+import { VStack } from '@/components/ui/vstack';
 ```
 
 ```jsx
@@ -171,3 +172,33 @@ VStack component is created using View component from react-native. It extends a
     </Table>
   </TableContainer>
 </Wrapper>
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### VStack Reversed
+
+A VStack component with the reversed prop reverses the order of vertically stacked elements, enabling customized vertical layouts and visual arrangements of content within a user interface.
+
+<AppProvider>
+  <CodePreview
+    _rendererWrapper={{ py: '$2.5' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space='md'>
+          <Box className='w-20 h-20 bg-blue-300' />
+          <Box className='w-20 h-20 bg-blue-400' />
+          <Box className='w-20 h-20 bg-blue-500' />
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Box, Wrapper, VStack },
+      argsType: {},
+    }}
+  />
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx
index dfc4bb80a6..5b4afbe5fd 100644
--- a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx
@@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Layout/VStack" />
 
-import { Box, VStack } from '../../components-example/themed';
+import { Box, VStack } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -25,7 +25,7 @@ import {
   InlineCode,
   CollapsibleCode,
 } from '@gluestack/design-system';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **VStack** component.
 
@@ -74,7 +74,11 @@ This is an illustration of **VStack** component.
 ### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/VStack/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/vstack/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 2: Update the import paths to match your project setup.
@@ -84,7 +88,7 @@ This is an illustration of **VStack** component.
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { VStack } from '@/components/ui/VStack';
+import { VStack } from '@/components/ui/vstack';
 ```
 
 ```jsx
diff --git a/example/storybook-nativewind/src/components/View/index.stories.mdx b/example/storybook-nativewind/src/components/View/index.stories.mdx
index 7ad76da2cf..d9fbdcc202 100644
--- a/example/storybook-nativewind/src/components/View/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/View/index.stories.mdx
@@ -12,9 +12,9 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-import { View } from './View';
+import { View } from '../../core-components/themed';
 import { Text, Heading } from '@gluestack-ui/themed';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 <Meta title="common/components/View" />
 
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Wrapper.tsx b/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx
similarity index 88%
rename from example/storybook-nativewind/src/components-example/nativewind/Wrapper.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx
index 5bec1ba1e6..39825a3fff 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Wrapper.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Center, useColorMode } from '@gluestack-ui/themed';
-import { GluestackUIProvider } from './GluestackUIProvider';
+import { GluestackUIProvider } from './gluestack-ui-provider';
 
 const Wrapper = ({ children, ...props }: any) => {
   const colorMode: any = useColorMode();
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Actionsheet/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Actionsheet/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/AlertDialog/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/AlertDialog/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Alert/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
similarity index 99%
rename from example/storybook-nativewind/src/components-example/nativewind/Alert/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
index 9af3fbd9fe..bb73a75ea9 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Alert/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
@@ -88,7 +88,7 @@ const alertIconStyle = tva({
       '2xs': 'h-3 w-3',
       'xs': 'h-3.5 w-3.5',
       'sm': 'h-4 w-4',
-      'md': 'h-4.5 w-4.5',
+      'md': 'h-[18px] w-[18px]',
       'lg': 'h-5 w-5',
       'xl': 'h-6 w-6',
     },
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Avatar/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx
similarity index 96%
rename from example/storybook-nativewind/src/components-example/nativewind/Avatar/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx
index 3c50bf46c9..35d997daa3 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Avatar/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx
@@ -24,7 +24,7 @@ cssInterop(UIAvatar.Image, { className: 'style' });
 cssInterop(UIAvatar.FallbackText, { className: 'style' });
 
 const avatarStyle = tva({
-  base: 'rounded-full justify-center items-center relative bg-primary-600',
+  base: 'rounded-full justify-center items-center relative bg-primary-600 group-[.avatar-group]/avatar-group:-ml-2.5',
   variants: {
     size: {
       'xs': 'w-6 h-6',
@@ -53,7 +53,7 @@ const avatarFallbackTextStyle = tva({
 });
 
 const avatarGroupStyle = tva({
-  base: 'flex-row-reverse relative',
+  base: 'group/avatar-group flex-row-reverse relative avatar-group',
 });
 
 const avatarBadgeStyle = tva({
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Badge/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Badge/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
diff --git a/example/storybook-nativewind/src/core-components/nativewind/box/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/box/index.tsx
new file mode 100644
index 0000000000..e234357940
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/box/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import { tva, VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const boxStyle = tva({});
+
+type IBoxProps = React.ComponentProps<typeof View> &
+  VariantProps<typeof boxStyle>;
+
+const Box = React.forwardRef(
+  ({ className, ...props }: IBoxProps, ref?: any) => {
+    return (
+      <View ref={ref} {...props} className={boxStyle({ class: className })} />
+    );
+  }
+);
+
+Box.displayName = 'Box';
+export { Box };
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
similarity index 98%
rename from example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
index eb8d323cef..3fa71fcbff 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
@@ -216,11 +216,12 @@ const buttonIconStyle = tva({
   ],
 });
 
-type IButtonProps = React.ComponentProps<typeof UIButton> &
+type IButtonProps = Omit<React.ComponentProps<typeof UIButton>, 'context'> &
   VariantProps<typeof buttonStyle>;
 
 type IButtonTextProps = React.ComponentProps<typeof UIButton.Text> &
   VariantProps<typeof buttonTextStyle>;
+
 const Button = React.forwardRef(
   (
     {
@@ -244,6 +245,8 @@ const Button = React.forwardRef(
   }
 );
 
+<Button></Button>;
+
 type IButtonIcon = React.ComponentProps<typeof UIButton.Icon> & {
   as?: any;
 };
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Card/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Card/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/card/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Center/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/center/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Center/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/center/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Checkbox/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Divider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/divider/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Divider/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/divider/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/FlatList/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/flat-list/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/FlatList/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/flat-list/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/GluestackUIProvider/config.ts b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/GluestackUIProvider/config.ts
rename to example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts
diff --git a/example/storybook-nativewind/src/components-example/nativewind/GluestackUIProvider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/GluestackUIProvider/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Heading/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
similarity index 95%
rename from example/storybook-nativewind/src/components-example/nativewind/Heading/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
index 6dbd5ad242..3f89549c4e 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Heading/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
@@ -39,10 +39,6 @@ const headingStyle = tva({
       'xs': 'text-sm',
     },
   },
-
-  // defaultProps: {
-  //   size: 'lg',
-  // },
 });
 
 cssInterop(H4, { className: 'style' });
diff --git a/example/storybook-nativewind/src/components-example/nativewind/HStack/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/hstack/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/HStack/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/hstack/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
similarity index 99%
rename from example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
index c7c7c67554..aef1528a1b 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
@@ -8,7 +8,7 @@ export const UIIcon = createIcon({
 });
 
 const iconStyle = tva({
-  base: 'text-background-800 fill-none',
+  base: 'text-typography-900 fill-none',
   variants: {
     size: {
       '2xs': 'h-3 w-3',
diff --git a/example/storybook-nativewind/src/components-example/nativewind/ImageBackground/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/image-background/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/ImageBackground/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/image-background/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Image/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Image/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/image/index.tsx
diff --git a/example/storybook-nativewind/src/core-components/nativewind/index.ts b/example/storybook-nativewind/src/core-components/nativewind/index.ts
new file mode 100644
index 0000000000..9d570d6744
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/index.ts
@@ -0,0 +1,47 @@
+export * from './button';
+export * from './accordion';
+export * from './actionsheet';
+export * from './alert';
+export * from './alert-dialog';
+export * from './avatar';
+export * from './badge';
+export * from './box';
+export * from './flat-list';
+export * from './center';
+export * from './checkbox';
+export * from './hstack';
+export * from './pressable';
+export * from './icon';
+export * from './heading';
+export * from './divider';
+export * from './fab';
+export * from './form-control';
+export * from './input';
+// export * from './input-accessory-view';
+export * from './image';
+export * from './keyboard-avoiding-view';
+export * from './linear-gradient';
+export * from './link';
+export * from './menu';
+export * from './modal';
+export * from './popover';
+export * from './progress';
+export * from './text';
+export * from './radio';
+export * from './scroll-view';
+export * from './safe-area-view';
+export * from './select';
+export * from './slider';
+export * from './spinner';
+export * from './status-bar';
+export * from './section-list';
+export * from './switch';
+export * from './textarea';
+export * from './toast';
+export * from './tooltip';
+export * from './view';
+export * from './vstack';
+export { GluestackUIProvider } from './gluestack-ui-provider';
+export * from './virtualized-list';
+export * from './refresh-control';
+export * from './image-background';
diff --git a/example/storybook-nativewind/src/components-example/nativewind/InputAccessoryView/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input-accessory-view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/InputAccessoryView/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/input-accessory-view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/KeyboardAvoidingView/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/keyboard-avoiding-view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/KeyboardAvoidingView/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/keyboard-avoiding-view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/LinearGradient/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/linear-gradient/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/LinearGradient/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/linear-gradient/index.tsx
diff --git a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
new file mode 100644
index 0000000000..bb317f3a52
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
@@ -0,0 +1,68 @@
+import { createLink } from '@gluestack-ui/link';
+import { Pressable, Platform, Text } from 'react-native';
+
+import {
+  tva,
+  withStyleContextAndStates,
+  withStates,
+  withStyleContext,
+  cssInterop,
+  VariantProps,
+} from '@gluestack-ui/nativewind-utils';
+import React from 'react';
+export const UILink = createLink({
+  // @ts-ignore
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(Pressable)
+      : withStyleContextAndStates(Pressable),
+  Text: Platform.OS === 'web' ? Text : withStates(Text),
+});
+
+cssInterop(UILink, { className: 'style' });
+cssInterop(UILink.Text, { className: 'style' });
+
+const linkStyle = tva({
+  base: 'web:outline-0 web:data-[disabled=true]:cursor-not-allowed web:data-[focus-visible=true]:outline-2 web:data-[focus-visible=true]:outline-primary-700 web:data-[focus-visible=true]:outline',
+});
+
+const linkTextStyle = tva({
+  base: 'underline text-info-700 hover:text-info-600 hover:no-underline active:text-info-700 data-[disabled=true]:opacity-40',
+});
+
+type ILinkProps = React.ComponentProps<typeof UILink> &
+  VariantProps<typeof linkStyle>;
+const Link = React.forwardRef(
+  ({ className, ...props }: { className?: string } & ILinkProps, ref) => {
+    return (
+      <UILink
+        // @ts-ignore
+        ref={ref}
+        {...props}
+        className={linkStyle({ class: className })}
+      />
+    );
+  }
+);
+
+type ILinkTextProps = React.ComponentProps<typeof UILink.Text> &
+  VariantProps<typeof linkTextStyle>;
+const LinkText = React.forwardRef(
+  ({ className, ...props }: { className?: string } & ILinkTextProps, ref) => {
+    return (
+      <UILink.Text
+        // @ts-ignore
+        ref={ref}
+        {...props}
+        className={linkTextStyle({
+          class: className,
+        })}
+      />
+    );
+  }
+);
+
+Link.displayName = 'Link';
+LinkText.displayName = 'LinkText';
+
+export { Link, LinkText };
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Menu/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Menu/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Modal/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Modal/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Popover/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Popover/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Pressable/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
similarity index 77%
rename from example/storybook-nativewind/src/components-example/nativewind/Pressable/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
index df64828ba1..1c981bceb3 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Pressable/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
@@ -3,7 +3,7 @@ import { tva } from '@gluestack-ui/nativewind-utils';
 import React from 'react';
 
 const pressableStyle = tva({
-  base: 'data-[focus-visible=true]:outline-2 outline-primary-700 outline-solid',
+  base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-primary-700 data-[focus-visible=true]:ring-2',
 });
 
 export const Pressable = React.forwardRef(
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Progress/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Progress/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Radio/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Radio/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/RefreshControl/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/refresh-control/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/RefreshControl/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/refresh-control/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/SafeAreaView/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/safe-area-view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/SafeAreaView/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/safe-area-view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/ScrollView/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/scroll-view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/ScrollView/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/scroll-view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/SectionList/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/section-list/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/SectionList/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/section-list/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Select/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/select/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Select/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/select/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Slider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Slider/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Spinner/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/spinner/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Spinner/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/spinner/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/StatusBar/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/status-bar/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/StatusBar/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/status-bar/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Switch/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Switch/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Text/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
similarity index 52%
rename from example/storybook-nativewind/src/components-example/nativewind/Text/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
index 32083684c2..f8246d147c 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Text/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils';
+import { tva, VariantProps } from '@gluestack-ui/nativewind-utils';
 import { Text as RNText } from 'react-native';
 
 const textStyle = tva({
@@ -22,7 +22,7 @@ const textStyle = tva({
       '2xs': 'text-2xs',
       'xs': 'text-xs',
       'sm': 'text-sm',
-      'md': 'text-md',
+      'md': 'text-base',
       'lg': 'text-lg',
       'xl': 'text-xl',
       '2xl': 'text-2xl',
@@ -43,35 +43,44 @@ const textStyle = tva({
   },
 });
 
-const Text = ({
-  className,
-  isTruncated,
-  bold,
-  underline,
-  strikeThrough,
-  size = 'md',
-  sub,
-  italic,
-  highlight,
-  ...props
-}: any) => {
-  return (
-    <RNText
-      className={textStyle({
-        isTruncated,
-        bold,
-        underline,
-        strikeThrough,
-        size,
-        sub,
-        italic,
-        highlight,
-        class: className,
-      })}
-      {...props}
-    />
-  );
-};
+type ITextProps = React.ComponentProps<typeof RNText> &
+  VariantProps<typeof textStyle>;
+
+const Text = React.forwardRef(
+  (
+    {
+      className,
+      isTruncated,
+      bold,
+      underline,
+      strikeThrough,
+      size = 'md',
+      sub,
+      italic,
+      highlight,
+      ...props
+    }: ITextProps,
+    ref?: any
+  ) => {
+    return (
+      <RNText
+        className={textStyle({
+          isTruncated,
+          bold,
+          underline,
+          strikeThrough,
+          size,
+          sub,
+          italic,
+          highlight,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
 
 Text.displayName = 'Text';
 
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
similarity index 98%
rename from example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
index b5a059c227..70103dc552 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
@@ -35,7 +35,7 @@ const textareaStyle = tva({
 });
 
 const textareaInputStyle = tva({
-  base: 'p-3 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+  base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
   parentVariants: {
     size: {
       sm: 'text-sm',
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Toast/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Toast/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/View/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/View/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/nativewind/VirtualizedList/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/virtualized-list/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/nativewind/VirtualizedList/index.tsx
rename to example/storybook-nativewind/src/core-components/nativewind/virtualized-list/index.tsx
diff --git a/example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx
new file mode 100644
index 0000000000..952179f364
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { tva, VariantProps } from '@gluestack-ui/nativewind-utils';
+import { View } from 'react-native';
+
+const vstackStyle = tva({
+  base: 'flex-col',
+  variants: {
+    space: {
+      'xs': 'gap-1',
+      'sm': 'gap-2',
+      'md': 'gap-3',
+      'lg': 'gap-4',
+      'xl': 'gap-5',
+      '2xl': 'gap-6',
+      '3xl': 'gap-7',
+      '4xl': 'gap-8',
+    },
+    reversed: {
+      true: 'flex-col-reverse',
+    },
+  },
+});
+
+type IVStackProps = React.ComponentProps<typeof View> &
+  VariantProps<typeof vstackStyle>;
+
+const VStack = React.forwardRef(
+  ({ className, space, reversed, ...props }: IVStackProps, ref?: any) => {
+    return (
+      <View
+        className={vstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+VStack.displayName = 'VStack';
+
+export { VStack };
diff --git a/example/storybook-nativewind/src/components-example/themed/Wrapper.tsx b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
similarity index 93%
rename from example/storybook-nativewind/src/components-example/themed/Wrapper.tsx
rename to example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
index eb3df88161..fe3d9a1dd1 100644
--- a/example/storybook-nativewind/src/components-example/themed/Wrapper.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Box, Center } from '@gluestack-ui/themed';
 import { StyledProvider, useColorMode } from '@gluestack-style/react';
 import { createProvider } from '@gluestack-ui/provider';
-import { config } from './GluestackUIProvider/config';
+import { config } from './gluestack-ui-provider/config';
 
 const Provider = createProvider({ StyledProvider }) as any;
 Provider.displayName = 'Provider';
diff --git a/example/storybook-nativewind/src/components-example/themed/Accordion/index.tsx b/example/storybook-nativewind/src/core-components/themed/accordion/index.tsx
similarity index 75%
rename from example/storybook-nativewind/src/components-example/themed/Accordion/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/accordion/index.tsx
index 53786d2c1c..49d6aa9a1a 100644
--- a/example/storybook-nativewind/src/components-example/themed/Accordion/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/accordion/index.tsx
@@ -145,8 +145,113 @@ const StyledTrigger = styled(
     ancestorStyle: ['_button'],
   }
 );
-const StyledTitleText = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledTitleText = styled(
+  StyledText,
   { flex: 1, textAlign: 'left' },
   { ancestorStyle: ['_titleText'] }
 );
diff --git a/packages/config/src/components/Actionsheet/index.tsx b/example/storybook-nativewind/src/core-components/themed/actionsheet/index.tsx
similarity index 83%
rename from packages/config/src/components/Actionsheet/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/actionsheet/index.tsx
index 18cf17944b..c1a605233a 100644
--- a/packages/config/src/components/Actionsheet/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/actionsheet/index.tsx
@@ -93,8 +93,113 @@ const StyledItem = styled(
   }
 );
 
-const StyledItemText = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledItemText = styled(
+  StyledText,
   {
     fontWeight: '$normal',
     fontFamily: '$body',
diff --git a/example/storybook-nativewind/src/components-example/themed/AlertDialog/index.tsx b/example/storybook-nativewind/src/core-components/themed/alert-dialog/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/AlertDialog/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/alert-dialog/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Alert/index.tsx b/example/storybook-nativewind/src/core-components/themed/alert/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Alert/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/alert/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Avatar/index.tsx b/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
similarity index 68%
rename from example/storybook-nativewind/src/components-example/themed/Avatar/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
index 0ce4c61163..5f38711712 100644
--- a/example/storybook-nativewind/src/components-example/themed/Avatar/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
@@ -169,8 +169,113 @@ const StyledImage = styled(
     ancestorStyle: ['_image'],
   }
 );
-const StyledFallbackText = styled(
+
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledFallbackText = styled(
+  StyledText,
   {
     color: '$text0',
     fontWeight: '$semibold',
diff --git a/example/storybook-nativewind/src/components-example/themed/Badge/index.tsx b/example/storybook-nativewind/src/core-components/themed/badge/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Badge/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/badge/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Box/index.tsx b/example/storybook-nativewind/src/core-components/themed/box/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Box/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/box/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Button/index.tsx b/example/storybook-nativewind/src/core-components/themed/button/index.tsx
similarity index 90%
rename from example/storybook-nativewind/src/components-example/themed/Button/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/button/index.tsx
index ba81ceb164..f419448269 100644
--- a/example/storybook-nativewind/src/components-example/themed/Button/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/button/index.tsx
@@ -654,8 +654,114 @@ const StyledRoot = styled(
     ancestorStyle: ['_button'],
   }
 );
+
 const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledButtonText = styled(
+  StyledText,
   {
     color: '$textLight0',
     _web: {
@@ -832,7 +938,7 @@ const StyledIcon = styled(
 );
 const UIButton = createButton({
   Root: StyledRoot,
-  Text: StyledText,
+  Text: StyledButtonText,
   Group: StyledGroup,
   Spinner: StyledSpinner,
   Icon: StyledIcon,
diff --git a/example/storybook-nativewind/src/components-example/themed/Card/index.tsx b/example/storybook-nativewind/src/core-components/themed/card/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Card/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/card/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Center/index.tsx b/example/storybook-nativewind/src/core-components/themed/center/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Center/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/center/index.tsx
diff --git a/packages/config/src/components/Checkbox/index.tsx b/example/storybook-nativewind/src/core-components/themed/checkbox/index.tsx
similarity index 76%
rename from packages/config/src/components/Checkbox/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/checkbox/index.tsx
index 4c1c17dfe4..cbd0999f95 100644
--- a/packages/config/src/components/Checkbox/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/checkbox/index.tsx
@@ -234,8 +234,112 @@ const StyledIcon = styled(
     },
   }
 );
-const StyledLabel = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledLabel = styled(
+  StyledText,
   {
     'color': '$text600',
 
diff --git a/example/storybook-nativewind/src/components-example/themed/Divider/index.tsx b/example/storybook-nativewind/src/core-components/themed/divider/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Divider/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/divider/index.tsx
diff --git a/packages/config/src/components/Fab/index.tsx b/example/storybook-nativewind/src/core-components/themed/fab/index.tsx
similarity index 78%
rename from packages/config/src/components/Fab/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/fab/index.tsx
index 2a1819d504..c147b739d6 100644
--- a/packages/config/src/components/Fab/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/fab/index.tsx
@@ -157,8 +157,112 @@ const StyledRoot = styled(
   }
 );
 
-const StyledLabel = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledLabel = styled(
+  StyledText,
   {
     fontWeight: '$normal',
     fontFamily: '$body',
diff --git a/example/storybook-nativewind/src/components-example/themed/FlatList/index.tsx b/example/storybook-nativewind/src/core-components/themed/flat-list/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/FlatList/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/flat-list/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/FormControl/index.tsx b/example/storybook-nativewind/src/core-components/themed/form-control/index.tsx
similarity index 71%
rename from example/storybook-nativewind/src/components-example/themed/FormControl/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/form-control/index.tsx
index bf25887b17..0643a4e049 100644
--- a/example/storybook-nativewind/src/components-example/themed/FormControl/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/form-control/index.tsx
@@ -151,15 +151,113 @@ const StyledFormControlError = styled(View, {
   gap: '$1',
 });
 
-// const StyeldFormControlErrorIcon = styled(StyledIcon, {
-//   color: '$error700',
-//   props: {
-//     size: 'sm',
-//   },
-// });
+const StyledText = styled(
+  Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
 
 const StyledFormControlErrorText = styled(
-  Text,
+  StyledText,
   {
     color: '$error700',
   },
@@ -174,7 +272,7 @@ const StyledFormControlHelper = styled(View, {
 });
 
 const StyledFormControlHelperText = styled(
-  Text,
+  StyledText,
   {
     props: {
       size: 'xs',
@@ -196,12 +294,12 @@ const StyledFormControlLabel = styled(
   { descendantStyle: ['_labelText'] }
 );
 
-const StyledFormControlLabelText = styled(Text, {
+const StyledFormControlLabelText = styled(StyledText, {
   fontWeight: '$medium',
   color: '$text900',
 });
 
-const StyledLabelAstrick = styled(Text, {}, {
+const StyledLabelAstrick = styled(StyledText, {}, {
   componentName: 'FormControlErrorText',
   ancestorStyle: ['_labelAstrick'],
 } as const);
diff --git a/example/storybook-nativewind/src/components-example/themed/GluestackUIProvider/config.ts b/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/config.ts
similarity index 98%
rename from example/storybook-nativewind/src/components-example/themed/GluestackUIProvider/config.ts
rename to example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/config.ts
index 789234f036..894efc3183 100644
--- a/example/storybook-nativewind/src/components-example/themed/GluestackUIProvider/config.ts
+++ b/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/config.ts
@@ -2,7 +2,7 @@ import { AnimationResolver } from '@gluestack-style/animation-resolver';
 import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver';
 import { createConfig } from '@gluestack-style/react';
 
-export const gluestackUIConfig = createConfig({
+export const config = createConfig({
   aliases: {
     bg: 'backgroundColor',
     bgColor: 'backgroundColor',
@@ -833,15 +833,8 @@ export const gluestackUIConfig = createConfig({
   plugins: [new AnimationResolver(MotionAnimationDriver)],
 });
 
-type Config = typeof gluestackUIConfig; // Assuming `config` is defined elsewhere
-
-export interface IConfig {}
-export interface IComponents {}
+type Config = typeof config;
 
 declare module '@gluestack-style/react' {
-  interface UIConfig extends Omit<Config, keyof IConfig>, IConfig {}
+  interface ICustomConfig extends Config {}
 }
-
-export const config = {
-  ...gluestackUIConfig,
-};
diff --git a/example/storybook-nativewind/src/components-example/themed/GluestackUIProvider/index.tsx b/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/GluestackUIProvider/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Heading/index.tsx b/example/storybook-nativewind/src/core-components/themed/heading/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Heading/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/heading/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/HStack/index.tsx b/example/storybook-nativewind/src/core-components/themed/hstack/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/HStack/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/hstack/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Icon/index.tsx b/example/storybook-nativewind/src/core-components/themed/icon/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Icon/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/icon/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/ImageBackground/index.tsx b/example/storybook-nativewind/src/core-components/themed/image-background/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/ImageBackground/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/image-background/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Image/index.tsx b/example/storybook-nativewind/src/core-components/themed/image/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Image/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/image/index.tsx
diff --git a/example/storybook-nativewind/src/core-components/themed/index.ts b/example/storybook-nativewind/src/core-components/themed/index.ts
new file mode 100644
index 0000000000..56a869eeac
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/themed/index.ts
@@ -0,0 +1,48 @@
+export * from './button';
+export * from './accordion';
+export * from './actionsheet';
+export * from './alert';
+export * from './alert-dialog';
+export * from './avatar';
+export * from './badge';
+export * from './box';
+export * from './card';
+export * from './flat-list';
+export * from './center';
+export * from './checkbox';
+export * from './hstack';
+export * from './pressable';
+export * from './icon';
+export * from './heading';
+export * from './divider';
+export * from './fab';
+export * from './form-control';
+export * from './input';
+// export * from './input-accessory-view';
+export * from './image';
+export * from './keyboard-avoiding-view';
+export * from './linear-gradient';
+export * from './link';
+export * from './menu';
+export * from './modal';
+export * from './popover';
+export * from './progress';
+export * from './text';
+export * from './radio';
+export * from './scroll-view';
+export * from './safe-area-view';
+export * from './select';
+export * from './slider';
+export * from './spinner';
+export * from './status-bar';
+export * from './section-list';
+export * from './switch';
+export * from './textarea';
+export * from './toast';
+export * from './tooltip';
+export * from './view';
+export * from './vstack';
+export { GluestackUIProvider } from './gluestack-ui-provider';
+export * from './virtualized-list';
+export * from './refresh-control';
+export * from './image-background';
diff --git a/example/storybook-nativewind/src/components-example/themed/InputAccessoryView/index.tsx b/example/storybook-nativewind/src/core-components/themed/input-accessory-view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/InputAccessoryView/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/input-accessory-view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Input/index.tsx b/example/storybook-nativewind/src/core-components/themed/input/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Input/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/input/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/KeyboardAvoidingView/index.tsx b/example/storybook-nativewind/src/core-components/themed/keyboard-avoiding-view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/KeyboardAvoidingView/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/keyboard-avoiding-view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/LinearGradient/index.tsx b/example/storybook-nativewind/src/core-components/themed/linear-gradient/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/LinearGradient/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/linear-gradient/index.tsx
diff --git a/example/storybook-nativewind/src/core-components/themed/link/index.tsx b/example/storybook-nativewind/src/core-components/themed/link/index.tsx
new file mode 100644
index 0000000000..1305535077
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/themed/link/index.tsx
@@ -0,0 +1,159 @@
+import { styled } from '@gluestack-style/react';
+import { createLink } from '@gluestack-ui/link';
+import { Pressable, Text } from 'react-native';
+
+const StyledRoot = styled(
+  Pressable,
+  {
+    _web: {
+      'outlineWidth': 0,
+      ':disabled': {
+        cursor: 'not-allowed',
+      },
+      ':focusVisible': {
+        outlineWidth: 2,
+        outlineColor: '$primary700',
+        outlineStyle: 'solid',
+      },
+    },
+    _text: {
+      ':hover': {
+        color: '$info600',
+        textDecorationLine: 'none',
+      },
+
+      ':active': {
+        color: '$info700',
+      },
+
+      ':disabled': {
+        opacity: 0.4,
+      },
+    },
+  },
+  {
+    componentName: 'Link',
+  } as const
+);
+
+const StyledText = styled(
+  Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledLinkText = styled(
+  StyledText,
+  {
+    textDecorationLine: 'underline',
+    color: '$info700',
+  },
+  {
+    ancestorStyle: ['_text'],
+  } as const
+);
+
+export const Link = createLink({
+  Root: StyledRoot,
+  Text: StyledLinkText,
+});
+export const LinkText = Link.Text;
diff --git a/example/storybook-nativewind/src/components-example/themed/Menu/index.tsx b/example/storybook-nativewind/src/core-components/themed/menu/index.tsx
similarity index 69%
rename from example/storybook-nativewind/src/components-example/themed/Menu/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/menu/index.tsx
index 38c34fffa4..ecb1ac6e55 100644
--- a/example/storybook-nativewind/src/components-example/themed/Menu/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/menu/index.tsx
@@ -109,8 +109,112 @@ const StyledBackdrop = styled(
   {}
 );
 
-const StyledLabel = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledLabel = styled(
+  StyledText,
   {
     color: '$text700',
     fontWeight: '$normal',
diff --git a/example/storybook-nativewind/src/components-example/themed/Modal/index.tsx b/example/storybook-nativewind/src/core-components/themed/modal/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Modal/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/modal/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Popover/index.tsx b/example/storybook-nativewind/src/core-components/themed/popover/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Popover/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/popover/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Pressable/index.tsx b/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Pressable/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/pressable/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Progress/index.tsx b/example/storybook-nativewind/src/core-components/themed/progress/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Progress/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/progress/index.tsx
diff --git a/packages/config/src/components/Radio/index.tsx b/example/storybook-nativewind/src/core-components/themed/radio/index.tsx
similarity index 76%
rename from packages/config/src/components/Radio/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/radio/index.tsx
index 6ca77c6e71..cfcfe42552 100644
--- a/packages/config/src/components/Radio/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/radio/index.tsx
@@ -235,8 +235,113 @@ const StyledIndicator = styled(
   { ancestorStyle: ['_indicator'] }
 );
 
-const StyledLabel = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledLabel = styled(
+  StyledText,
   {
     'color': '$text600',
 
diff --git a/example/storybook-nativewind/src/components-example/themed/RefreshControl/index.tsx b/example/storybook-nativewind/src/core-components/themed/refresh-control/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/RefreshControl/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/refresh-control/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/SafeAreaView/index.tsx b/example/storybook-nativewind/src/core-components/themed/safe-area-view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/SafeAreaView/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/safe-area-view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/ScrollView/index.tsx b/example/storybook-nativewind/src/core-components/themed/scroll-view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/ScrollView/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/scroll-view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/SectionList/index.tsx b/example/storybook-nativewind/src/core-components/themed/section-list/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/SectionList/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/section-list/index.tsx
diff --git a/packages/config/src/components/Select/index.tsx b/example/storybook-nativewind/src/core-components/themed/select/index.tsx
similarity index 89%
rename from packages/config/src/components/Select/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/select/index.tsx
index e1ad3c380b..f2a360ddfc 100644
--- a/packages/config/src/components/Select/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/select/index.tsx
@@ -94,9 +94,113 @@ const StyledItem = styled(
     descendantStyle: ['_text', '_icon'],
   }
 );
+const StyledText = styled(
+  Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
 
 const StyledItemText = styled(
-  Text,
+  StyledText,
   {
     mx: '$2',
     props: {
diff --git a/example/storybook-nativewind/src/components-example/themed/Slider/index.tsx b/example/storybook-nativewind/src/core-components/themed/slider/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Slider/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/slider/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Spinner/index.tsx b/example/storybook-nativewind/src/core-components/themed/spinner/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Spinner/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/spinner/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/StatusBar/index.tsx b/example/storybook-nativewind/src/core-components/themed/status-bar/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/StatusBar/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/status-bar/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Switch/index.tsx b/example/storybook-nativewind/src/core-components/themed/switch/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Switch/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/switch/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Text/index.tsx b/example/storybook-nativewind/src/core-components/themed/text/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Text/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/text/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Textarea/index.tsx b/example/storybook-nativewind/src/core-components/themed/textarea/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Textarea/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/textarea/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Toast/index.tsx b/example/storybook-nativewind/src/core-components/themed/toast/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/Toast/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/toast/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Tooltip/index.tsx b/example/storybook-nativewind/src/core-components/themed/tooltip/index.tsx
similarity index 64%
rename from example/storybook-nativewind/src/components-example/themed/Tooltip/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/tooltip/index.tsx
index ccbc5e1e23..905e49428b 100644
--- a/example/storybook-nativewind/src/components-example/themed/Tooltip/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/tooltip/index.tsx
@@ -72,6 +72,110 @@ const StyledContent = styled(
 
 const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledTooltipText = styled(
+  StyledText,
   {
     fontWeight: '$normal',
     fontStyle: 'normal',
@@ -180,7 +284,7 @@ const StyledText = styled(
 export const Tooltip = createTooltip({
   Root: StyledRoot,
   Content: StyledContent,
-  Text: StyledText,
+  Text: StyledTooltipText,
   //@ts-ignore
   AnimatePresence: AnimatePresence,
 });
diff --git a/example/storybook-nativewind/src/components-example/themed/View/index.tsx b/example/storybook-nativewind/src/core-components/themed/view/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/View/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/view/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/VirtualizedList/index.tsx b/example/storybook-nativewind/src/core-components/themed/virtualized-list/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/VirtualizedList/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/virtualized-list/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/VStack/index.tsx b/example/storybook-nativewind/src/core-components/themed/vstack/index.tsx
similarity index 100%
rename from example/storybook-nativewind/src/components-example/themed/VStack/index.tsx
rename to example/storybook-nativewind/src/core-components/themed/vstack/index.tsx
diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx
index 675a6e0a49..3772a1924a 100644
--- a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx
@@ -229,6 +229,7 @@ module.exports = {
   },
 };
 ```
+
 </CollapsibleCode>
 
 ### Step 4: Configure components path
@@ -250,7 +251,7 @@ To add config, create a `GluestackUIProvider/config.ts` file in your `components
 <CollapsibleCode>
 
 ```jsx
-%%-- File: components-example/nativewind/GluestackUIProvider/config.ts --%%
+%%-- File: core-components/nativewind/gluestack-ui-provider/config.ts --%%
 ```
 
 </CollapsibleCode>
@@ -260,7 +261,7 @@ To add `GluestackUIProvider`, create a `GluestackUIProvider/index.tsx` file insi
 <CollapsibleCode>
 
 ```jsx
-%%-- File: components-example/nativewind/GluestackUIProvider/index.tsx --%%
+%%-- File: core-components/nativewind/gluestack-ui-provider/index.tsx --%%
 ```
 
 </CollapsibleCode>
diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx
index 141261089f..918d372e6f 100644
--- a/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx
@@ -61,17 +61,21 @@ Create a `components/` folder inside `src` folder and add path in `tsconfig.json
 To add config, create a `GluestackUIProvider/config.ts` file in your `components/` folder and paste the following code.
 
 <CollapsibleCode>
-  ```jsx 
-%%-- File: components-example/themed/GluestackUIProvider/config.ts --%%
+
+```jsx 
+%%-- File: core-components/themed/gluestack-ui-provider/config.ts --%%
   ```
+
 </CollapsibleCode>
 
 To add `GluestackUIProvider`, create a `GluestackUIProvider/index.tsx` file inside `components/` folder and paste the following code.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/themed/GluestackUIProvider/index.tsx --%%
+
+```jsx 
+  %%-- File: core-components/themed/gluestack-ui-provider/index.tsx --%%
   ```
+
 </CollapsibleCode>
 
 ### Step 4: Usage
diff --git a/example/storybook-nativewind/src/getting-started/tooling-setup/index.themed.stories.mdx b/example/storybook-nativewind/src/getting-started/tooling-setup/index.themed.stories.mdx
index c350c5d3a9..430496182b 100644
--- a/example/storybook-nativewind/src/getting-started/tooling-setup/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/getting-started/tooling-setup/index.themed.stories.mdx
@@ -5,7 +5,7 @@ description: Tooling Setup.
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-<Meta title="with-nativewind/Getting Started/Tooling Setup" />
+<Meta title="with-gluestack-style/Getting Started/Tooling Setup" />
 
 # Tooling Setup
 
diff --git a/example/storybook-nativewind/tailwind.config.js b/example/storybook-nativewind/tailwind.config.js
index 9a795e4284..81b64e19a1 100644
--- a/example/storybook-nativewind/tailwind.config.js
+++ b/example/storybook-nativewind/tailwind.config.js
@@ -3,7 +3,7 @@ module.exports = {
   darkMode: 'class',
   content: [
     './src/**/*.{html,js,jsx,ts,tsx}',
-    './src/components-example/**/**/*.{html,js,jsx,ts,tsx}',
+    './src/core-components/**/**/*.{html,js,jsx,ts,tsx}',
     './src/components/**/*.{html,js,jsx,ts,tsx,mdx}',
   ],
   presets: [require('nativewind/preset')],
diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json
index c6642009be..36ce3dc9a0 100644
--- a/example/storybook-nativewind/tsconfig.json
+++ b/example/storybook-nativewind/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/components/ui/*": ["src/components-example/nativewind/*"],
+      "@/components/ui/*": ["src/core-components/nativewind/*"],
       "@gluestack-style/react": ["../../packages/styled/react/src"],
       "@gluestack-ui/nativewind-utils": ["../../packages/nativewind/utils/src"],
       "@gluestack-ui/provider": ["../../packages/unstyled/provider/src"]
diff --git a/example/storybook/src/ui/overview/Introduction/index.stories.mdx b/example/storybook/src/ui/overview/Introduction/index.stories.mdx
index 650d3c50d0..232b1e7a01 100644
--- a/example/storybook/src/ui/overview/Introduction/index.stories.mdx
+++ b/example/storybook/src/ui/overview/Introduction/index.stories.mdx
@@ -22,7 +22,7 @@ We also broke down the library into two separate libraries for different respons
 - [gluestack-style](/style/docs) - A high-performance, universal CSS-in-JS styling library.
 - [gluestack-ui](/ui) - A set of ready-to-use(themed) or unstyled components that can be added to any project, across any device and styled to fit your needs.
 
-> Note: This is a component library and provides a set of components that can be directly imported into any project. But, if there are requirement for more customization or having components ejected/copy-pasted inside the project for such cases, we are building [gluestack-ui with-nativewind](/ui/with-nativewind/docs) and [gluestack-ui with-themed](/ui/with-gluestack-style/docs). These are in experimental phase.
+> Note: This is a component library and provides a set of components that can be directly imported into any project. But, if there are requirement for more customization or having components ejected/copy-pasted inside the project for such cases, we are building [gluestack-ui with-nativewind](/ui/with-nativewind/docs) and [gluestack-ui with-gluestack-style](/ui/with-gluestack-style/docs). These are in experimental phase.
 
 ## Features
 
diff --git a/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx b/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx
index 171286a83d..d2e13327ff 100644
--- a/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx
+++ b/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx
@@ -2,6 +2,7 @@
 title: Eject Library
 description: Customizing the theme and components in gluestack-ui involves defining a theme, components configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences.
 showHeader: true
+tag: beta
 ---
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
@@ -24,9 +25,21 @@ import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
 
 Customizing components allows you to tailor the components according to your design system or guidelines to match your project's unique visual identity. To customize tokens and components, follow these steps:
 
-> Note: Commit you changes before ejecting, this command with update the imports!!
+> Note: Commit your changes before ejecting, this command with update the imports!!
 
-1. **Eject**: Run following command to eject the theme. This will create a **components** folder in your project root directory and copy all the styled components.
+**Step 1: Update Config**: Run following command to install the latest version of `@gluestack-ui/config`.
+
+```bash
+npm i @gluestack-ui/config@latest
+```
+OR
+
+```bash
+yarn add @gluestack-ui/config@latest
+```
+
+
+**Step 2: Eject**: Run following command to eject the theme. This will create a **components** folder in your project root directory and copy all the styled components.
 
 ```bash
 npx gluestack-ui-scripts eject
@@ -36,15 +49,15 @@ npx gluestack-ui-scripts eject
 This will overwrite the existing styles with default one. (It is NOT RECOMMENDED to eject again)
 If you need to eject the components, then save the changes and copy/paste them manually.
 
-2. If you are already using `@gluestack-ui/themed` inside your project, running this command will automatically change the imports from `@gluestack-ui/themed` to the components folder path.
+**Step 3:**: If you are already using `@gluestack-ui/themed` inside your project, running this command will automatically change the imports from `@gluestack-ui/themed` to the components folder path.
 
-3. Remove the config file passed inside provides at the root of the project. Wrap the root of the project with `GluestackUIProvider` only.
+**Step 4:**: Remove the config file passed inside provides at the root of the project. Wrap the root of the project with `GluestackUIProvider` only.
 
 ```jsx
 <GluestackUIProvider>{children}</GluestackUIProvider>
 ```
 
-4. **Update Tokens**: go to `components/gluestack-ui.config.ts` file. Update the tokens as per your requirements.
+**Step 5: Update Tokens**: go to `components/gluestack-ui.config.ts` file. Update the tokens as per your requirements.
 
 ```jsx
 // gluestack-ui.config.ts
@@ -74,23 +87,23 @@ export const config = createConfig({
 type Config = typeof config;
 type Components = typeof components;
 
-declare module '@gluestack-ui/themed' {
-  interface UIConfig extends Config {}
-  interface UIComponents extends Components {}
+declare module '@gluestack-style/react' {
+  interface ICustomConfig extends Config {}
+  interface ICustomComponents extends Components {}
 }
 
 ```
-> Note: The updated config will be applied automatically, as it is passed inside `GluestackUIProvider` component located at "./components/GluestackUIProvider/index.tsx"
+> Note: The updated config will be applied automatically, as it is passed inside `GluestackUIProvider` component located at "./components/gluestack-ui-provider/index.tsx"
 
 You can customize all the tokens of the theme in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/docs/theme-configuration/theme/default-tokens).
 
-5. **Update Components**: you can find all of your components theme inside `./components` folder. For example, if you want to customize `Button` component, you can find its theme file at `./components/Button/index.tsx`. Update component's style as per your requirements.
+**Step 6: Update Components**: you can find all of your components theme inside `./components` folder. For example, if you want to customize `Button` component, you can find its theme file at `./components/button/index.tsx`. Update component's style as per your requirements.
 
 ## Customizing Animations
 
 Customizing animations allows you to change the animation behavior of all the animation compatible UI components within the `@gluestack-ui/themed`. Currently customization is limited to the using `moti` or `legend-motion` for Animated Components and is supported via a plugin system. To customize animations, follow these steps:
 
-1. **Update Plugins**: go to `./components/gluestack-ui.config.ts` file. Update the `plugins` property as per your requirements.
+**Step 1: Update Plugins**: go to `./components/gluestack-ui.config.ts` file. Update the `plugins` property as per your requirements.
 
 ```jsx
 //gluestack-ui.config.ts
@@ -117,9 +130,9 @@ export const config = createConfig({
 type Config = typeof config;
 type Components = typeof components;
 
-declare module '@gluestack-ui/themed' {
-  interface UIConfig extends Config {}
-  interface UIComponents extends Components {}
+declare module '@gluestack-style/react' {
+  interface ICustomConfig extends Config {}
+  interface ICustomComponents extends Components {}
 }
 
 ```
diff --git a/packages/config/package.json b/packages/config/package.json
index dd7f0a059d..71f828b249 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/config",
-  "version": "1.1.10",
+  "version": "1.1.16",
   "main": "build/gluestack-ui.config.js",
   "types": "build/gluestack-ui.config.d.ts",
   "module": "build/gluestack-ui.config",
@@ -37,6 +37,7 @@
     "@expo/html-elements": "latest",
     "@gluestack-style/animation-resolver": "1.0.4",
     "@gluestack-style/legend-motion-animation-driver": "1.0.3",
+    "@gluestack-style/react": "1.0.48",
     "@gluestack-ui/accordion": "1.0.1",
     "@gluestack-ui/actionsheet": "0.2.37",
     "@gluestack-ui/alert": "0.1.12",
@@ -65,11 +66,10 @@
     "@gluestack-ui/switch": "0.1.19",
     "@gluestack-ui/tabs": "0.1.14",
     "@gluestack-ui/textarea": "0.1.20",
+    "@gluestack-ui/themed": "1.1.9",
     "@gluestack-ui/toast": "1.0.4",
     "@gluestack-ui/tooltip": "0.1.26",
-    "@legendapp/motion": "latest",
-    "@gluestack-style/react": "1.0.48",
-    "@gluestack-ui/themed": "1.1.9"
+    "@legendapp/motion": "latest"
   },
   "peerDependencies": {
     "@gluestack-style/react": ">=1.0",
diff --git a/packages/config/src/components/Link/index.tsx b/packages/config/src/components/Link/index.tsx
deleted file mode 100644
index f95f84ce27..0000000000
--- a/packages/config/src/components/Link/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { styled } from '@gluestack-style/react';
-import { createLink } from '@gluestack-ui/link';
-import { Pressable, Text } from 'react-native';
-
-const StyledRoot = styled(
-  Pressable,
-  {
-    _web: {
-      'outlineWidth': 0,
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
-      ':focusVisible': {
-        outlineWidth: 2,
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-      },
-    },
-    _text: {
-      ':hover': {
-        color: '$info600',
-        textDecorationLine: 'none',
-      },
-
-      ':active': {
-        color: '$info700',
-      },
-
-      ':disabled': {
-        opacity: 0.4,
-      },
-    },
-  },
-  {
-    componentName: 'Link',
-  } as const
-);
-
-const StyledText = styled(
-  Text,
-  {
-    textDecorationLine: 'underline',
-    color: '$info700',
-  },
-  {
-    ancestorStyle: ['_text'],
-  } as const
-);
-
-export const Link = createLink({
-  Root: StyledRoot,
-  Text: StyledText,
-});
-export const LinkText = Link.Text;
diff --git a/packages/config/src/components/Accordion/index.tsx b/packages/config/src/components/accordion/index.tsx
similarity index 75%
rename from packages/config/src/components/Accordion/index.tsx
rename to packages/config/src/components/accordion/index.tsx
index 53786d2c1c..49d6aa9a1a 100644
--- a/packages/config/src/components/Accordion/index.tsx
+++ b/packages/config/src/components/accordion/index.tsx
@@ -145,8 +145,113 @@ const StyledTrigger = styled(
     ancestorStyle: ['_button'],
   }
 );
-const StyledTitleText = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledTitleText = styled(
+  StyledText,
   { flex: 1, textAlign: 'left' },
   { ancestorStyle: ['_titleText'] }
 );
diff --git a/example/storybook-nativewind/src/components-example/themed/Actionsheet/index.tsx b/packages/config/src/components/actionsheet/index.tsx
similarity index 83%
rename from example/storybook-nativewind/src/components-example/themed/Actionsheet/index.tsx
rename to packages/config/src/components/actionsheet/index.tsx
index 18cf17944b..c1a605233a 100644
--- a/example/storybook-nativewind/src/components-example/themed/Actionsheet/index.tsx
+++ b/packages/config/src/components/actionsheet/index.tsx
@@ -93,8 +93,113 @@ const StyledItem = styled(
   }
 );
 
-const StyledItemText = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledItemText = styled(
+  StyledText,
   {
     fontWeight: '$normal',
     fontFamily: '$body',
diff --git a/packages/config/src/components/AlertDialog/index.tsx b/packages/config/src/components/alert-dialog/index.tsx
similarity index 99%
rename from packages/config/src/components/AlertDialog/index.tsx
rename to packages/config/src/components/alert-dialog/index.tsx
index ffd49289eb..d099b38ec1 100644
--- a/packages/config/src/components/AlertDialog/index.tsx
+++ b/packages/config/src/components/alert-dialog/index.tsx
@@ -6,7 +6,6 @@ import {
 import { createAlertDialog } from '@gluestack-ui/alert-dialog';
 import { View, Pressable, ScrollView } from 'react-native';
 import { styled } from '@gluestack-style/react';
-
 const StyledRoot = styled(
   View,
   {
diff --git a/packages/config/src/components/Alert/index.tsx b/packages/config/src/components/alert/index.tsx
similarity index 100%
rename from packages/config/src/components/Alert/index.tsx
rename to packages/config/src/components/alert/index.tsx
diff --git a/packages/config/src/components/Avatar/index.tsx b/packages/config/src/components/avatar/index.tsx
similarity index 68%
rename from packages/config/src/components/Avatar/index.tsx
rename to packages/config/src/components/avatar/index.tsx
index 0ce4c61163..5f38711712 100644
--- a/packages/config/src/components/Avatar/index.tsx
+++ b/packages/config/src/components/avatar/index.tsx
@@ -169,8 +169,113 @@ const StyledImage = styled(
     ancestorStyle: ['_image'],
   }
 );
-const StyledFallbackText = styled(
+
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledFallbackText = styled(
+  StyledText,
   {
     color: '$text0',
     fontWeight: '$semibold',
diff --git a/packages/config/src/components/Badge/index.tsx b/packages/config/src/components/badge/index.tsx
similarity index 100%
rename from packages/config/src/components/Badge/index.tsx
rename to packages/config/src/components/badge/index.tsx
diff --git a/packages/config/src/components/Box/index.tsx b/packages/config/src/components/box/index.tsx
similarity index 100%
rename from packages/config/src/components/Box/index.tsx
rename to packages/config/src/components/box/index.tsx
diff --git a/packages/config/src/components/Button/index.tsx b/packages/config/src/components/button/index.tsx
similarity index 90%
rename from packages/config/src/components/Button/index.tsx
rename to packages/config/src/components/button/index.tsx
index ba81ceb164..f419448269 100644
--- a/packages/config/src/components/Button/index.tsx
+++ b/packages/config/src/components/button/index.tsx
@@ -654,8 +654,114 @@ const StyledRoot = styled(
     ancestorStyle: ['_button'],
   }
 );
+
 const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledButtonText = styled(
+  StyledText,
   {
     color: '$textLight0',
     _web: {
@@ -832,7 +938,7 @@ const StyledIcon = styled(
 );
 const UIButton = createButton({
   Root: StyledRoot,
-  Text: StyledText,
+  Text: StyledButtonText,
   Group: StyledGroup,
   Spinner: StyledSpinner,
   Icon: StyledIcon,
diff --git a/packages/config/src/components/Card/index.tsx b/packages/config/src/components/card/index.tsx
similarity index 100%
rename from packages/config/src/components/Card/index.tsx
rename to packages/config/src/components/card/index.tsx
diff --git a/packages/config/src/components/Center/index.tsx b/packages/config/src/components/center/index.tsx
similarity index 100%
rename from packages/config/src/components/Center/index.tsx
rename to packages/config/src/components/center/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Checkbox/index.tsx b/packages/config/src/components/checkbox/index.tsx
similarity index 76%
rename from example/storybook-nativewind/src/components-example/themed/Checkbox/index.tsx
rename to packages/config/src/components/checkbox/index.tsx
index 4c1c17dfe4..cbd0999f95 100644
--- a/example/storybook-nativewind/src/components-example/themed/Checkbox/index.tsx
+++ b/packages/config/src/components/checkbox/index.tsx
@@ -234,8 +234,112 @@ const StyledIcon = styled(
     },
   }
 );
-const StyledLabel = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledLabel = styled(
+  StyledText,
   {
     'color': '$text600',
 
diff --git a/packages/config/src/components/Divider/index.tsx b/packages/config/src/components/divider/index.tsx
similarity index 100%
rename from packages/config/src/components/Divider/index.tsx
rename to packages/config/src/components/divider/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Fab/index.tsx b/packages/config/src/components/fab/index.tsx
similarity index 78%
rename from example/storybook-nativewind/src/components-example/themed/Fab/index.tsx
rename to packages/config/src/components/fab/index.tsx
index 2a1819d504..c147b739d6 100644
--- a/example/storybook-nativewind/src/components-example/themed/Fab/index.tsx
+++ b/packages/config/src/components/fab/index.tsx
@@ -157,8 +157,112 @@ const StyledRoot = styled(
   }
 );
 
-const StyledLabel = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledLabel = styled(
+  StyledText,
   {
     fontWeight: '$normal',
     fontFamily: '$body',
diff --git a/packages/config/src/components/FlatList/index.tsx b/packages/config/src/components/flat-list/index.tsx
similarity index 100%
rename from packages/config/src/components/FlatList/index.tsx
rename to packages/config/src/components/flat-list/index.tsx
diff --git a/packages/config/src/components/FormControl/index.tsx b/packages/config/src/components/form-control/index.tsx
similarity index 71%
rename from packages/config/src/components/FormControl/index.tsx
rename to packages/config/src/components/form-control/index.tsx
index bf25887b17..0643a4e049 100644
--- a/packages/config/src/components/FormControl/index.tsx
+++ b/packages/config/src/components/form-control/index.tsx
@@ -151,15 +151,113 @@ const StyledFormControlError = styled(View, {
   gap: '$1',
 });
 
-// const StyeldFormControlErrorIcon = styled(StyledIcon, {
-//   color: '$error700',
-//   props: {
-//     size: 'sm',
-//   },
-// });
+const StyledText = styled(
+  Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
 
 const StyledFormControlErrorText = styled(
-  Text,
+  StyledText,
   {
     color: '$error700',
   },
@@ -174,7 +272,7 @@ const StyledFormControlHelper = styled(View, {
 });
 
 const StyledFormControlHelperText = styled(
-  Text,
+  StyledText,
   {
     props: {
       size: 'xs',
@@ -196,12 +294,12 @@ const StyledFormControlLabel = styled(
   { descendantStyle: ['_labelText'] }
 );
 
-const StyledFormControlLabelText = styled(Text, {
+const StyledFormControlLabelText = styled(StyledText, {
   fontWeight: '$medium',
   color: '$text900',
 });
 
-const StyledLabelAstrick = styled(Text, {}, {
+const StyledLabelAstrick = styled(StyledText, {}, {
   componentName: 'FormControlErrorText',
   ancestorStyle: ['_labelAstrick'],
 } as const);
diff --git a/packages/config/src/components/GluestackUIProvider/index.tsx b/packages/config/src/components/gluestack-ui-provider/index.tsx
similarity index 100%
rename from packages/config/src/components/GluestackUIProvider/index.tsx
rename to packages/config/src/components/gluestack-ui-provider/index.tsx
diff --git a/packages/config/src/components/gluestack-ui.config.ts b/packages/config/src/components/gluestack-ui.config.ts
index 327f79fd56..e1459e8c35 100644
--- a/packages/config/src/components/gluestack-ui.config.ts
+++ b/packages/config/src/components/gluestack-ui.config.ts
@@ -709,11 +709,14 @@ export const gluestackUIConfig = createConfig({
   plugins: [new AnimationResolver(MotionAnimationDriver)],
 });
 
-export type { UIConfig, UIComponents } from '@gluestack-ui/themed';
-
-export interface IConfig {}
-export interface IComponents {}
-
 export const config = {
   ...gluestackUIConfig,
 };
+
+type Config = typeof gluestackUIConfig; // Assuming `config` is defined elsewhere
+// type Components = typeof gluestackUIConfig.components; // Assuming `config` is defined elsewhere
+
+declare module '@gluestack-style/react' {
+  interface ICustomConfig extends Config {}
+  // interface ICustomComponents extends Components {}
+}
diff --git a/packages/config/src/components/Heading/index.tsx b/packages/config/src/components/heading/index.tsx
similarity index 100%
rename from packages/config/src/components/Heading/index.tsx
rename to packages/config/src/components/heading/index.tsx
diff --git a/packages/config/src/components/HStack/index.tsx b/packages/config/src/components/hstack/index.tsx
similarity index 100%
rename from packages/config/src/components/HStack/index.tsx
rename to packages/config/src/components/hstack/index.tsx
diff --git a/packages/config/src/components/Icon/index.tsx b/packages/config/src/components/icon/index.tsx
similarity index 100%
rename from packages/config/src/components/Icon/index.tsx
rename to packages/config/src/components/icon/index.tsx
diff --git a/packages/config/src/components/ImageBackground/index.tsx b/packages/config/src/components/image-background/index.tsx
similarity index 100%
rename from packages/config/src/components/ImageBackground/index.tsx
rename to packages/config/src/components/image-background/index.tsx
diff --git a/packages/config/src/components/Image/index.tsx b/packages/config/src/components/image/index.tsx
similarity index 100%
rename from packages/config/src/components/Image/index.tsx
rename to packages/config/src/components/image/index.tsx
diff --git a/packages/config/src/components/index.ts b/packages/config/src/components/index.ts
index 7ad07782eb..57ce219cf4 100644
--- a/packages/config/src/components/index.ts
+++ b/packages/config/src/components/index.ts
@@ -1,47 +1,47 @@
-export * from './Button';
-export * from './Accordion';
-export * from './Actionsheet';
-export * from './Alert';
-export * from './AlertDialog';
-export * from './Avatar';
-export * from './Badge';
-export * from './Box';
-export * from './Card';
-export * from './FlatList';
-export * from './Center';
-export * from './Checkbox';
-export * from './HStack';
-export * from './Pressable';
-export * from './Icon';
-export * from './Heading';
-export * from './Divider';
-export * from './Fab';
-export * from './FormControl';
-export * from './Input';
-export * from './Image';
-export * from './KeyboardAvoidingView';
-export * from './LinearGradient';
-export * from './Link';
-export * from './Menu';
-export * from './Modal';
-export * from './Popover';
-export * from './Progress';
-export * from './Text';
-export * from './Radio';
-export * from './ScrollView';
-export * from './SafeAreaView';
-export * from './Select';
-export * from './Slider';
-export * from './Spinner';
-export * from './StatusBar';
-export * from './SectionList';
-export * from './Switch';
-export * from './Textarea';
-export * from './Toast';
-export * from './Tooltip';
-export * from './View';
-export * from './VStack';
-export { GluestackUIProvider } from './GluestackUIProvider';
-export * from './VirtualizedList';
-export * from './RefreshControl';
-export * from './ImageBackground';
+export * from './button';
+export * from './accordion';
+export * from './actionsheet';
+export * from './alert';
+export * from './alert-dialog';
+export * from './avatar';
+export * from './badge';
+export * from './box';
+export * from './card';
+export * from './flat-list';
+export * from './center';
+export * from './checkbox';
+export * from './hstack';
+export * from './pressable';
+export * from './icon';
+export * from './heading';
+export * from './divider';
+export * from './fab';
+export * from './form-control';
+export * from './input';
+export * from './image';
+export * from './keyboard-avoiding-view';
+export * from './linear-gradient';
+export * from './link';
+export * from './menu';
+export * from './modal';
+export * from './popover';
+export * from './progress';
+export * from './text';
+export * from './radio';
+export * from './scroll-view';
+export * from './safe-area-view';
+export * from './select';
+export * from './slider';
+export * from './spinner';
+export * from './status-bar';
+export * from './section-list';
+export * from './switch';
+export * from './textarea';
+export * from './toast';
+export * from './tooltip';
+export * from './view';
+export * from './vstack';
+export { GluestackUIProvider } from './gluestack-ui-provider';
+export * from './virtualized-list';
+export * from './refresh-control';
+export * from './image-background';
diff --git a/packages/config/src/components/input-accessory-view/index.tsx b/packages/config/src/components/input-accessory-view/index.tsx
new file mode 100644
index 0000000000..b1bf65a60d
--- /dev/null
+++ b/packages/config/src/components/input-accessory-view/index.tsx
@@ -0,0 +1,6 @@
+import { styled } from '@gluestack-style/react';
+import { InputAccessoryView as RNInputAccessoryView } from 'react-native';
+
+const StyledRoot = styled(RNInputAccessoryView, {}, {});
+
+export const InputAccessoryView = StyledRoot;
diff --git a/packages/config/src/components/Input/index.tsx b/packages/config/src/components/input/index.tsx
similarity index 100%
rename from packages/config/src/components/Input/index.tsx
rename to packages/config/src/components/input/index.tsx
diff --git a/packages/config/src/components/KeyboardAvoidingView/index.tsx b/packages/config/src/components/keyboard-avoiding-view/index.tsx
similarity index 100%
rename from packages/config/src/components/KeyboardAvoidingView/index.tsx
rename to packages/config/src/components/keyboard-avoiding-view/index.tsx
diff --git a/packages/config/src/components/LinearGradient/index.tsx b/packages/config/src/components/linear-gradient/index.tsx
similarity index 100%
rename from packages/config/src/components/LinearGradient/index.tsx
rename to packages/config/src/components/linear-gradient/index.tsx
diff --git a/packages/config/src/components/link/index.tsx b/packages/config/src/components/link/index.tsx
new file mode 100644
index 0000000000..1305535077
--- /dev/null
+++ b/packages/config/src/components/link/index.tsx
@@ -0,0 +1,159 @@
+import { styled } from '@gluestack-style/react';
+import { createLink } from '@gluestack-ui/link';
+import { Pressable, Text } from 'react-native';
+
+const StyledRoot = styled(
+  Pressable,
+  {
+    _web: {
+      'outlineWidth': 0,
+      ':disabled': {
+        cursor: 'not-allowed',
+      },
+      ':focusVisible': {
+        outlineWidth: 2,
+        outlineColor: '$primary700',
+        outlineStyle: 'solid',
+      },
+    },
+    _text: {
+      ':hover': {
+        color: '$info600',
+        textDecorationLine: 'none',
+      },
+
+      ':active': {
+        color: '$info700',
+      },
+
+      ':disabled': {
+        opacity: 0.4,
+      },
+    },
+  },
+  {
+    componentName: 'Link',
+  } as const
+);
+
+const StyledText = styled(
+  Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledLinkText = styled(
+  StyledText,
+  {
+    textDecorationLine: 'underline',
+    color: '$info700',
+  },
+  {
+    ancestorStyle: ['_text'],
+  } as const
+);
+
+export const Link = createLink({
+  Root: StyledRoot,
+  Text: StyledLinkText,
+});
+export const LinkText = Link.Text;
diff --git a/packages/config/src/components/Menu/index.tsx b/packages/config/src/components/menu/index.tsx
similarity index 69%
rename from packages/config/src/components/Menu/index.tsx
rename to packages/config/src/components/menu/index.tsx
index 38c34fffa4..ecb1ac6e55 100644
--- a/packages/config/src/components/Menu/index.tsx
+++ b/packages/config/src/components/menu/index.tsx
@@ -109,8 +109,112 @@ const StyledBackdrop = styled(
   {}
 );
 
-const StyledLabel = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledLabel = styled(
+  StyledText,
   {
     color: '$text700',
     fontWeight: '$normal',
diff --git a/packages/config/src/components/Modal/index.tsx b/packages/config/src/components/modal/index.tsx
similarity index 100%
rename from packages/config/src/components/Modal/index.tsx
rename to packages/config/src/components/modal/index.tsx
diff --git a/packages/config/src/components/Popover/index.tsx b/packages/config/src/components/popover/index.tsx
similarity index 100%
rename from packages/config/src/components/Popover/index.tsx
rename to packages/config/src/components/popover/index.tsx
diff --git a/packages/config/src/components/Pressable/index.tsx b/packages/config/src/components/pressable/index.tsx
similarity index 100%
rename from packages/config/src/components/Pressable/index.tsx
rename to packages/config/src/components/pressable/index.tsx
diff --git a/packages/config/src/components/Progress/index.tsx b/packages/config/src/components/progress/index.tsx
similarity index 100%
rename from packages/config/src/components/Progress/index.tsx
rename to packages/config/src/components/progress/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Radio/index.tsx b/packages/config/src/components/radio/index.tsx
similarity index 76%
rename from example/storybook-nativewind/src/components-example/themed/Radio/index.tsx
rename to packages/config/src/components/radio/index.tsx
index 6ca77c6e71..cfcfe42552 100644
--- a/example/storybook-nativewind/src/components-example/themed/Radio/index.tsx
+++ b/packages/config/src/components/radio/index.tsx
@@ -235,8 +235,113 @@ const StyledIndicator = styled(
   { ancestorStyle: ['_indicator'] }
 );
 
-const StyledLabel = styled(
+const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+
+const StyledLabel = styled(
+  StyledText,
   {
     'color': '$text600',
 
diff --git a/packages/config/src/components/RefreshControl/index.tsx b/packages/config/src/components/refresh-control/index.tsx
similarity index 100%
rename from packages/config/src/components/RefreshControl/index.tsx
rename to packages/config/src/components/refresh-control/index.tsx
diff --git a/packages/config/src/components/SafeAreaView/index.tsx b/packages/config/src/components/safe-area-view/index.tsx
similarity index 100%
rename from packages/config/src/components/SafeAreaView/index.tsx
rename to packages/config/src/components/safe-area-view/index.tsx
diff --git a/packages/config/src/components/ScrollView/index.tsx b/packages/config/src/components/scroll-view/index.tsx
similarity index 100%
rename from packages/config/src/components/ScrollView/index.tsx
rename to packages/config/src/components/scroll-view/index.tsx
diff --git a/packages/config/src/components/SectionList/index.tsx b/packages/config/src/components/section-list/index.tsx
similarity index 100%
rename from packages/config/src/components/SectionList/index.tsx
rename to packages/config/src/components/section-list/index.tsx
diff --git a/example/storybook-nativewind/src/components-example/themed/Select/index.tsx b/packages/config/src/components/select/index.tsx
similarity index 89%
rename from example/storybook-nativewind/src/components-example/themed/Select/index.tsx
rename to packages/config/src/components/select/index.tsx
index e1ad3c380b..f2a360ddfc 100644
--- a/example/storybook-nativewind/src/components-example/themed/Select/index.tsx
+++ b/packages/config/src/components/select/index.tsx
@@ -94,9 +94,113 @@ const StyledItem = styled(
     descendantStyle: ['_text', '_icon'],
   }
 );
+const StyledText = styled(
+  Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
 
 const StyledItemText = styled(
-  Text,
+  StyledText,
   {
     mx: '$2',
     props: {
diff --git a/packages/config/src/components/Slider/index.tsx b/packages/config/src/components/slider/index.tsx
similarity index 100%
rename from packages/config/src/components/Slider/index.tsx
rename to packages/config/src/components/slider/index.tsx
diff --git a/packages/config/src/components/Spinner/index.tsx b/packages/config/src/components/spinner/index.tsx
similarity index 100%
rename from packages/config/src/components/Spinner/index.tsx
rename to packages/config/src/components/spinner/index.tsx
diff --git a/packages/config/src/components/StatusBar/index.tsx b/packages/config/src/components/status-bar/index.tsx
similarity index 100%
rename from packages/config/src/components/StatusBar/index.tsx
rename to packages/config/src/components/status-bar/index.tsx
diff --git a/packages/config/src/components/Switch/index.tsx b/packages/config/src/components/switch/index.tsx
similarity index 100%
rename from packages/config/src/components/Switch/index.tsx
rename to packages/config/src/components/switch/index.tsx
diff --git a/packages/config/src/components/Text/index.tsx b/packages/config/src/components/text/index.tsx
similarity index 100%
rename from packages/config/src/components/Text/index.tsx
rename to packages/config/src/components/text/index.tsx
diff --git a/packages/config/src/components/Textarea/index.tsx b/packages/config/src/components/textarea/index.tsx
similarity index 100%
rename from packages/config/src/components/Textarea/index.tsx
rename to packages/config/src/components/textarea/index.tsx
diff --git a/packages/config/src/components/Toast/index.tsx b/packages/config/src/components/toast/index.tsx
similarity index 100%
rename from packages/config/src/components/Toast/index.tsx
rename to packages/config/src/components/toast/index.tsx
diff --git a/packages/config/src/components/Tooltip/index.tsx b/packages/config/src/components/tooltip/index.tsx
similarity index 64%
rename from packages/config/src/components/Tooltip/index.tsx
rename to packages/config/src/components/tooltip/index.tsx
index ccbc5e1e23..905e49428b 100644
--- a/packages/config/src/components/Tooltip/index.tsx
+++ b/packages/config/src/components/tooltip/index.tsx
@@ -72,6 +72,110 @@ const StyledContent = styled(
 
 const StyledText = styled(
   Text,
+  {
+    color: '$text700',
+    flex: 1,
+    fontWeight: '$normal',
+    fontFamily: '$body',
+    fontStyle: 'normal',
+    letterSpacing: '$md',
+
+    variants: {
+      isTruncated: {
+        true: {
+          props: {
+            // @ts-ignore
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          },
+        },
+      },
+      bold: {
+        true: {
+          fontWeight: '$bold',
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      size: {
+        '2xs': {
+          fontSize: '$2xs',
+        },
+        'xs': {
+          fontSize: '$xs',
+        },
+
+        'sm': {
+          fontSize: '$sm',
+        },
+
+        'md': {
+          fontSize: '$md',
+        },
+
+        'lg': {
+          fontSize: '$lg',
+        },
+
+        'xl': {
+          fontSize: '$xl',
+        },
+
+        '2xl': {
+          fontSize: '$2xl',
+        },
+
+        '3xl': {
+          fontSize: '$3xl',
+        },
+
+        '4xl': {
+          fontSize: '$4xl',
+        },
+
+        '5xl': {
+          fontSize: '$5xl',
+        },
+
+        '6xl': {
+          fontSize: '$6xl',
+        },
+      },
+      sub: {
+        true: {
+          fontSize: '$xs',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      highlight: {
+        true: {
+          bg: '$yellow500',
+        },
+      },
+    },
+
+    defaultProps: {
+      size: 'md',
+    },
+  },
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+const StyledTooltipText = styled(
+  StyledText,
   {
     fontWeight: '$normal',
     fontStyle: 'normal',
@@ -180,7 +284,7 @@ const StyledText = styled(
 export const Tooltip = createTooltip({
   Root: StyledRoot,
   Content: StyledContent,
-  Text: StyledText,
+  Text: StyledTooltipText,
   //@ts-ignore
   AnimatePresence: AnimatePresence,
 });
diff --git a/packages/config/src/components/View/index.tsx b/packages/config/src/components/view/index.tsx
similarity index 100%
rename from packages/config/src/components/View/index.tsx
rename to packages/config/src/components/view/index.tsx
diff --git a/packages/config/src/components/VirtualizedList/index.tsx b/packages/config/src/components/virtualized-list/index.tsx
similarity index 100%
rename from packages/config/src/components/VirtualizedList/index.tsx
rename to packages/config/src/components/virtualized-list/index.tsx
diff --git a/packages/config/src/components/VStack/index.tsx b/packages/config/src/components/vstack/index.tsx
similarity index 100%
rename from packages/config/src/components/VStack/index.tsx
rename to packages/config/src/components/vstack/index.tsx
diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json
index 8824c99a1e..6bed29b946 100644
--- a/packages/nativewind/utils/package.json
+++ b/packages/nativewind/utils/package.json
@@ -14,7 +14,7 @@
     "ios",
     "nextjs"
   ],
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
diff --git a/packages/nativewind/utils/src/context.ts b/packages/nativewind/utils/src/context.ts
index a3d263ae64..03ec48e0be 100644
--- a/packages/nativewind/utils/src/context.ts
+++ b/packages/nativewind/utils/src/context.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 export const ParentContext = createContext({});
 
diff --git a/packages/nativewind/utils/src/withStates.tsx b/packages/nativewind/utils/src/withStates.tsx
index 849f31f93e..8049a54106 100644
--- a/packages/nativewind/utils/src/withStates.tsx
+++ b/packages/nativewind/utils/src/withStates.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { extractDataClassName } from './utils';
 
@@ -6,13 +8,16 @@ type WithStatesProps = {
   states?: any;
 };
 
-export const withStates =
-  <T,>(Component: React.ComponentType<T> & WithStatesProps) =>
-  ({ states, className, ...props }: React.Component<T> & WithStatesProps) => {
-    const classNamesFinal = React.useMemo(() => {
-      if (!className) return;
-      extractDataClassName(className, states);
-    }, [className, states]);
+export const withStates = <T,>(Component: React.ComponentType<T>) =>
+  React.forwardRef(
+    ({ states, className, ...props }: T & WithStatesProps, ref?: any) => {
+      const classNamesFinal = React.useMemo(() => {
+        if (!className) return;
+        extractDataClassName(className, states);
+      }, [className, states]);
 
-    return <Component className={classNamesFinal} {...(props as any)} />;
-  };
+      return (
+        <Component className={classNamesFinal} {...(props as any)} ref={ref} />
+      );
+    }
+  );
diff --git a/packages/nativewind/utils/src/withStyleContext.tsx b/packages/nativewind/utils/src/withStyleContext.tsx
index 95008d683e..0b96730cf7 100644
--- a/packages/nativewind/utils/src/withStyleContext.tsx
+++ b/packages/nativewind/utils/src/withStyleContext.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { ParentContext } from './context';
 
@@ -7,11 +8,13 @@ type WithStyleContextProps = {
 export const withStyleContext = <T,>(
   Component: React.ComponentType<T & WithStyleContextProps>
 ) => {
-  return ({ context, ...props }: T & WithStyleContextProps) => {
-    return (
-      <ParentContext.Provider value={context}>
-        <Component {...(props as any)} />
-      </ParentContext.Provider>
-    );
-  };
+  return React.forwardRef(
+    ({ context, ...props }: T & WithStyleContextProps, ref?: any) => {
+      return (
+        <ParentContext.Provider value={context}>
+          <Component {...(props as any)} ref={ref} />
+        </ParentContext.Provider>
+      );
+    }
+  );
 };
diff --git a/packages/nativewind/utils/src/withStyleContextAndStates.tsx b/packages/nativewind/utils/src/withStyleContextAndStates.tsx
index 0c6e1cca82..1e0b0434c4 100644
--- a/packages/nativewind/utils/src/withStyleContextAndStates.tsx
+++ b/packages/nativewind/utils/src/withStyleContextAndStates.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { extractDataClassName } from './utils';
 import { ParentContext } from './context';
@@ -11,20 +13,24 @@ type WithStyleContextProps = {
 export const withStyleContextAndStates = <T,>(
   Component: React.ComponentType<T & WithStyleContextProps>
 ) => {
-  return ({
-    context,
-    className,
-    states,
-    ...props
-  }: T & WithStyleContextProps) => {
-    const classNamesFinal = React.useMemo(() => {
-      if (!className) return;
-      return extractDataClassName(className, states);
-    }, [className, states]);
-    return (
-      <ParentContext.Provider value={context}>
-        <Component className={classNamesFinal} {...(props as any)} />
-      </ParentContext.Provider>
-    );
-  };
+  return React.forwardRef(
+    (
+      { context, className, states, ...props }: T & WithStyleContextProps,
+      ref?: any
+    ) => {
+      const classNamesFinal = React.useMemo(() => {
+        if (!className) return;
+        return extractDataClassName(className, states);
+      }, [className, states]);
+      return (
+        <ParentContext.Provider value={context}>
+          <Component
+            className={classNamesFinal}
+            {...(props as any)}
+            ref={ref}
+          />
+        </ParentContext.Provider>
+      );
+    }
+  );
 };
diff --git a/packages/unstyled/button/package.json b/packages/unstyled/button/package.json
index e5235f563b..0d88bc74e2 100644
--- a/packages/unstyled/button/package.json
+++ b/packages/unstyled/button/package.json
@@ -25,6 +25,7 @@
   "scripts": {
     "prepare": "bob build",
     "release": "release-it",
+    "watch": "bob watch",
     "build": "bob build",
     "clean": "rm -rf lib",
     "dev:web": "cd example/native && yarn web --clear",
diff --git a/yarn.lock b/yarn.lock
index 904f7049b8..ca310a1fe1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3288,71 +3288,6 @@
   dependencies:
     "@legendapp/motion" "^2.2.0"
 
-"@gluestack-style/animation-resolver@latest":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/animation-resolver/-/animation-resolver-1.0.4.tgz#93be3e67221ccb0ce064ddd260852bcc13612240"
-  integrity sha512-AeAQ61u41j9F2fxWTGiR6C7G3KG7qSCAYVi3jCE+aUiOEPEctfurUCT70DnrKp1Tg/Bl29a+OUwutaW/3YKvQw==
-
-"@gluestack-style/legend-motion-animation-driver@latest":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/legend-motion-animation-driver/-/legend-motion-animation-driver-1.0.3.tgz#e2408ff8515ced92cb75f096f5eeff1f9636a0da"
-  integrity sha512-sD6aFS6Tq5XpyjrboFEIc8LrRY4TA4kodFYHzk6mDchvbkdLODijtjnaDQB1UqihOkMRg49e7ANRAOzc7eymaQ==
-
-"@gluestack-style/react@latest":
-  version "1.0.48"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-1.0.48.tgz#3addb3f3fa6226b86fd1bc6ed5bdc8fb3d08f289"
-  integrity sha512-fZUZQjOMFgRRXpWWcLQH3PNSB0OaWt0H28mCHH8g3aqx2GYITgzYARQhYdNfB7QFVrao/Mnu62oewnY2hnikHQ==
-  dependencies:
-    inline-style-prefixer "^6.0.1"
-    normalize-css-color "^1.0.2"
-
-"@gluestack-ui/accordion@latest":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/accordion/-/accordion-1.0.1.tgz#0ea2b85c1e7351b2238581f12ecc9e27f50a285c"
-  integrity sha512-CLrsR4jbC3nUJifwtpiWnngi1KIeiaXCQ+D9Pm5F0wSyDTQA8e3EFSAdqAEcz/CVE8OItIiFaIDt288Un/ZQJw==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/accordion" "^0.0.2"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/actionsheet@latest":
-  version "0.2.37"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.37.tgz#79243d1c7089e61cbb00bf2254951d6478449e47"
-  integrity sha512-3X7KaIMyGCImQmz7MNQyOY7Or87NRYDjos7KF76Gla8jqapTfheB+5UNtLm6PbexjV/8B3Y8lFZhyk4+qmxvzA==
-  dependencies:
-    "@gluestack-ui/hooks" "0.1.11"
-    "@gluestack-ui/overlay" "^0.1.12"
-    "@gluestack-ui/transitions" "^0.1.10"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/dialog" "^0.0.3"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/alert-dialog@latest":
-  version "0.1.25"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/alert-dialog/-/alert-dialog-0.1.25.tgz#6cd3e53accd636cbb1a67a6184727ac3e7d9b1d3"
-  integrity sha512-q7bQmxCnQK4OvHqrVizNOhWh6Pdw63PVmnZ6DeUA6EQn4Jmzqw3WcWEAOWgKRXjilU2frWZIGPebFx5AeNzOSw==
-  dependencies:
-    "@gluestack-ui/hooks" "0.1.11"
-    "@gluestack-ui/overlay" "^0.1.12"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/dialog" "^0.0.3"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/alert@latest":
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/alert/-/alert-0.1.12.tgz#ef7efd7c978809da55cb7dc07c5f3db33b6b6aec"
-  integrity sha512-oiJfxryKh7+WKKx9PjIX088wgIQTXD9llC52h5HiK1dPUJiswjgGKbFHZbX7uoh9VMiXthBoUvzOIVMv0i5feA==
-
-"@gluestack-ui/avatar@latest":
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/avatar/-/avatar-0.1.15.tgz#a12a4d9afe7314c084fcc82eb9740eb186cc0a60"
-  integrity sha512-ohbgt4FVQ3yzdZrUsEx39LSxyLUqVoj1FIapENNqmCkXqk+wwDwcyEhALInu7JOsuzPAXpUuv4b478XNsYUCTg==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.12"
-
 "@gluestack-ui/button@^0.1.15":
   version "0.1.34"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-0.1.34.tgz#f635aba6a9023d153f5dd82cd96a3785b6244951"
@@ -3362,279 +3297,6 @@
     "@react-native-aria/focus" "^0.2.9"
     "@react-native-aria/interactions" "^0.2.11"
 
-"@gluestack-ui/button@latest":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-1.0.1.tgz#8ed481ff292e743ff11a4a512665f08a3c971635"
-  integrity sha512-49jqhA2GIK55OGQOIFVD4P4cz+UJ/IzeBfQTmYUrbEvgJMoa8UOdWiA7FPSOJVs6b6cF6HqziLsZTycvpnlnNg==
-  dependencies:
-    "@gluestack-ui/utils" "0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/checkbox@latest":
-  version "0.1.24"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/checkbox/-/checkbox-0.1.24.tgz#00cee083e0f9c6636a29c125d85a4bbecd56176f"
-  integrity sha512-r1W3M6IO86YkrwTUv0bWxquM+Rpmjw0BDWehH7YMDPnyuoU5UBjGRAg8VfE3RdjIsPfLVoeUztWCLqqu6TMlmg==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.16"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-aria/visually-hidden" "^3.8.6"
-    "@react-native-aria/checkbox" "^0.2.6"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-    "@react-native-aria/utils" "^0.2.10"
-    "@react-stately/checkbox" "^3.4.2"
-
-"@gluestack-ui/config-v2@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/config-v2/-/config-v2-1.0.1.tgz#4dafb76fe5c2fcf2666764e5dad4a402369116e6"
-  integrity sha512-7t/rpZ09iwxCJfN4x9EoScahuqIkc4BEQsWV0aF5AV4KPIVQZwwIJxLF5xIRpZ2guEGUomYCW/eHWTr5AJiRyA==
-
-"@gluestack-ui/divider@latest":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/divider/-/divider-0.1.8.tgz#114584279aebc8bf6b718d039c521330051d8e44"
-  integrity sha512-l+OQ1XD5qI20ghxKbpi+pqntRtd0mtkmhfXYLODbjt2eec3U9kpV1xawXpfN/TFd45WWZTpEQ616sOQqFLo3RA==
-
-"@gluestack-ui/fab@latest":
-  version "0.1.18"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/fab/-/fab-0.1.18.tgz#12401fa2fe9bb77efc480c46779d3f0036a45c45"
-  integrity sha512-uOBTRk7C/N27WyprLtmADPL+8XF31TDEF9S/z/HM2OE2SujuoMG477MNrgrm40SAvad7jePDNv4QRcqVuGxnkA==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/form-control@latest":
-  version "0.1.16"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/form-control/-/form-control-0.1.16.tgz#302f351fdaafd22173360d64e7a076440799a0e9"
-  integrity sha512-Yc1PaF8BElKcDUA580pdC8++4spGc36yykJblieFlkA5Hvwp5VbAB8LOI6y0KEFLChQHMXKXueUdcTvYqENDJw==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-
-"@gluestack-ui/icon@latest":
-  version "0.1.20"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/icon/-/icon-0.1.20.tgz#4140b5e94efeeb953ddc2c828800b27e103f7bfa"
-  integrity sha512-f/+DGR3139LU9NbMMvoumZWIwqy4B4e+xc02kAAubiv7p7aqGDV5KPm2JN5vVmCwiDRxX5u0F3SxodSQhEoQZA==
-  dependencies:
-    "@gluestack-ui/provider" "^0.1.6"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-
-"@gluestack-ui/image@latest":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/image/-/image-0.1.7.tgz#0cb2be72fd16a6a5d10aa850b9506f308330a901"
-  integrity sha512-ITfDX7gyxab+w0EMmJdITgG7EB2oF/3MfYgsFBV//VmIlu3OJg2xvnwvYzq3kNdGqr5Nt/5ZEG2ime7Kx2Wmxw==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/input@latest":
-  version "0.1.24"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/input/-/input-0.1.24.tgz#5a59d56d74a597c331013047f2b7e814c02307d6"
-  integrity sha512-5G/XzLzWX7d2XFqLGqN9VHUO/65JoX8kghXBrQA1V0W10NM0abAqiuz4D6mZJjWAJc57me1ob04pG1WsmELbvA==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.16"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/link@latest":
-  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/link/-/link-0.1.17.tgz#64dbd4086ec08702056a73d4485d9ccee5d28056"
-  integrity sha512-Lzolq6LNz401qOpetMpoK2Rc/enpHucwgZtMRX4SnP9DV6vOsCAAIyBrLsCkCxN5JicdteVpPyZpoljExkACLQ==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/menu@latest":
-  version "0.2.29"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/menu/-/menu-0.2.29.tgz#70cd6d96fe861d77378bdaac6b39f5d6dd132b3a"
-  integrity sha512-gz1Z5XPOGRTNSMZzcGzVc+5v9vtDIGMYc77w9RYbeIklx8Pzrqxawi0ORTRYlPEh2Ncrr4cb2ztINRSVpakraA==
-  dependencies:
-    "@gluestack-ui/hooks" "0.1.11"
-    "@gluestack-ui/overlay" "^0.1.12"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-aria/overlays" "^3.19.0"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-    "@react-native-aria/menu" "0.2.10"
-    "@react-native-aria/overlays" "^0.3.10"
-    "@react-stately/utils" "^3.6.0"
-    react-stately "^3.21.0"
-
-"@gluestack-ui/modal@latest":
-  version "0.1.29"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/modal/-/modal-0.1.29.tgz#5544f82579b34cd98635ba0a54be57f1e1e4c448"
-  integrity sha512-zPkdvUyuvWmolVtmCpgCCzLOcBuR7Xur6ugQflv4JQVN6l/NSfcBfh9mXBAUAuK2h6leo02abrURFjneXfBP+Q==
-  dependencies:
-    "@gluestack-ui/hooks" "0.1.11"
-    "@gluestack-ui/overlay" "^0.1.12"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/dialog" "^0.0.3"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-    "@react-native-aria/overlays" "^0.3.10"
-
-"@gluestack-ui/overlay@latest":
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/overlay/-/overlay-0.1.12.tgz#b8d373875e0cf8e1bbc244dfafdcbb76525fa424"
-  integrity sha512-rENETe40IRIrFW7rQKBsVotJ0J7DxTmY4xZGyMM/dct6TXnnZa2vIE+mqOK0CQs3cEIWypvDrQrJ0mHWHK1xig==
-  dependencies:
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-    "@react-native-aria/overlays" "^0.3.10"
-
-"@gluestack-ui/popover@latest":
-  version "0.1.31"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/popover/-/popover-0.1.31.tgz#451ed4002258f018912aa3e293b16694ef6e5d0d"
-  integrity sha512-YOJcNsaLoCGv53HTPWYEhwZ5ZJqVE4DVXWTNxFP613QcB9zcsQki43bBM1JgIJHVpR05qIAApCsv9CqyzzYm6w==
-  dependencies:
-    "@gluestack-ui/hooks" "0.1.11"
-    "@gluestack-ui/overlay" "^0.1.12"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/dialog" "^0.0.3"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-    "@react-native-aria/overlays" "^0.3.11"
-
-"@gluestack-ui/pressable@latest":
-  version "0.1.14"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/pressable/-/pressable-0.1.14.tgz#87979f896a66fd14edb699df2e2b7260f2e463ea"
-  integrity sha512-SaGpalVO//RLpFFGibYBr+54tzcB8nUby4qBNvL2KGx+9HyMrMJFf75ov2aTqpXDrhEmtc8W4oRHd3fldvJIgw==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/progress@latest":
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/progress/-/progress-0.1.13.tgz#18ae1e736e97c04c61415228450de04a1a362bd7"
-  integrity sha512-M05p5UfMaBpY2pqAw5AY/rItF3Qh5mSXoJkxUQRNYbJ2UwFpvFLDXgIBpy2p6eDgOGeo7aWmsktifLztm+4uFQ==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.12"
-
-"@gluestack-ui/provider@latest":
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/provider/-/provider-0.1.10.tgz#552c4da52f99cb300ef10cde5f830e27a52189b4"
-  integrity sha512-zAfwQM3AUETLL8Br1GUAsnOdn1RhF/Acd33DawbfFSH9GS/RXtgAgt/Fkh7ANirIxCAYmg5z8G9EN+egIbyuwA==
-  dependencies:
-    "@react-native-aria/interactions" "^0.2.10"
-    tsconfig "7"
-    typescript "^4.9.4"
-
-"@gluestack-ui/radio@latest":
-  version "0.1.25"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/radio/-/radio-0.1.25.tgz#3c4e7277cd9c2a2166ce8f7342f29226408aa443"
-  integrity sha512-Rl/5SW6bpT0n8P38G9IWp4/T5E1Ss8+Xct9jbXOsQyowJcH5Vh4P5pZ5eLh7qC9oLMJKwQMXKc921jUNCpcPXw==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.16"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-aria/visually-hidden" "^3.7.0"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-    "@react-native-aria/radio" "^0.2.7"
-    "@react-stately/radio" "^3.8.1"
-
-"@gluestack-ui/select@latest":
-  version "0.1.24"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/select/-/select-0.1.24.tgz#5ea4f0929c4d048c5a853b974ba1afa34b46dcbe"
-  integrity sha512-iCDH0aoGYz2ymVbn0nnjynyQ1L+mV0YFOUc16gS+DTgfjSrXdjTSYwC0vI3fAoG+Sq30il08A+Y2vuYQHTflZg==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.16"
-    "@gluestack-ui/hooks" "0.1.11"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-
-"@gluestack-ui/slider@latest":
-  version "0.1.21"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/slider/-/slider-0.1.21.tgz#a7848b1b322a703dbd3eb2f3d2794c24653bf460"
-  integrity sha512-OZlMgzLnQllXylwpAzz99Bm4XLp9IQH3R+jE3nANIPLNV9DnJUGckCIbXnoarTqUk+F+8Q0xFVb9bSLF9ujAUQ==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.16"
-    "@gluestack-ui/hooks" "0.1.11"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-aria/visually-hidden" "^3.8.1"
-    "@react-native-aria/interactions" "^0.2.11"
-    "@react-native-aria/slider" "^0.2.10"
-    "@react-stately/slider" "^3.2.4"
-
-"@gluestack-ui/spinner@latest":
-  version "0.1.14"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/spinner/-/spinner-0.1.14.tgz#b0afb1e310b409b343d6f59f9127642a97ce224b"
-  integrity sha512-6uLUvyJMhYR/sIMU/purfaYPqaKiLqnBi0n0LiWRsJNGDgENqdWVHMJpGTdWaFuCLxumZ7xnp0wG2KAdG9UyyQ==
-
-"@gluestack-ui/switch@latest":
-  version "0.1.19"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/switch/-/switch-0.1.19.tgz#e8a615fd865082e22e531dc83e9712bc166881c7"
-  integrity sha512-abfFqpvQOF+ZYS516FGtiabxbxYE8edMRL1uFJ3LTCCU6cQ0xikAxajAZmc9mp8AWHmNHsAmuKPxjNLY3dTSsQ==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.16"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-    "@react-stately/toggle" "^3.4.4"
-
-"@gluestack-ui/tabs@latest":
-  version "0.1.16-alpha.0"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/tabs/-/tabs-0.1.16-alpha.0.tgz#7ef817061bd02bb7e70ad768c888ac0f504fda57"
-  integrity sha512-+qQbIhHqxpGUNlt0UU/X9MA8RbTNZDQ/qqwWHqvDx96TnIk/nlu547ykS/0tfyZf4MZzyqzg6m7si3vzdb1pGQ==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-
-"@gluestack-ui/textarea@latest":
-  version "0.1.20"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/textarea/-/textarea-0.1.20.tgz#8796a68c2bf3378ed81fdbcf1ac9cf627934c487"
-  integrity sha512-BkpOwyGT2I12elofVzEs4YbFAxPc41CqUpNc6wNEyovLjPs6BuVzZ7b0U/0xf8C72kj3h5s02GWrkHHVd+Lztw==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.16"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-
-"@gluestack-ui/themed@latest":
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/themed/-/themed-1.1.8.tgz#253b843300836168c4e7c1751e5020dcc8cd9e96"
-  integrity sha512-ucyUIW8XfK0zja73BA2BFB6UpyA7cNzUaIKI5HPvQgvSqCNeUvwzi/5GrrTAdt70OL6LGPy8bdmaYyzTwEfE9g==
-  dependencies:
-    "@expo/html-elements" latest
-    "@gluestack-style/animation-resolver" "1.0.4"
-    "@gluestack-style/legend-motion-animation-driver" "1.0.3"
-    "@gluestack-ui/accordion" "1.0.1"
-    "@gluestack-ui/actionsheet" "0.2.37"
-    "@gluestack-ui/alert" "0.1.12"
-    "@gluestack-ui/alert-dialog" "0.1.25"
-    "@gluestack-ui/avatar" "0.1.15"
-    "@gluestack-ui/button" "1.0.1"
-    "@gluestack-ui/checkbox" "0.1.24"
-    "@gluestack-ui/divider" "0.1.8"
-    "@gluestack-ui/fab" "0.1.18"
-    "@gluestack-ui/form-control" "0.1.16"
-    "@gluestack-ui/icon" "0.1.20"
-    "@gluestack-ui/image" "0.1.7"
-    "@gluestack-ui/input" "0.1.24"
-    "@gluestack-ui/link" "0.1.17"
-    "@gluestack-ui/menu" "0.2.29"
-    "@gluestack-ui/modal" "0.1.29"
-    "@gluestack-ui/overlay" "0.1.12"
-    "@gluestack-ui/popover" "0.1.31"
-    "@gluestack-ui/pressable" "0.1.14"
-    "@gluestack-ui/progress" "0.1.13"
-    "@gluestack-ui/provider" "0.1.10"
-    "@gluestack-ui/radio" "0.1.25"
-    "@gluestack-ui/select" "0.1.24"
-    "@gluestack-ui/slider" "0.1.21"
-    "@gluestack-ui/spinner" "0.1.14"
-    "@gluestack-ui/switch" "0.1.19"
-    "@gluestack-ui/tabs" "0.1.14"
-    "@gluestack-ui/textarea" "0.1.20"
-    "@gluestack-ui/toast" "1.0.4"
-    "@gluestack-ui/tooltip" "0.1.26"
-    "@legendapp/motion" latest
-
 "@gluestack-ui/toast@^0.1.7":
   version "0.1.20"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.20.tgz#863453f75d2e941000204a9524161bfd2500e320"
@@ -3646,29 +3308,6 @@
     "@gluestack-ui/utils" "^0.1.12"
     "@react-native-aria/focus" "^0.2.9"
 
-"@gluestack-ui/toast@latest":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-1.0.4.tgz#b4e33b60d0ded2438b598d03a25d6ac5427308da"
-  integrity sha512-GVEESsSl567OR/0JlVTuivK6G1EgfEC7N+CAuH6lx+s87qXcOMXeFAgltp6Mxl8g0g5hTPLWrDts2qQLzqwFOA==
-  dependencies:
-    "@gluestack-ui/hooks" "0.1.11"
-    "@gluestack-ui/overlay" "^0.1.12"
-    "@gluestack-ui/transitions" "^0.1.10"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-
-"@gluestack-ui/tooltip@latest":
-  version "0.1.26"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/tooltip/-/tooltip-0.1.26.tgz#bcd9df436ae00cb335790b0067f506c396cfbbf2"
-  integrity sha512-3QHLV4T3Thfo7pkjmZzS051jf4pVguiR28kpCoj7/vsBxnFo3jT6VNv7cVUy9rVvB2lh1EKZyb33THB0DmEeeg==
-  dependencies:
-    "@gluestack-ui/hooks" "0.1.11"
-    "@gluestack-ui/overlay" "^0.1.12"
-    "@gluestack-ui/utils" "^0.1.12"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "^0.2.11"
-    "@react-native-aria/overlays" "^0.3.10"
-
 "@gluestack/design-system@0.5.27", "@gluestack/design-system@^0.5.27":
   version "0.5.27"
   resolved "https://registry.yarnpkg.com/@gluestack/design-system/-/design-system-0.5.27.tgz#50f32707de920e52d830782584b77385bba6bc87"