Compose HTML Material

Material 3 wrapper components for Compose HTML based on Material Web and maicol07's Material Web Additions

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, you are recommended to check out KMDC instead. For information on our obsolete work on legacy Material 2 components, check out the legacy README. Note that this is no longer maintained and should not be used for new projects.

Check out the API documentation here.

Supported components

Not all Material Design components are supported because not all of them are supported by the underlying libraries. For more details see:

• for Material Web:
  • maintenance mode announcement
  • roadmap
• for Material Web Additions:
  • GitHub repo
  • the website with component docs

Here is a list of supported component APIs:

• MdElevatedButton, MdFilledButton, MdFilledTonalButton, MdOutlinedButton, MdTextButton
• MdCheckbox
• MdAssistChip, MdFilterChip, MdInputChip, MdSuggestionChip, MdChipSet
• MdDialog
• MdDivider
• MdFab, MdBrandedFab
• MdIcon
• MdIconButton, MdFilledIconButton, MdFilledTonalIconButton, MdOutlinedIconButton
• MdList, MdListItem
• MdMenu, MdMenuItem, MdSubMenu
• MdLinearProgress, MdCircularProgress
• MdRadio
• MdFilledSelect, MdOutlinedSelect, MdSelectOption
• MdSlider
• MdSwitch, LabelWithMdSwitch
• MdTabs, MdPrimaryTab, MdSecondaryTab
• MdFilledTextField, MdOutlinedTextField

Note: Some Material Web components like elevation, focus-ring, and ripple are not wrapped in this library as they are styling/utility components typically used internally by other components, not directly in application code.

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

• MdBadge
• MdElevatedCard, MdFilledCard, MdOutlinedCard
• MdItem
• MdNavigationBar
• MdNavigationDrawer, MdNavigationDrawerModal
• MdNavigationTab
• MdOutlinedSegmentedButton
• MdOutlinedSegmentedButtonSet

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

compose-html-material3-maicol07-material-web-additions

There is an additional module compose-html-material3-maicol07-material-web-additions that adds more Material 3 components from the maicol07 Material Web Additions library. This library was chosen because its style closely follows the original Material Web library's API patterns. It adds components missing in the original Material Web, such as Snackbar and Top App Bar.

Supported component APIs:

• MdSnackbar
• MdSmallTopAppBar, MdCenterAlignedTopAppBar, MdMediumTopAppBar, MdLargeTopAppBar

You should opt in to @MaterialWebAdditionsApi to use them.

To add this module as a dependency:

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

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.40.2"))

   And then import the icons in your program. For example to import it with @JsModule:

   @JsModule("material-symbols/outlined.css")
   private external object MaterialSymbolsOutlinedImport
   
   fun main() {
       MaterialSymbolsOutlinedImport
       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 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.