Merge pull request #2280 from gluestack/feat/documentation-changes

feat: documentation changes

example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
 title: Dashboard App | gluestack-ui
-description: A dashboard app created using all the components of gluestack-ui styled with NativeWind
+description: A dashboard app created using all the components of gluestack-ui v2
 toc: false
 ---
 
@@ -12,7 +12,7 @@ import { kitchensink } from '../../extra-components/nativewind/appConfig';
 
 # Dashboard App
 
-This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `gluestack-ui` components styled with `NativeWind`.
+This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `gluestack-ui v2`.
 
 <Responsiveness {...kitchensink} showMenuItems={true} />
 

example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
 title: Starter Kit | gluestack-ui
-description: A starter kit created using all the components of gluestack-ui styled with NativeWind
+description: A starter kit created using all the components of gluestack-ui v2
 toc: false
 ---
 
@@ -12,7 +12,7 @@ import { starterKit } from '../../extra-components/nativewind/appConfig';
 
 # Starter Kit
 
-This [Starter Kit](https://gluestack-ui-starter-kits.vercel.app/) is built using `gluestack-ui` components styled with `NativeWind`.
+This [Starter Kit](https://gluestack-ui-starter-kits.vercel.app/) is built using `gluestack-ui v2`.
 
 <Responsiveness {...starterKit} />
 

example/storybook-nativewind/src/apps/storybook-app/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
 title: Storybook App | gluestack-ui
-description: A storybook app created using all the components of gluestack-ui styled with NativeWind
+description: A storybook app created using all the components of gluestack-ui v2
 toc: false
 ---
 
@@ -12,6 +12,6 @@ import { appStoryConfig } from '../../extra-components/nativewind/appConfig';
 
 # Storybook App
 
-This is a [Storybook App](https://storybook-v2.gluestack.io/?path=/story/stories-accordion--accordion) of `gluestack-ui` components styled with `NativeWind`.
+This is a [Storybook App](https://storybook-v2.gluestack.io/?path=/story/stories-accordion--accordion) of `gluestack-ui v2`.
 
 <Responsiveness {...appStoryConfig} />

example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx

@@ -17,7 +17,14 @@ The gluestack-ui CLI is a tool that simplifies integrating the gluestack-ui into
 
 Use init command to set up your project.
 
-The init command adds the necessary `gluestack-ui.config.json` file, includes the `GluestackUIProvider`, installs dependencies, and configures `metro.config.js`, `babel.config.js`, `next.config.js` ( for Next.js) and `tailwind.config.js` for your project.
+The init command adds the necessary `gluestack-ui.config.json` file, includes the `GluestackUIProvider`, installs dependencies, and configures above files for your project.
+- `metro.config.js`
+- `babel.config.js`
+- `next.config.js` ( for Next.js)
+- `tailwind.config.js`
+- `global.css` (for Tailwind CSS)
+- entry file (for your project)
+
 
 ```bash
 npx gluestack-ui init

example/storybook-nativewind/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx

@@ -9,7 +9,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # Figma UI Kit
 
-The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible!
+The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui v2. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible!
 
 ## Auto-generated
 

example/storybook-nativewind/src/home/getting-started/vscode-extensions/index.nw.stories.mdx

@@ -9,7 +9,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # VS Code Extensions
 
-[gluestack VS Code Extension](https://marketplace.visualstudio.com/items?itemName=gluestack.gluestack-vscode) is specially crafted to streamline your development process when using the `@gluestack-ui with nativewind` library. It provides a set of powerful features to accelerate your workflow and improve efficiency.
+[gluestack VS Code Extension](https://marketplace.visualstudio.com/items?itemName=gluestack.gluestack-vscode) is specially crafted to streamline your development process when using the gluestack-ui v2. It provides a set of powerful features to accelerate your workflow and improve efficiency.
 These extensions provide gluestack snippets, which are shorthand for commonly used gluestack-ui components.
 All snippets start with the prefix `gs-` and are followed by the name of the desired component.
 
@@ -43,7 +43,7 @@ Tailor your application's functionality specific requirements using dynamic hook
 To get started with the gluestack VS Code Extension, follow these steps:
 
 1. Install the extension from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=gluestack.gluestack-vscode).
-2. Open a project in Visual Studio Code that uses `gluestack-ui` library.
+2. Open a project in Visual Studio Code that uses `gluestack-ui v2`.
 3. Start using the extension by accessing the snippets, recipes, and automatic import features described above.
 
 ## Example Usage

example/storybook-nativewind/src/home/theme-configuration/customizing-theme/index.nw.stories.mdx

@@ -1,7 +1,7 @@
 ---
 title: Customizing Theme 
 
-description: Customizing the theme in gluestack-ui with nativewind involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences.
+description: Customizing the theme in gluestack-ui v2 involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences.
 
 showHeader: true
 ---
@@ -14,9 +14,9 @@ import { CollapsibleCode } from '@gluestack/design-system';
 
 ## Customizing Tokens
 
-gluestack-ui, integrated with Nativewind, seamlessly accommodates the default Tailwind CSS [theme](https://tailwindcss.com/docs/theme), allowing users to effortlessly expand and customize it to suit their needs.
+gluestack-ui v2, seamlessly accommodates the default Tailwind CSS [theme](https://tailwindcss.com/docs/theme), allowing users to effortlessly expand and customize it to suit their needs.
 
-gluestack-ui with nativewind also ships with a set of handpicked default color palette tokens which are mapped separately with each mode. For example, the default color palette for light mode is `light` and the default color palette for dark mode is `dark`.
+gluestack-ui v2 also ships with a set of handpicked default color palette tokens which are mapped separately with each mode. For example, the default color palette for light mode is `light` and the default color palette for dark mode is `dark`.
 
 To customize tokens, follow these steps:
 

example/storybook-nativewind/src/home/theme-configuration/dark-mode/index.nw.stories.mdx

@@ -1,7 +1,7 @@
 ---
 title: Dark Mode 
 
-description: Customizing the theme in gluestack-ui with NativeWind for different color schemes and color mode support.
+description: Customizing the theme in gluestack-ui v2 for different color schemes and color mode support.
 
 showHeader: true
 ---

example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: Default Tokens | gluestack-ui
 
-description: gluestack-ui with nativewind ships with default tokens that provide access to theme values and lets you build and customize your own themed components. 
+description: gluestack-ui v2 ships with default tokens that provide access to theme values and lets you build and customize your own themed components. 
 
 pageTitle: Default Tokens
 
-pageDescription: gluestack-ui with nativewind ships with default tokens that provide access to theme values and lets you build and customize your own themed components. 
+pageDescription: gluestack-ui v2 ships with default tokens that provide access to theme values and lets you build and customize your own themed components. 
 
 showHeader: true
 ---
@@ -15,7 +15,7 @@ import {ColorPaletteComponent, ShadowComponent, FontSizeComponent, FontWeightCom
 
 <Meta title="with-nativewind/Home/Theme Configuration/Default Tokens" />
 
-Theming in `@gluestack-ui with nativewind` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification).
+Theming in `@gluestack-ui v2` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification).
 
 ## Colors