https://github.com/parisa-singh/ui-components-library
A modern UI components library featuring interactive buttons, modals, and accordions with smooth animations and theme toggles.
https://github.com/parisa-singh/ui-components-library
accordions-component button-component css html js modal-component showcase ui
Last synced: about 1 year ago
JSON representation
A modern UI components library featuring interactive buttons, modals, and accordions with smooth animations and theme toggles.
- Host: GitHub
- URL: https://github.com/parisa-singh/ui-components-library
- Owner: parisa-singh
- License: mit
- Created: 2025-03-19T19:30:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-19T19:38:05.000Z (about 1 year ago)
- Last Synced: 2025-03-19T20:33:45.526Z (about 1 year ago)
- Topics: accordions-component, button-component, css, html, js, modal-component, showcase, ui
- Language: CSS
- Homepage: https://parisa-singh.github.io/ui-components-library/
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UI Components Library
A modern **UI components library** featuring **interactive buttons, modals, and accordions** with smooth animations, **theme toggles (Dark Mode & Night Light Mode)**, and customizable styles.
---
## **📌 Features**
✅ **Reusable UI components** (Buttons, Modals, Accordions)
✅ **Smooth animations & transitions**
✅ **Dark Mode & Night Light Mode**
✅ **Shake Button for fun interaction**
✅ **Customizable styles with CSS variables**
✅ **Fully responsive design**
---
## **📌 Installation & Setup**
### **1️⃣ Clone the repository**
```sh
git clone https://github.com/your-username/UI-Components-Library.git
cd UI-Components-Library
```
### **2️⃣ Open the project**
Simply open the `index.html` file in your **browser**.
### **3️⃣ (Optional) Start a local server**
If you want to run a live server:
```sh
npx live-server
```
OR
```sh
python -m http.server 8000
```
Then visit: `http://localhost:8000`
---
## **📌 File Structure**
```
📁 UI-Components-Library
│── 📁 styles
│ ├── main.css
│ ├── components
│ │ ├── buttons.css
│ │ ├── modals.css
│ │ ├── accordions.css
│── 📁 js
│ ├── components
│ │ ├── buttons.js
│ │ ├── modals.js
│ │ ├── accordions.js
│── index.html
│── README.md
```
---
## **📌 Usage**
### **🖱 Buttons**
- **Primary Button:** Shows an alert message.
- **Shake Button:** Makes all buttons shake.
- **Night Light Mode:** Applies a warm filter to reduce eye strain.
### **📝 Modals**
- Click "Open Modal" to display the pop-up window.
- Click the **X** button to close the modal.
### **📑 Accordions**
- Click on any **Accordion section** to expand/collapse it.
---
## **📌 Customization**
You can modify the design by editing `styles/main.css` and component-specific styles inside `styles/components/`.
For example, change button colors:
```css
:root {
--primary-color: #4A90E2;
--secondary-color: #195b9e;
}
```
---
## **📌 Contributing**
Contributions are welcome! Feel free to **fork the repository**, create a new branch, and submit a **pull request**.
1. Fork the project
2. Create a new branch (`git checkout -b feature-branch`)
3. Make your changes
4. Commit (`git commit -m "Added new feature"`)
5. Push (`git push origin feature-branch`)
6. Open a Pull Request
---
## **📌 License**
This project is licensed under the **MIT License**.
📜 Feel free to modify and use it for your own projects!
---