Wraps Material 3 components for Compose HTML, offering support for buttons, checkboxes, icons, menus, progress indicators, and experimental features like cards and navigation bars. Integrates Material Symbols & Icons.
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.
Not all Material Design components are supported because not all of them are supported by the underlying libraries. For more details see:
Here is a list of supported component APIs:
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.
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:
MdBadgeYou should opt in to @MaterialWebLabsApi to use them.
With Gradle:
kotlin {
sourceSets {
jsMain {
dependencies {
// ...
implementation("com.huanshankeji:compose-html-material3:$version")
}
}
}
}
compose-html-material3-maicol07-material-web-additionsThere 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:
MdSnackbarMdSmallTopAppBar, MdCenterAlignedTopAppBar, MdMediumTopAppBar, MdLargeTopAppBarYou 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")
}
}
}
}
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.
In short, there are 3 ways to add the Material Symbols & Icons dependency:
MdElevatedButton, MdFilledButton, MdFilledTonalButton, MdOutlinedButton, MdTextButtonMdCheckboxMdAssistChip, MdFilterChip, MdInputChip, MdSuggestionChip, MdChipSetMdDialogMdDividerMdFab, MdBrandedFabMdIconMdIconButton, MdFilledIconButton, MdFilledTonalIconButton, MdOutlinedIconButtonMdList, MdListItemMdMenu, MdMenuItem, MdSubMenuMdLinearProgress, MdCircularProgressMdRadioMdFilledSelect, MdOutlinedSelect, MdSelectOptionMdSliderMdSwitch, LabelWithMdSwitchMdTabs, MdPrimaryTab, MdSecondaryTabMdFilledTextField, MdOutlinedTextFieldMdElevatedCard, MdFilledCard, MdOutlinedCardMdItemMdNavigationBarMdNavigationDrawer, MdNavigationDrawerModalMdNavigationTabMdOutlinedSegmentedButtonMdOutlinedSegmentedButtonSetAdd the stylesheet hosted by Google directly in your HTML file head:
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
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:
Surfaced from shared tags and platforms — no rankings paid for.