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..6f4933fae7 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.
+
+<AppProvider>
+  <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: {},
+    }}
+  />
+</AppProvider>
+
+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/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(