Getting started

Add Material 3 Expressive to a Compose project in a few lines.

• Interactive page: https://m3e.ljzapps.app/#foundations/getting-started

1. Dependencies

Expressive APIs ship with the Material3 1.5 alpha line. Compose Multiplatform mirrors it.

// Android (Compose BOM or explicit version)
implementation("androidx.compose.material3:material3:1.5.0-alpha22")

// Compose Multiplatform
implementation("org.jetbrains.compose.material3:material3:1.12.0-alpha03")

2. Theme

MaterialExpressiveTheme turns on the expressive motion scheme and the expressive component defaults.

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun AppTheme(content: @Composable () -> Unit) {
    MaterialExpressiveTheme(
        colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme(),
        motionScheme = MotionScheme.expressive(),
        content = content,
    )
}

3. Opt in

Expressive APIs are experimental. Add @OptIn(ExperimentalMaterial3ExpressiveApi::class) to the composable, the file or the module.

kotlin {
    compilerOptions {
        optIn.add("androidx.compose.material3.ExperimentalMaterial3ExpressiveApi")
    }
}

4. First expressive screen

Button(onClick = { }, shapes = ButtonDefaults.shapes()) { Text("Hello, Expressive") }
LoadingIndicator()