@aliveui/cli

CLI tool for initializing your project with Alive UI components.

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

Tailwind CSS v4 Support

The CLI fully supports Tailwind CSS v4 and will automatically:

1. Configure your project with the correct Tailwind v4 syntax
2. Set up CSS imports for @aliveui/ui components
3. Generate minimal configuration files
4. Update PostCSS configuration if needed

Tailwind v4 Setup

For Tailwind CSS v4, you need to:

1. Install the required packages:

1# Required for all projects:
2npm install tailwindcss autoprefixer
3
4# For Next.js or other PostCSS projects:
5npm install @tailwindcss/postcss
6
7# For Vite projects:
8npm install @tailwindcss/vite

2. In your CSS file, use the correct import syntax:

1/* CORRECT: Import Tailwind v4 this way */
2@import "tailwindcss";
3
4/* WRONG: Do not use these v3 directives */
5/* @tailwind base; */
6/* @tailwind components; */
7/* @tailwind utilities; */

3. For Next.js projects, ensure your postcss.config.js uses ESM syntax:

1/** @type {import('postcss').Config} */
2export default {
3  plugins: {
4    "@tailwindcss/postcss": {},
5    autoprefixer: {},
6  },
7};

4. For Vite projects, add the plugin to your vite.config.js:

1import tailwindcss from "@tailwindcss/vite";
2
3export default {
4  plugins: [
5    tailwindcss(),
6    // other plugins...
7  ],
8};

Usage

Initialize Your Project

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

This will:

1. Create a tailwind.config.js/ts file in your project with the correct configuration
2. Set up a CSS file with the necessary imports and variables
3. Create a utility file for the cn helper
4. Create or update postcss.config.js with the correct ESM syntax for Tailwind v4

Install UI Components

After initialization, install the UI components package:

1# npm
2npm install @aliveui/ui
3
4# pnpm
5pnpm add @aliveui/ui
6
7# yarn
8yarn add @aliveui/ui

Using Components

Import components directly:

1// Import from the main package
2import { Button } from "@aliveui/ui";
3
4// Or import specific components
5import { Button } from "@aliveui/ui/button";
6
7export default function MyComponent() {
8  return (
9    <div>
10      <Button variant="default">Default Button</Button>
11      <Button variant="compact">OK</Button>
12      <Button variant="compact" isSecondary>
13        Cancel
14      </Button>
15    </div>
16  );
17}

Options

The init command accepts the following options:

• --yes or -y: Skip confirmation prompts and use the default settings
• --typescript: Configure for TypeScript projects (default)
• --style: Choose the style for your components (default: 'default')
• --base-color: Choose the base color for your theme
• --css-variables: Use CSS variables for theming (default: true)

Troubleshooting

Next.js Error with Tailwind v4

If you see an error like:

Error evaluating Node.js code
Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin...

This means your postcss.config.js is not compatible with Tailwind v4. Make sure:

1. It uses ESM syntax (export default instead of module.exports)
2. It uses @tailwindcss/postcss instead of tailwindcss
3. You've installed the required packages: npm install tailwindcss @tailwindcss/postcss autoprefixer

License

Licensed under the MIT license.

Documentation

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