用户界面由 Slint 语言编写，并保持在.slint格式的文本文件中。每个.slint文件可定义一个或多个组件，通过调用这些组件声明形成一个组件树，这些节点组件构成了界面的框架。您可以重复使用某些控件，也可以递归调用或继承的方式生成新的组件。如下展示了一个简单的 GUI 界面组件的代码：

import { Button } from "std-widgets.slint";

component MyRectangle inherits Rectangle {
    in property <string> name: "EmbeddedTeckTalk";
    Text {
        text: root.name;
    }
}

export component MyApp inherits Window {
    height: 320px;
    width: 280px;

    VerticalLayout {
        alignment: LayoutAlignment.start;
        width: parent.width;
        Rectangle {
            height: 100px;
            background: green;
            Text {
                text: "Hello Slint";
            }
        }
        MyRectangle{
            // width: 100px;
            height: 100px;
        }

        MyRectangle {
            // width: 100px;
            height: 100px;
            name: "Slint";
        }
    }
    
}

以上代码中，MyRectangle和MyApp都是自定义的组件，其中MyRectangle继承了Slint 内置的Rectangle组件库，意味着MyRectangle直接继承了Rectangle的所有属性，同时，MyRectangle也将Slint的Text包含到内部子节点，因此拥有了一个Text对象。MyApp则继承Window组件，则可以作为该 GUI 节点的根节点，因此可以用来作为 GUI 的显示入口组件。MyApp内部声明了多个组件，通过组件和属性声明各子节点组件的位置、从属、约束等关系。各组件通过属性绑定固定的值，也可通过接口或表达式绑定动态变化的值，Slint会自动计算表达式或依赖的变化, 因此组件属性值的变化能自动传导并更新所有依赖该属性的节点。渲染效果如下所示各子组件也可以使用:=语法来指定对象名，如下示例所示:

export component MyApp inherits Window {
    width: 200px;
    height: 200px;
    in property <string>  name: "EmbeddedTechTalk";

    // 这是一行注释
    rec := Rectangle {
        background: red;
        width: root.width;
        height: self.width;
        border-radius: self.width/2;
        border-color: red;

        /* 注释 
            这是一个注释
        */
        VerticalLayout {
            alignment: LayoutAlignment.space-between;
            txt1 := Text{
                text: root.name;
                width: rec.width;
                horizontal-alignment: center;
                font-size: 15px;
            }
    
            txt2 := Text{
                text: "Hello world";
                width: parent.width;
            }
        }
    }
}

子组件对象的命名规范如下：

• 可由字母（a-zA-Z）、数字、下划线(_)、破折号(-)组成
• 不能以数字开头
• 下划线(_)、破折号(-)可互换，因此命名如top_rec和top-rec为同一个对象名。

同时 Slint 保留以下三个作为预定义的命名，有特殊含义，因此新的对象不能指定以下三个作为对象名。

• root: 该组件的根节点组件引用
• self: 当前组件的引用
• parent: 当前组件的父节点的引用

Slint 文件注释支持以下两种，与 C语言注释完全一样

• 单行注释//: 只在当前行中标记注释文字
• 多行注释  /* ... */：将多行注释包含到注释块

以上slint代码渲染如下: