@aliveui/ui-cli

CLI tool for adding Alive UI components to your project.

Requirements

• Node.js 18.0.0 or higher (Node.js 20+ recommended)
• React 18.0.0 or higher (including React 19)
• A project with Next.js, Vite, or another React framework

Prerequisites

Before using the CLI, make sure you have:

1. An existing React project
2. Basic understanding of React and Tailwind CSS
3. Package manager: npm, yarn, or pnpm

Usage

Initialize Your Project

1# npm
2npx @aliveui/ui-cli@latest init
3
4# pnpm
5pnpm dlx @aliveui/ui-cli@latest init
6
7# yarn
8yarn dlx @aliveui/ui-cli@latest init

This will:

1. Create a components.json file in your project
2. Configure your project for using Alive UI
3. Set up Tailwind CSS v4 with the correct configuration (or upgrade existing Tailwind if needed)
4. Create necessary utility files

Add Components

1# npm
2npx @aliveui/ui-cli@latest add button
3
4# pnpm
5pnpm dlx @aliveui/ui-cli@latest add button
6
7# yarn
8yarn dlx @aliveui/ui-cli@latest add button

This will copy the component files to your project.

Installation Modes

The CLI supports two installation modes:

1. File Mode (Default)

In this mode, the CLI will copy the component files into your project directory. This is the default behavior and gives you full control over the component source code.

1# Initialize in file mode (default) - npm
2npx @aliveui/ui-cli@latest init
3
4# Initialize in file mode (default) - pnpm
5pnpm dlx @aliveui/ui-cli@latest init
6
7# Add components by copying files - npm
8npx @aliveui/ui-cli@latest add button
9
10# Add components by copying files - pnpm
11pnpm dlx @aliveui/ui-cli@latest add button

2. NPM Mode

In this mode, the CLI will install the components from npm instead of copying files into your project. This is useful for projects where you want to keep your codebase clean and leverage the package system.

1# Initialize in npm mode - npm
2npx @aliveui/ui-cli@latest init --npm
3
4# Initialize in npm mode - pnpm
5pnpm dlx @aliveui/ui-cli@latest init --npm
6
7# Initialize in npm mode - yarn
8yarn dlx @aliveui/ui-cli@latest init --npm
9
10# Add components by installing from npm - npm
11npx @aliveui/ui-cli@latest add button --npm
12
13# Add components by installing from npm - pnpm
14pnpm dlx @aliveui/ui-cli@latest add button --npm
15
16# Add components by installing from npm - yarn
17yarn dlx @aliveui/ui-cli@latest add button --npm

Troubleshooting

Dependencies Issues

If you encounter dependency conflicts, try:

1# npm
2npm install @aliveui/ui --legacy-peer-deps
3
4# pnpm
5pnpm add @aliveui/ui --ignore-peer-deps
6
7# yarn
8yarn add @aliveui/ui --ignore-engines

TypeScript Configuration

For TypeScript projects, make sure your tsconfig.json includes the proper paths configuration. The CLI should handle this automatically, but you can verify with:

1{
2  "compilerOptions": {
3    "paths": {
4      "@/*": ["./*"]
5    }
6  }
7}

License

Licensed under the MIT license.

Documentation

Visit https://aliveui.com/docs/installation to view the documentation.