Gtk

Your app is a GTK 4 program. Libadwaita adds a design system on top of GTK instead of replacing it, so a GNOME app draws widgets from both libraries. There is no Adw.Entry, no Adw.DropDown and no Adw.MenuButton. An app that needs one of those uses GTK’s own widget, and the Adwaita stylesheet paints it.

This section holds those widgets. A widget is documented under the library that owns its GType, which is the rule @gjsify/gtk-host already uses to name its tags. So Gtk.Entry is here and Adw.EntryRow is under Adwaita, and the two are different widgets one namespace apart.

Pick a category below. Every widget on those pages runs live in your browser, in a window whose second tab holds the markup that paints it, followed by one window per kind of implementation: Native TypeScript, the @girs program that runs unchanged on GJS, Node, Bun and Deno, with a Blueprint declaration beside it, UI frameworks, the same widget written in Solid, Vue and React through @gjsify/gtk-host, and NativeScript, the port that runs on a phone, whose XML template holds the tree with the TypeScript beside it as the loader. Choose a tab once and every widget block on the site follows it.

Get the widgets

On the desktop the widgets come from the GTK 4 library already installed on the machine. @girs/gtk-4.0 is the type package for it, and nothing else is needed:

TypeScript

import Gtk from 'gi://Gtk?version=4.0';

const entry = new Gtk.Entry({ placeholderText: 'Search files…' });

For the browser, install the Adwaita port and import it once. That registers every element and applies the stylesheet, so from there you write HTML:

Terminal

gjsify install @gjsify/adwaita-web

TypeScript

import '@gjsify/adwaita-web';

HTML

<gtk-entry placeholder="Search files…"></gtk-entry>

One package carries the whole Adwaita-styled widget set, and every element in it is named after the library that owns its GType — so Gtk.Entry is <gtk-entry>, Gtk.MenuButton is <gtk-menu-button>, and Adw.ActionRow is <adw-action-row>. That is the same rule, and the same spelling, as @gjsify/gtk-host’s tags. What makes these two look Adwaita is the stylesheet, not the widget. @gjsify/adwaita-nativescript reads the rule the same way and calls them GtkEntry and GtkMenuButton.

Browse the widgets

Controls The standalone entry and drop down, whose row twins are in the Adwaita boxed lists.

Buttons The plain button, the style classes that shape it, and the menu button that opens a popover.

Where the Adwaita widgets are

Everything libadwaita ships has its own section: boxed lists and their rows, header bars and clamps, split views, view switchers, avatars, banners and dialogs. Start at Adwaita.

The Adwaita Storybook carries both sets in one component browser, so you can change a widget’s properties from a controls panel and watch it update. Run it as a native window with gjsify storybook, or use the version embedded on that page.