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 e047e654f7..819c282f12 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
@@ -52,8 +52,15 @@ This is an illustration of **Pressable** component.
 
 ## Installation
 
+### Step 1: Install the following dependencies:
 
-### Step 1: Copy and paste the following code into your project.
+```bash
+
+npm i @gluestack-ui/pressable
+
+```
+
+### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
 
@@ -63,7 +70,7 @@ This is an illustration of **Pressable** component.
 
 </CollapsibleCode>
 
-### Step 2: Update the import paths to match your project setup.
+### Step 3: Update the import paths to match your project setup.
 
 ## API Reference
 
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 4befc38046..de1605c5a9 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
@@ -51,8 +51,15 @@ This is an illustration of **Pressable** component.
 
 ## Installation
 
+### Step 1: Install the following dependencies:
 
-### Step 1: Copy and paste the following code into your project.
+```bash
+
+npm i @gluestack-ui/pressable
+
+```
+
+### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
 
@@ -62,7 +69,7 @@ This is an illustration of **Pressable** component.
 
 </CollapsibleCode>
 
-### Step 2: Update the import paths to match your project setup.
+### Step 3: Update the import paths to match your project setup.
 
 ## API Reference
 
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 0ad25d8994..f8744aef4d 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
@@ -1,15 +1,21 @@
 import { Pressable as RNPressable } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
 import React from 'react';
+import { createPressable } from '@gluestack-ui/pressable';
+
+export const UIPressable = createPressable({ Root: RNPressable });
 
 const pressableStyle = tva({
-  base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-primary-700 data-[focus-visible=true]:ring-2',
+  base: 'data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-primary-700 data-[focus-visible=true]:web:ring-2',
 });
 
+cssInterop(UIPressable, { className: 'style' });
+
 export const Pressable = React.forwardRef(
   ({ className, ...props }: any, ref?: any) => {
     return (
-      <RNPressable
+      <UIPressable
         {...props}
         ref={ref}
         className={pressableStyle({
diff --git a/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx b/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx
index 8170b28003..cc877034a5 100644
--- a/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx
@@ -1,7 +1,10 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable as RNPressable } from 'react-native';
+import { createPressable } from '@gluestack-ui/pressable';
 
-export const Pressable = styled(RNPressable, {
+export const UIPressable = createPressable({ Root: RNPressable });
+
+export const Pressable = styled(UIPressable, {
   _web: {
     ':focusVisible': {
       outlineWidth: '2px',