Compose Macos UI

A Compose Multiplatform adaptation of the native macos 26 style. This port brings the same design language to Android, iOS, Desktop, and Web through Compose Multiplatform.

Documentation & Live Demo

Features

• 30+ components — Buttons, Cards, Dialogs, Tables, Toasts, and more
• Light & Dark mode — Theme-aware styling with automatic system detection
• macOS aesthetic — Clean, native-feeling design inspired by Apple's design language
• Compose Multiplatform — Runs on Android, iOS, Desktop (JVM), and Web (JS/Wasm)
• Built-in design system — Colors, typography (Manrope), shapes, and animations out of the box
• No external UI dependencies — Pure Compose, no Material dependency required

Supported Platforms

Platform	Status
Android	✓
iOS	✓
Desktop (JVM)	✓
Web (JS)	✓
Web (Wasm)	✓

Quick Start

1. Add the dependency

// build.gradle.kts
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.kdroidfilter:compose-macos-ui:<version>")
        }
    }
}

2. Wrap your app with MacosTheme

import io.github.kdroidfilter.nucleus.ui.apple.macos.theme.MacosTheme

@Composable
fun App() {
    MacosTheme(darkTheme = false) {
        // Your content here
        // Access design tokens via MacosTheme.colors, MacosTheme.typography, etc.
    }
}

3. Use components

import io.github.kdroidfilter.nucleus.ui.apple.macos.components.*

@Composable
fun MyApp() {
    var selectedItem by remember { mutableStateOf("inbox") }

    Scaffold(
        sidebar = {
            Sidebar(
                items = listOf(
                    SidebarItem("inbox", "Inbox", icon = Icons.Home),
                    SidebarItem("sent", "Sent", icon = Icons.Share2),
                    SidebarItem("settings", "Settings", icon = Icons.Settings),
                ),
                activeItem = selectedItem,
            )
        },
        titleBar = {
            TitleBar(
                title = { Text("Mail") },
                actions = {
                    IconButton(
                        icon = Icons.Share2,
                        onClick = { /* open https://github.com/kdroidFilter/compose-macos-26-ui */ },
                        style = IconButtonStyle.Borderless,
                    )
                },
            )
        },
    ) { padding ->
        Column(Modifier.padding(padding).padding(16.dp)) {
            Text("Welcome to macOS UI", style = MacosTheme.typography.title1)
            PrimaryButton(onClick = { /* ... */ }) {
                Text("Get Started")
            }
        }
    }
}

For the full component catalog, API details, and interactive demos, visit the documentation.

License

Compose Macos UI is available under a dual license:

Open Source — GPL v3

Free for open-source projects. If your project is distributed under a GPL-compatible license, you can use Compose Macos UI at no cost under the terms of the GNU General Public License v3.0.

Commercial License — $50

For proprietary/closed-source projects, a commercial license is available for $50 (one-time payment). This license covers usage in up to 3 commercial projects.

To purchase a commercial license, contact me privately via email or open an issue on the repository.