Generate beautiful React UI components using natural language, customize them with live props, preview instantly, publish reusable components, and install them directly through your own NPM package.
π Live Demo Β Β Β π¦ NPM Package Β Β Β [π» Backend](π₯οΈ Backend) Β Β Β β Star this Repository
npm i virtual-ui-component-own
https://github.com/tushar-342/Own-UI
Own-UI is a full-stack AI-powered React UI Component Platform that enables developers to generate production-ready React components using natural language prompts.
Instead of manually building repetitive UI elements, developers can generate customizable components, preview them in real time, modify props dynamically, publish reusable components, and distribute them through npmβall from a single platform.
The project combines AI-assisted UI generation, component management, authentication, cloud deployment, and package publishing into a modern developer workflow.
Building reusable UI components repeatedly is time-consuming.
Own-UI simplifies frontend development by combining AI, reusable component libraries, and cloud deployment into one seamless platform.
- π€ AI-powered React component generation
- π¨ Live component customization using props
- β‘ Instant preview before publishing
- π¦ One-click npm package installation
- π Public component marketplace
- π Secure Google OAuth authentication
- π Admin dashboard for component management
- βοΈ Cloud deployment with Render
- Generate React components using natural language.
- Customize props before publishing.
- Instant JSX preview.
- Browse reusable community components.
- Search published components.
- Copy or install components instantly.
- Publish reusable components.
- Install directly into React projects.
- Version-controlled package releases.
- Google OAuth login.
- Secure JWT authentication.
- Protected dashboard routes.
- User analytics.
- Published component statistics.
- Component management.
- Frontend deployed on Render.
- npm package published publicly.
- Production-ready architecture.
- React 19
- Vite
- Tailwind CSS
- Framer Motion
- React Router DOM
- Axios
- Lucide React
- Recharts
- Node.js
- Express.js
- MongoDB
- Mongoose
- Google OAuth 2.0
- JWT Authentication
- Render
- npm Registry
- Git
- GitHub
- VS Code
- Postman
+----------------------+
| React Client |
+----------+-----------+
|
|
βΌ
+----------------------+
| Express Server |
+----------+-----------+
|
+----------------------+----------------------+
| | |
βΌ βΌ βΌ
Google OAuth MongoDB Database AI Component Engine
| | |
+----------------------+----------------------+
|
βΌ
Public Component Library
|
βΌ
npm Package Registry
- User signs in using Google OAuth.
- AI credits are assigned.
- User enters a natural language prompt.
- VirtualAI generates a React component.
- User customizes component props.
- Live preview is rendered instantly.
- Component can be published publicly.
- Other developers can browse and install it via npm.
Own-UI/
β
βββ client/
β βββ src/
β βββ public/
β βββ package.json
β
βββ server/
β βββ controllers/
β βββ middleware/
β βββ models/
β βββ routes/
β βββ utils/
β βββ server.js
β
βββ assets/
β
βββ README.md
- User clicks Continue with Google.
- Google OAuth verifies identity.
- Backend validates the user.
- JWT token is generated.
- Protected dashboard becomes accessible.
- AI credits are assigned to the user account.
User Prompt
β
Prompt Validation
β
AI Component Generation
β
React JSX Output
β
Live Preview
β
Component Customization
β
Publish Component
β
Install via npm
Own-UI follows a credit-based usage model to ensure fair access to AI resources while supporting a scalable SaaS architecture.
- π Every new user receives 150 free AI credits after signing in.
- π€ Each AI component generation consumes credits.
- π The remaining credit balance is displayed inside the user dashboard.
- β‘ Users can continue generating components until their credits are exhausted.
- π° Additional credits can be purchased securely through Razorpay.
Google Login
β
βΌ
Receive 150 Free Credits
β
βΌ
Generate AI Components
β
βΌ
Credits Deducted
β
βΌ
Remaining Credits Updated
The credit system prevents abuse of AI resources while providing users with a seamless experience for generating production-ready React components.
Own-UI integrates Razorpay to provide a secure and seamless payment experience for purchasing additional AI credits.
- π Secure payment processing
- β‘ Instant credit allocation after successful payment
- π¦ Subscription-ready architecture
- π§Ύ Backend payment verification
- π° Automatic credit balance update
Credits Exhausted
β
βΌ
Choose Premium Plan
β
βΌ
Razorpay Checkout
β
βΌ
Secure Payment
β
βΌ
Payment Verification
β
βΌ
Credits Added to User Account
β
βΌ
Continue AI Component Generation
This payment flow enables VirtualAI to operate as a scalable SaaS platform while providing a smooth purchasing experience for users.
Own-UI includes a powerful admin dashboard that provides complete visibility into platform activity and simplifies component management.
- π Real-time platform analytics
- π₯ Total registered users
- π¦ Published component statistics
- π Search public components
- β Publish new components
- π Component usage insights
- β‘ Responsive admin interface
The dashboard enables administrators to efficiently manage the component ecosystem while monitoring user engagement and platform growth.
Own-UI provides a published React component library that allows developers to install reusable UI components directly into their projects.
npm install virtual-ui-libimport { Button } from "virtual-ui-lib";
function App() {
return (
<Button text="Get Started" />
);
}
export default App;- π¦ Easy installation through npm
- β‘ Reusable production-ready components
- π¨ Customizable props
- π Version-controlled updates
- π Faster UI development
Own-UI is deployed as a production-ready SaaS application.
| Service | Live URL |
|---|---|
| π Frontend | https://own-ui-main.onrender.com |
| βοΈ Backend | https://own-ui.onrender.com |
| π¦ NPM Package | https://www.npmjs.com/package/virtual-ui-lib |
- Production-ready React frontend
- Secure Express backend
- MongoDB Atlas database
- Google OAuth authentication
- Razorpay payment integration
- Published npm package
Developing Own-UI provided valuable experience in building and deploying a full-stack AI-powered SaaS platform.
- Designing scalable MERN applications
- Integrating AI into real-world workflows
- Implementing secure Google OAuth authentication
- Building a credit-based SaaS business model
- Integrating Razorpay payment gateway
- Publishing reusable React components to npm
- Managing production deployments
- Creating responsive and reusable UI systems
Full-Stack MERN Developer passionate about building AI-powered SaaS applications, scalable backend systems, and modern React experiences.
- π» GitHub: https://github.com/tushar-342
- πΌ LinkedIn: (https://www.linkedin.com/in/tushar-kumar-he-him-3rd-44aa09281/)
- π§ Email: (tusharkrverma224@gmail.com)
Contributions are welcome!
If you'd like to improve Own-UI:
- Fork the repository.
- Create a new feature branch.
- Commit your changes.
- Push your branch.
- Open a Pull Request.
For major changes, please open an issue first to discuss your proposed improvements.
This project is licensed under the MIT License.
Feel free to use, modify, and distribute this project in accordance with the license terms.
If you found this project helpful, please consider giving it a β on GitHub.
Your support motivates me to continue building open-source projects and developer tools.
Thank you for visiting the Own-UI repository! π