Skip to main content

Getting started

DHIS2 Mobile UI library is a Compose Multiplatform DHIS2 design system library for Kotlin Multiplatform and Android applications.

DHIS2 UI Library Principles​

DHIS2 Mobile UI library is an open source design system for building DHIS2 Android and more mobile targets in the future. The system is based on a foundation of principles, patterns, and guidelines for designing user-friendly apps. A reusable component library provides the building blocks to develop DHIS2 apps with consistent user experience.

The UI library is more than just a collection of components, there also are principles, such as predefined colors, layout, typography, icons and patterns. You can find all of these in the DHIS2 UI documentation.

1. Installation​

Android​

In the module build.gradle.kts:

dependencies {
    implementation("org.hisp.dhis.mobile:designsystem-android:0.3.0")
}

Desktop​

In the module build.gradle.kts:

dependencies {
    implementation("org.hisp.dhis.mobile:designsystem-desktop:0.3.0")
}

Multiplatform project​

In the module build.gradle.kts:

dependencies {
    implementation("org.hisp.dhis.mobile:designsystem:0.3.0")
}

2. Usage​

setContent {
    DHIS2Theme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = SurfaceColor.Container
        ) {
            Button(
                text = provideStringResource("show_more"),
                icon = {
                    Icon(
                        painter = provideDHIS2Icon(resourceName = "dhis2_blood_a_n_positive"),
                        contentDescription = ""
                    )
                },
                style = ButtonStyle.KEYBOARDKEY
            ) {}
        }
    }
}