diff --git a/example/storybook/.storybook/preview.js b/example/storybook/.storybook/preview.js
index 10e9d92447..c65a477e9b 100644
--- a/example/storybook/.storybook/preview.js
+++ b/example/storybook/.storybook/preview.js
@@ -104,6 +104,8 @@ export const parameters = {
'useBreakpointValue',
'useMedia',
'useColorMode',
+ 'useStyled',
+ 'useTheme',
],
'Production Optimizations',
['With a Babel Plugin'],
diff --git a/example/storybook/.storybook/preview.style.js b/example/storybook/.storybook/preview.style.js
index 498a07bc83..e22b4c14d1 100644
--- a/example/storybook/.storybook/preview.style.js
+++ b/example/storybook/.storybook/preview.style.js
@@ -53,7 +53,14 @@ export const parameters = {
'CSS Variables Plugin',
],
'hooks',
- ['useBreakPointValue', 'useMedia', 'useColorMode', 'useToken'],
+ [
+ 'useBreakPointValue',
+ 'useMedia',
+ 'useColorMode',
+ 'useToken',
+ 'useStyled',
+ 'useTheme',
+ ],
'configuration',
[
'Theme Tokens',
diff --git a/example/storybook/src/styled/hooks/useStyled/index.stories.mdx b/example/storybook/src/styled/hooks/useStyled/index.stories.mdx
new file mode 100644
index 0000000000..bc8072eecd
--- /dev/null
+++ b/example/storybook/src/styled/hooks/useStyled/index.stories.mdx
@@ -0,0 +1,41 @@
+---
+title: useStyled | gluestack-ui
+description: useStyled is a custom hook that returns a configuration object encompassing aliases, components, global styles, plugins, and tokens. This configuration facilitates easy access to essential styling elements and global functionalities for components
+showHeader: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+
+
+# useStyled
+
+**useStyled** is a custom hook that returns a configuration object encompassing aliases, components, global styles, plugins, and tokens. This configuration facilitates easy access to essential styling elements and global functionalities for components.
+
+### Import
+
+To use the `useStyled` in your project, import `useStyled` from `@gluestack-style/react`. as Demonstrated below.
+
+```jsx
+import { useStyled } from '@gluestack-style/react';
+```
+
+Let's use our `useStyled` value to give background color to `View` from `react-native`.
+
+```jsx
+import { View } from 'react-native';
+import { useStyled } from '@gluestack-style/react';
+
+const Example = () => {
+ const styled = useStyled();
+ return (
+
+ );
+};
+```
\ No newline at end of file
diff --git a/example/storybook/src/styled/hooks/useTheme/index.stories.mdx b/example/storybook/src/styled/hooks/useTheme/index.stories.mdx
new file mode 100644
index 0000000000..5a56c908f1
--- /dev/null
+++ b/example/storybook/src/styled/hooks/useTheme/index.stories.mdx
@@ -0,0 +1,35 @@
+---
+title: useTheme | gluestack-ui
+description: useTheme is a custom hook which returns an array of active themes
+showHeader: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+
+
+# useTheme
+
+**useTheme** is a custom hook which returns an array of active themes.
+
+### Import
+
+To use the `useTheme` in your project, import `useTheme` from `@gluestack-style/react`. as Demonstrated below.
+
+```jsx
+import { useTheme } from '@gluestack-style/react';
+```
+
+Demonstration of `useTheme`
+
+```jsx
+import { View } from 'react-native';
+import { useTheme } from '@gluestack-style/react';
+
+const Example = () => {
+ const theme = useTheme()
+ return (
+ {/* Do something with the theme */}
+ );
+};
+```
diff --git a/example/storybook/src/ui/hooks/use-styled/index.stories.mdx b/example/storybook/src/ui/hooks/use-styled/index.stories.mdx
new file mode 100644
index 0000000000..ab8f336323
--- /dev/null
+++ b/example/storybook/src/ui/hooks/use-styled/index.stories.mdx
@@ -0,0 +1,41 @@
+---
+title: useStyled | gluestack-ui
+description: useStyled is a custom hook that returns a configuration object encompassing aliases, components, global styles, plugins, and tokens. This configuration facilitates easy access to essential styling elements and global functionalities for components
+showHeader: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+
+
+# useStyled
+
+**useStyled** is a custom hook that returns a configuration object encompassing aliases, components, global styles, plugins, and tokens. This configuration facilitates easy access to essential styling elements and global functionalities for components.
+
+### Import
+
+To use the `useStyled` in your project, import `useStyled` from `@gluestack-ui/themed` as demonstrated below.
+
+```jsx
+import { useStyled } from '@gluestack-ui/themed';
+```
+
+Let's use our `useStyled` value to give background color to `View` from `react-native`.
+
+```jsx
+import { View } from 'react-native';
+import { useStyled } from '@gluestack-ui/themed';
+
+const Example = () => {
+ const styled = useStyled();
+ return (
+
+ );
+};
+```
\ No newline at end of file
diff --git a/example/storybook/src/ui/hooks/use-styled/use-styled.stories.tsx b/example/storybook/src/ui/hooks/use-styled/use-styled.stories.tsx
new file mode 100644
index 0000000000..265f85db0b
--- /dev/null
+++ b/example/storybook/src/ui/hooks/use-styled/use-styled.stories.tsx
@@ -0,0 +1,9 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import useStyled from './useStyled';
+const useStyledMeta: ComponentMeta = {
+ title: 'stories/hooks/useStyled',
+ component: useStyled,
+};
+
+export default useStyledMeta;
+export { useStyled };
diff --git a/example/storybook/src/ui/hooks/use-styled/useStyled.tsx b/example/storybook/src/ui/hooks/use-styled/useStyled.tsx
new file mode 100644
index 0000000000..33af20deff
--- /dev/null
+++ b/example/storybook/src/ui/hooks/use-styled/useStyled.tsx
@@ -0,0 +1,16 @@
+import { View } from 'react-native';
+import { useStyled } from '@gluestack-ui/themed';
+import React from 'react';
+
+export default function Example({}: any) {
+ const styled = useStyled();
+ return (
+
+ );
+}
diff --git a/example/storybook/src/ui/hooks/use-theme/index.stories.mdx b/example/storybook/src/ui/hooks/use-theme/index.stories.mdx
new file mode 100644
index 0000000000..64cba6fc3e
--- /dev/null
+++ b/example/storybook/src/ui/hooks/use-theme/index.stories.mdx
@@ -0,0 +1,35 @@
+---
+title: useTheme | gluestack-ui
+description: useTheme is a custom hook which returns an array of active themes
+showHeader: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+
+
+# useTheme
+
+**useTheme** is a custom hook which returns an array of active themes.
+
+### Import
+
+To use the `useTheme` in your project, import `useTheme` from `@gluestack-ui/themed` as demonstrated below.
+
+```jsx
+import { useTheme } from '@gluestack-ui/themed';
+```
+
+Demonstration of `useTheme`
+
+```jsx
+import { View } from 'react-native';
+import { useTheme } from '@gluestack-ui/themed';
+
+const Example = () => {
+ const theme = useTheme()
+ return (
+ {/* Do something with the theme */}
+ );
+};
+```