Pantrix UI

Installation

Add Pantrix UI to a Compose Multiplatform project, wrap the app in its theme and draw the first component. One dependency in the common source set serves every target.

What it needs

Kotlin
2.4.21 or newer
Compose Multiplatform
1.12.2 or newer
Android
API 30, Android 11
iOS
Arm64, simulator
Desktop and web
JVM, Wasm, JS

  1. Add the repository

    In settings.gradle.kts, next to Google's and Maven Central:

    GitHub Packages

    settings.gradle.kts

    dependencyResolutionManagement {
    repositories {
        maven {
            name = "GitHubPackages"
            url = uri("https://maven.pkg.github.com/develappsancho/pantrix-ui-cmp-package")
            credentials(PasswordCredentials::class)
        }
        google()
        mavenCentral()
    }
}

    Local Maven

    settings.gradle.kts

    dependencyResolutionManagement {
    repositories {
        mavenLocal()
        google()
        mavenCentral()
    }
}

  2. Add the dependency

    One line in the common source set. Gradle picks each target's build, and foundation comes with it, so PantrixTheme is there at once.

    build.gradle.kts

    kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("com.pantrixui:components:0.1.0-alpha03")
        }
        commonTest.dependencies {
            implementation("com.pantrixui:testing:0.1.0-alpha03")
        }
    }
}
    The other modules
    com.pantrixui:testingFinding by tag, PantrixTestTheme, doubles of the platform's services and assertions
    com.pantrixui:material3The bridge to Material 3, both ways, for an app that moves a screen at a time
    com.pantrixui:detekt-rulesThe rules an app keeps, for detektPlugins
    com.pantrixui:mcpThe MCP server, for coding assistants

  3. Wrap the app in the theme

    The theme reads the platform, the system's dark mode, its reduced motion and its language. Every component under it follows them.

    App.kt

    import com.pantrixui.components.elements.button.PantrixButton
import com.pantrixui.foundation.theme.PantrixTheme

@Composable
fun App() {
    PantrixTheme {
        PantrixButton(text = stringResource(Res.string.save), onClick = { /* … */ }, tagKey = "save")
    }
}

  4. Give it your brand

    A DesignPreset holds a brand's colours for light and dark, its type, its shapes and any component's overrides. The theme builder writes one for you.

    PantrixPreset.kt

    object PantrixPreset : DesignPreset {
    override val name = "Pantrix"
    override fun colors(dark: Boolean) = if (dark) PantrixDark else PantrixLight

    @Composable override fun typography() = rememberPantrixTypography()
    @Composable override fun shapes() = rememberPantrixShapes()
}

PantrixTheme(preset = PantrixPreset) { App() }

On each platform

iOS
The fold's bridge comes with the library: no cinterop of your own and no enableCInteropCommonization.
Web
Plus Jakarta Sans ships in the app's resources. A page that loads it before Compose starts shows no change of type: Web fonts.
Android
Nothing to add: the outermost theme makes tags the resource ids Maestro and UI Automator find. A Popup or Dialog of the app's own puts Modifier.pantrixAutomationRoot() on its root.

Where next