Command Line Interface

Use the FivUI CLI to add components and manage your project configuration.

Installation

Install the FivUI CLI globally to use it in any project:

bash

npm install -g @fivexlabs/fivui@latest

Or use npx to run commands without global installation.

Commands

init

Initialize FivUI configuration and dependencies for your project. This command sets up the proper directory structure, creates fivui.json, and configures CSS variables.

Usage

bash

npx fivui init

Interactive Setup

Running fivui init without options starts an interactive setup that guides you through:

TypeScript configuration
Base color selection (Neutral, Slate, Gray, Zinc, Stone)
Global CSS file location
CSS variables preference
TailwindCSS version detection
Import alias configuration
React Server Components support

Options

Option	Description	Default
`--monorepo`	Initialize as monorepo structure	false
`--base-color`	Base color for components	neutral
`--tailwind-version`	TailwindCSS version (3 or 4)	4
`--css-variables`	Use CSS variables for theming	true
`--no-css-variables`	Use utility classes for theming	-
`--force`	Overwrite existing configuration	false

Examples

bash

# Interactive setup (recommended)
npx fivui init

# Quick setup with options
npx fivui init --base-color slate --tailwind-version 4

# Force overwrite existing config
npx fivui init --force

# Monorepo setup
npx fivui init --monorepo --base-color zinc

setup

Display setup instructions and configuration guidance for TailwindCSS integration.

Usage

bash

npx fivui setup

What it shows

TailwindCSS version detection
Workspace type (single project or monorepo)
Configuration file status
Version-specific setup instructions
Next steps guidance

add

Add components and their dependencies to your project. This command copies the component source code, installs required dependencies, and handles registry dependencies automatically.

Usage

bash

npx fivui add [component]

What it does

Installs npm dependencies automatically
Resolves and copies registry dependencies (like utils)
Creates component files in the correct directories
Handles "use client" directives based on RSC settings
Adds component-specific animations to CSS if needed
Provides import examples for monorepo setups

Examples

bash

# Add a single component
npx fivui add button

Configuration

The CLI uses fivui.json to store your project configuration:

json

{
  "$schema": "https://ui.fivexlabs.com/schema.json",
  "style": "default",
  "tsx": true,
  "rsc": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "version": "4"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "hooks": "@/hooks",
    "lib": "@/lib"
  }
}

Workspace Detection

FivUI automatically detects your project structure and adapts accordingly. However, we prefer to use interactive CLI where you can easily define the paths yourself.

Single Project

Components go to src/components/ui/
Utils go to src/lib/
Default aliases: @/components

Monorepo

Components go to packages/ui/src/components/
Utils go to packages/ui/src/lib/
Default aliases: @workspace/ui

Troubleshooting

TailwindCSS not found

Install TailwindCSS first: npm install tailwindcss@^4.0.0

No fivui.json found

Run fivui init to set up the proper configuration.

Component not available

The component might not be implemented yet. Check available components in the documentation.

The CLI is built with Commander.js and provides intelligent workspace detection for both single projects and monorepos.