From b3a84237cca99999b35495ef964f94ed91e72263 Mon Sep 17 00:00:00 2001
From: Vaibhavi Kolloju <vaibhavikolloju@gmail.com>
Date: Tue, 18 Jun 2024 12:40:29 +0530
Subject: [PATCH] feat: added docs for CLI

---
 .../getting-started/cli/index.nw.stories.mdx  | 130 +++++++++++++++++-
 1 file changed, 129 insertions(+), 1 deletion(-)

diff --git a/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx
index 1932196a4..46f9651ea 100644
--- a/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx
@@ -11,4 +11,132 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # CLI
 
-Coming Soon!
\ No newline at end of file
+The gluestack-ui CLI is a tool that simplifies integrating the gluestack-ui into your project. It provides commands for initialising and adding components to your project.
+
+## Init
+
+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.
+
+```bash
+npx gluestack-ui init
+```
+
+You will be prompted to confirm your project type:
+
+```bash
+Detected a Next JS project, continue?
+● Yes / ○ No
+```
+
+You will be prompted to confirm whether you would like to allow the CLI to modify files:
+
+```bash
+Proceed with caution. Make sure to commit your changes before proceeding. Continue?
+● Yes / ○ No
+```
+
+> Note: If you wish to make changes to your project manually, you can refer to the [installation](/ui/docs/home/getting-started/installation) guide.
+
+### Options:
+
+- `--path <path>`: Specifies the directory path where you want to add the GluestackUIProvider component. By default, it creates the component in the `components/ui` directory within your project's root.
+
+```bash
+Usage: npx gluestack-ui init [options]
+
+initialize your gluestack-ui and install dependencies
+
+Options:
+  --path <path>    Path to add GluestackUIProvider, defaults to components/ui in the current directory.
+```
+
+## Add
+
+Use the `add` command to add components and their dependencies to your project:
+
+```bash
+npx gluestack-ui add [component]
+```
+
+### Options:
+
+- `--all`: This flag can be used to add all available components from gluestack-ui to your project.
+- `--path <path>`: Specifies the directory path where you want to add the component. By default, it will add the component to the same directory where the GluestackUIProvider is located.
+
+```bash
+Usage: npx gluestack-ui add [component] [options]
+
+add component to your project
+
+Options:
+  --all          Adds all existing components from gluestack-ui
+  --path <path>  Path to add components, defaults to the directory where GluestackUIProvider is located.
+```
+
+## gluestack-ui.config.json
+
+Configuration for your project.
+
+The `gluestack-ui.config.json` file holds the configuration for your project. It helps the CLI understand how your project is set up and add components accordingly.
+
+> Note : The gluestack-ui.config.json file is optional. It is only required if you use the CLI to add components to your project. If you prefer to manually copy and paste components, this file is not needed.
+
+Manual creation of gluestack-ui.config.json file is not necessary. It will be automatically generated upon executing the following command:
+
+```bash
+npx gluestack-ui init
+```
+
+## tailwind
+
+### tailwind.config
+
+Path to where your `tailwind.config.js` file is located.
+
+```bash
+{
+  "tailwind": {
+    "config": "tailwind.config.js",
+  }
+}
+```
+
+### tailwind.css
+
+Path to the CSS file (`global.css`) where Tailwind styles are likely imported into your project.
+
+```bash
+{
+  "tailwind": {
+    "css": "global.css"
+  }
+}
+```
+
+## app
+
+### app.entry
+
+Path to your project's entry file
+
+```bash
+{
+  "app": {
+    "entry": "app/_layout.tsx",
+  }
+}
+```
+
+### app.components
+
+Specifies the directory path where the `GluestackUIProvider` component is located.
+
+```bash
+{
+  "app": {
+    "components": "components/ui",
+  }
+}
+```