<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>adabraka-ui - Professional UI Components for GPUI</title>
<meta name="description" content="A comprehensive, professional UI component library for GPUI. 85+ polished components for building beautiful desktop applications in Rust.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #ffffff;
--bg-secondary: #fafafa;
--border: #e5e5e5;
--text: #171717;
--text-secondary: #737373;
--text-muted: #a3a3a3;
--accent: #18181b;
--accent-hover: #27272a;
--code-bg: #fafafa;
--sidebar-width: 260px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0a0a0a;
--bg-secondary: #18181b;
--border: #27272a;
--text: #fafafa;
--text-secondary: #a3a3a3;
--text-muted: #737373;
--accent: #fafafa;
--accent-hover: #e5e5e5;
--code-bg: #18181b;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: var(--sidebar-width);
background: var(--bg);
border-right: 1px solid var(--border);
padding: 2rem 0;
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 100;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
.logo {
padding: 0 1.5rem;
margin-bottom: 2rem;
}
.logo h1 {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.logo p {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.nav-section {
margin-bottom: 1.5rem;
}
.nav-section-title {
padding: 0 1.5rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.nav-links {
list-style: none;
}
.nav-links a {
display: block;
padding: 0.5rem 1.5rem;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
transition: all 0.2s;
border-left: 2px solid transparent;
}
.nav-links a:hover {
color: var(--text);
background: var(--bg-secondary);
}
.nav-links a.active {
color: var(--text);
background: var(--bg-secondary);
border-left-color: var(--accent);
font-weight: 500;
}
.sidebar-footer {
padding: 0 1.5rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.sidebar-footer a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--accent);
color: var(--bg);
text-decoration: none;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s;
width: 100%;
justify-content: center;
}
.sidebar-footer a:hover {
background: var(--accent-hover);
}
.support-btn {
margin-top: 0.75rem;
opacity: 0.9;
}
.support-btn:hover {
opacity: 1;
}
.main {
margin-left: var(--sidebar-width);
flex: 1;
padding: 3rem;
max-width: 1200px;
}
.hero {
margin-bottom: 4rem;
}
.hero h1 {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 1rem;
line-height: 1.1;
}
.hero p {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 600px;
margin-bottom: 2rem;
}
.badges {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.badge {
display: inline-flex;
align-items: center;
padding: 0.375rem 0.75rem;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 0.375rem;
font-size: 0.8125rem;
color: var(--text-secondary);
}
.showcase {
margin-bottom: 4rem;
}
.section-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.section-subtitle {
color: var(--text-secondary);
margin-bottom: 2rem;
}
.showcase-grid {
display: grid;
gap: 2rem;
}
.showcase-item {
border: 1px solid var(--border);
border-radius: 0.5rem;
overflow: hidden;
background: var(--bg-secondary);
}
.showcase-image {
width: 100%;
height: auto;
display: block;
border-bottom: 1px solid var(--border);
}
.showcase-content {
padding: 1.5rem;
}
.showcase-content h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.showcase-content p {
color: var(--text-secondary);
font-size: 0.9375rem;
}
.features {
margin-bottom: 4rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.feature {
padding: 1.5rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: var(--bg-secondary);
}
.feature h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.feature p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
}
.code-section {
margin-bottom: 4rem;
}
.code-block {
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.code-block pre {
margin: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 0.8125rem;
line-height: 1.7;
color: var(--text);
}
.code-title {
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-secondary);
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
padding: 2rem;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 0.5rem;
}
.stat {
text-align: center;
}
.stat-number {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.03em;
}
.stat-label {
font-size: 0.875rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.components-list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem;
}
.components-list li {
padding: 0.75rem 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 0.375rem;
font-size: 0.875rem;
transition: all 0.2s;
}
.components-list li:hover {
border-color: var(--accent);
}
.components-list li::before {
content: '→';
margin-right: 0.5rem;
color: var(--text-muted);
}
.footer {
margin-top: 6rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
color: var(--text-secondary);
font-size: 0.875rem;
}
.footer-links {
display: flex;
gap: 1.5rem;
margin-bottom: 1rem;
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
}
.footer-links a:hover {
color: var(--text);
}
@media (max-width: 768px) {
.sidebar {
display: none;
}
.main {
margin-left: 0;
padding: 2rem 1.5rem;
}
.hero h1 {
font-size: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
}
}
.keyword { color: #d73a49; }
.string { color: #032f62; }
.function { color: #6f42c1; }
.comment { color: #6a737d; }
.type { color: #005cc5; }
@media (prefers-color-scheme: dark) {
.keyword { color: #f97583; }
.string { color: #9ecbff; }
.function { color: #b392f0; }
.comment { color: #8b949e; }
.type { color: #79c0ff; }
}
</style>
</head>
<body>
<aside class="sidebar">
<div class="logo">
<h1>adabraka-ui</h1>
<p>GPUI Components</p>
</div>
<nav>
<div class="nav-section">
<div class="nav-section-title">Getting Started</div>
<ul class="nav-links">
<li><a href="#overview" class="active">Overview</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#quick-start">Quick Start</a></li>
<li><a href="#customization">Component Customization</a></li>
</ul>
</div>
<div class="nav-section">
<div class="nav-section-title">Examples</div>
<ul class="nav-links">
<li><a href="#showcase">App Showcase</a></li>
<li><a href="#components">Components</a></li>
<li><a href="#code-examples">Code Examples</a></li>
</ul>
</div>
<div class="nav-section">
<div class="nav-section-title">Resources</div>
<ul class="nav-links">
<li><a href="https://docs.rs/adabraka-ui" target="_blank">API Docs</a></li>
<li><a href="https://github.com/Augani/adabraka-ui" target="_blank">GitHub</a></li>
<li><a href="https://github.com/Augani/adabraka-ui/blob/main/CONTRIBUTING.md" target="_blank">Contributing</a></li>
</ul>
</div>
</nav>
<div class="sidebar-footer">
<a href="https://github.com/Augani/adabraka-ui" target="_blank">
<span>View on GitHub</span>
</a>
</div>
</aside>
<main class="main">
<section id="overview" class="hero">
<h1>Build beautiful desktop apps with Rust</h1>
<p>
A comprehensive UI component library for GPUI. 85+ polished, accessible components
inspired by shadcn/ui for building professional desktop applications.
</p>
<div class="badges">
<span class="badge">85+ Components</span>
<span class="badge">Complete Theme System</span>
<span class="badge">Fully Accessible</span>
<span class="badge">Type-Safe</span>
<span class="badge">MIT Licensed</span>
</div>
</section>
<div style="background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg) 100%); border: 2px solid var(--accent); border-radius: 0.75rem; padding: 2rem; margin-bottom: 3rem;">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
<span style="font-size: 2rem;">✨</span>
<h2 style="font-size: 1.25rem; font-weight: 700; margin: 0;">What's New in v0.3.4</h2>
<span style="background: var(--accent); color: var(--bg); padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600;">LATEST</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1.5rem;">
<div>
<h3 style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">docs.rs Fix (v0.3.4)</h3>
<p style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; margin: 0;">Fixed docs.rs build failure. Added all-features metadata for reliable documentation generation.</p>
</div>
<div>
<h3 style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">Editor UTF-8 Fix (v0.3.3)</h3>
<p style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; margin: 0;">Fixed rope byte/char offset mismatch causing cursor drift in multi-byte UTF-8 files.</p>
</div>
<div>
<h3 style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">Editor & Build (v0.3.1–0.3.2)</h3>
<p style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; margin: 0;">Cursor scroll fix, UTF-8 backspace/delete, zero compiler warnings across all components.</p>
</div>
<div>
<h3 style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">crates.io & More (v0.3.0)</h3>
<p style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; margin: 0;">Full ecosystem published. GPUI fork enhancements, 5 new components, 30+ animation easings.</p>
</div>
</div>
</div>
<div class="stats">
<div class="stat">
<div class="stat-number">85+</div>
<div class="stat-label">Components</div>
</div>
<div class="stat">
<div class="stat-number">60+</div>
<div class="stat-label">Examples</div>
</div>
<div class="stat">
<div class="stat-number">100%</div>
<div class="stat-label">Type-Safe</div>
</div>
<div class="stat">
<div class="stat-number">0.3.4</div>
<div class="stat-label">Version</div>
</div>
</div>
<section id="showcase" class="showcase">
<h2 class="section-title">Built with adabraka-ui</h2>
<p class="section-subtitle">Real applications showcasing the power and flexibility of the library</p>
<div class="showcase-grid">
<div class="showcase-item">
<img src="assets/images/music-player.png" alt="Music Player App" class="showcase-image">
<div class="showcase-content">
<h3>Desktop Music Player</h3>
<p>
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.
</p>
</div>
</div>
<div class="showcase-item">
<img src="assets/images/task-manager.png" alt="Task Manager App" class="showcase-image">
<div class="showcase-content">
<h3>Project Task Manager</h3>
<p>
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.
</p>
</div>
</div>
</div>
</section>
<section class="features">
<h2 class="section-title">Why adabraka-ui?</h2>
<p class="section-subtitle">Everything you need to build professional desktop applications</p>
<div class="features-grid">
<div class="feature">
<h3>Complete Theme System</h3>
<p>Built-in light/dark themes with semantic color tokens. Easily customizable to match your brand.</p>
</div>
<div class="feature">
<h3>85+ Components</h3>
<p>From basic buttons to complex data tables, media players, and code editors. Everything you need in one library.</p>
</div>
<div class="feature">
<h3>Accessible by Default</h3>
<p>Full keyboard navigation, ARIA labels, and screen reader support built into every component.</p>
</div>
<div class="feature">
<h3>Type-Safe</h3>
<p>Leverages Rust's type system for compile-time guarantees and better developer experience.</p>
</div>
<div class="feature">
<h3>High Performance</h3>
<p>Optimized for GPUI's retained-mode rendering with virtual scrolling and efficient updates.</p>
</div>
<div class="feature">
<h3>Well Documented</h3>
<p>Extensive examples and comprehensive API documentation to get you started quickly.</p>
</div>
</div>
</section>
<section id="installation" class="code-section">
<h2 class="section-title">Installation</h2>
<p class="section-subtitle">Add to your Cargo.toml and start building</p>
<div class="code-block">
<div class="code-title">Cargo.toml</div>
<pre><code>[dependencies]
adabraka-ui = "0.3"
gpui = { package = "adabraka-gpui", version = "0.3" }</code></pre>
</div>
<div style="margin-top: 1.5rem; padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0.5rem;">
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary);">
<strong style="color: var(--text);">Note:</strong> Icons are not bundled with the library.
Download your preferred icon set (we recommend <a href="https://lucide.dev/" target="_blank" style="color: var(--accent);">Lucide Icons</a>)
and configure the icon path as shown in the Quick Start below.
</p>
</div>
</section>
<section id="quick-start" class="code-section">
<h2 class="section-title">Quick Start</h2>
<p class="section-subtitle">Get up and running in minutes</p>
<div class="code-block">
<div class="code-title">main.rs</div>
<pre><code><span class="keyword">use</span> adabraka_ui::prelude::*;
<span class="keyword">use</span> gpui::*;
<span class="keyword">use</span> std::path::PathBuf;
<span class="comment">// Define asset source for loading icons and resources</span>
<span class="keyword">struct</span> <span class="type">Assets</span> {
base: PathBuf,
}
<span class="keyword">impl</span> AssetSource <span class="keyword">for</span> Assets {
<span class="keyword">fn</span> <span class="function">load</span>(&<span class="keyword">self</span>, path: &<span class="keyword">str</span>) -> Result<Option<std::borrow::Cow<'<span class="keyword">static</span>, [<span class="keyword">u8</span>]>>> {
std::fs::<span class="function">read</span>(<span class="keyword">self</span>.base.<span class="function">join</span>(path))
.<span class="function">map</span>(|data| <span class="keyword">Some</span>(std::borrow::Cow::Owned(data)))
.<span class="function">map_err</span>(|err| err.<span class="function">into</span>())
}
<span class="keyword">fn</span> <span class="function">list</span>(&<span class="keyword">self</span>, path: &<span class="keyword">str</span>) -> Result<Vec<SharedString>> {
std::fs::<span class="function">read_dir</span>(<span class="keyword">self</span>.base.<span class="function">join</span>(path))
.<span class="function">map</span>(|entries| {
entries.<span class="function">filter_map</span>(|entry| {
entry.<span class="function">ok</span>().<span class="function">and_then</span>(|e| {
e.<span class="function">file_name</span>().<span class="function">to_str</span>().<span class="function">map</span>(|s| SharedString::<span class="function">from</span>(s))
})
}).<span class="function">collect</span>()
})
.<span class="function">map_err</span>(|err| err.<span class="function">into</span>())
}
}
<span class="keyword">fn</span> <span class="function">main</span>() {
Application::<span class="function">new</span>()
.<span class="function">with_assets</span>(Assets {
base: PathBuf::<span class="function">from</span>(env!(<span class="string">"CARGO_MANIFEST_DIR"</span>)),
})
.<span class="function">run</span>(|cx| {
<span class="comment">// Initialize the UI library</span>
adabraka_ui::<span class="function">init</span>(cx);
<span class="comment">// Configure icon base path (for named icons)</span>
adabraka_ui::<span class="function">set_icon_base_path</span>(<span class="string">"assets/icons"</span>);
<span class="comment">// Install theme</span>
<span class="function">install_theme</span>(cx, Theme::<span class="function">dark</span>());
cx.<span class="function">open_window</span>(
WindowOptions {
titlebar: <span class="keyword">Some</span>(TitlebarOptions {
title: <span class="keyword">Some</span>(<span class="string">"My App"</span>.<span class="function">into</span>()),
..<span class="keyword">Default</span>::<span class="function">default</span>()
}),
..<span class="keyword">Default</span>::<span class="function">default</span>()
},
|_, cx| cx.<span class="function">new</span>(|_| MyApp::<span class="function">new</span>()),
).<span class="function">unwrap</span>();
});
}</code></pre>
</div>
</section>
<section id="customization" class="code-section">
<h2 class="section-title">Component Customization</h2>
<p class="section-subtitle">
100% Styled Trait Coverage - Complete Control Over Every Component
</p>
<div style="background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg) 100%); border: 2px solid var(--accent); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
<span style="font-size: 2rem;">✨</span>
<h3 style="font-size: 1.125rem; font-weight: 700; margin: 0;">All 54 components now implement the Styled trait!</h3>
</div>
<p style="font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; margin: 0;">
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.
</p>
</div>
<div style="margin-bottom: 2rem;">
<h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 1rem;">What the Styled Trait Enables</h3>
<div class="features-grid" style="margin-bottom: 2rem;">
<div class="feature">
<h3>Direct Styling</h3>
<p>Apply styles directly to components without wrapper divs. Chain methods for clean, readable code.</p>
</div>
<div class="feature">
<h3>Full GPUI API</h3>
<p>Access all GPUI styling methods: backgrounds, borders, spacing, sizing, effects, and more.</p>
</div>
<div class="feature">
<h3>Type Safety</h3>
<p>Compile-time validation ensures your styles are correct and properties are properly applied.</p>
</div>
<div class="feature">
<h3>No Overhead</h3>
<p>Zero runtime cost. Styles are applied during rendering with no wrapper elements.</p>
</div>
</div>
</div>
<div class="code-block">
<div class="code-title">Basic Component Customization</div>
<pre><code><span class="keyword">use</span> adabraka_ui::prelude::*;
<span class="comment">// Style any component with GPUI's styling methods</span>
Button::<span class="function">new</span>(<span class="string">"save-changes"</span>, <span class="string">"Save Changes"</span>)
.<span class="function">variant</span>(ButtonVariant::Default)
.<span class="function">p_4</span>() <span class="comment">// Padding</span>
.<span class="function">bg</span>(gpui::<span class="function">blue</span>()) <span class="comment">// Background color</span>
.<span class="function">rounded_lg</span>() <span class="comment">// Rounded corners</span>
.<span class="function">border_2</span>() <span class="comment">// Border width</span>
.<span class="function">border_color</span>(gpui::<span class="function">white</span>()) <span class="comment">// Border color</span>
.<span class="function">shadow_md</span>() <span class="comment">// Drop shadow</span>
Input::<span class="function">new</span>()
.<span class="function">placeholder</span>(<span class="string">"Enter email..."</span>)
.<span class="function">w_full</span>() <span class="comment">// Full width</span>
.<span class="function">px_4</span>() <span class="comment">// Horizontal padding</span>
.<span class="function">py_2</span>() <span class="comment">// Vertical padding</span>
.<span class="function">border_1</span>() <span class="comment">// Border</span>
.<span class="function">rounded_md</span>()</code></pre>
</div>
<div style="margin-bottom: 2rem; margin-top: 2rem;">
<h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 1rem;">Available Styling Categories</h3>
<ul class="components-list">
<li>Backgrounds (colors, gradients)</li>
<li>Spacing (padding, margin, gap)</li>
<li>Borders (width, color, radius)</li>
<li>Sizing (width, height, min/max)</li>
<li>Effects (shadow, opacity, transforms)</li>
<li>Typography (font, size, weight)</li>
<li>Layout (flex, grid, position)</li>
<li>Interactive (hover, active, focus)</li>
</ul>
</div>
<div class="code-block">
<div class="code-title">Advanced Customization Example</div>
<pre><code><span class="keyword">use</span> adabraka_ui::prelude::*;
<span class="comment">// Build a fully customized card component</span>
<span class="keyword">let</span> theme = <span class="function">use_theme</span>();
Card::<span class="function">new</span>()
<span class="comment">// Layout & Sizing</span>
.<span class="function">w</span>(<span class="function">px</span>(400.0))
.<span class="function">h</span>(<span class="function">px</span>(250.0))
.<span class="function">p_6</span>()
<span class="comment">// Backgrounds & Borders</span>
.<span class="function">bg</span>(theme.tokens.background)
.<span class="function">border_1</span>()
.<span class="function">border_color</span>(theme.tokens.border)
.<span class="function">rounded_xl</span>()
<span class="comment">// Visual Effects</span>
.<span class="function">shadow_lg</span>()
.<span class="function">opacity</span>(0.95)
<span class="comment">// Content</span>
.<span class="function">child</span>(
VStack::<span class="function">new</span>()
.<span class="function">gap_4</span>()
.<span class="function">child</span>(
<span class="function">h2</span>(<span class="string">"Custom Card"</span>)
.<span class="function">text_xl</span>()
.<span class="function">font_weight</span>(FontWeight::BOLD)
.<span class="function">text_color</span>(theme.tokens.foreground)
)
.<span class="function">child</span>(
Button::<span class="function">new</span>(<span class="string">"action"</span>, <span class="string">"Action"</span>)
.<span class="function">w_full</span>()
.<span class="function">bg</span>(theme.tokens.primary)
.<span class="function">hover</span>(|style| style.<span class="function">bg</span>(theme.tokens.primary_foreground))
)
)</code></pre>
</div>
<div style="background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1.25rem; margin-top: 1.5rem;">
<p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6;">
<strong style="color: var(--text);">Want to see more examples?</strong>
Check out the
<a href="https://github.com/Augani/adabraka-ui/tree/main/examples" target="_blank" style="color: var(--accent); text-decoration: underline;">54 styled component demos</a>
in the repository, showcasing every component with full customization examples.
</p>
</div>
</section>
<section id="code-examples" class="code-section">
<h2 class="section-title">Component Examples</h2>
<p class="section-subtitle">Simple, elegant APIs inspired by modern UI frameworks</p>
<div class="code-block">
<div class="code-title">Creating a Button</div>
<pre><code><span class="keyword">use</span> adabraka_ui::components::button::*;
Button::<span class="function">new</span>(<span class="string">"click-me"</span>, <span class="string">"Click me"</span>)
.<span class="function">variant</span>(ButtonVariant::Default)
.<span class="function">size</span>(ButtonSize::Md)
.<span class="function">on_click</span>(|_event, _window, _cx| {
<span class="function">println!</span>(<span class="string">"Button clicked!"</span>);
})</code></pre>
</div>
<div class="code-block">
<div class="code-title">Building Layouts</div>
<pre><code><span class="keyword">use</span> adabraka_ui::layout::*;
VStack::<span class="function">new</span>()
.<span class="function">p</span>(<span class="function">px</span>(32.0))
.<span class="function">gap</span>(<span class="function">px</span>(16.0))
.<span class="function">child</span>(<span class="function">h1</span>(<span class="string">"Welcome"</span>))
.<span class="function">child</span>(
HStack::<span class="function">new</span>()
.<span class="function">gap</span>(<span class="function">px</span>(12.0))
.<span class="function">child</span>(Button::<span class="function">new</span>(<span class="string">"cancel"</span>, <span class="string">"Cancel"</span>))
.<span class="function">child</span>(Button::<span class="function">new</span>(<span class="string">"save"</span>, <span class="string">"Save"</span>).<span class="function">variant</span>(ButtonVariant::Default))
)</code></pre>
</div>
<div class="code-block">
<div class="code-title">Using the Theme System</div>
<pre><code><span class="keyword">use</span> adabraka_ui::theme::*;
<span class="keyword">fn</span> <span class="function">render</span>(&<span class="keyword">mut self</span>, _: &<span class="keyword">mut</span> Window, cx: &<span class="keyword">mut</span> Context<<span class="keyword">Self</span>>) -> <span class="keyword">impl</span> IntoElement {
<span class="keyword">let</span> theme = <span class="function">use_theme</span>();
<span class="function">div</span>()
.<span class="function">bg</span>(theme.tokens.background)
.<span class="function">text_color</span>(theme.tokens.foreground)
.<span class="function">border_1</span>()
.<span class="function">border_color</span>(theme.tokens.border)
.<span class="function">child</span>(<span class="string">"Themed content"</span>)
}</code></pre>
</div>
<div class="code-block">
<div class="code-title">Data Tables</div>
<pre><code><span class="keyword">use</span> adabraka_ui::components::table::*;
<span class="keyword">let</span> columns = <span class="function">vec!</span>[
Column::<span class="function">new</span>(<span class="string">"name"</span>, <span class="string">"Name"</span>).<span class="function">sortable</span>(<span class="keyword">true</span>),
Column::<span class="function">new</span>(<span class="string">"email"</span>, <span class="string">"Email"</span>).<span class="function">sortable</span>(<span class="keyword">true</span>),
Column::<span class="function">new</span>(<span class="string">"role"</span>, <span class="string">"Role"</span>),
];
DataTable::<span class="function">new</span>(data, columns, cx)
.<span class="function">sortable</span>(<span class="keyword">true</span>)
.<span class="function">on_row_select</span>(|item, _window, _cx| {
<span class="function">println!</span>(<span class="string">"Selected: {:?}"</span>, item);
})</code></pre>
</div>
<div class="code-block">
<div class="code-title">Using Icons</div>
<pre><code><span class="keyword">use</span> adabraka_ui::components::icon::*;
<span class="comment">// Named icons (resolved using configured base path)</span>
Icon::<span class="function">new</span>(<span class="string">"search"</span>)
.<span class="function">size</span>(<span class="function">px</span>(24.0))
.<span class="function">color</span>(theme.tokens.primary)
<span class="comment">// Using icons in components</span>
Button::<span class="function">new</span>(<span class="string">"search"</span>, <span class="string">"Search"</span>)
.<span class="function">prefix</span>(IconSource::Named(<span class="string">"search"</span>.<span class="function">to_string</span>()))
SidebarItem::<span class="function">new</span>(<span class="string">"dashboard"</span>, <span class="string">"Dashboard"</span>)
.<span class="function">with_icon</span>(IconSource::Named(<span class="string">"home"</span>.<span class="function">to_string</span>()))
<span class="comment">// Custom icon paths</span>
IconSource::FilePath(<span class="string">"assets/custom/logo.svg"</span>.<span class="function">into</span>())</code></pre>
</div>
</section>
<section class="features">
<h2 class="section-title">Icon System</h2>
<p class="section-subtitle">Flexible icon support with your choice of icon set</p>
<div style="background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
<h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 1rem;">Important: Icon Assets Not Bundled</h3>
<p style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem;">
To keep the library size small (95% reduction!), adabraka-ui does not bundle icon assets.
You need to provide your own icon files.
</p>
<p style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin: 0;">
<strong style="color: var(--text);">Why?</strong> This allows you to:
include only the icons you use, choose your preferred icon set,
update icons independently, and keep your bundle optimized.
</p>
</div>
<div style="margin-bottom: 2rem;">
<h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 1rem;">Setup Steps</h3>
<ol style="margin-left: 1.5rem; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.8;">
<li style="margin-bottom: 0.5rem;">
<strong style="color: var(--text);">Download icons:</strong> Get your preferred icon set
(<a href="https://lucide.dev/" target="_blank" style="color: var(--accent);">Lucide</a>,
<a href="https://heroicons.com/" target="_blank" style="color: var(--accent);">Heroicons</a>, etc.)
</li>
<li style="margin-bottom: 0.5rem;">
<strong style="color: var(--text);">Place in project:</strong> Put SVG files in <code style="background: var(--code-bg); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem;">assets/icons/</code>
</li>
<li style="margin-bottom: 0.5rem;">
<strong style="color: var(--text);">Configure AssetSource:</strong> Implement GPUI's AssetSource trait (see Quick Start example above)
</li>
<li style="margin-bottom: 0.5rem;">
<strong style="color: var(--text);">Set icon path:</strong> Call <code style="background: var(--code-bg); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem;">set_icon_base_path("assets/icons")</code>
</li>
</ol>
</div>
<div>
<h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 1rem;">Recommended Icon Sets</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
<a href="https://lucide.dev/" target="_blank" style="display: block; padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0.375rem; text-decoration: none; transition: all 0.2s;">
<div style="font-weight: 600; color: var(--text); margin-bottom: 0.25rem;">Lucide Icons</div>
<div style="font-size: 0.8125rem; color: var(--text-secondary);">Beautiful, consistent (3,000+ icons)</div>
</a>
<a href="https://heroicons.com/" target="_blank" style="display: block; padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0.375rem; text-decoration: none; transition: all 0.2s;">
<div style="font-weight: 600; color: var(--text); margin-bottom: 0.25rem;">Heroicons</div>
<div style="font-size: 0.8125rem; color: var(--text-secondary);">Hand-crafted by Tailwind team</div>
</a>
<a href="https://feathericons.com/" target="_blank" style="display: block; padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0.375rem; text-decoration: none; transition: all 0.2s;">
<div style="font-weight: 600; color: var(--text); margin-bottom: 0.25rem;">Feather Icons</div>
<div style="font-size: 0.8125rem; color: var(--text-secondary);">Simply beautiful open source</div>
</a>
<a href="https://phosphoricons.com/" target="_blank" style="display: block; padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0.375rem; text-decoration: none; transition: all 0.2s;">
<div style="font-weight: 600; color: var(--text); margin-bottom: 0.25rem;">Phosphor Icons</div>
<div style="font-size: 0.8125rem; color: var(--text-secondary);">Flexible icon family</div>
</a>
</div>
</div>
<div style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);">
<h3 style="font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--text);">
✨ New in v0.1.2: Enhanced Icon Features
</h3>
<div style="margin-bottom: 2rem;">
<h4 style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.75rem;">Named Icon Sizes</h4>
<p style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem;">
Use semantic size names for consistent icon sizing:
</p>
<pre style="background: var(--code-bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem;"><code>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</code></pre>
</div>
<div style="margin-bottom: 2rem;">
<h4 style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.75rem;">Full GPUI Styling Support</h4>
<p style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem;">
Icons now implement the <code style="background: var(--code-bg); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem;">Styled</code> trait for full styling:
</p>
<pre style="background: var(--code-bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem;"><code>Icon::new("star")
.size(IconSize::Large)
.p_2() // Padding
.bg(gpui::blue()) // Background
.rounded_md() // Rounded corners
.border_1() // Border
.border_color(gpui::gray())</code></pre>
</div>
<div style="margin-bottom: 2rem;">
<h4 style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.75rem;">Icon Rotation</h4>
<p style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem;">
Perfect for loading spinners, directional arrows, and animations:
</p>
<pre style="background: var(--code-bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem;"><code>// Rotate 90 degrees
Icon::new("arrow-right")
.rotate(Radians::from_degrees(90.0))
// Animated spinner
Icon::new("loader")
.rotate(Radians::TAU * progress)</code></pre>
</div>
<div style="background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
<div>
<div style="font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem;">PERFORMANCE</div>
<div style="font-size: 0.875rem; color: var(--text);">No wrapper overhead</div>
</div>
<div>
<div style="font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem;">COMPATIBILITY</div>
<div style="font-size: 0.875rem; color: var(--text);">100% backward compatible</div>
</div>
<div>
<div style="font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem;">FEATURES</div>
<div style="font-size: 0.875rem; color: var(--text);">Full GPUI patterns</div>
</div>
</div>
</div>
</section>
<section id="components" class="features">
<h2 class="section-title">85+ Components</h2>
<p class="section-subtitle">Comprehensive library covering all your UI needs</p>
<h3 style="font-size: 1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem;">Input & Forms (28)</h3>
<ul class="components-list">
<li>Button</li>
<li>IconButton</li>
<li>Input</li>
<li>Textarea</li>
<li>TextField</li>
<li>Checkbox</li>
<li>Toggle</li>
<li>ToggleGroup</li>
<li>Radio</li>
<li>Select</li>
<li>Combobox</li>
<li>SearchInput</li>
<li>Slider</li>
<li>RangeSlider</li>
<li>NumberInput</li>
<li>OTPInput</li>
<li>TagInput</li>
<li>MentionInput</li>
<li>HotkeyInput</li>
<li>InlineEdit</li>
<li>ColorPicker</li>
<li>DatePicker</li>
<li>TimePicker</li>
<li>Calendar</li>
<li>Rating</li>
<li>FileUpload</li>
<li>Editor (Code/SQL)</li>
<li>Form (Builder)</li>
</ul>
<h3 style="font-size: 1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem;">Navigation (15)</h3>
<ul class="components-list">
<li>Sidebar</li>
<li>MenuBar</li>
<li>Menu</li>
<li>AppMenu</li>
<li>ContextMenu</li>
<li>Tabs</li>
<li>Breadcrumbs</li>
<li>Tree</li>
<li>FileTree</li>
<li>Toolbar</li>
<li>StatusBar</li>
<li>NavigationMenu</li>
<li>Pagination</li>
<li>Stepper</li>
<li>CommandPalette</li>
</ul>
<h3 style="font-size: 1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem;">Data Display (18)</h3>
<ul class="components-list">
<li>Table</li>
<li>DataTable</li>
<li>Card</li>
<li>Badge</li>
<li>Label</li>
<li>Text</li>
<li>Accordion</li>
<li>Collapsible</li>
<li>Avatar</li>
<li>AvatarGroup</li>
<li>Icon</li>
<li>Separator</li>
<li>Skeleton</li>
<li>Progress</li>
<li>Spinner</li>
<li>Timeline</li>
<li>Countdown</li>
<li>KeyboardShortcuts</li>
</ul>
<h3 style="font-size: 1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem;">Charts (4)</h3>
<ul class="components-list">
<li>LineChart</li>
<li>BarChart</li>
<li>PieChart</li>
<li>Sparkline</li>
</ul>
<h3 style="font-size: 1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem;">Media (4)</h3>
<ul class="components-list">
<li>AudioPlayer</li>
<li>VideoPlayer</li>
<li>ImageViewer</li>
<li>Carousel</li>
</ul>
<h3 style="font-size: 1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem;">Overlays (13)</h3>
<ul class="components-list">
<li>Dialog</li>
<li>AlertDialog</li>
<li>ConfirmDialog</li>
<li>Sheet</li>
<li>BottomSheet</li>
<li>Popover</li>
<li>PopoverMenu</li>
<li>HoverCard</li>
<li>Tooltip</li>
<li>Toast</li>
<li>Alert</li>
<li>NotificationCenter</li>
<li>Dropdown</li>
</ul>
<h3 style="font-size: 1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem;">Layout (12)</h3>
<ul class="components-list">
<li>VStack</li>
<li>HStack</li>
<li>Grid</li>
<li>MasonryGrid</li>
<li>SplitPane</li>
<li>Resizable</li>
<li>Scrollable</li>
<li>VirtualList</li>
<li>InfiniteScroll</li>
<li>SortableList</li>
<li>DataGrid</li>
<li>EmptyState</li>
</ul>
<h3 style="font-size: 1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem;">Utilities & Animation (8)</h3>
<ul class="components-list">
<li>DragDrop</li>
<li>Animations</li>
<li>Spring Physics</li>
<li>Gestures</li>
<li>Content Transitions</li>
<li>Responsive</li>
<li>Animation Coordinator</li>
<li>Animation Builder</li>
</ul>
</section>
<footer class="footer">
<div class="footer-links">
<a href="https://github.com/Augani/adabraka-ui">GitHub</a>
<a href="https://docs.rs/adabraka-ui">Documentation</a>
<a href="https://github.com/Augani/adabraka-ui/blob/main/CONTRIBUTING.md">Contributing</a>
<a href="https://crates.io/crates/adabraka-ui">Crates.io</a>
</div>
<p>
Built with <a href="https://github.com/zed-industries/zed" target="_blank">GPUI</a> •
Icons by <a href="https://lucide.dev" target="_blank">Lucide</a> •
Inspired by <a href="https://ui.shadcn.com" target="_blank">shadcn/ui</a>
</p>
<p style="margin-top: 0.5rem;">MIT License © 2025-2026 adabraka-ui</p>
</footer>
</main>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
document.querySelectorAll('.nav-links a').forEach(link => {
link.classList.remove('active');
});
this.classList.add('active');
}
});
});
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-links a[href^="#"]');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.pageYOffset >= sectionTop - 100) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
</script>
</body>
</html>