Ruru UI

The CLI is a command-line interface that allows you to add components to your project.

Introduction

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.

npx 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:

◇ Would you like to use TypeScript (recommended)? Yes
◇ Where is your global CSS file? ./app/globals.css
◇ Where is your tailwind.config.js located? ./tailwind.config.js
◇ Would you like to use CSS variables for colors? Yes
◇ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not)
◇ Configure the import alias for components: @/components/ui
◇ Configure the import alias for utils: @/lib/utils
◇ Configure the import alias for provider: @/provider
◇ Configure the import alias for interfaces: @/interfaces
◇ Would you like to use RSC ? Yes
◇ Write configuration to ruru.json. Proceed? Yes

Options

The init command supports the following options:

Usage: Ruru-UI init [options]

initialize your project and install dependencies

Options:
  -y, --yes         skip confirmation prompt. (default: false)
  -d, --defaults    use default configuration. (default: false)
  -a, --autodetect   autodetect  configuration by framework. (default: false)   
  -c, --cwd <cwd>   the working directory. defaults to the current directory. 
                    (default: "D:\\GitHub\\ruru-ui\\apps\\sink")
  -h, --help        display help for command

Adding Components (`add`)

The add command allows you to quickly add UI components to your project.

Example:

Use the following commands depending on your package manager:

npx ruru-ui-cli@latest add [component]

Options

The add command supports the following options:

Usage: Ruru-UI add [options] [components...]

add a component to your project

Arguments:
  components         the components to add

Options:
  -y, --yes          skip confirmation prompt. (default: true)
  -o, --overwrite    overwrite existing files. (default: false)
  -c, --cwd <cwd>    the working directory. defaults to the current
                     directory. (default: "D:\\GitHub\\ruru-ui\\apps\\sink")  
  -a, --all          add all available components (default: false)
  -p, --path <path>  the path to add the component to.
  -h, --help         display help for command

Adding Blocks (`block`)

The block command allows you to quickly add blocks to your project.

Example:

Use the following commands depending on your package manager:

npx ruru-ui-cli@latest block [name]

let's say you want to create a login block, you can do it by running the following command:

npx ruru-ui-cli@latest block login-1

Check Out the login-1 Block

Options

The block command supports the following options:

Usage: Ruru-UI block [options] <block>

Add a new block

Options:
  -y, --yes        Skip confirmation prompt. (default: false)
  -o, --overwrite  Overwrite existing files. (default: false)
  -c, --cwd <cwd>  The working directory. Defaults to the current
                   directory. (default: "D:\\GitHub\\ruru-ui")
  -i, --info       Show block info (default: false)
  -h, --help       display help for command

Block Info

The block command also supports the --info option, which displays information about the block.

Block Information:
--------------------------------------------------------
Name:           login-1
Files:          login-1.tsx
Type:           block:component
Dependencies:   react-hook-form, @hookform/resolvers, zod
Components:     button, input, form
--------------------------------------------------------

CLI

On this page