Interface components

luastra/ui

Builds a complete host-neutral semantic interface tree from validated components with stable lowercase IDs. Current web, Tauri, and Capacitor hosts render the tree as accessible semantic DOM and update it after application events.

Named fields configure one node, while numeric table entries are its ordered children. app.render must return exactly one UI.Screen root and may compose any supported containers, content, controls, and visual nodes beneath it.

Each component card below contains the complete parameter set supported by that component. Shared groups remain available as conceptual explanations, but they are no longer a substitute for the component-specific table.

Every render-tree ID must be unique and use lowercase path segments. Native adapters currently serve capability boundaries rather than replacing the semantic DOM renderer with platform-native widgets.

Complete example

local UI = require("luastra/ui")

return UI.Screen {
    id = "app",
    UI.Column {
        id = "welcome/content",
        gap = "md",
        align = "center",
        UI.Text {
            id = "welcome/title",
            text = "Welcome to Luastra",
            variant = "title",
            textAlign = "center",
        },
        UI.Button {
            id = "welcome/start",
            text = "Start",
            onTap = "welcome.start",
        },
    },
}

Detail pages

UI.PropertiesUI.ThemeUI.NodeUI.ScreenUI.ColumnUI.RowUI.TextUI.ButtonUI.IconUI.LinkUI.CodeUI.CodeBlockUI.DividerUI.TableUI.TableRowUI.TableCellUI.FlipCardUI.ImageUI.LayerUI.ShapeUI.TextInputUI.ListUI.ListItemUI.ModalUI.OrbitUI.OrbitPathUI.OrbitSearchUI.ConstellationUI.OrbitCenterUI.OrbitNodeUI.OrbitClusterUI.FocusSurfaceUI.FocusHeaderUI.OrbitReturnUI.StackUI.GridUI.ScrollUI.CardUI.FieldUI.ActionsUI.InputUI.TextStyle