UIPlugins | HTML Component Library

Whether you're building static websites, HTML templates, or integrating into frameworks, our components are built for drop-in use without the need for complex tooling.

✅ Features

✅ Fully modular: Use only what you need — copy, paste, done.
🎯 Scoped styles: Each component uses a unique ID to isolate CSS rules.
📱 Responsive: Mobile-first and optimized for all screen sizes.
♿ ADA Compliant: Keyboard accessible and screen reader friendly.
💡 Semantic HTML: Built with SEO and readability in mind.
🎨 Customizable: Change root variables for consistent theming.

📁 Project Structure

Each component is organized as follows:

components/
├── hero/
│   └── hero-1.html
├── navbar/
│   └── navbar-2.html
├── footer/
│   └── footer-3.html
├── buttons/
│   └── button-primary.html
└── ...

Each component includes:

• Scoped HTML using a unique id (e.g. #navbar-2)
• Component-specific styles using the id as the CSS scope
• Optionally scoped JavaScript if interactivity is required

🛠️ Getting Started

Follow these steps to copy and integrate a component into your project.

1. Add Required Root CSS Variables

Before using any components, include this in your <head> or global CSS file:

<style>
  :root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --text-color: #212529;
    --background-color: #ffffff;
    --font-family: "Inter", sans-serif;
    --max-width: 1200px;
    --padding: 1rem;
    /* Add more as needed */
  }
</style>

📘 These variables are used throughout all components for consistency. You can override them for custom theming.

2. Copy Component HTML

Paste the component HTML wherever you want it to appear on your page. Example:

<!-- Example: Navbar -->
<nav id="navbar-2">
  <!-- Component content here -->
</nav>

⚠️ The id must remain unchanged to ensure scoped styles and scripts work correctly.

3. Copy Component CSS

Add the CSS block to your global stylesheet, or inside a <style> tag within your HTML document:

<style>
  #navbar-2 {
    background: var(--background-color);
    color: var(--text-color);
    padding: var(--padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #navbar-2 a {
    color: var(--primary-color);
    text-decoration: none;
  }

  /* Responsive styles using mobile-first approach */
  @media (min-width: 768px) {
    #navbar-2 {
      padding: 1.5rem 2rem;
    }
  }
</style>

✅ Styles are scoped using the component's unique id to avoid CSS conflicts.

4. (If Needed) Add Component JS

If the component includes interactivity (like dropdowns or modals), paste the accompanying JS after the component in your HTML or inside a global JS file:

<script>
  const navToggle = document.querySelector("#navbar-2-toggle");
  const menu = document.querySelector("#navbar-2-menu");

  navToggle.addEventListener("click", () => {
    menu.classList.toggle("open");
  });
</script>

🧠 JS is written using vanilla JS and scoped with component IDs to avoid conflicts.

🧩 Combining Multiple Components

All components are scoped by id, so you can safely use multiple in the same project:

<body>
  <nav id="navbar-1">...</nav>
  <section id="hero-2">...</section>
  <footer id="footer-3">...</footer>
</body>

📦 Styles and scripts will not interfere with one another as long as ids are preserved.

🎨 Customization

You can globally override any of the root CSS variables to customize colors, spacing, fonts, etc.

:root {
  --primary-color: #e91e63;
  --font-family: "Roboto", sans-serif;
}

For individual component overrides, target the component id directly.

♿ Accessibility Notes

• All components follow WAI-ARIA authoring practices.
• Tab index, ARIA labels, and keyboard navigation are baked in.
• We run each component through accessibility testing tools.

🔍 Please test final implementations with real content for ADA compliance.

🚀 Performance Tips

• Combine and minify CSS if using many components.
• Inline critical CSS for faster page loads.
• Lazy load any large images or assets in components.

📚 Contribution & Roadmap

Coming soon:

• More component variants
• Dark mode support
• RTL layout support
• Live CDN links

📄 License

This library is open-source and free to use under the MIT License.

💬 Support

Have questions, feedback, or want to request a component?

📧 Email: hello@uiplugins.com

🌐 Website: https://uiplugins.com

Thank you for using UIPlugins — building beautiful websites has never been simpler.

📦 UIPlugins Component Library