Skip to content

Getting Started

Supported platforms: Android / Desktop (JVM) / iOS / WasmJs / Js / macOS (Native)

WARNING

This library is experimental, and APIs may change in future versions without notice.

Adding Dependencies

To use Miuix in your project, follow these steps to add dependencies:

Gradle (Kotlin DSL)

  1. Add the following to the root settings.gradle.kts file (usually already included):
kotlin
repositories {
    mavenCentral()
}
  1. Check the latest version on Maven Central: Maven Central

  2. Add dependencies to your project's build.gradle.kts:

  • For Compose Multiplatform projects:
kotlin
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("top.yukonga.miuix.kmp:miuix:<version>")
        }
    }
}
  • For Android Compose projects:
kotlin
dependencies {
    implementation("top.yukonga.miuix.kmp:miuix-android:<version>")
}
  • For other projects, add platform-specific dependencies as needed:
kotlin
implementation("top.yukonga.miuix.kmp:miuix-android:<version>")
implementation("top.yukonga.miuix.kmp:miuix-iosarm64:<version>")
implementation("top.yukonga.miuix.kmp:miuix-iosx64:<version>")
implementation("top.yukonga.miuix.kmp:miuix-iossimulatorarm64:<version>")
implementation("top.yukonga.miuix.kmp:miuix-macosx64:<version>")
implementation("top.yukonga.miuix.kmp:miuix-macosarm64:<version>")
implementation("top.yukonga.miuix.kmp:miuix-desktop:<version>")
implementation("top.yukonga.miuix.kmp:miuix-wasmjs:<version>")
implementation("top.yukonga.miuix.kmp:miuix-js:<version>")

Basic Usage

Applying the Miuix Theme

kotlin
@Composable
fun AppTheme(
    content: @Composable () -> Unit
) {
    // Available modes: System, Light, Dark, MonetSystem, MonetLight, MonetDark
    val controller = remember { ThemeController(ColorSchemeMode.System) }
    return MiuixTheme(
        controller = controller,
        content = content
    )
}

Using the Miuix Scaffold

kotlin
Scaffold(
    topBar = {
        // TopBar
    },
    bottomBar = {
        // BottomBar
    },
    floatingActionButton = {
        // FloatingActionButton
    },
    floatingToolbar = {
        // FloatingToolbar
    }
) {
    // Content...
}

WARNING

The Scaffold component provides a suitable container for cross-platform popup windows. Components such as SuperDialog, SuperDropdown, SuperSpinner, and ListPopup are all implemented based on this and therefore need to be wrapped by this component.

API Documentation

  • View the API Documentation, generated using Dokka, which contains detailed information about all APIs.

Changelog

Released under the Apache-2.0 License