Skip to content

Commit

Permalink
docs(www): rewrite CLI docs
Browse files Browse the repository at this point in the history
  • Loading branch information
ruru-m07 committed Aug 20, 2024
1 parent 137441f commit f84f612
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 9 deletions.
38 changes: 31 additions & 7 deletions apps/www/content/docs/cli.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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"]}>
Expand All @@ -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]
Expand All @@ -59,7 +81,7 @@ bunx --bun ruru-ui-cli@latest init
```

### Options
#### Options

The `init` command supports the following options:

Expand All @@ -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"}>
Expand All @@ -107,7 +131,7 @@ bunx --bun ruru-ui-cli@latest add [component]
</Tab>
</Tabs>

### Options
#### Options

The `add` command supports the following options:

Expand Down
20 changes: 20 additions & 0 deletions apps/www/content/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions apps/www/content/docs/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit f84f612

Please sign in to comment.