/GlassyUI-Components

GlassyUI: Elegant Glassmorphism Components for Modern UIs

Primary LanguageTypeScript

GlassyUI-Components

Live: glassyui

GlassyUI-Components is an open-source library of React components designed with a stunning glassmorphism effect. This project aims to provide a modern and sleek design for UI elements, making your web applications stand out.

Features

  • Glassmorphism-themed React components
  • Customizable styles with SCSS
  • Beginner-friendly and easy to contribute to
  • 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 with glassmorphism theme.
  • Textareas: Stylish textareas with glassmorphism.
  • Modals: Elegant modals with glassmorphism effect.
  • Navigation Bar: Modern navigation bars with glassmorphism theme.

Getting Started

To get started with GlassyUI-Components, follow these instructions:-

Prerequisites

  • Node.js and npm installed on your machine.

Installation

  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. Visit the Application: Open your browser and go to http://localhost:3000 to see the components in action.

Contribution Rule

  • Ask for assigning the issue before raising any PR.

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