# The `.slint` File
User interfaces are written in the Slint language and saved in files with the `.slint` extension.
Each `.slint` file defines one or several components. These components declare
a tree of elements. Components form the basis of composition in Slint. Use them
to build your own re-usable set of UI controls. You can use each declared
component under its name as an element in another component.
Below is an example of components and elements:
```slint
component MyButton inherits Text {
color: black;
// ...
}
export component MyApp inherits Window {
preferred-width: 200px;
preferred-height: 100px;
Rectangle {
width: 200px;
height: 100px;
background: green;
}
MyButton {
x:0;y:0;
text: "hello";
}
MyButton {
y:0;
x: 50px;
text: "world";
}
}
```
Both `MyButton` and `MyApp` are components. `Window` and `Rectangle` are built-in elements
used by `MyApp`. `MyApp` also re-uses the `MyButton` component as two separate elements.
Elements have properties, which you can assign values to. Here we assign a string
constant "hello" to the first `MyButton`'s `text` property. You
can also assign entire expressions. Slint will re-evaluate the expressions when any
of the properties they depend on change, which makes the user-interface reactive.
You can name elements using the `:=` syntax:
```slint
component MyButton inherits Text {
// ...
}
export component MyApp inherits Window {
preferred-width: 200px;
preferred-height: 100px;
hello := MyButton {
x:0;y:0;
text: "hello";
}
world := MyButton {
y:0;
text: "world";
x: 50px;
}
}
```
Names have to be valid [identifiers](../syntax/identifiers.md).
Some elements are also accessible under pre-defined names:
- `root` refers to the outermost element of a component.
- `self` refers to the current element.
- `parent` refers to the parent element of the current element.
These names are reserved and you can't re-define them.