gpui-patterns

Consolidate reusable GPUI UI patterns with runnable code samples.

62|1|Updated Feb 5, 2026
One-click install
npx skills add https://github.com/zerx-lab/rmx --skill gpui-patterns-zerx-lab
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gpui-patterns
Source: https://github.com/zerx-lab/rmx/tree/main/.opencode/skills/gpui-patterns
Command: npx skills add https://github.com/zerx-lab/rmx --skill gpui-patterns-zerx-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GPUI developers often face fragmented UI patterns, leading to inconsistent interfaces and slower delivery. This Skill provides a curated set of reusable UI patterns for GPUI applications, enabling teams to compose complex components with confidence and consistency.

Core Features & Use Cases

  • Modal/Overlay Pattern: quick, accessible overlays for dialogs and lightboxes.
  • List Pattern: dynamic, data-driven lists with efficient rendering and actions.
  • Form Pattern: structured forms with validation, layout, and feedback.
  • Global State Pattern: shared application state to synchronize components.
  • Parent-Child Communication: event-driven coordination between components.
  • Tab Navigation: tabbed interfaces with clean content switching.
  • Loading State Pattern: asynchronous data loading with clear UX states.
  • Dropdown Pattern: contextual menus and options.
  • Production Component Patterns: reusable, production-ready components.
  • Size System Pattern: responsive sizing for consistent UIs.
  • Focus Management Pattern: keyboard focus handling and accessibility.

Quick Start

Use gpui-patterns to implement a modal overlay, a dynamic list, and a responsive form in your GPUI project.

Frequently Asked Questions about gpui-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible modals and overlays in a Rust GPUI application?

To build modals in GPUI, use the Modal/Overlay pattern which provides accessible overlays for dialogs and lightboxes. It includes ready-to-adapt code samples for immediate integration into your Rust application.

What is the best way to manage shared state across GPUI components?

The best way to manage shared state in GPUI is the Global State pattern, which synchronizes application state across components. It provides structured, reusable guidance for sharing data between different parts of your UI.

How do I implement forms with validation and feedback in GPUI?

To implement forms in GPUI, apply the Form pattern which provides structured layouts with validation and user feedback. It includes runnable code samples to help you build structured forms quickly and consistently.

Does GPUI support tab navigation and keyboard focus management?

Yes, GPUI supports tab navigation and keyboard focus management through dedicated patterns. The Tab Navigation pattern handles clean content switching, while the Focus Management pattern ensures proper keyboard focus handling and accessibility.

How do I handle asynchronous loading states in a GPUI Rust app?

To handle asynchronous loading in a GPUI Rust app, use the Loading State pattern which provides clear UX states for data fetching. It demonstrates how to show appropriate loading indicators while waiting for data.

Can I use these GPUI patterns for production-ready components?

Yes, these GPUI patterns include Production Component Patterns designed for building reusable, production-ready components. They also feature a Size System pattern for responsive sizing to ensure consistent UIs across your application.