Components

Every one of them, and everything on these pages is read out of the headers rather than written beside them: the summaries, the signatures and the options tables come from gbui::meta, which tools/generate_meta.py produces from include/gbui/widgets/*.hpp. A component that gained an option this morning has it here this afternoon, and one that never existed cannot appear at all.

Every component has a Run button beside it — the same WebAssembly module the demos use, downloaded once for the page and not before you ask. Components that are one idea share a page, because the header they are declared in says they are: colorField and colorPicker are the same control with and without its input, and a reader who came looking for either wants both. They run side by side there, one example each, which is the comparison the shared page is for.

75 components on 60 pages

Elements

• AvatarA person, as a small round picture — or as their initials when there is none.
• BadgeA pill — a branch name, a counter, a status chip.
• BannerA message that stays, in the flow, where the thing it is about is.
• BreadcrumbsWhere you are, and every step back to the top.
• ButtonA button, in the four variants the design system has.
• CheckboxA checkbox.
• ChipA pill you can press, or take off.
• FieldA control with its label, its help and its error, laid out as one thing.
• HyperlinkA hyperlink.
• IconOne icon from the built-in Lucide set.
• ImageA picture in a box — HTML's `<img>`, with the parts of it that are a toolkit's business.
• KbdA key, drawn as a key.
• LabelA caption for a control.
• PaginationWhich page you are on, and the ones you can reach from here.
• ProgressBarA progress bar, determinate or not.
• RadioOne option of a group.
• SegmentedA row of two to five choices, all of them on screen at once.
• SelectA closed box that opens a list, and — with `filter` on — a combobox.
• SkeletonThe shape of content that has not arrived, in place of it.
• SliderA single-value slider.
• SpacingThe two nodes that exist to take up room, or to refuse to.divider · spacer
• SpinnerA circle that turns while something is happening.
• TextRuns of text, and the two semantic shorthands over them.text · emphasis · richText · sectionHeading · strong
• TextInputA single-line input, and a type that says what it accepts.
• TextareaA multi-line plain text box.
• ToggleA switch.

Containers

• AccordionSections that open one at a time, or several.
• BoxThe general container, the way `<div>` is one.
• CarouselA strip of slides, one screenful at a time.
• CompareTwo things in the same rectangle, with a handle that says how much of each.
• GalleryOne picture at a time, out of a set, with the rest along the bottom.
• ListRowA row of a list: the sidebar's branches, the commit list, the changed files.
• MarqueeA strip whose contents slide past and come round again.
• PanelA surface with a border and a radius — a card, a dialog body, a docked pane.
• ScrollA scroll container.scrollArea · scrollbar
• SplitPaneTwo panes and a divider the reader can drag.
• TableA table: columns that agree, a header that stays, and rows that virtualise.
• TabsA strip of tabs.tabs · tabPanels
• ToolbarA horizontal bar of actions.
• TreeViewAn expandable hierarchy: a branch sidebar, a file tree, an outline.
• VirtualListA list that builds only what is on screen.

Overlays

• ContextMenuA menu, and the same menu at a point rather than under a control.contextMenu · menu
• DrawerA panel that comes in from an edge.
• MenuThe rows inside a popover.menuItem · menuSeparator
• ModalA modal dialog, with a backdrop and a header you can drag it by.modal · modalActions
• PopoverAn empty floating surface the caller fills.
• ToastShort-lived messages, stacked in a corner and gone on their own.
• TooltipA tooltip, shown while its anchor is hovered.

Components

• ColorPickerA colour picker: a saturation/value square, a hue rail and an alpha rail.colorPicker · colorField
• PickersA calendar: a month of days, walked with the pointer or the keyboard.dateField · datePicker · dateTimeField · dateTimePicker · timePicker
• RichEditorA rich text editor: blocks of text, marks over ranges, and a toolbar.

Charts

• BarChartCharts: a scale, its ticks, and a line or area drawn from data.
• CandlestickChartCharts: a scale, its ticks, and a line or area drawn from data.
• ChartBrushCharts: a scale, its ticks, and a line or area drawn from data.
• ChartToolbarCharts: a scale, its ticks, and a line or area drawn from data.
• DonutChartCharts: a scale, its ticks, and a line or area drawn from data.
• HeatmapCharts: a scale, its ticks, and a line or area drawn from data.
• LineChartCharts: a scale, its ticks, and a line or area drawn from data.
• RadarChartCharts: a scale, its ticks, and a line or area drawn from data.
• ScatterChartCharts: a scale, its ticks, and a line or area drawn from data.

What a component is

A function that takes a Ui& and an options struct. There is no base class, nothing to inherit and nothing to register:

NodeId    thing(Ui&, args…);   // a leaf: builds and returns
Ui::Scope thing(Ui&, args…);   // a container: the caller fills it

The name is the thing it makes, either way; what separates the two is the return type. A leaf hands back the node it built and is finished. A container hands back a scope, and everything built until that scope dies is inside it.

The interactive ones take an Interaction as well, and all of them share one shape — the component draws the value it is handed and reports what the user did with it:

if (checkbox(ui, input, "settings.tags", value, {.label = "Show tags"}))
    value = !value;

It never writes to your model. That is what makes undo, validation and "are you sure?" possible without the toolkit knowing about any of them, and it is why every one of these examples has a variable behind it rather than a component that remembers.

The examples themselves are the one part written by hand, in demos/src/catalog/, because C++ has no reflection and a table of options cannot be turned back into a call. gbui_demo --coverage fails the build when a component in the metadata has no example, which is what keeps the two halves honest.

Writing a component walks through building one of your own; it is the same exercise as every page above.