README.md

July 14, 2026 ยท View on GitHub

Miuix

A UI library for Compose Multiplatform.

This library is experimental. APIs may change without notice.

Kotlin Compose Multiplatform Maven Central License

Supported Platforms

Android iOS macOS Desktop JsCanvas WasmJs

Demos

JsCanvas WasmJs Other

Modules

ModuleDescription
miuix-uiCore UI component library
miuix-preferencePreference components library, depends on miuix-ui
miuix-iconsExtended icon library, can be used independently
miuix-blurBlur effect library, can be used independently
miuix-squircleSquircle shapes library, can be used independently
miuix-navigation3-uiNavigation3 UI library, can be used independently
miuix-shaderLow-level runtime shader / render effect abstraction

Getting Started

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("top.yukonga.miuix.kmp:miuix-ui:<version>")
            // Optional: Add miuix-preference for preference components
            implementation("top.yukonga.miuix.kmp:miuix-preference:<version>")
            // Optional: Add miuix-icons for more icons
            implementation("top.yukonga.miuix.kmp:miuix-icons:<version>")
            // Optional: Add miuix-blur for blur effects
            implementation("top.yukonga.miuix.kmp:miuix-blur:<version>")
            // Optional: Add miuix-squircle for squircle (smooth rounded corner) shapes
            implementation("top.yukonga.miuix.kmp:miuix-squircle:<version>")
            // Optional: Add miuix-navigation3-ui for navigation3 support
            implementation("top.yukonga.miuix.kmp:miuix-navigation3-ui:<version>")
            // Other dependencies...
        }
        // Other sourceSets...
    }
    // Other configurations...
}

Usage

  • Provide a color scheme via MiuixTheme(colors = ...), e.g., lightColorScheme() or darkColorScheme().
@Composable
fun AppTheme(
    content: @Composable () -> Unit
) {
    val colors = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()
    return MiuixTheme(
        colors = colors,
        content = content
    )
}
  • Use ThemeController to manage modes and enable Monet dynamic colors. Pass keyColor to set a custom seed color.
@Composable
fun AppTheme(
    content: @Composable () -> Unit
) {
    val controller = remember {
        ThemeController(
            ColorSchemeMode.MonetSystem,
            keyColor = Color(0xFF3482FF)
        )
    }
    return MiuixTheme(
        controller = controller,
        content = content
    )
}

Screenshots

Screenshot 001 Screenshot 002 Screenshot 003
Screenshot 004 Screenshot 005 Screenshot 006