UIForge
Quick Start
One Command - Complete Project
npx uiforge
That's it! The interactive CLI will guide you through:
- Choose template (Frontend, Backend, or Full Stack)
- Select design language (12 styles - or skip)
- Pick database (for backend/fullstack)
- Choose auth (optional)
- 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 pricingsaas-modern - Modern bento-style SaaSportfolio - Creative portfoliodashboard - Analytics dashboardmarketplace - E-commerce landingagency - Business servicesai-product - AI product showcasereal-estate - Property showcaseecommerce - Shop dashboardfitness - Gym landingtactical-dashboard - Operations centerpremium-landing - Full-featured
Backend Templates
api-express - Express.js REST APIapi-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