Skip to content
GJSify

Widget Gallery

GJSify ships the Adwaita design system to three targets: native GJS (real Libadwaita), the Web (custom elements + CSS), and NativeScript (real native mobile widgets). This gallery documents each Adwaita component once, toolkit-neutrally, then shows how to build it in all three.

The Web and NativeScript ports share their behaviour — toast queueing, row selection and clamping, the alert-dialog response model, breakpoint conditions and the color-scheme observable all live in the headless, platform-free @gjsify/adwaita-core package that both compose. Only the rendering differs, so the ports stay in step with Libadwaita and with each other.

Every page follows the same shape:

  • a neutral description of what the component is and when to use it;
  • a live preview — the real Web component, rendered in your browser and following the light/dark theme, so there are no stale screenshots to maintain;
  • window tabs with the code for each port. Native GJS is the primary implementation and always comes first; Web and NativeScript are additional. Pick a tab once and every snippet on the site follows it.
Boxed Lists Preferences groups and rows — action, switch, entry, combo, spin, expander, button.
Buttons Button content, style classes, split buttons and linked toggle groups.
Layout Clamp, header bar, toolbar view and wrap box — the structural building blocks.
Navigation Split views, navigation stacks, sidebars and bottom sheets.
View Switching View switchers, tab views and carousels over a view stack.
Presentation Avatars, banners, spinners, status pages and window titles.
Feedback Toasts and the about, alert and preferences dialogs.

The three implementations

Section titled “The three implementations”

Native GJS — the primary target

Real Libadwaita widgets through @girs/adw-1. This is the reference: the Web and NativeScript ports track its behaviour and naming. Adw.SwitchRow, Adw.HeaderBar, Adw.NavigationSplitView, …

Web — Adwaita as custom elements

@gjsify/adwaita-web renders the same widgets as light-DOM custom elements styled by SCSS — <adw-switch-row>, <adw-header-bar>. No shadow DOM, no runtime framework; just import it once and write HTML.

NativeScript — real native mobile widgets

@gjsify/adwaita-nativescript reproduces the Adwaita identity with real NativeScript views (not a webview) on Android and iOS — AdwSwitchRow, AdwHeaderBar.

See it live

Section titled “See it live”

The Adwaita Storybook is an interactive component browser: pick a widget, tweak its controls, and watch every port update from the same renderer-free story metadata. Run it natively with gjsify storybook, or try the embedded browser build on that page.