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)
- Add the following to the root
settings.gradle.ktsfile (usually already included):
kotlin
repositories {
mavenCentral()
}- 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.
