Making Your First UI

This guide walks you through how to build your first UI layout using BDUK’s Lua-based config system. No HTML or JS needed — just declare what you want using simple tables, then call build().

---

Basic Structure

A complete UI is made up of:

• header – sits at the top of your UI with 3 sections (left/center/right)

• footer – fixed to the bottom, also with left/center/right

• content – contains all main pages and components

• (optional) sidebar – can be added later for tools or quick actions

---

Step 1: Define a UI Layout

Here’s a stripped-down version to start with:

local my_ui = {
    header = {
        layout = {
            left = { justify = "flex-start" },
            center = { justify = "center" },
            right = { justify = "flex-end" },
        },
        elements = {
            left = {
                {
                    type = "group",
                    items = {
                        { type = "logo", image = "bd_100.png" },
                        { type = "text", title = "My UI", subtitle = "Made with BDUK" }
                    }
                }
            },
            center = { { type = "tabs" } },
            right = { { type = "namecard", avatar = "avatar_placeholder.jpg", name = "Player", title = "Developer", level = 1, tier = "gold" } }
        }
    },

    content = {
        pages = {
            main_page = {
                index = 1,
                title = "Main Page",
                layout = { center = 6 },
                center = {
                    type = "input_groups",
                    title = "Options",
                    id = "basic_inputs",
                    layout = { columns = 1 },
                    groups = {
                        {
                            header = "General Settings",
                            inputs = {
                                { id = "setting_1", type = "text", label = "Your Name" },
                                { id = "setting_2", type = "number", label = "Age" }
                            }
                        }
                    },
                    buttons = {
                        { id = "save", label = "Save", on_click = function(data) ... end, class = "primary" }
                    }
                }
            }
        }
    },

    footer = {
        layout = {
            left = { justify = "flex-start" },
            center = { justify = "center" },
            right = { justify = "flex-end" },
        },
        elements = {
            left = {
                {
                    type = "buttons",
                    buttons = {
                        { id = "back", label = "Back", on_click = function(data) ... end, class = "secondary" }
                    }
                }
            },
            center = { { type = "text", text = "Made with 💙 by BOII Development" } },
            right = {
                { type = "actions", actions = { { key = "E", label = "Confirm", on_keypress = function(data) ... end, }, { key = "ESC", label = "Close", on_keypress = function(data) ... end, } } }
            }
        }
    }
}

---

Step 2: Show the UI

Just trigger it using:

RegisterCommand("open_my_ui", function()
    exports.bduk:build(my_ui)
end)

---

Adding Components

Here’s a few things you can use inside your layout sections:

Type	Description
text	Shows a label or info line
logo	Displays a logo image
tabs	Adds tabbed navigation (auto-handled)
namecard	Shows a styled player profile card
buttons	One or more clickable buttons
input_groups	Grouped form fields (number/text/etc.)
cards	Panel cards with image, info, and buttons
actions	Shows keys like E or ESC to guide users

---

Pages Explained

The content.pages section defines every page in your UI:

content = {
    pages = {
        my_page = {
            index = 1,
            title = "My Page",
            layout = { left = 3, center = 6, right = 3 },
            center = {
                type = "cards",
                title = "Items",
                layout = { columns = 2 },
                cards = { ... }
            }
        }
    }
}

Each page has:

• index: Page order

• title: Page label (used in tabs)

• layout: Grid sizes for left, center, and right (adds up to 12)

• left, center, right: Each holds a single component (e.g. cards, input_groups, etc.)

---

Tips

• All buttons can include modals or datasets

• Tooltips and keybinds are built into cards via on_hover

• Use dataset fields to pass IDs, source names, or action context

---

You’re Ready!

Try running:

/test_ui_builder

Or rename your config and register it under your own command to test.