Начнём с того что надо зареквайрить кое какие модули:

local Drawable = require("ui.Drawable")
local Rectangle = require("ui.Rectangle")

local Node = require("ui.Node")
Node.TransformParams = require("ui.desugarizer")
-- Надо сделать так чтобы могли юзать сахар

Потом нужно создать компонент который будет служить как Viewport:

local viewport = self:add(Drawable({
    size = { love.graphics.getDimensions() }
}))

Будет классно менять ему размер если меняется размер окна, но это пока не так важно.

Далее можно разделить место под хедер, контент и футер:

local screen = viewport:add(Drawable({
    size = { "grow", "grow" },
    arrange = "flow_v",
    padding = { 8, 8, 8, 8 },
    child_gap = 8
}))

local header = screen:add(Rectangle({
    size = { "grow", 50 },
    rounding = 8
})

local content = screen:add(Rectangle({
    size = { "grow", "grow" },
    rounding = 8
}))

local footer = screen:add(Drawable({
    size = { "grow", 50 },
    rounding = 8
})

Ну и я думаю что этого достаточно чтобы творить что угодно. Можно кста наследовать класс вот так и делать свои компоненты:

---@class Panel : ui.Drawable
---@operator call: Panel
local Panel = Drawable + {}

function Panel:load()
end

function Panel:update()
end

function Panel:draw()
end

А лучше читайте сорс код, мне лень пока объяснять как этим пользоватся.