Build beautiful desktop apps with Rust

A comprehensive UI component library for GPUI. 73+ polished, accessible components inspired by shadcn/ui for building professional desktop applications.

73+ Components Complete Theme System Fully Accessible Type-Safe MIT Licensed

What's New in v0.2.2

LATEST

🔐 Password Input Fixed

Eye icon now properly toggles password visibility with immediate state updates.

⌨️ Tab Navigation

Navigate between form inputs using Tab/Shift-Tab keyboard shortcuts.

🗺️ Comprehensive Roadmap

New ROADMAP.md with complete component inventory and development plan.

73+
Components
53+
Examples
100%
Type-Safe
0.2.2
Version

Built with adabraka-ui

Real applications showcasing the power and flexibility of the library

Music Player App

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.

Task Manager App

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 interaction capabilities and animation system.

Why adabraka-ui?

Everything you need to build professional desktop applications

Complete Theme System

Built-in light/dark themes with semantic color tokens. Easily customizable to match your brand.

73+ Components

From basic buttons to complex data tables and code editors. Everything you need in one library.

Accessible by Default

Full keyboard navigation, ARIA labels, and screen reader support built into every component.

Type-Safe

Leverages Rust's type system for compile-time guarantees and better developer experience.

High Performance

Optimized for GPUI's retained-mode rendering with virtual scrolling and efficient updates.

Well Documented

Extensive examples and comprehensive API documentation to get you started quickly.

Installation

Add to your Cargo.toml and start building

Cargo.toml
[dependencies]
adabraka-ui = "0.2.2"
gpui = "0.2.0"

Note: Icons are not bundled with the library. Download your preferred icon set (we recommend Lucide Icons) and configure the icon path as shown in the Quick Start below.

Quick Start

Get up and running in minutes

main.rs
use adabraka_ui::prelude::*;
use gpui::*;
use std::path::PathBuf;

// Define asset source for loading icons and resources
struct Assets {
    base: PathBuf,
}

impl AssetSource for Assets {
    fn load(&self, path: &str) -> Result<Option<std::borrow::Cow<'static, [u8]>>> {
        std::fs::read(self.base.join(path))
            .map(|data| Some(std::borrow::Cow::Owned(data)))
            .map_err(|err| err.into())
    }

    fn list(&self, path: &str) -> Result<Vec<SharedString>> {
        std::fs::read_dir(self.base.join(path))
            .map(|entries| {
                entries.filter_map(|entry| {
                    entry.ok().and_then(|e| {
                        e.file_name().to_str().map(|s| SharedString::from(s))
                    })
                }).collect()
            })
            .map_err(|err| err.into())
    }
}

fn main() {
    Application::new()
        .with_assets(Assets {
            base: PathBuf::from(env!("CARGO_MANIFEST_DIR")),
        })
        .run(|cx| {
            // Initialize the UI library
            adabraka_ui::init(cx);

            // Configure icon base path (for named icons)
            adabraka_ui::set_icon_base_path("assets/icons");

            // Install 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();
        });
}

Component Customization

100% Styled Trait Coverage - Complete Control Over Every Component

All 54 components now implement the Styled trait!

Every component in adabraka-ui now supports GPUI's full styling API, giving you complete control over appearance and layout without wrapper elements or style conflicts.

What the Styled Trait Enables

Direct Styling

Apply styles directly to components without wrapper divs. Chain methods for clean, readable code.

Full GPUI API

Access all GPUI styling methods: backgrounds, borders, spacing, sizing, effects, and more.

Type Safety

Compile-time validation ensures your styles are correct and properties are properly applied.

No Overhead

Zero runtime cost. Styles are applied during rendering with no wrapper elements.

Basic Component Customization
use adabraka_ui::prelude::*;

// Style any component with GPUI's styling methods
Button::new("save-changes", "Save Changes")
    .variant(ButtonVariant::Default)
    .p_4()                    // Padding
    .bg(gpui::blue())        // Background color
    .rounded_lg()              // Rounded corners
    .border_2()                // Border width
    .border_color(gpui::white())  // Border color
    .shadow_md()               // Drop shadow

Input::new()
    .placeholder("Enter email...")
    .w_full()                 // Full width
    .px_4()                   // Horizontal padding
    .py_2()                   // Vertical padding
    .border_1()                // Border
    .rounded_md()

Available Styling Categories

  • Backgrounds (colors, gradients)
  • Spacing (padding, margin, gap)
  • Borders (width, color, radius)
  • Sizing (width, height, min/max)
  • Effects (shadow, opacity, transforms)
  • Typography (font, size, weight)
  • Layout (flex, grid, position)
  • Interactive (hover, active, focus)
Advanced Customization Example
use adabraka_ui::prelude::*;

// Build a fully customized card component
let theme = use_theme();

Card::new()
    // Layout & Sizing
    .w(px(400.0))
    .h(px(250.0))
    .p_6()

    // Backgrounds & Borders
    .bg(theme.tokens.background)
    .border_1()
    .border_color(theme.tokens.border)
    .rounded_xl()

    // Visual Effects
    .shadow_lg()
    .opacity(0.95)

    // Content
    .child(
        VStack::new()
            .gap_4()
            .child(
                h2("Custom Card")
                    .text_xl()
                    .font_weight(FontWeight::BOLD)
                    .text_color(theme.tokens.foreground)
            )
            .child(
                Button::new("action", "Action")
                    .w_full()
                    .bg(theme.tokens.primary)
                    .hover(|style| style.bg(theme.tokens.primary_foreground))
            )
    )

Want to see more examples? Check out the 54 styled component demos in the repository, showcasing every component with full customization examples.

Component Examples

Simple, elegant APIs inspired by modern UI frameworks

Creating a Button
use adabraka_ui::components::button::*;

Button::new("click-me", "Click me")
    .variant(ButtonVariant::Default)
    .size(ButtonSize::Md)
    .on_click(|_event, _window, _cx| {
        println!("Button clicked!");
    })
Building Layouts
use adabraka_ui::layout::*;

VStack::new()
    .p(px(32.0))
    .gap(px(16.0))
    .child(h1("Welcome"))
    .child(
        HStack::new()
            .gap(px(12.0))
            .child(Button::new("cancel", "Cancel"))
            .child(Button::new("save", "Save").variant(ButtonVariant::Default))
    )
Using the Theme System
use adabraka_ui::theme::*;

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

    div()
        .bg(theme.tokens.background)
        .text_color(theme.tokens.foreground)
        .border_1()
        .border_color(theme.tokens.border)
        .child("Themed content")
}
Data Tables
use adabraka_ui::components::table::*;

let columns = vec![
    Column::new("name", "Name").sortable(true),
    Column::new("email", "Email").sortable(true),
    Column::new("role", "Role"),
];

DataTable::new(data, columns, cx)
    .sortable(true)
    .on_row_select(|item, _window, _cx| {
        println!("Selected: {:?}", item);
    })
Using Icons
use adabraka_ui::components::icon::*;

// Named icons (resolved using configured base path)
Icon::new("search")
    .size(px(24.0))
    .color(theme.tokens.primary)

// Using icons in components
Button::new("search", "Search")
    .prefix(IconSource::Named("search".to_string()))

SidebarItem::new("dashboard", "Dashboard")
    .with_icon(IconSource::Named("home".to_string()))

// Custom icon paths
IconSource::FilePath("assets/custom/logo.svg".into())

Icon System

Flexible icon support with your choice of icon set

Important: Icon Assets Not Bundled

To keep the library size small (95% reduction!), adabraka-ui does not bundle icon assets. You need to provide your own icon files.

Why? This allows you to: include only the icons you use, choose your preferred icon set, update icons independently, and keep your bundle optimized.

Setup Steps

  1. Download icons: Get your preferred icon set (Lucide, Heroicons, etc.)
  2. Place in project: Put SVG files in assets/icons/
  3. Configure AssetSource: Implement GPUI's AssetSource trait (see Quick Start example above)
  4. Set icon path: Call set_icon_base_path("assets/icons")

Recommended Icon Sets

Lucide Icons
Beautiful, consistent (3,000+ icons)
Heroicons
Hand-crafted by Tailwind team
Feather Icons
Simply beautiful open source
Phosphor Icons
Flexible icon family

✨ New in v0.1.2: Enhanced Icon Features

Named Icon Sizes

Use semantic size names for consistent icon sizing:

Icon::new("search")
    .size(IconSize::XSmall)   // 12px
    .size(IconSize::Small)    // 14px
    .size(IconSize::Medium)   // 16px (default)
    .size(IconSize::Large)    // 24px
    .size(IconSize::Custom(px(32.0)))  // Custom

// Backward compatible:
Icon::new("search").size(px(20.0))  // Auto-converts

Full GPUI Styling Support

Icons now implement the Styled trait for full styling:

Icon::new("star")
    .size(IconSize::Large)
    .p_2()                    // Padding
    .bg(gpui::blue())         // Background
    .rounded_md()             // Rounded corners
    .border_1()               // Border
    .border_color(gpui::gray())

Icon Rotation

Perfect for loading spinners, directional arrows, and animations:

// Rotate 90 degrees
Icon::new("arrow-right")
    .rotate(Radians::from_degrees(90.0))

// Animated spinner
Icon::new("loader")
    .rotate(Radians::TAU * progress)
PERFORMANCE
No wrapper overhead
COMPATIBILITY
100% backward compatible
FEATURES
Full GPUI patterns

73+ Components

Comprehensive library covering all your UI needs

Input & Forms

Navigation

Data Display

Overlays

Layout