adabraka-ui

adabraka-ui is a comprehensive UI framework built on top of GPUI. It provides a wide array of pre-built components, animation systems, and theming capabilities designed to minimize direct dependency on GPUI.

Core Systems

• Components: Over 80+ components covering Input, Display, Navigation, Overlays, Layout, Media, and Charts.
• Animation System: Includes 20+ easing functions (e.g., quad, cubic, spring), a spring physics engine, ScrollPhysics (momentum + overscroll bounce), and AnimatedInteraction for state blending (hover/press/focus). It also supports gesture detection (swipe, long-press, pan, tap).
• Theme System: 18 pre-built themes (e.g., light, dark, dracula, nord, tokyo_night, catppuccin) using design tokens for colors, radii, shadows, and fonts.
• Infrastructure: Features a responsive breakpoints system, virtual lists (uniform and variable height), keyboard navigation, a Builder pattern API, and a Styled trait available on all components.

adabraka-ui uses a semantic color token system to manage light and dark modes.

1. Initialization: Call install_theme(cx, Theme::dark()) or Theme::light() during app startup.
2. Accessing Tokens: Use use_theme() within your render method to access the current theme's tokens.

Available Semantic Tokens:

• Backgrounds: background, card, popover, muted
• Foregrounds: foreground, card_foreground, popover_foreground, muted_foreground
• Interactive: primary, primary_foreground, secondary, secondary_foreground, accent, accent_foreground, destructive, destructive_foreground
• UI Elements: border, input, ring
• Sizing/Typography: radius_sm, radius_md, radius_lg, font_family, font_mono

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")
}

adabraka-ui is designed as a high-performance alternative to Electron for building native desktop applications. While Electron relies on a browser engine (Chromium) and Node.js, adabraka-ui targets native performance with GPU-accelerated rendering and a significantly smaller footprint.

Key Performance Advantages

• Memory Usage: 50-100MB compared to Electron's 300-800MB.
• Startup Speed: Instant cold starts (< 200ms) vs Electron's 2-5 second boot.
• Rendering: Guaranteed 60fps with GPU-accelerated rendering, avoiding garbage collection pauses, layout thrashing, or style recalculation.
• Latency: Sub-millisecond input latency via native event handling (bypassing the JS event loop).
• Binary Size: Ship a 10-20MB single binary instead of a 200MB+ Electron installer.

Target Use Cases

• Creative Tools: Photo editors, design tools, and DAWs requiring low input latency.
• Real-time Dashboards: High-frequency data visualization (financial terminals, monitoring systems).
• Developer Tools: Code editors and database browsers with high responsiveness.
• Communication Apps: Chat and collaboration tools requiring smooth animations and glassmorphic effects.
• Enterprise Apps: Data-heavy UIs (CRMs, ERPs) with large data grids (100k+ rows).

Advanced layout and transition components:

• LayoutTransition: Automatically animates position and size changes of children between renders by snapshotting bounds.
• SharedElementTransition: Implements 'hero animations' where elements appear to fly between different views.
• AnimatedCollapsible: An enhanced Collapsible component that smoothly animates height changes.
• AnimatedSwitch: Animates transitions between content regions using slide, scale, or morph modes.
• Dock: A macOS-style dock with magnification effects based on cursor proximity.
• ViewRouter: A view stack manager with push/pop semantics and animated transitions.
• PageTransition: Configurable enter/exit animation presets (slide, fade, scale) for the ViewRouter.
• SegmentedNavigation: An animated sliding highlight for active segments in navigation bars.
• DrawerNavigation: A gesture-driven side drawer with animated sliding and backdrop dimming.

The roadmap outlines several upcoming motion-based components for adabraka-ui. Key foundational components include:

• AnimatedPresence: Manages mount/unmount animations by delaying DOM removal until exit animations complete.
• AnimatedList: Automatically animates item insertion, removal, and reordering using key-based diffing.
• AnimatedCounter: Provides animated number displays with digit tweening or rolling transitions.
• Shimmer: An animated gradient sweep overlay used for loading states.
• AnimatedProgress: An enhanced ProgressBar with animated fill transitions and optional shimmer.
• Marquee: Auto-scrolling content with configurable speed and seamless looping.
• TypeWriter: Character-by-character text reveal with configurable speed and cursor blinking.
• NumberTicker: A slot-machine style digit roller.
• ParticleEmitter: A lightweight particle system for effects like confetti or snow.
• PulseIndicator: A pulsing dot or ring for live status indicators.

The ScrollContainer provides auto-managed scrolling. You can use it for vertical, horizontal, or both directions. For programmatic control (like scrolling to a specific item or bottom), use a ScrollHandle and register it with .track_scroll(&handle).

Key Methods for ScrollHandle:

• scroll_to_bottom(): Scrolls to the end of the container.
• set_offset(point): Sets a specific scroll position.
• scroll_to_item(index): Scrolls to a specific child index.
• top_item() / bottom_item(): Returns the index of the currently visible items.

// Simple vertical scroll
ScrollContainer::vertical()
    .h(px(400.0))
    .child(long_content())

// With programmatic control
let scroll_handle = ScrollHandle::new();
ScrollContainer::vertical()
    .track_scroll(&scroll_handle)
    .child(content())

// Later: scroll programmatically
scroll_handle.scroll_to_bottom();
scroll_handle.set_offset(point(px(0.0), px(100.0)));