Compose Multiplatform UI

What is Compose Multiplatform?

Compose Multiplatform extends Jetpack Compose to share UI across Android, iOS, desktop, and web. You write the UI once in Kotlin. Where you need a platform feature, you use expect/actual or interop.

Version: Compose Multiplatform 1.11.x on Kotlin 2.4.x.

Step 1: Enable the Plugin

// shared/composeApp/build.gradle.kts (plugins)
plugins {
    kotlin("multiplatform")
    kotlin("plugin.compose") version "2.4.10"
    id("org.jetbrains.compose") version "1.11.0"
}

On Kotlin 2.x the kotlin("plugin.compose") plugin supplies the Compose Compiler. The org.jetbrains.compose plugin supplies the multiplatform Compose libraries.

Step 2: Add UI Dependencies

kotlin {
    androidTarget()
    iosArm64(); iosX64(); iosSimulatorArm64()

    sourceSets {
        commonMain.dependencies {
            implementation(compose.runtime)
            implementation(compose.foundation)
            implementation(compose.material3)
            implementation("org.jetbrains.androidx.navigation:navigation-compose:2.9.0")
        }
    }
}

Step 3: A Shared Composable

Write the UI in commonMain. The same code runs on every target.

// commonMain
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }
    Column(Modifier.padding(16.dp)) {
        Text("Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

Step 4: Entry Points

Each target calls the shared composable from its own entry point.

// androidMain
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { CounterApp() }
    }
}

// iosMain
import androidx.compose.ui.window.ComposeUIViewController

fun CounterViewController() = ComposeUIViewController { CounterApp() }

Swift wraps that UIViewController.

Step 5: Navigation

Use the multiplatform Navigation Compose library for shared routes.

// commonMain
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun AppNav() {
    val nav = rememberNavController()
    NavHost(nav, startDestination = "home") {
        composable("home") { HomeScreen(onNext = { nav.navigate("detail") }) }
        composable("detail") { DetailScreen() }
    }
}

expect/actual for Compose

When a small piece of UI differs (for example, a platform font or image loader), use expect/actual:

// commonMain
@Composable expect fun PlatformIcon()

// androidMain
@Composable actual fun PlatformIcon() { /* Android resource */ }
// iosMain
@Composable actual fun PlatformIcon() { /* UIKit interop */ }

Diagram: One shared composable is hosted by each platform entry point.

Loading diagram...

Expected Output

The button starts at Count: 0 and increases by one each tap, on Android, iOS, and desktop.

Practice Exercise

1. Add Compose Multiplatform 1.11.x to a shared module.
2. Write a shared CounterApp composable with a Text and a Button.
3. Host it in an Android Activity and as an iOS ComposeUIViewController.
4. Add a second screen with Navigation Compose and a button that navigates to it.