Getting started

Requirements

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

dependencies {
    implementation "androidx.compose.ui:ui:1.3.1"
    implementation "androidx.compose.material3:material3:1.2.0-alpha02"
}

We use Coil Compose for image loading:

dependencies {
    implementation "io.coil-kt:coil-compose:2.3.0"
}

All components can be used on Android apps running SDK 21 and above.

If you are new to Jetpack Compose and you need to set it up to your project, follow this guide to set things up.

Responsive components require WindowSizeClass:

// app/build.gradle

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

Optional: Opt in to @ExperimentalMaterial3Api

Some of our components make use of the latest composables in Material 3 Compose.

Instead of marking each file in your project with the @ExperimentalMaterial3Api annotation to use them, you can tell the Kotlin compiler to allow such APIs in your project:

// build.gradle

android {
    kotlinOptions {
        freeCompilerArgs += [
                "-opt-in=androidx.compose.material3.ExperimentalMaterial3Api",
        ]
    }
}

or with the Kotlin DSL:

// build.gradle.kts

import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

tasks.withType<KotlinCompile> {
    kotlinOptions {
        freeCompilerArgs += listOf("-opt-in=androidx.compose.material3.ExperimentalMaterial3Api")
    }
}

For Multiplatform projects, use the optIn method:

sourceSets {
    all {
        languageSettings.optIn("androidx.compose.material3.ExperimentalMaterial3Api")
    }
}

For more info about opt-in requirements, check the official Kotlin documentation.

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

Using the components

The components are built on top of Material 3 Compose and make heavy use of the MaterialTheme object. Because of this all components adapt to the looks of your app.

You can use the source code of the components in two ways:

• use the source code as is and use the components as ready-made components.
• build your own components on top of the source code of the components.

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

All components rely on the current active MaterialTheme for colors and make heavily use of Compose's theming engine.

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

Images

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