# Jetpack Compose

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

Source: https://uim.suiss.app/docs/jetpack-compose

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:

```bash title="Terminal"
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:

```bash title="Terminal"
npx @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:

```kotlin title="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")
```

2. Copy the theme files, `Theme.kt` and `Tokens.kt`. Every composable uses them.
3. Copy the component and the files it uses.
4. Update the `com.esuiss.ui` package names to match your project.

## Usage

Wrap your content in `EsuissTheme`, then use the components:

```kotlin
@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:

```kotlin
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:

- [Components](/docs/components)
- [Patterns](/docs/patterns)
- [Interactions](/docs/interactions)
- [Charts](/docs/charts)
- [Blocks](/docs/blocks)