Crate elegance

Expand description

Elegance — opinionated, beautiful widgets for egui.

Elegance is a small companion crate to egui that provides a cohesive design system inspired by modern web UIs: chunky rounded buttons in a handful of accent colors, crisp inputs with a focus ring, pill-shaped status indicators, cards, tabs, segmented buttons, and a matching colour palette. Four palettes ship built-in — two dark (Theme::slate and Theme::charcoal) and two light (Theme::frost and Theme::paper) — paired so you can toggle without a layout shift.

§Getting started

use eframe::egui;
use elegance::{Theme, Button, Card, Accent};

fn main() -> eframe::Result<()> {
    eframe::run_ui_native(
        "elegance demo",
        eframe::NativeOptions::default(),
        |ui, _| {
            Theme::slate().install(ui.ctx());
            egui::CentralPanel::default().show(ui, |ui| {
                Card::new().heading("Hello").show(ui, |ui| {
                    if ui.add(Button::new("Click me").accent(Accent::Blue))
                        .clicked()
                    {
                        println!("clicked!");
                    }
                });
            });
        },
    )
}

§Design

All visuals are driven by a Theme value. Calling Theme::install once at startup configures egui::Style so that built-in widgets (labels, sliders, etc.) inherit the elegance look, and it stores the theme in ctx memory so elegance widgets can pick it up automatically.

Re-exports§

pub use egui;

Modules§

glyphs: Stable codepoints for the icon glyphs bundled in the Elegance Symbols font. All icons are sourced from Lucide and are kept in sync via scripts/update_lucide_glyphs.py. Use these in egui::RichText when you want one of elegance’s icons in your own UI.

Structs§

Accordion: A grouped stack of collapsible items inside one bordered panel.
AccordionItem: A single row in an Accordion. Configure with the builder methods and finish with AccordionItem::show.
AccordionUi: Handle passed to the Accordion::show body closure for declaring items.
Avatar: A circular profile avatar with initials and an optional presence dot.
AvatarGroup: A row of overlapping avatars with an optional +N overflow tile.
Badge: A compact rounded status badge.
BrowserTab: A single tab cell rendered by BrowserTabs.
BrowserTabs: A horizontal strip of browser-style closable tabs.
Button: A coloured, rounded button.
Callout: A full-width inline banner in the elegance style.
Card: A styled card surface.
Checkbox: A styled checkbox.
CollapsingSection: A collapsible content section.
ColorPicker: A click-to-open color picker bound to a Color32.
ContextMenu: A right-click-anchored popup menu attached to a Response.
Drawer: A side-anchored slide-in overlay panel.
FileDropResponse: The result of rendering a FileDropZone.
FileDropZone: A click-and-drop file target.
GaugeZones: Threshold breakpoints driving automatic colouring on a gauge.
Indicator: A small status light.
Knob: Rotary knob bound to a numeric value.
LinearGauge: Horizontal meter with optional threshold bands and labels.
LogBar: An expandable log bar anchored to the bottom of the viewport.
LogEntry: A single log row.
Margin: Re-export of egui::Margin so callers can build per-side padding values (e.g. for Card::padding) without reaching into egui. A value for all four sides of a rectangle, often used to express padding or spacing.
Menu: A click-to-open popup menu anchored below a trigger Response.
MenuBar: A horizontal desktop-style menu bar with click-to-open dropdowns.
MenuBarUi: The handle passed to a MenuBar::show closure for declaring menu triggers. Each call to MenuBarUi::menu paints one trigger and its dropdown. Custom widgets go inline via MenuBarUi::ui or at the right edge via MenuBarUi::trailing.
MenuItem: A single selectable row inside a Menu.
MenuSection: A small uppercase header used to label a group of items inside a Menu popup, ContextMenu, or MenuBar dropdown.
MetricSlider: A single-value slider whose central UI element is the value itself.
Modal: A centered modal dialog.
PairItem: A single item rendered in either column of a Pairing widget.
Pairing: A widget that lets users connect items in two lists with 1:1 pairings, drawn as bezier curves between ports on each node.
Palette: All the colours used by the design system.
PercentSlider: A 0–100% slider whose central UI element is the percentage value itself.
Popover: A click-to-toggle popover anchored to a trigger Response.
ProgressBar: A horizontal determinate progress bar.
ProgressRing: A themed determinate circular progress indicator.
RadialGauge: Half-circle dashboard gauge with an optional needle and value readout.
RangeSlider: A horizontal numeric range slider with two thumbs.
RemovableChip: A bordered inline text input with an × close button, bound to a single String.
RemovableChipResponse: The result of rendering a RemovableChip.
Segment: A single segment inside a SegmentedControl.
SegmentedButton: A toggle button with a built-in LED dot.
SegmentedControl: A row of mutually-exclusive segments sharing a single rounded track.
Select: A styled drop-down select.
Slider: A horizontal numeric slider.
SortableItem: One row in a SortableList.
SortableList: A vertical list of rows that can be reordered by dragging their grips.
SortableStatus: A trailing status pill on a SortableItem.
Spinner: A themed loading spinner.
StatCard: A dashboard stat tile.
StatusPill: A capsule-shaped row of (label, state) status items.
Steps: A stepped progress indicator.
SubMenuItem: A menu row that opens a flyout submenu when hovered.
Switch: A sliding on/off switch bound to a &mut bool.
TabBar: A horizontal tab bar. The active tab is indicated by a focus-accent underline and an inactive tab lights up on hover.
TagInput: A pill-list text input bound to a Vec<String>.
TagInputResponse: The result of rendering a TagInput.
TextArea: A styled multi-line text input.
TextInput: A styled single-line text input.
Theme: The full elegance theme — colours + typography + a handful of shapes.
ThemeSwitcher: A drop-in picker for the four built-in elegance themes.
Toast: A single enqueued notification.
Toasts: Renderer for the enqueued toast stack.
Tooltip: A hover-triggered tooltip attached to a Response.
Typography: Typography settings shared by all widgets.

Enums§

Accent: The six accent colours supported by elegance.
AvatarPresence: Presence-dot state painted at the avatar’s bottom-right corner.
AvatarSize: Diameter preset for an Avatar.
AvatarTone: Background tone for an Avatar’s initials variant.
BadgeTone: Colour tones for a Badge.
BrandLogo: What to paint in the brand’s logo slot, left of the brand label.
BrowserTabsEvent: Events emitted by BrowserTabs for a frame.
BuiltInTheme: One of the four built-in elegance themes, as a typed enum.
ButtonSize: Size presets for buttons.
CalloutTone: Semantic tones for a Callout.
DrawerSide: Which edge of the viewport the drawer slides in from.
FlashKind: Flash outcome. Controls the colour that tints the widget background.
IconTint: How a PairItem’s leading icon is tinted.
IndicatorState: The three visual states of an Indicator.
KnobScale: Value mapping along the arc.
KnobSize: Visual size preset for Knob.
LogKind: How a single log row is styled and prefixed.
PopoverSide: Which side of the trigger the popover opens on.
SegmentDot: Status colour for the optional dot indicator inside a Segment.
SegmentedSize: Size variants for SegmentedControl.
SliderHandle: Visual style of the slider thumb.
StepsStyle: Visual style for a Steps widget.
TooltipSide: Where the tooltip opens relative to its trigger.

Constants§

FLASH_DURATION: The duration of a flash animation, in seconds.

Traits§

IdSalt: The bound on a caller-supplied widget id salt: any Hash + Debug value, such as a string, integer, or tuple.
ResponseCommitExt: Extension trait for reading the commit signal off a value widget’s Response. Import this trait (or use elegance::*) to bring the method into scope.
ResponseFlashExt: Extension trait that lets you trigger a flash directly on an egui::Response. Import this trait (or use elegance::*) to bring the methods into scope.

Functions§

flash_error: Begin an error flash on the widget with the given id. Async counterpart to ResponseFlashExt::flash_error.
flash_success: Begin a success flash on the widget with the given id. Use when you only have the widget id and a Context, e.g. when completing an async callback that returned after the originating Response went out of scope.
request_repaint_at_rate: Request a repaint such that the next paint comes ~1/hz seconds from now, independent of display refresh rate.

Crate elegance

Crate elegance Copy item path

§Getting started

§Design

Re-exports§

Modules§

Structs§

Enums§

Constants§

Traits§

Functions§

Crate elegance