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