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.
@@ -34,6 +42,20 @@ bunx --bun ruru-ui-cli@latest init
+#### 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:
@@ -107,7 +131,7 @@ bunx --bun ruru-ui-cli@latest add [component]
-### 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.
+
+## 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.
+
+
+
## 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";
-
-
+
+