GPUI Component Library
FreeStreamline UI development with GPUI components.
Free · Opens the source repo
What GPUI Component Library does
The GPUI Component Library provides a comprehensive set of UI components designed specifically for GPUI applications. It includes essential elements such as buttons, inputs, dialogs, and navigation components, making it easier for developers to create user interfaces quickly and efficiently. The library supports both stateful and stateless components, allowing for flexible usage depending on the application needs.
To get started, developers must initialize the library with gpui_component::init(cx) in their application’s main function. This setup is crucial as it ensures that the components are ready to be used throughout the application. The library features a variety of components categorized into input forms, display feedback, overlays, navigation, data display, and charts, each with its own API documentation accessible through Markdown files. This structure allows developers to find the right component for their specific UI requirements easily.
The GPUI Component Library is particularly beneficial for those building applications that require a consistent and cohesive user interface. By utilizing the pre-defined components, developers can save time on design and implementation, allowing them to focus on functionality and user experience. The theming capabilities also enable customization of the UI to match the branding or aesthetic preferences of the application.
Overall, the GPUI Component Library is an essential tool for developers looking to enhance their UI development process with a robust set of components tailored for GPUI applications.
When to use it
Use this skill when developing GPUI applications that require consistent UI components and theming.
When not to use it
This skill may not be suitable for applications that do not utilize GPUI or require highly custom UI components outside the provided library.
What you can build with it
Building a Login Form
Use the Input and Button components to create a user-friendly login form with validation.
Creating a Dashboard
Utilize the DataTable and Chart components to display analytics and visual data in a cohesive layout.
Implementing Navigation Menus
Leverage the Sidebar and Tabs components to create an intuitive navigation structure for your application.
How to install GPUI Component Library
View source1. Install with the skills CLI
npx skills add longbridge/gpui-component/gpui-component --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by longbridgeDocumentation
- Full reference: fetch
https://longbridge.github.io/gpui-component/llms-full.txt - Per-component API: fetch
https://longbridge.github.io/gpui-component/docs/components/{name}.md- e.g.
button.md,input.md,select.md,dialog.md,data-table.md
- e.g.
- Any site page can be fetched as Markdown by appending
.mdto the URL
Quick Reference
Setup — always required:
gpui_component::init(cx); // in app.run(), must be first
Root::new(view, window, cx) // first-level view in every window
Stateless — use directly in render:
Button::new("id").primary().label("OK").on_click(|_, _, _| {})
Stateful — hold Entity<State> in struct, pass ref in render:
// in new(): let input = cx.new(|cx| InputState::new(window, cx));
// in render: Input::new(&self.input)
Sizes: .xsmall() .small() .medium() (default) .large()
Theme: cx.theme().primary · .background · .foreground · .border · .muted
Component Catalog
When you need a component, find it here. For full API, fetch its .md doc.
Input & Form
| Component | Import | Notes |
|---|---|---|
Input | input::{Input, InputState} | Stateful. Text, password, mask, validation |
NumberInput | number_input::{NumberInput, NumberInputState} | Stateful. Numeric with step |
OtpInput | otp_input::{OtpInput, OtpInputState} | Stateful. One-time password |
Select | select::{Select, SelectState} | Stateful. Dropdown picker |
Combobox | combobox::{Combobox, ComboboxState} | Stateful. Searchable select |
Checkbox | checkbox::Checkbox | Stateless. `on_click( |
Switch | switch::Switch | Stateless. Toggle |
Radio | radio::{Radio, RadioGroup} | Stateless. |
Slider | slider::{Slider, SliderState} | Stateful. |
Toggle | toggle::Toggle | Stateless. |
Rating | rating::Rating | Stateless. |
Stepper | stepper::Stepper | Stateless. Increment/decrement |
ColorPicker | color_picker::{ColorPicker, ColorPickerState} | Stateful. |
DatePicker | time::date_picker::{DatePicker, DatePickerState} | Stateful. |
Form | form::{v_form, h_form, field} | Layout container for form fields |
Display & Feedback
| Component | Import | Notes |
|---|---|---|
Button | button::{Button, ButtonGroup} | Stateless. Primary UI action |
Icon | {Icon, IconName} | Stateless. Lucide icons |
Badge | badge::Badge | Stateless. |
Tag | tag::Tag | Stateless. Closable tags |
Avatar | avatar::Avatar | Stateless. |
Label | label::Label | Stateless. Form label |
Kbd | kbd::Kbd | Stateless. Keyboard key display |
Alert | alert::Alert | Stateless. Info/success/warning/error |
Spinner | spinner::Spinner | Stateless. Loading indicator |
Skeleton | skeleton::Skeleton | Stateless. Loading placeholder |
Progress | progress::{ProgressBar, ProgressCircle} | Stateless. |
Tooltip | tooltip::Tooltip | Via .tooltip() on elements |
HoverCard | hover_card::{HoverCard, HoverCardState} | Stateful. |
Image | image::Image | Stateless. |
Clipboard | clipboard::Clipboard | Stateless. Copy button |
Overlay & Popups
| Component | Import | Notes |
|---|---|---|
Dialog | dialog::Dialog + WindowExt | Via window.open_modal(...) |
AlertDialog | WindowExt | Via window.open_alert_dialog(...) |
Sheet | sheet::Sheet + WindowExt | Side panel, via window.open_sheet(...) |
Notification | notification::Notification + WindowExt | Via window.push_notification(...) |
Popover | popover::Popover | Floating overlay |
Menu | menu::{PopupMenu, DropdownMenu} | Context menus |
DropdownButton | button::DropdownButton | Button with dropdown menu |
Navigation & Layout
| Component | Import | Notes |
|---|---|---|
Tabs / TabBar | tab::{Tab, TabBar} | Tabbed interface |
Sidebar | sidebar::{Sidebar, SidebarMenu, ...} | App navigation panel |
TitleBar | title_bar::TitleBar | Window title bar |
Breadcrumb | breadcrumb::Breadcrumb | Navigation breadcrumb |
Pagination | pagination::Pagination | Page navigation |
Accordion | accordion::Accordion | Collapsible sections |
Collapsible | collapsible::Collapsible | Single collapsible |
GroupBox | group_box::GroupBox | Labeled container |
Resizable | resizable::Resizable | Draggable split panes |
Scrollable | scroll::Scrollbar | Custom scrollbar |
FocusTrap | focus_trap::FocusTrap | Keyboard trap for modals |
Data Display
| Component | Import | Notes |
|---|---|---|
DataTable | table::{DataTable, TableState, TableDelegate} | Stateful. Full-featured table |
Table | table::{Table, ...} | Simpler table |
VirtualList | {v_virtual_list, h_virtual_list} | High-perf large lists |
List | list::{List, ListState, ListDelegate} | Stateful. Searchable list |
Tree | tree::{Tree, TreeState, TreeDelegate} | Stateful. Hierarchy |
DescriptionList | description_list::DescriptionList | Key-value pairs |
Settings | settings::Settings | Settings panel |
Charts
| Component | Import | Notes |
|---|---|---|
Chart | chart::Chart | Bar, line, area, pie charts |
Plot | plot::Plot | #[derive(IntoPlot)] for data |
Reference Files
- usage.md — setup patterns, component types, common examples
- style-guide.md — code style for contributors
Frequently asked questions about GPUI Component Library
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.