ReactForge

🌐 reactforge.app

A powerful low-code React builder for developers. Design freely or build structured, production-ready UIs with Shadcn/UI components.

---

✨ Features

• Dual Mode Architecture

  • 🎨 Design Mode - Free-form canvas for mockups & prototyping
  • 🏗️ Build Mode - Structured containers for production-ready code

• Visual Editor

  • Drag & drop Shadcn/UI components
  • Real-time property editing
  • Typography, colors, spacing, dimensions controls
  • Component tree view

• Export System

  • Clean JSX/TSX code generation
  • Tailwind CSS classes
  • Copy to clipboard or download

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• UI Library: Shadcn/UI + Radix UI
• Styling: Tailwind CSS
• State: Zustand + Immer
• DnD: dnd-kit
• Language: TypeScript

🚀 Getting Started

# Install dependencies
bun install

# Run development server
bun dev

# Open in browser
open http://localhost:3000

📁 Project Structure

src/
├── app/                    # Next.js App Router
├── components/
│   ├── editor/            # Editor UI (Canvas, Panels, etc.)
│   ├── registry/          # Component definitions
│   ├── renderer/          # Visual renderer
│   └── ui/                # Shadcn/UI components
├── lib/
│   └── store/             # Zustand state management
└── docs/                  # Documentation

📖 Documentation

• Architecture
• Design System
• Requirements
• Tech Stack

🗺️ Roadmap

See Plan.md for the current development roadmap.

---

ReactForge - Build React UIs visually. Export clean code.

🌐 reactforge.app