Crate ccf_gpui_widgets 

ccf-gpui-widgets - Reusable GPUI widgets for building desktop applications

This crate provides a collection of ready-to-use UI widgets built on top of GPUI, the GPU-accelerated UI framework from Zed Industries.

Features

• Themeable: All widgets support custom themes via a global context or per-widget override
• Accessible: Keyboard navigation support where applicable
• Event-driven: All widgets emit events for state changes
• Builder pattern: Fluent API for widget configuration

Quick Start

use gpui::*;
use ccf_gpui_widgets::{Theme, widgets::*};

Application::new().run(|cx: &mut App| {
    // Register keybindings for widgets that need them
    register_all_keybindings(cx);

    // Optionally set a global theme
    cx.set_global(Theme::dark());

    cx.open_window(WindowOptions::default(), |_window, cx| {
        cx.new(|cx| {
            // Create your widgets
            let input = cx.new(|cx| TextInput::new(cx).placeholder("Enter text..."));
            let checkbox = cx.new(|cx| Checkbox::new(cx).label("Enable feature"));
            // ...
        })
    }).unwrap();

    cx.activate(true);
});

Available Widgets

Input Widgets

• TextInput - Full-featured text input with cursor, selection, clipboard
• PasswordInput - Text input with visibility toggle
• NumberStepper - Numeric input with +/- buttons
• Slider - Horizontal slider for numeric ranges

Selection Widgets

• Checkbox - Simple checkbox with optional label
• ToggleSwitch - On/off toggle with configurable label position
• Dropdown - Select/dropdown with keyboard navigation
• RadioGroup - Single-selection from multiple choices
• CheckboxGroup - Multi-selection from multiple choices
• ColorSwatch - Color picker with hex input, HSV canvas

Display Widgets

• Tooltip - Hover tooltip
• ProgressBar - Progress indicator (determinate/indeterminate)
• Spinner - Loading spinner in multiple sizes

Layout & Navigation

• Collapsible - Expandable/collapsible section
• TabBar - Tab navigation with keyboard support
• ConfirmationDialog - Modal dialogs (Info/Default/Warning/Danger styles)

Repeatable Widgets

• RepeatableTextInput - Text input with add/remove for lists

File Widgets (requires file-picker feature)

• FilePicker - File selection with native dialog
• DirectoryPicker - Directory selection with native dialog
• RepeatableFilePicker - File picker with add/remove for lists
• RepeatableDirectoryPicker - Directory picker with add/remove for lists

Utilities

• primary_button - Blue/accent styled button
• secondary_button - Gray styled button
• danger_button - Red styled button
• with_focus_actions - Add Tab/Shift-Tab focus navigation to elements

Feature Flags

• file-picker - Enables FilePicker and DirectoryPicker widgets (adds rfd and dirs dependencies)
• full - Enables all optional features

Theming

Widgets use a Theme struct for colors. You can:

1. Set a global theme: cx.set_global(Theme::dark())
2. Use per-widget themes: TextInput::new(cx).theme(my_theme)
3. Use the default (dark theme) if nothing is set

use ccf_gpui_widgets::Theme;

// Built-in themes
let dark = Theme::dark();
let light = Theme::light();

// Customize with builder methods (all ~30 fields have with_* methods)
let custom = Theme::dark()
    .with_accent(0x00ff00)
    .with_primary(0xff0000)
    .with_bg_input(0x333333)
    .with_border_input(0x666666)
    .with_tooltip_bg(0x222222)
    .with_selection(0x264F78);

Re-exports

pub use theme::Theme;

pub use theme::Palette;

pub use widgets::register_all_keybindings;

Modules

prelude

Prelude for convenient imports

theme

Theme system for ccf-gpui-widgets

utils

Utility modules

widgets

GPUI widgets