Demos

Demos

Eight runnable demos under crates/yororen-ui-demos/. Each is a workspace member; the root Cargo.toml [workspace] members list is the source of truth for what builds.

Run from the workspace root:

cargo run -p <package-name>

Demo	Path	Package	Best for
counter	crates/yororen-ui-demos/counter/	counter-demo	First-time learners — minimal Yororen UI app
gallery_demo	crates/yororen-ui-demos/gallery_demo/	gallery-demo	Kitchen-sink reference — every component, theme switching, i18n, virtualised list
inputs_demo	crates/yororen-ui-demos/inputs_demo/	inputs-demo	Input-heavy screens — all 7 text inputs + Form
layers_demo	crates/yororen-ui-demos/layers_demo/	layers-demo	The three render pathways + a custom-renderer (Material ripple) example
theme_showcase	crates/yororen-ui-demos/theme_showcase/	theme-showcase-demo	Live theme switching — theme::install re-called per render
variant_showcase	crates/yororen-ui-demos/variant_showcase/	variant-showcase-demo	Visual comparison of ActionVariantKind (Neutral / Primary / Danger)
gallery_xml	crates/yororen-ui-demos/gallery_xml/	gallery-xml-demo	The gallery written with the XML DSL instead of the Rust builder API
showcase_xml	crates/yororen-ui-demos/showcase_xml/	showcase-xml-demo	Smaller XML-DSL smoke test

counter

A minimal counter — single global gpui::Entity<T>, button click handling, cx.notify(). The smallest starter template.

cargo run -p counter-demo

gallery_demo

The kitchen-sink reference: toolbar-driven theme + locale switcher, every component in sections (actions, display, surfaces, inputs, controls, overlays, lists), a 10 000-row virtualised list, and a custom notification host wired to a NotificationCenter.

cargo run -p gallery-demo

inputs_demo

One window with a panel per input component. All seven text inputs, plus a Form panel showing the validated-submit lifecycle.

cargo run -p inputs-demo

layers_demo

Three side-by-side panels showing the same headless::button factory producing three different visuals:

1. Headless only — the caller paints a raw div(). The button is just focus + click.
2. Headless + default renderer — .render(cx) reads the registered TokenButtonRenderer and applies the theme-driven look.
3. Headless + caller custom (Material ripple) — the caller paints its own teal background and a custom RippleElement paints an opaque circle that expands from each click point.

A fourth row exercises the same split on headless::text_input.

cargo run -p layers-demo

theme_showcase

Live theme switching. Four themes cycle on every "Next theme" click — system-light, system-dark, an inline Catppuccin, and an inline Material Rose.

cargo run -p theme-showcase-demo

variant_showcase

Three side-by-side buttons demonstrating how the same headless::button + default_render can pull a different action.<variant>.* slot from the theme JSON. A fourth button shows the apply(div) escape hatch.

cargo run -p variant-showcase-demo

gallery_xml, showcase_xml

The same UI as gallery_demo and theme_showcase, written with the XML DSL (yororen_ui::xml::xml! / xml_file! macros, xml feature). Reference for how to author screens declaratively.

cargo run -p gallery-xml-demo
cargo run -p showcase-xml-demo

Choosing a demo

Your goal	Start here
First time learning Yororen UI	counter
Need a kitchen-sink reference	gallery_demo
Building a form / settings page	inputs_demo
Understanding the three layers / writing a custom renderer	layers_demo
Adding a theme switcher / white-labelling	theme_showcase
Picking the right ActionVariantKind	variant_showcase
Authoring UI in XML instead of Rust builders	gallery_xml

See also

• Quick start
• Recommended practices
• Components
• Widgets