gpui-patterns

Provide reusable Rust code patterns for GPUI UI elements and interactions.

Updated Mar 6, 2026

Search Tags:#animation #list #gpui #drag and drop #popover #ui patterns

Ready to run

npx skills add https://github.com/onehr/gpui-skills --skill gpui-patterns-onehr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gpui-patterns
Source: https://github.com/onehr/gpui-skills/tree/main/skills/gpui-patterns
Command: npx skills add https://github.com/onehr/gpui-skills --skill gpui-patterns-onehr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides ready-to-use code examples and explanations for implementing common and complex UI patterns within the GPUI framework, saving developers time and effort in building interactive user interfaces.

Core Features & Use Cases

UI Pattern Implementation: Demonstrates how to build popovers, dropdowns, drag-and-drop interfaces, animations, and scrollable lists.
Code Snippets: Offers practical Rust code examples for each pattern.
Use Case: You need to create a custom dropdown menu that appears when a button is clicked and dismisses when the user clicks outside of it. This skill provides the exact code structure for deferred and anchored elements.

Quick Start

Use the gpui-patterns skill to implement a popover menu triggered by a button click.

Frequently Asked Questions about gpui-patterns

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

FAQPage Schema

How do I create a popover menu in GPUI that dismisses when clicking outside?▼

To create a popover menu in GPUI, use deferred and anchored elements to position the dropdown relative to a trigger button. This pattern handles click-outside dismissal automatically, providing the exact code structure for custom dropdown interfaces.

How do I implement drag and drop functionality in a GPUI application?▼

Implement drag and drop in GPUI using reusable code patterns that manage element states during drag operations. This skill provides practical Rust examples for building interactive drag-and-drop interfaces within the GPUI framework.

What is the best way to build scrollable lists with animations in GPUI?▼

Building scrollable lists with animations in GPUI involves applying pre-built UI patterns that handle view rendering and state transitions. These examples demonstrate how to combine list scrolling mechanics with smooth visual animations.

Does GPUI support building complex custom dropdown interfaces without external UI libraries?▼

GPUI supports complex dropdown interfaces natively using built-in elements like deferred and anchored views. This skill provides the exact Rust code snippets needed to construct custom popovers and dropdowns without relying on external UI libraries.

Can I use these GPUI UI patterns to rapidly prototype sophisticated user interfaces?▼

You can use these GPUI UI patterns to rapidly develop sophisticated interfaces by leveraging pre-built solutions for popovers, drag-and-drop, and scrollable lists. The provided best practices and code snippets significantly reduce development time.