Unified Compose Multiplatform wrappers of common components, layouts, and Material Design components for androidx.compose (officially supported on Android, desktop (JVM), iOS, and web (Kotlin/Wasm)) and Compose HTML (mainly based on Kobweb Silk Compose, KMDC, and Compose HTML Material (which is then based on Material Web))

We try to provide a set of common extensions and 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 API differences, limitations of the JS (web) platform and the Compose HTML composables this project depends on, and our limited effort.

Complete visual consistency across different platforms is not guaranteed.

This project is still in development and has not reached the stable state yet. Some APIs are likely to be changed and there is no detailed documentation yet. Check out the demo project on how to use the components in addition to the information below.

• BasicText

• InlineBasicText

• Box
• Column (via flexbox on JS)
• Row (via flexbox on JS)
• Spacer

• LazyColumn
• LazyRow

• Button
• Card
• Checkbox
• Divider (not working properly on JS yet)
• Icon
• IconButton
• Switch
• Text

• Button
• IconButton
• RadioRow, RadioGroupRow
• SwitchWithLabel
• MaterialText, InlineText
• TextField, OutlinedTextField
• TopAppBarScaffold

• List/LazyColumnList (visually inconsistent for now)

• Button (FilledButton), ElevatedButton, FilledTonalButton, OutlinedButton, TextButton
• Card (FilledCard), ElevatedCard, OutlinedCard
• Checkbox
• FloatingActionButton, SmallFloatingActionButton, LargeFloatingActionButton, ExtendedFloatingActionButton
• Icon
• IconButton, IconToggleButton, FilledIconButton, FilledIconToggleButton, FilledTonalIconButton, FilledTonalIconToggleButton, OutlinedIconButton, OutlinedIconToggleButton
• Switch
• Text

• Button (FilledButton), ElevatedButton, FilledTonalButton, OutlinedButton, TextButton
• Card (FilledCard), ElevatedCard, OutlinedCard
• FloatingActionButton, SmallFloatingActionButton, LargeFloatingActionButton, ExtendedFloatingActionButton
• IconButton, IconToggleButton, FilledIconButton, FilledIconToggleButton, FilledTonalIconButton, FilledTonalIconToggleButton, OutlinedIconButton, OutlinedIconToggleButton
• NavigationBar, NavigationBarItem
• MaterialText, InlineText
• TextField, OutlinedTextField

• List/LazyColumnList (slightly visually inconsistent)

The components in the ext packages don't follow the androidx.compose APIs exactly, but rather provide wrappers are more idiomatic and conventional on both kinds of targets, wrapping different APIs which can't be unified following the androidx.compose APIs.

The com.huanshankeji.compose.material.icons.Icon class delegates to both kinds of targets, but only a few Material Icons are added as PoC. You need to add your concrete icon implementations following the style of the existing ones in com.huanshankeji.compose.material.icons to use the icons you need. Track the progress of full icon support in #4.

• size modifiers
  • size, sizeIn, fillMaxSize
  • width, widthIn, fillMaxWidth
  • height, heightIn, fillMaxHeight
• padding
• background
• border (visually inconsistent)
• onClick
• verticalScroll, horizontalScroll (ScrollState not supported on JS yet)

• outerBorder
• roundedCornerBackgroundAndOuterBorder

• Alignment
• Arrangement
• KeyboardOptions
• KeyboardActions

Maven coordinate:

"com.huanshankeji:compose-multiplatform-$module:$version"

More specifically:

"com.huanshankeji:compose-multiplatform-common:$version"
"com.huanshankeji:compose-multiplatform-material-icons-core:$version"
"com.huanshankeji:compose-multiplatform-material2:$version"
"com.huanshankeji:compose-multiplatform-material3:$version"

For example, depend on the Material 3 module with Gradle:

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

View all the artifacts on Maven Central.

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

See the corresponding section in Compose HTML Material for configuring Material Icons on JS.

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?