Skip to content

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.

License

Notifications You must be signed in to change notification settings

ALPHAVIO/Mirage-UI

Β 
Β 

Repository files navigation

Logo

About-

Forks Stars GitHub issues GitHub PRs Dependabot Status

All Contributors

  • 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.

Discord

  • 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.

:octocat: 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.

πŸ› οΈ Technology Stack

HTML CSS Javascript Angular React Vue


πŸ“œ 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. GIF optimizer in case you are using this trick ^ to host GIFs and it is more than 10mb.

    6. Some hosting sites: (if needed)

  • 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 -


🚩 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:


πŸ”° Basic Environment Setup -

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.

Open Source Events Project is associated with:

1. PClub Summer of Code

  • PSOC( PClub Summer of Code ) is the 2 month long Open Source program during summers conducted by Programming Club, UIET, with an aim to help beginners get started with Open Source Development while encouraging Diversity .

2. Let's Grow More Summer of Code

  • LGM-SOC ( Let's Grow More Summer of Code ) is a one month long Open Source program organized by LetsGrowMore Community to encourage student participation in open source software development under the guidance of mentors from the open source community.

Maintainers ✨


Pranav Mendiratta

πŸ’»πŸ“– 🚧

Pranav Singh

πŸ’»πŸ“– 🚧

Ayush Jain

πŸ’»πŸ“– 🚧

Ria Tyagi

πŸ’»πŸ“– 🚧

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Mayank Mohak

πŸ“–

Anupam Panwar

πŸ’» πŸ“–

Akshat Virmani

πŸ“–

Rohan Kumar

πŸ’» πŸ“–

POOJA BHOSKAR

πŸ’» πŸ“–

Utkarsh Maurya

πŸ’» πŸ“–

urvashiparashar

πŸ’» πŸ“–

akshikamudgal

πŸ’» πŸ“–

Sanyam17-beep

πŸ’» πŸ“–

puneetkaur2929

πŸ’»

Siddhi Bhanushali

πŸ’» πŸ“–

Jay Parmar

πŸ“–

Ujjawal Sharma

πŸ’» πŸ“–

Khushi Agarwal

πŸ’» πŸ“–

This project follows the all-contributors specification. Contributions of any kind welcome!


Stargazers over time 🌟

Stargazers over time


About

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.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 44.5%
  • CSS 27.6%
  • JavaScript 26.5%
  • SCSS 1.4%