akshikamudgal / mirage-ui

Mirage-UI is a set of easily accessible, reusable, and composable design components and animations that make it super easy to improve the user experience of your websites and applications.

🌌 Mirage-UI

Mirage-UI is a set of easily accessible, reusable, and composable design components and animations that make it super easy to improve the user experience of your websites and applications.

Any design on a website that you see and like, just take a screen recording and raise an issue here. We'll get the design as a simple and reusable component for you to use.

---

Introduction -

• Mirage-UI is the next stop for all your design and animation needs.
• We promote the community to contribute their designs and take designs from the repository for their community or personal projects.
• Our moto No Contribution is small and we appreciate each and every contribution from all of you.

---

📜 Instructions to follow while contributing -

• Make sure that with every design/ component should be added to a separate folder.

• Every folder should have its own README.md file where instructions to setup environment should be there and a demo video in the form of a gif should be added. Refer to the README Template to make the README for the component you add.

• You can host the GIF on any website and insert the link in the README file to save space in the repository. Some useful links:

  1. How to add GIF in README using markdown.

  2. Sample of how GIF is put in README

  3. Online Video to GIF converter

  4. Quick & easy trick for hosting GIFs (for this GIF needs to be less than 10mb)

  5. Some hosting sites:

     • Imgur
     • Gifyu
     • Giphy
     • Tenor

• Always update the table of contents in the parent folder where the new component is added.

• Whether you are adding an animation or a design component or any other code, make sure to include all the additional scripts and CDN's within the file/ folder itself and with addequate documentation as required. The code must be extremely simple to understand such that it is ready for immediate use in some project.

• Make sure to follow the Code of Conduct and be respectful towards others while contributing to the project.

---

✨ Table of Contents -

• Angular
• React
• HTML+CSS+JS components
• Vue

---

🚩 How to get started ?

You can refer to the following articles on the basics of Git and Github or contact the Project Maintainers in case of any query:

• Forking a Repo
• Cloning a Repo
• How to create a Pull Request
• Getting started with Git and GitHub

---

🔰 Basic Environment Setup -

• Drop a ⭐ on the GitHub repository.

• Download Git (when you install Git, Git Bash also gets installed by default)

• Download and install a code/ text editor.

  • Recommended-
    • Download VS Code
    • Download Atom

• VS Code extension recommended to work with the project-

  • Live Server
  • Prettier
  • HTML CSS Support
  • Intellisense for CSS

• Clone the repository by running command in your Git Bash:

git clone https://github.com/<your_GitHub_username>/Mirage-UI.git

• Now open the project with the code/ text editor of choice.

Note -

• All CDNs and additional scripts are already there in the repo so it is ready to use immediately after cloning.
• Please follow best code formatting and linting practices to assure good code quality. You should use tools such as Prettier or Eslint for thy purpose.

---

Stargazers over time 🌟