Comprehensive breakdown of component support in Compose Multiplatform (CMP).

component_support_cmp.md

Breakdown of component support in Compose Multiplatform (CMP)

Symbol	Meaning
✅	Fully Supported (Common Code). No platform-specific code needed.
⚠️	Supported with Caveats. Experimental or slight behavior differences.
🚧	Work in Progress / Beta. Available but may be unstable (e.g., Wasm).
🛠️	Requires Interop / 3rd Party. No official common component exists yet.

1. Material 3 Components (UI Elements)

Most Material 3 UI components are implemented in pure Kotlin and rendered via Skia, making them identical across platforms.

Component	Android	iOS	Desktop (JVM)	Web (Wasm)
Button / FAB	✅	✅	✅	✅
Card / Surface	✅	✅	✅	✅
Text / Typography	✅	✅	✅	✅
TextField (Input)	✅	✅ (Native text actions added recently)	✅	✅
Checkbox / Switch	✅	✅	✅	✅
Slider / Progress	✅	✅	✅	✅
Scaffold / AppBars	✅	✅	✅	✅
Icon / IconButton	✅	✅	✅	✅
Lazy Lists / Grids	✅	✅	✅	✅
ModalBottomSheet	✅	✅	✅	✅
NavigationDrawer	✅	✅	✅	✅
Snackbar / Toast	✅	✅	✅	✅
Badge / Chips	✅	✅	✅	✅
Dialog / Popup	✅	✅	✅ (Creates new Window)	✅
DatePicker	✅	✅ (Experimental)	✅ (Experimental)	✅ (Experimental)
TimePicker	✅	✅ (Experimental)	✅ (Experimental)	✅ (Experimental)
PullToRefresh	✅	✅	✅	✅

2. System & Foundation (Logic & Resources)

These components interact with the underlying operating system.

Component	Android	iOS	Desktop (JVM)	Web (Wasm)
Navigation	✅ (Jetpack Nav 2.8+)	✅ (Jetpack Nav 2.8+)	✅ (Jetpack Nav 2.8+)	✅ (Jetpack Nav 2.8+)
Resources (Res)	✅ (compose-resources)	✅ (compose-resources)	✅ (compose-resources)	✅ (compose-resources)
Vector Graphics	✅ (XML vectors)	✅ (XML vectors)	✅ (XML vectors)	✅ (XML vectors)
WindowInsets	✅	✅ (Notch/Keyboard)	✅	✅
Clipboard	✅	✅	✅	⚠️ (Browser security limits)
Mouse / Hover	⚠️ (Stylus support)	❌	✅	✅
Keyboard Shortcuts	✅	✅ (HW Keyboard)	✅	✅
BackHandler	✅	✅ (Gesture/Swipe)	❌ (N/A)	⚠️ (Browser Back)

3. Missing / Platform-Specific Components

These features require distinct implementations because they rely on heavy native APIs that Skia cannot draw directly.

Component	Status	Recommended Solution
WebView	🛠️	compose-webview-multiplatform
Google Maps	🛠️	kmp-maps-compose
Camera	🛠️	Peekaboo
Video Player	🛠️	ComposeMultiplatformMediaPlayer
Bluetooth / BLE	🛠️	Kable
Biometrics	🛠️	Moko-biometry
Permissions	🛠️	Moko-permissions
HTML / Markdown	🛠️	multiplatform-markdown-renderer

Key Platform Nuances

iOS (Native Interop)

• Rendering: CMP on iOS uses a Skia canvas. It does not translate to UIView.
• Scroll Physics: iOS scroll physics (rubber-banding) are natively supported.
• Selection: Native text selection handles are supported.
• Interop: You can place a UILabel inside Compose using UIKitView, or place Compose inside a SwiftUI view using ComposeViewController.

Desktop (JVM)

• Window Management: Has unique APIs (Window, Tray, MenuBar) that don't exist on mobile.
• Dialogs: Dialog and Popup often create a separate undecorated window rather than an overlay.

Web (Wasm)

• Status: Currently in Alpha/Beta.
• Fonts: Must be loaded explicitly as resources; cannot rely on system fonts as easily.
• Multithreading: Limited support (coroutines run on Main thread mostly).

Summary for Developers

If it is a visual component (Button, Row, Text), it works everywhere. If it is a hardware component (Camera, GPS, Bluetooth), you need a third-party library or expect/actual native implementations.

---

CMP Component & Library Support Matrix

Compose Multiplatform (CMP) component support and their recommended library solutions for missing native features

Category	Component / Feature	Android	iOS	Desktop	Web (Wasm)	Recommended Library / Notes
UI Core	Material 3 (Buttons, Cards, etc.)	✅	✅	✅	✅	Built-in (Pure Kotlin)
UI Core	Text & Typography	✅	✅	✅	✅	Built-in
UI Core	Lazy Lists & Grids	✅	✅	✅	✅	Built-in
UI Core	TextField (Input)	✅	✅	✅	✅	Built-in
Navigation	Navigation Component	✅	✅	✅	✅	Jetpack Navigation
Resources	Images, Fonts, Strings	✅	✅	✅	✅	compose-resources
Media	WebView	🛠️	🛠️	🛠️	🛠️	compose-webview-multiplatform
Media	Video Player	🛠️	🛠️	🛠️	🛠️	ComposeMultiplatformMediaPlayer
Hardware	Camera	🛠️	🛠️	❌	❌	Peekaboo
Hardware	Google Maps	🛠️	🛠️	❌	❌	kmp-maps-compose
Hardware	Bluetooth (BLE)	🛠️	🛠️	🛠️	🛠️	Kable
System	Permissions	🛠️	🛠️	❌	❌	Moko-permissions
System	Biometrics	🛠️	🛠️	❌	❌	Moko-biometry
Data	Local Database	🛠️	🛠️	🛠️	🛠️	Room or SQLDelight
Data	Markdown Rendering	🛠️	🛠️	🛠️	🛠️	multiplatform-markdown-renderer

Implementation Strategy

Because CMP renders via the Skia/Skiko engine, it effectively draws its own UI on a canvas. This is why standard UI components work everywhere, while hardware-dependent features (like the Camera) require "bridges."

• For ✅ (Green): Simply use the standard androidx.compose or org.jetbrains.compose imports in your commonMain folder.
• For 🛠️ (Wrench): Add the library dependency to your commonMain in build.gradle.kts. These libraries use expect/actual to talk to the underlying OS (e.g., UIKit for iOS and Android Views for Android).