Fluix Component

Rust UI components for GPUI

Get Started | Components

46+ Components

Comprehensive library of cross-platform desktop UI components for building feature-rich applications.

High Performance

GPU-accelerated rendering powered by GPUI for smooth user experience.

Type Safe

Leverage Rust's type system for compile-time type safety guarantees.

Themeable

Built-in theme system with flexible theme and style customization support.

Easy to Use

Simple and consistent API design for quick onboarding.

Well Documented

Comprehensive API documentation, tutorials, and example code.

Simple and Intuitive API

Get started with just a few lines of code. Stateless components make it easy to build complex UIs.

Button::new("Click Me")
    .variant(ButtonVariant::Primary)
    .size(ComponentSize::Medium)
    .on_click(|_, _, _| println!("Button clicked!"))

Install Fluix Component

Add the following to your Cargo.toml:

[dependencies]
fluix = "0.1.20"
gpui = "0.2"

Hello World

The following src/main.rs is a simple "Hello, World!" application:

use gpui::*;
use fluix::*;

pub struct HelloWorld;

impl Render for HelloWorld {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        div()
            .v_flex()
            .gap_2()
            .size_full()
            .items_center()
            .justify_center()
            .child("Hello, World!")
            .child(
                Button::new("click_me")
                    .variant(ButtonVariant::Primary)
                    .size(ComponentSize::Medium)
            )
    }
}

fn main() {
    let app = Application::new()
        .with_assets(fluix::Assets);  // ← Important! Load SVG icons

    app.run(move |cx| {
        cx.spawn(async move |cx| {
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|_| HelloWorld)
            })?;

            Ok::<_, anyhow::Error>(())
        })
        .detach();
    });
}

Run the program:

$ cargo run

⚠️ Work in Progress: Fluix is currently in early development, APIs may change.
💡 Important: When using Fluix, you must call .with_assets(fluix::Assets) at application startup to load SVG icon resources!

Documentation & Tutorials

📚 Tutorials

New to Fluix? Follow our step-by-step tutorials:

• Getting Started ⭐ - Your first Fluix app (30 min)
• Working with Components - All components explained (45 min)
• Styling and Theming - Make it beautiful (30 min)

View All Tutorials → | Documentation Index →

📖 API Reference

• Component Reference - Complete API reference for all components
• Icon Reference - All 31 icons with examples and usage guide
• FAQ - Common questions answered
• Asset Loading Guide - How SVG loading works

Components

✅ Implemented Components

Basic Components: Button, Icon
Form Components: TextInput, TextArea, Checkbox, Radio, Select, Combobox
Layout Components: Tabs, Breadcrumb

🔄 In Development

See ROADMAP.md for detailed development progress and component list.

Examples

Run example projects:

# Button component example
cargo run --example button_demo

# Icon component example  
cargo run --example icon_demo

# TextInput and TextArea examples
cargo run --example text_input_demo

# Tabs component example
cargo run --example tabs_demo

View more examples: examples/

Contributing

Contributions are welcome! Please check ROADMAP.md for current progress and components to implement.

Related Links

• GPUI - Underlying UI framework
• API Documentation - Complete API documentation
• Example Code - More examples

About

Fluix is a modern Rust UI component library built on top of GPUI 0.2, designed to simplify the development of cross-platform desktop applications. With GPU-accelerated rendering, a comprehensive component set, and type-safe APIs, Fluix empowers developers to build beautiful and performant desktop applications with ease.

Key Features

• GPU-Accelerated: Built on GPUI for smooth, high-performance rendering
• Type-Safe: Leverages Rust's type system for compile-time safety
• Cross-Platform: Works on macOS, Windows, and Linux
• Comprehensive: 46+ components covering basic UI, forms, and layouts
• Well-Documented: Extensive tutorials, API documentation, and examples
• Themeable: Flexible theming system for customizing application appearance

Why Fluix?

Fluix bridges the gap between low-level GPUI APIs and high-level component development, providing a consistent and intuitive API for building modern desktop applications. Whether you're building a simple utility or a complex application, Fluix provides the building blocks you need.

License

MIT License