# Components

<figure><img src="https://3046942752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHfd391cB6wDC8S3yHcie%2Fuploads%2Fcg0zRCJh3Gh0W4AmA2Bc%2Fcore_ui_preview5.jpg?alt=media&#x26;token=24e9c267-0a81-4845-ba40-9a02d108358b" alt=""><figcaption></figcaption></figure>

**BDUK** includes a growing list of UI components that you can mix, match, and reuse across headers, footers, sidebars, and main content areas.

This example layout showcases multiple core components working together in one interface. \
Each element is modular and can be placed anywhere **that supports that type of component**.

{% hint style="info" %}
The layout shown is just an example — you are not locked into any positioning.
{% endhint %}

***

## 🟩 **1. Cards (Column)**

Displayed in the **left section** of the content layout.\
Cards are visual containers that support:

* Images, labels, descriptions
* Embedded buttons or modals
* Hover tooltips for extra info
* Flexible layouts: column or row

**Usage:** Content only

***

## 🟥 **2. Input Groups**

Displayed in the **centre section**.\
Grouped input elements under titled headers:

* Supports expanding/collapsing groups
* Includes text, number, select and more
* Pre-styled and layout-ready

**Usage:** Content only

***

## 🟦 **3. Cards (Row)**

Displayed in the **right section**, using a scrollable row layout.\
Behaves like column cards but flows horizontally:

* Set `layout.flex = "row"`
* Combine with scroll for carousels or horizontal menus

**Usage:** Content only

***

## 🟨 **4. Namecard**

Displayed in the **top right** of the header, but can also go in the footer.\
Compact user block showing:

* Player name/title
* Optional avatar, tier, or badge

**Usage:** Header or Footer

***

## 🟪 **5. Notifications**

Shown as floating stack elements — typically top right.\
Display system-wide messages or alerts:

* Color-coded by type or rarity
* Icon, border, and shadow support
* Auto-dismiss or persist as needed

**Usage:** Global (top-level only)

***

## 🟫 **6. Modal**

Popup displayed in centre of screen on action.\
Used for inline editing, confirmation, or input:

* Title, inputs, and action buttons
* Optional dataset for advanced logic

**Usage:** Triggered from any component button or keypress.

***

## 🟥 **7. Buttons**

Buttons are one of the most flexible and essential components in BDUK.\
They can be used anywhere that accepts components, including:

* Headers
* Footers
* Content sections
* Sidebars
* Modals

Each button supports:

* Dataset attributes passed to Lua or other NUI handlers
* Optional modals defined inline (`data-modal`)
* Optional `should_close` flag to auto-close the UI builder after action

Buttons are automatically bound to handle modal opening and NUI callbacks without any extra setup. You can define as many as you want in a group.

&#x20;**Usage:** Any layout section or modal

***

## Recap

Every component in BDUK is modular, but not every component belongs everywhere:

{% hint style="info" %}
Notifications and Modals are top level elements, they are not placed inside any specific section.
{% endhint %}

| Component    | Header | Footer | Content | Sidebar |
| ------------ | ------ | ------ | ------- | ------- |
| Cards        | ❌      | ❌      | ✅       | ❌       |
| Input Groups | ❌      | ❌      | ✅       | ❌       |
| Namecard     | ✅      | ✅      | ❌       | ❌       |
| Buttons      | ✅      | ✅      | ✅       | ✅       |