Create Morpheus Template

A powerful CLI tool for scaffolding modern Web3 frontend applications with Morpheus integrations.

Features

🚀 Next.js 14 with App Router and TypeScript
🎨 Tailwind CSS with custom dark theme
🔗 @reown/appkit (WalletConnect v2) integration
⚡ wagmi v2 and viem v2 for Web3 interactions
🎯 40+ shadcn/ui components pre-configured
🌐 Multi-network support (Ethereum, Arbitrum, Base)
💰 MOR token balance display with network icons
📱 Responsive design with collapsible sidebar
🎭 Dark theme with emerald accent colors

Installation & Usage

Quick Start (Recommended)

No installation required! Use directly with package runners:

# Using npx (recommended)
npx create-morpheus-template my-morpheus-app

# Using npm
npm create morpheus-template my-morpheus-app

# Using yarn
yarn create morpheus-template my-morpheus-app

# Using pnpm
pnpm create morpheus-template my-morpheus-app

Alternative: Global Installation

# Install globally (optional)
npm install -g create-morpheus-template

# Then use anywhere
create-morpheus-template my-morpheus-app

Command Line Interface

Basic Usage

create-morpheus-template [project-name] [options]

Available Options

| Option | Description | Default | |--------|-------------|---------| | -t, --template <template> | Template variant (minimal, full, custom) | minimal | | -n, --network <network> | Default network environment (mainnet, testnet) | mainnet | | -p, --project-id <id> | WalletConnect Project ID | prompt | | --skip-git | Skip git initialization | false | | --skip-install | Skip dependency installation | false | | --package-manager <pm> | Package manager (npm, yarn, pnpm) | auto-detect | | -h, --help | Display help information | | | -v, --version | Display version number | |

Usage Examples

Create with specific template:

npx create-morpheus-template my-defi-app --template full

Skip git and use yarn:

npx create-morpheus-template my-app --skip-git --package-manager yarn

Testnet environment with custom Project ID:

npx create-morpheus-template my-testnet-app --network testnet --project-id abc123

Non-interactive mode (CI/CD friendly):

npx create-morpheus-template my-app \
  --template minimal \
  --network mainnet \
  --project-id your_project_id \
  --skip-git \
  --package-manager npm

Template Variants

🎯 Minimal Template

Perfect for getting started quickly with essential Web3 functionality.

Includes:

• Basic Next.js setup with TypeScript
• Essential UI components (Button, Card, Input, etc.)
• Wallet connection with AppKit
• MOR balance display
• Single page layout
• Responsive sidebar navigation

🚀 Full Template

Complete dashboard setup with all features and components.

Includes:

• Everything from Minimal template
• All 40+ shadcn/ui components
• Multiple page examples
• Advanced Web3 hooks
• TanStack Query integration
• Form handling with react-hook-form
• Data tables and charts
• Modal and dialog examples

⚙️ Custom Template

Interactive template builder for selecting specific features.

Interactive Options:

• Component selection (pick specific shadcn/ui components)
• Network configuration (select supported networks)
• Additional integrations (GraphQL, Supabase, etc.)
• Layout preferences (sidebar style, theme options)

What's Generated

Core Technologies

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• @reown/appkit - Modern wallet connection
• wagmi - React hooks for Web3
• viem - TypeScript interface for Ethereum
• TanStack Query - Data fetching and caching

Web3 Integration

Wallet Support:

• MetaMask, WalletConnect, Coinbase Wallet, and 100+ others
• Automatic wallet detection
• Mobile wallet support

Network Support:

• Mainnet: Ethereum, Arbitrum, Base
• Testnet: Arbitrum Sepolia
• Easy network switching
• Custom RPC configurations

MOR Token Integration:

• Real-time balance display
• Multi-network support
• Network-specific icons
• Automatic refresh on transactions

Project Setup

Environment Variables

After creating your project, configure your .env.local file:

# Required: Get from https://cloud.reown.com
NEXT_PUBLIC_PROJECT_ID=your_walletconnect_project_id

# Optional: Network environment
NEXT_PUBLIC_NETWORK_ENV=mainnet

# Optional: Custom RPC URLs
NEXT_PUBLIC_ETHEREUM_RPC=https://your-ethereum-rpc
NEXT_PUBLIC_ARBITRUM_RPC=https://your-arbitrum-rpc
NEXT_PUBLIC_BASE_RPC=https://your-base-rpc

Getting Your WalletConnect Project ID

1. Visit Reown Cloud
2. Create a new project
3. Copy your Project ID
4. Add it to your .env.local file

Development Workflow

Starting Development

After creating your project:

cd my-morpheus-app
npm run dev

Your app will be available at http://localhost:3000

Available Scripts

Generated projects include these scripts:

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript compiler

Visual Theme Editor (Optional)

For advanced theme customization:

npm run tweakcn:setup      # One-time setup
npm run dev:with-tweakcn   # Start with theme editor

This provides a visual theme editor at http://localhost:3001 for real-time design customization.

Requirements

• Node.js 18.0.0 or higher
• npm, yarn, or pnpm package manager
• Git (for repository initialization)

Troubleshooting

Common Issues

"Project ID not found" error:

• Make sure you've added NEXT_PUBLIC_PROJECT_ID to your .env.local file
• Verify the Project ID is correct from Reown Cloud

Wallet connection not working:

• Check that your app is running on the correct port
• Ensure your Project ID is configured for the correct domain
• Try refreshing the page and clearing browser cache

Build errors:

• Run npm run type-check to identify TypeScript errors
• Make sure all dependencies are installed with npm install
• Check that your Node.js version is 18 or higher

Directory already exists:

• Choose a different project name
• Remove the existing directory: rm -rf my-project-name

What This Tool Does

This CLI tool is a project scaffolding utility that:

✅ Generates complete Web3 frontend applications
✅ Configures all necessary dependencies and tooling
✅ Sets up wallet integration and Web3 functionality
✅ Provides pre-built UI components and layouts
✅ Includes development and build scripts

❌ Not a runtime library - doesn't get imported into your code
❌ Not an SDK - used once to create projects, not for ongoing development

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Next.js - The React framework
• wagmi - React hooks for Web3
• shadcn/ui - Beautiful UI components
• Tailwind CSS - CSS framework
• Reown - WalletConnect infrastructure