Offers unified wrappers for common and Material Design APIs, facilitating cross-platform UI rendering with Compose UI and Compose HTML while addressing platform-specific limitations.
Unified Compose Multiplatform wrappers of common and Material Design APIs for rendering-based Compose UI (officially supported on Android, desktop (JVM), iOS, and web (Kotlin/Wasm)) and DOM-based Compose HTML
This library was previously named "Compose Multiplatform Material".
We try to provide a set of common APIs including composable component APIs akin to those in androidx.compose (androidx.compose.foundation, androidx.compose.material, and androidx.compose.material3), meanwhile making them compatible with the Compose HTML APIs. However, only subsets of the composables and composable parameters are supported due to the underlying API differences, limitations of the JS platform and the available Compose HTML composables this project depends on, and our limited effort.
The modules of this library correspond to the Compose Multiplatform modules (or Compose modules in AndroidX) that are not available for Compose HTML, aka those that depend on the UI module, more specifically ui-graphics. The common module of this library corresponds to the ui and foundation modules, offering UI components (including layouts), modifiers, UI configuration classes, etc.
The Compose HTML / JS DOM source is mainly based on Kobweb Silk Compose, KMDC, and Compose HTML Material (which is then based on Material Web).
Complete visual consistency across different platforms is not guaranteed. See the side-by-side demo site for the visual effects and their differences.
This project is still in development and has not reached a stable state. Some APIs are subject to change and there is no detailed documentation yet. Check out the demo project source on how to use the components in addition to the sections below.
ext components (components in the ext packages)The components in the ext packages don't follow the androidx.compose APIs exactly, but rather provide wrappers that are more idiomatic and conventional on both kinds of targets, wrapping different APIs that can't be unified following the androidx.compose APIs.
The parameter names with suffixes such as "JsDom" or "ComposeUi" are platform-specific, and only apply on their respective platform(s), Compose HTML / JS DOM or Compose UI platforms.
Maven coordinate (also for modifiers and other APIs below):
com.huanshankeji:compose-multiplatform-html-unified-common:$version
BasicTextext componentsTaglessBasicTextVerticalScrollContainer, HorizontalScrollContainerBox (based on Kobweb)Column (via flexbox on JS, based on Kobweb)Row (via flexbox on JS, based on Kobweb)Spacerext layoutsBoxWithConstraintsVerticalScrollBox, HorizontalScrollBoxVerticalScrollColumn, HorizontalScrollRowLazyColumn (via flexbox on JS, based on Kobweb, only "lazy" on Compose UI but works fine for JS DOM)LazyRow (via flexbox on JS, based on Kobweb, only "lazy" on Compose UI but works fine for JS DOM)Maven coordinate:
com.huanshankeji:compose-multiplatform-html-unified-material2:$version
Deprecation notice: The Material 2 components are no longer maintained and published for release since v0.6.0, due to its decreasing popularity and the underlying KMDC library's incompatible Kotlin and Compose versions.
ext componentslazy.ext componentsList/LazyColumnList (visually inconsistent for now, only "lazy" on Compose UI but works fine for JS DOM)Maven coordinate:
com.huanshankeji:compose-multiplatform-html-unified-material3:$version
ext componentslazy.ext componentsList/LazyColumnList (slightly visually inconsistent)Maven coordinates:
com.huanshankeji:compose-multiplatform-html-unified-material-icons-core:$version
com.huanshankeji:compose-multiplatform-html-unified-material-icons-extended:$version
There are two icon modules:
Note: The version of org.jetbrains.compose.material:material-icons-extended is pinned at 1.7.3 because Compose officially recommends using individual SVG/vector assets from Google Fonts rather than adding the extended icon library as a dependency, as the latter significantly increases build time and artifact size. As such, these icon modules serve more for prototyping purposes currently. When using material-icons-extended, ensure that Proguard / R8 resource shrinking is enabled in production builds.
See the corresponding section in Compose HTML Material for configuring Material Icons on JS.
ext modifiersMaven coordinate:
com.huanshankeji:compose-multiplatform-html-unified-lifecycle-viewmodel:$version
The ViewModel module currently supports a subset of the Compose ViewModel APIs. For ViewModel to work properly on Compose HTML / JS DOM, call com.huanshankeji.compose.ui.window.renderComposableInBodyWithViewModelStoreOwner instead of org.jetbrains.compose.web.renderComposableInBody on JS. These APIs are experimental now.
Maven coordinate:
com.huanshankeji:compose-multiplatform-html-unified-navigation:$version
The navigation module currently supports a small subset of the Compose Navigation APIs, which does not support transition or animation on Compose HTML / JS DOM. These APIs are also experimental now.
Maven coordinate pattern:
com.huanshankeji:compose-multiplatform-html-unified-$module:$version
The specific Maven coordinates are listed in the sections above. For example, to depend on the Material 3 module with Gradle:
kotlin {
sourceSets {
commonMain {
dependencies {
// ...
implementation("com.huanshankeji:compose-multiplatform-html-unified-material3:$version")
}
}
}
}
View all the artifacts on Maven Central.
The Kotlin/JS (Compose HTML) portion of this project depends on Kobweb Compose of Kobweb Silk which is a UI layer built upon Compose HTML that provides Modifier (type-safe CSS API wrappers) and layout APIs. Here is a list of topics in their README.md that should be helpful when you use this library in Compose HTML, especially if you need to customize the components further on Kotlin/JS (Compose HTML):
ButtonCardCheckboxDivider (not working properly on JS yet)IconIconButtonSnackbar (inconsistent, not recommended), SnackBarHost (recommended)SwitchTextButtonIconButtonRadioRow, RadioGroupRowSwitchWithLabelMaterialText, TaglessTextTextField, OutlinedTextFieldTopAppBarScaffoldBadge (deprecated, not displayed correctly on JS DOM)Button (FilledButton), ElevatedButton, FilledTonalButton, OutlinedButton, TextButtonCard (FilledCard), ElevatedCard, OutlinedCardCheckboxHorizontalDividerFloatingActionButton, SmallFloatingActionButton, LargeFloatingActionButton,
ExtendedFloatingActionButtonIconIconButton, IconToggleButton, FilledIconButton, FilledIconToggleButton, FilledTonalIconButton,
FilledTonalIconToggleButton, OutlinedIconButton, OutlinedIconToggleButtonModalNavigationDrawer (deprecated, may be replaced with navigation rails in the future)LinearProgressIndicator, CircularProgressIndicatorRadioButtonScaffoldSingleChoiceSegmentedButtonRow, MultiChoiceSegmentedButtonRowSlider, RangeSliderSnackbar, SnackbarHost, SnackbarHostStateSwitchPrimaryTabRow, SecondaryTabRow, PrimaryScrollableTabRow, SecondaryScrollableTabRow (tabs are in ext)TextTopAppBar, CenterAlignedTopAppBar, MediumTopAppBar, LargeTopAppBarButton (FilledButton), ElevatedButton, FilledTonalButton, OutlinedButton, TextButtonCard (FilledCard), ElevatedCard, OutlinedCardAssistChip, ElevatedAssistChip, FilterChip, ElevatedFilterChip, InputChip, SuggestionChip,
ElevatedSuggestionChipAlertDialog, SimpleDialogDropdownMenu (deprecated), DropdownMenuItem, DropdownMenuBox, DropdownMenuBoxScope.DropdownMenu
ExposedDropdownMenuBox, ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxTextField,
ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxOutlinedTextField,
ExposedDropdownMenuBoxScope.ExposedDropdownMenu, ExposedDropdownMenuBoxWithTextField,
ExposedDropdownMenuBoxWithOutlinedTextFieldFloatingActionButton, SmallFloatingActionButton, LargeFloatingActionButton,
ExtendedFloatingActionButtonIconButton, IconToggleButton, FilledIconButton, FilledIconToggleButton, FilledTonalIconButton,
FilledTonalIconToggleButton, OutlinedIconButton, OutlinedIconToggleButtonNavigationBar, NavigationBarItemRadioButtonRow, radioGroupSingleChoiceSegmentedButtonRowScope.SegmentedButton,
MultiChoiceSegmentedButtonRowScope.SegmentedButtonFilledSelect, OutlinedSelect, SelectOptionPrimaryTab, SecondaryTabMaterialText, TaglessTextTextField, OutlinedTextFieldmaterial-icons-core: Contains the core set of Material Icons (same icons as in org.jetbrains.compose.material:material-icons-core). Only Filled and AutoMirrored.Filled styles are supported.material-icons-extended: Contains all common Material Icons that exist in both org.jetbrains.compose.material:material-icons-extended (v1.7.3) and Material Symbols. Only Filled and AutoMirrored.Filled styles are supported. Depends on material-icons-core.alpharotatesize, sizeIn, fillMaxSizewidth, widthIn, fillMaxWidthheight, heightIn, fillMaxHeightwrapContentWidth, wrapContentHeight, wrapContentSizewidth(IntrinsicSize), height(IntrinsicSize)paddingbackgroundborder (visually inconsistent)clickableonClick (deprecated, use clickable)verticalScroll, horizontalScroll (deprecated, use VerticalScrollContainer/VerticalScrollBox/VerticalScrollColumn or HorizontalScrollContainer/HorizontalScrollBox/HorizontalScrollRow in ext instead)BoxScope: alignRowScope: weight, alignColumnScope: weight, alignLazyItemScope: fillParentMaxSize, fillParentMaxWidth, fillParentMaxHeightfillMaxWidthStretch, fillMaxHeightStretch, fillMaxSizeStretchouterBorderroundedCornerOuterBorderroundedCornerBackgroundAndOuterBorderouterPadding, innerPaddinghidden (reserveSpace, invisible)matchPositionRelativeParentJsDomAlignmentArrangementBorderStrokeColorIntrinsicSizeKeyboardOptionsKeyboardActionsPaddingValuesScrollState, rememberScrollState (not fully supported yet and delegates to empty state on JS DOM)AnnotatedString, SpanStyle, buildAnnotatedStringTextAlign, TextDecoration, TextOverflowFontWeight, FontStyleSurfaced from shared tags and platforms — no rankings paid for.