Quick Start

# Initialize uiblox in your project
npx @uiblox/cli init

# Add components
npx @uiblox/cli add button card input

Installation

Use the CLI directly with npx (recommended):

npx @uiblox/cli init
npx @uiblox/cli add button

Or install globally:

npm install -g @uiblox/cli
uiblox init
uiblox add button

Commands

init

Initialize uiblox in your project. Creates a components.json configuration file and sets up the component directory.

npx @uiblox/cli init

| Option | Description | |--------|-------------| | -y, --yes | Skip prompts and use defaults | | -c, --cwd <path> | Working directory (default: current directory) |

add

Add components to your project.

# Add specific components
npx @uiblox/cli add button card input

# Add all components
npx @uiblox/cli add --all

# Interactive component picker
npx @uiblox/cli add

| Option | Description | |--------|-------------| | -y, --yes | Skip confirmation prompt | | -o, --overwrite | Overwrite existing files | | -a, --all | Add all available components | | -c, --cwd <path> | Working directory | | -p, --path <path> | Custom path for components |

Configuration

The CLI uses a components.json file in your project root:

{
  "$schema": "https://uiblox.dev/schema/components.json",
  "style": "default",
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/components/uiblox/utils",
    "ui": "@/components/uiblox"
  }
}

Customizing Install Path

By default, components are installed to src/components/uiblox. You can customize this by:

1. During init: Answer the prompts to set your preferred paths
2. Edit config: Modify the aliases.ui and aliases.utils values in components.json

Available Components

| Component | Description | |-----------|-------------| | button | Customizable button with variants | | card | Card with header, content, footer | | input | Styled input field | | badge | Status indicator badge | | alert | Alert messages with severity levels | | avatar | User avatar with fallback | | checkbox | Checkbox with label | | switch | Toggle switch | | select | Dropdown select | | textarea | Multi-line text input | | tooltip | Hover tooltip | | dropdown | Dropdown menu | | modal | Modal dialog | | tabs | Tabbed content | | separator | Visual separator | | skeleton | Loading placeholder |

Requirements

• React 18+
• Tailwind CSS 3+
• TypeScript (optional but recommended)

Links

• Website
• Documentation
• Components
• Blox (Templates)

License

MIT