The Material-Inspired Component Library (MICL) offers a free and open-source collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines. MICL prioritizes minimal HTML markup and often requires no JavaScript, making it a lightweight and efficient choice for your projects.

• Embrace Material Design 3: Seamlessly integrate the aesthetic and user experience principles of Material Design into your web pages and applications.
• Lightweight & Efficient: Benefit from components built with straightforward HTML and minimal to no JavaScript, ensuring fast loading times and a streamlined development process.
• Effortless Dark Mode: Enjoy out-of-the-box support for both light and dark modes, automatically adapting to your defined color scheme.

• Heavy JavaScript Dependencies: If your project heavily relies on a JavaScript framework for component interaction, MICL's minimalist approach might not be the best fit.
• Bootstrap Preference: Users deeply integrated with or preferring the Bootstrap CSS framework may find MICL's distinct design philosophy less suitable.
• Legacy Browser Support: MICL is designed for modern browsers, and comprehensive support for older browser versions is not a primary focus.

Explore the components in a live environment and see how they work.

• Live Demo: The MICL Showcase
• Component Documentation: View all component documentation

npm install material-inspired-component-library

Sass/SCSS

To import the styles for a single component (e.g., the Card component):

@use "material-inspired-component-library/dist/card";

To import all MICL styles:

@use "material-inspired-component-library/styles";

Remember to import your theme file as well:

@use "path/to/mytheme";

Plain CSS

Copy the main micl.css file to your distribution folder and include it in your application. Include your theme file as well:

<link rel="stylesheet" type="text/css" href="path/to/dist/mytheme.css">
<link rel="stylesheet" type="text/css" href="path/to/dist/micl.css">

Here is a simple example of a Card component.

<div class="micl-card-outlined">
  <img src="your-image.jpg" alt="A beautiful image" class="micl-card__image">
  <div class="micl-card__headline-s">
    <h2>Card Title</h2>
  </div>
  <p class="micl-card__supporting-text">This is a simple card component.</p>
</div>

Some components, like the List, require a small amount of JavaScript to handle interactive behaviour. Because the JavaScript footprint in MICL is so small, you can import the code for all components at once.

import micl from "material-inspired-component-library/dist/micl";

This will initialize all MICL components, including those that will be added to the DOM later on.

Plain JavaScript

Copy the main micl.js file to your distribution folder and include it in your application:

<script src="path/to/dist/micl.js"></script>

This will initialize all MICL components, including those that will be added to the DOM later on.

A separate CSS file, based on the Material Design Layout Foundation, provides styles for an adaptive layout. It includes styles for the window frame, body region and panes that adjust to the available screen space, ensuring your layout follows Material Design's responsive guidelines.

• Layout

The library currently consists of the following components:

• Accordion
• Alert
• App Bar
• Badge
• Bottom sheet
• Button
• Card
• Checkbox
• Dialog
• Divider
• Icon button
• List
• Menu
• Navigation rail
• Radio button
• Select
• Side sheet
• Slider
• Stepper
• Switch
• Text field

• BREAKING: Moved layout.scss til sub-folder.
• Alert: New component.
• Stepper: New component.

• Checkbox: Refactoring + added support for checkbox groups.

• BREAKING: Use <nav> instead of <div> for Navigation rail.
• App Bar: New component.
• Layout: Support for adaptive layout.
• Buttons: Improved handling of target area for small buttons.

• Navigation rail: New component.
• Badge: New component.
• Ripple: Now uses custom CSS properties.

• Menu: Added support for submenus.
• Ripple: The ripple-effect does not use a pseudo-element anymore.
• State layer: Rewrite for simpler styling.

• List: Added support for switches inside list items.

• Text field: Added support for multi-line text fields.