Getting Started

Slint Material Components bring the Material 3 design system to Slint applications.

Start a new project

Choose a template to create a ready-to-run project in your preferred language.

Rust templateCreate a Material application with Rust.

C++ templateCreate a Material application with C++.

Node.js templateCreate a Material application with Node.js.

Python templateCreate a Material application with Python.

Add Material to an existing project

Material Components 1.1.0

Requires Slint 1.18 or newer.

Download ZIPView Release Notes

1. Download and extract the current release into your project.
2. Configure @material as a component library using the example for your language below.
3. Import Material components in your .slint files.

For more information about component-library paths, see the Slint component library documentation ↗.

Configure the component library

Rust

In your build.rs, call CompilerConfiguration::with_library_paths

// build.rs
fn main() {
    let config = slint_build::CompilerConfiguration::new().with_library_paths(
        std::collections::HashMap::from([(
            "material".to_string(),
            std::path::Path::new(&std::env::var_os("CARGO_MANIFEST_DIR").unwrap())
                .join("material-1.1.0/material.slint"),
        )]),
    );
    slint_build::compile_with_config("ui/main.slint", config).unwrap();
}

rust

C++

In your CMakeLists.txt file, use LIBRARY_PATHS in the slint_target_sources function.

slint_target_sources(my_application
    ui/main.slint
    LIBRARY_PATHS
        material=${CMAKE_CURRENT_SOURCE_DIR}/material-1.1.0/material.slint
)

cmake

NodeJS

Provide the libraryPaths map with loadFile:

let ui = slint.loadFile("ui/main.slint", {
    libraryPaths: {
        "material": path.join(path.dirname(fileURLToPath(import.meta.url)), "..", "material-1.1.0", "material.slint")
    }
});

javascript

Python

Provide the library_paths dict with load_file:

ui = slint.load_file(
    Path(__file__).parent / "ui" / "main.slint",
    library_paths={
        "material": Path(__file__).parent / "material-1.1.0" / "material.slint"
    },
)

python

Next Steps

All the documentation for Slint’s Material UI components can be found on this site.

Follow the development in the https://github.com/slint-ui/slint/tree/master/ui-libraries/material ↗.

To learn more about Material Design, dive into Google’s comprehensive Material Design 3 documentation ↗.

Compose designs in Figma by taking advantage of the Material Design 3 Figma Kit ↗