Custom components

Create a reusable component by placing a .qtml file in your project and importing it with an alias. Component files declare their inputs with input; callers pass values using the same names.

Define the component

// ui/components/Card.qtml
input title: "Untitled"
input body: ""

Article {
    padding: 6
    border: 1
    border_radius: lg

    Header2 { text: $title }
    Text { text: $body }
}

Each input has a default value, so a caller can omit it. Inside the component file, read inputs through $title, $body, and other $name bindings. Inputs are scoped to the component; they do not become global template variables.

Import and render it

// ui/page.qtml
import "components/Card.qtml" as Card

Page {
    Card {
        title: "Welcome"
        body: "This card comes from another QTML file."
    }
}

Imports are file-local and require as Alias. The alias is the component name used in the template. A component can contain built-in components, other imported custom components, token imports, bindings, conditions, and loops just like a page template.