🌟 GlassyUI-Components

Live Demo: GlassyUI

Welcome to GlassyUI-Components! This open-source library features stunning React components designed with a captivating glassmorphism effect, perfect for giving your web applications a modern and sleek design.

Project Structure ✨

Check the project structure here Project Structure

Project Overview

This open-source library features stunning React components designed with a captivating glassmorphism effect, perfect for giving your web applications a modern and sleek design.

This project is now OFFICIALLY accepted for

🌟 Stars	🍴 Forks	🐛 Issues	🔔 Open PRs	🔕 Closed PRs

✨ Features

Glassmorphism-themed React components
Customizable styles with SCSS
Beginner-friendly and easy to contribute
Modular and reusable components

🛠️ Components

Buttons: Various button styles with glassmorphism effect.
ProgressBar: Animated progress bars with a glassy look.
Input Fields: Sleek input fields styled with glassmorphism.
Textareas: Stylish textareas with a glassy touch.
Modals: Elegant modals featuring the glassmorphism effect.
Navigation Bar: Modern navigation bars with a glassy theme.

🛠️ Tech Stack

React: JavaScript library for building user interfaces.
SCSS: A CSS preprocessor for more manageable styles.
Docker: For containerization and easy deployment.
Node.js: JavaScript runtime for server-side development.

🖥️ Website Preview

Home Page Components Button

🚀 Getting Started

Prerequisites

Make sure you have Node.js and npm installed on your machine.

Installation with docker

clone the repository:

git clone https://github.com/Jaishree2310/GlassyUI-Components.git
cd GlassyUI-Components

Run Docker compose File:

docker compose up

Installation without docker

Clone the Repository:

git clone https://github.com/Jaishree2310/GlassyUI-Components.git
cd GlassyUI-Components

Install Dependencies:

npm install

Start the Development Server:

npm start

Open your browser and go to http://localhost:3000 to see the components in action.

📜 Changelog

All notable changes to this project will be documented in this file.

[Unreleased]

Added: A new button component with hover effects.
Changed: Updated SCSS styles for improved responsiveness.
Fixed: Resolved an issue with the modal not closing properly on mobile devices.

[1.0.0] - 2024-10-15

Added: Initial release of GlassyUI-Components.
- Features glassmorphism-themed buttons, progress bars, input fields, text areas, modals, and navigation bars.
Improved: Documentation and examples for each component.
Fixed: Minor bugs in the button component.

📝 Usage

Import the desired component into your React project and use it as follows:

import { GlassyButton } from 'glassyui';

function App() {
  return (
    <div className='App'>
      <GlassyButton>Click Me</GlassyButton>
    </div>
  );
}

🚀 Future Enhancements / Roadmap

Feature/Improvement	Description
🎨 Theme Customization	Allow users to customize the glassmorphism effect with different colors and opacities.
♿ Accessibility Improvements	Ensure all components are fully accessible to users with disabilities.
➕ Additional Components	Introduce new components such as dropdowns, tooltips, and tabs.
⚡ Performance Optimization	Optimize the library for faster load times and better performance.
📚 Documentation Expansion	Provide comprehensive guides and examples for each component to facilitate easier usage and contribution.

🤝 Contributing

We welcome contributions to make this library even better! Here are a few steps to help you get started:

Fork the Repository: Create your own copy of the repository.
Create a Branch: For your feature or bug fix.

git checkout -b my-feature-branch

Make Changes: Implement your feature or fix.
Commit Your Changes:

git commit -m "Add my feature"

Push to the Branch:

git push origin my-feature-branch

Open a Pull Request: Submit your changes for review.

Contribution Rule

-Please ask for issue assignment before raising any PR.

-If more than 1 week issue is not resolved then it will be assigned to someone else.

Code of conduct:

This README structure includes all the sections you wanted.
Adjust the contributors section as needed based on your actual contributors.
Feel free to add or modify any content to better fit your project’s specific needs!

-Important Rule for Creating component to follow the order of component.

Basic Usage
Props 3.Customizable component
Theme (of your new component)
Example
Copy code

-for eg: Button component,Progress Bar components

Our Contributors

We truly appreciate your incredible contributions to this project! Your dedication and hard work are vital to its continued growth and success. If you’ve found value in it, don’t forget to show your support by giving our repository a star! ⭐

| Contributor | Contributor | Contributor | Contributor | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | |

[Jaishree2310](https://github.com/Jaishree2310) 👩‍💻

[Sawan-Kushwah](https://github.com/Sawan-Kushwah) 👨‍💻

[Gauravtb2253](https://github.com/Gauravtb2253) 👨‍💻

[Alolika](https://github.com/alo7lika) 👩‍💻

| |

[Hritika](https://github.com/hritika2409) 👩‍💻

[Aditya Innovates](https://github.com/AdityaInnovates) 👨‍💻

[Neeru](https://github.com/neeru24) 👩‍💻

[Haseeb Zaki](https://github.com/haseebzaki-07) 👨‍💻

| |

[Gurliv](https://github.com/gurliv21) 👩‍💻

[Abhishek Hegde](https://github.com/abhishekHegde2000) 👨‍💻

[Naz](https://github.com/NazTM) 👩‍💻

[Kode Craze](https://github.com/kodeCraze) 👨‍💻

| |

[Masabin](https://github.com/masabinhok) 👩‍💻

[Ameer Jafar](https://github.com/Ameerjafar) 👨‍💻

[Devx Mani](https://github.com/devxMani) 👨‍💻

[Ashish](https://github.com/ashish-um) 👨‍💻

| |

[Va Manjain](https://github.com/VAmanjain) 👩‍💻

[Lakshmi Rajvagu](https://github.com/lakshmirajvagu) 👩‍💻

[Knight Hinata](https://github.com/knighthinata) 👨‍💻

[ADeshmukh](https://github.com/ADeshmukh80) 👨‍💻

🌟 So many talented contributors! 🎉 Want to meet them all? Click here to discover the amazing team! 👩‍💻👨‍💻

patch-1

Stargazers ❤️

[![Stargazers repo roster for @Jaishree2310/GlassyUI-Components](https://reporoster.com/stars/dark/Jaishree2310/GlassyUI-Components)](https://github.com/Jaishree2310/GlassyUI-Components/stargazers)

Forkers ❤️

main

License

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

💗 Stargazers

[![Stargazers repo roster for @Jaishree2310/GlassyUI-Components](https://reporoster.com/stars/Jaishree2310/GlassyUI-Components)](https://github.com/Jaishree2310/GlassyUI-Components/stargazers)