A GTK UI widget reference kit approximated in HTML/CSS, using the Cat Game Research nu-glass design system across lab, bench, dreams, and admin-sec.
Each card shows a rendered widget, its interactive states, and a code snippet. Toggle the light/dark switch in the header to see both themes.
<button class="wg-btn-primary">Primary</button><span class="wg-label">Category Tag</span><input class="wg-entry" type="text" placeholder="Type…"><textarea class="wg-textview">…</textarea><div class="wg-switch" role="switch"></div><label class="wg-checkbox"><input type="checkbox">…</label><label class="wg-radio"><input type="radio">…</label><input class="wg-slider" type="range" min="0" max="100"><div class="wg-progress"><div class="wg-progress-bar" style="width:65%"></div></div><div class="wg-spinner" role="status"></div><div class="wg-combo">…<button class="wg-combo-btn">…</button>…</div><div class="wg-list"><div class="wg-list-item">…</div></div><div class="wg-tabs"><div class="wg-tabs-nav">…</div>…</div><button data-tooltip="Hint">Hover me</button><div class="wg-menu" role="menu">…</div><button data-modal-open="id">Open</button><div class="wg-portal-card">…</div><div class="wg-stat-card cyan">…</div><div class="wg-marquee"><div class="wg-marquee-inner">…</div></div><div class="wg-loading"><div class="wg-spinner"></div>…</div><div class="wg-floating-nav"><button>↑</button>…</div>| System | Time |
|---|---|
| Physics | 2.4 ms |
| Render | 8.1 ms |
<table class="wg-table">…</table>EtymologyFrom Greek aitia, “cause or reason.”
<blockquote class="wg-blockquote">…</blockquote>fn main() { println!("hello"); }<pre class="wg-code"><code>…</code></pre><header class="wg-header">…</header><footer class="wg-footer">…</footer><div class="wg-search"><input class="wg-entry">…</div><div class="wg-chart-card">…<div class="wg-chart-bars">…</div></div><div class="wg-ekg-bar"><div class="wg-ekg-cell"><canvas class="wg-ekg-canvas"></canvas></div></div><nav class="wg-breadcrumb"><a class="wg-breadcrumb-item">…</a></nav><span class="wg-badge cyan"><span class="wg-badge-dot"></span>Active</span><div class="wg-accordion"><div class="wg-accordion-item open">…</div></div><div class="wg-toast info">…<button class="wg-toast-close">×</button></div><div class="wg-layout-split-pane"><div class="wg-split-pane-left">…</div></div><div class="wg-retro-hero"><div class="wg-retro-hero-title">HACK SHACK</div><div class="wg-retro-hero-sub">...</div></div>The nu-glass panel is built from six stacked layers: base, surface, accent line, radial glow, border, and shadow.
Core palette variables and type specimens used across all Widget Gym specimens.
A responsive dashboard with stat cards, a chart area, and a sidebar — composed from existing widgets.
A classic app shell with a fixed sidebar nav and a scrollable content area.
A responsive auto-fill grid of portal cards — useful for dashboards and landing pages.
This is a modal dialog specimen. Click the close button or the overlay to dismiss.