FluentGUI

A Rust GUI framework built on GPUI with a Fluent 2-inspired design language and a ribbon-centric command model.

---

Overview

FluentGUI is a reusable, open-source framework that gives Rust applications a coherent Fluent 2 design language on top of GPUI — the GPU-accelerated, reactive UI engine from the Zed editor. It is purpose-built for desktop applications that need a polished, professional shell: ribbon bars, resizable dock panels, menus, modals, data surfaces, and full token-driven theming.

What it is:

• A complete application shell (title bar, menu bar, ribbon, dock panels, pane splitting)
• A design-token layer mapping Fluent 2 colors, spacing, radii, and type to GPUI primitives
• A library of interactive widgets (inputs, dropdowns, comboboxes, trees, data tables, toasts, modals, and more)
• Live dark/light theme switching with per-entity reactive subscription

What it is not:

• A general-purpose layout engine or CSS replacement
• A wrapper around a web renderer
• A port of WinUI/XAML

---

Demo

Overview.mp4

---

Getting Started

Add the crates you need to your Cargo.toml:

[dependencies]
gpui        = "0.2.2"
fluent-app  = "2.0.2"   # application entry point and window chrome
fluent-layout = "2.1.1" # Workspace and application layout surfaces
fluent-core = "2.1.1"   # design tokens and theme (transitive — usually not needed directly)

A minimal application:

use fluent_app::FluentApp;
use fluent_layout::Workspace;

fn main() {
    FluentApp::new("My App")
        .dark_theme()
        .run(|cx| cx.new(|cx| Workspace::new(cx)));
}

See the examples/ directory for progressively richer starting points.

---

Crates

The workspace is split into five independently versioned and published crates. Depend on as many or as few as your application needs.

Crate	Version	Description
fluent-core		Design tokens: semantic colors, spacing, radii, typography, component geometry defaults, and the reactive Theme global
fluent-primitives		Base interactive widgets — buttons, inputs, dropdowns, comboboxes, checkboxes, avatars, badges, spinners, tooltips, and more
fluent-ribbon		RibbonBar with tabs, groups, large/compact/toggle/stack buttons, contextual tabs, and overflow handling
fluent-layout		Application shell — Workspace, MenuBar, ContextMenu, DockPanel, Pane, PaneGroup, Tree, DataTable, Dialog, Toast, and more
fluent-app		FluentApp builder, frameless title bar, and global initialization of theme, modal, and toast stacks

Dependency graph

fluent-app
  └── fluent-layout
        └── fluent-ribbon
              └── fluent-primitives
                    └── fluent-core

Each layer only depends on layers below it. You can use fluent-primitives standalone if you do not need the ribbon or full application shell.

---

Component Inventory

fluent-core — Tokens & Theme

• Theme global with apply_dark(), apply_light(), toggle() — reactive to all subscribed entities
• ColorScheme — full Fluent 2 semantic token set (surface, stroke, fill, accent, status colors)
• SpacingTokens, RadiiTokens, TypographyTokens, ComponentTokens
• MotionTokens — easing and duration constants for popup and transition animations

fluent-primitives — Base Widgets

Widget	Notes
Button, IconButton, ToggleButton	Accent / Neutral / Subtle / Hyperlink appearances, multiple sizes
TextInput, Textarea, Searchbox	Full GPUI IME, clipboard, and focus integration
Field	Label + description + validation wrapper for any form control
Dropdown, Combobox	Entity-backed, anchored option popover, keyboard navigation
Checkbox, Switch, RadioGroup	—
Tooltip	Hover-triggered; wraps any element
Spinner, ProgressBar	Indeterminate and determinate variants
Avatar, Chip, Badge, Icon, Label, Divider	—

fluent-ribbon — Ribbon Bar

• RibbonBar — tab strip + content row, theme-reactive
• RibbonTabBuilder / RibbonGroupBuilder — declarative construction
• Item types: LargeButton, Button, IconButton, ToggleButton, Stack, Separator
• ContextualTabDef — show/hide tabs based on application state
• Overflow: groups collapse into a More dropdown when width is insufficient

fluent-layout — Shell & Surfaces

Application shell

• Workspace — assembles title bar, menu bar, ribbon, dock panels, pane area, and modal host
• MenuBar — horizontal application menu (File | Edit | View | …) with keyboard navigation and shortcut hints
• DockPanel — resizable, collapsible edge panel (left / right / bottom / top)
• Pane / PaneGroup — content area with optional tab strip; horizontal and vertical splits with draggable dividers
• TabStrip / TabItem

Menus & overlays

• ContextMenu — right-click floating menu with icon gutter, shortcuts, separators, checkboxes, radio items, and cascading submenus
• ModalStack global + ModalHost renderer — click-outside dismiss, multiple ModalSize options
• Dialog — title / body / actions layout with ModalStack integration
• Popover — generic floating content surface
• CommandPalette — Ctrl+K fuzzy-search command launcher

Data & feedback

• Tree — hierarchical selection surface with chevrons, icons, disabled rows, callbacks
• DataTable — dense tabular surface with sortable columns, selection, loading/empty/error states
• Toolbar — compact command strip
• MessageBar — inline info / success / warning / error surface with optional dismiss
• Toast / ToastHost — global notification stack with auto-dismiss and manual dismiss

Settings UI

• SettingsNav — collapsible section sidebar for settings dialogs with active-item accent bar

fluent-app — Entry Point

• FluentApp builder — configures the window and initializes the Theme, ModalStack, and ToastStack globals
• TitleBar — frameless, draggable, with min / max / close controls
• .dark_theme() / .light_theme() startup options

---

Examples

Example	What it shows
hello_world	Minimal FluentApp window — the smallest possible starting point
widgets	Gallery of all fluent-primitives widgets
form	Form layout with Field, validation states, SettingsNav, and a Dialog
demo_app	Full application shell: Workspace, MenuBar, RibbonBar, DockPanel with a Tree, TabStrip, ContextMenu, CommandPalette, and live dark/light theme switching
gallery	Scrollable overview of all framework components in a single window

Run any example from the workspace root:

cargo run -p demo_app

---

Design Principles

1. Token-driven theming — every color, spacing value, radius, and type size flows from fluent-core tokens; no magic constants in widget code.
2. Reactive by construction — entity-backed views subscribe to the Theme global via cx.observe_global::<Theme>() in their constructor; theme changes propagate automatically through framework shells and subscribed application views.
3. Minimal API surface — builder patterns with sane defaults; GPUI internals are not exposed unless there is no other option.
4. Ribbon-first command model — the RibbonBar is the primary command surface; commands are declared and the framework handles layout, overflow, and contextual visibility.
5. Apache-2.0 throughout — every public API and implementation is independently authored on Apache-2.0 foundations, safe for use in proprietary applications.

---

Requirements

Requirement	Version
Rust (MSRV)	1.88
GPUI	0.2.2
Platform	Linux (X11 / Wayland), macOS — Windows support follows GPUI

The GPUI version is deliberately pinned. Upgrades are documented in docs/STATUS.md.

Linux system dependencies

# Debian / Ubuntu
sudo apt-get install libxkbcommon-dev libxkbcommon-x11-dev

---

Building & Testing

# Build everything
cargo build --workspace

# Run all tests
cargo test --workspace

# Lint
cargo clippy --workspace --all-targets -- -D warnings

# Format check
cargo fmt --all --check

---

License

Licensed under the Apache License, Version 2.0.

FluentGUI does not incorporate any GPL-licensed code. The Fluent 2 color token structure was adapted from aernom/fluent-ui-gpui (MIT).