Skip to content

RahulManral/VectorUI

Repository files navigation

🌟 VectorUI

VectorUI is a modern React component UI website where developers can discover, preview, and use beautifully animated and reusable UI components for their projects.

Built with Next.js, React, Tailwind CSS, Framer Motion, Prism.js, and Node.js, VectorUI delivers smooth animations, elegant design, and developer-friendly usability.


🚀 Features

  • 🧩 Ready-to-use React UI components
  • 💫 Smooth animations powered by Framer Motion
  • 🎨 Modern styling with Tailwind CSS
  • 🧠 Syntax highlighting with Prism.js
  • 📱 Responsive across all devices
  • ⚡ Fast and optimized with Next.js
  • 🔥 Copy-paste component code instantly

🛠️ Tech Stack

Frontend

  • Next.js
  • React
  • Tailwind CSS
  • Framer Motion
  • Prism.js

Backend

  • Node.js

⚙️ Getting Started

Follow these steps to run VectorUI locally on your machine.

1️⃣ Prerequisites

Make sure you have the following installed:

  • Node.js (v18 or later recommended)
  • npm or yarn package manager

Check your version by running:

node -v
npm -v

2️⃣ Installation

Clone the repository to your local system:

git clone https://github.com/your-username/vectorui.git

Navigate into the project directory:

cd vectorui

Install the required dependencies:

npm install

If you’re using yarn, run:

yarn install

3️⃣ Run the Development Server

Start the development environment:

npm run dev

Once the server is running, open your browser and navigate to:

http://localhost:3000

You should see the VectorUI homepage live on your local machine 🎉


4️⃣ Building for Production

To create an optimized production build:

npm run build

Then start the production server:

npm start

Your production build will be served on:

http://localhost:3000

🧠 How It Works

VectorUI provides animated and styled components using Framer Motion and Tailwind CSS.
Each component page includes an interactive preview along with syntax-highlighted code snippets powered by Prism.js, allowing developers to quickly copy and use components in their own projects.


🤝 Contributing

Contributions are always welcome!
If you’d like to improve VectorUI, here’s how you can get started:

  1. Fork this repository
  2. Create a new branch:
    git checkout -b feature/your-feature-name
  3. Make your changes and commit them:
    git commit -m "Add: new component"
  4. Push your branch:
    git push origin feature/your-feature-name
  5. Open a Pull Request 🚀

🧾 License

This project is licensed under the MIT License
You can freely use and modify it in your own projects.


📫 Contact

Author: Rahul Manral Website: VectorUI
Email: 6rahulmanral9@gmail.com


Made with Next.js, React, Tailwind CSS, Framer Motion, and Prism.js


About

VectorUI is a modern React component UI website that offers beautifully animated, reusable UI elements for developers. Built with Next.js, React, Tailwind CSS, Framer Motion, Prism.js, and Node.js, VectorUI makes it easy to explore, copy, and use sleek interactive components in your projects

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors