> For the complete documentation index, see [llms.txt](https://docs.boii.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.boii.dev/fivem-free-resources/bduk/guides/making-your-first-ui.md).

# 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:

```lua
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:

```lua
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:

```lua
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:

```bash
/test_ui_builder
```

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.boii.dev/fivem-free-resources/bduk/guides/making-your-first-ui.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.