---
title: Getting Started
description: Getting Started with Slint Material UI.
---

import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import SlintProperty  from '@slint/common-files/src/components/SlintProperty.astro';
import Link from '@slint/common-files/src/components/Link.astro';
import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';

![Slint Material UI](~/assets/images/material-tablet.webp)

Welcome to the documentation for the Material 3 Design System for Slint. Learn more about
Slint [here](https://slint.dev/).

To start a project from scratch, follow the instructions from one of our template reprositories:

<Tabs syncKey="dev-language">
<TabItem label="C++">
https://github.com/slint-ui/material-cpp-template
</TabItem>
<TabItem label="Rust">
https://github.com/slint-ui/material-rust-template
</TabItem>
<TabItem label="NodeJS">
https://github.com/slint-ui/material-nodejs-template
</TabItem>
<TabItem label="Python" >
https://github.com/slint-ui/material-python-template
</TabItem>
</Tabs>

To use the components in your existing project, download the source code of the material component from
https://material.slint.dev/zip/material-1.0.zip
and extract it into your repository.
Then follow the [documentation to configure the use of `@material` as a library](https://docs.slint.dev/latest/docs/slint/guide/language/coding/file/#component-libraries).

Here's an example of how to configure it for different languages:

<Tabs syncKey="dev-language">
<TabItem label="C++">
In your `CMakeLists.txt` file, use `LIBRARY_PATHS` in the `slint_target_sources` function.

```cmake
slint_target_sources(my_application
    ui/main.slint
    LIBRARY_PATHS
        material=${CMAKE_CURRENT_SOURCE_DIR}/material-1.0/material.slint
)
```
</TabItem>
<TabItem label="Rust">
In your `build.rs`, call `CompilerConfiguration::with_library_paths`

```rust
// 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.0/material.slint"),
        )]),
    );
    slint_build::compile_with_config("ui/main.slint", config).unwrap();
}
```
</TabItem>
<TabItem label="NodeJS">
Provide the `libraryPaths` map with `loadFile`:

```javascript
let ui = slint.loadFile("ui/main.slint", {
    libraryPaths: {
        "material": path.join(path.dirname(fileURLToPath(import.meta.url)), "..", "material-1.0", "material.slint")
    }
});
```
</TabItem>
<TabItem label="Python">
Provide the `library_paths` dict with `load_file`:

```python
ui = slint.load_file(
    Path(__file__).parent / "ui" / "main.slint",
    library_paths={
        "material": Path(__file__).parent / "material-1.0" / "material.slint"
    },
)
```
</TabItem>
</Tabs>

## Next Steps

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

Follow the development in the [Github repository](https://github.com/slint-ui/material-components).

To learn more about Material Design, dive into Google's comprehensive [Material Design 3 documentation](https://m3.material.io/components).

Compose designs in Figma by taking advantage of the [Material Design 3 Figma Kit](https://www.figma.com/community/file/1035203688168086460/material-3-design-kit)

