🎨 Component Gallery

Small HTML/CSS components, built by the community. Buttons, cards, navbars, modals, footers — pick an issue, build a component, open a PR. It takes 5–10 minutes.

A perfect first open-source contribution.

---

✨ What is this?

A growing gallery of small, reusable UI components (buttons, cards, navbars, modals, footers, badges, toggles…) contributed by developers of all skill levels. Every component is one self-contained HTML file in the components/ folder. The gallery page loads them all automatically and renders a live preview.

No framework. No build step. No server required. Just HTML, CSS, and a little vanilla JavaScript.

🖼️ Live demo

▶️ https://abdellox.github.io/ComponentGallery/

Or run it locally:

# with Python
python -m http.server 8000

# with Node
npx serve .

Then visit http://localhost:8000.

Note: script.js reads components.json with fetch(), so you need a local server (any of the above) instead of opening the file directly.

🚀 How to contribute (the short version)

1. Fork this repo and clone it to your machine.
2. Pick or create an issue labeled good first issue. If there is none, suggest a new component!
3. Create a component — add a self-contained .html file in components/, e.g. components/button-rgb.html. Your component must have its own <style> block so it looks correct anywhere.
4. Register it — add one entry to components.json:

   {
     "file": "components/button-rgb.html",
     "name": "RGB Button",
     "category": "button",
     "author": "your-github-username",
     "github": "https://github.com/your-github-username",
     "description": "A rainbow-animated button."
   }

5. Open a pull request. That's it — you're in the gallery! 🎉

📖 Full details, tips and checklist: see CONTRIBUTING.md.

🎯 Current components

#	Component	Category	Author
1	Glow Button	button	Abdellox
2	Profile Card	card	Abdellox
3	Glassmorphism Navbar	navbar	Abdellox
4	Animated Modal	modal	Abdellox
5	Simple Footer	footer	Abdellox

Count updates automatically as components are added.

🗂️ Project structure

ComponentGallery/
├── index.html          # The gallery page
├── style.css           # Styles for the gallery page (not components)
├── script.js           # Loads components.json + renders previews
├── components.json     # Manifest: every component listed here
├── components/         # ← add your component file here
├── README.md
└── CONTRIBUTING.md

🧪 Component requirements (minimal!)

• One self-contained .html file (own <style> block).
• Something visual — you can see it in the gallery.
• No external libraries (keep it pure HTML/CSS).
• Category already exists (button, card, navbar, modal, footer…) or suggest a new one.
• Register it in components.json.

💬 Community

• Found a bug? Open an issue.
• Want to chat? Join us on Discord / share on r/webdev and r/opensource!

🧑‍🤝‍🧑 Contributors

Thanks to everyone who contributes — this project is what you make it. 💙

✅ License

Released under the MIT License — use the components anywhere you like. See LICENSE.

---

Built with 💖 by Abdellox and the community.