tokito_ui — an egui component library for Rust desktop apps

Ready-made egui components — cards, modals, buttons, inputs, menus, toggles — plus light/dark theming and Phosphor icons. A small, opinionated UI component library and design system for Rust GUI apps.

tokito_ui is an egui 0.29 component library: a flat colour-token palette, a theme applier, icon helpers, and a set of composable widget primitives. It is the shared design layer of the Tokito desktop schematic studio, and drops into any egui / eframe application.

Think of it as a lightweight, native-Rust take on a shadcn-style component set for egui — you own the look, the components compose.

It is not a framework. Every component is a free function; there is no global state. Keywords: egui components, egui widgets, egui ui library, Rust GUI, eframe, immediate-mode UI, design system, dark mode.

Gallery

Dark	Light

Browse it live: cargo run --example gallery.

---

Install

[dependencies]
tokito_ui = { git = "https://github.com/VtronTokito/ui" }

tokito_ui pins egui 0.29 and egui-phosphor 0.7.x. Bump all three together (egui-phosphor ≥ 0.8 targets egui ≥ 0.30).

Setup — once, at startup

// 1. fonts — register your text fonts, then the icon font.
let mut fonts = egui::FontDefinitions::default();
// ... insert your proportional + monospace fonts ...
tokito_ui::theme::add_phosphor(&mut fonts);
ctx.set_fonts(fonts);

// 2. theme — apply tokens to the egui context.
let tokens = tokito_ui::Tokens::dark();   // or ::light(), or ::from_name("dark")
tokito_ui::theme::apply(ctx, &tokens);

theme::apply sets the visuals, a named type scale (Heading, h2, h3, Body, Small, …) and spacing. Re-call it whenever the theme changes.

Use

use tokito_ui::components as c;
let t = tokito_ui::Tokens::dark();

c::page_header(ui, &t, "Projects", "Open a recent project.");

let card = c::card(ui, &t, egui::vec2(300.0, 134.0), |ui| {
    ui.label("Arduino Shield v2");
});
if card.clicked() { /* open it */ }

---

Tokens

Tokens is a flat, Copy struct of colours + metrics. Construct from a preset and assign fields to customise:

let mut t = tokito_ui::Tokens::dark();
t.accent = egui::Color32::from_rgb(0xff, 0x6b, 0x35);

It is #[non_exhaustive] — new fields can be added without breaking you. Groups: surfaces (bg, bg_chrome, card, card_hover), borders (border, border_soft, border_strong), text (text, text_2, text_3, text_disabled), accents (accent, accent_ink, accent_soft, accent_2, accent_2_soft), status (danger, warning, success), metrics (radius_*, space_1..5), and a schematic palette for CAD canvas use (canvas_bg, canvas_grid_minor, canvas_grid_major, canvas_frame, sym_ink, sym_body_fill, sym_ink_hover, sym_ink_selected, sym_outline, sym_sel_ring, wire, wire_highlight, wire_selected, label_ink, refdes_ink, pin_ink, pin_hot, selection, preview_bg). Non-canvas consumers can ignore the schematic fields.

Components

All live in tokito_ui::components (aliased c above). Each takes ui: &mut Ui and t: &Tokens.

Component	Signature (abbreviated)	What it is
card	card(ui, t, size, |ui| …) -> Response	Animated, clickable fixed-size container. Compose domain cards from it.
new_tile	new_tile(ui, t, label, sublabel, size) -> Response	A dashed "create new …" tile.
icon_button	icon_button(ui, t, glyph, side) -> Response	A square, frameless icon button.
text_button	text_button(ui, t, kind, label, height) -> Response	A text button — ButtonKind::Primary / Secondary.
link	link(ui, t, label) -> Response	An inline accent-coloured text link.
badge	badge(ui, t, text) -> Response	A small bordered count / status pill.
list_row	list_row(ui, t, job, selected) -> Response	A full-width, left-aligned, hover-highlighted row.
text_input	text_input(ui, t, id_source, &mut String, hint, width) -> Response	A bordered single-line input.
search_field	search_field(ui, t, id_source, &mut String, hint, width) -> Response	text_input with a leading magnifier.
secret_input	secret_input(ui, t, id_source, &mut String, hint, width) -> Response	text_input that masks its content (API keys, secrets).
toggle	toggle(ui, t, &mut bool, label) -> Response	An animated switch with a trailing label.
menu_button	menu_button(ui, t, id_source, glyph, side, |ui| …)	A kebab trigger that opens a popup of menu_items.
menu_item	menu_item(ui, t, glyph, label) -> bool	One row of a menu_button popup.
modal	modal(ctx, t, &mut bool, title, width, |ui| …)	A centred dialog over a dimmed backdrop.
page_header	page_header(ui, t, title, subtitle)	A large title over a muted subtitle.
section_header	section_header(ui, t, title, action) -> Option<Response>	An h2 with an optional right-aligned action link.
nav_item	nav_item(ui, t, label, selected) -> Response	A sidebar nav row — solid accent fill when selected.
checkbox	checkbox(ui, t, &mut bool, label, description) -> Response	A square checkbox with a label and optional description line.
segmented	segmented(ui, t, options, &mut usize, width) -> Response	A horizontal segmented control (mutually-exclusive options).
select	select(ui, t, id_source, current, width, |ui| …) -> Response	A dropdown — trigger box + popup of select_options.
select_option	select_option(ui, t, label, selected) -> bool	One option row inside a select popup.
banner	banner(ui, t, kind, glyph, title, body) -> Response	A status callout — BannerKind::Success / Danger / Warning / Info.
collapsing	collapsing(ui, t, id_source, label, |ui| …)	A collapsible "Advanced options" disclosure section.
cad_tool_button + paint_phosphor_glyph	cad_tool_button(ui, t, side, selected, tooltip, |p, r, ink| …)	A square, toggleable CAD tool-rail button. Caller paints the icon via the closure — pass paint_phosphor_glyph(GLYPH) for Phosphor, or paint hand-drawn schematic strokes.
data_table + sortable_header	data_table(ui, t, id, headers, cols, &mut SortState, n, h, |row, i| …)	A scrollable [egui_extras::TableBuilder] table with click-to-sort column headers.
toast_overlay + ToastStack	toast_overlay(ctx, t, &mut ToastStack)	Transient bottom-right notifications. ToastStack is the owned queue; push from anywhere, paint once per frame.
chip	chip(ui, t, label, selected) -> bool	A small toggleable pill — filter chip / tag. Returns true on click.
content_card	content_card(ui, t, |ui| …)	A bordered, padded panel for grouping content. Grows to fit; not clickable.
inspector_row	inspector_row(ui, t, label, value)	Label-on-left, value-on-right key/value row for inspector / property panels.
list_section_label	list_section_label(ui, t, label, count)	"Symbols (24)" style group label for dense side-panel lists.
empty_state	empty_state(ui, t, message)	Centred "nothing here" placeholder card.

Icons

use tokito_ui::icons;
icons::icon(icons::ph::FOLDER, 16.0, t.text_2);              // RichText
icons::icon_text(icons::ph::PLUS, 14.0, "New", 13.0, t.text); // LayoutJob

icons::ph re-exports the Phosphor Regular glyph constants. Icons render through a dedicated font family so their codepoints never collide with a text font.

---

Design rules

• No global theme. Every component takes &Tokens.
• Primitives, not finished widgets. card is a container; a "project card" is something you compose.
• Hover animates via egui::Context::animate_bool_with_time.
• Stable ids. Anything with internal state (text_input, search_field, menu_button) takes an explicit id_source — never derive a widget id from layout position.

See AGENTS.md for the full contributor guide.

Building the docs

tokito_ui is fully rustdoc-commented:

cargo doc --no-deps --open

License

MIT.