@eprabhu/modus-wc-cli

CLI for setting up Modus Web Components in your project — one command to install packages, configure styles, set up themes, and add pre-built UI templates and patterns.

Install

npm install -g @eprabhu/modus-wc-cli

Or run without installing:

npx @eprabhu/modus-wc-cli <command>

Quick Start

# 1. Scaffold a new React app (or use an existing one)
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

# 2. Set up Modus WC
modus-wc init

# 3. Add a template
modus-wc add dashboard-analytics

# 4. Add a pattern
modus-wc add --pattern modal

# 5. Start the dev server
npm run dev

Commands

modus-wc init

Sets up Modus WC in an existing project. Detects your framework automatically from package.json.

modus-wc init

What it does:

• Detects React, Angular, Vue, or Vanilla JS
• Installs the correct framework wrapper package
• Installs Tailwind CSS
• Creates public/modus-web-components/modus-icons.css (icon fonts)
• Updates index.html with icon preloads and theme initialization script
• Injects CSS imports in the correct order
• Creates src/styles/globals.css with Modus overrides
• Adds @tailwindcss/vite plugin to vite.config.ts
• Optionally configures MCP server + Cursor rules for AI-assisted development

modus-wc add [ids...]

Add UI templates or patterns to your project from the bundled registry.

Templates — full-page layouts with shared dependencies (layouts, navbar):

modus-wc add dashboard-analytics          # add one
modus-wc add app-shell calendar-view      # add multiple
modus-wc add --all                        # add all templates

Patterns — self-contained, composable UI components:

modus-wc add --pattern modal              # add one
modus-wc add --pattern modal tabs         # add multiple
modus-wc add --pattern --all             # add all 93 patterns

modus-wc help add

List all available templates:

modus-wc help add

List all available patterns:

modus-wc help add --pattern

Available patterns:

  Layout Patterns
    drag-drop-grid        Dashboard grid with drag-and-drop reorder
    resizable-card        Snap-grid cards with pointer-driven resize
    grid-layout           Responsive grid layout
    masonry               Masonry layout
    ...

  Navigation Patterns
    sidebar-navigation    Sidebar nav with collapsible sections
    breadcrumbs           Breadcrumb trail
    tabs                  Tab bar with panel switching
    accordion             Expandable accordion sections
    pagination            Page navigation controls
    ...

  AI Patterns
    ai-chat-interface     Conversational AI chat UI
    ai-model-selection    Model picker with capability comparison
    ai-smart-suggestions  Inline AI suggestions
    ai-ux-nudge           Subtle AI prompt nudge
    ... (40+ AI/UX patterns)

modus-wc setup mcp

Configure MCP server and Cursor rules for AI-assisted development.

modus-wc setup mcp

Writes:

• .cursor/mcp.json — registers the Modus Docs MCP server
• .cursor/rules/modus-wc.mdc — Cursor rules for Modus conventions
• .cursor/skills/modus-wc/SKILL.md — Cursor skill for component usage

modus-wc info

Show setup status for the current project, including installed templates and patterns.

modus-wc info

modus-wc docs [component]

View component documentation.

modus-wc docs button
modus-wc docs --open    # open Storybook

Templates vs Patterns

| | Templates | Patterns | |---|---|---| | Scope | Full-page layouts | Single composable UI unit | | Shared deps | Layouts, navbar | Self-contained | | Output dir | src/templates/ | src/patterns/ | | Count | 17 | 93 |

Supported Frameworks

| Framework | Package installed | |-----------|------------------| | React 19 | @trimble-oss/moduswebcomponents-react@latest | | Angular 19 | @trimble-oss/moduswebcomponents-angular@latest | | Vue | @trimble-oss/moduswebcomponents-vue@latest | | Vanilla JS | @trimble-oss/moduswebcomponents@latest |

Links

• Modus Blueprint — Design system site
• Templates — Browse all templates
• Storybook — Component docs
• Modus AI — AI-assisted development guides