🎨 Windjammer UI

Pure Windjammer UI framework - Zero HTML/CSS/JavaScript required

🚀 Quick Start

Write Pure Windjammer

use windjammer_ui::*

fn main() {
    let app = Container::new()
        .child(Text::new("Hello, World!").size(TextSize::XLarge).bold().render())
        .child(Button::new("Click Me").variant(ButtonVariant::Primary).render())
        .child(Alert::success("Ready to build!").render())
        .render()
    
    println!("{}", app)
}

That's it! No HTML, no CSS, no JavaScript. Just pure Windjammer.

✨ Key Features

Feature	Description
🎯 Pure Windjammer	Write only `.wj` files - zero HTML/CSS/JS
📦 55 Components	Complete UI library from buttons to chat interfaces
💬 Chat Ready	Built-in ChatGPT-style message components
🎨 Beautiful Styling	Production-ready designs out of the box
🌙 Dark Mode	Built-in theme support
🏗️ Builder Pattern	Fluent, chainable APIs
🔒 Type Safe	Compile-time guarantees
⚡ Zero Runtime	Compiles to native Rust
📱 Responsive	Mobile-friendly layouts

🎨 Component Library

→ View Live Interactive Gallery | 49 Components, 100% Windjammer

📝 Basic Components (7)

// Text with styling
Text::new("Welcome").size(TextSize::XLarge).bold().render()

// Button variants
Button::new("Primary").variant(ButtonVariant::Primary).render()
Button::new("Success").variant(ButtonVariant::Success).render()
Button::new("Danger").variant(ButtonVariant::Danger).render()

// Alert types
Alert::success("Operation completed!").render()
Alert::error("Something went wrong!").render()
Alert::warning("Please review").render()
Alert::info("Did you know?").render()

🏗️ Layout Components (8)

// Flex layout
Flex::new()
    .direction(FlexDirection::Row)
    .gap("16px")
    .child(Button::new("Left").render())
    .child(Button::new("Right").render())
    .render()

// Grid layout
Grid::new()
    .columns(3)
    .gap("12px")
    .child("<div>Item 1</div>")
    .child("<div>Item 2</div>")
    .child("<div>Item 3</div>")
    .render()

// Panel with title
Panel::new()
    .title("Settings")
    .child("<p>Panel content here</p>")
    .collapsible(true)
    .render()

📋 Form Components (7)

// Switch
Switch::new()
    .label("Enable notifications")
    .checked(true)
    .render()

// Radio group
RadioGroup::new("size")
    .option(RadioOption::new("small", "Small"))
    .option(RadioOption::new("large", "Large"))
    .selected("small")
    .render()

// Select dropdown
Select::new()
    .option(SelectOption::new("1", "Option 1"))
    .option(SelectOption::new("2", "Option 2"))
    .selected("1")
    .render()

💾 Data Display (5)

// Card with content
Card::new()
    .title("Welcome")
    .child("<p>Card content goes here</p>")
    .padding("24px")
    .render()

// Progress bar
Progress::new()
    .value(75)
    .max(100)
    .variant(ProgressVariant::Success)
    .show_label(true)
    .render()

// Avatar
Avatar::new()
    .src("user.jpg")
    .alt("John Doe")
    .size(AvatarSize::Large)
    .render()

💬 Chat & Messaging Components (5) NEW!

// Build a ChatGPT-style interface
MessageList::new()
    .message(
        ChatMessage::new("Hello!")
            .role(MessageRole::User)
            .timestamp("2:30 PM")
            .render()
    )
    .message(
        ChatMessage::new("Hi! How can I help you?")
            .role(MessageRole::Assistant)
            .render()
    )
    .message(TypingIndicator::new().render())
    .render()

// Chat input with send button
ChatInput::new()
    .placeholder("Type your message...")
    .multiline(true)
    .rows(3)
    .render()

// Code block with copy
CodeBlock::new("fn main() { println!(\"Hello!\"); }")
    .language("rust")
    .show_copy_button(true)
    .render()

🧭 Navigation Components (11)

// Navbar with brand and items
Navbar::new()
    .brand("MyApp")
    .item(NavbarItem::new("Home", "/"))
    .item(NavbarItem::new("About", "/about"))
    .sticky(true)
    .render()

// Collapsible sidebar
Sidebar::new()
    .item(SidebarItem::new("Dashboard").icon("📊").href("/"))
    .item(SidebarItem::new("Settings").icon("⚙️").href("/settings"))
    .width("250px")
    .collapsed(false)
    .render()

// Hamburger menu
HamburgerMenu::new()
    .item(HamburgerMenuItem::new("Profile", "/profile"))
    .item(HamburgerMenuItem::new("Logout", "/logout"))
    .render()

// Tabs
Tabs::new()
    .tab(Tab::new("overview", "Overview").active(true))
    .tab(Tab::new("settings", "Settings"))
    .render()

// Pagination
Pagination::new()
    .current(2)
    .total(10)
    .render()

🎯 Advanced Components (6)

// Toast notification
Toast::new("Success!")
    .variant(ToastVariant::Success)
    .position(ToastPosition::TopRight)
    .duration(3000)
    .render()

// Dialog
Dialog::new()
    .title("Confirm Action")
    .content("<p>Are you sure?</p>")
    .open(true)
    .render()

// Accordion
Accordion::new()
    .item(AccordionItem::new("Section 1", "<p>Content 1</p>"))
    .item(AccordionItem::new("Section 2", "<p>Content 2</p>"))
    .render()

// Context menu
ContextMenu::new("my-element")
    .item(ContextMenuItem::new("Copy").icon("📋"))
    .item(ContextMenuItem::new("Paste").icon("📄"))
    .item(ContextMenuItem::new("Delete").icon("🗑️"))
    .render()

🌳 Tree & Hierarchy (5)

// File tree
FileTree::new()
    .node(FileNode::directory("src")
        .child(FileNode::file("main.rs"))
        .child(FileNode::file("lib.rs"))
    )
    .render()

// Tree view
TreeView::new()
    .item(TreeItem::new("Root")
        .child(TreeItem::new("Child 1"))
        .child(TreeItem::new("Child 2"))
    )
    .render()

🎮 Interactive Examples

Counter App

use windjammer_ui::*

fn main() {
    let mut count = 0

    let ui = Container::new()
        .child(
            Text::new(format!("Count: {}", count))
                .size(TextSize::XLarge)
                .render()
        )
        .child(
            Button::new("Increment")
                .variant(ButtonVariant::Primary)
                .render()
        )
        .render()
    
    println!("{}", ui)
}

Dashboard Layout

use windjammer_ui::*

fn main() {
    let dashboard = Container::new()
        .max_width("1200px")
        .child(
            Grid::new()
                .columns(3)
                .gap("24px")
                .child(
                    Card::new()
                        .title("Users")
                        .child(Text::new("1,234").size(TextSize::XLarge).render())
                        .render()
                )
                .child(
                    Card::new()
                        .title("Revenue")
                        .child(Text::new("$45,678").size(TextSize::XLarge).render())
                        .render()
                )
                .child(
                    Card::new()
                        .title("Orders")
                        .child(Text::new("567").size(TextSize::XLarge).render())
                        .render()
                )
                .render()
        )
        .render()
    
    println!("{}", dashboard)
}

Form with Validation

use windjammer_ui::*

fn main() {
    let form = Card::new()
        .title("Contact Form")
        .child(
            Flex::new()
                .direction(FlexDirection::Column)
                .gap("16px")
                .child(
                    Input::new()
                        .placeholder("Your name")
                        .render()
                )
                .child(
                    Input::new()
                        .placeholder("Email address")
                        .render()
                )
                .child(
                    Button::new("Submit")
                        .variant(ButtonVariant::Primary)
                        .render()
                )
                .render()
        )
        .render()
    
    println!("{}", form)
}

📦 Installation & Setup

1. Add Windjammer UI to your project

wj add windjammer-ui

2. Include the CSS (one time)

<link rel="stylesheet" href="windjammer-ui.css">

3. Write Windjammer code

use windjammer_ui::*

fn main() {
    let ui = Button::new("Hello").render()
    println!("{}", ui)
}

That's it! No build configuration, no webpack, no npm packages.

🏗️ Architecture

What Developers Write:

Button::new("Click Me")
    .variant(ButtonVariant::Primary)
    .size(ButtonSize::Large)
    .render()

What Gets Generated:

<button class="wj-button wj-button-primary wj-button-lg">
    Click Me
</button>

What Styles It:

/* Included in windjammer-ui.css */
.wj-button { padding: 10px 20px; border-radius: 6px; ... }
.wj-button-primary { background: #667eea; color: white; ... }

Developers never write the HTML or CSS! They're auto-generated from pure Windjammer code.

🎨 Live Gallery

→ Open Interactive Gallery

The gallery showcases all 40 components with:

✅ Live interactive demos
✅ Code examples for each component
✅ Dark mode toggle
✅ Responsive design
✅ Copy-paste ready code

Try it now to see:

Click toast notification buttons to see animations
Switch between tabs (pure CSS, no JS!)
Toggle dark mode
Interact with forms, sliders, switches
Expand accordions and collapsible sections
Navigate pagination

🌟 Why Windjammer UI?

Traditional Approach	Windjammer UI
Write React JSX	✅ Write pure Windjammer
Import 10+ npm packages	✅ One import: `std::ui`
Configure webpack/vite	✅ Zero config
Write custom CSS	✅ Beautiful defaults
Debug runtime errors	✅ Compile-time safety
Ship large JS bundles	✅ Compiled to Rust/WASM

📊 Component Coverage

✅ 49 / 49 Components Implemented (100%)

Basic:        ████████████████████ 7/7
Layout:       ████████████████████ 8/8
Forms:        ████████████████████ 7/7
Data Display: ████████████████████ 5/5
Navigation:   ████████████████████ 11/11
Chat:         ████████████████████ 5/5 🆕
Advanced:     ████████████████████ 6/6
Tree:         ████████████████████ 3/3

Status: Production Ready! 🎉 New: Chat-ready with ChatGPT-style messaging components!

🚀 Performance

All components compile to native Rust:

Zero runtime overhead
Type-safe at compile time
No JavaScript engine needed
Sub-millisecond rendering

📚 Documentation

API Reference - Complete architecture guide
Component Docs - Implementation details
Live Gallery - Interactive showcase

🤝 Contributing

All 40 components are written in pure Windjammer (.wj files) located in src/components_wj/.

To add a new component:

Create src/components_wj/mycomponent.wj
Run ./wj-build.sh to transpile to Rust
Add to src/components/mod.rs
Update gallery showcase

🎯 Roadmap

v0.1.0 ✅ (Current)

✅ 40 components implemented
✅ Builder pattern APIs
✅ Dark mode support
✅ Interactive gallery

v0.2.0 🚧 (Next)

🚧 Event handlers (onClick, onChange)
🚧 Form validation
🚧 Animation system
🚧 Accessibility (ARIA)

v1.0.0 🔮 (Future)

🔮 Direct WASM rendering
🔮 Built-in reactivity
🔮 Mobile components
🔮 Drag & drop

📜 License

Licensed under either of:

Apache License, Version 2.0 (LICENSE-APACHE)
MIT License (LICENSE-MIT)

at your option.

🙏 Acknowledgments

shadcn/ui - Design inspiration
Rust - The language that makes this possible
Windjammer - The platform

🐛 Known Limitations

While Windjammer UI is production-ready, there are some platform-specific considerations:

Platform Support

Desktop on Linux CI: Requires display server (X11/Wayland). CI tests web features only on Linux.
iOS Features on Windows: macOS-specific dependencies (cocoa, core-foundation) are not available on Windows.
Cross-compilation: Some features may require platform-specific system libraries.

Technical Limitations

Event Handlers in HTML: Event handlers are not serializable to HTML strings (by design). Use the DOM rendering methods for interactive components.
WASM Binary Size: Desktop features significantly increase WASM binary size. Use features = ["web"] for web-only builds.

Recommended Feature Configurations

# Web/WASM only (smallest bundle)
windjammer-ui = { version = "0.1.1", features = ["web"] }

# Desktop only (native windowing)
windjammer-ui = { version = "0.1.1", features = ["desktop"] }

# All platforms (largest bundle)
windjammer-ui = { version = "0.1.1", features = ["all-platforms"] }

Built with ❤️ in pure Windjammer

View Gallery • Read Docs • Report Issue

⭐ Star us on GitHub if you like Windjammer UI! ⭐

windjammer-ui 0.3.6