Get started

Your first Blinc app.

Install Blinc’s component library, add the default Hybrid theme, and build an interactive Rust interface.

1. Create a Rust project

Use a Rust toolchain compatible with Blinc 0.6.0 (Rust 1.89 or newer). Create a binary crate:

cargo new my-blinc-app
cd my-blinc-app

Add these dependencies to Cargo.toml:

Cargo.toml
[dependencies]
blinc_app = "0.6"
blinc_cn = "0.6"
blinc_core = "0.6"
blinc_layout = "0.6"
blinc_theme = "0.6"

2. Build a component

Replace src/main.rs with this example. The label is a Computed derived from a Signal; clicking updates the existing button. Styles come from CSS.

src/main.rs
use blinc_app::prelude::{ColorScheme, Result, WindowConfig};
use blinc_app::windowed::WindowedApp;
use blinc_cn::{button, cn_styles::CN_STYLES};
use blinc_core::reactive::computed;
use blinc_layout::prelude::div;
use blinc_theme::HybridTheme;

#[cfg(not(target_arch = "wasm32"))]
fn main() -> Result<()> {
    let theme = HybridTheme::bundle().with_css(CN_STYLES).with_css(
        r#"
        .first-app {
            width: 100%; height: 100%; display: flex;
            align-items: center; justify-content: center;
            background: var(--background);
        }
    "#,
    );
    WindowedApp::run_with_theme(
        WindowConfig {
            title: "My Blinc app".into(),
            ..Default::default()
        },
        theme,
        ColorScheme::Dark,
        |ctx| {
            let count = ctx.use_signal(0u32);
            let label = computed(move |graph| format!("Clicks: {}", graph.get(count).unwrap_or(0)));
            div()
                .class("first-app")
                .child(button(label).on_click(move |_| count.set(count.get() + 1)))
        },
    )
}

HybridTheme::bundle().with_css(CN_STYLES) installs the shared component theme. Application CSS follows that layer and can override its documented selectors and variables.

3. Run it

cargo run

Blinc opens a native window. These catalog examples start in Hybrid dark mode. Choose ColorScheme::Light for a light interface.

Choose your next component

Each component page includes its own usage guidance, reactive props, CSS hooks and a live demo.

Button · Input · Select · Dialog · All components

For browser applications, Blinc also provides a WASM runner. The catalog's Live views use a dedicated worker and OffscreenCanvas; they share Rust fixtures with the native recordings.