⚡ Neon Design System

Slint UI component library for Rust desktop apps. 35+ components, dark/light theme runtime switch, neon accents, glass surfaces.

Built for infrastructure / monitoring / data dashboards. Pure Slint widgets — no GPUI, no nightly Rust, no native fork. Drops into any Slint 1.9+ project.

Quick start (consumer app)

1. Add the dependency in both [dependencies] and [build-dependencies]

[dependencies]
slint = "1.9"
slint-ui-system = { git = "https://github.com/wilmercampagna/slint-ui-system" }

[build-dependencies]
slint-build = "1.9"
slint-ui-system = { git = "https://github.com/wilmercampagna/slint-ui-system" }

The build script needs the lib at build-time to read SLINT_LIBRARY_PATH; the runtime side gets the Rust helpers.

2. Wire build.rs

use slint_build::CompilerConfiguration;

fn main() {
    let neon = format!("{}/index.slint",
                       slint_ui_system::SLINT_LIBRARY_PATH);
    let cfg = CompilerConfiguration::new()
        .with_library_paths(
            [("neon".to_string(), neon.into())]
                .into_iter().collect()
        );
    slint_build::compile_with_config("ui/app.slint", cfg).unwrap();
}

3. Import components in your .slint

import {
    Theme,
    NeonButton, PrimaryNeonButton,
    NeonCard, NeonH2, NeonBody,
    NeonHStack, NeonVStack, NeonToggle,
} from "@neon";

// Re-export Theme so the Rust side can flip dark/light at runtime.
export { Theme } from "@neon";

export component AppWindow inherits Window {
    title: "My app";
    background: Theme.bg-base;

    NeonVStack {
        NeonH2 { text: "⚡ Hello Neon"; color: Theme.neon-cyan; }
        NeonCard {
            title: "Welcome";
            NeonBody { text: "35+ components, dark/light runtime switch."; }
        }
        PrimaryNeonButton {
            text: "Click me";
            clicked => { /* … */ }
        }
    }
}

4. Wire Rust

use slint::ComponentHandle;
slint::include_modules!();

// One-liner that hooks Theme into Neon's runtime helpers.
slint_ui_system::impl_theme_access!(AppWindow, Theme);

fn main() -> Result<(), slint::PlatformError> {
    let win = AppWindow::new()?;
    slint_ui_system::theme::set_dark_mode(&win, true);
    win.run()
}

That's the entire integration. Full working code in examples/simple/ — clone + cargo run -p neon-example-simple.

Components (35+)

⭐ = nuevo en v0.4.0. See docs/CHANGELOG.md.

Theme

• Dark (default): deep navy base (#0a0e17) with cyan / magenta / green neon accents.
• Light: cool pearl (#f2f5fa) with darkened neons for readability.
• Runtime switch — every token reads dark-mode ? X : ThemeLight.X so flipping Theme.dark-mode re-tints the entire UI instantly.
• Tokens: 9 surfaces, 4 borders, 4 text levels, 6 accents (+ 4 glow), 10 spacings (4 px grid), 5 radii, 7 font sizes, 10+ animation durations.
• Full reference: docs/theme-tokens.md.

Project layout

slintUiSystem/
├── src/
│   ├── lib.rs            # Public Rust API (re-exports + SLINT_LIBRARY_PATH)
│   ├── main.rs           # Demo binary (consumes its own lib)
│   ├── theme.rs          # set_dark_mode / is_dark_mode / toggle helpers + impl_theme_access! macro
│   ├── bridge.rs         # neon_ui_setup! macro + integration docs
│   └── color.rs          # parse_hex / format_rgb(a) / to_slint_color
├── ui/                   # The Slint library — consumers import from here via @neon
│   ├── index.slint       # Re-export hub. The `@neon` library entry point.
│   ├── theme.slint       # Dark + Light theme tokens (single global, runtime switch)
│   ├── theme_light.slint # Light constants
│   ├── demo.slint        # Demo's own UI
│   ├── components/       # 30+ component .slint files
│   ├── layouts/          # App shell + stack helpers
│   └── icons/            # 57 SVG icons (currentColor)
├── examples/
│   └── simple/           # Minimal consumer template — copy this for new projects
└── docs/
    ├── index.html        # Interactive documentation
    ├── component-api.md  # Property tables for every component
    ├── theme-tokens.md   # Token reference
    └── CHANGELOG.md

Rust API

Detailed docs: cargo doc --open or docs.rs/slint-ui-system.

Run the demo

git clone https://github.com/wilmercampagna/slint-ui-system.git
cd slint-ui-system
cargo run                           # interactive component browser
cargo run -p neon-example-simple    # minimal consumer template

The demo is itself a consumer of the lib — src/main.rs is a great reference for the canonical wiring.

Documentation

• Interactive HTML docs: open docs/index.html in a browser.
• Component API tables: docs/component-api.md.
• Theme tokens: docs/theme-tokens.md.
• Changelog: docs/CHANGELOG.md.
• Contributing: CONTRIBUTING.md.

Keyboard shortcuts (in the demo)

Build & test

cargo build           # Build lib + demo bin
cargo test            # Run unit tests (color parsing, library path, …)
cargo run             # Open the demo
cargo run -p neon-example-simple   # Open the simple consumer example
cargo doc --open      # Render the Rust API docs

License

Dual-licensed under either of:

• MIT License
• Apache License, Version 2.0

at your option.

Contributions are accepted under the same dual license — see CONTRIBUTING.md.