Reusable Compose Multiplatform components for Android, desktop (JVM), iOS, and web (Wasm). The library adapts the platform-neutral tokens from kommon's design-system module; it does not define a competing design system.

Give your agent the portable use-kmpcomponents skill to find existing components, check the API against your installed version, and wire theme, state, labels, and callbacks. It includes a component index with source links and a usage guide.

Setup instructions cover copying the skill into Codex or Claude Code projects and using the same guide with other agents. llms.txt is a compact discovery index. Contributor instructions for changing this library remain in AGENTS.md.

The latest release is on Maven Central. Release Please updates the versions below when a release is cut.

// build.gradle.kts
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.maniramezan.kmpcomponents:components:0.2.1")
        }
    }
}

kommon's design-system, Compose runtime, and material3 are exposed as api dependencies, so token types and Material components are available without extra declarations.

Targets: android (minSdk 26), jvm, iosArm64, iosSimulatorArm64, wasmJs (browser).

Wasm builds use the wasmJs variant published by kommon 0.3.0 or later. The default build resolves it from Maven Central; no local dependency substitution is required.

CachedAsyncImage lives in a separate artifact so the main library does not pull in an image loader. It is backed by Coil 3 with Ktor networking and brings each platform's Ktor engine (Android, Darwin, Java, JS); no Coil types appear in its API.

implementation("io.github.maniramezan.kmpcomponents:components-image:0.2.1")

The image artifact has the same targets as the core library. On the web there is no disk cache, so diskCachePolicy has no effect and the browser's HTTP cache handles repeat loads.

On Android, network images need <uses-permission android:name="android.permission.INTERNET" /> in the app manifest. Both artifacts share one version.

var themeMode by remember { mutableStateOf(ThemeMode.SYSTEM) }
var provider by remember { mutableStateOf(ProviderConfigurationState()) }
var submitted by remember { mutableStateOf(false) }

KmpTheme(mode = themeMode) {
    SectionCard(title = "Appearance") {
        ThemeModeSelector(selected = themeMode, onSelect = { themeMode = it })
    }
    SectionCard(title = "Provider", description = "Where requests are sent") {
        ProviderConfigurationForm(
            state = provider,
            onStateChange = { provider = it },
            showValidationErrors = submitted,
            onDone = { submitted = true },
        )
        if (submitted && provider.isValid()) {
            StatusMessage("Saved", tone = StatusTone.SUCCESS)
        }
    }
}

API reference for both artifacts: run ./gradlew :dokkaGenerate (output in build/dokka/html), or browse the copy for the latest release on GitHub Pages.

Icons are Painters you supply (for an ImageVector, rememberVectorPainter(icon)); they are sized from the body text so they follow the user's font scale.

Components that also exist in ComposeUIComponents or SwiftUIComponents use the same name here, for example SectionHeader, ContentRow, PrimaryButton, PillChip, SelectionList, BottomSheet, Toast, DisclosureCard, LoadingState, Skeleton, TabBar, NavRail, PaginatedContent, PageIndicator, SegmentedContent, ShowcaseFeed, FlipCard, Avatar, ChatLog, ChatComposer, TypingIndicator, rememberTypewriterReveal, LoadingOverlay, and the Assistant* components. Where that name would collide with a Material 3 composable, the component gets a Theme prefix instead (ThemeSwitch, ThemeCard), like SwiftUIComponents' ThemeButton. Enum entries use SCREAMING_CASE (ToastDuration.SHORT, not Short). Some ComposeUIComponents names map to a different or existing component here:

All components are stateless unless noted, take a Modifier as their first optional parameter, and accept user-visible strings as parameters (or a *Labels data class) so apps can localize them. Built-in glyphs (search, close, check, chevron) are drawn by the library and other icons are Painters you pass in, so there is no icon-font dependency.

The shared catalog runs on desktop, Android, iOS, and the web. Each release publishes the web build at arjangconsulting.github.io/KMPComponents/catalog/, so you can try every component in a browser. Use Catalog section to jump between component families. Every public component has an example, including standalone list and navigation primitives. Examples use generic copy and temporary local state; switching sections resets their state. Forms keep local state; chat replies, progress, and loading are UI simulations. Image examples use embedded illustrations by default; only Load URL requests a remote image.

Expand Appearance and accessibility to switch the light/dark theme, token set, and 100%, 130%, or 200% font scale. Use Right-to-left layout to test RTL rendering and splitter movement. To test a dropdown being disabled while open, press Disable picker in 3 seconds, then open that picker. Re-enable it with Picker enabled. The horizontal split-pane example also shows its fraction and a reset button.

./gradlew :sample:run                          # desktop
./gradlew :sample:wasmJsBrowserDevelopmentRun  # web, served on localhost
./gradlew :sample-android:installDebug         # Android device or emulator
xcodegen generate --spec sample/ios/project.yml && open sample/ios/KmpComponentsSample.xcodeproj

The iOS project builds the Kotlin framework in a pre-build phase; pick an Apple Silicon simulator and run. It needs XcodeGen (brew install xcodegen).

The Android build uses AGP 9.1.1 and SDK 37. Use Android Studio Panda 3 (2025.3.3) Patch 1 or newer, which supports both according to the Android compatibility table. AGP stays in the 9.1 series so the catalog does not require an IDE that supports AGP 9.4.

In Android Studio, reload/sync the root Gradle project, select Run > Sample catalog (Android), choose an emulator or connected device running Android 8.0/API 26 or later, then Run or Debug. The application module is sample-android; the sample module supplies the shared catalog UI. If Android is missing from an existing checkout's project view, reload all Gradle projects so settings.gradle.kts is imported again. The Android App configuration requires Android IDE support; Android Studio includes it. The installDebug command above also installs the catalog from a terminal.

The desktop catalog uses the Arjang artwork for its window, Dock/taskbar, and packaged launcher. Stop and rerun an already-open catalog after updating the icon; the existing JVM keeps its loaded resources.

The shared configurations in .run/ also include Run > Sample catalog (desktop) and Test > Tests (JVM), Tests (all targets), and Check (CI).

Component styling follows the design style guide: token-based spacing and colors, typography-scaled glyphs, Material minimum interactive sizes, visible keyboard focus, and contrast checks across themes and font scales.

KmpTheme(mode, tokens) converts kommon tokens once per token change (results are remembered) and provides:

To brand an app, pass a copy of KommonDesignTokens.default with your own values:

val brand = KommonDesignTokens.default.copy(
    lightColors = KommonDesignTokens.default.lightColors.copy(primary = ColorToken(0xFF_00_6C_4F)),
)
KmpTheme(tokens = brand) { /* ... */ }

Keyboard focus uses a visible outline in addition to Material's state colors. Outlined control boundaries use contrast-preserving theme roles on page and card surfaces. Components keep the same size when focus moves.

Decorative animations follow live Android and iOS reduced-motion settings. Desktop hosts can provide their own setting with CompositionLocalProvider(LocalReduceMotionEnabled provides true); null follows the platform preference. Read the effective value with rememberReduceMotionEnabled() to make your own animations follow it. The sample's Appearance controls include an override.

• ProviderConfigurationState.toString() redacts apiKey, so the state can be logged safely. Persisting the key securely (Keychain / Keystore) is the app's job.
• SecretTextField does not restore its revealed state after recreation and hides the value again when it is cleared.
• CheckStatus.Failure messages are displayed and announced; do not put secrets or raw server responses containing credentials in them.

./gradlew :components:jvmTest             # fastest loop: common + desktop UI tests
./gradlew :components:allTests            # unit tests on every target; UI tests on desktop, iOS, and web
./gradlew ktlintCheck                     # style from .editorconfig; ktlintFormat fixes most issues
./gradlew :components:lint :components-image:lint  # Android and JVM lint for the libraries
./gradlew :components:verifyRoborazziJvm  # desktop tests plus screenshot comparison
./gradlew :components:recordRoborazziJvm  # re-record goldens after an intended visual change
./gradlew :components:checkKotlinAbi      # public API against components/api (updateKotlinAbi accepts changes)
./gradlew :components:koverHtmlReport     # coverage report in components/build/reports/kover
./gradlew :components:koverVerify         # fails below the coverage floor in components/build.gradle.kts
./gradlew :components:assemble :sample:compileKotlinJvm :sample-android:assembleDebug

Contribution steps are in CONTRIBUTING.md; report vulnerabilities as described in SECURITY.md. iOS tests need macOS with Xcode, and web tests need Chrome. The build needs access to Google Maven for the Android plugin.

To build against a local checkout of kommon next to this repo, pass -PuseLocalKommon=true; Gradle substitutes io.github.maniramezan.kommon:design-system with the included build. Add -PkommonDir=<path> when that checkout lives somewhere else.

Releases are automated by Release Please from Conventional Commit messages (feat:, fix:, feat!:). Contributor and AI-agent conventions live in AGENTS.md.

The shared-component accessibility audit records verified behavior, regression coverage, and the platform checks still needed in consuming apps.