UDS-UI: Universal Design Space For UI

UDS-UI is a premium, multi-framework component studio that allows developers and designers to visually build UI components once and export them instantly for React, Vue, Flutter, and HTML/CSS.

Features

• Multi-Framework Export: Generate production-ready code for React (TSX), Vue (SFC), Flutter (Dart), and Vanilla HTML/CSS.
• Responsive Previews: Test your components across Mobile, Tablet, and Desktop viewports with realistic device frames.
• Visual Configuration: Tweak colors, typography, borders, and layouts using a sleek, intuitive properties panel.
• Real-time Feedback: Instant live preview as you modify component properties.
• Premium Aesthetics: Built with a modern, glassmorphic dark-mode interface for a state-of-the-art developer experience.
• Modular Architecture: Highly scalable codebase structure designed for easy addition of new frameworks and components.

Tech Stack

• Core: Next.js 15+ (App Router)
• Language: TypeScript
• Styling: Vanilla CSS Modules (Design Token System)
• State Management: React Hooks & useMemo optimization
• Icons: Lucide React
• Syntax Highlighting: prism-react-renderer
• Animations: Framer Motion

Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

1. Clone the repository:

   git clone https://github.com/your-username/uds-ui.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

src/
├── app/              # Next.js App Router & Global Styles
├── components/       # UI Components & Code Highlighters
├── data/             # Component Registries & Framework Generators
├── types/            # Shared TypeScript Interfaces
└── public/           # Static Assets

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with by BalaPriyan