diff --git a/example/storybook/src/ui/components/Provider/GluestackUIProvider/index.stories.mdx b/example/storybook/src/ui/components/Provider/GluestackUIProvider/index.stories.mdx
index c88c9b49e..9faae4ec2 100644
--- a/example/storybook/src/ui/components/Provider/GluestackUIProvider/index.stories.mdx
+++ b/example/storybook/src/ui/components/Provider/GluestackUIProvider/index.stories.mdx
@@ -91,14 +91,18 @@ We have also exported all the providers separately so that you can use them indi
 To use only config and styled functionalities, you can use `GluestackUIStyledProvider` component.
 
 ```jsx
-import { GluestackUIStyledProvider } from '@gluestack-ui/themed';
+import { GluestackUIStyledProvider, Button, ButtonText } from '@gluestack-ui/themed';
 import { config } from '@gluestack-ui/config';
 
-<GluestackUIStyledProvider config={config}>
-  <Button>
-    <ButtonText>Hello World</ButtonText>
-  </Button>
-</GluestackUIStyledProvider>
+export default function App() {
+  return (
+    <GluestackUIProvider config={config}>
+      <Button>
+        <ButtonText>Hello World</ButtonText>
+      </Button>
+    </GluestackUIProvider>
+  )
+}
 ```
 
 ### OverlayProvider