TebexDiscordYouTubeGitHub

Components

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.

The layout shown is just an example — you are not locked into any positioning.

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

Usage: Any layout section or modal

Recap

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

Notifications and Modals are top level elements, they are not placed inside any specific section.

Component
Header
Footer
Content
Sidebar

Cards

❌

❌

✅

❌

Input Groups

❌

❌

✅

❌

Namecard

✅

✅

❌

❌

Buttons

✅

✅

✅

✅

Last updated