Compose Fluent

Fluent Design UI library for Compose Multiplatform

Current Status

This library is experimental, any API would be changed in the future without any notification.

Please note that there are lots of hard-coding and workarounds in our source code, which we plan to eliminate in the future.

Thank you for using our library. We look forward to receiving your feedback and contributions!

Supported Kotlin Targets

Quick Start

Add Dependency

implementation("io.github.compose-fluent:fluent:v0.1.0")
implementation("io.github.compose-fluent:fluent-icons-extended:v0.1.0") // If you want to use full fluent icons.

Snapshot Versions

Snapshot versions are automatically published from the dev branch. To access snapshot artifacts, add the Sonatype snapshot repository to your build.gradle.kts:

repositories {
    mavenCentral()
    // Add Sonatype snapshots repository
    maven("https://central.sonatype.com/repository/maven-snapshots/")
}

Then specify the snapshot dependency with the -SNAPSHOT suffix:

implementation("io.github.compose-fluent:fluent:0.1.0-SNAPSHOT")

You can check our latest snapshots at Maven Central.

Example

import io.github.composefluent.component.*

@Composable
fun App() {
  FluentTheme {
    Mica(Modifier.fillMaxSize()) {
      Column(Modifier.padding(24.dp)) {
        Button(onClick = {}) {
          Text("Hello Fluent Design")
        }
      }
    }
  }
}

See gallery module for more details.

• FluentTheme() is the context and entry point of the application, just like MaterialTheme
• Components are under component package
• Mica and Layer are under background package

Components

Layers

• Materials
  • App Layer Mica
  • App Layer Mica Alt
  • App Layer Acrylic Default
  • App Layer Acrylic Base
  • App Layer Accent Acrylic Default
  • App Layer Accent Acrylic Base
  • App Layer Thin Acrylic
  • Window Layer Mica
  • Window Layer Acrylic
• Mica
  • Simple Mica
  • Real Mica
• Layer
  • Simple Layer
  • Real Layer
• Card

Basic Components

• Buttons

  • Button
  • Accent Button
  • Subtle Button
  • Dropdown Button
  • Hyperlink Button
  • Repeat Button
  • Toggle Button
  • Split Button
  • Toggle Split Button

• Radio Button

• Toggle Switch

• Check Box

  • TriState Check Box

• Combo Box (Simple)

• Progress Bar

• Progress Ring

• Slider

• Text Field

• Text

• Color Picker

• Rating Control

• Pill Button

• Segmented Button

• Lite Filter

• List Item

• Grid View Item

• Flip View

• Pips Pager

Compound Components

• Calendar View (Simple)

  If you need running on the Android 7.1 and below, you should enable core library desugar to avoid crash.

• Date Time Picker (Simple)
• Color Picker
• Navigation
  • Side Nav
  • Top Nav
  • Navigation View
  • Breadcrumb Bar
  • Pivot
  • Tab View
  • Selector Bar
• Tooltip
• Info Bar
• Badge
• File Picker
• Menu Bar (Simple)
• MenuFlyout (Simple)
• Expander
• Command Bar
• Command Bar Flyout
• Auto Suggest Box

Dialogs

• Fluent Dialog
• Content Dialog
• Flyout (Simple)

Animations

• Animation Preset Constants (Duration, Easing Functions)

Theme

• Light and Dark theme
• Custom accent color

Accessibility

• Accessibility Semantics

Contribution

See CONTRIBUTION.md

License

This library is licensed under the Apache License 2.0.

The copyright of the icon assets (in io.github.composefluent.icons package) belongs to Microsoft.

Credits

This project is built upon the foundations laid by several remarkable open-source projects. We extend our sincere gratitude to the developers and maintainers of these projects for their invaluable contributions to the open-source community.

Fluent

Fluent-Icons

Gallery