material-inspired-component-library

Material-Inspired Component Library (MICL)

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.

Why Choose MICL?

• 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.

Why Might MICL Not Be for You?

• 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.

Demo & Documentation 📖

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

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

Quick start 🚀

1. Install via NPM

npm install material-inspired-component-library

2. Add the CSS

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">

The main MICL CSS file can also be found on CDN networks, like on jsDelivr: https://cdn.jsdelivr.net/npm/material-inspired-component-library/dist/micl.css

3. Add the HTML & JavaScript

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>

The main MICL JavaScript file can also be found on CDN networks, like on jsDelivr: https://cdn.jsdelivr.net/npm/material-inspired-component-library/dist/micl.js

4. Add a font

MICL uses the Google Sans as its default font. Include a reference to this font in your application.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">

The Styles guide describes how to change the default font.

Foundations 🪟

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

Available components ✅

The library currently consists of the following components:

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

Change Log ↪️

7.0.0 (08.03.2026)

• BREAKING: Use <a> instead of <label> inside Navigation rail.
• BREAKING: Use inert for disabled cards instead of micl-card--disabled.
• Snackbar: New component.
• Toggle buttons: Support for toggling icons.

6.0.0 (23.12.2025)

• BREAKING: Use command-attribute to control toggle buttons.
• Date picker: New component.

5.0.0 (02.12.2025)

• Time picker: New component.

4.0.0 (27.10.2025)

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

3.1.0 (19.10.2025)

• Checkbox: Refactoring + added support for checkbox groups.

3.0.0 (24.09.2025)

• 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.

2.0.0 (04.09.2025)

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

1.3.0 (23.08.2025)

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

1.2.0 (17.08.2025)

• List: Added support for switches inside list items.

1.1.0 (12.08.2025)

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