UIForge

Build production-grade UI systems and backends in seconds. Frontend with Next.js + Tailwind | Backend with Express + Database

---

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

---

Built with by Manav Arya Singh