yororen_ui 0.2.0

Reusable UI components and widgets built on top of gpui.
Documentation

Yororen UI

Features

Quick Start

1) Register Components

Some components require one-time registration/initialization. Call component::init during app startup:

use gpui::App;
use yororen_ui::component;

fn init_ui(cx: &mut App) {
    component::init(cx);
}

2) Install the Global Theme

Yororen UI provides a GlobalTheme that selects light/dark palettes based on WindowAppearance.

use gpui::App;
use yororen_ui::theme::GlobalTheme;

fn init_theme(cx: &mut App) {
    cx.set_global(GlobalTheme::new(cx.window_appearance()));
}

Inside render functions you can access theme colors via ActiveTheme:

use gpui::{Render, div};
use yororen_ui::theme::ActiveTheme;

// in render(..., cx: &mut gpui::Context<Self>)
let theme = cx.theme();
let _ = div().bg(theme.surface.base).text_color(theme.content.primary);

2.5) Install i18n (Locale + RTL)

Yororen UI ships with an embedded JSON translation loader under locales/*.json. Initialize I18n during app startup:

use gpui::App;
use yororen_ui::i18n::{I18n, Locale};

fn init_i18n(cx: &mut App) {
    // Load all embedded locales and pick a default.
    cx.set_global(I18n::with_embedded(Locale::new("en").unwrap()));
}

To preview RTL, switch the locale:

cx.set_global(I18n::with_embedded(Locale::new("ar").unwrap()));

3) Provide Assets (Icons)

This crate embeds its icons under assets/icons/** and exposes them as a gpui::AssetSource (yororen_ui::assets::UiAsset).

If your app only needs Yororen UI's icons, you can install them directly:

use gpui::Application;
use yororen_ui::assets::UiAsset;

let app = Application::new().with_assets(UiAsset);

If your app has its own assets too, compose asset sources so both sets are available. Yororen UI includes a small helper CompositeAssetSource:

use gpui::Application;
use yororen_ui::assets::{CompositeAssetSource, UiAsset};

// `MyAsset` is your own AssetSource implementation
let app = Application::new().with_assets(CompositeAssetSource::new(MyAsset, UiAsset));

Important: Your primary AssetSource should return Ok(None) when a path doesn't exist. If it returns an error on missing paths, it can prevent fallback to UiAsset.

Demo Applications

We provide four official demo applications to help you get started:

Demo Description Run Command
Counter Minimal counter app - perfect for learning basics cd demo/counter && cargo run
TodoList Todo app template - ideal for building full apps cd demo/todolist && cargo run
File Browser File browser with tree structure cd demo/file_browser && cargo run
Toast Notification Toast notification showcase cd demo/toast_notification && cargo run

Counter

A minimal counter application demonstrating the most fundamental Yororen UI concepts.

Key Features:

  • Simple global state management (Arc<Mutex<T>>)
  • Button click event handling (on_click)
  • Reactive UI updates (cx.notify())

Best For: Developers new to Yororen UI as their first learning example.

TodoList

A todo list application template demonstrating standard patterns and best practices for building complete Yororen UI applications.

Key Features:

  • Application bootstrap pattern
  • Modular architecture (state, components, models)
  • Global state management
  • CRUD operations (create, read, update, delete todo items)

Best For: Developers building production applications, serving as a starter template.

File Browser

A fully functional file browser demo showing how to render and interact with complex hierarchical data structures.

Key Features:

  • Directory tree (Tree + TreeItem): Display file system hierarchy
  • Icons: File and folder icon display
  • Empty state: Friendly message when no content
  • Context menu: Right-click menu for copy/paste operations

Best For: Scenarios requiring tree structures, file managers, or any hierarchical data display.

Toast Notification

Demonstrates the Toast notification component with various styles and usage patterns.

Key Features:

  • Multiple Toast types: Success, Warning, Error, Info, Neutral
  • Notification queue management (NotificationCenter)
  • Interactive notifications (with action buttons)
  • Custom notification content
  • Different dismissal strategies (auto-dismiss/manual)

Best For: Applications that need to provide immediate feedback to users.

Built with Yororen UI

Projects and applications built using Yororen UI.

Yororen Accelerator

A network acceleration tool with native-transparent TCP forwarding + relay passthrough, built with Yororen UI.

Key Highlights:

  • Complex dashboard with real-time statistics
  • Custom window chrome with native-like experience
  • Rich data tables and virtualized lists
  • Server management and configuration UI

What's Inside

Modules

Component Overview

Icons

The component icon API uses strongly-typed names:

use yororen_ui::component::{icon, IconName};

let _ = icon(IconName::Minecraft);

Icon paths map to embedded SVG assets like icons/minecraft.svg.

Requirements

Installation

From crates.io (recommended)

[dependencies]
yororen_ui = "0.2"

From GitHub (latest development)

[dependencies]
yororen_ui = { git = "https://github.com/MeowLynxSea/yororen-ui.git", tag = "v0.2.0" }

From a local path (development)

[dependencies]
yororen_ui = { path = "../yororen-ui" }

Dependencies

gpui-ce is distributed via crates.io with semantic versioning. Make sure your application uses a compatible version:

[dependencies]
gpui = { package = "gpui-ce", version = "0.3" }

In this repository, gpui-ce is specified in Cargo.toml.

License

See NOTICE for attribution details.

Contributing

Issues and PRs are welcome.

When changing visuals:

Wiki

See Yororen UI Wiki for detailed documentation, guides, and component references.

Star History

Star History Chart