adabraka-ui

A comprehensive, professional UI component library for GPUI, the GPU-accelerated UI framework powering the Zed editor. Inspired by shadcn/ui, adabraka-ui provides 85+ polished, accessible components for building beautiful desktop applications in Rust.

📖 Documentation · 🚀 Getting Started · 📦 Components · 💡 Examples

✨ Features

• 🎨 Complete Theme System - Built-in light/dark themes with semantic color tokens
• 🧩 85+ Components - Comprehensive library covering all UI needs from buttons to data tables
• 📱 Responsive Layout - Flexible layout utilities (VStack, HStack, Grid)
• 🎭 Professional Animations - Smooth transitions with cubic-bezier easing and spring physics
• ✍️ Typography System - Built-in Text component with semantic variants
• 💻 Code Editor - Multi-line editor with syntax highlighting and full keyboard support
• ♿ Accessibility - Full keyboard navigation, ARIA labels, and screen reader support
• 🎯 Type-Safe - Leverages Rust's type system for compile-time guarantees
• 🚀 High Performance - Optimized for GPUI's retained-mode rendering with virtual scrolling
• 📚 Well Documented - Extensive examples and comprehensive API documentation

🎬 Showcase

See adabraka-ui in action in real applications:

Desktop Music Player

A beautiful desktop music player with offline playing capabilities. Features smooth animations, responsive UI, and a polished user experience built entirely with adabraka-ui components.

Project Task Manager

A powerful task management application used to track the development of this UI library. Features drag-and-drop task organization with smooth animations, showcasing the library's advanced capabilities.

🚀 Installation

Note: Currently requires Rust nightly due to GPUI dependencies. Install with: rustup toolchain install nightly

Add adabraka-ui to your Cargo.toml:

[dependencies]
adabraka-ui = "0.3"
gpui = { package = "adabraka-gpui", version = "0.3" }

Build your project with nightly:

cargo +nightly build

What's New in v0.3.3

Latest Release (February 2026)

v0.3.3 - Editor UTF-8 Bug Fix

• Fixed rope byte/char offset mismatch that caused cursor drift and incorrect text placement in files with multi-byte UTF-8 characters. All rope insert/remove operations now correctly convert byte offsets to char indices.

v0.3.2 - Clean Build

• Suppressed all compiler warnings across charts and components for a zero-warning build.

v0.3.1 - Editor Improvements

• Fixed editor cursor positioning with horizontal scroll offset
• Fixed UTF-8 backspace/delete handling in the editor

v0.3.0 - Major Release

Published full adabraka-gpui ecosystem to crates.io, GPUI fork enhancements (inset shadows, letter spacing, squircle corners, text shadows, animation cancellation), 5 new components (Form, InfiniteScroll, SortableList, DataGrid, Animation Builder), comprehensive animation/polish system with 30+ easings, spring physics, gestures, and exit animations.

---

Quick Start

use adabraka_ui::prelude::*;
use gpui::*;

fn main() {
    Application::new().run(|cx| {
        // Initialize the UI library
        adabraka_ui::init(cx);

        // Install a theme
        install_theme(cx, Theme::dark());

        cx.open_window(
            WindowOptions {
                titlebar: Some(TitlebarOptions {
                    title: Some("My App".into()),
                    ..Default::default()
                }),
                ..Default::default()
            },
            |_, cx| cx.new(|_| MyApp::new()),
        ).unwrap();
    });
}

struct MyApp;

impl MyApp {
    fn new() -> Self {
        Self
    }
}

impl Render for MyApp {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        VStack::new()
            .p(px(32.0))
            .gap(px(16.0))
            .child(
                div()
                    .text_size(px(24.0))
                    .font_weight(FontWeight::BOLD)
                    .child("Welcome to adabraka-ui!")
            )
            .child(
                Button::new("get-started", "Get Started")
                    .variant(ButtonVariant::Default)
                    .on_click(|_event, _window, _cx| {
                        println!("Button clicked!");
                    })
            )
    }
}

🎨 Component Customization with Styled Trait

All 54 components implement the Styled trait, giving you complete control over styling!

Full Customization Support

Every component can be customized using GPUI's powerful styling API. Apply any styling method to any component:

Button::new("custom-btn", "Click Me")
    .variant(ButtonVariant::Primary)  // Use built-in variant
    .bg(rgb(0x8b5cf6))                 // Custom background
    .p_8()                              // Custom padding
    .rounded_xl()                       // Custom border radius
    .border_2()                         // Custom border
    .border_color(rgb(0xa78bfa))        // Custom border color
    .shadow_lg()                        // Shadow effect
    .w_full()                           // Full width

Available Styling Methods

Backgrounds & Colors: - .bg(color) - Background color - .text_color(color) - Text color - .border_color(color) - Border color

Spacing: - .p_4(), .p_8() - Padding (all sides) - .px_6(), .py_4() - Padding (horizontal/vertical) - .m_4(), .mx_auto() - Margins

Borders & Radius: - .border_2(), .border_4() - Border width - .rounded_sm(), .rounded_lg(), .rounded_xl() - Border radius - .rounded(px(16.0)) - Custom radius

Sizing: - .w_full(), .h_full() - Full width/height - .w(px(300.0)), .h(px(200.0)) - Custom dimensions - .min_w(), .max_w() - Min/max constraints

Effects: - .shadow_sm(), .shadow_lg() - Shadow effects - .opacity() - Opacity control

And hundreds more! Any GPUI styling method works.

Philosophy: Good Defaults, Complete Control

Following the shadcn/ui philosophy:

Components ship with sensible defaults that you can completely override.

adabraka-ui provides great defaults AND 100% control over every component's styling!

Examples

Every component now has a *_styled_demo.rs example showing full customization capabilities:

cargo +nightly run --example button_styled_demo
cargo +nightly run --example input_styled_demo
cargo +nightly run --example data_table_styled_demo
# ... and 51 more!

Theme System

Overview

adabraka-ui provides a complete theming system with semantic color tokens inspired by shadcn/ui. Themes include both light and dark variants with carefully chosen colors for accessibility and visual hierarchy.

Basic Usage

use adabraka_ui::theme::{install_theme, Theme, use_theme};

// In your app initialization
install_theme(cx, Theme::dark()); // or Theme::light()

// In your render method
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    let theme = use_theme();

    div()
        .bg(theme.tokens.background)
        .text_color(theme.tokens.foreground)
        .child("Themed content")
}

Available Themes

• Theme::light() - Clean light theme
• Theme::dark() - Dark theme with proper contrast

Theme Tokens

The theme system provides semantic color tokens:

// Background colors
background, card, popover, muted

// Text colors
foreground, card_foreground, popover_foreground, muted_foreground

// Interactive colors
primary, primary_foreground, secondary, secondary_foreground
accent, accent_foreground, destructive, destructive_foreground

// UI elements
border, input, ring

// Spacing and sizing
radius_sm, radius_md, radius_lg
font_family, font_mono

Layout Utilities

VStack and HStack

Vertical and horizontal stack layouts with consistent spacing.

// Vertical stack
VStack::new()
    .spacing(px(16.0))  // Gap between children
    .align(Align::Center)  // Cross-axis alignment
    .padding(px(24.0))
    .child(Text::new("Item 1"))
    .child(Text::new("Item 2"))

// Horizontal stack
HStack::new()
    .spacing(px(12.0))
    .justify(Justify::Between)  // Main-axis justification
    .align(Align::Center)
    .child(Button::new("cancel", "Cancel"))
    .child(Button::new("save", "Save").variant(ButtonVariant::Default))

Grid Layout

Grid::new()
    .cols(3)  // 3 columns
    .gap(px(16.0))
    .child(card1)
    .child(card2)
    .child(card3)

Layout Options

• Align: Start, Center, End, Stretch
• Justify: Start, Center, End, Between, Around, Evenly
• Flow: Horizontal, Vertical (for wrapping)

Components

Text Component

The Text component provides consistent typography with built-in theming and font handling.

use adabraka_ui::components::text::*;

// Semantic heading variants
h1("Page Title")
h2("Section Title")
h3("Subsection")
h4("Minor Heading")

// Body text variants
body("Regular paragraph text")
body_large("Larger body text for lead paragraphs")
body_small("Smaller body text")
caption("Small text for captions and metadata")

// Label variants
label("Form Label")
label_small("Compact Label")

// Code/monospace text
code("fn main() { }")
code_small("let x = 42;")

// Muted text (secondary color)
muted("Secondary information")
muted_small("Small secondary text")

// Custom styling
Text::new("Custom text")
    .size(px(18.0))
    .weight(FontWeight::BOLD)
    .color(rgb(0x3b82f6).into())
    .underline()
    .no_wrap()  // Single line
    .truncate()  // Add ellipsis when too long

// Builder pattern with variants
Text::new("Styled text")
    .variant(TextVariant::H2)
    .color(theme.tokens.primary)

Benefits: - ✓ No need to manually apply font_family() on every text element - ✓ Consistent typography across your application - ✓ Easy to change fonts globally by updating the theme - ✓ Semantic variants for proper content hierarchy - ✓ Builder pattern for flexible customization

Buttons

// Basic button
Button::new("click-me", "Click me")
    .on_click(|_event, _window, _cx| {
        println!("Clicked!");
    })

// Styled variants
Button::new("primary", "Primary").variant(ButtonVariant::Default)
Button::new("secondary", "Secondary").variant(ButtonVariant::Secondary)
Button::new("outline", "Outline").variant(ButtonVariant::Outline)
Button::new("ghost", "Ghost").variant(ButtonVariant::Ghost)
Button::new("link", "Link").variant(ButtonVariant::Link)
Button::new("destructive", "Destructive").variant(ButtonVariant::Destructive)

// Sizes
Button::new("small", "Small").size(ButtonSize::Sm)
Button::new("medium", "Medium").size(ButtonSize::Md)  // default
Button::new("large", "Large").size(ButtonSize::Lg)

// States
Button::new("disabled", "Disabled").disabled(true)

// Icon buttons
IconButton::new(IconSource::Named("search".to_string()))
    .size(px(32.0))
    .on_click(handler)

Input Components

Text Input

// Basic text input
let input_state = cx.new(|cx| InputState::new(cx));

Input::new(input_state.clone(), cx)
    .placeholder("Enter text...")
    .variant(InputVariant::Default)
    .size(InputSize::Md)

// Variants
Input::new(input_state, cx)
    .variant(InputVariant::Outline)
    .variant(InputVariant::Ghost)

// Password input with eye icon toggle (fixed in v0.2.2!)
Input::new(password_input, cx)
    .password(true)  // Enables eye icon toggle for show/hide
    .placeholder("Enter password")

// With prefix/suffix
Input::new(input, cx)
    .prefix(div().child("🔍"))
    .suffix(Button::new("clear", "Clear").size(ButtonSize::Sm))

Checkbox

Checkbox::new("checkbox-id")
    .label("Check me")
    .checked(false)
    .on_click(cx.listener(|view, checked, _window, cx| {
        view.is_checked = *checked;
        cx.notify();
    }))

// Sizes
Checkbox::new("small").size(CheckboxSize::Sm)
Checkbox::new("medium").size(CheckboxSize::Md)
Checkbox::new("large").size(CheckboxSize::Lg)

// States
Checkbox::new("disabled").disabled(true)
Checkbox::new("indeterminate").indeterminate(true)

Toggle

Toggle::new("toggle-id")
    .label("Enable feature")
    .checked(true)
    .on_click(cx.listener(|view, checked, _window, cx| {
        view.feature_enabled = *checked;
        cx.notify();
    }))

// Sizes and variants available

Slider

Interactive slider for selecting numeric values with horizontal and vertical orientations:

```rust // Create slider state let slider_state = cx.new(|cx| { let mut state = SliderState::new(cx); state.set_min(0.0, cx); state.set_max(100.0, cx); state.set_value(50.0, cx); state.set_step(1.0, cx); state });

// Horizontal slider (default) Slider::new(slider_state.clone()) .size(SliderSize::Md) .show_value(true) .on_change(|value, _window, _cx| { println!("Value changed: {}", value); })

// Vertical slider Slider::new(slider_state.clone()) .vertical