Carbon | Compose Multiplatform

A Compose Multiplatform implementation of the Carbon Design System.

Supported platforms:

Android
iOS
Desktop

Caution

This library is still under development and unofficial. Contributions are welcomed.

🤳 Catalog App

For testing purposes, this project provides a catalog app for supported targets.

As this is a KMP project, please follow those steps to setup your environment accordingly.

Android 🤖

You can either run the app from the Android App run configuration in Android Studio, or compile an APK by executing the assemble task in a terminal:

./gradlew :catalog:assemble

iOS 

To run the iOS catalog app, open the Xcode project located in <git repo>/iosCatalog and run it (⌘R).

Desktop 🖥️

You can run the desktop version by executing the desktopRun Gradle task in a terminal:

./gradlew :catalog:desktopRun -DmainClass=com.gabrieldrn.carbon.catalog.MainKt

✏️ Usage

The Carbon Compose libraries tries to stay simple and respect Carbon guidelines as much as possible. Its usage is similar to the Jepack Compose implementation of Material Design.

Note

A dedicated documentation website will be created.

Import

Add the dependency to your build.gradle file:

dependencies {
    implementation("io.github.gabrieldrn:carbon:0.1.0")
}

Whatever you have an Android or a KMP project, this will import the library corresponding to the targeted platform.

Compose tree root

To provide all resources (colors and typography) necessary to create a UI with Carbon, use the CarbonDesignSystem root composable at the top of your Compose tree:

setContent {
    CarbonDesignSystem {
        // Your UI content
    }
}

This will apply the IBM Plex type family to components + White and Grey 100 themes as the light and dark themes respectively, according to the current platform theme setting.

Available UI components and structural elements ("foundation")

Warning

Only few components with limited implementations are available at the moment. If you seek documentation about a component, please read written KDoc in the source code until the dedicated documentation website is available.

Foundation

Themes
- White
- Grey100
Typography (IBM Plex)
Layering

Components

Button
Checkbox
Dropdown
Loading
Multi-select
Progress bar
Radio button
Text input
Toggle

terrakok/carbon-compose