Install (Compose Multiplatform)

In this page you will find how to use Composables One in your Compose Multiplatform projects.

Set up a Compose Multiplatform Project

To quickly start a Compose Multiplatform project, use the KMP wizard and select the platforms you would like your app to run on.

Add Composables One into your project

Download the UI Kit from the Composables One page.

Then extract its contents inside the kotlin (or java) folder in your project.

Requirements

Composables One requires minimum Kotlin version 2.2.0 and minimum Compose Multiplatform version 1.9.0.

Install Dependencies

After you have added the files into your project, go to the respective app/build.gradle.kts file, add the following dependencies into your dependencies {} block and update the JVM version to 17:

kotlin {
    androidTarget {
        compilerOptions {
            jvmTarget.set(JvmTarget.JVM_17) // <- Update this
        }
    }
    sourceSets {
        commonMain.dependencies {
            implementation("com.composables:core:1.46.0")
            // required for TimePicker component
            implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.2")
        }
    }
}

To add the components in your project, simply copy and paste the contents of the zip file you got via your dashboard into your project.

Optional: Setup Inter font

The UI Kit has been designed using the Inter font. Inter is a modern font for User Interfaces. This step is optional and you can use any kind of font you like.

Enable Compose Resources and add Inter to the commonMain/composeResources/font directory.

Then use the following code to load and assign the font family into the theme:

val UiKitTheme = buildTheme {
    // replace 
    val defaultFontFamily = FontFamily.Default
    
    // with
    val defaultFontFamily = loadVariableFont(Res.font.Inter)

    // leave the rest as is
}

@Composable
fun loadVariableFont(variableFont: FontResource): FontFamily {
    val weights = listOf(
        FontWeight.W100,
        FontWeight.W200,
        FontWeight.W300,
        FontWeight.W400,
        FontWeight.W500,
        FontWeight.W600,
        FontWeight.W700,
        FontWeight.W800,
        FontWeight.W900,
    )
    return FontFamily(
        weights.map { fontWeight ->
            Font(
                resource = variableFont,
                variationSettings = FontVariation.Settings(weight = fontWeight),
                weight = fontWeight,
            )
        }
    )
}

Optional: Install Lucide icons

The UI Kit has been designed using the Lucide icon set.

Add the following to your app/build.gradle.kts:

implementation("com.composables:icons-lucide:1.0.0")