> ## Documentation Index
> Fetch the complete documentation index at: https://lationscripts.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Modern UI - Text UI

> Contextual text displays with markdown support, icons, and keybind indicators

## Quick Start

```lua theme={null}
exports.lation_ui:showText({
    description = 'Press to interact with this object',
    keybind = 'E',
    icon = 'fas fa-hand-paper'
})
```

## Functions

<AccordionGroup>
  <Accordion title="showText" icon="eye">
    Display a text UI element to the player.

    ```lua theme={null}
    exports.lation_ui:showText(data)
    ```

    **Parameters:**

    * `data` (table) - Text UI configuration object (see [Options](#options))
  </Accordion>

  <Accordion title="hideText" icon="eye-slash">
    Hide the currently displayed text UI.

    ```lua theme={null}
    exports.lation_ui:hideText()
    ```
  </Accordion>

  <Accordion title="isOpen" icon="circle-question">
    Check if a text UI is currently open.

    ```lua theme={null}
    local isOpen, displayText = exports.lation_ui:isOpen()
    ```

    **Returns:**

    * `isOpen` (boolean) - `true` if text UI is open, `false` otherwise
    * `displayText` (string | nil) - The currently displayed text, or nil if not open
  </Accordion>
</AccordionGroup>

## Configuration

### Options

<ParamField path="title" type="string">
  Text UI title

  <Note>
    Either `title`, `description`, or `options` is required
  </Note>
</ParamField>

<ParamField path="description" type="string">
  Main text content (supports markdown)

  <Note>
    Either `title`, `description`, or `options` is required
  </Note>
</ParamField>

<ParamField path="position" default="right-center" type="string">
  Text UI position on screen

  Available options: `'top-left'`, `'top-center'`, `'top-right'`, `'left-center'`, `'center'`, `'right-center'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'`
</ParamField>

<ParamField path="icon" type="string">
  FontAwesome icon class
</ParamField>

<ParamField path="iconColor" default="#71717A" type="string">
  Icon color (hex or [CSS color name](https://htmlcolorcodes.com/color-names/))
</ParamField>

<ParamField path="iconAnimation" type="string">
  Icon animation type

  Available options: `'spin'`, `'spinPulse'`, `'spinReverse'`, `'pulse'`, `'beat'`, `'fade'`, `'beatFade'`, `'bounce'`, `'shake'`
</ParamField>

<ParamField path="keybind" type="string">
  Keybind text to display
</ParamField>

<ParamField path="options" type="table">
  Array of option items for multi-option display (see [Items](#items))
</ParamField>

<ParamField path="bgColor" default="#1E1F24" type="string">
  Background color (hex or [CSS color name](https://htmlcolorcodes.com/color-names/))
</ParamField>

<ParamField path="txtColor" default="#E4E4E7" type="string">
  Text color (hex or [CSS color name](https://htmlcolorcodes.com/color-names/))
</ParamField>

### Items

When using the `options` parameter, each item in the array supports:

<ParamField path="label" type="string" required>
  Option label text (supports markdown)
</ParamField>

<ParamField path="icon" type="string">
  FontAwesome icon class
</ParamField>

<ParamField path="iconColor" type="string">
  Icon color (hex or [CSS color name](https://htmlcolorcodes.com/color-names/))

  <Note>
    Inherits from main icon color if not specified
  </Note>
</ParamField>

<ParamField path="iconAnimation" type="string">
  Icon animation type

  Available options: `'spin'`, `'spinPulse'`, `'spinReverse'`, `'pulse'`, `'beat'`, `'fade'`, `'beatFade'`, `'bounce'`, `'shake'`
</ParamField>

<ParamField path="keybind" type="string">
  Keybind text for this option
</ParamField>

## Preview

<Frame>
  <img src="https://mintcdn.com/lationscripts/Ti0acW9JT3q4BC3Y/resources/modern-ui/components/text-ui/example.webp?fit=max&auto=format&n=Ti0acW9JT3q4BC3Y&q=85&s=d070b35f1ac84efb0368faa71c0d6755" alt="Text UI Example" width="648" height="288" data-path="resources/modern-ui/components/text-ui/example.webp" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/lationscripts/Ti0acW9JT3q4BC3Y/resources/modern-ui/components/text-ui/advanced-example.webp?fit=max&auto=format&n=Ti0acW9JT3q4BC3Y&q=85&s=5f838b631aef166839c3d3b55c3bf3d1" alt="Text UI Multi-Option Example" width="574" height="730" data-path="resources/modern-ui/components/text-ui/advanced-example.webp" />
</Frame>
