miuix

A shared UI library for Compose Multiplatform. Supports all platform targets. Provides components with Xiaomi HyperOS design style.

#design-system
#compose-ui

Suggest an edit

Android JVMJVMKotlin/NativeWasmJS

GitHub stars607

Authorscompose-miuix-ui

Open issues5

LicenseApache License 2.0

Creation dateover 1 year ago

Last activityabout 11 hours ago

Latest release0.9.0 (7 days ago)

Homepage GitHub repository GitHub pages

Miuix

A UI library for Compose Multiplatform.

This library is experimental. APIs may change without notice.

Supported Platforms

Demos

Modules

Module	Description
`miuix-ui`	Core UI component library (automatically includes `miuix-core`)
`miuix-preference`	Preference components (SwitchPreference, CheckboxPreference, etc.), depends on `miuix-ui`
`miuix-icons`	Extended icon library, can be used independently or with `miuix-ui` (automatically includes `miuix-core`)
`miuix-shapes`	Smooth rounded corner shapes, can be used independently
`miuix-blur`	Blur effect library, can be used independently
`miuix-navigation3-ui`	Navigation3 UI library, can be used independently

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-shapes for smooth rounded corners
            implementation("top.yukonga.miuix.kmp:miuix-shapes:<version>")
            // Optional: Add miuix-blur for blur effects
            implementation("top.yukonga.miuix.kmp:miuix-blur:<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