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

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

The question should be specific, self-contained, and written in natural language.
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.