Cano CLI

Official command-line tool for installing, managing, and exploring the Cano UI design system.

Cano CLI is a full-screen terminal product, not a script. Run cano and you get a keyboard-driven interface — welcome screen, mode selection, searchable component picker, live install progress — in the style of modern AI CLI tools.

Install

npm install -g cano-cli

Usage

cano                 # open the TUI (welcome flow)
cano init            # same as above — guided setup
cano install         # jump straight to the component picker
cano install btn     # picker with Button pre-selected (aliases work)
cano browse          # explore the catalog with usage examples
cano create          # scaffold a new app with Cano UI preinstalled
cano sync            # pull the latest components from cano-ui

Options: -f, --force overwrite existing files · -v, --version · -h, --help

The interface

1. Welcome — shows the folder you ran it from, detects your framework, and has a command bar: type / for slash commands (/install, /browse, /create, /sync, /projects, /folders, /help, /exit) or just type to search components.
2. Mode selection — Install Components · Browse UI Library · Create Project · Sync Library · Find Projects · Browse Folders · Exit.
3. Component picker — multi-select with checkboxes, type-to-search, Tab to cycle categories.
4. Install progress — live spinner per step: fetch registry → download component → inject files → link styles. Registry dependencies install automatically.
5. Completion — interactive next steps: run npm install for required packages right inside the TUI, copy import lines to the clipboard, press a to run everything.

Escape always goes back — never out. The TUI only exits via /exit, the Exit menu item, or Ctrl+C. Every screen is keyboard-only: arrows to move, Space to select, Enter to confirm.

Finding your project

• /projects scans your machine (Desktop, Documents, Downloads, dev, code, …) for folders with a package.json, with type-to-filter. Selecting one moves Cano there.
• /folders is a Finder-style navigator: arrows to move, → to open, ← to go up, ~ to jump home, Enter on "Use this folder" to work there. Folders containing projects are marked ●.

Theme

The panel background follows your device's appearance (macOS light/dark mode). Override with CANO_THEME=light or CANO_THEME=dark. The CANO wordmark scales down (full art → mini → text) as the terminal gets smaller.

Library sync

cano sync (or /sync) pulls the full component registry from github.com/rakibulism/cano-ui into ~/.cano/registry. Components published there — current and future — appear in the picker and browser automatically after a sync, marked synced. No CLI update needed.

Architecture

bin/cano.js        CLI entry
src/index.ts       arg parsing, alt-screen setup
src/ui/            Ink (React) layer — App.tsx state machine, screens/, components/
src/core/          registry, installer, scaffold, framework detection
registry/          component definitions + bundled templates

The UI is a screen stack (push/pop) rendered by ui/App.tsx; install and scaffold logic live in core/ and report progress through step listeners — the UI never touches the filesystem directly.

Available components: button, card, modal, sidebar, dashboard-layout.

Registry

Components are defined in registry/components.json and shipped as bundled templates in registry/templates/. A remote (GitHub/CDN) registry is planned.

Development

npm install
npm run dev      # run TUI from source (tsx)
npm run build    # compile to dist/

Tech stack

Node.js, TypeScript, Ink 5 (React for CLIs).