Modern UI

Drawers provide a slide-in panel for displaying markdown content, structured sections, and optional footer actions. Ideal for evidence reports, quest details, intel briefings, and other read-only UI with optional confirm or submit buttons.

The drawer body is read-only — it does not include text inputs or form fields. Use Input for player-entered data.

Quick Start

exports.lation_ui:showDrawer({
    id = 'evidence_report',
    title = 'Evidence Report',
    subtitle = 'Case #4421',
    icon = 'fas fa-file-lines',
    position = 'right',
    backdrop = true,
    content = '**Blood sample** collected at scene.',
    actions = {
        {
            label = 'Submit',
            variant = 'primary',
            serverEvent = 'police:submitEvidence',
            args = { caseId = 4421 },
        },
    }
})

Functions

showDrawer

Open a drawer panel.

local opened = exports.lation_ui:showDrawer(data)

Parameters:

data (table) - Drawer configuration object (see Options)

Returns:

opened (boolean) - true if the drawer was shown, false if validation failed

hideDrawer

Close the currently open drawer.

local closed = exports.lation_ui:hideDrawer(id)

Parameters:

id (string, optional) - Drawer ID to close. If omitted, closes whichever drawer is open. If provided, only closes when the active drawer matches.

Returns:

closed (boolean) - true if a drawer was closed, false otherwise

updateDrawer

Partially update an open drawer without closing it.

local updated = exports.lation_ui:updateDrawer(id, data)

Parameters:

id (string, required) - ID of the open drawer to update
data (table, required) - Partial drawer data to merge (e.g. new content, sections, or actions)

Returns:

updated (boolean) - true if the drawer was updated, false if no matching drawer is open

isDrawerOpen

Check if a drawer is currently open.

local isOpen = exports.lation_ui:isDrawerOpen(id)

Parameters:

id (string, optional) - If provided, checks whether that specific drawer is open

Returns:

isOpen (boolean) - true if a drawer is open (or the specified drawer is open), false otherwise

Configuration

Options

string

required

Unique drawer identifier

title

string

Header title (supports markdown)

At least one of title, subtitle, content, or sections must be provided.

subtitle

string

Header subtitle (supports markdown)

content

string

Simple markdown body text

sections

table

Structured content blocksSee Sections for available types.

icon

string

FontAwesome icon class (e.g. 'fas fa-file-lines')

iconColor

string

default:"#9CA3AF"

Icon color using hex code or CSS color name

iconAnimation

string

Icon animation typeAvailable options: 'spin', 'spinPulse', 'spinReverse', 'pulse', 'beat', 'fade', 'beatFade', 'bounce', 'shake'

position

string

default:"right"

Slide-in positionOptions: 'left', 'right', 'bottom'

size

string

default:"md"

Panel width (left/right positions only)Options: 'sm' (320px), 'md' (400px), 'lg' (480px)

backdrop

boolean

default:"false"

Dim the background behind the drawer

Visual only - the backdrop is not clickable. Players dismiss via X, Escape, footer actions, or hideDrawer().

canClose

boolean

default:"true"

Whether the player can dismiss the drawer interactivelyWhen true (default):

Shows X button, footer actions, and Escape-to-close
Enables cursor focus while keeping WASD movement
Disables camera look while open

When false:

Display-only overlay (no X, no footer buttons, no cursor lock)
Must be closed programmatically with hideDrawer()

actions

table

Footer action buttonsPass one or more buttons — you are not required to include both Close and Submit.See Actions for button options.

Sections

Structured content blocks for the drawer body. Use sections instead of or alongside content.

text
callout
keyValue
image
divider

type

string

required

Must be 'text'

content

string

required

Markdown paragraph(s)

type

string

required

Must be 'callout'

label

string

Callout title (supports markdown)

description

string

required

Callout body text (supports markdown)

calloutType

string

default:"info"

Options: 'info', 'success', 'warning', 'error'

icon

string

Optional FontAwesome icon

type

string

required

Must be 'keyValue'

items

table

required

Array of rows with label, value, and optional progress, progressColor, or colorScheme

type

string

required

Must be 'image'

src

string

required

Image URL

alt

string

Alt text

caption

string

Optional caption (supports markdown)

type

string

required

Must be 'divider'

Example:

sections = {
    {
        type = 'callout',
        calloutType = 'warning',
        label = 'Partial match',
        description = 'Sample needs lab confirmation',
    },
    {
        type = 'keyValue',
        items = {
            { label = 'Blood type', value = 'O+' },
            { label = 'DNA match', value = '72%', progress = 72, progressColor = '#F59E0B' },
        },
    },
    { type = 'divider' },
    {
        type = 'text',
        content = 'Found near the **north entrance**.',
    },
}

Actions

Footer buttons for player interaction. Each button can fire a client or server event with optional data.

label

string

required

Button text (e.g. 'Close', 'Submit', 'Confirm')

icon

string

Optional FontAwesome icon

variant

string

default:"default"

Button styleOptions: 'default', 'primary', 'destructive'

event

string

Client event to trigger on click

serverEvent

string

Server event to trigger on click

args

table

Data passed to event or serverEvent

args = { caseId = 4421, evidenceId = 'blood_01' }

boolean

default:"true"

Close the drawer after the button is clickedSet to false to fire the event and keep the drawer open (e.g. a refresh action)

Footer args are defined by your script when opening the drawer - the player does not type new data into the panel. Closing via X or Escape only notifies Lua that the drawer closed; no custom args are returned.

Preview

Weed

Coke

Meth

Chop Shop

Shops Creator

Money Laundering

Metal Detecting

Scuba Diving

Drug Sales

Modern UI - Drawer

Quick Start

Functions

Configuration

Options

Sections

Actions

Preview

​Quick Start

​Functions

​Configuration

​Options

​Sections

​Actions

​Preview

Quick Start

Functions

Configuration

Options

Sections

Actions

Preview