🎨 Shades By Jay - UI Component Library

Live Demo: https://shadesbyjay.site/

Shades By Jay is a modern, free, and open-source UI component library designed to accelerate web development. It offers a beautiful, hand-crafted collection of over 250+ responsive HTML, CSS, and JavaScript components that you can easily copy and paste into your own projects with a single click.

Whether you are a developer looking to speed up your workflow or a recruiter exploring the technical capabilities of the creator, this project showcases modern frontend development practices, UI/UX design skills, and a strong understanding of web accessibility and performance.

---

✨ Features

• 250+ Ready-to-Use Components: Including Buttons, Cards, Loaders, Toggle Switches, Forms, Inputs, and full Page Templates.
• Copy & Paste: One-click copy for both HTML and CSS. No package managers required.
• Live Interactive Playground: Built-in IDE-like playground to edit and test HTML/CSS code live before copying.
• Modern Design Trends: Components featuring Glassmorphism, Neumorphism, Retro UI, 3D elements, and Neon aesthetics.
• Authentication Ready: Includes integration with Supabase for user authentication, allowing users to save their favorite components.
• Responsive & Accessible: Components are built with modern CSS (Flexbox/Grid) and designed to work beautifully across all device sizes.
• Zero Dependencies: Pure HTML, Vanilla CSS, and JavaScript. Highly optimized and lightweight.

🚀 Tech Stack

• Frontend: HTML5, Vanilla CSS3, Vanilla JavaScript (ES6+)
• Backend / Database: Supabase (PostgreSQL, Authentication)
• Icons & Typography: Font Awesome 6, Google Fonts (Inter)
• Architecture: Modular JavaScript structure, CSS Custom Properties (Variables) for theming.

📂 Folder Structure

Shades-by-Jay-UI-Library/
├── assets/           # Images, SVGs, and brand assets
├── css/              # Modular stylesheets (auth, playground, core style)
├── js/               # Component logic, playground, and Supabase config
├── admin/            # Secret admin dashboard
├── index.html        # Main landing page & component showcase
├── playground.html   # Live HTML/CSS interactive editor
└── [Other HTML]      # Documentation, guidelines, terms, etc.

🛠️ Getting Started (Local Development)

It's extremely easy to get this project up and running locally. No npm install required!

1. Clone the repository:

   git clone https://github.com/sithija-jayasinghe/Shades-by-Jay-UI-Library.git

2. Open the project folder: Navigate to the cloned directory in your favorite IDE (e.g., VS Code).
3. Launch the application: You can simply open index.html in your web browser. For a better development experience, use an extension like Live Server.

This project demonstrates several key software engineering skills:

• Clean Code & Architecture: Organizing massive amounts of styling and logic into manageable, modular, and reusable files.
• DOM Manipulation & State Management: Using Vanilla JavaScript to handle dynamic filtering, component previewing, code editing, and live rendering without heavy frameworks.
• BaaS Integration: Connecting a frontend application to a Backend-as-a-Service (Supabase) for real-time data and authentication operations.
• Problem Solving: Building an in-browser live code editor (playground) from scratch handling real-time HTML/CSS injection.
• UI/UX Excellence: Creating visually appealing, modern interfaces with smooth micro-interactions that enhance the user experience.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check out the issues page if you want to contribute.

📄 License

This project is MIT licensed.

---

Developed with ❤️ by Sithija Harshana Jayasinghe