suiss/uim

Jetpack Compose

Copy-paste Jetpack Compose components for Android apps in Kotlin, with the same design, names and variants as the React Native components.

suiss/uim includes Jetpack Compose source in Kotlin for every component, pattern, interaction, chart and block. The composables are built from the same design tokens as the React Native components, so a native Android app and an Expo app share one design. The source is copied into your project, not installed as a library, so you own and can change every composable.

Requirements

  • minSdk 24 or higher.
  • Jetpack Compose Foundation and UI. The components do not depend on Material.
  • Components with icons use the Phosphor icons library for Android.

Add a component

Pass --platform kotlin to the CLI:

npx @esuiss/uim@latest add button --platform kotlin

Leave out the names to pick from a list that only shows what exists for Jetpack Compose:

$ pnpm dlx @esuiss/uim@latest add --platform kotlin

Every component page also lists the files to copy by hand under Installation, in the Jetpack Compose tab.

Manual setup

  1. Add the dependencies:
build.gradle.kts
implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")
implementation("com.adamglin:phosphor-icon-android:1.0.0")
  1. Copy the theme files, Theme.kt and Tokens.kt. Every composable uses them.
  2. Copy the component and the files it uses.
  3. Update the com.esuiss.ui package names to match your project.

Usage

Wrap your content in EsuissTheme, then use the components:

@Composable
fun App() {
    EsuissTheme {
        Button("Continue", onClick = {})
    }
}

Light and dark mode

EsuissTheme follows the system setting through isSystemInDarkTheme(). Pass darkTheme to choose a mode yourself:

EsuissTheme(darkTheme = true) {
    Button("Continue", onClick = {})
}

Same names as React Native

Component names, variants and sizes match the React Native components and the SwiftUI views. Moving between the React Native docs, the Kotlin source and suiss/ui on the web uses one vocabulary.

Browse

Open the Code tab of any example and choose Compose to see the Kotlin version: