merchify-cli

CLI tool for automatic setup and configuration of Merchify UI components.

Features

• ✅ Automatic @source path detection - Detects your project structure and configures correct paths
• ✅ Zod dependency management - Installs zod if not already present
• ✅ Smart project detection - Works with both src/app and app folder structures
• ✅ Package manager detection - Supports npm, pnpm, yarn, and bun
• ✅ Configuration verification - Validates setup after completion

Usage

Quick Setup

Run this command in your Next.js project root:

npx merchify-cli init

This will:

1. Detect your project structure (src/app/ vs app/)
2. Find your globals.css file
3. Install zod if missing
4. Add/update @source paths in globals.css
5. Verify the configuration

What It Configures

The CLI automatically adds the correct @source directives to your globals.css:

For src/app/globals.css:

@import "tailwindcss";

/* Auto-configured by merchify-cli */
@source "../../src/app/**/*.{js,ts,jsx,tsx,mdx}";
@source "../../node_modules/merchify-ui/**/*.{js,ts,jsx,tsx}";

For app/globals.css:

@import "tailwindcss";

/* Auto-configured by merchify-cli */
@source "../app/**/*.{js,ts,jsx,tsx,mdx}";
@source "../node_modules/merchify-ui/**/*.{js,ts,jsx,tsx}";

Example Output

🎨 Merchify UI Setup Wizard

Detected configuration:
  Project structure: src/app/
  globals.css location: src/app/globals.css
  Package manager: pnpm
  Zod installed: ✗

? Continue with automatic setup? › (Y/n)

📦 Installing zod...
✓ Zod installed

⚙️  Configuring Tailwind @source paths...
✓ globals.css updated

🔍 Verifying configuration...
  ✓ Tailwind configuration verified

✅ Setup complete!

Next steps:
  1. Restart your dev server
  2. Import components from merchify-ui

  Example:
  import { Shop, Product, ProductImage } from 'merchify-ui';

  See docs: https://merchify-site-staging.driuqzy.workers.dev/docs

Requirements

• Node.js 18+ or 20+
• Next.js 13+ or 14+ or 15+
• Tailwind CSS v4

Manual Setup

If you prefer manual configuration, see: https://merchify-site-staging.driuqzy.workers.dev/llm-kit/latest/theme-setup.md

Troubleshooting

"Could not find globals.css"

The CLI looks for globals.css in these locations:

• src/app/globals.css
• app/globals.css
• src/styles/globals.css
• styles/globals.css

Create one at app/globals.css or src/app/globals.css before running the CLI.

"@source directives already exist"

The CLI will ask if you want to overwrite existing @source directives. Choose "Yes" to let the CLI configure the correct paths automatically.

License

MIT