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

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

🖥️ Website Preview

🚀 Getting Started

Prerequisites

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

Installation with docker

1. clone the repository:

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

2. Run Docker compose File:

docker compose up

Installation without docker

1. Clone the Repository:

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

2. Install Dependencies:

npm install

3. Start the Development Server:

npm start

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

📝 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>
  );
}

🤝 Contributing

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

1. Fork the Repository: Create your own copy of the repository.

2. Create a Branch: For your feature or bug fix.

git checkout -b my-feature-branch

3. Make Changes: Implement your feature or fix.

4. Commit Your Changes:

git commit -m "Add my feature"

5. Push to the Branch:

git push origin my-feature-branch

6. Open a Pull Request: Submit your changes for review.

Contribution Rule

Please ask for issue assignment before raising any PR.

⭐ Give it a Star!

If you enjoy using GlassyUI-Components and find it helpful, please give it a star! Your support encourages further development and improvement.