Introduction

DesignForge is an open-source React component design system with AI-powered code generation and an interactive Monaco playground.

Features

• Components: 30+ accessible and beautifully crafted components.
• AI Generator: Convert prompts into production-ready UI directly in your browser.
• Playground: Instantly test components and layouts in a sandboxed Monaco editor.
• Themes: Dual-light/dark mode fully customizable with Tailwind CSS tokens.

Architecture

DesignForge uses a monorepo setup powered by Turborepo and pnpm workspaces. The components are built strictly around standard React 19 fundamentals and Tailwind CSS.

How to navigate

You can find components listed on the left sidebar. Or use the Generator tab above to automatically spawn the UI you need!