From f84f612e403342bf5419fbc929aa056bb8a1ab41 Mon Sep 17 00:00:00 2001
From: ruru <142723369+ruru-m07@users.noreply.github.com>
Date: Tue, 20 Aug 2024 19:23:49 +0530
Subject: [PATCH] docs(www): rewrite CLI docs

---
 apps/www/content/docs/cli.mdx          | 38 +++++++++++++++++++++-----
 apps/www/content/docs/index.mdx        | 20 ++++++++++++++
 apps/www/content/docs/installation.mdx |  4 +--
 3 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx
index b3d7161..7611d31 100644
--- a/apps/www/content/docs/cli.mdx
+++ b/apps/www/content/docs/cli.mdx
@@ -5,10 +5,18 @@ description: The CLI is a command-line interface that allows you to add componen
 
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
 
-## init
+## Introduction
 
-Use the `init` command to initialize dependencies for a new project.
+The Ruru UI CLI is a command-line tool designed to help you initialize projects and add UI components with ease.
 
+## Getting Started
+
+### Initialization (`init`)
+Use the init command to set up the necessary dependencies for a new project.
+
+### Example:
+
+Run the following command based on your package manager:
 The `init`, and CSS variables for the project.
 
 <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
@@ -34,6 +42,20 @@ bunx --bun ruru-ui-cli@latest init
 </Tab>
 </Tabs>
 
+#### Configuration Options:
+
+During initialization, you’ll be prompted to configure the project:
+
+- TypeScript (recommended)
+- Global CSS file
+- Tailwind configuration
+- CSS variables
+- Custom Tailwind prefix (if any)
+- Import aliases for components, utils, provider, and interfaces
+
+These configurations will be saved to ruru.json.
+
+#### Command Options:
 
 ```txt
 // [!code word:Yes]
@@ -59,7 +81,7 @@ bunx --bun ruru-ui-cli@latest init
 
 ```
 
-### Options
+#### Options
 
 The `init` command supports the following options:
 
@@ -78,11 +100,13 @@ Options:
 ```
 
 
-## add
+### Adding Components (`add`)
+
+The `add` command allows you to quickly add UI components to your project.
 
-Use the `add` command to add components to your project.
+#### Example:
 
-The `add` command adds a component to your project and installs all required dependencies.
+Use the following commands depending on your package manager:
 
 <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
 <Tab value={"npm"}>
@@ -107,7 +131,7 @@ bunx --bun ruru-ui-cli@latest add [component]
 </Tab>
 </Tabs>
 
-### Options
+#### Options
 
 The `add` command supports the following options:
 
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index 3c67eed..d0e043b 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -5,11 +5,31 @@ description: Getting Started with Ruru-UI.
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 import Link from 'fumadocs-core/link';
+import { Callout } from 'fumadocs-ui/components/callout';
 
 ## Introduction
 
 Welcome to **ruru UI**, a comprehensive UI library and a set of reusable components designed to help you build beautiful and consistent user interfaces with ease.
 
+<Callout type="info">
+## How is it different from ShadCN? (Frequently asked question)
+
+##### NO, it’s not ShadCN!
+
+- Use it as a `dependency` with ease.
+- Enjoy ready-to-use `hooks` for seamless integration.
+- Manage themes and components effortlessly with built-in `context`.
+- Experience smooth, `animated` components.
+- Tailor the design with highly `customizable` options.
+- Benefit from a `responsive` design that adapts to any device.
+- Ensure `accessibility` with features that cater to everyone.
+- Delight users with a `friendly` and intuitive interface.
+- Embrace a `modern` and sleek design aesthetic.
+
+Elevate your project with components that are visually stunning.
+
+</Callout>
+
 ## Terminology
 
 - **Component**: A reusable piece of UI that can be used across different parts of your application.
diff --git a/apps/www/content/docs/installation.mdx b/apps/www/content/docs/installation.mdx
index c3ac520..6f99e2b 100644
--- a/apps/www/content/docs/installation.mdx
+++ b/apps/www/content/docs/installation.mdx
@@ -7,8 +7,8 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
 import { Step, Steps } from "fumadocs-ui/components/steps";
 
-<Rutabs items={["Components", "Dependencies"]}>
-  <Rutab value={"Components"}>
+<Rutabs items={["CLI", "Dependencies"]}>
+  <Rutab value={"CLI"}>
   <Steps>
     <Step>