Guide Quick Start

Quick start

v0.3 note: Yororen UI v0.3 is a breaking release. The library is now a Cargo workspace with three crates — yororen-ui-core (headless primitives + i18n mechanism), yororen-ui-theme-system (the default light/dark palette), and yororen-ui (a meta-crate that re-exports the other two). Most code samples on this page still work unchanged because the meta-crate re-exports everything. The only new thing you must do is install the theme package explicitly. See MIGRATION.md for the full list of changes.

1) Register components

Some components need one-time registration.

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

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

2) Install the global theme

In v0.3, the default light/dark palette lives in the yororen-ui-theme-system crate. Call theme_system::install once during app bootstrap:

use gpui::App;
use yororen_ui::theme_system;

fn init_theme(cx: &mut App) {
    theme_system::install(cx, cx.window_appearance());
}

If you build your own theme (e.g. a branded fork), depend on yororen-ui-core directly and call:

use yororen_ui::theme::{GlobalTheme, ThemeSet};

cx.set_global(GlobalTheme::new_with_themes(
    cx.window_appearance(),
    ThemeSet::new(your_light_theme).dark(your_dark_theme),
));

See Guide-Theming for custom palettes and Theme::tokens design tokens.

Inside render functions you can access theme colors and tokens via ActiveTheme (cx.theme()).

3) Provide assets (icons)

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

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

If your app has its own assets, use CompositeAssetSource.

The 13 universal icons ship in yororen-ui-core/assets/icons/. For app-specific icons (brand logos, custom glyphs), ship your own SVG and reference it with IconPath::External("icons/your.svg"). See Component-Icon for details.

See Also

• Demos - Complete working examples (now in crates/yororen-ui-demos/)
• Migration guide v0.2 → v0.3