Install (Jetpack Compose)

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

Set up a Compose UI Project

To set up Compose in an Android project, follow our Jetpack Compose guide.

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 Jetpack Compose version 1.9.0.

Install Dependencies

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

dependencies {
    implementation("com.composables:core:1.43.1")
    // 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.

Add the Inter fonts variations into your res/font folder.

Then in the Theme.kt file, create a variable for it and assign it to the defaultFontFamily of the theme:

val Inter = FontFamily(
    Font(R.font.inter_thin, weight = FontWeight.Thin),
    Font(R.font.inter_extralight, weight = FontWeight.ExtraLight),
    Font(R.font.inter_light, weight = FontWeight.Light),
    Font(R.font.inter_regular, weight = FontWeight.Normal),
    Font(R.font.inter_medium, weight = FontWeight.Medium),
    Font(R.font.inter_semibold, weight = FontWeight.SemiBold),
    Font(R.font.inter_bold, weight = FontWeight.Bold),
    Font(R.font.inter_extrabold, weight = FontWeight.ExtraBold),
    Font(R.font.inter_black, weight = FontWeight.Black),
)

val UiKitTheme = buildTheme {
    // replace 
    val defaultFontFamily = FontFamily.Default

    // with
    val defaultFontFamily = Inter
    
    // leave the rest as is
}

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")