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.
- Glassmorphism-themed React components
- Customizable styles with SCSS
- Beginner-friendly and easy to contribute
- Modular and reusable 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.
Make sure you have Node.js and npm installed on your machine.
- clone the repository:
git clone https://github.com/Jaishree2310/GlassyUI-Components.git
cd GlassyUI-Components
- Run Docker compose File:
docker compose up
- 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.
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>
);
}
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.
-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.
- 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! ⭐
If you enjoy using GlassyUI-Components and find it helpful, please give it a star! Your support encourages further development and improvement.