Compose HTML Material

Material 3 wrapper components for Compose HTML based on Material Web

For unified multiplatform APIs which are more akin to those in androidx.compose, check out Compose Multiplatform HTML Unified which also depends on this library. Also see its side-by-side demo site for the visual effects of the components.

For Material 2 support, you are recommended to check out KMDC instead. For information on our obsolete work on legacy Material 2 components, check out the legacy README.

Check out the API documentation here.

Supported components

Not all components of Material Web are supported yet (see #11). Also, not all Material Design components are supported by Material Web yet (see their roadmap).

Here is a list of supported compoent APIs:

• MdElevatedButton, MdFilledButton, MdFilledTonalButton, MdOutlinedButton, MdTextButton
• MdCheckbox
• MdFab, MdBrandedFab
• MdIcon
• MdIconButton, MdFilledIconButton, MdFilledTonalIconButton, MdOutlinedIconButton
• MdList, MdListItem
• MdMenu, MdMenuItem, MdSubMenu
• MdLinearProgress, MdCircularProgress
• MdSwitch, LabelWithMdSwitch
• MdFilledTextField, MdOutlinedTextField

"labs" components

Here is a list of supported component APIs in the Material Web "labs" directory, which "contains experimental features that are not recommended for production" as they state:

• MdElevatedCard, MdOutlinedCard
• MdNavigationBar
• MdNavigationTab

You should opt-in to @MaterialWebLabsApi to use them.

Brief Instructions

Add the dependency

With Gradle:

kotlin {
    sourceSets {
        jsMain {
            dependencies {
                // ...
                implementation("com.huanshankeji:compose-html-material3:$version")
            }
        }
    }
}

This project depends on Kobweb which is not published to Maven Central yet, so you have to add the following Maven repository:

repositories {
    mavenCentral()
    maven("https://us-central1-maven.pkg.dev/varabyte-repos/public")
}

Material Symbols & Icons

The Material 3 module uses Material Symbols & Icons, but doesn't depend on the stylesheet directly. For Material Icons to work properly, you may need to configure your project following the quick instructions below or the developer guide.

Quick instructions

In short, there are 3 ways to add the Material Symbols & Icons dependency:

1. Add the stylesheet hosted by Google directly in your HTML file head:

   <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">

2. Use Marella's self-hosted Material Symbols.

   First add the dependency in your build script:

   implementation(npm("material-symbols", "0.17.4"))

   And then import the icons in your program. For example you can use CommonJS require:

   external fun require(module: String): dynamic
   fun main() {
       require("material-symbols/outlined.css")
       renderComposableInBody { App() }
   }

   If you are familiar with web development and Kotlin/JS, you can depend on the stylesheet in any way that works and you prefer. For example, you can use @JsModule corresponding to the UMD import, or configure it as a Webpack entry point. See the following docs fore more details:

   1. JavaScript modules | Kotlin Documentation
   2. the "webpack configuration file" section in Set up a Kotlin/JS project | Kotlin Documentation
   3. Code Splitting | webpack
   4. Advanced entry | webpack

3. Download and self-host the latest font.