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.

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

• BasicText

• TaglessBasicText
• VerticalScrollContainer, HorizontalScrollContainer

• Box (based on Kobweb)
• Column (via flexbox on JS, based on Kobweb)
• Row (via flexbox on JS, based on Kobweb)
• Spacer

• BoxWithConstraints
• VerticalScrollBox, HorizontalScrollBox
• VerticalScrollColumn, HorizontalScrollRow

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

• Button: Button
• Card: Card
• Checkbox: Checkbox
• Divider: Divider (not working properly on JS yet)
• Icon: Icon
• Icon button: IconButton
• Snackbar: Snackbar (inconsistent, not recommended), SnackBarHost (recommended)
• Switch: Switch
• Text: Text

• Button: Button
• Icon button: IconButton
• Radio button: RadioRow, RadioGroupRow
• Switch: SwitchWithLabel
• Text: MaterialText, TaglessText
• Text field: TextField, OutlinedTextField
• Top app bar: TopAppBarScaffold

• List/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

• Badge: Badge (deprecated, not displayed correctly on JS DOM)
• Button: Button (FilledButton), ElevatedButton, FilledTonalButton, OutlinedButton, TextButton
• Card: Card (FilledCard), ElevatedCard, OutlinedCard
• Checkbox: Checkbox
• Divider: HorizontalDivider
• Floating action button: FloatingActionButton, SmallFloatingActionButton, LargeFloatingActionButton, ExtendedFloatingActionButton
• Icon: Icon
• Icon button: IconButton, IconToggleButton, FilledIconButton, FilledIconToggleButton, FilledTonalIconButton, FilledTonalIconToggleButton, OutlinedIconButton, OutlinedIconToggleButton
• Navigation drawer: ModalNavigationDrawer (deprecated, may be replaced with navigation rails in the future)
• Progress indicator: LinearProgressIndicator, CircularProgressIndicator
• Radio button: RadioButton
• Scaffold: Scaffold
• Segmented button: SingleChoiceSegmentedButtonRow, MultiChoiceSegmentedButtonRow
• Slider: Slider, RangeSlider
• Snackbar: Snackbar, SnackbarHost, SnackbarHostState
• Switch: Switch
• Tab: PrimaryTabRow, SecondaryTabRow, PrimaryScrollableTabRow, SecondaryScrollableTabRow (tabs are in ext)
• Text: Text
• Top app bar: TopAppBar, CenterAlignedTopAppBar, MediumTopAppBar, LargeTopAppBar

• Button: Button (FilledButton), ElevatedButton, FilledTonalButton, OutlinedButton, TextButton
• Card: Card (FilledCard), ElevatedCard, OutlinedCard
• Chip: AssistChip, ElevatedAssistChip, FilterChip, ElevatedFilterChip, InputChip, SuggestionChip, ElevatedSuggestionChip
• Dialog: AlertDialog, SimpleDialog
• Dropdown menu: DropdownMenu (deprecated), DropdownMenuItem, DropdownMenuBox, DropdownMenuBoxScope.DropdownMenu
  • ExposedDropdownMenuBox, ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxTextField, ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxOutlinedTextField, ExposedDropdownMenuBoxScope.ExposedDropdownMenu, ExposedDropdownMenuBoxWithTextField, ExposedDropdownMenuBoxWithOutlinedTextField
• Floating action button: FloatingActionButton, SmallFloatingActionButton, LargeFloatingActionButton, ExtendedFloatingActionButton
• Icon button: IconButton, IconToggleButton, FilledIconButton, FilledIconToggleButton, FilledTonalIconButton, FilledTonalIconToggleButton, OutlinedIconButton, OutlinedIconToggleButton
• Navigation bar: NavigationBar, NavigationBarItem
• Radio button: RadioButtonRow, radioGroup
• Segmented button: SingleChoiceSegmentedButtonRowScope.SegmentedButton, MultiChoiceSegmentedButtonRowScope.SegmentedButton
• Select: FilledSelect, OutlinedSelect, SelectOption
• Tab: PrimaryTab, SecondaryTab
• Text: MaterialText, TaglessText
• Text field: TextField, OutlinedTextField

• List/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:

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

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.

• alpha
• rotate
• size modifiers
  • size, sizeIn, fillMaxSize
  • width, widthIn, fillMaxWidth
  • height, heightIn, fillMaxHeight
  • wrapContentWidth, wrapContentHeight, wrapContentSize
• intrinsic size modifiers: width(IntrinsicSize), height(IntrinsicSize)
• padding
• background
• border (visually inconsistent)
• clickable
• onClick (deprecated, use clickable)
• verticalScroll, horizontalScroll (deprecated, use VerticalScrollContainer/VerticalScrollBox/VerticalScrollColumn or HorizontalScrollContainer/HorizontalScrollBox/HorizontalScrollRow in ext instead)
• scope modifiers
  • BoxScope: align
  • RowScope: weight, align
  • ColumnScope: weight, align
  • LazyItemScope: fillParentMaxSize, fillParentMaxWidth, fillParentMaxHeight

• fillMaxWidthStretch, fillMaxHeightStretch, fillMaxSizeStretch
• outerBorder
• roundedCornerOuterBorder
• roundedCornerBackgroundAndOuterBorder
• outerPadding, innerPadding
• hidden (reserveSpace, invisible)
• matchPositionRelativeParentJsDom

• Alignment
• Arrangement
• BorderStroke
• Color
• IntrinsicSize
• KeyboardOptions
• KeyboardActions
• PaddingValues
• ScrollState, rememberScrollState (not fully supported yet and delegates to empty state on JS DOM)
• text: AnnotatedString, SpanStyle, buildAnnotatedString
• text style: TextAlign, TextDecoration, TextOverflow
• font: FontWeight, FontStyle

Maven 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):

1. Silk
   1. Modifier
      1. attrsModifier and styleModifier
2. General purpose improvements on top of Compose HTML and Kotlin/JS
3. What about Compose Multiplatform for Web?