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