Getting started

Requirements

All of our components are built on top of Compose Multiplatform. To use them, you need to include the following dependencies in your project:

dependencies {
    implementation("androidx.compose.ui:ui:1.6.10")
}

We use Coil Compose for image loading:

dependencies {
    implementation("io.coil-kt:coil-compose:3.0.0-alpha06")
    implementation("io.coil-kt.coil3:coil-compose:3.0.0-alpha06")
    implementation("io.coil-kt.coil3:coil-compose-core:3.0.0-alpha06")
    implementation("io.coil-kt.coil3:coil-network-ktor:3.0.0-alpha06")
}

Responsive components require WindowSizeClass:

// app/build.gradle.kts

dependencies {
    implementation("androidx.compose.material3:material3-window-size-class:1.2.0-alpha02")
}

for multiplatform projects you can use Chris Bane's Window Size Class:

val commonMain by getting {
    dependencies {
        implementation("dev.chrisbanes.material3:material3-window-size-class-multiplatform:0.3.0")
    }
}

Add components to your project

We do not distribute any library or dependency of some sort. Instead, we provide the source code of all components straight from our website.

  1. Login to your account.
  2. Find the component you need.
  3. Copy the source code of the component and paste it in your project

Resources & Assets

Icons

All icons come from two sources. Ξ€he Icons object that comes in the Material 3 Compose library.

We have also converted all icons from Material Symbols to composable functions that can be inlined in components and we use in our components.

Colors

Material based components use the active MaterialTheme for colors and make heavily use of Material's theming.

For cases where a hardcoded color is needed, we use colors form the 2014 Material Design color palette.

Images

All high res images used in the component are used from Unsplash.