---
id: kw-ui
name: ui
category: structure
kind: keyword
tokens: ui
sig: ui { panel { … } }
tip: Declare a retained widget tree as data; the engine lays it out and draws it.
order: 50
---

A <code>ui</code> block declares a <b>retained</b> widget tree as data — panels, labels and buttons — and hands layout, drawing and keyboard focus to the engine, so you describe the interface once instead of repainting it every frame. Widget types are `panel` (a container with optional skin/background/border), `col`/`row` (pure stacks), `label`, `button` (focusable), `image` and `spacer`, and their props are evaluated at build time, so `font: title_font` reads a value the program set first. Each `id: Name` mints a `UI_Name` handle you drive from handlers: call `Ui.build()` then `Ui.open(UI_MainMenu)` at start, `Ui.tick(Input.key())` each update to move focus and activate, and `Ui.clicked(UI_Name)` to react. Draw it during `Render` with `Ui.render()` between `Screen.clear` and `Screen.show()`.

```ludic
program TitleScreen {
  var title_font: int = 0

  ui MainMenu {
    panel id: Root w: 288 pad: 16 gap: 6 bg: 0x1a1a2c align: center {
      label  text: "CHRONO RIFT" font: title_font size: 26 fg: 0xffe060 align: center
      button id: NewGame text: "New Game" font: title_font size: 16 w: 236
      button id: Quit    text: "Quit"     font: title_font size: 16 w: 236
    }
  }

  handler Boot phase Start {
    title_font = Font.load("/System/Library/Fonts/Supplemental/Arial.ttf")
    Ui.build()
    Ui.open(UI_MainMenu)
  }

  handler Navigate phase Update {
    Ui.tick(Input.key())
    if Ui.clicked(UI_Quit) { quit() }
  }

  handler DrawWorld phase Render {
    Screen.clear(Color.MidnightBlue)
    Ui.render()
    Screen.show()
  }
}
```