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.
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.
Built with adabraka-ui
Real applications showcasing the power and flexibility of the library
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 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
[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
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.
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)
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
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!");
})
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))
)
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")
}
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);
})
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
Recommended Icon Sets
✨ 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)
73+ Components
Comprehensive library covering all your UI needs
Input & Forms
- Button & IconButton
- Input & Textarea
- Checkbox & Toggle
- Select & SearchInput
- Editor (Code/SQL)
- Radio & RadioGroup
- ColorPicker
- DatePicker & Calendar
- Combobox
Navigation
- Sidebar & MenuBar
- Tabs & Breadcrumbs
- Tree Navigation
- Toolbar & StatusBar
- Command Palette
- Context Menu
Data Display
- Table & DataTable
- Card & Badge
- Accordion
- Progress & Spinner
- Text Component
- Avatar & AvatarGroup
Overlays
- Dialog & Modal
- Popover & Tooltip
- Toast Notifications
- Alert & AlertDialog
Layout
- VStack & HStack
- Grid Layout
- Scrollable
- Resizable Panels