https://github.com/dragon4926/modern_web_components

A curated collection of production-grade web components built with vanilla JavaScript following web standards. Perfect for both learning and direct integration into modern web applications.
https://github.com/dragon4926/modern_web_components

components css html js next react web

Last synced: 4 months ago
JSON representation

A curated collection of production-grade web components built with vanilla JavaScript following web standards. Perfect for both learning and direct integration into modern web applications.

• Host: GitHub
• URL: https://github.com/dragon4926/modern_web_components
• Owner: Dragon4926
• Created: 2025-02-13T12:49:32.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-14T14:33:38.000Z (over 1 year ago)
• Last Synced: 2025-05-31T11:35:07.036Z (about 1 year ago)
• Topics: components, css, html, js, next, react, web
• Language: CSS
• Homepage:
• Size: 2.38 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Modern Web Components Collection 🚀

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)

[![Web Components](https://img.shields.io/badge/Web_Components-%3E1.0-blue)](https://developer.mozilla.org/en-US/docs/Web/Web_Components)

[![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/yourusername/modern-web-components/issues)

A curated collection of production-grade web components built with vanilla JavaScript following web standards. Perfect for both learning and direct integration into modern web applications.

## 🌟 Features

- **Framework Agnostic** - Works with any stack (React, Vue, Angular or vanilla JS)

- **Modern CSS** - Flexbox, Grid, and CSS Custom Properties

- **Accessibility First** - WCAG 2.1 compliant components

- **Responsive Design** - Mobile-first fluid layouts

- **Zero Dependencies** - Pure vanilla JavaScript

- **Cross-Browser** - Works on modern browsers (ES6+)

## 🛠️ Installation

```bash

# Clone repository

git clone https://github.com/yourusername/modern-web-components.git

# Use components directly in HTML

```

## 🧩 Component Showcase

| Component       | Description                          | Demo                          | Code                          |

|-----------------|--------------------------------------|------------------------------------|-------------------------------|

| Expanding Cards | Interactive card expansion interface | [Screenshot](./base/expandingCards/im1.png)      | [Code](./base/expandingCards) |

| Card Placeholder | Modern Card (Dual theme) | [Screenshot[Light]](./base/cardPlaceholder/im1.png)       | [Code](./base/cardPlaceholder) |

|  |  | [Screenshot[dark]](./base/cardPlaceholder/im2.png)       |  |

||

## 🤝 Contributing

1. Fork the project

2. Create your feature branch (`git checkout -b feature/AmazingComponent`)

3. Commit changes (`git commit -m 'Add amazing component'`)

4. Push to branch (`git push origin feature/AmazingComponent`)

5. Open Pull Request

**Code Standards:**

- Semantic HTML5 markup

- BEM CSS methodology

- ES6+ JavaScript

- Mobile-first responsive design

## 📄 License

Distributed under the MIT License. See [LICENSE](LICENSE) for more information.

---

▶️ **Video Tutorials**: [Code.Deb YouTube Channel](https://www.youtube.com/@code_dot_deb?sub_confirmation=1)  

💬 **Community Discussion**: [GitHub Discussions](https://github.com/dragon4926/modern-web-components/discussions)