Compose Fluent

Fork of compose-fluent/compose-fluent-ui, maintained and updated on top of Nucleus (client-side decorated window, GraalVM native gallery builds).

Fluent Design UI library for Compose Multiplatform

Current Status

Stable and in active use. The component set is broad, the public API is settled, and releases follow semantic versioning — breaking changes only land in a new major version.

Some APIs are still opt-in behind @ExperimentalFluentApi — the material/backdrop layer and parts of a few components. Those may change in a minor release; the annotation tells you exactly which ones, so nothing changes under you without a compiler warning.

Feedback and contributions are welcome.

Supported Kotlin Targets

Target	Platform
desktop	Linux, macOS, Windows
iosArm64	iPhone, iPad
iosSimulatorArm64	iOS Simulator
androidTarget	Android Devices
wasmJs	Web Browsers
js	Web Browsers

iosX64 was dropped: Compose Multiplatform 1.11 no longer publishes artifacts for it.

Differences from the original project

This fork picks up compose-fluent/compose-fluent-ui, which is no longer maintained, and adds the following.

Full RTL support

Every component that encodes a direction — a fill, a travel path, a caret, a gesture — is now mirrored in LayoutDirection.Rtl instead of staying left-to-right:

• ProgressBar fill and indeterminate segment travel, Switcher thumb travel
• Slider geometry, tick placement and drag gestures
• RatingControl clip shapes, ColorPicker absolute dot offsets and reversed slider gradients
• BreadcrumbBar, PipsPager, FlipView, ListItem, Scrollbar and FontIcon carets and chevrons

The approach is deliberate: rather than duplicating the geometry, the canvas is mirrored so the same LTR math produces the RTL result. The gallery has an LTR/RTL toggle in its title bar to check any component in both directions.

Fewer recompositions

• Theme and style models (Colors, and the per-component style/shape holders) are annotated @Immutable / @Stable, so composables reading them can skip.
• Animation and size values are read at layout/draw time through lambda providers instead of being read in composition — an indeterminate ProgressRing or ProgressBar no longer recomposes on every frame, it only redraws.
• Scrollbar style allocation is hoisted out of the recomposition path.
• IntRange, ClosedFloatingPointRange and the kotlinx.datetime value types are declared stable through a shared compose_stability.conf, which the Compose compiler and the stability analyzer both read.
• compose-stability-analyzer is wired in so a regression in class stability fails the build rather than silently costing frames (./gradlew :fluent:stabilityDump to record a baseline, :fluent:stabilityCheck to verify it). Recomposition tracing is available behind -PcomposeTrace=true, and compiler reports behind -PcomposeReports=true.

Nucleus window backend

The desktop chrome was a hand-rolled AWT window driving Win32 through JNA. It is now Nucleus-backed via the new decorated-window-fluent module — see Window (desktop). That removes the JNA dependency and the platform-specific title-bar code, and brings native window controls, the real Windows Mica/Acrylic backdrop, native popup layers and window accessibility on Linux and macOS as well as Windows.

Distribution

• Gallery installers are built as GraalVM native images (.deb, .dmg, .exe), so there is no bundled JVM and startup is immediate.
• Releases are tag-driven: pushing vX.Y.Z publishes every module to Maven Central and attaches the three installers to a GitHub release. No snapshot channel.
• Dependencies and the Gradle wrapper track current versions (Kotlin 2.4.10, Compose Multiplatform 1.11.1, Gradle 9.5.1), and the wasm entry point was migrated off the removed CanvasBasedWindow.

Quick Start

Add Dependency

implementation("dev.nucleusframework.composefluent:fluent:1.0.0")
implementation("dev.nucleusframework.composefluent:fluent-icons-extended:1.0.0") // If you want to use full fluent icons.

// Desktop only: client-side decorated window and dialog backed by Nucleus/Tao.
implementation("dev.nucleusframework.composefluent:decorated-window-fluent:1.0.0")

Every release is published to Maven Central from a vX.Y.Z tag; check the latest version.

Gallery

Prebuilt native gallery installers (Linux .deb, macOS .dmg, Windows .exe) are attached to each GitHub release, and the web version is deployed to GitHub Pages.

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 (Windows)
  • Window Layer Acrylic (Windows)
• Mica
  • Simple Mica — flat mica.base fill
  • Real Mica — native DWM backdrop on Windows (Mica, Mica Alt, Acrylic) through Nucleus WindowsBackdrop; blur-based fallback elsewhere
• Layer
  • Simple Layer
  • Real Layer — real gaussian blur of the in-app backdrop via hazeSource/hazeEffect
• Card

App-level materials (Mica, Material, MaterialContainer) blur the content behind them on every skiko target. The window-level backdrop, which lets the desktop wallpaper show through the window itself, is Windows-only and comes from the decorated window; the gallery exposes it under Settings → Window backdrop.

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 — lightColors(accent = …) / darkColors(accent = …) derive the whole shade set from any Color
• Follow the OS dark mode (desktop, via the Nucleus dark-mode detector)
• RTL / mirrored layouts

Window (desktop)

Provided by the decorated-window-fluent module on top of Nucleus:

• Client-side decorated window and dialog with a Fluent title bar
• Native window controls, drag regions and snap behaviour
• Native Mica / Mica Alt / Acrylic window backdrop (Windows)
• Title bar and chrome themed from the ambient FluentTheme colors
• Native popup layers, so menus and flyouts can extend past the window bounds

Accessibility

• Semantic roles and state on interactive components (Role.Checkbox, Role.Switch, Role.RadioButton, toggleable/selectable semantics, icon content descriptions)
• Screen-reader support for the decorated window: the Nucleus Tao backend bridges the Compose semantics tree to the platform accessibility API
• Slider semantics (still a TODO in the component)

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

Project	Description	License
Windows UI Kit (Figma)	Provided design mockups for controls.	CC BY 4.0
JetBrains/compose-multiplatform	Provides the fundamental framework for Compose Multiplatform development.	Apache License 2.0
Kotlin/kotlinx-datetime	Provides a unified clock API.	Apache License 2.0
chrisbanes/haze	Offers essential implementations for acrylic and mica effects.	Apache License 2.0

Fluent-Icons

Project	Description	License
microsoft/fluentui-system-icons	Supplies the icon assets used in the project.	MIT License
DevSrSouza/svg-to-compose	Facilitates the conversion of SVG icons to Compose icons, aiding in the implementation of Fluent icons.	MIT License

Gallery

Project	Description	License
NucleusFramework/Nucleus	Provides the decorated window and dialog, native window controls, the Windows Mica/Acrylic backdrop, window accessibility, OS dark-mode detection and the GraalVM native packaging of the gallery.	Apache License 2.0
google/ksp	Along with KotlinPoet, helps with source code generation for examples and navigation logic.	Apache License 2.0
square/kotlinpoet	Along with KSP, helps with source code generation for examples and navigation logic.	Apache License 2.0
SnipMeDev/Highlights	Enables syntax highlighting for example code.	Apache License 2.0
yshrsmz/BuildKonfig	Facilitates the generation of build configuration parameter classes.	Apache License 2.0