longbridge avatar

Gpui Layout And Style

This covers GPUI's layout and styling system, which uses a flexbox and CSS-like approach through helpers like div(), h_flex(), and v_flex(). You'll reach for this when building UI layouts, handling overflow, or positioning elements in a GPUI application. The framework takes a declarative styling approach that should feel familiar if you've done web development, but it's worth noting that GPUI is a lower-level Rust UI framework, so you're trading some convenience for performance and control. The reference includes specifics on flexbox properties, positioning modes, and how styling composes with the rest of GPUI's element system.

skills.sh installs
327
GitHub stars
12.5K
last updated
Aug 21, 2026

Install

$ npx -y skills add longbridge/gpui-component --skill gpui-layout-and-style --agent claude-code

Installs into .claude/skills of the current project.

Files

This covers GPUI's layout and styling system, which uses a flexbox and CSS-like approach through helpers like div(), h_flex(), and v_flex(). You'll reach for this when building UI layouts, handling overflow, or positioning elements in a GPUI application. The framework takes a declarative styling approach that should feel familiar if you've done web development, but it's worth noting that GPUI is a lower-level Rust UI framework, so you're trading some convenience for performance and control. The reference includes specifics on flexbox properties, positioning modes, and how styling composes with the rest of GPUI's element system.

Browse the repository on GitHub

Sponsors

Details

Repository
github.com/longbridge/gpui-component
Categories
Frontend Development, Code Review & Quality, Finance & Trading
First seen
Jun 3, 2026

More from longbridge/gpui-component

All 16
1syncfusion avatarsyncfusion-angular-schedulersyncfusion/angular-ui-components-skillsImplement and configure Syncfusion Angular Scheduler (Schedule) component for calendar and event management. Use this when building schedulers, calendar systems326skills.sh installs
2syncfusion avatarsyncfusion-angular-ai-assistviewsyncfusion/angular-ui-components-skillsImplement the Syncfusion Angular AI AssistView component. Use this skill when you need to create conversational AI interfaces, integrate AI services, add chat-l324skills.sh installs
3syncfusion avatarsyncfusion-angular-query-buildersyncfusion/angular-ui-components-skillsImplement the Syncfusion Angular Query Builder component for visual query construction, dynamic filtering, and rule management. Use this when building visual fi322skills.sh installs
4syncfusion avatarsyncfusion-angular-treeviewsyncfusion/angular-ui-components-skillsImplement hierarchical tree structures with Syncfusion Angular TreeView component. Use this when building tree-based UIs with features like checkboxes, drag-and322skills.sh installs
5syncfusion avatarsyncfusion-angular-gantt-chartsyncfusion/angular-ui-components-skillsImplement and configure the Syncfusion Angular Gantt Chart component (ejs-gantt, GanttModule). Use this when building Angular applications with Gantt chart func321skills.sh installs
6syncfusion avatarsyncfusion-angular-file-managersyncfusion/angular-ui-components-skillsImplement the Syncfusion Angular File Manager component for file browsing, management, and operations. Use this skill whenever the user needs to create a file m320skills.sh installs