From 958f1bb861cad65db4cba1b87e78b0d77b22b3c0 Mon Sep 17 00:00:00 2001
From: Viraj Joshi <66306233+Viraj-10@users.noreply.github.com>
Date: Fri, 7 Jun 2024 13:04:59 +0530
Subject: [PATCH] Update index.stories.mdx

---
 .../GluestackUIProvider/index.stories.mdx        | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

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