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
`--ui-library`	UI primitive library: `radix` or `base`	radix
`--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

# Use Base UI as the default primitive library
npx fivui init --ui-library base

# 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] [--radix | --base]

Options

Option	Description
`--radix`	Use Radix UI primitives for components that support variants
`--base`	Use Base UI primitives for components that support variants

If you omit both flags, the CLI uses the uiLibrary value from your fivui.json (default: radix). Use either --radix or --base, not both.

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
Respects UI library choice (Radix or Base UI) per component or from config

Examples

bash

# Add a single component (uses uiLibrary from fivui.json)
npx fivui add button

# Add with Radix UI primitives
npx fivui add button --radix

# Add with Base UI primitives
npx fivui add button --base

# Add multiple components with Base UI
npx fivui add dialog select --base

UI Primitive Library

FivUI supports two UI primitive libraries: Radix UI and Base UI. Many components (e.g. Dialog, Select, Button) are available in both variants. You choose the default in fivui init or via --ui-library, and you can override per install with fivui add <component> --radix or --base. Components that do not depend on a primitive (e.g. Card, Badge) are shared and do not have variants.

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,
  "uiLibrary": "radix",
  "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"
  }
}

uiLibrary can be "radix" or "base". It determines which UI primitive library is used when you add components without the --radix or --base flag.

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.