diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
index fbb7ec200..79fd69370 100644
--- a/example/storybook-nativewind/package.json
+++ b/example/storybook-nativewind/package.json
@@ -32,7 +32,7 @@
"@gluestack-style/animation-resolver": "^1.0.4",
"@gluestack-style/react": "^1.0.57",
"@gluestack-ui/config": "^1.1.19",
- "@gluestack-ui/themed": "^1.1.43",
+ "@gluestack-ui/themed": "^1.1.44",
"@gluestack/design-system": "^0.5.36",
"@gorhom/bottom-sheet": "^5.0.0-alpha.10",
"@legendapp/motion": "^2.2.0",
diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
index ba7f2606e..eeaf64b28 100644
--- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
@@ -45,6 +45,7 @@ import {
} from '@gluestack/design-system';
import { CollapsibleCode } from '@gluestack/design-system';
import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **Alert** component.
@@ -146,6 +147,8 @@ To use this component in your project, include the following import statement in
import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
```
+
+
```jsx
export default () => (
diff --git a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
index 0ac338af3..ff163646d 100644
--- a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
@@ -38,8 +38,8 @@ import {
Tabs
} from '@gluestack/design-system';
import { CollapsibleCode } from '@gluestack/design-system';
-
import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **Avatar** component.
@@ -142,6 +142,8 @@ import {
} from '@/components/ui/avatar';
```
+
+
> IOS: It is highly recommended to use `` before `` to avoid indexing issues in IOS.
```jsx
diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
index 7bf36c9de..28f8a07ab 100644
--- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
@@ -55,6 +55,7 @@ import {
import { transformedCode } from '../../utils';
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **Badge** component.
@@ -145,6 +146,7 @@ To use this component in your project, include the following import statement in
```jsx
import { Badge } from '@/components/ui/badge';
```
+
```jsx
export default () => (
diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
index 5887fb997..37d36b5ef 100644
--- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
@@ -45,6 +45,7 @@ import {
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';
import colors from 'tailwindcss/colors';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **Button** component.
@@ -142,6 +143,8 @@ import {
} from '@/components/ui/button';
```
+
+
```jsx
export default () => (
diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
index 117a82f89..245c52f93 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
@@ -44,6 +44,7 @@ import {
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **Checkbox** component.
@@ -144,6 +145,8 @@ To use this component in your project, include the following import statement in
import { Checkbox } from '@/components/ui/checkbox';
```
+
+
```jsx
export default () => (
diff --git a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
index d4116307e..2b87ea83d 100644
--- a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
@@ -35,6 +35,7 @@ import {
} from '@gluestack/design-system';
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode, Tabs } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **Divider** component.
@@ -121,6 +122,8 @@ To use this component in your project, include the following import statement in
import { Divider } from '@/components/ui/divider';
```
+
+
```jsx
export default () => ;
```
diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
index 1f650af5c..2460b43df 100644
--- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
@@ -48,9 +48,9 @@ import {
Tabs
} from '@gluestack/design-system';
import { ShoppingCartIcon } from 'lucide-react-native'
-
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **Fab** component.
@@ -156,7 +156,7 @@ npm i @gluestack-ui/fab
-### API Reference
+## API Reference
To use this component in your project, include the following import statement in your file.
@@ -164,6 +164,8 @@ To use this component in your project, include the following import statement in
import { Fab } from '@gluestack-ui/themed';
```
+
+
```jsx
export default () => (
diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
index eca08b421..828aff7f3 100644
--- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
@@ -86,6 +86,7 @@ import {
import { transformedCode } from '../../utils';
import { useState } from 'react';
import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **FormControl** component.
@@ -287,6 +288,8 @@ To use this component in your project, include the following import statement in
import { FormControl } from '@/components/ui/form-control';
```
+
+
```jsx
export default () => (
diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
index 178b20153..5a0f462e9 100644
--- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
@@ -41,8 +41,8 @@ import {
CollapsibleCode,
Tabs
} from '@gluestack/design-system';
-
import Wrapper from '../../core-components/nativewind/Wrapper';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **Input** component.
@@ -148,6 +148,8 @@ To use this component in your project, include the following import statement in
import { Input } from '@/components/ui/input';
```
+
+
```jsx
export default () => (
diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
index e9d8cd274..28c703229 100644
--- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
@@ -24,9 +24,9 @@ import {
InlineCode,
Tabs
} from '@gluestack/design-system';
-
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of **Link** component.
@@ -106,6 +106,8 @@ To use this component in your project, include the following import statement in
import { Link } from '@/components/ui/link';
```
+
+
```jsx
export default () => (
diff --git a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx
index 1d2d00bf6..29251dfcb 100644
--- a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx
@@ -54,6 +54,7 @@ import {
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';
+import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
This is an illustration of a **Menu** component.
@@ -195,6 +196,8 @@ import {
} from '@/components/ui/menu';
```
+
+
```jsx
export default () => (