Getting Started

In this page you will find how to use the Composables UI Kit in your Compose UI projects. The UI Kit is built on top of Compose Unstyled and can be used on both Jetpack Compose and Compose Multiplatform projects.

The UI Kit is an excellent starting point for your own component libraries. All components in the UI Kit are production-ready, modern and accessible. They can be used with touch (mobile devices), keyboard and mouse (web and desktop). Use them as is, or edit the code to your needs based off your requirements.

Set up a Compose UI Project

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

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

Add the UI Kit into your project

Download the UI Kit via your Dashboard.

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

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.37.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.

Use Inter in Jetpack Compose

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
}

Use Inter in Compose Multiplatform

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