UIForge

Quick Start

One Command - Complete Project

npx uiforge

That's it! The interactive CLI will guide you through:

1. Choose template (Frontend, Backend, or Full Stack)
2. Select design language (12 styles - or skip)
3. Pick database (for backend/fullstack)
4. Choose auth (optional)
5. Auto-push to GitHub (optional)

Installation

Using npx (Recommended)

npx uiforge create saas-modern my-app

Install Globally

npm install -g @manavarya0909/ui-forge-cli
uiforge create saas-modern my-app

All Features

Frontend Templates

• 12 Design Styles: glass, minimal, brutalism, enterprise, bento, neumorphism, flat, material, dark-minimal, tech-futurism, monochrome, swiss
• Production Ready: Next.js 14, Tailwind CSS, Framer Motion, shadcn/ui components

Backend Features

• Full Code Generation - Not just configs! Complete API with:
  • Express.js server setup
  • RESTful routes (auth, users, products)
  • Middleware (error handling, auth)
  • Database integration (Prisma/Drizzle)
  • TypeScript throughout
• Authentication: Clerk, NextAuth.js, Supabase Auth
• Databases: PostgreSQL, MongoDB (via Prisma/Drizzle)

AI-Powered

• Design Language Application: AI applies chosen design to template automatically
• Smart Copy Generation: Marketing content via Ollama or Groq

Developer Experience

• GitHub Push: Auto-initialize and push to GitHub
• Auto Install: Dependencies installed automatically
• TypeScript: Full type safety everywhere

Usage Examples

Interactive Mode (Recommended)

npx uiforge
# CLI prompts for all choices

Create Frontend Only

npx uiforge create saas-modern my-app --style glass

Create Backend with Database

npx uiforge backend my-api --database prisma --auth nextauth

Full Stack with GitHub Push

npx uiforge app --name my-fullstack --database prisma --push --git

Quick Create

# Create with all defaults
npx uiforge create saas my-app

# Create with design style
npx uiforge create saas my-app --style glass

# Create with options
npx uiforge create saas my-app --style brutalism --git --install

CLI Commands

Main Commands

| Command | Description | |---------|-------------| | npx uiforge | Interactive mode (recommended) | | npx uiforge app | Full-stack generator | | npx uiforge create [template] | Create frontend project | | npx uiforge backend [name] | Create backend API | | npx uiforge list | List all templates | | npx uiforge styles | List design styles |

Options

# Template options
--style <style>        Design style (minimal, glass, brutalism, etc.)
--color <hex>         Primary color
--font <font>         Google Font
--dark                Enable dark mode

# Project options
-n, --name <name>     Project name
-o, --output <dir>    Output directory

# Backend options
-d, --database <db>   Database: prisma, drizzle, mongodb
-a, --auth <auth>     Auth: clerk, nextauth, supabase

# Automation options
--git                 Initialize git
--push                Push to GitHub
--install             Auto-install dependencies

# AI options
--ai                  Enable AI copy generation
--api-key <key>       AI API key for design language

Examples

# Frontend with design style
uiforge create saas-modern my-app --style glass

# Frontend with all options
uiforge create portfolio my-portfolio --style minimal --git --install

# Backend with database
uiforge backend my-api --database prisma

# Full stack
uiforge app --name my-app --database prisma --auth nextauth --push

Design Styles

| Style | Description | Best For | |-------|-------------|----------| | glass | Frosted glass, transparency | Modern apps | | minimal | Clean whitespace | Portfolios | | brutalism | Bold, high contrast | Creative sites | | enterprise | Professional, structured | Business apps | | bento | Grid boxes layout | Dashboards | | neumorphism | Soft shadows | Mobile apps | | material | Layered UI | Android-style | | dark-minimal | Dark theme | Developer tools | | tech-futurism | Neon, glow effects | Tech products | | monochrome | Single color tones | Sophisticated | | swiss | Grid typography | Minimal brands | | flat | No depth | Simple apps |

View Design Docs

uiforge styles --docs

Templates

Frontend Templates

• saas - SaaS landing with pricing
• saas-modern - Modern bento-style SaaS
• portfolio - Creative portfolio
• dashboard - Analytics dashboard
• marketplace - E-commerce landing
• agency - Business services
• ai-product - AI product showcase
• real-estate - Property showcase
• ecommerce - Shop dashboard
• fitness - Gym landing
• tactical-dashboard - Operations center
• premium-landing - Full-featured

Backend Templates

• api-express - Express.js REST API
• api-next - Next.js API routes

Backend Generation

What's Generated (Full Code, Not Configs!)

src/
├── index.ts              # Express server
├── routes/
│   ├── auth.ts          # Login/register endpoints
│   ├── user.ts          # CRUD for users
│   └── product.ts       # CRUD for products
├── middleware/
│   ├── auth.ts          # JWT authentication
│   └── errorHandler.ts  # Error handling
├── utils/
│   └── helpers.ts       # Utility functions
└── tests/
    └── auth.test.ts     # Test file

prisma/
└── schema.prisma        # Database schema

package.json             # Dependencies + scripts
tsconfig.json           # TypeScript config
.env.example            # Environment variables

API Endpoints Created

| Method | Endpoint | Description | |--------|----------|-------------| | POST | /api/auth/register | Register user | | POST | /api/auth/login | Login | | GET | /api/users | List users | | GET | /api/products | List products | | POST | /api/products | Create product | | PUT | /api/products/:id | Update product | | DELETE | /api/products/:id | Delete product |

Development

Run Locally

git clone https://github.com/Manavarya09/ui-forge.git
cd ui-forge
npm install
npm run build
npm run dev

AI Setup

Option 1: Ollama (Local - Free)

curl -fsSL https://ollama.ai/install.sh | sh
ollama pull llama3
ollama serve

Option 2: Groq (Cloud - Free Tier)

export GROQ_API_KEY=your-key

Project Structure

ui-forge/
├── cli/                 # CLI commands
├── engine/              # Code generation
├── templates/           # Frontend templates
├── design-languages/    # 12 design styles
│   └── <style>/README.md
├── design-system/       # Tailwind tokens
├── ai/                  # AI providers
└── utils/               # Helpers

Quick Reference Card

# Interactive (recommended)
npx uiforge

# Create frontend
npx uiforge create saas-modern my-app --style glass

# Create backend
npx uiforge backend my-api --database prisma

# Full stack
npx uiforge app --database prisma --push

# List all
npx uiforge list
npx uiforge styles

# Deploy
npx uiforge deploy --provider vercel

Credits

• Next.js
• Tailwind CSS
• shadcn/ui
• Framer Motion
• Express.js
• Prisma