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 COUI 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):

repositories {
    mavenCentral()
}

2. Check the latest version on Maven Central:

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

COUI is composed of several modules that can be used independently:

Module	Description
coui-ui	Core UI component library
coui-preference	Preference components library, depends on coui-ui
coui-icons	Extended icon library, can be used independently
coui-blur	Blur effect library, can be used independently
coui-squircle	Squircle shapes library, can be used independently
coui-nav	Navigation library, can be used independently
coui-shader	Low-level runtime shader / render effect abstraction

• For Compose Multiplatform projects:

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.suqi8.coui.kmp:coui-ui:<version>")
            // Optional: Add coui-preference for preference components
            implementation("io.github.suqi8.coui.kmp:coui-preference:<version>")
            // Optional: Add coui-icons for more icons
            implementation("io.github.suqi8.coui.kmp:coui-icons:<version>")
            // Optional: Add coui-blur for blur effects
            implementation("io.github.suqi8.coui.kmp:coui-blur:<version>")
            // Optional: Add coui-squircle for squircle (smooth rounded corner) shapes
            implementation("io.github.suqi8.coui.kmp:coui-squircle:<version>")
            // Optional: Add coui-nav for navigation
            implementation("io.github.suqi8.coui.kmp:coui-nav:<version>")
        }
    }
}

• For Android Compose projects:

dependencies {
    implementation("io.github.suqi8.coui.kmp:coui-ui-android:<version>")
    // Optional: Add coui-preference for preference components
    implementation("io.github.suqi8.coui.kmp:coui-preference-android:<version>")
    // Optional: Add coui-icons for more icons
    implementation("io.github.suqi8.coui.kmp:coui-icons-android:<version>")
    // Optional: Add coui-blur for blur effects (requires minSdk 33)
    implementation("io.github.suqi8.coui.kmp:coui-blur-android:<version>")
    // Optional: Add coui-squircle for squircle (smooth rounded corner) shapes
    implementation("io.github.suqi8.coui.kmp:coui-squircle-android:<version>")
    // Optional: Add coui-nav for navigation
    implementation("io.github.suqi8.coui.kmp:coui-nav-android:<version>")
}

• For other projects, add platform-specific dependencies as needed:

implementation("io.github.suqi8.coui.kmp:coui-ui-iosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-ui-iossimulatorarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-ui-macosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-ui-desktop:<version>")
implementation("io.github.suqi8.coui.kmp:coui-ui-wasmjs:<version>")
implementation("io.github.suqi8.coui.kmp:coui-ui-js:<version>")
// Optional: Add coui-preference
implementation("io.github.suqi8.coui.kmp:coui-preference-iosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-preference-iossimulatorarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-preference-macosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-preference-desktop:<version>")
implementation("io.github.suqi8.coui.kmp:coui-preference-wasmjs:<version>")
implementation("io.github.suqi8.coui.kmp:coui-preference-js:<version>")
// Optional: Add coui-blur
implementation("io.github.suqi8.coui.kmp:coui-blur-iosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-blur-iossimulatorarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-blur-macosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-blur-desktop:<version>")
implementation("io.github.suqi8.coui.kmp:coui-blur-wasmjs:<version>")
implementation("io.github.suqi8.coui.kmp:coui-blur-js:<version>")
// Optional: Add coui-nav
implementation("io.github.suqi8.coui.kmp:coui-nav-iosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-nav-iossimulatorarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-nav-macosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-nav-desktop:<version>")
implementation("io.github.suqi8.coui.kmp:coui-nav-wasmjs:<version>")
implementation("io.github.suqi8.coui.kmp:coui-nav-js:<version>")
// Optional: Add coui-icons
implementation("io.github.suqi8.coui.kmp:coui-icons-iosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-icons-iossimulatorarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-icons-macosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-icons-desktop:<version>")
implementation("io.github.suqi8.coui.kmp:coui-icons-wasmjs:<version>")
implementation("io.github.suqi8.coui.kmp:coui-icons-js:<version>")
// Optional: Add coui-squircle
implementation("io.github.suqi8.coui.kmp:coui-squircle-iosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-squircle-iossimulatorarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-squircle-macosarm64:<version>")
implementation("io.github.suqi8.coui.kmp:coui-squircle-desktop:<version>")
implementation("io.github.suqi8.coui.kmp:coui-squircle-wasmjs:<version>")
implementation("io.github.suqi8.coui.kmp:coui-squircle-js:<version>")

Basic Usage

Applying the COUI Theme

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

Using the COUI Scaffold

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 OverlayDialog, OverlayDropdownPreference, OverlaySpinnerPreference, and OverlayListPopup are all implemented based on this and therefore need to be wrapped by this component.

API Documentation

• View the API Documentation{target="_blank"}, generated using Dokka, which contains detailed information about all APIs.

Changelog

Last edited 9 days ago

View full history

429b622-docs: rebrand site to COUI and audit all component pages

9293915-docs: fix module names and dead dokka links after rename

9aba0de-chore: rename package from com.suqi8 to io.github.suqi8

7acb5ab-library: retheme to COUI 16 and rename Miuix to COUI

6063075-Add miuix-nav module (#346)

cc7bb51-build: bump version to 0.9.2

04ac2e8-docs: align components/guides with current API

d0c460a-library: Remove miuix-shapes

e741c16-library: add miuix-shapes module (#287)

f1ca0ae-docs: update module names and dependency coordinates after restructure

baf2ab8-library!: restructure modules into miuix-ui and miuix-preference (#282)

c4ac0c0-library: Add miuix-blur (#278)

1f45c67-docs: Remove x64 info

cb66096-refactor: Move extended icon to a separate library

d957a4a-docs: Improve document content

3e0ef5d-library: Dynamic -> Monet

486c2f0-library: refactor MiuixTheme & ColorScheme

cc1634b-docs: Add English version through AI translation

f4948c1-docs: Fix defineConfig

7bd2bac-chore: Add documents (#63)