@eprabhu/modus-wc-cli

@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. Each pattern folder includes all required .tsx / .css and any helper files shipped with that pattern; nothing is extracted or split out when you add them.

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

The registry currently ships 102 patterns (updated from 94). Recent additions include layout and shell pieces such as ai-ux-floating-prompt, bottom-sheet, breadcrumb-header, code, dock, filter-header, pagination-footer, and title-header, plus prior sprint Group A/B IDs: calendar, chat-bubble, countdown, drawer, fieldset, filter, hero, kbd, page-header, rich-text-editor, stacked-alerts, stat, status-indicator, swap, timeline, widget, and window-mockup.

modus-wc help add

List all available templates:

modus-wc help add

List all available patterns (102 total, grouped by category):

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
    breadcrumb-header     Top row with breadcrumbs + action controls
    title-header          Page title row with leading icon
    filter-header         Toolbar row with filters, chips, search
    tabs                  Tab bar with panel switching
    accordion             Expandable accordion sections
    pagination            Page navigation controls
    pagination-footer     Responsive table footer (size + jump)
    dock                  Fixed bottom/side nav dock with icons
    ...

  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
    ai-ux-floating-agent-chat  Modus Assistant panel + FAB
    ai-ux-floating-prompt      Floating doc-anchored prompt bar
    ... (45+ 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 (CSS + helpers live in the pattern folder)
Output dir	src/templates/	src/patterns/
Count	17	102

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