diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
index 2f221e9f00..250c129d4a 100644
--- a/example/storybook-nativewind/package.json
+++ b/example/storybook-nativewind/package.json
@@ -27,9 +27,9 @@
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^0.17.2",
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
-    "@gluestack-style/react": "^1.0.49",
+    "@gluestack-style/react": "^1.0.50",
     "@gluestack-ui/config": "^1.1.10",
-    "@gluestack-ui/themed": "^1.1.8",
+    "@gluestack-ui/themed": "^1.1.10",
     "@gluestack/design-system": "^0.5.27",
     "@legendapp/motion": "^2.2.0",
     "@react-aria/button": "^3.7.0",
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 7fbc58b159..5d98f9bc67 100644
--- a/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx
@@ -52,7 +52,7 @@ The Examples section provides visual representations of the different variants o
 
 The following example demonstrates how easily you can customize the Accordion component to suit your needs.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -222,13 +222,13 @@ function App(){
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 ### Rounded corners
 
 The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -324,13 +324,13 @@ function App(){
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 ### Disabled item
 
 You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -422,13 +422,13 @@ function App(){
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 ### Default value
 
 Use the defaultValue prop to define the open item by default.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -544,13 +544,13 @@ function App(){
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 ### Nested Components
 
 You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -690,14 +690,14 @@ function App(){
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 ### Controlled Accordion
 
 A component is controlled when it's managed by its parent using props.
 You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -825,4 +825,4 @@ function App(){
       },
     }}
   />
-</AppProvider>
+</Wrapper>
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 04f7b06ac3..d8ef3afee0 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
@@ -55,7 +55,6 @@ import {
 } from '../../core-components/themed';
 import {
   KeyboardAvoidingView,
-  Platform,
 } from '@gluestack-ui/themed';
 import { LeadingIcon, IconRoot } from '@gluestack-ui/themed';
 import { transformedCode } from '../../utils';
@@ -72,6 +71,7 @@ import {
 import { config } from '@gluestack-ui/config';
 import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import {Platform} from 'react-native';
 
 This is an illustration of **Actionsheet** component.
 
@@ -561,16 +561,561 @@ We have outlined the various features that ensure the Actionsheet component is a
 
 - VoiceOver: When the actionsheet is focused, the screen reader will announce the button group .
 
-## Spec Doc
+## Examples
 
-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.
+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.
 
-<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%3D6203-27912%26t%3DzQi1VCxZQbqoZ7AP-1%26scaling%3Dscale-down%26page-id%3D6203%253A25990%26starting-point-node-id%3D6203%253A27912%26mode%3Ddesign"
-  allowFullScreen
-/>
+### Keyboard handling
+
+Demonstrates a common UI pattern known as keyboard handling or keyboard scrolling, in which an input field is automatically scrolled into view when the user taps on it and the keyboard appears. This improves usability and ensures that the input field is always visible and accessible, even when the keyboard is blocking part of the screen.
+
+**Without SnapPoints**
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App(){
+          const [showActionsheet, setShowActionsheet] = React.useState(false);
+          const handleClose = () => setShowActionsheet(!showActionsheet);
+            return (
+            <>
+                <Button onPress={handleClose}>
+                  <ButtonText>Open</ButtonText>
+                </Button>
+          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+         <Actionsheet
+          isOpen={showActionsheet}
+          onClose={handleClose}
+        >
+          <ActionsheetBackdrop />
+          <ActionsheetContent maxHeight="75%">
+            <ActionsheetDragIndicatorWrapper>
+              <ActionsheetDragIndicator />
+            </ActionsheetDragIndicatorWrapper>
+            <VStack w="$full" p={20}>
+              <HStack justifyContent="center" alignItems="center" space="md">
+                <Box
+                  w={50}
+                  h="$full"
+                  px="$2"
+                  borderWidth={1}
+                  borderStyle="solid"
+                  borderColor="$borderLight300"
+                  rounded="$sm"
+                >
+                  <Image
+                    source={{ uri: 'https://i.imgur.com/UwTLr26.png' }}
+                    flex={1}
+                    resizeMode="contain"
+                  />
+                </Box>
+                <VStack flex={1}>
+                  <Text fontWeight="$bold">Mastercard</Text>
+                  <Text>Card ending in 2345</Text>
+                </VStack>
+              </HStack>
+              <FormControl mt={36}>
+                <FormControlLabel>
+                  <FormControlLabelText>
+                    Confirm security code
+                  </FormControlLabelText>
+                </FormControlLabel>
+                <Input w="$full">
+                  <InputSlot>
+                   <InputIcon as={LeadingIcon} ml="$2" />
+                  </InputSlot>
+                  <InputField placeholder="CVC/CVV" />
+                </Input>
+                <Button onPress={handleClose} mt={20}>
+                  <ButtonText>Pay $1000</ButtonText>
+                </Button>
+              </FormControl>
+            </VStack>
+          </ActionsheetContent>
+        </Actionsheet>
+    </KeyboardAvoidingView>
+ </>
+          );
+        }
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Actionsheet,
+        ActionsheetBackdrop,
+        ActionsheetContent,
+        ActionsheetDragIndicator,
+        ActionsheetDragIndicatorWrapper,
+        ActionsheetItem,
+        ActionsheetItemText,
+        Button,
+        ButtonText,
+        ButtonText,
+        VStack,
+        Input,
+        InputIcon,
+        InputSlot,
+        InputField,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        HStack,
+        Image,
+        Text,
+        Box,
+        Icon,
+        LeadingIcon,
+        IconRoot,
+        KeyboardAvoidingView,
+        Platform,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+**With SnapPoints**
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App(){
+          const [showActionsheet, setShowActionsheet] = React.useState(false);
+          const handleClose = () => setShowActionsheet(!showActionsheet);
+            return (
+      <>
+        <Button onPress={handleClose}>
+            <ButtonText>Open</ButtonText>
+        </Button>
+         <Actionsheet
+          isOpen={showActionsheet}
+          onClose={handleClose}
+          snapPoints={[50]}
+        >
+        <KeyboardAvoidingView
+        behavior="position"
+        // eslint-disable-next-line react-native/no-inline-styles
+        style={{
+          position: 'relative',
+          flex: 1,
+          justifyContent: 'flex-end',
+        }}
+      >
+          <ActionsheetBackdrop />
+          <ActionsheetContent maxHeight="75%">
+            <ActionsheetDragIndicatorWrapper>
+              <ActionsheetDragIndicator />
+            </ActionsheetDragIndicatorWrapper>
+            <VStack w="$full" p={20}>
+              <HStack justifyContent="center" alignItems="center" space="md">
+                <Box
+                  w={50}
+                  h="$full"
+                  px="$2"
+                  borderWidth={1}
+                  borderStyle="solid"
+                  borderColor="$borderLight300"
+                  rounded="$sm"
+                >
+                  <Image
+                    source={{ uri: 'https://i.imgur.com/UwTLr26.png' }}
+                    flex={1}
+                    resizeMode="contain"
+                  />
+                </Box>
+                <VStack flex={1}>
+                  <Text fontWeight="$bold">Mastercard</Text>
+                  <Text>Card ending in 2345</Text>
+                </VStack>
+              </HStack>
+              <FormControl mt={36}>
+                <FormControlLabel>
+                  <FormControlLabelText>
+                    Confirm security code
+                  </FormControlLabelText>
+                </FormControlLabel>
+                <Input w="$full">
+                  <InputSlot>
+                   <InputIcon as={LeadingIcon} ml="$2" />
+                  </InputSlot>
+                  <InputField placeholder="CVC/CVV" />
+                </Input>
+                <Button onPress={handleClose} mt={20}>
+                  <ButtonText>Pay $1000</ButtonText>
+                </Button>
+              </FormControl>
+            </VStack>
+          </ActionsheetContent>
+    </KeyboardAvoidingView>
+</Actionsheet>
+ </>
+);}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Actionsheet,
+        ActionsheetBackdrop,
+        ActionsheetContent,
+        ActionsheetDragIndicator,
+        ActionsheetDragIndicatorWrapper,
+        ActionsheetItem,
+        ActionsheetItemText,
+        Button,
+        ButtonText,
+        ButtonText,
+        VStack,
+        Input,
+        InputIcon,
+        InputSlot,
+        InputField,
+        FormControl,
+        FormControlLabel,
+        FormControlLabelText,
+        HStack,
+        Image,
+        Text,
+        Box,
+        Icon,
+        LeadingIcon,
+        IconRoot,
+        KeyboardAvoidingView,
+        Platform,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+### Icons
+
+The Actionsheet with Icons is a variation of the Actionsheet component that displays icons next to each option. It's commonly used in apps for a more visual representation of options and easier navigation.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App(){
+          const [showActionsheet, setShowActionsheet] = React.useState(false);
+          const handleClose = () => setShowActionsheet(!showActionsheet);
+            return (
+            <>
+                <Button onPress={handleClose}>
+                  <ButtonText>Open</ButtonText>
+                </Button>
+                <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
+                <ActionsheetBackdrop />
+                  <ActionsheetContent>
+                    <ActionsheetDragIndicatorWrapper>
+                      <ActionsheetDragIndicator />
+                    </ActionsheetDragIndicatorWrapper>
+                    <ActionsheetItem onPress={handleClose}>
+                      <ActionsheetIcon>
+                        <Icon as={TrashIcon} />
+                      </ActionsheetIcon>
+                      <ActionsheetItemText>Delete</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem onPress={handleClose}>
+                      <ActionsheetIcon>
+                        <Icon as={ShareIcon} />
+                      </ActionsheetIcon>
+                      <ActionsheetItemText>Share</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem onPress={handleClose}>
+                      <ActionsheetIcon>
+                        <Icon as={PlayIcon} />
+                      </ActionsheetIcon>
+                      <ActionsheetItemText>Play</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem onPress={handleClose}>
+                      <ActionsheetIcon>
+                        <Icon as={FavouriteIcon} />
+                      </ActionsheetIcon>
+                      <ActionsheetItemText>Favourite</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem onPress={handleClose}>
+                      <ActionsheetIcon>
+                        <Icon as={CloseIcon} />
+                      </ActionsheetIcon>
+                      <ActionsheetItemText>Cancel</ActionsheetItemText>
+                    </ActionsheetItem>
+                  </ActionsheetContent>
+              </Actionsheet>
+            </>
+          );
+        }
+  `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Actionsheet,
+        ActionsheetBackdrop,
+        ActionsheetContent,
+        ActionsheetDragIndicator,
+        ActionsheetDragIndicatorWrapper,
+        ActionsheetItem,
+        ActionsheetItemText,
+        ActionsheetIcon,
+        Icon,
+        Wrapper,
+        TrashIcon,
+        ShareIcon,
+        PlayIcon,
+        FavouriteIcon,
+        CloseIcon,
+        Button,
+        ButtonText,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+### VirtualizedList
+
+The Actionsheet with Virtualized List includes a virtualized list for better performance when displaying a large number of options. It's commonly used in apps with long lists of options for an improved user experience.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `function App(){
+    const [showActionsheet, setShowActionsheet] = React.useState(false);
+    const handleClose = () => setShowActionsheet(!showActionsheet);
+    const data = React.useMemo(() => Array(50).fill(0).map((_, index) => 'Item' + index),[]);
+    const getItem = (_data, index) => ({
+      id: Math.random().toString(12).substring(0),
+      title: _data[index],
+    });
+    const getItemCount = (_data) => _data.length;
+    const Item = React.useCallback(
+      ({ title }) => (
+        <ActionsheetItem onPress={handleClose}>
+          <ActionsheetItemText>{title}</ActionsheetItemText>
+        </ActionsheetItem>
+      ),
+      [handleClose]
+    );
+    return (
+    <>
+        <Button onPress={handleClose}>
+          <ButtonText>Open</ButtonText>
+        </Button>
+        <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
+        <ActionsheetBackdrop />
+        <ActionsheetContent>
+          <ActionsheetDragIndicatorWrapper>
+            <ActionsheetDragIndicator />
+          </ActionsheetDragIndicatorWrapper>
+          <ActionsheetVirtualizedList
+            h="$56"
+            data={data}
+            initialNumToRender={5}
+            renderItem={({ item }) => <Item title={item.title} />}
+            keyExtractor={(item) => item.id}
+            getItemCount={getItemCount}
+            getItem={getItem}
+          />
+        </ActionsheetContent>
+      </Actionsheet>
+    </>
+);
+}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Actionsheet,
+        ActionsheetBackdrop,
+        ActionsheetContent,
+        ActionsheetDragIndicator,
+        ActionsheetDragIndicatorWrapper,
+        ActionsheetItem,
+        ActionsheetItemText,
+        ActionsheetVirtualizedList,
+        Button,
+        ButtonText,
+        Wrapper,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+### FlatList
+
+The Actionsheet with Flat List is a variation of the Actionsheet component that displays a flat list of options. It's commonly used in apps for a simple and straightforward display of options to the user.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `function App(){
+    const [showActionsheet, setShowActionsheet] = React.useState(false);
+    const handleClose = () => setShowActionsheet(!showActionsheet);
+    const DATA = [
+      {
+        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+        title: 'First Item'
+      },
+      {
+        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+        title: 'Second Item'
+      },
+      {
+        id: '58694a0f-3da1-471f-bd96-145571e29d72',
+        title: 'Third Item'
+      },
+    ];
+    const Item = React.useCallback(
+      ({ title }) => (
+        <ActionsheetItem onPress={handleClose}>
+          <ActionsheetItemText>{title}</ActionsheetItemText>
+        </ActionsheetItem>
+      ),
+      [handleClose]
+    );
+    return (
+    <>
+        <Button onPress={handleClose}>
+          <ButtonText>Open</ButtonText>
+        </Button>
+        <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
+        <ActionsheetBackdrop />
+        <ActionsheetContent>
+          <ActionsheetDragIndicatorWrapper>
+            <ActionsheetDragIndicator />
+          </ActionsheetDragIndicatorWrapper>
+          <ActionsheetFlatList
+            data={DATA}
+            renderItem={({ item }) => <Item title={item.title} />}
+            keyExtractor={(item) => item.id}
+          />
+        </ActionsheetContent>
+      </Actionsheet>
+    </>
+);
+}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Actionsheet,
+        ActionsheetBackdrop,
+        ActionsheetContent,
+        ActionsheetDragIndicator,
+        ActionsheetDragIndicatorWrapper,
+        ActionsheetItem,
+        ActionsheetItemText,
+        ActionsheetFlatList,
+        Button,
+        ButtonText,
+        Wrapper,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+### SectionList
+
+The Actionsheet with SectionList is a variation of the Actionsheet component that displays a sectioned list of options. It's commonly used in apps to organize options into different categories or sections for better readability and navigation.
+
+Default styling of the component can be found in the `components/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Actionsheet) of the styled `Actionsheet` component.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `function App(){
+    const [showActionsheet, setShowActionsheet] = React.useState(false);
+    const handleClose = () => setShowActionsheet(!showActionsheet);
+    const DATA = [
+      {
+        title: 'Main dishes',
+        data: ['Pizza', 'Burger', 'Risotto'],
+      },
+      {
+        title: 'Sides',
+        data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
+      },
+      {
+        title: 'Drinks',
+        data: ['Water', 'Coke', 'Beer'],
+      },
+      {
+        title: 'Desserts',
+        data: ['Cheese Cake', 'Ice Cream'],
+      },
+    ];
+    return (
+    <>
+        <Button onPress={handleClose}>
+          <ButtonText>Open</ButtonText>
+        </Button>
+        <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
+        <ActionsheetBackdrop />
+        <ActionsheetContent>
+          <ActionsheetDragIndicatorWrapper>
+            <ActionsheetDragIndicator />
+          </ActionsheetDragIndicatorWrapper>
+           <ActionsheetSectionList
+            h="$56"
+            sections={DATA}
+            keyExtractor={(item, index) => item + index}
+            renderItem={({ item }) => (
+              <ActionsheetItem onPress={handleClose}>
+                <ActionsheetItemText>{item}</ActionsheetItemText>
+              </ActionsheetItem>
+            )}
+            renderSectionHeader={({ section: { title, data } }) => (
+              <ActionsheetSectionHeaderText>
+                {title}  ({data.length})
+              </ActionsheetSectionHeaderText>
+            )}
+          />
+        </ActionsheetContent>
+      </Actionsheet>
+    </>
+);
+}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Actionsheet,
+        ActionsheetBackdrop,
+        ActionsheetContent,
+        ActionsheetDragIndicator,
+        ActionsheetDragIndicatorWrapper,
+        ActionsheetItem,
+        ActionsheetItemText,
+        ActionsheetSectionList,
+        ActionsheetSectionHeaderText,
+        Button,
+        ButtonText,
+        Wrapper,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Alert/Alert.tsx b/example/storybook-nativewind/src/components/Alert/Alert.tsx
index 7b035ab410..8d8072a11b 100644
--- a/example/storybook-nativewind/src/components/Alert/Alert.tsx
+++ b/example/storybook-nativewind/src/components/Alert/Alert.tsx
@@ -1,16 +1,6 @@
 import React from 'react';
 import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
-import {
-  InfoIcon,
-  CheckCircleIcon,
-  CloseCircleIcon,
-  BellIcon,
-  AlertCircleIcon,
-  Icon,
-} from '@/components/ui/icon';
-import { VStack } from '@/components/ui/vstack';
-import { Center } from '@/components/ui/center';
-import { HStack } from '@/components/ui/hstack';
+import { InfoIcon } from '@/components/ui/icon';
 
 const AlertBasic = ({ ...props }: any) => {
   return (
@@ -26,17 +16,4 @@ AlertBasic.description =
 
 export default AlertBasic;
 
-export {
-  Alert,
-  AlertIcon,
-  AlertText,
-  InfoIcon,
-  CheckCircleIcon,
-  CloseCircleIcon,
-  BellIcon,
-  AlertCircleIcon,
-  Icon,
-  VStack,
-  Center,
-  HStack,
-};
+export { Alert, AlertIcon, AlertText, InfoIcon };
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 6a74705b43..6341d07a16 100644
--- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
@@ -146,7 +146,7 @@ Alert component is created using View component from react-native. It extends al
 
 #### Alert
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -192,7 +192,7 @@ Alert component is created using View component from react-native. It extends al
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 ### Examples
 
@@ -202,7 +202,7 @@ The Examples section provides visual representations of the different variants o
 
 An example of an alert component with a heading, which further contains another alert component for displaying supplementary information.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -236,4 +236,4 @@ An example of an alert component with a heading, which further contains another
     }}
 />
 
-</AppProvider>
+</Wrapper>
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 2990fbab5a..469da937df 100644
--- a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx
@@ -14,19 +14,20 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Feedback/Alert" />
 
-import { Alert, AlertIcon, AlertText } from '../../core-components/themed';
 import {
-  CheckCircleIcon,
-  CloseCircleIcon,
-  Icon,
   BellIcon,
   AlertCircleIcon,
   Center,
   VStack,
   InfoIcon,
+  HStack,
+  Alert,
+  AlertIcon,
+  AlertText,
+  CheckCircleIcon,
+  CloseCircleIcon,
+  Icon,
 } from '../../core-components/themed';
-
-import { HStack } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -34,8 +35,8 @@ import {
   Table,
   InlineCode,
   TableContainer,
+  CollapsibleCode,
 } from '@gluestack/design-system';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 import Wrapper from '../../core-components/themed/Wrapper';
 
@@ -234,16 +235,46 @@ Alert component is created using View component from react-native. It extends al
   </TableContainer>
 </>
 
-## Spec Doc
+### Examples
 
-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.
+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.
 
-<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
+#### Alert with Heading
+
+An example of an alert component with a heading, which further contains another alert component for displaying supplementary information.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Alert action='success'>
+          <AlertIcon as={CheckCircleIcon} size="xl"  mr="$3" />
+          <VStack space='xs'>
+            <AlertText fontWeight ='$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: {},
+    }}
 />
+
+</Wrapper>
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 83d4d68fad..1c755bf6c2 100644
--- a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
@@ -31,9 +31,8 @@ import {
   Center,
   HStack,
   AlertTriangleIcon,
-} from '@gluestack-ui/themed';
-import { Heading, Icon, AlertCircleIcon } from '../../core-components/themed';
-import { Text, CheckCircleIcon } from '../../core-components/themed';
+  Text, CheckCircleIcon,Heading, Icon, AlertCircleIcon
+} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -41,9 +40,8 @@ import {
   Table,
   TableContainer,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
-import { CollapsibleCode } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **AlertDialog** component.
@@ -528,16 +526,194 @@ AlertDialog component is created using View component from react-native. It exte
   </TableContainer>
 </>
 
-## Spec Doc
 
-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.
+### 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.
 
-<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%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
+#### AlertDialog with semantic icon
+
+An example of an AlertDialog component incorporating an icon component for visually representing important information or actions.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      function App(){
+        const [showAlertDialog, setShowAlertDialog] = React.useState(false);
+        return (
+          <>
+            <Center h={300} >
+                <Button onPress={() => setShowAlertDialog(true)}>
+                    <ButtonText>Click me</ButtonText>
+                </Button>
+            </Center>
+            <AlertDialog
+              isOpen={showAlertDialog}
+              onClose={() => {
+                  setShowAlertDialog(false);
+              }}
+            >
+                  <AlertDialogBackdrop/>
+              <AlertDialogContent>
+              <AlertDialogHeader borderBottomWidth='$0'>
+                 <HStack space='sm' alignItems='center'>
+                  <Icon as={CheckCircleIcon} color='$success700' 
+                  $dark-color='$success300' />
+                    <Heading size='lg'>Order placed</Heading>
+                  </HStack>
+                </AlertDialogHeader>
+                <AlertDialogBody>
+                    <Text size="sm">
+                    Congratulations, your order has been placed! You will receive a confirmation email shortly. Thank you for shopping with us.
+                    </Text>
+                </AlertDialogBody>
+                 <AlertDialogFooter  borderTopWidth='$0'>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    action="secondary"
+                    mr="$3"
+                    onPress={() => {
+                      setShowAlertDialog(false);
+                    }}
+                  >
+                    <ButtonText>Okay</ButtonText>
+                  </Button>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </>
+        );
+      }
+    `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Button,
+        ButtonText,
+        Center,
+        Wrapper,
+        AlertDialog,
+        AlertDialogBackdrop,
+        AlertDialogContent,
+        AlertDialogHeader,
+        AlertDialogCloseButton,
+        AlertDialogFooter,
+        AlertDialogBody,
+        Icon,
+        Text,
+        HStack,
+        AlertTriangleIcon,
+        CheckCircleIcon,
+        Heading,
+      },
+      argsType: {},
+    }}
   />
+</Wrapper>
+
+#### AlertDialog Sizes
+
+An AlertDialog component with adjustable sizes, providing flexible and visually appealing pop-up notifications and interactive prompts to users.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={true}
+    metaData={{
+      code: `
+      function App(){
+        const [showAlertDialog, setShowAlertDialog] = React.useState(false);
+        return (
+          <>
+       <Center h={300} >
+                <Button onPress={() => setShowAlertDialog(true)}>
+                    <ButtonText>Click me</ButtonText>
+                </Button>
+            </Center>
+            <AlertDialog
+              isOpen={showAlertDialog}
+              onClose={() => {
+                  setShowAlertDialog(false);
+              }}
+              {...props}
+            >
+                  <AlertDialogBackdrop/>
+              <AlertDialogContent>
+              <AlertDialogHeader borderBottomWidth='$0'>
+                 <HStack space='sm' alignItems='center'>
+                  <Icon as={AlertTriangleIcon} color='$error700'  />
+                    <Heading size='lg'>Order placed</Heading>
+                  </HStack>
+                </AlertDialogHeader>
+                <AlertDialogBody>
+                    <Text>
+                     You have exceeded your monthly upload limit. Please upgrade to a premium account to continue uploading.
+                  </Text>
+                </AlertDialogBody>
+                 <AlertDialogFooter  borderTopWidth='$0'>
+                   <ButtonGroup space="lg">
+              <Button
+                variant="outline"
+                action="secondary"
+                onPress={() => {
+                  setShowAlertDialog(false)
+                }}
+              >
+                <ButtonText fontSizes="$md">Close</ButtonText>
+              </Button>
+                <Button
+                action="primary"
+                onPress={() => {
+                  setShowAlertDialog(false)
+                }}
+                bgColor="$darkBlue700"
+              >
+                <ButtonText>View plans</ButtonText>
+              </Button>
+                    </ButtonGroup >
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </>
+        );
+      }
+    `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Button,
+        ButtonText,
+        ButtonGroup,
+        Center,
+        Wrapper,
+        AlertDialog,
+        AlertDialogBackdrop,
+        AlertDialogContent,
+        AlertDialogHeader,
+        AlertDialogCloseButton,
+        AlertDialogFooter,
+        AlertDialogBody,
+        Icon,
+        Text,
+        HStack,
+        AlertTriangleIcon,
+        CheckCircleIcon,
+        Heading,
+      },
+      argsType: {
+        size: {
+          control: 'select',
+          options: ['xs', 'sm', 'md', 'lg', 'full'],
+          default: 'md',
+        },
+      },
+    }}
+  />
+</Wrapper>
+
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 5508e0f728..7a6ac491fe 100644
--- a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx
@@ -36,9 +36,8 @@ import {
   Table,
   TableContainer,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
-import { CollapsibleCode } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Avatar** component.
@@ -128,3 +127,454 @@ 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.
+
+
+
+
+### 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.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+    <VStack space="2xl">
+        <HStack space="md">
+            <Avatar  bgColor="$indigo600"  >
+              <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  bgColor="$orange600" >
+            <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: {},
+    }}
+  />
+</Wrapper>
+
+#### 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.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="2xl">
+            <HStack space="md">
+              <Avatar  bgColor="$indigo600" >
+                {/* 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  bgColor="$pink600" >
+                 {/* User is imported from 'lucide-react-native' */}
+                <Icon as={User} color="white" 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: {},
+    }}
+  />
+</Wrapper>
+
+#### 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.
+
+<Wrapper>
+  <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: {},
+    }}
+  />
+</Wrapper>
+
+#### 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>`
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App(){
+          const avatars = [
+              { src: 'https://example.com.jpg', alt: 'Sandeep Srivastva' , color:'$emerald600' },
+              { src: 'https://example.com.jpg', alt: 'Arjun Kapoor', color:'$cyan600' },
+              { src: 'https://example.com.jpg', alt: 'Ritik Sharma ', color:'$indigo600' },
+              { src: 'https://example.com.jpg', alt: 'Akhil Sharma', color:'$gray600' },
+              { src: 'https://example.com.jpg', alt: 'Rahul Sharma ', color:'$red400' },
+          ];
+          const extraAvatars = avatars.slice(3);
+          const remainingCount = extraAvatars.length;
+          return (
+            <AvatarGroup>
+              {avatars.slice(0, 3).map((avatar, index) => {
+                return (
+                  <Avatar key={index} size="lg" borderColor="$white" borderWidth="$2" bg={avatar.color} $dark-borderColor="$black">
+                    <AvatarFallbackText>{avatar.alt}</AvatarFallbackText>
+                  </Avatar>
+                );
+              })}
+              <Avatar size="lg" borderColor="$white" borderWidth="$2" bg="$gray600" 
+              $dark-borderColor="$black">
+                  <AvatarFallbackText >{"+ " + remainingCount + ""}</AvatarFallbackText>
+              </Avatar>
+            </AvatarGroup>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Avatar,
+        AvatarGroup,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Wrapper,
+        HStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### 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.
+
+<Wrapper>
+  <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: {},
+    }}
+  />
+</Wrapper>
+
+#### 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.
+
+<Wrapper>
+  <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 
+            $dark-borderColor="$black"/>
+          </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 $dark-borderColor="$black"/>
+          </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 $dark-borderColor="$black"/>
+          </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 
+            $dark-borderColor="$black"/>
+          </Avatar>
+        </AvatarGroup>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Avatar,
+        AvatarGroup,
+        AvatarBadge,
+        AvatarFallbackText,
+        AvatarImage,
+        Wrapper,
+        HStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### 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.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="2xl">
+          <HStack space="md">
+            <Avatar size="md" bgColor="$indigo300" borderColor="$indigo600" borderWidth={2}>
+              {/* User is imported from 'lucide-react-native' */}
+              <Icon as={User} color="$indigo600" size="xl"/>
+            </Avatar>
+            <VStack  >
+              <Heading size="sm" >Ronald Richards</Heading>
+              <Text size="sm" >Nursing Assistant</Text>
+            </VStack>
+          </HStack>
+          <HStack space="md">
+            <Avatar size="md"  bgColor="$pink300" borderColor="$pink600" borderWidth={2}>
+            {/* User is imported from 'lucide-react-native' */}
+              <Icon as={User} color="$pink600" size="xl"/>
+            </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: {},
+    }}
+  />
+</Wrapper>
+
+#### Fallback
+
+Fallback text is shown when the image fails to load, the image is not available or the provided image url is not correct.
+
+<Wrapper>
+  <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: {},
+    }}
+  />
+</Wrapper>
+
+
diff --git a/example/storybook-nativewind/src/components/Badge/Badge.tsx b/example/storybook-nativewind/src/components/Badge/Badge.tsx
index eb08d9574a..3fc5ebf1a6 100644
--- a/example/storybook-nativewind/src/components/Badge/Badge.tsx
+++ b/example/storybook-nativewind/src/components/Badge/Badge.tsx
@@ -1,28 +1,4 @@
 import React from 'react';
-import {
-  Center,
-  Icon,
-  Box,
-  Text,
-  VStack,
-  HStack,
-  SettingsIcon,
-  Divider,
-  AddIcon,
-  Image,
-  CheckIcon,
-  Heading,
-  Avatar,
-  AvatarFallbackText,
-  AvatarImage,
-  Button,
-  ButtonText,
-  Menu,
-  MenuIcon,
-  MenuItem,
-  MenuItemLabel,
-  GlobeIcon,
-} from '@gluestack-ui/themed';
 import {
   PaintBucket,
   PuzzleIcon,
@@ -30,12 +6,13 @@ import {
   BadgePlusIcon,
 } from 'lucide-react-native';
 import { Badge, BadgeText, BadgeIcon } from '@/components/ui/badge';
+import { GlobeIcon } from '@/components/ui/icon';
 
 const BadgeBasic = ({ text = 'NEW FEATURE', _colorMode, ...props }: any) => {
   return (
-    <Badge {...props} gap="$1">
+    <Badge {...props}>
       <BadgeText>{text}</BadgeText>
-      <BadgeIcon as={GlobeIcon} />
+      <BadgeIcon as={GlobeIcon} className="ml-2" />
     </Badge>
   );
 };
@@ -46,33 +23,12 @@ BadgeBasic.description =
 export default BadgeBasic;
 
 export {
-  Center,
   Badge,
   BadgeText,
   BadgeIcon,
-  Icon,
-  Box,
-  Text,
-  VStack,
-  HStack,
   PuzzleIcon,
-  SettingsIcon,
-  AddIcon,
   PaintBucket,
-  Divider,
-  Image,
-  CheckIcon,
-  Heading,
-  Avatar,
-  AvatarFallbackText,
-  AvatarImage,
-  Button,
-  ButtonText,
   GlobeIcon,
   BadgeCheckIcon,
-  Menu,
-  MenuIcon,
-  MenuItem,
-  MenuItemLabel,
   BadgePlusIcon,
 };
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 d9c8d34c20..6e13c26c25 100644
--- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
@@ -1,5 +1,5 @@
 ---
-title: Badge | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Badge Component | Installation, Usage, and API
 
 description: The badge component lets you quickly and easily add status indicators to your interface for improved usability. They are designed to be attention-grabbing and quickly convey important information.
 
@@ -15,21 +15,29 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="with-nativewind/components/Data Display/Badge" />
 
 import {
+  Center,
   Badge,
   BadgeText,
+  BadgeIcon,
   Icon,
   Box,
-  Avatar,
-  AvatarImage,
-  AvatarFallbackText,
+  Text,
+  VStack,
+  HStack,
+  SettingsIcon,
+  AddIcon,
   Divider,
   Image,
+  CheckIcon,
   Heading,
-  VStack,
-  HStack,
+  Avatar,
+  AvatarFallbackText,
+  AvatarImage,
   Button,
   ButtonText,
+  GlobeIcon,
   Menu,
+  MenuIcon,
   MenuItem,
   MenuItemLabel,
 } from '../../core-components/nativewind';
@@ -38,17 +46,10 @@ import {
   PuzzleIcon,
   BadgeCheckIcon,
   BadgePlusIcon,
-  SettingsIcon,
-  AddIcon,
-  BadgeIcon,
-  CheckIcon,
-  MenuIcon,
-  Globe,
 } from 'lucide-react-native';
 import {
   AppProvider,
   CodePreview,
-  Text,
   Table,
   TableContainer,
   InlineCode,
@@ -63,11 +64,11 @@ This is an illustration of **Badge** component.
   <CodePreview
     metaData={{
       code: `
-<Badge {...props}>
-  <BadgeText>New feature</BadgeText>
-  <BadgeIcon as={Globe} className="ml-2" />
-</Badge>
-`,
+        <Badge {...props}>
+          <BadgeText>New feature</BadgeText>
+          <BadgeIcon as={GlobeIcon} className="ml-2" />
+        </Badge>
+      `,
       transformCode: (code) => {
         return transformedCode(code);
       },
@@ -76,7 +77,7 @@ This is an illustration of **Badge** component.
         Badge,
         BadgeText,
         BadgeIcon,
-        Globe,
+        GlobeIcon
       },
       argsType: {
         size: {
@@ -160,53 +161,70 @@ Contains all Icon related layout style props and actions. It inherits all the pr
 
 Badge 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 Badge 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%3D6030-27780%26t%3DdmNaOHvCSb4QGYGL-1%26scaling%3Dscale-down%26page-id%3D6030%253A25864%26starting-point-node-id%3D6030%253A27780%26mode%3Ddesign"
-  allowFullScreen
-/> -->
-
-<!--
-
-### Advanced
-
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
-
-### Customizing the Badge
-
-For customizing the Badge, you have to map styled view to Badge You can refer [gluestack.io/style](/style) on how to use styled components.
-
-#### Usage
-
-Default styling of the component can be found in the `components/badge` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Badge) of the styled `Badge` component.
+#### Badge
 
-```jsx
-// import the styles
-import { Root, Text, Icon } from 'components/core/badge/styled-components';
+<Wrapper>
+  <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>success</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</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>solid</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>size</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>sm | md | lg</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</Wrapper>
 
-// mapping the Badge to root component and compounding the Text and Icon components
-const Badge = Root;
-BadgeText = Text;
-BadgeIcon = Icon;
-
-// Using the badge component
-export default () => (
-  <Badge>
-    <BadgeText></BadgeText>
-    <BadgeIcon></BadgeIcon>
-  </Badge>
-);
-```
--->
+> 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
 
@@ -216,7 +234,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -240,7 +258,7 @@ An example of the Badge component being used with the Avatar component to displa
                   <BadgeIcon as={BadgeCheckIcon} className='ml-1'/>
               </Badge>
             </HStack>
-            <Text className='text-sm' >Nursing Assistant</Text>
+            <Text size='sm' >Nursing Assistant</Text>
             </VStack>
           </HStack>
         </VStack>
@@ -260,116 +278,19 @@ An example of the Badge component being used with the Avatar component to displa
         Badge,
         BadgeText,
         BadgeIcon,
-        Globe,
+        GlobeIcon,
         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>
+</Wrapper>
 
 ### 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>
+<Wrapper>
   <CodePreview
     showArgsController={false}
     metaData={{
@@ -377,10 +298,10 @@ An example of the Badge component being used with the Composition component, all
        <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'
+            className='z-10 self-end h-[22px] w-[22px] bg-red-600 rounded-full -mb-3.5 -mr-3.5'
             variant="solid"
           >
-            <BadgeText className='color-white'>2</BadgeText>
+            <BadgeText className='text-white'>2</BadgeText>
           </Badge>
           <Button>
             <ButtonText>
@@ -398,7 +319,7 @@ An example of the Badge component being used with the Composition component, all
         Badge,
         BadgeText,
         BadgeIcon,
-        Globe,
+        GlobeIcon,
         Box,
         Text,
         HStack,
@@ -410,4 +331,4 @@ An example of the Badge component being used with the Composition component, all
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 be9612f2cb..4e18cdee9b 100644
--- a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx
@@ -24,15 +24,11 @@ import {
   GlobeIcon,
   Icon,
   Box,
-  PuzzleIcon,
   Menu,
   MenuIcon,
   MenuItem,
   MenuItemLabel,
-  BadgePlusIcon,
-  SettingsIcon,
   AddIcon,
-  PaintBucket,
   Avatar,
   AvatarImage,
   AvatarFallbackText,
@@ -40,9 +36,15 @@ import {
   HStack,
   Button,
   ButtonText,
-  BadgeCheckIcon,
   Badge,
 } from '../../core-components/themed';
+import {
+  PaintBucket,
+  PuzzleIcon,
+  BadgeCheckIcon,
+  BadgePlusIcon,
+  SettingsIcon,
+} from 'lucide-react-native';
 import {
   AppProvider,
   CodePreview,
@@ -263,7 +265,7 @@ Badge component is created using View component from react-native. It extends al
   </TableContainer>
 </>
 
-<!--
+
 ## Spec Doc
 
 Explore the comprehensive details of the Badge 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.
@@ -276,7 +278,7 @@ Explore the comprehensive details of the Badge 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%3D6030-27780%26t%3DdmNaOHvCSb4QGYGL-1%26scaling%3Dscale-down%26page-id%3D6030%253A25864%26starting-point-node-id%3D6030%253A27780%26mode%3Ddesign"
   allowFullScreen
-/> -->
+/> 
 
 <!--
 
@@ -319,7 +321,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -369,13 +371,13 @@ An example of the Badge component being used with the Avatar component to displa
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### 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>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -465,13 +467,13 @@ A Badge component used with a menu adds a visual indicator, such as a badge, to
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 ### 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>
+<Wrapper>
   <CodePreview
     showArgsController={false}
     metaData={{
@@ -509,4 +511,4 @@ An example of the Badge component being used with the Composition component, all
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 e41a24799c..6af9d59747 100644
--- a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx
@@ -11,18 +11,14 @@ showHeader: true
 ---
 
 import { Meta } from '@storybook/addon-docs';
-import { useRef, useEffect, useState } from 'react';
 
 <Meta title="with-gluestack-style/components/Layout/Box" />
 
+import { useRef, useEffect, useState } from 'react';
 import { Box } from '../../core-components/themed';
-import { Text } from '../../core-components/themed';
-
 import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview } from '@gluestack/design-system';
-
+import { AppProvider,CodePreview,Text,CollapsibleCode} from '@gluestack/design-system';
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Box** component.
 
@@ -88,3 +84,56 @@ This section provides a comprehensive reference list for the component props, de
 #### Box
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+
+
+
+
+
+
+### 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.
+
+#### Box with ref
+
+A Box component with a ref property enables the direct reference and manipulation of the underlying DOM element, offering greater control and flexibility in modifying the box's appearance and behavior within a user interface.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App () {
+          const myRef = useRef({});
+          useEffect(() => {
+            const styleObj = {
+              borderWidth: 2,
+              borderRadius: 4,
+              borderColor: '#1A91FF',
+            };
+          if(myRef.current && myRef.current.setNativeProps){
+             myRef.current.setNativeProps({
+              style: styleObj,
+             });
+            }
+          }, [myRef]);
+        return (
+          <Box 
+          h={100}
+          w={100}
+          bg="$primary100"
+          ref={myRef} />
+        );
+      }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: { Box, Wrapper, useRef, useEffect },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
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 d5c8a4c7f2..a0f48e73ba 100644
--- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
@@ -43,6 +43,7 @@ import {
 } from '@gluestack/design-system';
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import colors from 'tailwindcss/colors';
 
 This is an illustration of **Button** component.
 
@@ -386,7 +387,7 @@ Button component is created using Pressable component from react-native. It exte
 
 #### Button
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -447,7 +448,7 @@ Button component is created using Pressable component from react-native. It exte
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 > 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.
 
@@ -459,31 +460,32 @@ The Examples section provides visual representations of the different variants o
 
 A loading button is a type of button component that provides visual feedback to the user during an action that takes some time to complete. It typically displays an animated loading icon or spinner indicating the action is in progress.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
       code: `
         <Button className='p-3'>
-          <ButtonSpinner color="white" className='mr-1'/>
+        {/* colors is imported from tailwindcss/colors */}
+          <ButtonSpinner color={colors.gray[400]} className='mr-1'/>
           <ButtonText className='font-medium text-sm'>Please wait...</ButtonText>
         </Button>
       `,
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Button, ButtonText, Wrapper, ButtonSpinner },
+      scope: { Button, ButtonText, Wrapper, ButtonSpinner, colors },
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Icon Button
 
 A button with an icon integrates a visual symbol within the button component, enhancing its appearance and providing a recognizable and intuitive representation of its associated action or functionality.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -504,13 +506,13 @@ A button with an icon integrates a visual symbol within the button component, en
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Link Button
 
 A button with a link combines the interactive behavior of a button component with the ability to navigate to a specified URL, providing a clickable element for users to access external resources or internal pages.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -527,23 +529,17 @@ A button with a link combines the interactive behavior of a button component wit
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, ArrowUpIcon 
-      },
-
-      argsType:
-       {},
-
+      scope: { Button, ButtonText, ButtonIcon, Wrapper, ArrowUpIcon },
+      argsType: {},
     }}
-
   />
-
-</AppProvider>
+</Wrapper>
 
 #### Button With Icon
 
 The icon component incorporates a button component, combining visual representation with interactive functionality for seamless user interaction.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -567,13 +563,13 @@ The icon component incorporates a button component, combining visual representat
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Button with Full Width
 
 The button with full width component utilizes a button component, expanding its width to occupy the entire available space, creating a visually prominent and easily accessible interface element.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -651,4 +647,4 @@ The button with full width component utilizes a button component, expanding its
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Button/index.stories.mdx b/example/storybook-nativewind/src/components/Button/index.stories.mdx
index b651cb48e9..5f7fb4b21d 100644
--- a/example/storybook-nativewind/src/components/Button/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.stories.mdx
@@ -117,7 +117,7 @@ This section provides a comprehensive reference list for the component props, de
 
 Contains all button related layout style props and actions. It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -204,7 +204,7 @@ Contains all button related layout style props and actions. It inherits all the
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### ButtonText
 
@@ -214,7 +214,7 @@ Contains all text related layout style props and actions. It inherits all the pr
 
 Contains all group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -323,7 +323,7 @@ Contains all group related layout style props and actions. It inherits all the p
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### ButtonSpinner
 
@@ -366,7 +366,7 @@ The Examples section provides visual representations of the different variants o
 
 A loading button is a type of button component that provides visual feedback to the user during an action that takes some time to complete. It typically displays an animated loading icon or spinner indicating the action is in progress.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -384,13 +384,13 @@ A loading button is a type of button component that provides visual feedback to
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Icon Button
 
 A button with an icon integrates a visual symbol within the button component, enhancing its appearance and providing a recognizable and intuitive representation of its associated action or functionality.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -408,13 +408,13 @@ A button with an icon integrates a visual symbol within the button component, en
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Link Button
 
 A button with a link combines the interactive behavior of a button component with the ability to navigate to a specified URL, providing a clickable element for users to access external resources or internal pages.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -434,13 +434,13 @@ A button with a link combines the interactive behavior of a button component wit
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Button Group in a Card
 
 A button group within a card component incorporates multiple button components, providing a cohesive and organized interface for selecting various actions or options within the context of the card.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -495,13 +495,13 @@ A button group within a card component incorporates multiple button components,
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Button With Icon
 
 The icon component incorporates a button component, combining visual representation with interactive functionality for seamless user interaction.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -535,13 +535,13 @@ The icon component incorporates a button component, combining visual representat
     }}
 />
 
-</AppProvider>
+</Wrapper>
 
 #### Button with Full Width
 
 The button with full width component utilizes a button component, expanding its width to occupy the entire available space, creating a visually prominent and easily accessible interface element.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -619,13 +619,13 @@ The button with full width component utilizes a button component, expanding its
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Custom Button
 
 The custom button component leverages the functionality of a button component while offering additional customization options to tailor its appearance and behavior according to specific design requirements.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -656,7 +656,7 @@ The custom button component leverages the functionality of a button component wh
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 ## gluestack-style
 
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 93914eb623..55299a9067 100644
--- a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx
@@ -14,21 +14,28 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Forms/Button" />
 
-import { Button, ButtonText, ButtonIcon, 
-  Icon,
-  ArrowUpIcon,
-  InfoIcon,
+import { 
+  Button, 
+  ButtonText, 
+  ButtonIcon, 
+  ButtonSpinner,
+  ButtonGroup,
   AddIcon,
-  Box,
+  InfoIcon, 
+  Icon, 
+  EditIcon, 
+  ArrowUpIcon, 
+  Heading, 
+  Text, 
+  Input, 
+  InputField, 
+  Box, 
+  HStack, 
   VStack,
-  Heading,
-  Text,
-  Input,
-  InputField,
-  Center,
-  ArrowLeftIcon,
-  ButtonSpinner,
-  EditIcon } from '../../core-components/themed';
+  ThreeDotsIcon, 
+  ArrowLeftIcon, 
+  Center
+} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -36,10 +43,10 @@ import {
   Table,
   TableContainer,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
 
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Button** component.
 
@@ -690,3 +697,306 @@ Explore the comprehensive details of the Button in this document, including its
   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%3D6248%253A27466%26type%3Ddesign%26node-id%3D6248-29746%26viewport%3D1013%252C181%252C0.06%26t%3Dl4eX0kWZTIN7qURx-1%26scaling%3Dcontain%26starting-point-node-id%3D6248%253A29746%26mode%3Ddesign"
   allowFullScreen
 /> -->
+
+
+
+### 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.
+
+#### Button with Loading State
+
+A loading button is a type of button component that provides visual feedback to the user during an action that takes some time to complete. It typically displays an animated loading icon or spinner indicating the action is in progress.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Button isDisabled={true} bg='$darkBlue600' p='$3'>
+          <ButtonSpinner mr='$1'/>
+          <ButtonText fontWeight='$medium' fontSize='$sm'>Please wait...</ButtonText>
+        </Button>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Button, ButtonText, ButtonIcon, Wrapper, ButtonSpinner },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Icon Button
+
+A button with an icon integrates a visual symbol within the button component, enhancing its appearance and providing a recognizable and intuitive representation of its associated action or functionality.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Button borderRadius='$full' size='lg' p='$3.5' bg='$indigo600' borderColor='$indigo600' >
+          {\/* EditIcon is imported from 'lucide-react-native' *\/}
+          <ButtonIcon as={EditIcon}/>
+        </Button>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, EditIcon },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Link Button
+
+A button with a link combines the interactive behavior of a button component with the ability to navigate to a specified URL, providing a clickable element for users to access external resources or internal pages.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Button variant='link'>
+          <ButtonText fontWeight='$medium' fontSize='$sm' color='$textLight900' $dark-color="$textDark300">
+            Back to top
+          </ButtonText>
+          <ButtonIcon as={ArrowUpIcon} h='$3' w='$3' color='$backgroundLight900' ml='$1' $dark-color="$backgroundDark300"/>
+        </Button>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, ArrowUpIcon },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Button Group in a Card
+
+A button group within a card component incorporates multiple button components, providing a cohesive and organized interface for selecting various actions or options within the context of the card.
+
+<Wrapper>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack  p='$12'  alignItems='center'  borderColor='$backgroundLight300'
+          borderWidth={1} borderRadius="$lg" $dark-borderColor="$backgroundDark700">
+          <Box maxWidth='$64' mr='$9'>
+            <Heading mb='$1.5' >
+              Was this page helpful?
+            </Heading>
+            <Text fontSize='$sm' >
+              We use this feedback to improve the quality of our documentation.
+            </Text>
+          </Box>
+          <ButtonGroup space='md'>
+            <Button variant='outline' py='$2.5' action="secondary">
+              <ButtonText  fontSize='$sm' fontWeight='$medium'
+              >
+                No
+              </ButtonText>
+            </Button>
+            <Button
+              variant='solid'
+              bg='$success700'
+              borderColor='$success700'
+              $hover-bg='$success800'
+              $active-bg='$success700'
+            >
+              <ButtonText  fontSize='$sm' fontWeight='$medium'>
+                Yes
+              </ButtonText>
+            </Button>
+          </ButtonGroup>
+        </HStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Button,
+        ButtonText,
+        ButtonIcon,
+        ButtonGroup,
+        Wrapper,
+        Box,
+        Heading,
+        Text,
+        HStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Button With Icon
+
+The icon component incorporates a button component, combining visual representation with interactive functionality for seamless user interaction.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Box>
+          <Button>
+          <ButtonIcon as={InfoIcon} mr="$2"/>
+            <ButtonText>Left Icon</ButtonText>
+          </Button>
+          <Button variant="solid" mt="$2">
+          <ButtonText>Right Icon</ButtonText>
+              <ButtonIcon as={AddIcon} ml="$2"/>
+          </Button>
+        </Box>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Button,
+        ButtonText,
+        ButtonIcon,
+        Wrapper,
+        Icon,
+        InfoIcon,
+        AddIcon,
+        Box,
+      },
+      argsType: {},
+    }}
+/>
+
+</Wrapper>
+
+#### Button with Full Width
+
+The button with full width component utilizes a button component, expanding its width to occupy the entire available space, creating a visually prominent and easily accessible interface element.
+
+<Wrapper>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Center>
+          <Box p='$5' maxWidth='$96' borderWidth='$1' borderColor='$backgroundLight300' borderRadius='$lg' $dark-borderColor="$backgroundDark700">
+            <VStack space='xs' pb='$4'>
+              <Heading lineHeight={30}>
+                Set new password
+              </Heading>
+              <Text fontSize='$sm'>
+                Almost done. Enter your new password and you are all set.
+              </Text>
+            </VStack>
+            <VStack space='xl' py='$2'>
+              <Input>
+                <InputField
+                  py='$2'
+                  placeholder="New password"
+                />
+              </Input>
+              <Input>
+                <InputField
+                  py='$2'
+                  placeholder="Confirm new password"
+                />
+              </Input>
+            </VStack>
+            <VStack space='lg' pt='$4'>
+              <Button
+                size='sm'
+              >
+                <ButtonText>
+                  Submit
+                </ButtonText>
+              </Button>
+              <Box flexDirection='row'>
+                <Button variant='link' p='$0' size='sm'>
+                  {\/* ArrowLeftIcon is imported from 'lucide-react-native' *\/}
+                  <Icon
+                    size='md'
+                    mr='$1'
+                    as={ArrowLeftIcon}
+                  />
+                  <ButtonText
+                  >
+                    Back to login
+                  </ButtonText>
+                </Button>
+              </Box>
+            </VStack>
+          </Box>
+        </Center>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Button,
+        ButtonText,
+        ButtonIcon,
+        Wrapper,
+        VStack,
+        Box,
+        Heading,
+        Text,
+        Input,
+        InputField,
+        Icon,
+        Center,
+        ArrowLeftIcon,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Custom Button
+
+The custom button component leverages the functionality of a button component while offering additional customization options to tailor its appearance and behavior according to specific design requirements.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <ButtonGroup isAttached>
+          <Button variant="outline" size='xs' borderColor='$backgroundLight300' borderRightWidth='$0' $dark-borderColor="$backgroundDark700">
+            <ButtonText color='$textLight900' $dark-color="$textDark300">
+              Export
+            </ButtonText>
+          </Button>
+          <Button variant="outline" size='xs' borderColor='$backgroundLight300' $dark-borderColor="$backgroundDark70">
+            <ButtonIcon as={ThreeDotsIcon} color="$textLight900" $dark-color="$textDark300"/>
+          </Button>
+        </ButtonGroup>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Button,
+        ButtonText,
+        ButtonIcon,
+        ButtonGroup,
+        Wrapper,
+        ThreeDotsIcon,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
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 c37124f5e2..792645fb0e 100644
--- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
@@ -42,20 +42,19 @@ import {
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
 
-import { config } from '@gluestack-ui/config';
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of a **Card** component.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
       code: `
-    <Card {...props} m="$3">
-      <Heading mb="$1" size="md">
+    <Card {...props} className="m-3">
+      <Heading size="md" className="mb-1">
         Quick Start
       </Heading>
       <Text size="sm">Start building your next project in minutes</Text>
@@ -84,7 +83,7 @@ This is an illustration of a **Card** component.
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 <br />
 
@@ -130,7 +129,7 @@ This section provides a comprehensive reference list for the component props, de
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -176,9 +175,8 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</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.
@@ -187,7 +185,7 @@ The Examples section provides visual representations of the different variants o
 
 This is an example of a Card component with an image.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -195,54 +193,33 @@ This is an example of a Card component with an image.
       code: `
 function App(){
     return (
-      <Card p="$5" borderRadius="$lg" maxWidth={360} m="$3">
-          <Image
-        mb="$6"
-        h={240}
-        width="$full"
-        borderRadius="$md"
+      <Card className="p-5 rounded-lg max-w-[360px] m-3">
+        <Image
         source={{
           uri: 'https://images.unsplash.com/photo-1529693662653-9d480530a697?q=80&w=2831&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         }}
+        className="mb-6 h-[240px] w-full rounded-md"
       />
       <Text
-        fontSize="$sm"
-        fontStyle="normal"
-        fontFamily="$heading"
-        fontWeight="$normal"
-        lineHeight="$sm"
-        mb="$2"
-        sx={{
-          color: '$textLight700',
-          _dark: {
-            color: '$textDark200',
-          },
-        }}
+        className="text-sm font-normal mb-2 text-typography-700"
       >
         May 15, 2023
       </Text>
-      <Heading size="md" fontFamily="$heading" mb="$4">
+      <Heading size="md" className="mb-4">
         The Power of Positive Thinking
       </Heading>
       <Link href="https://gluestack.io/" isExternal>
-        <HStack alignItems="center">
+        <HStack className="items-center">
           <LinkText
             size="sm"
-            fontFamily="$heading"
-            fontWeight="$semibold"
-            color="$primary600"
-            $dark-color="$primary300"
-            textDecorationLine="none"
+            className="font-semibold text-info-600 no-underline"
           >
             Read Blog
           </LinkText>
           <Icon
             as={ArrowRightIcon}
             size="sm"
-            color="$primary600"
-            mt="$0.5"
-            ml="$0.5"
-            $dark-color="$primary300"
+            className="text-info-600 mt-0.5 ml-0.5"
           />
         </HStack>
       </Link>
@@ -268,13 +245,13 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ### Advanced Composition
 
 This is an example of a Card component with other components like Avatar, Image and Button.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -282,10 +259,10 @@ This is an example of a Card component with other components like Avatar, Image
       code: `
 function App(){
     return (
-    <Card p="$6" borderRadius="$lg" maxWidth={360} m="$3">
-      <Box flexDirection="row">
-        <Avatar mr="$4">
-          <AvatarFallbackText fontFamily="$heading">JD</AvatarFallbackText>
+    <Card className="p-6 rounded-lg max-w-[360px] m-3">
+      <Box className="flex-row">
+        <Avatar className="mr-4">
+          <AvatarFallbackText>JD</AvatarFallbackText>
           <AvatarImage
             source={{
               uri: 'https://images.unsplash.com/photo-1620403724159-40363e84a155?q=80&w=2646&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
@@ -293,153 +270,67 @@ function App(){
           />
         </Avatar>
         <VStack>
-          <Heading size="md" fontFamily="$heading" mb="$1">
+          <Heading size="md" className="mb-1">
             Jane Doe
           </Heading>
-          <Text size="sm" fontFamily="$heading">
+          <Text size="sm">
             janedoe@sample.com
           </Text>
         </VStack>
       </Box>
       <Box
-        my="$5"
-        sx={{
-          'flexDirection': 'column',
-          '@sm': {
-            my: '$6',
-            flexDirection: 'row',
-          },
-        }}
+        className="my-5 flex-col sm:flex-row"
       >
         <VStack
-          alignItems="center"
-          sx={{
-            'pb': '$2',
-            '@sm': {
-              flex: 1,
-              pb: '$0',
-              borderRightWidth: 1,
-              borderColor: '$backgroundLight300',
-              _dark: {
-                borderRightColor: '$backgroundDark800',
-              },
-            },
-          }}
+          className="items-center pb-2 sm:flex-1 sm:pb-0 sm:border-r sm:border-outline-300"
         >
-          <Heading size="xs" fontFamily="$heading">
+          <Heading size="xs">
             81
           </Heading>
           <Text size="xs">posts</Text>
         </VStack>
         <Divider
           orientation="horizontal"
-          width="40%"
-          alignSelf="center"
-          sx={{
-            'bg': '$backgroundLight300',
-            'display': 'flex',
-            '_dark': {
-              bg: '$backgroundDark800',
-            },
-            '@sm': {
-              display: 'none',
-            },
-          }}
+          className="w-[40%] self-center bg-background-300 flex sm:hidden"
         />
         <VStack
-          alignItems="center"
-          sx={{
-            'py': '$2',
-            '@sm': {
-              flex: 1,
-              py: '$0',
-              borderRightWidth: 1,
-              borderColor: '$backgroundLight300',
-              _dark: {
-                borderRightColor: '$backgroundDark800',
-              },
-            },
-          }}
+          className="items-center py-2 sm:flex-1 sm:py-0 sm:border-r sm:border-outline-300"
         >
-          <Heading size="xs" fontFamily="$heading">
+          <Heading size="xs">
             5,281
           </Heading>
           <Text size="xs">followers</Text>
         </VStack>
         <Divider
           orientation="horizontal"
-          width="40%"
-          alignSelf="center"
-          sx={{
-            'bg': '$backgroundLight300',
-            'display': 'flex',
-            '_dark': {
-              bg: '$backgroundDark800',
-            },
-            '@sm': {
-              display: 'none',
-            },
-          }}
+          className="w-[40%] self-center bg-background-300 flex sm:hidden"
         />
         <VStack
-          alignItems="center"
-          sx={{
-            'pt': '$2',
-            '@sm': {
-              flex: 1,
-              pt: '$0',
-            },
-          }}
+          className="items-center pt-2 sm:flex-1 sm:pt-0"
         >
-          <Heading size="xs" fontFamily="$heading">
+          <Heading size="xs">
             281
           </Heading>
           <Text size="xs">following</Text>
         </VStack>
       </Box>
       <Box
-        mb="$5"
-        sx={{
-          'flexDirection': 'column',
-          '@sm': {
-            mb: '$6',
-            flexDirection: 'row',
-          },
-        }}
+        className="mb-5 flex-col sm:mb-6 sm:flex-row"
       >
         <Image
-          mb="$3"
-          borderRadius="$md"
-          sx={{
-            'width': '$full',
-            'height': 140,
-            '@sm': {
-              mb: '$0',
-              mr: '$3',
-              width: 150,
-              height: 154,
-            },
-          }}
           source={{
             uri: 'https://images.unsplash.com/photo-1592089416462-2b0cb7da8379?q=80&w=2865&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
           }}
+          className="mb-3 rounded-md w-full h-[140px] sm:mb-0 sm:mr-3 sm:w-[150px] sm:h-[154px]"
         />
         <Image
-          borderRadius="$md"
-          sx={{
-            'width': '$full',
-            'height': 140,
-            '@sm': {
-              width: 150,
-              height: 154,
-            },
-          }}
           source={{
             uri: 'https://images.unsplash.com/photo-1484406566174-9da000fda645?q=80&w=2425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
           }}
+          className="rounded-md w-full h-[140px] sm:w-[150px] sm:h-[154px]"
         />
       </Box>
-      <Button py="$2" px="$4">
+      <Button className="py-2 px-4">
         <ButtonText size="sm">Follow</ButtonText>
       </Button>
     </Card>
@@ -467,13 +358,13 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ### Product Card
 
 This example illustrates a card showcasing a product.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -481,82 +372,42 @@ This example illustrates a card showcasing a product.
       code: `
 function App(){
     return (
-    <Card p="$5" borderRadius="$lg" maxWidth={360} m="$3">
+    <Card className="p-5 rounded-lg max-w-[360px] m-3">
       <Image
-        mb="$6"
-        h={240}
-        width="$full"
-        borderRadius="$md"
         source={{
           uri: 'https://images.unsplash.com/photo-1595231712325-9fedecef7575?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D',
         }}
+        className="mb-6 h-[240px] w-full rounded-md"
       />
       <Text
-        fontSize="$sm"
-        fontStyle="normal"
-        fontFamily="$heading"
-        fontWeight="$normal"
-        lineHeight="$sm"
-        mb="$2"
-        sx={{
-          color: '$textLight700',
-          _dark: {
-            color: '$textDark200',
-          },
-        }}
+        className="text-sm font-normal mb-2 text-typography-700"
       >
         Fashion Clothing
       </Text>
-      <VStack mb="$6">
-        <Heading size="md" fontFamily="$heading" mb="$4">
+      <VStack className="mb-6">
+        <Heading size="md" className="mb-4">
           Cotton Kurta
         </Heading>
-        <Text size="sm" fontFamily="$heading">
+        <Text size="sm">
           Floral embroidered notch neck thread work cotton kurta in white and
           black.
         </Text>
       </VStack>
       <Box
-        flexDirection="column"
-        sx={{
-          '@sm': {
-            flexDirection: 'row',
-          },
-        }}
+        className="flex-col sm:flex-row"
       >
         <Button
-          px="$4"
-          py="$2"
-          fontFamily="$heading"
-          mr="$0"
-          mb="$3"
-          sx={{
-            '@sm': {
-              mr: '$3',
-              mb: '$0',
-              flex: 1,
-            },
-          }}
+          className="px-4 py-2 mr-0 mb-3 sm:mr-3 sm:mb-0 sm:flex-1"
         >
           <ButtonText size="sm">Add to cart</ButtonText>
         </Button>
         <Button
-          px="$4"
-          py="$2"
           variant="outline"
-          fontFamily="$heading"
-          borderColor="$borderLight300"
-          $dark-borderColor="$backgroundDark600"
-          sx={{
-            '@sm': {
-              flex: 1,
-            },
-          }}
+          className="px-4 py-2 border-outline-300 sm:flex-1"
         >
           <ButtonText
             size="sm"
-            color="$textLight600"
-            $dark-color="$textDark400"
+            className="text-typography-600"
           >
             Wishlist
           </ButtonText>
@@ -583,13 +434,13 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ### Blog Card
 
 This is an example of a Card component with a blog post.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -597,37 +448,26 @@ This is an example of a Card component with a blog post.
       code: `
 function App(){
     return (
-    <Card p="$5" borderRadius="$lg" maxWidth={360} m="$3">
-      <Text
-        fontSize="$sm"
-        fontStyle="normal"
-        fontFamily="$heading"
-        fontWeight="$normal"
-        lineHeight="$sm"
-        mb="$2"
-        sx={{
-          color: '$textLight700',
-          _dark: {
-            color: '$textDark200',
-          },
-        }}
+    <Card className="p-5 rounded-lg max-w-[360px] m-3"
+    >
+      <Text className="text-sm font-normal mb-2 text-typography-700"
       >
         May 15, 2023
       </Text>
-      <VStack mb="$6">
-        <Heading size="md" fontFamily="$heading" mb="$4">
+      <VStack className="mb-6">
+        <Heading size="md" className="mb-4">
           The Power of Positive Thinking
         </Heading>
-        <Text size="sm" fontFamily="$heading">
+        <Text size="sm">
           Discover how the power of positive thinking can transform your life,
           boost your confidence, and help you overcome challenges. Explore
           practical tips and techniques to cultivate a positive mindset for
           greater happiness and success.
         </Text>
       </VStack>
-      <Box flexDirection="row">
-        <Avatar mr="$3">
-          <AvatarFallbackText fontFamily="$heading">RR</AvatarFallbackText>
+      <Box className="flex-row">
+        <Avatar className="mr-3">
+          <AvatarFallbackText>RR</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',
@@ -635,10 +475,10 @@ function App(){
           />
         </Avatar>
         <VStack>
-          <Heading size="sm" fontFamily="$heading" mb="$1">
+          <Heading size="sm" className="mb-1">
             John Smith
           </Heading>
-          <Text size="sm" fontFamily="$heading">
+          <Text size="sm">
             Motivational Speaker
           </Text>
         </VStack>
@@ -667,5 +507,4 @@ Wrapper,
 }}
 />
 
-</AppProvider>
--->
+</Wrapper>
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/components/Card/index.stories.mdx b/example/storybook-nativewind/src/components/Card/index.stories.mdx
index ec8878fc85..a559f3b085 100644
--- a/example/storybook-nativewind/src/components/Card/index.stories.mdx
+++ b/example/storybook-nativewind/src/components/Card/index.stories.mdx
@@ -48,7 +48,7 @@ import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of a **Themed Card** component with default configuration.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={true}
@@ -84,7 +84,7 @@ This is an illustration of a **Themed Card** component with default configuratio
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 <br />
 
@@ -132,7 +132,7 @@ This section provides a comprehensive reference list for the component props, de
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -178,7 +178,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 ## Themed
 
@@ -192,7 +192,7 @@ The Examples section provides visual representations of the different variants o
 
 This is an example of a Card component with an image.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -273,13 +273,13 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ### Advanced Composition
 
 This is an example of a Card component with other components like Avatar, Image and Button.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -472,13 +472,13 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ### Product Card
 
 This example illustrates a card showcasing a product.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -588,13 +588,13 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ### Blog Card
 
 This is an example of a Card component with a blog post.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -672,7 +672,7 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ## gluestack-style
 
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 e484337d62..eb03aa2e22 100644
--- a/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx
@@ -39,27 +39,26 @@ import {
   Table,
   TableContainer,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-
 import { config } from '@gluestack-ui/config';
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of a **Card** component.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
       code: `
-    <Card {...props} m="$3">
-      <Heading mb="$1" size="md">
-        Quick Start
-      </Heading>
-      <Text size="sm">Start building your next project in minutes</Text>
-    </Card>
+      <Card {...props} m="$3">
+        <Heading mb="$1" size="md">
+          Quick Start
+        </Heading>
+        <Text size="sm">Start building your next project in minutes</Text>
+      </Card>
       `,
       transformCode: (code) => {
         return transformedCode(code);
@@ -84,7 +83,7 @@ This is an illustration of a **Card** component.
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 <br />
 
@@ -130,7 +129,7 @@ This section provides a comprehensive reference list for the component props, de
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -176,7 +175,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 <!--
 ## Examples
@@ -187,7 +186,7 @@ The Examples section provides visual representations of the different variants o
 
 This is an example of a Card component with an image.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -268,13 +267,13 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ### Advanced Composition
 
 This is an example of a Card component with other components like Avatar, Image and Button.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -467,13 +466,13 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ### Product Card
 
 This example illustrates a card showcasing a product.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -583,13 +582,13 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</Wrapper>
 
 ### Blog Card
 
 This is an example of a Card component with a blog post.
 
-<AppProvider config={config}>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -667,5 +666,495 @@ Wrapper,
 }}
 />
 
-</AppProvider>
+</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.
+
+### Card with Image
+
+This is an example of a Card component with an image.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+    return (
+      <Card p="$5" borderRadius="$lg" maxWidth={360} m="$3">
+          <Image
+        mb="$6"
+        h={240}
+        width="$full"
+        borderRadius="$md"
+        source={{
+          uri: 'https://images.unsplash.com/photo-1529693662653-9d480530a697?q=80&w=2831&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        }}
+      />
+      <Text
+        fontSize="$sm"
+        fontStyle="normal"
+        fontFamily="$heading"
+        fontWeight="$normal"
+        lineHeight="$sm"
+        mb="$2"
+        sx={{
+          color: '$textLight700',
+          _dark: {
+            color: '$textDark200',
+          },
+        }}
+      >
+        May 15, 2023
+      </Text>
+      <Heading size="md" fontFamily="$heading" mb="$4">
+        The Power of Positive Thinking
+      </Heading>
+      <Link href="https://gluestack.io/" isExternal>
+        <HStack alignItems="center">
+          <LinkText
+            size="sm"
+            fontFamily="$heading"
+            fontWeight="$semibold"
+            color="$primary600"
+            $dark-color="$primary300"
+            textDecorationLine="none"
+          >
+            Read Blog
+          </LinkText>
+          <Icon
+            as={ArrowRightIcon}
+            size="sm"
+            color="$primary600"
+            mt="$0.5"
+            ml="$0.5"
+            $dark-color="$primary300"
+          />
+        </HStack>
+      </Link>
+    </Card>
+);
+}
+`,
+transformCode: (code) => {
+return transformedCode(code, 'function', 'App');
+},
+scope: {
+Card,
+Text,
+Image,
+Heading,
+Link,
+LinkText,
+HStack,
+Icon,
+ArrowRightIcon,
+Wrapper,
+},
+}}
+/>
+
+</Wrapper>
+
+### Advanced Composition
+
+This is an example of a Card component with other components like Avatar, Image and Button.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+    return (
+    <Card p="$6" borderRadius="$lg" maxWidth={360} m="$3">
+      <Box flexDirection="row">
+        <Avatar mr="$4">
+          <AvatarFallbackText fontFamily="$heading">JD</AvatarFallbackText>
+          <AvatarImage
+            source={{
+              uri: 'https://images.unsplash.com/photo-1620403724159-40363e84a155?q=80&w=2646&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+            }}
+          />
+        </Avatar>
+        <VStack>
+          <Heading size="md" fontFamily="$heading" mb="$1">
+            Jane Doe
+          </Heading>
+          <Text size="sm" fontFamily="$heading">
+            janedoe@sample.com
+          </Text>
+        </VStack>
+      </Box>
+      <Box
+        my="$5"
+        sx={{
+          'flexDirection': 'column',
+          '@sm': {
+            my: '$6',
+            flexDirection: 'row',
+          },
+        }}
+      >
+        <VStack
+          alignItems="center"
+          sx={{
+            'pb': '$2',
+            '@sm': {
+              flex: 1,
+              pb: '$0',
+              borderRightWidth: 1,
+              borderColor: '$backgroundLight300',
+              _dark: {
+                borderRightColor: '$backgroundDark800',
+              },
+            },
+          }}
+        >
+          <Heading size="xs" fontFamily="$heading">
+            81
+          </Heading>
+          <Text size="xs">posts</Text>
+        </VStack>
+        <Divider
+          orientation="horizontal"
+          width="40%"
+          alignSelf="center"
+          sx={{
+            'bg': '$backgroundLight300',
+            'display': 'flex',
+            '_dark': {
+              bg: '$backgroundDark800',
+            },
+            '@sm': {
+              display: 'none',
+            },
+          }}
+        />
+        <VStack
+          alignItems="center"
+          sx={{
+            'py': '$2',
+            '@sm': {
+              flex: 1,
+              py: '$0',
+              borderRightWidth: 1,
+              borderColor: '$backgroundLight300',
+              _dark: {
+                borderRightColor: '$backgroundDark800',
+              },
+            },
+          }}
+        >
+          <Heading size="xs" fontFamily="$heading">
+            5,281
+          </Heading>
+          <Text size="xs">followers</Text>
+        </VStack>
+        <Divider
+          orientation="horizontal"
+          width="40%"
+          alignSelf="center"
+          sx={{
+            'bg': '$backgroundLight300',
+            'display': 'flex',
+            '_dark': {
+              bg: '$backgroundDark800',
+            },
+            '@sm': {
+              display: 'none',
+            },
+          }}
+        />
+        <VStack
+          alignItems="center"
+          sx={{
+            'pt': '$2',
+            '@sm': {
+              flex: 1,
+              pt: '$0',
+            },
+          }}
+        >
+          <Heading size="xs" fontFamily="$heading">
+            281
+          </Heading>
+          <Text size="xs">following</Text>
+        </VStack>
+      </Box>
+      <Box
+        mb="$5"
+        sx={{
+          'flexDirection': 'column',
+          '@sm': {
+            mb: '$6',
+            flexDirection: 'row',
+          },
+        }}
+      >
+        <Image
+          mb="$3"
+          borderRadius="$md"
+          sx={{
+            'width': '$full',
+            'height': 140,
+            '@sm': {
+              mb: '$0',
+              mr: '$3',
+              width: 150,
+              height: 154,
+            },
+          }}
+          source={{
+            uri: 'https://images.unsplash.com/photo-1592089416462-2b0cb7da8379?q=80&w=2865&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          }}
+        />
+        <Image
+          borderRadius="$md"
+          sx={{
+            'width': '$full',
+            'height': 140,
+            '@sm': {
+              width: 150,
+              height: 154,
+            },
+          }}
+          source={{
+            uri: 'https://images.unsplash.com/photo-1484406566174-9da000fda645?q=80&w=2425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          }}
+        />
+      </Box>
+      <Button py="$2" px="$4">
+        <ButtonText size="sm">Follow</ButtonText>
+      </Button>
+    </Card>
+);
+}
+`,
+transformCode: (code) => {
+return transformedCode(code, 'function', 'App');
+},
+scope: {
+Card,
+Box,
+Avatar,
+AvatarFallbackText,
+AvatarImage,
+VStack,
+Divider,
+Button,
+ButtonText,
+Text,
+Image,
+Heading,
+Wrapper,
+},
+}}
+/>
+
+</Wrapper>
+
+### Product Card
+
+This example illustrates a card showcasing a product.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+    return (
+    <Card p="$5" borderRadius="$lg" maxWidth={360} m="$3">
+      <Image
+        mb="$6"
+        h={240}
+        width="$full"
+        borderRadius="$md"
+        source={{
+          uri: 'https://images.unsplash.com/photo-1595231712325-9fedecef7575?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D',
+        }}
+      />
+      <Text
+        fontSize="$sm"
+        fontStyle="normal"
+        fontFamily="$heading"
+        fontWeight="$normal"
+        lineHeight="$sm"
+        mb="$2"
+        sx={{
+          color: '$textLight700',
+          _dark: {
+            color: '$textDark200',
+          },
+        }}
+      >
+        Fashion Clothing
+      </Text>
+      <VStack mb="$6">
+        <Heading size="md" fontFamily="$heading" mb="$4">
+          Cotton Kurta
+        </Heading>
+        <Text size="sm" fontFamily="$heading">
+          Floral embroidered notch neck thread work cotton kurta in white and
+          black.
+        </Text>
+      </VStack>
+      <Box
+        flexDirection="column"
+        sx={{
+          '@sm': {
+            flexDirection: 'row',
+          },
+        }}
+      >
+        <Button
+          px="$4"
+          py="$2"
+          fontFamily="$heading"
+          mr="$0"
+          mb="$3"
+          sx={{
+            '@sm': {
+              mr: '$3',
+              mb: '$0',
+              flex: 1,
+            },
+          }}
+        >
+          <ButtonText size="sm">Add to cart</ButtonText>
+        </Button>
+        <Button
+          px="$4"
+          py="$2"
+          variant="outline"
+          fontFamily="$heading"
+          borderColor="$borderLight300"
+          $dark-borderColor="$backgroundDark600"
+          sx={{
+            '@sm': {
+              flex: 1,
+            },
+          }}
+        >
+          <ButtonText
+            size="sm"
+            color="$textLight600"
+            $dark-color="$textDark400"
+          >
+            Wishlist
+          </ButtonText>
+        </Button>
+      </Box>
+    </Card>
+);
+}
+`,
+transformCode: (code) => {
+return transformedCode(code, 'function', 'App');
+},
+scope: {
+Card,
+Box,
+VStack,
+Button,
+ButtonText,
+Text,
+Image,
+Heading,
+Wrapper,
+},
+}}
+/>
+
+</Wrapper>
+
+### Blog Card
+
+This is an example of a Card component with a blog post.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+    return (
+    <Card p="$5" borderRadius="$lg" maxWidth={360} m="$3">
+      <Text
+        fontSize="$sm"
+        fontStyle="normal"
+        fontFamily="$heading"
+        fontWeight="$normal"
+        lineHeight="$sm"
+        mb="$2"
+        sx={{
+          color: '$textLight700',
+          _dark: {
+            color: '$textDark200',
+          },
+        }}
+      >
+        May 15, 2023
+      </Text>
+      <VStack mb="$6">
+        <Heading size="md" fontFamily="$heading" mb="$4">
+          The Power of Positive Thinking
+        </Heading>
+        <Text size="sm" fontFamily="$heading">
+          Discover how the power of positive thinking can transform your life,
+          boost your confidence, and help you overcome challenges. Explore
+          practical tips and techniques to cultivate a positive mindset for
+          greater happiness and success.
+        </Text>
+      </VStack>
+      <Box flexDirection="row">
+        <Avatar mr="$3">
+          <AvatarFallbackText fontFamily="$heading">RR</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" fontFamily="$heading" mb="$1">
+            John Smith
+          </Heading>
+          <Text size="sm" fontFamily="$heading">
+            Motivational Speaker
+          </Text>
+        </VStack>
+      </Box>
+    </Card>
+);
+}
+`,
+transformCode: (code) => {
+return transformedCode(code, 'function', 'App');
+},
+scope: {
+Card,
+Box,
+Avatar,
+AvatarFallbackText,
+AvatarImage,
+VStack,
+Button,
+ButtonText,
+Text,
+Image,
+Heading,
+Wrapper,
+},
+}}
+/>
+
+</Wrapper>
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 0d0bbcdd31..4f19829082 100644
--- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
@@ -86,18 +86,4 @@ This section provides a comprehensive reference list for the component props, de
 
 #### Center
 
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-## Spec Doc
-
-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',
-    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%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>
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
\ No newline at end of file
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 ab5ab27951..dbb1d0d6b6 100644
--- a/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx
@@ -87,17 +87,3 @@ This section provides a comprehensive reference list for the component props, de
 #### Center
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-## Spec Doc
-
-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',
-    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%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.stories.tsx b/example/storybook-nativewind/src/components/Checkbox/Checkbox.stories.tsx
index 199ae0f168..616a59c5ec 100644
--- a/example/storybook-nativewind/src/components/Checkbox/Checkbox.stories.tsx
+++ b/example/storybook-nativewind/src/components/Checkbox/Checkbox.stories.tsx
@@ -22,11 +22,16 @@ const CheckboxMeta: ComponentMeta<typeof Checkbox> = {
       control: 'boolean',
       options: [true, false],
     },
+    isFocusVisible: {
+      control: 'boolean',
+      options: [true, false],
+    },
   },
   args: {
     size: 'md',
     isDisabled: false,
     isInvalid: false,
+    isFocusVisible: false,
   },
 };
 
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 893439e22b..6947a2f3b7 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
@@ -46,7 +46,7 @@ import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Checkbox** component.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={true}
@@ -88,7 +88,7 @@ This is an illustration of **Checkbox** component.
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 <br />
 
@@ -143,7 +143,7 @@ This section provides a comprehensive reference list for the component props, de
 
 Contains all Checkbox related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -330,7 +330,7 @@ Contains all Checkbox related layout style props and actions. It inherits all th
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### CheckboxIndicator
 
@@ -348,7 +348,7 @@ Contains all Label related layout style props and actions. It inherits all the p
 
 Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -451,7 +451,7 @@ Contains all Group related layout style props and actions. It inherits all the p
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 ### Features
 
@@ -488,7 +488,7 @@ Checkbox component is created using Pressable component from react-native. It ex
 
 #### Checkbox
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -521,7 +521,7 @@ Checkbox component is created using Pressable component from react-native. It ex
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 > 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.
 
@@ -533,7 +533,7 @@ The Examples section provides visual representations of the different variants o
 
 Checkbox provide a mutually exclusive selection mechanism, allowing users to choose a multiple option from a set of related choices.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -588,13 +588,13 @@ Checkbox provide a mutually exclusive selection mechanism, allowing users to cho
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Horizontal
 
 A horizontal component incorporating a checkbox allows for intuitive and space-efficient selection of multiple options within a linear layout.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -648,13 +648,13 @@ A horizontal component incorporating a checkbox allows for intuitive and space-e
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### With help text
 
 A checkbox component with help text provides informative guidance alongside selectable options, ensuring clarity and ease of use.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -711,13 +711,13 @@ A checkbox component with help text provides informative guidance alongside sele
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control
 
 A checkbox component integrated with form control enhances the user experience by enabling easy selection and submission of options within a structured input context.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -769,13 +769,13 @@ A checkbox component integrated with form control enhances the user experience b
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Label left
 
 A checkbox component with Label left configuration aligns the label to the left, facilitating clear association between the option and its corresponding checkbox.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -830,13 +830,13 @@ A checkbox component with Label left configuration aligns the label to the left,
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Controlled
 
 A controlled component architecture incorporates a checkbox component, allowing for precise management of its state and behavior through explicit control mechanisms.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -885,13 +885,13 @@ A controlled component architecture incorporates a checkbox component, allowing
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Uncontrolled
 
 An uncontrolled component utilizes a checkbox component, providing a simpler implementation where the checkbox state is managed internally, without explicit control from external sources.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -942,13 +942,13 @@ function App() {
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Checkbox group
 
 The checkbox group component allows users to group checkbox and display them in a horizontal or vertical row for better visual representation and functionality.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -1003,4 +1003,4 @@ function CheckboxExample(){
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 5d02e583ce..8fed7fcb42 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx
@@ -14,23 +14,25 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Forms/Checkbox" />
 
+
 import {
   Checkbox,
   CheckboxGroup,
   CheckboxIndicator,
   CheckboxIcon,
   CheckboxLabel,
-} from '../../core-components/themed';
-import {
   Text,
   RemoveIcon,
   FormControl,
   Icon,
   CheckIcon,
+  Center, 
+  VStack,
+  HStack, 
+  Heading, 
+  Box
 } from '../../core-components/themed';
 import { useState, useRef } from 'react';
-import { Center, VStack } from '../../core-components/themed';
-import { HStack, Heading, Box } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 
 import {
@@ -39,14 +41,13 @@ import {
   Table,
   TableContainer,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Checkbox** component.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={true}
@@ -88,7 +89,7 @@ This is an illustration of **Checkbox** component.
       },
     }}
   />
-</AppProvider>
+</Wrapper>
 
 <br />
 
@@ -143,7 +144,7 @@ This section provides a comprehensive reference list for the component props, de
 
 Contains all Checkbox related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -330,12 +331,12 @@ Contains all Checkbox related layout style props and actions. It inherits all th
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 **Descendants Styling Props**
 Props to style child components.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -382,7 +383,7 @@ Props to style child components.
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### CheckboxIndicator
 
@@ -400,7 +401,7 @@ Contains all Label related layout style props and actions. It inherits all the p
 
 Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -503,7 +504,7 @@ Contains all Group related layout style props and actions. It inherits all the p
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 ### Features
 
@@ -540,7 +541,7 @@ Checkbox component is created using Pressable component from react-native. It ex
 
 #### Checkbox
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -573,18 +574,484 @@ Checkbox component is created using Pressable component from react-native. It ex
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</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.
+
+#### Multiple Checkbox
+
+Checkbox provide a mutually exclusive selection mechanism, allowing users to choose a multiple option from a set of related choices.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App(){
+            const [values, setValues] = useState(["Eng"]);
+           return (
+            <CheckboxGroup value={values}  onChange={(keys) => {
+        setValues(keys)
+      }}>
+                <VStack space="3xl">
+                  <Checkbox   value="Eng">
+                        <CheckboxIndicator mr="$2">
+                          <CheckboxIcon as={CheckIcon}/>
+                        </CheckboxIndicator>
+                        <CheckboxLabel>Framer</CheckboxLabel>
+                  </Checkbox>
+                  <Checkbox value="invison">
+                      <CheckboxIndicator mr="$2">
+                        <CheckboxIcon as={CheckIcon}/>
+                      </CheckboxIndicator>
+                      <CheckboxLabel>Invision Studio</CheckboxLabel>
+                  </Checkbox>
+                  <Checkbox  value="adobe">
+                    <CheckboxIndicator mr="$2">
+                      <CheckboxIcon as={CheckIcon}/>
+                    </CheckboxIndicator>
+                    <CheckboxLabel>Adobe XD</CheckboxLabel>
+                  </Checkbox>
+              </VStack>
+              </CheckboxGroup>
+           )
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Checkbox,
+        CheckboxGroup,
+        CheckboxIndicator,
+        CheckboxIcon,
+        CheckboxLabel,
+        Wrapper,
+        Center,
+        CheckIcon,
+        Icon,
+        VStack,
+        useState,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Horizontal
+
+A horizontal component incorporating a checkbox allows for intuitive and space-efficient selection of multiple options within a linear layout.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+          function App(){
+             const [values, setValues] = useState(["Illustration"]);
+           return (
+             <CheckboxGroup value={values}  onChange={(keys) => {
+        setValues(keys)
+      }}>
+                <HStack space="2xl">
+                  <Checkbox value="Illustration">
+                    <CheckboxIndicator mr="$2">
+                      <CheckboxIcon as={CheckIcon}/>
+                    </CheckboxIndicator>
+                    <CheckboxLabel>Illustration</CheckboxLabel>
+                  </Checkbox>
+                  <Checkbox value="Animation">
+                    <CheckboxIndicator  mr="$2">
+                      <CheckboxIcon as={CheckIcon}/>
+                    </CheckboxIndicator>
+                    <CheckboxLabel>Animation</CheckboxLabel>
+                  </Checkbox>
+                  <Checkbox value="Typography">
+                    <CheckboxIndicator mr="$2">
+                      <CheckboxIcon as={CheckIcon}/>
+                    </CheckboxIndicator>
+                    <CheckboxLabel>Typography</CheckboxLabel>
+                  </Checkbox>
+               </HStack>
+                 </CheckboxGroup>
+           )
+        }
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        CheckIcon,
+        Icon,
+        Checkbox,
+        CheckboxGroup,
+        CheckboxIndicator,
+        CheckboxIcon,
+        CheckboxLabel,
+        HStack,
+        useState,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
 
-## Spec Doc
+#### With help text
 
-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.
+A checkbox component with help text provides informative guidance alongside selectable options, ensuring clarity and ease of use.
 
-<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%3D5428%253A25548%26type%3Ddesign%26node-id%3D5428-28718%26viewport%3D627%252C354%252C0.02%26t%3D1lG3EDrkr8YATBXs-1%26scaling%3Dscale-down%26starting-point-node-id%3D5428%253A28718%26mode%3Ddesign"
-  allowfullscreen
-></iframe>
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App(){
+             const [values, setValues] = useState(["Design"]);
+           return (
+             <CheckboxGroup value={values}  onChange={(keys) => {
+        setValues(keys)
+      }}>
+               <VStack space="2xl">
+            <Box>
+              <Checkbox value="Design">
+                <CheckboxIndicator mr="$2">
+                   <CheckboxIcon as={CheckIcon}/>
+                </CheckboxIndicator>
+                <CheckboxLabel >Design</CheckboxLabel>
+              </Checkbox>
+              <Text size="sm" ml="$7" >Subscribe to updates from the Design Feed</Text>
+            </Box>
+            <Box>
+              <Checkbox value="Marketing">
+                <CheckboxIndicator mr="$2">
+                  <CheckboxIcon as={CheckIcon}/>
+                </CheckboxIndicator>
+                <CheckboxLabel>Marketing</CheckboxLabel>
+              </Checkbox>
+              <Text size="sm" ml="$7" >Subscribe to updates from the Marketing Feed</Text>
+             </Box>
+        </VStack>
+                 </CheckboxGroup>
+           )
+        }
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        CheckIcon,
+        Icon,
+        Checkbox,
+        CheckboxGroup,
+        CheckboxIndicator,
+        CheckboxIcon,
+        CheckboxLabel,
+        HStack,
+        VStack,
+        Text,
+        Box,
+        useState,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Form Control
+
+A checkbox component integrated with form control enhances the user experience by enabling easy selection and submission of options within a structured input context.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+       <FormControl>
+           <VStack space="sm">
+              <Heading size="sm" >Sign up for newsletters</Heading>
+              <Checkbox >
+                  <CheckboxIndicator mr="$2">
+                     <CheckboxIcon as={CheckIcon}/>
+                  </CheckboxIndicator>
+                <CheckboxLabel>Daily Bits</CheckboxLabel>
+              </Checkbox>
+              <Checkbox >
+                <CheckboxIndicator mr="$2">
+                  <CheckboxIcon as={CheckIcon}/>
+               </CheckboxIndicator>
+                 <CheckboxLabel>Event Updates</CheckboxLabel>
+              </Checkbox>
+              <Checkbox >
+                <CheckboxIndicator mr="$2">
+                  <CheckboxIcon as={CheckIcon}/>
+                </CheckboxIndicator>
+                 <CheckboxLabel>Sponsorship</CheckboxLabel>
+              </Checkbox>
+              <Text size="sm">Subscribe to newsletters for updates</Text>
+           </VStack>
+            </FormControl>
+        `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Checkbox,
+        CheckboxGroup,
+        CheckboxIndicator,
+        CheckboxIcon,
+        CheckboxLabel,
+        Wrapper,
+        Center,
+        CheckIcon,
+        Icon,
+        Text,
+        VStack,
+        Heading,
+        FormControl,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Label left
+
+A checkbox component with Label left configuration aligns the label to the left, facilitating clear association between the option and its corresponding checkbox.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+       function App(){
+             const [values, setValues] = useState(["Jane"]);
+           return (
+             <CheckboxGroup value={values}  onChange={(keys) => {
+        setValues(keys)
+      }}>
+     <VStack space="lg" w='$40'>
+            <Checkbox justifyContent="space-between" value="Jane">
+              <CheckboxLabel >Jane Cooper</CheckboxLabel>
+                <CheckboxIndicator>
+                   <CheckboxIcon as={CheckIcon}/>
+                </CheckboxIndicator>
+            </Checkbox>
+            <Checkbox value="Wade" justifyContent="space-between">
+                <CheckboxLabel >Wade Warren</CheckboxLabel>
+                  <CheckboxIndicator>
+                      <CheckboxIcon as={CheckIcon} />
+                  </CheckboxIndicator>
+            </Checkbox>
+            <Checkbox justifyContent="space-between" value="Robert">
+              <CheckboxLabel >Robert Fox</CheckboxLabel>
+                <CheckboxIndicator>
+                  <CheckboxIcon as={CheckIcon}/>
+                </CheckboxIndicator>
+            </Checkbox>
+          </VStack>
+                 </CheckboxGroup>
+           )
+        }`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Checkbox,
+        CheckboxGroup,
+        CheckboxIndicator,
+        CheckboxIcon,
+        CheckboxLabel,
+        Wrapper,
+        Center,
+        CheckIcon,
+        Icon,
+        VStack,
+        HStack,
+        useState,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Controlled
+
+A controlled component architecture incorporates a checkbox component, allowing for precise management of its state and behavior through explicit control mechanisms.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      function App() {
+         const [values, setValues] = React.useState(['UX Research']);
+        return (
+          <CheckboxGroup value={values}  onChange={(keys)=>{
+            setValues(keys);
+          }}>
+           <VStack space="md">
+                  <Checkbox  value="UX Research">
+                    <CheckboxIndicator mr="$2">
+                      <CheckboxIcon as={CheckIcon}/>
+                    </CheckboxIndicator>
+                  <CheckboxLabel>UX Research</CheckboxLabel>
+                </Checkbox>
+                 <Checkbox  value="Software">
+                    <CheckboxIndicator mr="$2">
+                      <CheckboxIcon as={CheckIcon}/>
+                    </CheckboxIndicator>
+                  <CheckboxLabel>Software Development</CheckboxLabel>
+                </Checkbox>
+            </VStack>
+          </CheckboxGroup>
+        )
+      }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        CheckIcon,
+        Icon,
+        Checkbox,
+        CheckboxGroup,
+        CheckboxIndicator,
+        CheckboxIcon,
+        CheckboxLabel,
+        useState,
+        Center,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Uncontrolled
+
+An uncontrolled component utilizes a checkbox component, providing a simpler implementation where the checkbox state is managed internally, without explicit control from external sources.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App() {
+       const radioRef = useRef(null);
+        const handleCheckboxChange = (e) => {
+            e.preventDefault();
+            const checkboxValue = radioRef.current.checked;
+          };
+        return (
+          <CheckboxGroup  ref={radioRef} >
+          <VStack space="md">
+                  <Checkbox   onChange={handleCheckboxChange}  value="Apartments">
+                    <CheckboxIndicator   mr="$2">
+                        <CheckboxIcon as={CheckIcon}/>
+                    </CheckboxIndicator>
+                     <CheckboxLabel>Apartments</CheckboxLabel>
+                  </Checkbox>
+                   <Checkbox   onChange={handleCheckboxChange}  value="Residents">
+                    <CheckboxIndicator  mr="$2">
+                        <CheckboxIcon as={CheckIcon}/>
+                    </CheckboxIndicator>
+                     <CheckboxLabel>Residents</CheckboxLabel>
+                  </Checkbox>
+            </VStack>
+          </CheckboxGroup>
+               )
+        }
+        `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        CheckIcon,
+        Icon,
+        Checkbox,
+        CheckboxGroup,
+        CheckboxIndicator,
+        CheckboxIcon,
+        CheckboxLabel,
+        useRef,
+        Center,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Checkbox group
+
+The checkbox group component allows users to group checkbox and display them in a horizontal or vertical row for better visual representation and functionality.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function CheckboxExample(){
+  const [values, setValues] = React.useState([]);
+  return (
+      <Center>
+        <CheckboxGroup
+          value={values}
+          onChange={setValues}
+        >
+          <VStack space="sm">
+            <Checkbox
+            isDisabled={true}
+              value="Label 1"
+            >
+              <CheckboxIndicator mr="$2">
+                <CheckboxIcon as={CheckIcon}/>
+              </CheckboxIndicator>
+              <CheckboxLabel>Label 1</CheckboxLabel>
+            </Checkbox>
+            <Checkbox
+              value="Label 2"
+            >
+              <CheckboxIndicator mr="$2">
+                <CheckboxIcon as={CheckIcon}/>
+              </CheckboxIndicator>
+              <CheckboxLabel>Label 2</CheckboxLabel>
+            </Checkbox>
+          </VStack>
+        </CheckboxGroup>
+      </Center>
+  );
+};
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'CheckboxExample');
+      },
+      scope: {
+        Checkbox,
+        CheckboxGroup,
+        CheckboxIndicator,
+        CheckboxIcon,
+        CheckboxLabel,
+        Wrapper,
+        Center,
+        CheckIcon,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Divider/Divider.tsx b/example/storybook-nativewind/src/components/Divider/Divider.tsx
index 358d58ce16..fd868e1fad 100644
--- a/example/storybook-nativewind/src/components/Divider/Divider.tsx
+++ b/example/storybook-nativewind/src/components/Divider/Divider.tsx
@@ -2,11 +2,6 @@ import React from 'react';
 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 (
@@ -33,14 +28,4 @@ DividerBasic.description =
 
 export default DividerBasic;
 
-export {
-  Text,
-  VStack,
-  HStack,
-  Divider,
-  Box,
-  Heading,
-  Button,
-  ButtonText,
-  Center,
-};
+export { HStack, Divider, Heading };
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 f60172e36a..275d1e31e8 100644
--- a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
@@ -207,7 +207,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -257,13 +257,13 @@ A Divider component with different layouts offers versatile options for visually
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -347,13 +347,13 @@ A Divider component with a specified divider orientation allows for clear visual
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -420,13 +420,13 @@ A Divider component used with or without inset adds visual hierarchy and distinc
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -479,4 +479,4 @@ A Divider component with added content allows for the inclusion of additional te
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 ae5670aea7..afe2919d79 100644
--- a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx
@@ -206,7 +206,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -269,13 +269,13 @@ A Divider component with different layouts offers versatile options for visually
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -360,13 +360,13 @@ A Divider component with a specified divider orientation allows for clear visual
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -430,13 +430,13 @@ A Divider component used with or without inset adds visual hierarchy and distinc
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -481,4 +481,4 @@ A Divider component with added content allows for the inclusion of additional te
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Fab/Fab.tsx b/example/storybook-nativewind/src/components/Fab/Fab.tsx
index 2b60b98241..740daa9c97 100644
--- a/example/storybook-nativewind/src/components/Fab/Fab.tsx
+++ b/example/storybook-nativewind/src/components/Fab/Fab.tsx
@@ -1,22 +1,7 @@
 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 { MenuIcon } 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';
-import { EditIcon, ShoppingCartIcon } from 'lucide-react-native';
 
 const FabBasic = (props: any) => {
   return (
@@ -34,28 +19,4 @@ FabBasic.description =
 
 export default FabBasic;
 
-export {
-  Fab,
-  FabIcon,
-  FabLabel,
-  Avatar,
-  AvatarImage,
-  AddIcon,
-  MenuIcon,
-  SearchIcon,
-  CheckIcon,
-  Box,
-  Checkbox,
-  CheckboxIndicator,
-  CheckboxLabel,
-  CheckboxIcon,
-  Link,
-  VStack,
-  HStack,
-  Heading,
-  Text,
-  Divider,
-  Image,
-  EditIcon,
-  ShoppingCartIcon,
-};
+export { Fab, FabIcon, FabLabel, MenuIcon, Box };
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 4e643b0c71..287f49a8f1 100644
--- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
@@ -37,7 +37,6 @@ import {
   Divider,
   Image,
   EditIcon,
-  ShoppingCartIcon,
 } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
@@ -47,6 +46,7 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
+import {ShoppingCartIcon} from 'lucide-react-native'
 
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
@@ -311,7 +311,7 @@ Fab component is created using Pressable component from react-native. It extends
 
 #### Fab
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -360,7 +360,7 @@ Fab component is created using Pressable component from react-native. It extends
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 > 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.
 
@@ -372,7 +372,7 @@ The Examples section provides visual representations of the different variants o
 
 A Fab component with an icon adds a visually striking and easily recognizable button that triggers a specific action or function within a user interface.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -424,7 +424,7 @@ A Fab component with an icon adds a visually striking and easily recognizable bu
                   );
                 })}
               </VStack>
-              <Fab size='lg' className='bg-emerald-600' >
+              <Fab size='lg' className='bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800' >
                 {/* EditIcon is imported from 'lucide-react-native' */}
                 <FabIcon as={EditIcon}/>
               </Fab>
@@ -451,13 +451,13 @@ A Fab component with an icon adds a visually striking and easily recognizable bu
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### FAB with Icon and Text
 
 A Fab component with an icon and text combines a visual icon with accompanying text to create a prominent and descriptive button that triggers a specific action or function within a user interface.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -467,7 +467,7 @@ A Fab component with an icon and text combines a visual icon with accompanying t
         <Box
           className='max-w-96 border rounded-lg border-outline-200 py-[56px] px-6 mx-5 bg-background-100'
         >
-          <Fab className='top-4 h-9 bg-indigo-600'>
+          <Fab className='top-4 h-9 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-900'>
             <FabIcon as={SearchIcon} className='mr-1.5' />
             <FabLabel >Search</FabLabel>
           </Fab>
@@ -553,13 +553,13 @@ A Fab component with an icon and text combines a visual icon with accompanying t
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Placement
 
 A Fab component with placement options allows for flexible positioning of the button within a user interface, enabling convenient and intuitive access to key actions or functionalities in various locations.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -627,13 +627,13 @@ A Fab component with placement options allows for flexible positioning of the bu
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Custom Placement
 
 A Fab component with custom placement allows for flexible positioning of the button according to specific design requirements or user interface preferences, providing tailored and intuitive access to key actions or functionalities.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -673,7 +673,7 @@ A Fab component with custom placement allows for flexible positioning of the but
               </Text>
             </Link>
           </VStack>
-          <Fab size='lg' className='bg-pink-600 right-4 bottom-16'>
+          <Fab size='lg' className='bg-pink-600 right-4 bottom-16 hover:bg-pink-700 active:bg-pink-800'>
             {/* ShoppingCartIcon is imported from 'lucide-react-native' */}
             <FabIcon as={ShoppingCartIcon} className='h-4 w-4'/>
           </Fab>
@@ -698,4 +698,4 @@ A Fab component with custom placement allows for flexible positioning of the but
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 6f5a2b1c74..3f601249b3 100644
--- a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx
@@ -14,33 +14,35 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Others/Fab" />
 
-import { Fab, FabIcon, FabLabel } from '../../core-components/themed/fab';
+import { Fab, FabIcon, FabLabel } from '../../core-components/themed';
 import {
   Checkbox,
   CheckboxIndicator,
   CheckboxLabel,
-  CheckboxIcon,
-  CheckIcon,
-  ShoppingCartIcon,
   Image,
   Box,
   Link,
+  HStack, 
+  VStack, 
+  Avatar, 
+  AvatarImage,
+  Heading, 
+  Text, 
+  Divider,
+  AddIcon,
+  CheckboxIcon
 } 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 '../../core-components/themed';
-import { SearchIcon } from '../../core-components/themed';
+import {  EditIcon,SearchIcon,ShoppingCartIcon,CheckIcon } from 'lucide-react-native';
 import {
   AppProvider,
   CodePreview,
   Table,
   TableContainer,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Fab** component.
 
@@ -356,7 +358,7 @@ Fab component is created using Pressable component from react-native. It extends
     </Table>
   </TableContainer>
 </Wrapper>
-<!-- 
+
 ## Spec Doc
 
 Explore the comprehensive details of the Fab 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.
@@ -369,4 +371,378 @@ Explore the comprehensive details of the Fab in this document, including its imp
   }}
   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%3D5970%253A34594%26type%3Ddesign%26node-id%3D6003-25845%26viewport%3D1146%252C245%252C0.06%26t%3DhEvNAQ5keRN1oIyi-1%26scaling%3Dcontain%26starting-point-node-id%3D6003%253A25845%26mode%3Ddesign"
   allowFullScreen
-/> -->
+/> 
+
+### 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.
+
+#### FAB with Icon
+
+A Fab component with an icon adds a visually striking and easily recognizable button that triggers a specific action or function within a user interface.
+
+<Wrapper>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App() {
+          const data = [
+            {
+              uri: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
+              name: 'Kevin James',
+              msg: 'Hi Rachel, What\\'s up',
+            },
+            {
+              uri: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80',
+              name: 'Jacob Jones',
+              msg: 'Good Morning!',
+            },
+            {
+              uri: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80',
+              name: 'Albert Flores',
+              msg: 'Coffee?',
+            },
+          ];
+          return (
+            <Box
+              borderColor='$borderLight200'
+              borderRadius='$lg'
+              borderWidth='$1'
+              p='$6'
+              $dark-bg='$backgroundDark900'
+              $dark-borderColor='$borderDark800'
+              $base-minWidth={240}
+              $sm-minWidth={360}
+              $md-minWidth={476}
+            >
+              <VStack space='md'>
+                {data.map((chatData)=>{
+                  return (
+                    <HStack space='sm' alignItems='center'>
+                      <Avatar size='sm'>
+                        <AvatarImage
+                          source={{
+                          uri: chatData.uri,
+                          }}
+                        />
+                      </Avatar>
+                      <VStack>
+                        <Heading size='xs'>
+                          {chatData.name}
+                        </Heading>
+                        <Text size='xs'>
+                          {chatData.msg}
+                        </Text>
+                      </VStack>
+                    </HStack>
+                  );
+                })}
+              </VStack>
+              <Fab bg="$emerald600" size='lg'>
+                {/* EditIcon is imported from 'lucide-react-native' */}
+                <FabIcon as={EditIcon}/>
+              </Fab>
+            </Box>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Fab,
+        FabIcon,
+        Wrapper,
+        EditIcon,
+        Box,
+        VStack,
+        HStack,
+        Avatar,
+        AvatarImage,
+        Heading,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### FAB with Icon and Text
+
+A Fab component with an icon and text combines a visual icon with accompanying text to create a prominent and descriptive button that triggers a specific action or function within a user interface.
+
+<Wrapper>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Box
+          maxWidth='$96'
+          borderColor='$borderLight200'
+          rounded='$lg'
+          borderWidth='$1'
+          py={56}
+          px='$6'
+          $base-mx='$5'
+          $dark-bg='$backgroundDark900'
+          $dark-borderColor='$borderDark800'
+        >
+          <Fab bg="$indigo600" height="$9" top='$4'>
+            <FabIcon as={SearchIcon}  mr="$1.5"/>
+            <FabLabel >Search</FabLabel>
+          </Fab>
+          <VStack space='lg'>
+            <Box>
+              <Text fontSize='$xs' color='$darkBlue600' fontWeight='$bold'  
+              $dark-color='$darkBlue400'>
+                HEALTH
+              </Text>
+              <Heading size='sm'>
+                Benefits of Oranges
+              </Heading>
+              <Text size='xs' mt='$1.5'>
+                Oranges are a great source of vitamin C, which is essential for a healthy immune system.
+              </Text>
+              <HStack space='sm' mt='$3' h='$5'>
+                <Text size='xs'>
+                  Wade Warrem
+                </Text>
+                <Divider
+                  orientation='vertical'
+                  bg="$backgroundLight300"
+                  $dark-bg="$backgroundLight700"
+                />
+                <Text size='xs'>
+                  6th Oct, 2019
+                </Text>
+                <Divider
+                  orientation='vertical'
+                  bg="$backgroundLight300"
+                  $dark-bg="$backgroundLight700"
+                />
+                <Text size='xs'>
+                  5 mins read
+                </Text>
+              </HStack>
+            </Box>
+            <Divider />
+            <Box>
+              <Text fontSize='$xs' color='$darkBlue600' fontWeight='$bold' $dark-color='$darkBlue400'>
+                TECHNOLOGY
+              </Text>
+              <Heading size='sm' >
+                How AI can benefit your business
+              </Heading>
+              <Text size='xs'  mt='$1.5'>
+                AI can automate tasks and processes, allowing for increasing efficiency and productivity.
+              </Text>
+              <HStack space='sm' mt='$3' h='$5'>
+                <Text size='xs' >
+                  Wade Warrem
+                </Text>
+                <Divider
+                  orientation='vertical'
+                  bg="$backgroundLight300"
+                  $dark-bg="$backgroundLight700"
+                />
+                <Text size='xs'>
+                  6th Oct, 2019
+                </Text>
+                <Divider
+                  orientation='vertical'
+                  bg="$backgroundLight300"
+                  $dark-bg="$backgroundLight700"
+                />
+                <Text size='xs'>
+                  5 mins read
+                </Text>
+              </HStack>
+            </Box>
+          </VStack>
+        </Box>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Fab,
+        FabIcon,
+        FabLabel,
+        Wrapper,
+        SearchIcon,
+        Box,
+        Divider,
+        Heading,
+        Text,
+        HStack,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Placement
+
+A Fab component with placement options allows for flexible positioning of the button within a user interface, enabling convenient and intuitive access to key actions or functionalities in various locations.
+
+<Wrapper>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Box
+          borderColor="$borderLight300"
+          rounded="$lg"
+          borderWidth="$1"
+          py="$4"
+          bg="$white"
+          $base-mx="$5"
+          $dark-bg="$backgroundDark900"
+          $dark-borderColor="$borderDark800"
+        >
+          <VStack mb='$2' px='$6' py ='$2' space='lg'>
+            <Checkbox size="sm" >
+              <CheckboxIndicator mr="$2" >
+                <CheckboxIcon as={CheckIcon} />
+              </CheckboxIndicator>
+              <CheckboxLabel>
+                <Text fontSize='$sm'  >
+                  Prepare any feedback or updates.
+                </Text>
+              </CheckboxLabel>
+            </Checkbox>
+            <Checkbox size="sm">
+              <CheckboxIndicator mr="$2" >
+                <CheckboxIcon as={CheckIcon} />
+              </CheckboxIndicator>
+              <CheckboxLabel>
+                <Text fontSize='$sm' >
+                  Review progress on goals and projects.
+                </Text>
+              </CheckboxLabel>
+            </Checkbox>
+            <Checkbox size="sm">
+              <CheckboxIndicator mr="$2" >
+                <CheckboxIcon as={CheckIcon} />
+              </CheckboxIndicator>
+              <CheckboxLabel>
+                <Text fontSize='$sm' >
+                  Ask challenges and discuss.
+                </Text>
+              </CheckboxLabel>
+            </Checkbox>
+          </VStack>
+          <Fab size='sm' placement='bottom center' top="0" position='relative'>
+            <FabIcon as={AddIcon} size='sm'/>
+          </Fab>
+        </Box>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Box,
+        VStack,
+        Checkbox,
+        CheckboxIndicator,
+        CheckboxLabel,
+        CheckboxIcon,
+        CheckIcon,
+        Fab,
+        FabIcon,
+        FabLabel,
+        Wrapper,
+        AddIcon,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Custom Placement
+
+A Fab component with custom placement allows for flexible positioning of the button according to specific design requirements or user interface preferences, providing tailored and intuitive access to key actions or functionalities.
+
+<Wrapper>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Box
+          maxWidth='$96'
+          borderColor='$borderLight200'
+          borderRadius='$lg'
+          borderWidth='$1'
+          overflow='hidden'
+          $base-mx='$5'
+          $dark-bg='$backgroundDark900'
+          $dark-borderColor='$borderDark800'
+        >
+          <Box>
+            <Image
+              h={185}
+              w={416}
+              source={{
+                uri: 'https://drive.google.com/uc?export=view&id=1h1e89BtQCp6JdGiKo92dlf5bjHC8hLjt',
+              }}
+              fallbackSource={{
+                uri: 'https://drive.google.com/uc?export=view&id=1h1e89BtQCp6JdGiKo92dlf5bjHC8hLjt',
+              }}
+            />
+          </Box>
+          <VStack px='$6' pt='$4' pb='$6'>
+            <Heading size='sm' >
+              Fresh Orange - Imported (Loose)
+            </Heading>
+            <Text fontSize='$sm'  my='$1.5'>
+              Rs 146(Rs.24.33/pc)
+            </Text>
+            <Text fontSize='$xs'>
+              DETAILS
+            </Text>
+            <Text fontSize='$xs'  my='$1.5'>
+              Oranges are a great source of vitamin C, which is essential for a healthy immune system. Oranges are a great source of vitamin C, which is important for maintaining a healthy immune system. Vitamin C also helps with the absorption of iron and the production of collagen, which supports healthy skin, teeth, and bones.
+            </Text>
+            <Link href="https://gluestack.io/" isExternal>
+              <Text fontSize='$xs' color='$pink600'>
+                READ MORE
+              </Text>
+            </Link>
+          </VStack>
+          <Fab bg='$pink600' size='lg' right='$4' bottom='$20'>
+            {/* ShoppingCartIcon is imported from 'lucide-react-native' */}
+            <FabIcon as={ShoppingCartIcon} h='$4' w='$4'/>
+          </Fab>
+        </Box>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Fab,
+        FabIcon,
+        FabLabel,
+        Wrapper,
+        Box,
+        Heading,
+        Text,
+        ShoppingCartIcon,
+        Image,
+        VStack,
+        Link,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
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 bafb924717..2f6a5518fd 100644
--- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
@@ -88,7 +88,7 @@ import Wrapper from '../../core-components/nativewind/Wrapper';
 
 This is an illustration of **FormControl** component.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -145,13 +145,13 @@ This is an illustration of **FormControl** component.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Radio
 
 The Radio Component can be incorporated within the FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -166,7 +166,7 @@ The Radio Component can be incorporated within the FormControl.
           <RadioGroup className='my-2'>
             <VStack space="sm">
               <Radio size="sm" value="Mango">
-                <RadioIndicator className='mr-2'>
+                <RadioIndicator>
                   <RadioIcon>
                     <CircleIcon/>
                   </RadioIcon>
@@ -176,7 +176,7 @@ The Radio Component can be incorporated within the FormControl.
                 </RadioLabel>
               </Radio>
               <Radio size="sm" value="Apple">
-                <RadioIndicator className='mr-2'>
+                <RadioIndicator>
                   <RadioIcon>
                     <CircleIcon/>
                   </RadioIcon>
@@ -186,7 +186,7 @@ The Radio Component can be incorporated within the FormControl.
                 </RadioLabel>
               </Radio>
               <Radio size="sm" value="Orange">
-                <RadioIndicator className='mr-2'>
+                <RadioIndicator>
                   <RadioIcon>
                     <CircleIcon/>
                   </RadioIcon>
@@ -231,7 +231,7 @@ The Radio Component can be incorporated within the FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 <br />
 
@@ -433,21 +433,6 @@ It inherits all the properties of React Native's [Text](https://reactnative.dev/
 
 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> -->
-
 ### 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.
@@ -541,7 +526,7 @@ The Input Component can be incorporated within the FormControl.
 
 The Checkbox Component can be incorporated within the FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -621,13 +606,13 @@ The Checkbox Component can be incorporated within the FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Textarea
 
 The Textarea Component can be incorporated within the FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -670,247 +655,13 @@ The Textarea Component can be incorporated within the FormControl.
       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>
+</Wrapper>
 
 #### Form Control with Error
 
 Error messages can be displayed using FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -925,7 +676,7 @@ Error messages can be displayed using FormControl.
           <RadioGroup className='my-2'>
             <VStack space="sm">
               <Radio size="sm" value="Mango">
-                <RadioIndicator className='mr-2'>
+                <RadioIndicator>
                   <RadioIcon>
                     <CircleIcon/>
                   </RadioIcon>
@@ -935,7 +686,7 @@ Error messages can be displayed using FormControl.
                 </RadioLabel>
               </Radio>
               <Radio size="sm" value="Apple">
-                <RadioIndicator className='mr-2'>
+                <RadioIndicator>
                   <RadioIcon>
                     <CircleIcon/>
                   </RadioIcon>
@@ -945,7 +696,7 @@ Error messages can be displayed using FormControl.
                 </RadioLabel>
               </Radio>
               <Radio size="sm" value="Orange">
-                <RadioIndicator className='mr-2'>
+                <RadioIndicator>
                   <RadioIcon>
                     <CircleIcon/>
                   </RadioIcon>
@@ -991,13 +742,13 @@ Error messages can be displayed using FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Form Actions
 
 Form Action Buttons can also be utilized in conjunction with FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -1040,4 +791,4 @@ Form Action Buttons can also be utilized in conjunction with FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 c7a77ac500..1d3c2e9591 100644
--- a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx
@@ -538,7 +538,7 @@ The Examples section provides visual representations of the different variants o
 
 The Input Component can be incorporated within the FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -581,13 +581,13 @@ The Input Component can be incorporated within the FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Radio
 
 The Radio Component can be incorporated within the FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -667,13 +667,13 @@ The Radio Component can be incorporated within the FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Checkbox
 
 The Checkbox Component can be incorporated within the FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -753,13 +753,13 @@ The Checkbox Component can be incorporated within the FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Textarea
 
 The Textarea Component can be incorporated within the FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -802,13 +802,13 @@ The Textarea Component can be incorporated within the FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Inline Form
 
 Inline forms can utilize FormControl for seamless integration and enhanced functionality.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -887,13 +887,13 @@ Inline forms can utilize FormControl for seamless integration and enhanced funct
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Form in Modal
 
 Modal or other Overlay components can utilize FormControl for state management and error control.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -1038,13 +1038,13 @@ Modal or other Overlay components can utilize FormControl for state management a
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Error
 
 Error messages can be displayed using FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -1125,13 +1125,13 @@ Error messages can be displayed using FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control with Form Actions
 
 Form Action Buttons can also be utilized in conjunction with FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -1174,4 +1174,4 @@ Form Action Buttons can also be utilized in conjunction with FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/HStack/HStack.tsx b/example/storybook-nativewind/src/components/HStack/HStack.tsx
index 51764f6b38..88d16f6d3c 100644
--- a/example/storybook-nativewind/src/components/HStack/HStack.tsx
+++ b/example/storybook-nativewind/src/components/HStack/HStack.tsx
@@ -4,11 +4,11 @@ import { Box } from '@gluestack-ui/themed';
 
 const HStackBasic = ({ space, reversed, ...props }: any) => {
   return (
-    <HStack space={space} mt="$5" reversed={reversed} {...props}>
-      <Box sx={{ w: 100, h: 100, bg: '$primary300' }} />
-      <Box sx={{ w: 100, h: 100, bg: '$primary400' }} />
-      <Box sx={{ w: 100, h: 100, bg: '$primary500' }} />
-      <Box sx={{ w: 100, h: 100, bg: '$primary600' }} />
+    <HStack space={space} className="mt-5" reversed={reversed} {...props}>
+      <Box className="w-[100px] h-[100px] bg-primary-300" />
+      <Box className="w-[100px] h-[100px] bg-primary-400" />
+      <Box className="w-[100px] h-[100px] bg-primary-500" />
+      <Box className="w-[100px] h-[100px] bg-primary-600" />
     </HStack>
   );
 };
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 6c663710bd..8e5e1b1831 100644
--- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
@@ -105,7 +105,7 @@ The accessibility of a HStack is primarily determined by the accessibility infor
 
 ### Props
 
-HStack 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](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+HStack 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) and the props mentioned below.
 
 <Wrapper>
   <TableContainer>
@@ -164,16 +164,31 @@ HStack component is created using View component from react-native. It extends a
   </TableContainer>
 </Wrapper>
 
-<!-- ## Spec Doc
+### Examples
 
-Explore the comprehensive details of the HStack 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.
+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.
 
-<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%3D281%253A13034%26type%3Ddesign%26node-id%3D281-13035%26viewport%3D530%252C248%252C0.07%26scaling%3Dscale-down%26starting-point-node-id%3D281%253A13035"
-  allowFullScreen
-/> -->
+#### HStack Reversed
+
+An HStack component with the reversed prop reverses the order of horizontally stacked elements, allowing for customized layouts and visual arrangements of content within a user interface.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack space="md" reversed>
+          <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"/>
+        </HStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Box, Wrapper, HStack },
+      argsType: {},
+    }}
+  />
+</Wrapper>
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 07b79ce754..ffa8ec9cdf 100644
--- a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx
@@ -14,8 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Layout/HStack" />
 
-import { HStack } from '../../core-components/themed';
-import { Box } from '@gluestack-ui/themed';
+import { Box,HStack} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -24,10 +23,11 @@ import {
   TableContainer,
   Text,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
+
+
 
 This is an illustration of **HStack** component.
 
@@ -178,3 +178,35 @@ Explore the comprehensive details of the HStack in this document, including its
   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%3D281%253A13034%26type%3Ddesign%26node-id%3D281-13035%26viewport%3D530%252C248%252C0.07%26scaling%3Dscale-down%26starting-point-node-id%3D281%253A13035"
   allowFullScreen
 /> -->
+
+
+
+
+### 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.
+
+#### HStack Reversed
+
+An HStack component with the reversed prop reverses the order of horizontally stacked elements, allowing for customized layouts and visual arrangements of content within a user interface.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack space="md" reversed>
+          <Box w='$20' h='$20' bg='$blue300' />
+          <Box w='$20' h='$20' bg='$blue400' />
+          <Box w='$20' h='$20' bg='$blue500' />
+        </HStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Box, Wrapper, HStack },
+      argsType: {},
+    }}
+  />
+</Wrapper>
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 81a32933a7..6a1258f6b3 100644
--- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
@@ -237,7 +237,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$2.5' }}
     showComponentRenderer={true}
@@ -272,4 +272,4 @@ Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl
       argsType: {},
     }}
   />
-</AppProvider>
\ No newline at end of file
+</Wrapper>
\ 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 cd9187d4eb..6e23745bcc 100644
--- a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx
@@ -242,7 +242,7 @@ Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl
 - For `md`, it renders `h5`.
 - Finally, for `sm` and `xs`, it renders `h6`.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$2.5' }}
     showComponentRenderer={true}
@@ -277,11 +277,11 @@ Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 The Heading component also accepts some shorthands for basic quick styling.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -400,4 +400,4 @@ The Heading component also accepts some shorthands for basic quick styling.
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Icon/Icon.tsx b/example/storybook-nativewind/src/components/Icon/Icon.tsx
index 2d7fbfd710..50db7641a0 100644
--- a/example/storybook-nativewind/src/components/Icon/Icon.tsx
+++ b/example/storybook-nativewind/src/components/Icon/Icon.tsx
@@ -68,7 +68,6 @@ import {
   Camera,
 } from 'lucide-react-native';
 const IconBasic = ({ size, ...props }: any) => {
-  // return <Icon as={CalendarDaysIcon} size="md" />;
   return <CalendarDaysIcon size={size} {...props} />;
 };
 
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 3e61748b5a..0840440396 100644
--- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
@@ -15,6 +15,7 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="with-nativewind/components/Media And Icons/Icon" />
 
 import {
+  Center,
   AddIcon,
   CheckIcon,
   CloseIcon,
@@ -73,12 +74,14 @@ import {
   Icon,
   VStack,
   HStack,
+  createIcon,
+} from '../../core-components/nativewind';
+import {
   ChromeIcon,
   InstagramIcon,
   FacebookIcon,
-  createIcon,
   Camera,
-} from '../../core-components/nativewind';
+} from 'lucide-react-native';
 
 import { Path, Rect } from 'react-native-svg';
 import { CollapsibleCode } from "@gluestack/design-system"
@@ -180,7 +183,7 @@ Role: img is passed
 
 ### Props
 
-Icon component is created using AsForwarder component from @gluestack-style/react. It extends all the props supported by [gluestack-ui AsForwarder](https://gluestack.io/style/docs/api/as-forwarder), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
+Icon component is created using AsForwarder component from @gluestack-style/react. It extends all the props supported by [gluestack-ui AsForwarder](https://gluestack.io/style/docs/api/as-forwarder) and the props mentioned below.
 
 #### Image
 
@@ -219,16 +222,241 @@ Icon component is created using AsForwarder component from @gluestack-style/reac
   </TableContainer>
 </>
 
-## 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.
+
+#### All gluestack icons
+
+Below is a list of all of the icons in the library.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <Center>
+  <HStack className="w-[70%] flex flex-wrap">
+        <Icon as={AddIcon} className="m-2 w-4 h-4" />
+        <Icon as={ArrowLeftIcon} className="m-2 w-4 h-4" />
+        <Icon as={ArrowRightIcon} className="m-2 w-4 h-4" />
+        <Icon as={ArrowUpIcon} className="m-2 w-4 h-4" />
+        <Icon as={ArrowDownIcon} className="m-2 w-4 h-4" />
+        <Icon as={ChevronsLeftIcon} className="m-2 w-4 h-4" />
+        <Icon as={ChevronsRightIcon} className="m-2 w-4 h-4" />
+        <Icon as={ChevronsUpDownIcon} className="m-2 w-4 h-4" />
+        <Icon as={AtSignIcon} className="m-2 w-4 h-4" />
+        <Icon as={PaperclipIcon} className="m-2 w-4 h-4" />
+        <Icon as={BellIcon} className="m-2 w-4 h-4" />
+        <Icon as={CalendarDaysIcon} className="m-2 w-4 h-4" />
+        <Icon as={MessageCircleIcon} className="m-2 w-4 h-4" />
+        <Icon as={CheckIcon} className="m-2 w-4 h-4" />
+        <Icon as={ChevronDownIcon} className="m-2 w-4 h-4" />
+        <Icon as={ChevronUpIcon} className="m-2 w-4 h-4" />
+        <Icon as={ChevronLeftIcon} className="m-2 w-4 h-4" />
+        <Icon as={ChevronRightIcon} className="m-2 w-4 h-4" />
+        <Icon as={CloseIcon} className="m-2 w-4 h-4" />
+        <Icon as={CopyIcon} className="m-2 w-4 h-4" />
+        <Icon as={TrashIcon} className="m-2 w-4 h-4" />
+        <Icon as={DownloadIcon} className="m-2 w-4 h-4" />
+        <Icon as={GripVerticalIcon} className="m-2 w-4 h-4" />
+        <Icon as={EditIcon} className="m-2 w-4 h-4" />
+        <Icon as={MailIcon} className="m-2 w-4 h-4" />
+        <Icon as={ExternalLinkIcon} className="m-2 w-4 h-4" />
+        <Icon as={MenuIcon} className="m-2 w-4 h-4" />
+        <Icon as={InfoIcon} className="m-2 w-4 h-4" />
+        <Icon as={LinkIcon} className="m-2 w-4 h-4" />
+        <Icon as={LockIcon} className="m-2 w-4 h-4" />
+        <Icon as={RemoveIcon} className="m-2 w-4 h-4" />
+        <Icon as={MoonIcon} className="m-2 w-4 h-4" />
+        <Icon as={SlashIcon} className="m-2 w-4 h-4" />
+        <Icon as={CheckCircleIcon} className="m-2 w-4 h-4" />
+        <Icon as={PhoneIcon} className="m-2 w-4 h-4" />
+        <Icon as={HelpCircleIcon} className="m-2 w-4 h-4" />
+        <Icon as={RepeatIcon} className="m-2 w-4 h-4" />
+        <Icon as={Repeat1Icon} className="m-2 w-4 h-4" />
+        <Icon as={SearchIcon} className="m-2 w-4 h-4" />
+        <Icon as={SettingsIcon} className="m-2 w-4 h-4" />
+        <Icon as={LoaderIcon} className="m-2 w-4 h-4" />
+        <Icon as={StarIcon} className="m-2 w-4 h-4" />
+        <Icon as={SunIcon} className="m-2 w-4 h-4" />
+        <Icon as={ClockIcon} className="m-2 w-4 h-4" />
+        <Icon as={UnlockIcon} className="m-2 w-4 h-4" />
+        <Icon as={EyeIcon} className="m-2 w-4 h-4" />
+        <Icon as={EyeOffIcon} className="m-2 w-4 h-4" />
+        <Icon as={AlertCircleIcon} className="m-2 w-4 h-4" />
+        <Icon as={CloseCircleIcon} className="m-2 w-4 h-4" />
+        <Icon as={ShareIcon} className="m-2 w-4 h-4" />
+        <Icon as={CircleIcon} className="m-2 w-4 h-4" />
+        <Icon as={FavouriteIcon} className="m-2 w-4 h-4" />
+        <Icon as={GlobeIcon} className="m-2 w-4 h-4" />
+        <Icon as={ThreeDotsIcon} className="m-2 w-4 h-4" />
+        <Icon as={PlayIcon} className="m-2 w-4 h-4" />
+  </HStack>
+  </Center>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Center,
+        Wrapper,
+        HStack,
+        AddIcon,
+        CheckIcon,
+        CloseIcon,
+        InfoIcon,
+        ArrowUpIcon,
+        ChevronDownIcon,
+        ChevronUpIcon,
+        ChevronLeftIcon,
+        ChevronRightIcon,
+        ChevronsLeftIcon,
+        ChevronsRightIcon,
+        AtSignIcon,
+        CheckCircleIcon,
+        AlertCircleIcon,
+        ChevronsUpDownIcon,
+        PaperclipIcon,
+        BellIcon,
+        MenuIcon,
+        ArrowRightIcon,
+        ArrowLeftIcon,
+        ArrowDownIcon,
+        CalendarDaysIcon,
+        MessageCircleIcon,
+        CopyIcon,
+        TrashIcon,
+        DownloadIcon,
+        GripVerticalIcon,
+        EditIcon,
+        MailIcon,
+        LinkIcon,
+        ExternalLinkIcon,
+        LockIcon,
+        RemoveIcon,
+        MoonIcon,
+        SlashIcon,
+        PhoneIcon,
+        HelpCircleIcon,
+        RepeatIcon,
+        Repeat1Icon,
+        SearchIcon,
+        SettingsIcon,
+        LoaderIcon,
+        StarIcon,
+        SunIcon,
+        ClockIcon,
+        UnlockIcon,
+        EyeIcon,
+        EyeOffIcon,
+        CloseCircleIcon,
+        ShareIcon,
+        CircleIcon,
+        FavouriteIcon,
+        GlobeIcon,
+        ThreeDotsIcon,
+        Icon,
+        PlayIcon,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Lucide Icons (Recommended)
 
-Explore the comprehensive details of the Icon 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.
+[Lucide](https://lucide.dev/docs/lucide-react-native) is an open source icon library for displaying icons for react-native. `gluestack-ui` provides an easy integration with lucide icons.
 
-<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%3D6412%253A31332%26type%3Ddesign%26node-id%3D6412-33234%26viewport%3D723%252C127%252C0.03%26t%3DxNCgdoHjEw3Tlb72-1%26scaling%3Dscale-down%26starting-point-node-id%3D6412%253A33234%26mode%3Ddesign"
-  allowFullScreen
-/>
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <VStack space="md" className="items-center">
+        <Icon as={Camera} />
+        <Icon as={ChromeIcon}  />
+        <Icon as={InstagramIcon} />
+        <Icon as={FacebookIcon} />
+      </VStack>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        VStack,
+        ChromeIcon,
+        InstagramIcon,
+        FacebookIcon,
+        Icon,
+        Camera,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### SVG & Custom Icons
+
+We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component.
+CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc.
+
+#### SVG & Custom Icons
+
+We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component.
+CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc.
+
+##### Notes to remember while using createIcon function
+
+- Pass svg props such as `viewBox` in `createIcon` directly.
+- Copy the svg code without the SVG tag directly into the function argument `Path` or `D` or whichever prop justifies your svg.
+- Replace HTML SVG tags (e.g., `<path>`, `<rect>` etc) with the corresponding React Native SVG components (e.g., `<Path>`, `<Rect>` etc).
+- For any color property (i.e. fill, stroke etc), if you want to override that color, pass "currentColor" instead of a colorCode.
+
+Before :
+`<path fill="#FF0000" d="M10 10L20 20" /> `
+
+After :
+`<Path fill="currentColor" d="M10 10L20 20" /> `
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        const GluestackIcon = createIcon({
+          // createIcon function is imported from '@gluestack-ui/themed'
+          viewBox: '0 0 32 32',
+          path: (
+            <>
+              {/* Rect, Path is imported from 'react-native-svg' */}
+              <Rect width="32" height="32" rx="2" fill="currentColor"/>
+              <Path d="M9.5 14.6642L15.9999 9.87633V12.1358L9.5 16.9236V14.6642Z" fill="white"/>
+              <Path d="M22.5 14.6642L16.0001 9.87639V12.1359L22.5 16.9237V14.6642Z" fill="white"/>
+              <Path d="M9.5 19.8641L15.9999 15.0763V17.3358L9.5 22.1236V19.8641Z" fill="white"/>
+              <Path d="M22.5 19.8642L16.0001 15.0764V17.3358L22.5 22.1237V19.8642Z" fill="white"/>
+            </>
+          ),
+        });
+      function App () {
+        return <Icon as={GluestackIcon} size='xl' className="bg-black"/>;
+      }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        createIcon,
+        Icon,
+        Path,
+        Rect,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
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 973ac160c1..8d3851f4a2 100644
--- a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx
@@ -73,12 +73,14 @@ import {
   Icon,
   VStack,
   HStack,
+  createIcon,
+} from '../../core-components/themed';
+import {
   ChromeIcon,
   InstagramIcon,
   FacebookIcon,
-  createIcon,
-  Camera,
-} from '../../core-components/themed';
+  Camera
+} from 'lucide-react-native'
 import { CollapsibleCode } from "@gluestack/design-system";
 import { Path, Rect } from 'react-native-svg';
 
@@ -219,16 +221,236 @@ Icon component is created using AsForwarder component from @gluestack-style/reac
   </TableContainer>
 </>
 
-## 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 Icon 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.
+#### All gluestack icons
 
-<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%3D6412%253A31332%26type%3Ddesign%26node-id%3D6412-33234%26viewport%3D723%252C127%252C0.03%26t%3DxNCgdoHjEw3Tlb72-1%26scaling%3Dscale-down%26starting-point-node-id%3D6412%253A33234%26mode%3Ddesign"
-  allowFullScreen
+Below is a list of all of the icons in the library.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack w="70%" flexWrap= 'wrap' mx='auto'>
+              <Icon as={AddIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ArrowLeftIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ArrowRightIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ArrowUpIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ArrowDownIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ChevronsLeftIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ChevronsRightIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ChevronsUpDownIcon} m="$2" w="$4" h="$4" />
+              <Icon as={AtSignIcon} m="$2" w="$4" h="$4" />
+              <Icon as={PaperclipIcon} m="$2" w="$4" h="$4" />
+              <Icon as={BellIcon} m="$2" w="$4" h="$4" />
+              <Icon as={CalendarDaysIcon} m="$2" w="$4" h="$4" />
+              <Icon as={MessageCircleIcon} m="$2" w="$4" h="$4" />
+              <Icon as={CheckIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ChevronDownIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ChevronUpIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ChevronLeftIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ChevronRightIcon} m="$2" w="$4" h="$4" />
+              <Icon as={CloseIcon} m="$2" w="$4" h="$4" />
+              <Icon as={CopyIcon} m="$2" w="$4" h="$4" />
+              <Icon as={TrashIcon} m="$2" w="$4" h="$4" />
+              <Icon as={DownloadIcon} m="$2" w="$4" h="$4" />
+              <Icon as={GripVerticalIcon} m="$2" w="$4" h="$4" />
+              <Icon as={EditIcon} m="$2" w="$4" h="$4" />
+              <Icon as={MailIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ExternalLinkIcon} m="$2" w="$4" h="$4" />
+              <Icon as={MenuIcon} m="$2" w="$4" h="$4" />
+              <Icon as={InfoIcon} m="$2" w="$4" h="$4" />
+              <Icon as={LinkIcon} m="$2" w="$4" h="$4" />
+              <Icon as={LockIcon} m="$2" w="$4" h="$4" />
+              <Icon as={RemoveIcon} m="$2" w="$4" h="$4" />
+              <Icon as={MoonIcon} m="$2" w="$4" h="$4" />
+              <Icon as={SlashIcon} m="$2" w="$4" h="$4" />
+              <Icon as={CheckCircleIcon} m="$2" w="$4" h="$4" />
+              <Icon as={PhoneIcon} m="$2" w="$4" h="$4" />
+              <Icon as={HelpCircleIcon} m="$2" w="$4" h="$4" />
+              <Icon as={RepeatIcon} m="$2" w="$4" h="$4" />
+              <Icon as={Repeat1Icon} m="$2" w="$4" h="$4" />
+              <Icon as={SearchIcon} m="$2" w="$4" h="$4" />
+              <Icon as={SettingsIcon} m="$2" w="$4" h="$4" />
+              <Icon as={LoaderIcon} m="$2" w="$4" h="$4" />
+              <Icon as={StarIcon} m="$2" w="$4" h="$4" />
+              <Icon as={SunIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ClockIcon} m="$2" w="$4" h="$4" />
+              <Icon as={UnlockIcon} m="$2" w="$4" h="$4" />
+              <Icon as={EyeIcon} m="$2" w="$4" h="$4" />
+              <Icon as={EyeOffIcon} m="$2" w="$4" h="$4" />
+              <Icon as={AlertCircleIcon} m="$2" w="$4" h="$4" />
+              <Icon as={CloseCircleIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ShareIcon} m="$2" w="$4" h="$4" />
+              <Icon as={CircleIcon} m="$2" w="$4" h="$4" />
+              <Icon as={FavouriteIcon} m="$2" w="$4" h="$4" />
+              <Icon as={GlobeIcon} m="$2" w="$4" h="$4" />
+              <Icon as={ThreeDotsIcon} m="$2" w="$4" h="$4" />
+              <Icon as={PlayIcon} m="$2" w="$4" h="$4" />
+        </HStack>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        HStack,
+        AddIcon,
+        CheckIcon,
+        CloseIcon,
+        InfoIcon,
+        ArrowUpIcon,
+        ChevronDownIcon,
+        ChevronUpIcon,
+        ChevronLeftIcon,
+        ChevronRightIcon,
+        ChevronsLeftIcon,
+        ChevronsRightIcon,
+        AtSignIcon,
+        CheckCircleIcon,
+        AlertCircleIcon,
+        ChevronsUpDownIcon,
+        PaperclipIcon,
+        BellIcon,
+        MenuIcon,
+        ArrowRightIcon,
+        ArrowLeftIcon,
+        ArrowDownIcon,
+        CalendarDaysIcon,
+        MessageCircleIcon,
+        CopyIcon,
+        TrashIcon,
+        DownloadIcon,
+        GripVerticalIcon,
+        EditIcon,
+        MailIcon,
+        LinkIcon,
+        ExternalLinkIcon,
+        LockIcon,
+        RemoveIcon,
+        MoonIcon,
+        SlashIcon,
+        PhoneIcon,
+        HelpCircleIcon,
+        RepeatIcon,
+        Repeat1Icon,
+        SearchIcon,
+        SettingsIcon,
+        LoaderIcon,
+        StarIcon,
+        SunIcon,
+        ClockIcon,
+        UnlockIcon,
+        EyeIcon,
+        EyeOffIcon,
+        CloseCircleIcon,
+        ShareIcon,
+        CircleIcon,
+        FavouriteIcon,
+        GlobeIcon,
+        ThreeDotsIcon,
+        Icon,
+        PlayIcon
+      },
+      argsType: {},
+    }}
 />
+
+</Wrapper>
+
+#### Lucide Icons (Recommended)
+
+[Lucide](https://lucide.dev/docs/lucide-react-native) is an open source icon library for displaying icons for react-native. `gluestack-ui` provides an easy integration with lucide icons.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <VStack space="md" alignItems='center'>
+        <Icon as={Camera} />
+        <Icon as={ChromeIcon}  />
+        <Icon as={InstagramIcon} />
+        <Icon as={FacebookIcon} />
+      </VStack>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        VStack,
+        ChromeIcon,
+        InstagramIcon,
+        FacebookIcon,
+        Icon,
+        Camera,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### SVG & Custom Icons
+
+We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component.
+CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc.
+
+##### Notes to remember while using createIcon function
+
+- Pass svg props such as `viewBox` in `createIcon` directly.
+- Copy the svg code without the SVG tag directly into the function argument `Path` or `D` or whichever prop justifies your svg.
+- Replace HTML SVG tags (e.g., `<path>`, `<rect>` etc) with the corresponding React Native SVG components (e.g., `<Path>`, `<Rect>` etc).
+- For any color property (i.e. fill, stroke etc), if you want to override that color, pass "currentColor" instead of a colorCode.
+
+Before :
+`<path fill="#FF0000" d="M10 10L20 20" /> `
+
+After :
+`<Path fill="currentColor" d="M10 10L20 20" /> `
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        const GluestackIcon = createIcon({
+          // createIcon function is imported from '@gluestack-ui/themed'
+          viewBox: '0 0 32 32',
+          path: (
+            <>
+              {/* Rect, Path is imported from 'react-native-svg' */}
+              <Rect width="32" height="32" rx="2" fill="currentColor"/>
+              <Path d="M9.5 14.6642L15.9999 9.87633V12.1358L9.5 16.9236V14.6642Z" fill="white"/>
+              <Path d="M22.5 14.6642L16.0001 9.87639V12.1359L22.5 16.9237V14.6642Z" fill="white"/>
+              <Path d="M9.5 19.8641L15.9999 15.0763V17.3358L9.5 22.1236V19.8641Z" fill="white"/>
+              <Path d="M22.5 19.8642L16.0001 15.0764V17.3358L22.5 22.1237V19.8642Z" fill="white"/>
+            </>
+          ),
+        });
+      function App () {
+        return <Icon as={GluestackIcon} color='black' size='xl'/>;
+      }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        createIcon,
+        Icon,
+        Path,
+        Rect,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+> gluestack-ui provides a set of pre created icons that can be used directly in our app and can also integrate third party icons using [AsForwarder](/style/docs/api/as-forwarder) from [gluestack-style](/style)
diff --git a/example/storybook-nativewind/src/components/Input/Input.tsx b/example/storybook-nativewind/src/components/Input/Input.tsx
index c249853522..af86797b8c 100644
--- a/example/storybook-nativewind/src/components/Input/Input.tsx
+++ b/example/storybook-nativewind/src/components/Input/Input.tsx
@@ -1,18 +1,6 @@
 import React from 'react';
-import {
-  Button,
-  ButtonText,
-  Box,
-  Heading,
-  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 { EyeIcon, EyeOffIcon, SearchIcon } from 'lucide-react-native';
-import { useState } from 'react';
+import { SearchIcon } from '@/components/ui/icon';
 
 const InputBasic = ({ ...props }: any) => {
   const [value, setValue] = React.useState('');
@@ -37,22 +25,3 @@ InputBasic.description =
   'This is a basic Input component example. Inputs are used to capture data from users.';
 
 export default InputBasic;
-
-export {
-  Input,
-  InputField,
-  InputIcon,
-  Center,
-  Button,
-  ButtonText,
-  Box,
-  VStack,
-  Text,
-  Heading,
-  useState,
-  Icon,
-  EyeIcon,
-  EyeOffIcon,
-  FormControl,
-  InputSlot,
-};
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 53a957d6f1..6ecfaf9353 100644
--- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
@@ -27,9 +27,9 @@ import {
   Box,
   FormControl,
   Heading,
-  Icon,
+  Icon, SearchIcon
 } from '../../core-components/nativewind';
-import { SearchIcon, EyeIcon, EyeOffIcon } from '../../core-components/nativewind';
+import { EyeIcon, EyeOffIcon } from 'lucide-react-native';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -426,7 +426,7 @@ We have outlined the various features that ensure the Input component is accessi
 
 ### Props
 
-Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
+Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props) and the props mentioned below.
 
 #### Input
 
@@ -500,7 +500,7 @@ The Examples section provides visual representations of the different variants o
 
 The Input component integrates with an icon and a button, providing users with a comprehensive login window inside a FormControl component.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -516,14 +516,14 @@ The Input component integrates with an icon and a button, providing users with a
           };
           return (
             <FormControl
-              className='p-4 border-1 rounded-lg ring-borderLight300 dark:border-1 dark:rounded-lg dark:ring-borderDark800'
+              className='p-4 border rounded-lg border-outline-300'
             >
               <VStack space='xl'>
-                <Heading className='color-text-900 leading-3'>
+                <Heading className='text-typography-900 leading-3'>
                   Login
                 </Heading>
                 <VStack space='xs'>
-                  <Text className='color-text-500 leading-1'>
+                  <Text className='text-typography-500 leading-1'>
                     Email
                   </Text>
                   <Input>
@@ -533,7 +533,7 @@ The Input component integrates with an icon and a button, providing users with a
                   </Input>
                 </VStack>
                 <VStack space='xs'>
-                  <Text className='color-text-500 leading-1'>
+                  <Text className='text-typography-500 leading-1'>
                     Password
                   </Text>
                   <Input className='text-center'>
@@ -542,7 +542,7 @@ The Input component integrates with an icon and a button, providing users with a
                     />
                     <InputSlot className='pr-3' onPress={handleState}>
                       {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */}
-                      <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} className='color-darkBlue-500' />
+                      <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} className='text-darkBlue-500' />
                     </InputSlot>
                   </Input>
                 </VStack>
@@ -552,7 +552,7 @@ The Input component integrates with an icon and a button, providing users with a
                     setShowModal(false);
                   }}
                 >
-                  <ButtonText className='color-white'>
+                  <ButtonText className='text-typography-0'>
                     Save
                   </ButtonText>
                 </Button>
@@ -583,13 +583,13 @@ The Input component integrates with an icon and a button, providing users with a
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 ### 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>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -620,4 +620,4 @@ The Input with Icons is a variation of the Input component that displays icons n
     }}
 />
 
-</AppProvider>
+</Wrapper>
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 377e193625..c22f8bf28d 100644
--- a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
@@ -480,20 +480,6 @@ Input component is created using TextInput component from react-native. It exten
   </TableContainer>
 </>
 
-## 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%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.
@@ -502,7 +488,7 @@ The Examples section provides visual representations of the different variants o
 
 The Input component integrates with an icon and a button, providing users with a comprehensive login window inside a FormControl component.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$8' }}
     showComponentRenderer={true}
@@ -589,13 +575,13 @@ The Input component integrates with an icon and a button, providing users with a
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 ### 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>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -626,4 +612,4 @@ The Input with Icons is a variation of the Input component that displays icons n
     }}
 />
 
-</AppProvider>
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
index 50d6082740..38bc62f295 100644
--- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
@@ -231,7 +231,7 @@ Link component is created using Pressable component from react-native. It extend
 
 #### Link
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -266,7 +266,7 @@ Link component is created using Pressable component from react-native. It extend
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 > 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.
 
@@ -276,7 +276,7 @@ The Examples section provides visual representations of the different variants o
 
 #### Default
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -298,11 +298,11 @@ The Examples section provides visual representations of the different variants o
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Link with icon
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -326,4 +326,4 @@ The Examples section provides visual representations of the different variants o
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 32935907ab..ae6fbe185a 100644
--- a/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx
@@ -383,7 +383,7 @@ The Examples section provides visual representations of the different variants o
 
 #### Default
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -405,11 +405,11 @@ The Examples section provides visual representations of the different variants o
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Link with icon
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -433,4 +433,4 @@ The Examples section provides visual representations of the different variants o
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 756ec455bd..b1e249f991 100644
--- a/example/storybook-nativewind/src/components/Modal/index.nw.storiesold.mdx
+++ b/example/storybook-nativewind/src/components/Modal/index.nw.storiesold.mdx
@@ -59,7 +59,7 @@ import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Modal** component.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -146,7 +146,7 @@ This is an illustration of **Modal** component.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 <br />
 
@@ -203,7 +203,7 @@ This section provides a comprehensive reference list for the component props, de
 
 Contains all View related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -386,12 +386,12 @@ Contains all View related layout style props and actions. It inherits all the pr
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 **Descendants Styling Props**
 Props to style child components.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -418,7 +418,7 @@ Props to style child components.
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### ModalBackdrop
 
@@ -428,7 +428,7 @@ It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) c
 
 It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. You can use any declarative animation library you prefer.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -467,7 +467,7 @@ It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.V
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### ModalHeader
 
@@ -480,7 +480,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 **Descendants Styling Props**
 Props to style child components.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -518,7 +518,7 @@ Props to style child components.
     </Table>
 
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### ModalBody
 
@@ -538,7 +538,7 @@ Modal component is created using View component from react-native. It extends al
 
 #### Modal
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -571,7 +571,7 @@ Modal component is created using View component from react-native. It extends al
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 ## Spec Doc
 
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 9303430914..5bbca771bf 100644
--- a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx
@@ -1,5 +1,5 @@
 ---
-title: Modal | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Modal Component | Installation, Usage, and API
 
 description: A Modal is a window on top of the primary content to draw the user's attention to important information or actions. It provides a focused and interruptive way to interact with the application.
 
@@ -24,8 +24,6 @@ import {
   Text as ModalText,
   Center,
   CheckCircleIcon,
-} from '../../core-components/themed';
-import {
   Modal,
   ModalBackdrop,
   ModalContent,
@@ -33,15 +31,13 @@ import {
   ModalCloseButton,
   ModalBody,
   ModalFooter,
-} from '../../core-components/themed';
-import {
   VStack,
   HStack,
   Input,
   InputField,
   ArrowLeftIcon,
   Link,
-} from '@gluestack-ui/themed';
+} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import { useState } from 'react';
 import {
@@ -52,14 +48,13 @@ import {
   AddIcon,
   InfoIcon,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Modal** component.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -70,7 +65,7 @@ This is an illustration of **Modal** component.
           console.log(showModal);
           const ref = React.useRef(null);
           return (
-            <Center className='h-[300px]'>
+            <Center h={300}>
               <Button onPress={() => setShowModal(true)} ref={ref}>
                 <ButtonText>Show Modal</ButtonText>
               </Button>
@@ -99,7 +94,7 @@ This is an illustration of **Modal** component.
                       variant="outline"
                       size="sm"
                       action="secondary"
-                      className='mr-[3px]'
+                      mr="$3"
                       onPress={() => {
                         setShowModal(false);
                       }}
@@ -147,7 +142,7 @@ This is an illustration of **Modal** component.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 <br />
 
@@ -204,7 +199,7 @@ This section provides a comprehensive reference list for the component props, de
 
 Contains all View related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -387,12 +382,12 @@ Contains all View related layout style props and actions. It inherits all the pr
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 **Descendants Styling Props**
 Props to style child components.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -419,7 +414,7 @@ Props to style child components.
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### ModalBackdrop
 
@@ -429,7 +424,7 @@ It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) c
 
 It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. You can use any declarative animation library you prefer.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -468,7 +463,7 @@ It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.V
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### ModalHeader
 
@@ -481,7 +476,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 **Descendants Styling Props**
 Props to style child components.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -519,7 +514,7 @@ Props to style child components.
     </Table>
 
   </TableContainer>
-</AppProvider>
+</Wrapper>
 
 #### ModalBody
 
@@ -539,7 +534,7 @@ Modal component is created using View component from react-native. It extends al
 
 #### Modal
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -572,89 +567,326 @@ Modal component is created using View component from react-native. It extends al
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
-
-## Spec Doc
-
-Explore the comprehensive details of the Modal 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%3D5231%253A20810%26type%3Ddesign%26node-id%3D5235-29102%26viewport%3D490%252C241%252C0.02%26t%3DFWIfjvKo1mfJez7E-1%26scaling%3Dcontain%26starting-point-node-id%3D5235%253A29102%26mode%3Ddesign"
-  allowFullScreen
-/>
+</Wrapper>
 
-<!--
+### Examples
 
-### Advanced
+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.
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+#### Multiple Modals
 
-### Customizing the Modal
+A user interface featuring multiple modal components that allow for layered interaction and context-specific information display.
 
-We have a function called `createModal` which can be used to create a custom Modal component. This function takes in a configuration object which contains the styled components that you want to use for the modal. You can refer [gluestack.io/style](/style) for more information on how to use styled components.
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App() {
+          const [showModal, setShowModal] = useState(false);
+          const [showModal2, setShowModal2] = useState(false);
+          const [showModal3, setShowModal3] = useState(false);
+          return (
+            <Center>
+              <Center h={400}>
+                <Button onPress={() => setShowModal(true)}>
+                  <ButtonText>Forgot password?</ButtonText>
+                </Button>
+              </Center>
+              <Modal
+                isOpen={showModal}
+                onClose={() => {
+                  setShowModal(false);
+                }}
+              >
+                <ModalBackdrop />
+                <ModalContent>
+                  <ModalHeader borderBottomWidth='$0'>
+                  <VStack space='sm'>
+                    <Heading size='lg'>Forgot password?</Heading>
+                    <Text size='sm'>No worries, we’ll send you reset instructions</Text>
+                    </VStack>
+                  </ModalHeader>
+                  <ModalBody>
+                    <Input>
+                      <InputField placeholder="Enter your email" />
+                    </Input>
+                  </ModalBody>
+                  <ModalFooter borderTopWidth='$0'>
+                    <VStack space='lg' w='$full'>
+                      <Button
+                        onPress={() => {
+                          setShowModal2(true);
+                        }}
+                      >
+                        <ButtonText>Submit</ButtonText>
+                      </Button>
+                      <HStack>
+                        <Button
+                          variant='link'
+                          size='sm'
+                          onPress={() => {
+                            setShowModal(false);
+                          }}
+                        >
+                          <ButtonIcon as={ArrowLeftIcon}/>
+                          <ButtonText >Back to login</ButtonText>
+                        </Button>
+                      </HStack>
+                    </VStack>
+                  </ModalFooter>
+                </ModalContent>
+              </Modal>
+              <Modal
+                isOpen={showModal2}
+                onClose={() => {
+                  setShowModal2(false);
+                }}
+              >
+                <ModalBackdrop />
+                <ModalContent>
+                  <ModalHeader borderBottomWidth='$0'>
+                  <VStack space='sm'>
+                    <Heading size='lg'>Reset password</Heading>
+                    <Text size='sm'>A verification code has been sent to you. Enter code below.</Text>
+                    </VStack>
+                  </ModalHeader>
+                  <ModalBody>
+                    <Input>
+                      <InputField placeholder="Enter verification code" />
+                    </Input>
+                  </ModalBody>
+                  <ModalFooter borderTopWidth='$0'>
+                  <VStack space='lg' w='$full'>
+                    <Button
+                      onPress={() => {
+                        setShowModal3(true);
+                      }}
+                    >
+                      <ButtonText>Continue</ButtonText>
+                    </Button>
+                    <Text size='sm'>Didn’t receive the email?
+                      <Link ml='$1'><Link.Text size='sm' 
+                      $dark-color='$textDark200'
+                      color='$textLight700'
+                      fontWeight='$semibold'>Click to resend</Link.Text></Link>
+                    </Text>
+                    <HStack space='xs' alignItems='center'>
+                      <Button
+                        variant='link'
+                        size='sm'
+                        onPress={() => {
+                          setShowModal2(false);
+                        }}
+                      >
+                        <ButtonIcon as={ArrowLeftIcon}/>
+                        <ButtonText >Back to login</ButtonText>
+                      </Button>
+                    </HStack>
+                    </VStack>
+                  </ModalFooter>
+                </ModalContent>
+              </Modal>
+              <Modal
+                isOpen={showModal3}
+                onClose={() => {
+                  setShowModal3(false);
+                }}
+              >
+                <ModalBackdrop />
+                <ModalContent>
+                  <ModalHeader borderBottomWidth='$0'>
+                  <VStack space='sm'>
+                    <Heading size='lg'>Set new password</Heading>
+                    <Text size='sm'>Almost done. Enter your new password and you are all set.</Text>
+                    </VStack>
+                  </ModalHeader>
+                  <ModalBody>
+                  <VStack space='xl'>
+                    <Input>
+                      <InputField placeholder="New password" />
+                    </Input>
+                    <Input>
+                      <InputField placeholder="Confirm new password" />
+                    </Input>
+                    </VStack>
+                  </ModalBody>
+                  <ModalFooter borderTopWidth='$0'>
+                  <VStack space='lg' w='$full'>
+                    <Button
+                      onPress={() => {
+                        setShowModal(false);
+                        setShowModal2(false);
+                        setShowModal3(false);
+                      }}
+                    >
+                      <ButtonText>Submit</ButtonText>
+                    </Button>
+                    <HStack space='xs' alignItems='center'>
+                      <Button
+                        variant='link'
+                        size='sm'
+                        onPress={() => {
+                          setShowModal3(false);
+                        }}
+                      >
+                        <ButtonIcon as={ArrowLeftIcon}/>
+                        <ButtonText >Back to login</ButtonText>
+                      </Button>
+                    </HStack>
+                    </VStack>
+                  </ModalFooter>
+                </ModalContent>
+              </Modal>
+            </Center>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Modal,
+        ModalBackdrop,
+        ModalContent,
+        ModalHeader,
+        ModalCloseButton,
+        ModalBody,
+        ModalFooter,
+        Wrapper,
+        useState,
+        Button,
+        ButtonText,
+        ButtonIcon,
+        Text: ModalText,
+        Center,
+        CloseIcon,
+        VStack,
+        HStack,
+        Heading,
+        Icon,
+        Input,
+        InputField,
+        Link,
+        ArrowLeftIcon,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
 
-You can read more on how to animate components [here](/ui/docs/advanced/animations).
+### Modal sizes
 
-#### Usage
+A versatile modal component offering different sizes to accommodate various content types and optimize user experience.
 
-Default styling of all these components can be found in the `components/core/modal` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Modal) of the styled `Modal` components.
+<Wrapper>
+  <CodePreview
+    showArgsController={false}
+    metaData={{
+      code: `
+      function App(){
+        const [showModal, setShowModal] = React.useState(false);
+        const [size, setSize] = React.useState(undefined);
+        const sizes = ['xs', 'sm', 'md', 'lg', 'full']
+        const ref = React.useRef(null);
+        const handleClick = (currentSize) => {
+          setShowModal(true)
+          setSize(currentSize)
+        }
+        return (
+            <Center h={400}>
+            <VStack space='md'>
+            {sizes.map((currentSize) => {
+                return <Button key={currentSize} onPress={() => handleClick(currentSize)}>
+                  <ButtonText>{currentSize}</ButtonText>
+                </Button>
+            })}
+                </VStack>
+                <Modal
+                  isOpen={showModal}
+                  onClose={() => {
+                    setShowModal(false);
+                  }}
+                size={size}
+                  finalFocusRef={ref}
+                >
+                  <ModalBackdrop />
+                  <ModalContent>
+                    <ModalHeader>
+                      <Heading size='lg'>Delete Folder</Heading>
+                      <ModalCloseButton>
+                        <Icon as={CloseIcon} />
+                      </ModalCloseButton>
+                    </ModalHeader>
+                    <ModalBody>
+                      <Text size="sm">
+                      Whoa, slow down there! This modal is like a red light at an intersection, reminding you to stop and think before you proceed. Is deleting this folder the right choice?
+                      </Text>
+                    </ModalBody>
+                    <ModalFooter>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        action="secondary"
+                        mr="$3"
+                        onPress={() => {
+                          setShowModal(false);
+                        }}
+                      >
+                        <ButtonText>Cancel</ButtonText>
+                      </Button>
+                      <Button
+                        size="sm"
+                        action="primary"
+                        borderWidth='$0'
+                        onPress={() => {
+                          setShowModal(false);
+                        }}
+                        bg="$error700"
+                        $hover-bg="$error800"
+                        $active-bg="$error900"
+                      >
+                        <ButtonText>Explore</ButtonText>
+                      </Button>
+                    </ModalFooter>
+                  </ModalContent>
+                </Modal>
+              </Center>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Modal,
+        ModalBackdrop,
+        ModalContent,
+        ModalHeader,
+        ModalCloseButton,
+        ModalBody,
+        ModalFooter,
+        useState,
+        CloseIcon,
+        Button,
+        ButtonText,
+        Heading,
+        Center,
+        Text: ModalText,
+        Icon,
+        VStack,
+        HStack,
+      },
+      argsType: {
+        size: {
+          control: 'select',
+          options: ['xs', 'sm', 'md', 'lg', 'full'],
+          default: 'md',
+        },
+      },
+    }}
+  />
+</Wrapper>
 
-```jsx
-// import the styles
-import {
-  Root,
-  Content,
-  CloseButton,
-  Header,
-  Footer,
-  Body,
-  Backdrop,
-} from '../components/core/modal/styled-components';
-
-// import the createModal function
-import { createModal } from '@gluestack-ui/modal';
-
-// Understanding the API
-const Modal = createModal({
-  Root,
-  Content,
-  CloseButton,
-  Header,
-  Footer,
-  Body,
-  Backdrop,
-  AnimatePresence: Content.AnimatePresence, // Can be AnimatePresence from the library you are using
-});
-
-// Using the modal component
-export default () => (
-  <Modal>
-    <ModalBackdrop />
-    <ModalContent>
-      <ModalHeader>
-        <Heading size="lg">Confirm your request</Heading>
-        <ModalCloseButton>
-          <CloseIcon />
-        </ModalCloseButton>
-      </ModalHeader>
-      <ModalBody>
-        <Text size="sm">Modal Body</Text>
-      </ModalBody>
-      <ModalFooter>
-        <Button>
-          <ButtonText></ButtonText>
-        </Button>
-        <Button>
-          <ButtonText></ButtonText>
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  </Modal>
-);
-```
--->
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 5cf5e5cf0e..a367a3ed22 100644
--- a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx
@@ -865,20 +865,6 @@ Popover component is created using ScrollView component from react-native. It ex
   </TableContainer>
 </>
 
-## Spec Doc
-
-Explore the comprehensive details of the Popover 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%3D5611%253A29696%26type%3Ddesign%26node-id%3D5611-31519%26viewport%3D2622%252C-80%252C0.18%26t%3DLQnju2Pc3821wCiS-1%26scaling%3Dcontain%26starting-point-node-id%3D5611%253A31519%26mode%3Ddesign"
-  allowFullScreen
-/>
-
 <!--
 
 ### Advanced
@@ -948,7 +934,7 @@ The Examples section provides visual representations of the different variants o
 
 A popover component can enhance the avatar by providing additional information and context in a concise and visually appealing manner.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$6' }}
     showComponentRenderer={true}
@@ -1068,4 +1054,4 @@ A popover component can enhance the avatar by providing additional information a
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Pressable/Pressable.tsx b/example/storybook-nativewind/src/components/Pressable/Pressable.tsx
index e7a18a9578..9e418b858e 100644
--- a/example/storybook-nativewind/src/components/Pressable/Pressable.tsx
+++ b/example/storybook-nativewind/src/components/Pressable/Pressable.tsx
@@ -5,20 +5,11 @@ 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>
   );
 };
@@ -28,4 +19,4 @@ PressableBasic.description =
 
 export default PressableBasic;
 
-export { Pressable, Center };
+export { Pressable, Center, Text };
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 f7ba26e685..819c282f12 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
@@ -1,5 +1,5 @@
 ---
-title: Pressable | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Pressable Component | Installation, Usage, and API
 
 description: By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.
 
@@ -31,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>
 `,
@@ -91,3 +91,41 @@ This section provides a comprehensive reference list for the component props, de
 #### Pressable
 
 It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
+
+### 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.
+
+#### Pressable child elements according to its states
+
+You can change the child elements according to the states of Pressable component.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+    <Pressable className="p-16 bg-primary-500">
+      {({ pressed }) => (
+        <Text className={pressed ? 'text-pink-400' : 'text-yellow-400'}>
+          PRESSABLE
+        </Text>
+      )}
+    </Pressable>
+    `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Pressable,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+Similarly, you can change the child elements according to other states of Pressable
+component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`.
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 47005e2548..7e1b9800e4 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
@@ -15,13 +15,11 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="with-gluestack-style/components/Forms/Pressable" />
 
 import { Pressable } from '../../core-components/themed';
-import { Text } from '../../core-components/themed';
-
+import { AppProvider, CodePreview,CollapsibleCode ,Text} from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
+
+
 
 This is an illustration of **Pressable** component.
 
@@ -92,3 +90,39 @@ This section provides a comprehensive reference list for the component props, de
 #### Pressable
 
 It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
+
+### 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.
+
+#### Pressable child elements according to its states
+
+You can change the child elements according to the states of Pressable component.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+ <Pressable p="$16" bg="$primary500"  $hover-bg="$primary400">
+   {({ pressed }) => (
+        <Text color={pressed ? 'pink' : 'yellow'}>PRESSABLE</Text>
+      )}
+</Pressable>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Pressable,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+Similarly, you can change the child elements according to other states of Pressable
+component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`.
diff --git a/example/storybook-nativewind/src/components/Progress/Progress.tsx b/example/storybook-nativewind/src/components/Progress/Progress.tsx
index ec6dd39998..065e44032a 100644
--- a/example/storybook-nativewind/src/components/Progress/Progress.tsx
+++ b/example/storybook-nativewind/src/components/Progress/Progress.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-
-import { VStack, Text, Box, Heading, Center } from '@gluestack-ui/themed';
-
 import { Progress, ProgressFilledTrack } from '@/components/ui/progress';
+import { VStack } from '@/components/ui/vstack';
+import { Box } from '@/components/ui/box';
+import { Heading } from '@/components/ui/heading';
+import { Center } from '@/components/ui/center';
 
 const ProgressBasic = ({ value = 50, ...props }: any) => {
   return (
@@ -31,4 +32,4 @@ ProgressBasic.description =
 
 export default ProgressBasic;
 
-export { Progress, ProgressFilledTrack, VStack, Text, Box, Heading };
+export { Progress, ProgressFilledTrack, VStack, Box, Heading };
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 b381a6df3f..7926acb243 100644
--- a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx
@@ -1,5 +1,5 @@
 ---
-title: Progress | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Progress Component | Installation, Usage, and API
 
 description: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
 
@@ -165,17 +165,151 @@ We have outlined the various features that ensure the Fab component is accessibl
 
 Progress 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
+#### Progress
 
-Explore the comprehensive details of the Progress 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.
+<Wrapper>
+  <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>
+</Wrapper>
+
+> 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.
 
-<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%3D6282-35554%26t%3DSqzrgr3fIhnmO5iO-1%26scaling%3Dscale-down%26page-id%3D6282%253A33652%26starting-point-node-id%3D6282%253A35554%26mode%3Ddesign"
-  allowFullScreen
-/> -->
+### 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.
+
+#### Value
+
+Progress component with value
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <VStack space="lg">
+        <Text size="lg">Downloading 55%</Text>
+        <Progress value={55} className='w-80 h-1'>
+          <ProgressFilledTrack className='h-1' />
+        </Progress>
+      </VStack>
+    `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Progress,
+        ProgressFilledTrack,
+        VStack,
+        Text,
+        Box,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Color
+
+You can add track color to progress bar as per our needs.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="3xl">
+          <Progress value={46} className='w-96 h-2' size="sm">
+            <ProgressFilledTrack className='bg-emerald-600'/>
+          </Progress>
+          <Progress value={46} className='w-96 h-2' size="sm">
+            <ProgressFilledTrack className='bg-amber-600'/>
+          </Progress>
+          <Progress value={46} className='w-96 h-2' size="sm">
+            <ProgressFilledTrack className='bg-fuchsia-600'/>
+          </Progress>
+          <Progress value={46} className='w-96 h-2' size="sm">
+            <ProgressFilledTrack className='bg-cyan-600'/>
+          </Progress>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Progress,
+        ProgressFilledTrack,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Custom
+
+You can customize the progress bar. Below is the example where we have change the theme of progress bar.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="lg">
+        <Heading>Internal Storage</Heading>
+        <Progress value={46} className='w-[410px] h-2 bg-lime-100'>
+          <ProgressFilledTrack className='h-2 bg-lime-500' />
+        </Progress>
+        <Text size="md">14GB</Text>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Progress,
+        ProgressFilledTrack,
+        VStack,
+        Heading,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
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 940d6e5747..f7c0d19d44 100644
--- a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx
@@ -14,13 +14,6 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Feedback/Progress" />
 
-import {
-  Progress,
-  ProgressFilledTrack,
-} from '../../core-components/themed';
-
-import { VStack, Box, Heading } from '../../core-components/themed';
-import { transformedCode } from '../../utils';
 import {
   AppProvider,
   CodePreview,
@@ -28,10 +21,19 @@ import {
   Table,
   TableContainer,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
-
+import {
+  Progress,
+  ProgressFilledTrack,
+  VStack,
+  Box,
+  Heading,
+} from '../../core-components/themed';  
+import { transformedCode } from '../../utils';
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
+
+
 
 This is an illustration of **Progress** component.
 
@@ -211,3 +213,114 @@ Explore the comprehensive details of the Progress in this document, including it
   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%3D6282-35554%26t%3DSqzrgr3fIhnmO5iO-1%26scaling%3Dscale-down%26page-id%3D6282%253A33652%26starting-point-node-id%3D6282%253A35554%26mode%3Ddesign"
   allowFullScreen
 /> -->
+
+
+### 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.
+
+#### Value
+
+Progress component with value
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <VStack space="lg">
+        <Text size="lg">Downloading 55%</Text>
+        <Progress value={55} w='$80' h='$1'>
+          <ProgressFilledTrack h='$1' />
+        </Progress>
+      </VStack>
+    `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Progress,
+        ProgressFilledTrack,
+        VStack,
+        Text,
+        Box,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Color
+
+You can add track color to progress bar as per our needs.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="3xl">
+          <Progress value={46} w='$96' h='$2' size="sm">
+            <ProgressFilledTrack bg="$emerald600"/>
+          </Progress>
+          <Progress value={46} w='$96' h='$2' size="sm">
+            <ProgressFilledTrack bg="$amber600"/>
+          </Progress>
+          <Progress value={46} w='$96' h='$2' size="sm">
+            <ProgressFilledTrack bg="$fuchsia600"/>
+          </Progress>
+          <Progress value={46} w='$96' h='$2' size="sm">
+            <ProgressFilledTrack bg="$cyan600"/>
+          </Progress>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Progress,
+        ProgressFilledTrack,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Custom
+
+You can customize the progress bar. Below is the example where we have change the theme of progress bar.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <VStack space="lg">
+        <Heading>Internal Storage</Heading>
+        <Progress value={46} w={410} h={8} bg="$lime100">
+          <ProgressFilledTrack h={8} bg="$lime500" />
+        </Progress>
+        <Text size="md">14GB</Text>
+        </VStack>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Progress,
+        ProgressFilledTrack,
+        VStack,
+        Heading,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
index f6965b8195..caf9f38dbd 100644
--- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
@@ -47,7 +47,7 @@ This is an illustration of **Radio** component.
         <RadioGroup>
           <Radio value="change" {...props}>
             <RadioIndicator>
-              <RadioIcon as={CircleIcon} strokeWidth={1}/>
+              <RadioIcon as={CircleIcon} className="stroke-1"/>
             </RadioIndicator>
             <RadioLabel >Label</RadioLabel>
           </Radio>
@@ -457,3 +457,457 @@ 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.
+
+#### Multiple Radio
+
+Radio buttons provide a mutually exclusive selection mechanism, allowing users to choose a single option from a set of related choices.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      function App () {
+        const [values, setValues] = React.useState("Eng");
+        return (
+          <RadioGroup value={values} onChange={setValues}>
+            <VStack space="sm">
+              <Radio value="Eng" >
+                <RadioIndicator>
+                  <RadioIcon as={CircleIcon} />
+                </RadioIndicator>
+                <RadioLabel>English</RadioLabel>
+              </Radio>
+              <Radio value="Fre" >
+                <RadioIndicator>
+                  <RadioIcon as={CircleIcon} />
+                </RadioIndicator>
+                <RadioLabel>French</RadioLabel>
+              </Radio>
+              <Radio value="Ger" >
+                <RadioIndicator>
+                  <RadioIcon as={CircleIcon} />
+                </RadioIndicator>
+                <RadioLabel>German</RadioLabel>
+              </Radio>
+            </VStack>
+          </RadioGroup>
+        )
+       }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Center,
+        VStack,
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        CircleIcon,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Horizontal
+
+Radio buttons can be used horizontally.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App() {
+          const [values, setValues] = React.useState("Cash On Delivery")
+          return (
+            <RadioGroup value={values} onChange={setValues} >
+              <HStack space="2xl">
+                <Radio value="Credit Card">
+                  <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                  </RadioIndicator>
+                  <RadioLabel>Credit Card</RadioLabel>
+                </Radio>
+                <Radio value="Cash On Delivery">
+                  <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                  </RadioIndicator>
+                  <RadioLabel>Cash On Delivery</RadioLabel>
+                </Radio>
+              </HStack>
+            </RadioGroup>
+          )
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Center,
+        HStack,
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        CircleIcon,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### With help text
+
+Radio buttons can be used with helper text.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      function App () {
+          const [values, setValues] = React.useState("Read-only");
+          return (
+            <RadioGroup value={values} onChange={setValues}>
+              <VStack space="2xl">
+                <Box>
+                  <Radio value="Read-only" size="md">
+                    <RadioIndicator>
+                      <RadioIcon as={CircleIcon}/>
+                    </RadioIndicator>
+                    <RadioLabel>Extended coverage</RadioLabel>
+                  </Radio>
+                  <Text size="$sm" className="ml-7 text-typography-500">Extra services included</Text>
+                </Box>
+                <Box>
+                  <Radio value="Write" size="md">
+                    <RadioIndicator>
+                      <RadioIcon as={CircleIcon} />
+                    </RadioIndicator>
+                    <RadioLabel>Basic coverage</RadioLabel>
+                  </Radio>
+                  <Text size="$sm" className="ml-7 text-typography-500">Nothing extra included</Text>
+                </Box>
+              </VStack>
+            </RadioGroup>
+          )
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Center,
+        VStack,
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        CircleIcon,
+        Box,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Form Control
+
+Radio buttons can be used inside FormControl for better control of states and functionality.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <FormControl>
+          <VStack space="md">
+            <Heading size="sm">
+              Which time slot works best for you?
+            </Heading>
+            <RadioGroup>
+              <VStack space="sm">
+                <Radio value="Monday" size="md" >
+                  <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                  </RadioIndicator>
+                  <RadioLabel>Monday</RadioLabel>
+                </Radio>
+                <Radio value="Tuesday" size="md">
+                  <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                  </RadioIndicator>
+                  <RadioLabel>Tuesday</RadioLabel>
+                </Radio>
+                <Radio value="Wednesday" size="md">
+                  <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                  </RadioIndicator>
+                  <RadioLabel>Wednesday</RadioLabel>
+                </Radio>
+              </VStack>
+            </RadioGroup>
+            <Text className="text-sm text-light-500">
+              Choose a time slot for the meeting
+            </Text>
+          </VStack>
+        </FormControl>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Center,
+        Text,
+        CircleIcon,
+        VStack,
+        Heading,
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        FormControl,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Label left
+
+Radio buttons can be used horizontally
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      function App() {
+        const [values, setValues] = useState("Monday");
+        return (
+          <RadioGroup value={values} onChange={setValues} >
+            <VStack space="lg" className="w-40">
+              <Radio value="Monday" className="justify-between">
+                <RadioLabel>Jane Cooper</RadioLabel>
+                <RadioIndicator>
+                  <RadioIcon as={CircleIcon} />
+                </RadioIndicator>
+              </Radio>
+              <Radio value="Tuesday" className="justify-between">
+                <RadioLabel>Wade Warren</RadioLabel>
+                <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                </RadioIndicator>
+              </Radio>
+            </VStack>
+          </RadioGroup >
+        )
+      }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Center,
+        VStack,
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        CircleIcon,
+        useState,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Controlled
+
+The Radio components can be used with a controlled state, enabling precise management of the selected option through external state management.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      function App () {
+        const [values, setValues] = useState('Apartments');
+        return (
+          <RadioGroup value={values} onChange={setValues}>
+            <VStack space='md'>
+              <Radio value="Apartments">
+                <RadioIndicator>
+                  <RadioIcon as={CircleIcon} />
+                </RadioIndicator>
+                <RadioLabel>Apartments</RadioLabel>
+              </Radio>
+              <Radio value="Houses">
+                <RadioIndicator>
+                  <RadioIcon as={CircleIcon} />
+                </RadioIndicator>
+                <RadioLabel>Houses</RadioLabel>
+              </Radio>
+            </VStack>
+          </RadioGroup>
+          )
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Center,
+        VStack,
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        CircleIcon,
+        useState,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Uncontrolled
+
+The Radio components can be used with either a ref or no state, providing an uncontrolled state where the selected option is managed internally.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      function App () {
+        const radioRef = useRef(null);
+        const handleRadioChange = (e) => {
+          e.preventDefault();
+          const checkboxValue = radioRef.current.checked;
+        };
+        return (
+          <RadioGroup>
+            <VStack space='md'>
+              <Radio value="Hotels" ref={radioRef} onChange={handleRadioChange} >
+                <RadioIndicator>
+                  <RadioIcon as={CircleIcon} />
+                </RadioIndicator>
+                <RadioLabel>Hotels</RadioLabel>
+              </Radio>
+              <Radio value="Living quarters" ref={radioRef} onChange={handleRadioChange} >
+                <RadioIndicator>
+                  <RadioIcon as={CircleIcon} />
+                </RadioIndicator>
+                <RadioLabel>Living quarters</RadioLabel>
+              </Radio>
+            </VStack>
+          </RadioGroup>
+        );
+      }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Center,
+        VStack,
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        CircleIcon,
+        useRef,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Radio group
+
+The Radio group component allows users to group radio and display them in a horizontal or vertical row for better visual representation and functionality.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function RadioGroupExample() {
+          const [values, setValues] = useState("1st");
+          return (
+            <RadioGroup value={values} onChange={setValues}>
+              <VStack space="sm">
+                <Radio value="1st">
+                  <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                  </RadioIndicator>
+                  <RadioLabel>Label 1</RadioLabel>
+                </Radio>
+                <Radio value="2nd">
+                  <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                  </RadioIndicator>
+                  <RadioLabel>Label 2</RadioLabel>
+                </Radio>
+                <Radio value="3rd">
+                  <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                  </RadioIndicator>
+                  <RadioLabel>Label 3</RadioLabel>
+                </Radio>
+              </VStack>
+            </RadioGroup>
+          );
+        };
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'RadioGroupExample');
+      },
+      scope: {
+        Radio,
+        RadioGroup,
+        RadioIcon,
+        RadioIndicator,
+        RadioLabel,
+        VStack,
+        Wrapper,
+        Center,
+        CircleIcon,
+        useState,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
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 e86b8ff52a..67198ff140 100644
--- a/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx
@@ -51,10 +51,10 @@ This is an illustration of **Radio** component.
       code: `
         <RadioGroup>
           <Radio value="change" {...props}>
-            <RadioIndicator>
+            <RadioIndicator mr='$2'>
               <RadioIcon as={CircleIcon} strokeWidth={1}/>
             </RadioIndicator>
-            <RadioLabel >Label</RadioLabel>
+            <RadioLabel>Label</RadioLabel>
           </Radio>
         </RadioGroup>
       `,
@@ -593,7 +593,7 @@ The Examples section provides visual representations of the different variants o
 
 Radio buttons provide a mutually exclusive selection mechanism, allowing users to choose a single option from a set of related choices.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -644,13 +644,13 @@ Radio buttons provide a mutually exclusive selection mechanism, allowing users t
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Horizontal
 
 Radio buttons can be used horizontally.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -695,13 +695,13 @@ Radio buttons can be used horizontally.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### With help text
 
 Radio buttons can be used with helper text.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -754,13 +754,13 @@ Radio buttons can be used with helper text.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Form Control
 
 Radio buttons can be used inside FormControl for better control of states and functionality.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -819,13 +819,13 @@ Radio buttons can be used inside FormControl for better control of states and fu
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Label left
 
 Radio buttons can be used horizontally
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -871,13 +871,13 @@ Radio buttons can be used horizontally
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Controlled
 
 The Radio components can be used with a controlled state, enabling precise management of the selected option through external state management.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -923,13 +923,13 @@ The Radio components can be used with a controlled state, enabling precise manag
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Uncontrolled
 
 The Radio components can be used with either a ref or no state, providing an uncontrolled state where the selected option is managed internally.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -979,13 +979,13 @@ The Radio components can be used with either a ref or no state, providing an unc
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Radio group
 
 The Radio group component allows users to group radio and display them in a horizontal or vertical row for better visual representation and functionality.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -1037,4 +1037,4 @@ The Radio group component allows users to group radio and display them in a hori
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 5cb379e261..9566aa35a7 100644
--- a/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx
@@ -11,28 +11,27 @@ showHeader: true
 ---
 
 import { Meta } from '@storybook/addon-docs';
-import { useRef, useEffect, useState } from 'react';
 
 <Meta title="with-gluestack-style/components/Forms/Slider" />
 
-import { Slider } from '../../core-components/themed';
+import { useRef, useEffect, useState } from 'react';
 import {
   SliderTrack,
   SliderFilledTrack,
   SliderThumb,
-} from '../../core-components/themed';
-import { HStack, Volume2Icon, Box, Center } from '../../core-components/themed';
-import {
+  HStack,
+  Box, 
+  Center,
   VStack,
-  Volume,
   Text,
-  LightbulbIcon,
   Icon,
   Heading,
   Tooltip,
   TooltipContent,
   Button,
+  Slider
 } from '../../core-components/themed';
+import { Volume, Volume2Icon,LightbulbIcon } from 'lucide-react-native';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -40,10 +39,9 @@ import {
   InlineCode,
   Table,
   TableContainer,
+  CollapsibleCode
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Slider** component.
 
@@ -471,17 +469,385 @@ Slider component is created using View component from react-native. It extends a
   </TableContainer>
 </>
 
-<!--
-## 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.
+
+#### Slider with Orientation
+
+An example of the Slider component being used with the Slider with Orientation feature to customize the orientation of the slider, providing flexibility in the direction of sliding and input for numerical or adjustable values within a user interface.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+  const [sliderValue, setSliderValue] = React.useState(45);
+  const handleChange = (value) => {
+    setSliderValue(value);
+  };
+  return (
+    <Center w="$80">
+      <Slider
+        sliderTrackHeight={4}
+        value={sliderValue}
+        orientation="vertical"
+        h={120}
+        onChange={(value) => {
+        handleChange(value);
+        }}>
+        <SliderTrack>
+          <SliderFilledTrack />
+        </SliderTrack>
+        <SliderThumb />
+      </Slider>
+    </Center>
+  );
+}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Box,
+        Slider,
+        SliderTrack,
+        SliderFilledTrack,
+        SliderThumb,
+        Center,
+        Wrapper,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Color scheme
+
+A Slider component with a color scheme adds visual styling and customization options, allowing the slider track and handle to be displayed in different colors, enhancing the aesthetic appeal and visual coherence of the slider within a user interface.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+  return (
+    <VStack space="4xl">
+    <Center w="$80">
+        <Slider   defaultValue={45} sliderTrackHeight={4}>
+          <SliderTrack>
+            <SliderFilledTrack bg="$emerald600"/>
+          </SliderTrack >
+          <SliderThumb bg="$emerald600" $active-outlineColor="$emerald500" />
+        </Slider>
+    </Center>
+     <Center w="$80">
+        <Slider   defaultValue={45} sliderTrackHeight={4}>
+          <SliderTrack>
+            <SliderFilledTrack bg="$amber600"/>
+          </SliderTrack >
+          <SliderThumb bg="$amber600" $active-outlineColor="$amber500" />
+        </Slider>
+    </Center>
+     <Center w="$80">
+        <Slider  defaultValue={45} sliderTrackHeight={4}>
+          <SliderTrack>
+            <SliderFilledTrack bg="$fuchsia600"/>
+          </SliderTrack >
+          <SliderThumb bg="$fuchsia600" $active-outlineColor="$fuchsia500"/>
+        </Slider>
+    </Center>
+     <Center w="$80">
+        <Slider   defaultValue={45} sliderTrackHeight={4}>
+          <SliderTrack>
+            <SliderFilledTrack bg="$cyan600"/>
+          </SliderTrack >
+          <SliderThumb bg="$cyan600" $active-outlineColor="$cyan500" />
+        </Slider>
+    </Center>
+    </VStack>
+  );
+}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Center,
+        Slider,
+        SliderTrack,
+        SliderFilledTrack,
+        SliderThumb,
+        VStack,
+        Wrapper,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### With tooltip
+
+A Slider component with a tooltip displays a visual indicator or text overlay that provides real-time feedback on the selected value as users interact with the slider, improving usability and precision in inputting or adjusting numeric or continuous data within a user interface.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+  const [sliderValue, setSliderValue] = React.useState(40);
+  const handleChange = (value) => {
+    setSliderValue(value);
+  };
+  return (
+     <HStack space="lg">
+     <Text size="md">$0</Text>
+        <Tooltip
+              placement={"top"}
+              trigger={(triggerProps) => {
+                return (
+                      <Center w="$80">
+                          <Slider
+                           step={5}
+                            sliderTrackHeight={4}
+                            value={sliderValue}
+                            maxValue={60}
+                            minValue={0}
+                            onChange={v => {
+                              handleChange(Math.floor(v));
+                            }}>
+                            <SliderTrack>
+                              <SliderFilledTrack />
+                            </SliderTrack>
+                            <SliderThumb {...triggerProps}/>
+                          </Slider>
+                      </Center>
+                )
+              }}
+            >
+            <TooltipContent>
+              <Text color="white">{"$" + sliderValue}</Text>
+            </TooltipContent>
+          </Tooltip>
+    <Text size="md">$60</Text>
+    </HStack>
+);
+}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Slider,
+        SliderTrack,
+        SliderFilledTrack,
+        SliderThumb,
+        Center,
+        Volume,
+        VStack,
+        HStack,
+        Volume2Icon,
+        Text,
+        Box,
+        Tooltip,
+        TooltipContent,
+        Button,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Form Controlled
+
+A Slider component with form-controlled behavior allows for seamless integration with a form's state management, enabling the slider value to be controlled and updated through a parent component's form state, providing a consistent and synchronized user experience for capturing and manipulating numeric or continuous data within a form.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+  const [sliderValue, setSliderValue] = React.useState(50);
+  const handleChange = (value) => {
+    setSliderValue(value);
+  };
+  return (
+    <VStack space="lg">
+    <Heading size="sm">Select the quantity</Heading>
+    <Center w="$72">
+        <Slider
+          sliderTrackHeight={5}
+          size='md'
+          value={sliderValue}
+          onChange={(value) => {
+          handleChange(value);
+          }}>
+          <SliderTrack>
+            <SliderFilledTrack/>
+          </SliderTrack>
+           <SliderThumb/>
+        </Slider>
+    </Center>
+    <Text size="sm">Slide the knob to select the number of products</Text>
+    </VStack>
+  );
+}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Center,
+        Slider,
+        SliderTrack,
+        SliderFilledTrack,
+        SliderThumb,
+        Center,
+        LightbulbIcon,
+        Icon,
+        Text,
+        VStack,
+        Heading,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Custom
 
-Explore the comprehensive details of the Slider 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.
+A custom Slider component with an icon incorporates a personalized design by combining a graphical symbol or icon with the slider interface, adding a unique visual element and enhancing the user experience when interacting with numeric or continuous data input in a user interface.
 
-<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%3D6449-50331%26t%3DyCpyOJadMBgzgdP2-1%26scaling%3Dscale-down%26page-id%3D6429%253A48430%26starting-point-node-id%3D6449%253A50331%26mode%3Ddesign"
-  allowFullScreen
-/> -->
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+  const [sliderValue, setSliderValue] = React.useState(55);
+  const handleChange = (value) => {
+    setSliderValue(value);
+  };
+  return (
+    <VStack space="lg">
+    <Text size="lg">Brightness</Text>
+    <Center w="$72">
+        <Slider
+          sliderTrackHeight={6}
+          size='lg'
+          value={sliderValue}
+          onChange={(value) => {
+          handleChange(value);
+          }}>
+          <SliderTrack>
+            <SliderFilledTrack bg="$amber600"/>
+          </SliderTrack>
+           <SliderThumb bg="$amber600" p='$1' $active-outlineColor="$amber500">
+            <Icon as={LightbulbIcon} color="white" size="sm"/>
+          </SliderThumb>
+        </Slider>
+    </Center>
+    </VStack>
+  );
+}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Center,
+        Slider,
+        SliderTrack,
+        SliderFilledTrack,
+        SliderThumb,
+        LightbulbIcon,
+        Icon,
+        Text,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Volume
+
+A Slider component used as a volume control allows users to adjust the audio volume by sliding the handle along the track, providing an intuitive and interactive way to control the sound output within a user interface.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+function App(){
+  const [sliderValue, setSliderValue] = React.useState(40);
+  const [onChangeEndValue, setOnChangeEndValue] = React.useState(40);
+  const handleChange = (value) => {
+    setSliderValue(value);
+  };
+  return (
+    <VStack space="2xl">
+      <Box>
+        <Text textAlign="center">current sliderValue - {sliderValue}</Text>
+        <Text textAlign="center">onChangeEndValue - {onChangeEndValue}</Text>
+      </Box>
+      <HStack space="lg">
+        <Volume />
+        <Center w="$80">
+          <Slider
+            sliderTrackHeight={4}
+            value={sliderValue}
+            onChange={v => {
+              handleChange(Math.floor(v));
+            }} 
+            onChangeEnd={v => {
+              v && setOnChangeEndValue(Math.floor(v));
+            }}
+            >
+            <SliderTrack>
+              <SliderFilledTrack />
+            </SliderTrack>
+            <SliderThumb />
+          </Slider>
+        </Center>
+        <Volume2Icon/>
+      </HStack>
+    </VStack>
+  );
+}
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Center,
+        Slider,
+        SliderTrack,
+        SliderFilledTrack,
+        SliderThumb,
+        Center,
+        Volume,
+        VStack,
+        HStack,
+        Volume2Icon,
+        Text,
+        Box,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
\ No newline at end of file
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 796220bcb9..148f8fd386 100644
--- a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx
@@ -30,12 +30,12 @@ This is an illustration of **Spinner** component.
     showArgsController={true}
     metaData={{
       code: `
-          <Spinner {...props}/>
+        <Spinner {...props} color={colors.gray[500]} />
       `,
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Wrapper, Spinner },
+      scope: { Wrapper, Spinner, colors },
       argsType: {
         size: {
           control: 'select',
@@ -112,7 +112,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -135,13 +135,13 @@ A Spinner component with a label provides informative text or a label alongside
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### 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>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -167,4 +167,4 @@ A Spinner component with a color scheme enhances visual appeal by incorporating
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 2c9953dcc2..fa60a7ac2e 100644
--- a/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx
@@ -14,13 +14,11 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Feedback/Spinner" />
 
-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 { AppProvider, CodePreview ,CollapsibleCode} from '@gluestack/design-system';
+import { Spinner, HStack, VStack, Text } from '../../core-components/themed';
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
+
 
 This is an illustration of **Spinner** component.
 
@@ -117,3 +115,68 @@ Explore the comprehensive details of the Spinner in this document, including its
   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
 /> -->
+
+
+
+### 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.
+
+#### Spinner with Label
+
+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.
+
+<Wrapper>
+  <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: {},
+    }}
+  />
+</Wrapper>
+
+#### 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.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <VStack space="md" >
+        <Spinner color="$indigo600" />
+        <Spinner color="$emerald600" />
+        <Spinner color="$amber600" />
+        <Spinner color="$fuchsia600" />
+      </VStack>
+    `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Spinner,
+        VStack,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx b/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx
index 2ad9dbcebb..4bb1c74b83 100644
--- a/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx
+++ b/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx
@@ -26,12 +26,17 @@ const SwitchMeta: ComponentMeta<typeof Switch> = {
       control: 'boolean',
       options: [true, false],
     },
+    defaultValue: {
+      control: 'boolean',
+      options: [true, false],
+    },
   },
   args: {
     size: 'md',
     isDisabled: false,
     isEnabled: false,
     isInvalid: false,
+    defaultValue: false,
   },
 };
 
diff --git a/example/storybook-nativewind/src/components/Switch/Switch.tsx b/example/storybook-nativewind/src/components/Switch/Switch.tsx
index 887e642676..ed5b01cb40 100644
--- a/example/storybook-nativewind/src/components/Switch/Switch.tsx
+++ b/example/storybook-nativewind/src/components/Switch/Switch.tsx
@@ -1,9 +1,18 @@
 import React from 'react';
-import { VStack, Text, HStack } from '@gluestack-ui/themed';
 import { Switch } from '@/components/ui/switch';
+import colors from 'tailwindcss/colors';
 
 const SwitchBasic = ({ ...props }: any) => {
-  return <Switch defaultValue={true} value={props.isEnabled} {...props} />;
+  return (
+    <Switch
+      // value={props.isEnabled}
+      trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
+      thumbColor={colors.gray[50]}
+      activeThumbColor={colors.gray[50]}
+      ios_backgroundColor={colors.gray[300]}
+      {...props}
+    />
+  );
 };
 
 SwitchBasic.description =
@@ -11,4 +20,4 @@ SwitchBasic.description =
 
 export default SwitchBasic;
 
-export { Switch, VStack, Text, HStack };
+export { Switch };
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 b8921c98df..96cc1c7d6a 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,8 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/components/Forms/Switch" />
 
-import { Switch } from '../../core-components/nativewind';
-import { VStack, Text } from '../../core-components/nativewind';
-import { HStack } from '../../core-components/nativewind';
+import colors from 'tailwindcss/colors';
+import { HStack, Switch, VStack, Text } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -39,12 +38,15 @@ This is an illustration of **Switch** component.
     showArgsController={true}
     metaData={{
       code: `
-          <Switch {...props} />
+          <Switch {...props} trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
+      thumbColor={colors.gray[50]}
+      activeThumbColor={colors.gray[50]}
+      ios_backgroundColor={colors.gray[300]} />
       `,
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Wrapper, Switch },
+      scope: { Wrapper, Switch, colors },
       argsType: {
         size: {
           control: 'select',
@@ -258,43 +260,116 @@ We have outlined the various features that ensure the Button component is access
 
 Switch component is created using Switch component from react-native. It extends all the props supported by [React Native Switch](https://reactnative.dev/docs/switch#props).
 
-<!--
-## Spec Doc
+#### Switch
 
-Explore the comprehensive details of the Switch 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.
+<Wrapper>
+  <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>sm | md | lg</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</Wrapper>
 
-<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%3D5970%253A30699%26type%3Ddesign%26node-id%3D5970-32506%26viewport%3D659%252C250%252C0.03%26t%3DYxQQpkFNh6esETpC-1%26scaling%3Dcontain%26starting-point-node-id%3D5970%253A32506%26mode%3Ddesign"
-  allowFullScreen
-/> -->
+> 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.
 
-<!--
-### Customizing the Switch
+### Examples
 
-We have a function called `createSwitch` which can be used to create a custom switch component. This function takes in a configuration object which contains the styled components that you want to use for the switch. You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.
+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.
 
-#### Usage
+#### Switch With Label
 
-Default styling of all these components can be found in the `components/core/switch` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Switch) of the styled `Switch` components.
+An example of a switch component with a label, which includes another switch component for toggling additional options.
 
-```jsx
-// import the styles
-import { Root } from 'components/core/switch/styled-components';
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack space="md">
+          <Switch
+            trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
+            thumbColor={colors.gray[50]}
+            activeThumbColor={colors.gray[50]}
+            ios_backgroundColor={colors.gray[300]}
+          />
+          <Text size="sm" >Allow notifications</Text>
+        </HStack>
+     `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Switch,
+        Text,
+        HStack,
+        colors
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
 
-// import the createSwitch function
-import { createSwitch } from '@gluestack-ui/switch';
+#### Checked State
 
-// Understanding the API
-const Switch = createSwitch({
-  Root,
-});
+An example of a switch component used within a checked state component to represent a pre-selected or activated option.
 
-// Using the switch component
-export default () => <Switch />;
-```
--->
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack space="md">
+          <Switch
+            defaultValue={true}
+            trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
+            thumbColor={colors.gray[50]}
+            activeThumbColor={colors.gray[50]}
+            ios_backgroundColor={colors.gray[300]}
+          />
+          <Text size="sm" >Public profile</Text>
+        </HStack>
+     `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Switch,
+        Text,
+        HStack,
+        colors,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
\ No newline at end of file
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 64fedab797..fd05e7b017 100644
--- a/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx
@@ -292,20 +292,6 @@ Switch component is created using Switch component from react-native. It extends
   </TableContainer>
 </>
 
-## Spec Doc
-
-Explore the comprehensive details of the Switch 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%3D5970%253A30699%26type%3Ddesign%26node-id%3D5970-32506%26viewport%3D659%252C250%252C0.03%26t%3DYxQQpkFNh6esETpC-1%26scaling%3Dcontain%26starting-point-node-id%3D5970%253A32506%26mode%3Ddesign"
-  allowFullScreen
-/>
-
 <!--
 ### Customizing the Switch
 
@@ -340,7 +326,7 @@ The Examples section provides visual representations of the different variants o
 
 An example of a switch component with a label, which includes another switch component for toggling additional options.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -363,13 +349,13 @@ An example of a switch component with a label, which includes another switch com
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Checked State
 
 An example of a switch component used within a checked state component to represent a pre-selected or activated option.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -392,13 +378,13 @@ An example of a switch component used within a checked state component to repres
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 #### Color scheme
 
 An example of a switch component being used with a different color scheme.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -456,4 +442,4 @@ An example of a switch component being used with a different color scheme.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
diff --git a/example/storybook-nativewind/src/components/Text/Text.tsx b/example/storybook-nativewind/src/components/Text/Text.tsx
index bd63b76ed6..1f0e351db8 100644
--- a/example/storybook-nativewind/src/components/Text/Text.tsx
+++ b/example/storybook-nativewind/src/components/Text/Text.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Text } from '@/components/ui/text';
-import { Center } from '@/components/ui/center';
 
 const TextBasic = ({
   size = 'md',
@@ -36,4 +35,4 @@ TextBasic.description =
 
 export default TextBasic;
 
-export { Text, Center };
+export { 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 58ace6d8e6..d63d19af99 100644
--- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx
@@ -230,7 +230,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$2.5' }}
     showComponentRenderer={true}
@@ -266,11 +266,11 @@ Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, `
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 Text component also accepts some shorthands for basic quick styling.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -389,4 +389,4 @@ Text component also accepts some shorthands for basic quick styling.
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
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 08b1aaf15a..3492eaf70c 100644
--- a/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx
@@ -228,7 +228,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$2.5' }}
     showComponentRenderer={true}
@@ -264,11 +264,11 @@ Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, `
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
 
 Text component also accepts some shorthands for basic quick styling.
 
-<AppProvider>
+<Wrapper>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -387,4 +387,4 @@ Text component also accepts some shorthands for basic quick styling.
       </Table.TBody>
     </Table>
   </TableContainer>
-</AppProvider>
+</Wrapper>
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 4fa3d3fda9..fa7229a367 100644
--- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
@@ -315,7 +315,7 @@ We have outlined the various features that ensure the Textarea component is acce
 
 ### Props
 
-Textarea component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
+Textarea component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props) and the props mentioned below.
 
 #### Textarea
 
@@ -363,7 +363,7 @@ The Examples section provides visual representations of the different variants o
 
 The Textarea Component can be incorporated within the FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -402,19 +402,4 @@ The Textarea Component can be incorporated within the FormControl.
       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.
-
-<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%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>
-
+</Wrapper>
\ No newline at end of file
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 41169bdbb1..cffd6d351c 100644
--- a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx
@@ -355,20 +355,6 @@ Textarea component is created using TextInput component from react-native. It ex
   </TableContainer>
 </>
 
-## 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%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>
-
 ### 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.
@@ -377,7 +363,7 @@ The Examples section provides visual representations of the different variants o
 
 The Textarea Component can be incorporated within the FormControl.
 
-<AppProvider>
+<Wrapper>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -416,4 +402,4 @@ The Textarea Component can be incorporated within the FormControl.
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 7cba185d3a..479ad054f3 100644
--- a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx
@@ -30,7 +30,7 @@ import {
   AlertTriangleIcon,
   Pressable,
   Center,
-} from '@gluestack-ui/themed';
+} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -39,12 +39,10 @@ import {
   TableContainer,
   Text,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
-
 import { View } from 'react-native';
-
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Toast** component.
 
@@ -417,20 +415,6 @@ Toast component is created using View component from react-native. It extends al
   </TableContainer>
 </>
 
-## Spec Doc
-
-Explore the comprehensive details of the Toast 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%3D5970%253A25350%26type%3Ddesign%26node-id%3D5970-27266%26viewport%3D1512%252C28%252C0.07%26t%3D2DA6PiUKnE8lxs6Y-1%26scaling%3Dcontain%26starting-point-node-id%3D5970%253A27266%26mode%3Ddesign"
-  allowFullScreen
-/>
-
 <!--
 
 ### Advanced
@@ -491,3 +475,441 @@ 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.
+
+#### Toast with actions
+
+A versatile Toast component with customizable actions, enabling users to take various actions directly from the notification popup for enhanced usability and convenience.
+
+<Wrapper>
+  <CodePreview
+    _rendererWrapper={{ px: '$2.5' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function Example() {
+          const toast = useToast();
+          const toastActions = [
+            {
+              actionType: 'info',
+              title: 'Info',
+              description: 'Your order has been received and is being processed. You will receive a confirmation email shortly.',
+            },
+            {
+              actionType: 'success',
+              title: 'Success!',
+              description: 'Your changes have been saved successfully.',
+            },
+            {
+              actionType: 'warning',
+              title: 'Warning!',
+              description: 'Your account subscription will expire in 5 days. Please renew your subscription to avoid interruption of service.',
+            },
+            {
+              actionType: 'error',
+              title: 'Error!',
+              description: 'There was an error processing your request. Please try again later.',
+            },
+            {
+              actionType: 'attention',
+              title: 'Attention!',
+              description: 'Please review and accept our updated terms and conditions before continuing to use the application.',
+            },
+          ];
+          return (
+            <Center h='$80'>
+              <VStack space='md'>
+                {
+                  toastActions.map((action, index)=>{
+                    return (
+                      <Button
+                        key={index}
+                        onPress={() => {
+                          toast.show({
+                            placement:"top",
+                            render: ({ id }) => {
+                              const toastId = "toast-" + id;
+                              return (
+                                <Toast nativeID={toastId} action={action.actionType}>
+                                  <VStack space="xs">
+                                    <ToastTitle>{action.title}</ToastTitle>
+                                    <ToastDescription >
+                                    {action.description}
+                                    </ToastDescription>
+                                  </VStack>
+                                </Toast>
+                              );
+                            },
+                          });
+                        }}
+                      >
+                        <ButtonText>{action.actionType}</ButtonText>
+                      </Button>
+                    )
+                  })
+                }
+              </VStack>
+            </Center>
+          );
+        };
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'Example');
+      },
+      scope: {
+        View,
+        Wrapper,
+        Toast,
+        ToastTitle,
+        ToastDescription,
+        useToast,
+        Text,
+        Button,
+        ButtonText,
+        VStack,
+        Center,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Toast with variants
+
+A versatile Toast component with multiple variants, offering different styles and visual cues to effectively convey various types of notifications and feedback to users.
+
+<Wrapper>
+  <CodePreview
+    _rendererWrapper={{ px: '$2.5' }}
+    showComponentRenderer={true}
+    showArgsController={true}
+    metaData={{
+      code: `
+      function Example() {
+          const toast = useToast();
+          return (
+            <Button
+              onPress={() => {
+                toast.show({
+                  placement:"top",
+                  render: ({ id }) => {
+                       const toastId = "toast-" + id;
+                        return (
+                        <Toast nativeID={toastId} {...props} action='success'>
+                       <VStack space="xs">
+                        <ToastTitle>Attention!</ToastTitle>
+                        <ToastDescription >
+                        Please review and accept our updated terms and conditions before continuing to use the application.
+                        </ToastDescription>
+                         </VStack>
+                      </Toast>
+                    );
+                  },
+                });
+              }}
+            >
+              <ButtonText>Press Me</ButtonText>
+            </Button>
+          );
+        };
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'Example');
+      },
+      scope: {
+        View,
+        Wrapper,
+        Toast,
+        ToastTitle,
+        ToastDescription,
+        useToast,
+        Text,
+        Button,
+        ButtonText,
+        VStack,
+      },
+      argsType: {
+        variant: {
+          control: 'select',
+          options: ['accent', 'solid', 'outline'],
+          default: 'solid',
+        },
+      },
+    }}
+  />
+</Wrapper>
+
+#### Toast with placement
+
+A Toast component with different placement options allows for the flexible positioning of toast notifications, enabling them to appear in various locations within a user interface, enhancing user visibility and providing a customizable approach to displaying temporary messages or alerts.
+
+<Wrapper>
+  <CodePreview
+    metaData={{
+      code: `
+        function Example() {
+          const toast = useToast();
+          const placements = {
+            'bottom': 'Looks like you found the hiding spot at the bottom of the page!',
+            'top': 'The top spot is your favorite hiding spot! Keep hunting for success.',
+            'top right': "You\'re hiding in plain sight at the top right corner! You are good at this game.",
+            'top left': "You\'re a master of disguise hiding in the top left corner! Keep up the sneakiness.",
+            'bottom left': "You\'re not the best at hiding, but we found you in the bottom left corner.",
+            'bottom right': "Found you! Don\'t worry, we wont tell anyone.",
+          }
+          const {...props}
+          return (
+            <Button
+              onPress={() => {
+                toast.show({
+                  placement: placement,
+                  render: ({ id }) => {
+                      const toastId = "toast-" + id;
+                      return (
+                        <Toast nativeID={toastId}>
+                        <ToastDescription>{placements[placement]}</ToastDescription>
+                      </Toast>
+                    );
+                  },
+                });
+              }}
+            >
+              <ButtonText>Press Me</ButtonText>
+            </Button>
+          );
+        };
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'Example');
+      },
+      scope: {
+        View,
+        Wrapper,
+        Toast,
+        ToastTitle,
+        ToastDescription,
+        useToast,
+        Text,
+        Button,
+        ButtonText,
+      },
+      argsType: {
+        placement: {
+          control: 'select',
+          options: [
+            'bottom',
+            'top',
+            'top right',
+            'top left',
+            'bottom left',
+            'bottom right',
+          ],
+          default: 'bottom',
+        },
+      },
+    }}
+  />
+</Wrapper>
+
+#### Dismissable Toast
+
+A dismissable Toast component offers users the ability to dismiss or close the toast notification, providing control and convenience in managing temporary messages or alerts within a user interface.
+
+<Wrapper>
+  <CodePreview
+    showArgsController={false}
+    metaData={{
+      code: `
+        function Example() {
+          const toast = useToast();
+          return (
+            <Button
+              onPress={() => {
+                toast.show({
+                  placement: 'top',
+                  render: ({ id }) => {
+                    const toastId = "toast-" + id;
+                    return (
+                      <Toast bg='$success700' nativeID={toastId}>
+                        <Icon as={CheckIcon} color='$white' mt='$1' mr='$3' />
+                        <VStack space='xs'>
+                        <ToastTitle color='$textLight50' >Download Complete</ToastTitle>
+                        <ToastDescription color='$textLight50'>Your file 'wadewarren.docx' has been downloaded successfully. You can find it in your Downloads folder.</ToastDescription>
+                        </VStack>
+                       <Pressable mt='$1' onPress={() => toast.close(id)}>
+                        <Icon as={CloseIcon} color='$coolGray50' />
+                       </Pressable>
+                      </Toast>
+                    );
+                  },
+                });
+              }}
+            >
+              <ButtonText>Press Me</ButtonText>
+            </Button>
+          );
+        };
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'Example');
+      },
+      scope: {
+        View,
+        Wrapper,
+        Toast,
+        ToastTitle,
+        ToastDescription,
+        useToast,
+        Text,
+        Icon,
+        CloseIcon,
+        VStack,
+        CheckIcon,
+        Button,
+        ButtonText,
+        Pressable,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Toast custom duration
+
+A Toast component with custom duration allows for specifying the length of time the toast notification remains visible, offering flexibility in controlling the duration of temporary messages or alerts within a user interface.
+
+<Wrapper>
+  <CodePreview
+    metaData={{
+      code: `
+        function Example() {
+          const toast = useToast();
+          const {...props}
+          return (
+            <Button
+              onPress={() => {
+                toast.show({
+                  placement: 'top',
+                  duration: duration,
+                  render: ({ id }) => {
+                    const toastId = "toast-" + id;
+                    return (
+                      <Toast bg='$secondary700' nativeID={toastId} p='$3'>
+                        <Icon as={MessageCircle}  color='$white' mt='$1' mr='$3' />
+                        <VStack space='xs'>
+                        <ToastTitle color='$textLight50'>New Message</ToastTitle>
+                        <ToastDescription color='$textLight50'>Hey, just wanted to touch base and see how you're doing. Let's catch up soon!</ToastDescription>
+                        </VStack>
+                         <Pressable mt='$1' onPress={() => toast.close(id)}>
+                        <Icon as={CloseIcon} color='$coolGray50' />
+                       </Pressable>
+                      </Toast>
+                    );
+                  },
+                });
+              }}
+            >
+              <ButtonText>Press Me</ButtonText>
+            </Button>
+          );
+        };
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'Example');
+      },
+      scope: {
+        View,
+        Wrapper,
+        Toast,
+        ToastTitle,
+        ToastDescription,
+        useToast,
+        Text,
+        Button,
+        ButtonText,
+        Pressable,
+        Icon,
+        CloseIcon,
+        VStack,
+        MessageCircle,
+      },
+      argsType: {
+        duration: {
+          control: 'input',
+          default: 5000,
+        },
+      },
+    }}
+  />
+</Wrapper>
+
+#### Preserve Toast
+
+A Toast component with preserve toast functionality retains the notification on the screen until explicitly dismissed, ensuring important messages or alerts remain visible and accessible to the user, even during subsequent interactions within the user interface.
+
+<Wrapper>
+  <CodePreview
+    showArgsController={false}
+    metaData={{
+      code: `
+        function Example() {
+          const toast = useToast();
+          return (
+            <Button
+              onPress={() => {
+                toast.show({
+                  placement: 'top',
+                  duration: null,
+                  render: ({ id }) => {
+                    const toastId = "toast-" + id;
+                    return (
+                      <Toast bg='$error700' nativeID={toastId} p='$3'>
+                        <Icon as={AlertTriangleIcon} color='$white' mt='$1' mr='$3' />
+                        <VStack space='xs'>
+                        <ToastTitle color='$textLight50' >Account Security Alert</ToastTitle>
+                        <ToastDescription color='$textLight50'>Your account password was recently changed.
+                        If you did not authorize this change, please contact our support team immediately.
+                        </ToastDescription>
+                        </VStack>
+                           <Pressable mt='$1' onPress={() => toast.close(id)}>
+                        <Icon as={CloseIcon} color='$coolGray50' />
+                       </Pressable>
+                      </Toast>
+                    );
+                  },
+                });
+              }}
+            >
+              <ButtonText>Press Me</ButtonText>
+            </Button>
+          );
+        };
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'Example');
+      },
+      scope: {
+        View,
+        Wrapper,
+        Toast,
+        ToastTitle,
+        ToastDescription,
+        useToast,
+        Text,
+        Icon,
+        CloseIcon,
+        Pressable,
+        VStack,
+        AlertTriangleIcon,
+        Button,
+        ButtonText,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
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 83887ff071..9b862a8f4d 100644
--- a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
@@ -20,15 +20,18 @@ import {
   TooltipText,
   Button,
   ButtonText,
-} from '../../core-components/themed';
-import { Box, Heading, Edit, Center } from '@gluestack-ui/themed';
-import { VStack, Command, Icon } from '@gluestack-ui/themed';
-import {
   Avatar,
   AvatarGroup,
   AvatarFallbackText,
   HStack,
-} from '@gluestack-ui/themed';
+  Box, 
+  Heading,
+  Edit,
+  Center,
+  VStack,
+  Command, 
+  Icon 
+} from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -37,10 +40,9 @@ import {
   TableContainer,
   Text,
   InlineCode,
+  CollapsibleCode
 } from '@gluestack/design-system';
-
 import Wrapper from '../../core-components/themed/Wrapper';
-import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Tooltip** component.
 
@@ -493,16 +495,157 @@ Props to style child components.
 
 We have outlined the various features that ensure the Tooltip component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the [ WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).
 
-## Spec Doc
+### Examples
+
+#### Tooltip with Heading
 
-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.
+A tooltip component with an avatar is a user interface element that displays a small pop-up box of additional information when the user hovers over or interacts with an avatar or an icon.
 
-<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%3D6003-30473%26t%3D94Rlaz8y4WQXlTT6-1%26scaling%3Dscale-down%26page-id%3D6003%253A28666%26starting-point-node-id%3D6003%253A30473%26mode%3Ddesign"
-  allowFullScreen
-/>
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+       function App(){
+        const avatars = [
+          { src: 'https://example.com.jpg', alt: 'Sandeep Srivastva' , color:'$emerald600' },
+          { src: 'https://example.com.jpg', alt: 'Arjun Kapoor', color:'$cyan600' },
+          { src: 'https://example.com.jpg', alt: 'Ritik Sharma ', color:'$indigo600' },
+        ];
+          return (
+            <Box h="$96" justifyContent="center">
+              <AvatarGroup flexDirection='row'>
+                <Tooltip
+                  placement={"top"}
+                  trigger={(triggerProps) => {
+                    return (
+                      <Avatar
+                        size="lg"
+                        color="$white"
+                        borderColor="$white"
+                        borderWidth="$2"
+                        $dark-borderColor="$black"
+                        {...triggerProps}
+                      >
+                        <AvatarFallbackText>+ 3</AvatarFallbackText>
+                      </Avatar>
+                    )
+                  }}
+                >
+                  <TooltipContent
+                    p="$5"
+                    maxWidth='$72'
+                    bg="white"
+                    $dark-bg="$backgroundDark900"
+                  >
+                    <VStack boderRadius="$2" space='md'>
+                      <Heading size="sm" lineHeight='$md'>View all members of this channel</Heading>
+                      <Center>
+                        <Text fontSize="$sm" lineHeight='$md'>Includes John, Sarah, Mike, Emily</Text>
+                        <Text fontSize="$sm" lineHeight='$md'>and David</Text>
+                      </Center>
+                    </VStack>
+                  </TooltipContent>
+                </Tooltip>
+                {avatars.map((avatar, index) => {
+                  return (
+                    <Avatar key={index} size="lg" borderColor="$white" borderWidth="$2" bgColor={avatar.color} $dark-bordeColor="$black">
+                      <AvatarFallbackText>{avatar.alt}</AvatarFallbackText>
+                    </Avatar>
+                  );
+                })}
+              </AvatarGroup>
+            </Box>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Avatar,
+        AvatarGroup,
+        AvatarFallbackText,
+        Wrapper,
+        HStack,
+        Tooltip,
+        TooltipContent,
+        TooltipText,
+        Text,
+        Box,
+        Heading,
+        VStack,
+        Center,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
+
+#### Tooltip with Icon
+
+A tooltip component with an icon is a user interface element that provides contextual information or explanatory text when the user hovers over or interacts with an icon.
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App(){
+          return (
+            <Box h="$96" justifyContent="center">
+              <Tooltip
+                  placement={"top"}
+                  trigger={(triggerProps) => {
+                    return (
+                    <Avatar size="md" {...triggerProps} bg="$indigo600">
+                      <Icon as={Edit} color="$white" size="sm" />
+                    </Avatar>
+                    )
+                  }}
+              >
+                <TooltipContent
+                bg="$white"
+                $dark-bg="$backgroundDark900"
+                >
+                  <Box  p="$2.5" boderRadius="$2">
+                    <Text size="sm">New message</Text>
+                    <HStack space="xs"  p="$1" ml="$3">
+                          <Avatar size="xs"  bg="$trueGray500" rounded="$sm">
+                              <Icon as={Command} color="$white"/>
+                          </Avatar>
+                          <Avatar size="xs"  bg="$trueGray500" rounded="$sm">
+                            <AvatarFallbackText>N</AvatarFallbackText>
+                          </Avatar>
+                    </HStack>
+                  </Box>
+                </TooltipContent>
+              </Tooltip>
+            </Box>
+        );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Avatar,
+        AvatarFallbackText,
+        Wrapper,
+        HStack,
+        Tooltip,
+        TooltipContent,
+        TooltipText,
+        Text,
+        Box,
+        Heading,
+        Edit,
+        Command,
+        Icon,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>
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 a5ddfdaa53..ed2bad3834 100644
--- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
@@ -181,7 +181,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$2.5' }}
     showComponentRenderer={true}
@@ -201,4 +201,4 @@ A VStack component with the reversed prop reverses the order of vertically stack
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
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 5b4afbe5fd..c4aca65549 100644
--- a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx
@@ -180,7 +180,7 @@ The Examples section provides visual representations of the different variants o
 
 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>
+<Wrapper>
   <CodePreview
     _rendererWrapper={{ py: '$2.5' }}
     showComponentRenderer={true}
@@ -200,4 +200,4 @@ A VStack component with the reversed prop reverses the order of vertically stack
       argsType: {},
     }}
   />
-</AppProvider>
+</Wrapper>
diff --git a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
index 5be5c4c426..4f99775c4c 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, Platform } from 'react-native';
 import {
   tva,
   withStyleContext,
+  withStyleContextAndStates,
   useStyleContext,
+  cssInterop,
+  VariantProps,
 } from '@gluestack-ui/nativewind-utils';
-import { cssInterop } from 'nativewind';
 
 const badgeStyle = tva({
-  base: 'flex-row items-center rounded-xs data-[disabled=true]:opacity-50 px-2',
+  base: 'flex-row items-center rounded-sm data-[disabled=true]:opacity-50 px-2',
 
   variants: {
     action: {
@@ -36,6 +38,11 @@ const badgeTextStyle = tva({
       info: 'text-info-600',
       muted: 'text-muted-600',
     },
+    size: {
+      sm: 'text-2xs',
+      md: 'text-xs',
+      lg: 'text-sm',
+    },
   },
   variants: {
     isTruncated: {
@@ -50,19 +57,6 @@ const badgeTextStyle = tva({
     strikeThrough: {
       true: 'line-through',
     },
-    size: {
-      '2xs': 'text-2xs',
-      'xs': 'text-xs',
-      'sm': 'text-sm',
-      'md': 'text-md',
-      'lg': 'text-lg',
-      'xl': 'text-xl',
-      '2xl': 'text-2xl',
-      '3xl': 'text-3xl',
-      '4xl': 'text-4xl',
-      '5xl': 'text-5xl',
-      '6xl': 'text-6xl',
-    },
     sub: {
       true: 'text-xs',
     },
@@ -85,23 +79,23 @@ const badgeIconStyle = tva({
       info: 'text-info-600',
       muted: 'text-muted-600',
     },
-  },
-  variants: {
     size: {
-      '2xs': 'h-3 w-3',
-      'xs': 'h-3.5 w-3.5',
-      'sm': 'h-4 w-4',
-      'md': 'h-4.5 w-4.5',
-      'lg': 'h-5 w-5',
-      'xl': 'h-6 w-6',
+      sm: 'h-3 w-3',
+      md: 'h-3.5 w-3.5',
+      lg: 'h-4 w-4',
     },
   },
 });
 
-const ContextView = withStyleContext(View);
+const ContextView =
+  Platform.OS === 'web'
+    ? withStyleContext(View)
+    : withStyleContextAndStates(View);
 
 cssInterop(ContextView, { className: 'style' });
 
+type IBadgeProps = React.ComponentProps<typeof ContextView> &
+  VariantProps<typeof badgeStyle>;
 const Badge = ({
   children,
   action = 'info',
@@ -109,7 +103,7 @@ const Badge = ({
   size = 'md',
   className,
   ...props
-}: any) => {
+}: { className?: string } & IBadgeProps) => {
   return (
     <ContextView
       className={badgeStyle({ action, variant, class: className })}
@@ -125,14 +119,21 @@ const Badge = ({
   );
 };
 
-const BadgeText = ({ children, className, size, ...props }: any) => {
-  const { size: parentSize, action } = useStyleContext();
+type IBadgeTextProps = React.ComponentProps<typeof Text> &
+  VariantProps<typeof badgeTextStyle>;
+const BadgeText = ({
+  children,
+  className,
+  size,
+  ...props
+}: { className?: string } & IBadgeTextProps) => {
+  const { size: parentSize, action: parentAction } = useStyleContext();
   return (
     <Text
       className={badgeTextStyle({
         parentVariants: {
           size: parentSize,
-          action,
+          action: parentAction,
         },
         size,
         class: className,
@@ -144,15 +145,23 @@ const BadgeText = ({ children, className, size, ...props }: any) => {
   );
 };
 
-const BadgeIcon = ({ className, size, as: AsComp, ...props }: any) => {
-  const { size: parentSize, action } = useStyleContext();
+type IBadgeIconProps = React.ComponentProps<typeof View> & {
+  as?: any;
+};
+const BadgeIcon = ({
+  className,
+  size,
+  as: AsComp,
+  ...props
+}: IBadgeIconProps & { className?: any }) => {
+  const { size: parentSize, action: parentAction } = useStyleContext();
   if (AsComp) {
     return (
       <AsComp
         className={badgeIconStyle({
           parentVariants: {
             size: parentSize,
-            action,
+            action: parentAction,
           },
           size,
           class: className,
@@ -166,7 +175,7 @@ const BadgeIcon = ({ className, size, as: AsComp, ...props }: any) => {
       className={badgeIconStyle({
         parentVariants: {
           size: parentSize,
-          action,
+          action: parentAction,
         },
         size,
         class: className,
diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
index 3fa71fcbff..177878d071 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
@@ -37,17 +37,17 @@ cssInterop(UIButton.Spinner, { className: 'style' });
 cssInterop(UIButton.Icon, { className: 'style' });
 
 const buttonStyle = tva({
-  base: 'group/button rounded-lg bg-primary-500 flex-row items-center justify-center data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40',
+  base: 'group/button rounded-lg bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40',
   variants: {
     action: {
       primary:
-        'bg-primary-500 hover:bg-primary-600 active:bg-primary-700  border-primary-300 hover:border-primary-400 active:border-primary-500 data-[focus-visible=true]:web:ring-primary-500',
+        'bg-primary-500 hover:bg-primary-600 active:bg-primary-700  border-primary-300 hover:border-primary-400 active:border-primary-500 data-[focus-visible=true]:web:ring-primary-300',
       secondary:
-        'bg-secondary-500 border-secondary-300 hover:bg-secondary-600 hover:border-secondary-400 active:bg-secondary-700 active:border-secondary-500 data-[focus-visible=true]:web:ring-secondary-500',
+        'bg-secondary-500 border-secondary-300 hover:bg-secondary-600 hover:border-secondary-400 active:bg-secondary-700 active:border-secondary-500 data-[focus-visible=true]:web:ring-secondary-300',
       positive:
-        'bg-success-500 border-success-300 hover:bg-success-600 hover:border-success-400 active:bg-success-700 active:border-success-500 data-[focus-visible=true]:web:ring-success-500',
+        'bg-success-500 border-success-300 hover:bg-success-600 hover:border-success-400 active:bg-success-700 active:border-success-500 data-[focus-visible=true]:web:ring-success-300',
       negative:
-        'bg-error-500 border-error-300 hover:bg-error-600 hover:border-error-400 active:bg-error-700 active:border-error-500 data-[focus-visible=true]:web:ring-error-500',
+        'bg-error-500 border-error-300 hover:bg-error-600 hover:border-error-400 active:bg-error-700 active:border-error-500 data-[focus-visible=true]:web:ring-error-300',
       default: 'bg-transparent hover:bg-background-50 active:bg-transparent',
     },
     variant: {
diff --git a/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx
index 8078a9edaf..4daf907bf3 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx
@@ -5,7 +5,7 @@ import { View } from 'react-native';
 const cardStyle = tva({
   variants: {
     size: {
-      sm: 'p-3 rounded-sm',
+      sm: 'p-3 rounded',
       md: 'p-4 rounded-md',
       lg: 'p-6 rounded-xl',
     },
diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
index ac86639bf5..31e788274f 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
@@ -47,7 +47,7 @@ const checkboxIndicatorStyle = tva({
 });
 
 const checkboxLabelStyle = tva({
-  base: 'text-typography-600 data-[checked=true]:text-typography-900 group-hover/checkbox:text-typography-900 group-hover/checkbox:data-[checked=true]:text-typography-900 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:text-typography-900 group-hover/checkbox:data-[disabled=true]:text-typography-600 active:text-typography-900 active:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none',
+  base: 'text-typography-600 data-[checked=true]:text-typography-900 group-hover/checkbox:text-typography-900 group-hover/checkbox:data-[checked=true]:text-typography-900 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:text-typography-900 group-hover/checkbox:data-[disabled=true]:text-typography-400 active:text-typography-900 active:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none',
   parentVariants: {
     size: {
       lg: 'text-lg',
diff --git a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
index 31ec46238e..ec8b075598 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
@@ -26,7 +26,7 @@ cssInterop(UIFab.Label, { className: 'style' });
 cssInterop(UIFab.Icon, { className: 'style' });
 
 const fabStyle = tva({
-  base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-red-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:outline-2 data-[focus=true]:outline-primary-700 data-[focus=true]:outline-solid',
+  base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-primary-700',
   variants: {
     size: {
       sm: 'px-2.5 py-2.5 text-sm',
diff --git a/example/storybook-nativewind/src/core-components/nativewind/index.ts b/example/storybook-nativewind/src/core-components/nativewind/index.ts
index 9d570d6744..d24c280d57 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/index.ts
+++ b/example/storybook-nativewind/src/core-components/nativewind/index.ts
@@ -7,6 +7,7 @@ export * from './avatar';
 export * from './badge';
 export * from './box';
 export * from './flat-list';
+export * from './card';
 export * from './center';
 export * from './checkbox';
 export * from './hstack';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
index ab20694599..8f15850a52 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
@@ -23,7 +23,7 @@ const UIInput = createInput({
 });
 
 const inputStyle = tva({
-  base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-border-400 data-[focus=true]:border-primary-700 focus:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300',
+  base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300',
 
   variants: {
     size: {
@@ -35,25 +35,25 @@ const inputStyle = tva({
 
     variant: {
       underlined:
-        'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:focus:border-error-700 data-[invalid=true]:focus:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 focus:web:ring-1 focus:web:ring-inset focus:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:focus:hover:web:ring-1 data-[invalid=true]:focus:hover:web:ring-inset data-[invalid=true]:focus:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
+        'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
 
       outline:
-        'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:focus:border-error-700 data-[invalid=true]:focus:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 focus:web:ring-1 focus:web:ring-inset focus:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:focus:hover:web:ring-1 data-[invalid=true]:focus:hover:web:ring-inset data-[invalid=true]:focus:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
+        'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
 
       rounded:
-        'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:focus:border-error-700 data-[invalid=true]:focus:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 focus:web:ring-1 focus:web:ring-inset focus:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:focus:hover:web:ring-1 data-[invalid=true]:focus:hover:web:ring-inset data-[invalid=true]:focus:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
+        'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
     },
   },
 });
 
 const inputIconStyle = tva({
-  base: 'text-typography-400 fill-none',
+  base: 'text-typography-400',
   parentVariants: {
     size: {
       '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',
     },
@@ -65,7 +65,7 @@ const inputSlotStyle = tva({
 });
 
 const inputFieldStyle = tva({
-  base: 'flex-1 text-text-900 web:cursor-text web:data-[disabled=true]:cursor-not-allowed py-auto px-3 placeholder:text-typography-500',
+  base: 'flex-1 text-typography-900 web:cursor-text web:data-[disabled=true]:cursor-not-allowed py-auto px-3 placeholder:text-typography-500',
 
   parentVariants: {
     variant: {
diff --git a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
index bb317f3a52..6630cfa9ca 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
@@ -1,5 +1,6 @@
 import { createLink } from '@gluestack-ui/link';
-import { Pressable, Platform, Text } from 'react-native';
+import { Pressable, Platform } from 'react-native';
+import { Text } from 'react-native';
 
 import {
   tva,
diff --git a/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
index df64828ba1..1c981bceb3 100644
--- a/example/storybook-nativewind/src/core-components/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/core-components/nativewind/progress/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx
index df1e2223ab..885ab64738 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx
@@ -29,9 +29,6 @@ const progressStyle = tva({
       '2xl': 'h-6',
     },
   },
-  defaultVariants: {
-    size: 'md',
-  },
 });
 const progressFilledTrackStyle = tva({
   base: 'bg-primary-500 rounded-full',
diff --git a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
index 91e306d3ae..0b53ea8ec5 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
@@ -1,146 +1,51 @@
-import { styled } from '@gluestack-style/react';
-import { Switch as RNSwitch } from 'react-native';
+import React from 'react';
+import { Switch as RNSwitch, Platform } from 'react-native';
 import { createSwitch } from '@gluestack-ui/switch';
+import {
+  tva,
+  withStyleContextAndStates,
+  withStyleContext,
+  cssInterop,
+  VariantProps,
+} from '@gluestack-ui/nativewind-utils';
+
+const UISwitch = createSwitch({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(RNSwitch)
+      : withStyleContextAndStates(RNSwitch),
+});
 
-const StyledRoot = styled(
-  RNSwitch,
-  {
-    'props': {
-      // todo: add support for this in style.gluestack.io
-      // trackColor: { false: '$background300', true: '$primary600' },
-
-      // hacky fix for the above
-      //@ts-ignore
-      trackColor: { false: '$background300', true: '$primary600' },
-      thumbColor: '$background0',
-      //@ts-ignore
-      activeThumbColor: '$background0',
-
-      // for ios specifically in unchecked state
-      ios_backgroundColor: '$background300',
-    },
-
-    'borderRadius': '$full',
-
-    'variants': {
-      //@ts-ignore
-
-      size: {
-        sm: {
-          transform: [
-            {
-              scale: 0.75,
-            },
-          ],
-        },
-        md: {},
-        lg: {
-          transform: [
-            {
-              scale: 1.25,
-            },
-          ],
-        },
-      },
-    },
-
-    '_web': {
-      ':focus': {
-        outlineWidth: 0,
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-      },
-    },
-
-    'defaultProps': {
-      size: 'md',
-    },
-
-    ':disabled': {
-      '_web': {
-        'cursor': 'pointer',
-        ':disabled': {
-          cursor: 'not-allowed',
-        },
-      },
-      'opacity': 0.4,
-      //@ts-ignore
-      'trackColor': { false: '$background300', true: '$primary600' },
-      // for ios specifically in unchecked state
-      'ios_backgroundColor': '$background300',
-      ':hover': {
-        props: {
-          //@ts-ignore
-          trackColor: { false: '$background300', true: '$primary600' },
-        },
-      },
-    },
-
-    ':invalid': {
-      borderColor: '$error700',
-      borderRadius: 12,
-      borderWidth: 2,
-    },
-
-    ':hover': {
-      'props': {
-        // todo: add support for this in style.gluestack.io
-        // trackColor: { false: '$background400', true: '$primary700' },
-
-        // hacky fix for the above
-        //@ts-ignore
-
-        trackColor: { false: '$background400', true: '$primary700' },
-        ios_backgroundColor: '$background400',
-      },
-      ':invalid': {
-        props: {
-          // todo: add support for this in style.gluestack.io
-          // trackColor: { false: '$background400', true: '$primary700' },
+cssInterop(UISwitch, { className: 'style' });
 
-          // hacky fix for the above
-          //@ts-ignore
+const switchStyle = tva({
+  base: 'data-[focus=true]:outline-0 data-[focus=true]:ring-2 data-[focus=true]:ring-primary-700 web:cursor-pointer disabled:cursor-not-allowed data-[disabled=true]:opacity-40 data-[invalid=true]:border-error-700 data-[invalid=true]:rounded-xl data-[invalid=true]:border-2',
 
-          trackColor: { false: '$background300', true: '$primary700' },
-        },
-      },
-    },
-
-    ':checked': {
-      props: {
-        //@ts-ignore
-        thumbColor: '$background0',
-      },
+  variants: {
+    size: {
+      sm: 'scale-75',
+      md: '',
+      lg: 'scale-125',
     },
   },
-  {
-    componentName: 'Switch',
-    resolveProps: [
-      'thumbColor',
-      'trackColor',
-      'activeThumbColor',
-      'ios_backgroundColor',
-    ],
-  } as const,
-  {
-    propertyTokenMap: {
-      trackColor: 'colors',
-      thumbColor: 'colors',
-      activeThumbColor: 'colors',
-      ios_backgroundColor: 'colors',
-    },
-    propertyResolver: {
-      trackColor: (rawValue: any, resolver: any) => {
-        const resolveColor = {
-          true: resolver(rawValue.true),
-          false: resolver(rawValue.false),
-        };
-        return resolveColor;
-      },
-    },
+});
+
+type ISwitchProps = React.ComponentProps<typeof UISwitch> &
+  VariantProps<typeof switchStyle>;
+const Switch = React.forwardRef(
+  (
+    { className, size = 'md', ...props }: { className?: string } & ISwitchProps,
+    ref
+  ) => {
+    return (
+      <UISwitch
+        ref={ref}
+        {...props}
+        className={switchStyle({ size, class: className })}
+      />
+    );
   }
 );
 
-export const Switch = createSwitch({
-  Root: StyledRoot,
-});
+Switch.displayName = 'Switch';
+export { Switch };
diff --git a/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
index fe3d9a1dd1..b24dab639f 100644
--- a/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
@@ -2,7 +2,6 @@ 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 './gluestack-ui-provider/config';
 
 const Provider = createProvider({ StyledProvider }) as any;
 Provider.displayName = 'Provider';
@@ -12,22 +11,16 @@ const Wrapper = ({ children, ...props }: any) => {
   return (
     // @ts-ignore
     <Box dataSet={{ 'theme-id': `withGluestackStyle_${colorMode}` }}>
-      <Provider
-        colorMode="light"
-        config={config}
-        style={{ flex: 1, height: '100%' }}
+      <Box
+        sx={{
+          _ios: {
+            h: '100%',
+          },
+        }}
+        {...props}
       >
-        <Box
-          sx={{
-            _ios: {
-              h: '100%',
-            },
-          }}
-          {...props}
-        >
-          <Center height="100%">{children}</Center>
-        </Box>
-      </Provider>
+        <Center height="100%">{children}</Center>
+      </Box>
     </Box>
   );
 };
diff --git a/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx b/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
index 5f38711712..83ab1dcd38 100644
--- a/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
@@ -174,7 +174,7 @@ const StyledText = styled(
   Text,
   {
     color: '$text700',
-    flex: 1,
+    // flex: 1,
     fontWeight: '$normal',
     fontFamily: '$body',
     fontStyle: 'normal',
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 3772a1924a..dd7b4d7e47 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
@@ -246,7 +246,7 @@ Create a `components/ui` folder inside `src` folder and add path in `tsconfig.js
 
 ### Step 5: Configure GluestackUIProvider
 
-To add config, create a `GluestackUIProvider/config.ts` file in your `components/` folder and paste the following code.
+To add config, create a `gluestack-ui-provider/config.ts` file in your `components/` folder and paste the following code.
 
 <CollapsibleCode>
 
@@ -256,7 +256,7 @@ To add config, create a `GluestackUIProvider/config.ts` file in your `components
 
 </CollapsibleCode>
 
-To add `GluestackUIProvider`, create a `GluestackUIProvider/index.tsx` file inside `components/` folder and paste the following code.
+To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.tsx` file inside `components/` folder and paste the following code.
 
 <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 918d372e6f..d807479871 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
@@ -58,7 +58,7 @@ Create a `components/` folder inside `src` folder and add path in `tsconfig.json
 
 ### Step 3: Configure GluestackUIProvider
 
-To add config, create a `GluestackUIProvider/config.ts` file in your `components/` folder and paste the following code.
+To add config, create a `gluestack-ui-provider/config.ts` file in your `components/` folder and paste the following code.
 
 <CollapsibleCode>
 
@@ -68,7 +68,7 @@ To add config, create a `GluestackUIProvider/config.ts` file in your `components
 
 </CollapsibleCode>
 
-To add `GluestackUIProvider`, create a `GluestackUIProvider/index.tsx` file inside `components/` folder and paste the following code.
+To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.tsx` file inside `components/` folder and paste the following code.
 
 <CollapsibleCode>
 
diff --git a/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx b/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx
index 470538ca01..6508ff9dd3 100644
--- a/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx
+++ b/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx
@@ -299,12 +299,11 @@ Below is a list of all of the icons in the library.
         GlobeIcon,
         ThreeDotsIcon,
         Icon,
-        PlayIcon
+        PlayIcon,
       },
       argsType: {},
     }}
-/>
-
+  />
 </AppProvider>
 
 #### Lucide Icons (Recommended)
diff --git a/packages/config/package.json b/packages/config/package.json
index fa7a8f7399..c56a3630ce 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -37,7 +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.49",
+    "@gluestack-style/react": "1.0.50",
     "@gluestack-ui/accordion": "1.0.1",
     "@gluestack-ui/actionsheet": "0.2.37",
     "@gluestack-ui/alert": "0.1.12",
@@ -66,13 +66,13 @@
     "@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/themed": "1.1.10",
     "@gluestack-ui/toast": "1.0.4",
     "@gluestack-ui/tooltip": "0.1.26",
     "@legendapp/motion": "latest"
   },
   "peerDependencies": {
-    "@gluestack-style/react": ">=1.0.49",
+    "@gluestack-style/react": ">=1.0",
     "@gluestack-ui/themed": ">=1.1"
   },
   "release-it": {
diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json
index 6bed29b946..d4a58d558e 100644
--- a/packages/nativewind/utils/package.json
+++ b/packages/nativewind/utils/package.json
@@ -14,7 +14,7 @@
     "ios",
     "nextjs"
   ],
-  "version": "0.0.8",
+  "version": "0.0.10",
   "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 03ec48e0be..e4ff2de092 100644
--- a/packages/nativewind/utils/src/context.ts
+++ b/packages/nativewind/utils/src/context.ts
@@ -1,5 +1,4 @@
 'use client';
-
 import { createContext, useContext } from 'react';
 export const ParentContext = createContext({});
 
diff --git a/packages/nativewind/utils/src/cssInterop.web.tsx b/packages/nativewind/utils/src/cssInterop.web.tsx
index 77ec595a88..e427c48fb6 100644
--- a/packages/nativewind/utils/src/cssInterop.web.tsx
+++ b/packages/nativewind/utils/src/cssInterop.web.tsx
@@ -1 +1,2 @@
+'use client';
 export { cssInterop } from 'nativewind';
diff --git a/packages/nativewind/utils/src/withStates.tsx b/packages/nativewind/utils/src/withStates.tsx
index 8049a54106..7b0b919fb7 100644
--- a/packages/nativewind/utils/src/withStates.tsx
+++ b/packages/nativewind/utils/src/withStates.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import React from 'react';
 import { extractDataClassName } from './utils';
 
diff --git a/packages/nativewind/utils/src/withStyleContextAndStates.tsx b/packages/nativewind/utils/src/withStyleContextAndStates.tsx
index 1e0b0434c4..0dd8c1b862 100644
--- a/packages/nativewind/utils/src/withStyleContextAndStates.tsx
+++ b/packages/nativewind/utils/src/withStyleContextAndStates.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import React from 'react';
 import { extractDataClassName } from './utils';
 import { ParentContext } from './context';
diff --git a/packages/styled/react/CHANGELOG.md b/packages/styled/react/CHANGELOG.md
index cde5fa49b0..ac64549ee5 100644
--- a/packages/styled/react/CHANGELOG.md
+++ b/packages/styled/react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @gluestack-style/react
 
+## 1.0.50
+
+### Patch Changes
+
+- - Fixed ref typings
+  - Fixed plugin sx prop issue
+
 ## 1.0.49
 
 ### Patch Changes
diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json
index d584d09219..cabd1e362a 100644
--- a/packages/styled/react/package.json
+++ b/packages/styled/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "keywords": [
     "React Native",
     "Next.js",
diff --git a/packages/styled/react/src/plugins/font-resolver.tsx b/packages/styled/react/src/plugins/font-resolver.tsx
index 364a8ddd9a..0535f1afdd 100644
--- a/packages/styled/react/src/plugins/font-resolver.tsx
+++ b/packages/styled/react/src/plugins/font-resolver.tsx
@@ -81,6 +81,14 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
 
   mapFonts(style: any) {
     if (isExpoStrategy()) {
+      const regex = /^([^_]*_){1,2}[^_]*$/;
+
+      if (style.fontFamily.match(regex)) {
+        delete style.fontWeight;
+        delete style.fontStyle;
+
+        return;
+      }
       let fontFamilyValue = style.fontFamily
         .replace(/ /g, '')
         .replace(/^\w/, (c: any) => c.toUpperCase());
@@ -274,6 +282,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
         styledConfig
       );
       const styledConfigWithoutVariant = deepClone(styledConfig ?? {});
+
       delete styledConfigWithoutVariant.variants;
 
       let componentStyledObject = deepMerge(
@@ -298,7 +307,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
           fontStyle ?? componentStyledObject.fontStyle;
       }
 
-      const sxPropsWithThemeProps = deepMerge(sx, componentStyledObject);
+      const sxPropsWithThemeProps = deepMerge(componentStyledObject, sx);
 
       const [resolvedSxProps, , ,] = this.inputMiddleWare(
         sxPropsWithThemeProps,
diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx
index 4d1190a6e5..a364f5b2eb 100644
--- a/packages/styled/react/src/styled.tsx
+++ b/packages/styled/react/src/styled.tsx
@@ -125,7 +125,7 @@ function convertUtiltiyToSXFromProps(
           pluginName
         ]?.inputMiddleWare(
           resolvedSxVerbose,
-          true,
+          false,
           false,
           Component,
           componentStyleConfig,
@@ -2110,7 +2110,7 @@ export function verboseStyled<P, Variants, ComCon>(
         ? {
             ...variantProps,
             states: states,
-            // sx: componentProps.sx,
+            sx: componentProps.sx,
           }
         : {};
 
@@ -2185,7 +2185,8 @@ export function verboseStyled<P, Variants, ComCon>(
   StyledComp.isStyledComponent = true;
 
   return StyledComp as ForwardRefExoticComponent<
-    StyledComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>
+    StyledComponentProps<ITypeReactNativeStyles, Variants, P, ComCon> &
+      React.RefAttributes<P>
   >;
 }
 
diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md
index 69d491cbb0..ae1c9e3411 100644
--- a/packages/themed/CHANGELOG.md
+++ b/packages/themed/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @gluestack-ui/themed
 
+## 1.1.10
+
+### Patch Changes
+
+- - Fixed ref typings
+  - Fixed plugin sx prop issue
+- Updated dependencies
+  - @gluestack-style/react@1.0.50
+
 ## 1.1.9
 
 ### Patch Changes
diff --git a/packages/themed/package.json b/packages/themed/package.json
index dccc77c68d..4b9cb434c8 100644
--- a/packages/themed/package.json
+++ b/packages/themed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -73,7 +73,7 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@gluestack-style/react": "^1.0.48",
+    "@gluestack-style/react": "^1.0.50",
     "@types/react-native": "^0.72.3",
     "file-loader": "^6.2.0",
     "react": "^18.2.0",