# Core UI

<figure><img src="https://3046942752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHfd391cB6wDC8S3yHcie%2Fuploads%2FbsQE5qLnUff7xF65lX7k%2Fcore_ui_preview.jpg?alt=media&#x26;token=8505fb5c-6ef1-488a-8f9e-eb9347b49c3d" alt=""><figcaption><p>All core UI elements</p></figcaption></figure>

**BDUK** is split into two sections `core/` and `components` the core UI covers the following.

* **Header** **—** With slots for branding, buttons, and maybe one day a picture of your nan's cat.
* **Footer** **—** Button hints, status text, and keybind rows for people who forget controls.
* **Sidebar** **—** Optional side menu with submenu support.
* **Content** **—** Where your actual UI goes.. the meat and veg so to speak.
* **Tooltip** **—** Hover text system. Originally from my inventory UI. Now universal.

***

{% hint style="info" %}
Header sections can support any of the support components they are entirely interchangeable, you are not fixed to the layout shown in the example image.
{% endhint %}

## 🟨 1. Header (Left)

Used here for branding — includes:

* A `group` with a `logo` and `text`

***

## 🟥 2. Header (Center)

Used here for **tabs** navigation:

* Dynamically switch between pages using a `tabs` element.

***

## 🟩 3. Header (Right)

This section contains a **namecard** and optional **buttons** like `Save` and `Exit`.

***

## 🟦 4. Content (Left)

The core content section is broken down into 3 sections `left|center|right`, like the header and footer. \
You have full control over the layout of this section.

Currently covers two pre-built components:&#x20;

* Cards
  * Displays item cards in a grid layout.
  * Each card supports images, labels, embedded actions tooltips.. etc.
  * Can be used to make anything from crafting script UI's to vehicle stores.
* Input Groups
  * Displays groups of inputs in optional expandable containers.
  * Can be used to make clothing menus, vehicle custom options or anything else you can think of.

***

## 🟥 5. Tooltip

Tooltips display **on-hover** for cards or other items:

* Includes structured info: description, value pairs, actions.
* Can display arrays of lines and metadata like rarity.
* Supports key press actions on hover — Similar to how some survival games work.

This system is global and reusable — not limited to cards.

***

## 🟪 6. Sidebar

Optional and modular vertical menu:

* Contains sections with label + item groups.
* Items can have submenus and trigger actions.
* Perfect for admin menus or editor tools.

***

{% hint style="info" %}
Footer sections can support any of the support components they are entirely interchangeable, you are not fixed to the layout shown in the example image.
{% endhint %}

## 🟨 7. Footer (Left)

Standard **button group** placed on the left:

* `Deploy`, `Cancel`, etc.
* Can be any number of buttons and can include `modal` or `on_click` actions.

***

## 🟥 8. Footer (Centre)

Here it's a **text** element ("Ready to deploy"), but you can swap it with:

* Progress bar
* Page indicator
* Custom HTML/text component

***

## 🟩 9. Footer (Right)

A simple **keybind display** using `actions`:

* Shows user what key does what
* Like `ESC = Close`, `E = Confirm`

Supports dynamic binding for different workflows.

***

## Recap

Each section supports three alignment zones:

* `left`, `centre`, `right`
* Each zone can contain any number of supported components

| Area    | Description                         |
| ------- | ----------------------------------- |
| Header  | Branding, controls, nav, info       |
| Footer  | Actions, messaging, keybinds        |
| Content | The main view (multi-pane optional) |
| Sidebar | Expandable category menu            |
| Tooltip | Dynamic hover info popup            |