coui

ColorOS-styled UI components calibrated to ColorOS 16 visuals, metrics, motion curves and press feedback; theme controller with Monet dynamic colors, icons, blur and preference modules.

#wasm
#ui
#navigation
#material-design
#macos
#desktop
#design-system
#compose-multiplatform
#compose

Suggest an edit

Android JVMJVMKotlin/NativeWasmJS

GitHub stars16

Authorssuqi8

Dependents0

LicenseApache License 2.0

Creation date10 months ago

Last activity15 days ago

Latest release1.1.0 (15 days ago)

GitHub repository GitHub pages Wiki page

COUI

A ColorOS-styled UI library for Compose Multiplatform, based on Miuix.

Components are calibrated against ColorOS 16 (COUI) design: colors, metrics, motion curves and press feedback are transcribed from the real system implementation.

This library is experimental. APIs may change without notice.

Supported Platforms

Documentation & Demo

Modules

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

Getting Started

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.suqi8.coui.kmp:coui-ui:1.1.0")
            // Optional: Add coui-preference for preference components
            implementation("io.github.suqi8.coui.kmp:coui-preference:1.1.0")
            // Optional: Add coui-icons for more icons
            implementation("io.github.suqi8.coui.kmp:coui-icons:1.1.0")
            // Optional: Add coui-blur for blur effects
            implementation("io.github.suqi8.coui.kmp:coui-blur:1.1.0")
            // Optional: Add coui-navigation3-ui for navigation3 support
            implementation("io.github.suqi8.coui.kmp:coui-navigation3-ui:1.1.0")
            // Other dependencies...
        }
        // Other sourceSets...
    }
    // Other configurations...
}

Usage

Provide a color scheme via COUITheme(colors = ...), e.g., lightColorScheme() or darkColorScheme().

@Composable
fun AppTheme(
    content: @Composable () -> Unit
) {
    val colors = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()
    return COUITheme(
        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 COUITheme(
        controller = controller,
        content = content
    )
}

Credits

COUI is a fork of Miuix by YuKongA and the compose-miuix-ui contributors, rethemed to the ColorOS 16 design language. Both projects are licensed under Apache-2.0.