### ESX Installation Configuration

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_inventory/Frameworks/esx.mdx

This snippet shows the necessary 'start' commands in server.cfg to run ox_inventory alongside other required resources like ox_mysql, ox_lib, es_extended, and qtarget.

```yaml
start oxmysql
start ox_lib
start es_extended
start qtarget
start ox_inventory
```

--------------------------------

### UI Build Process

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_inventory/issues.mdx

Explains that the UI is built with React and requires bundling into HTML/CSS/JS for FiveM. Recommends downloading pre-bundled releases or following the installation guide for manual builds.

```markdown
Because the UI for inventory is written in React it can't run natively under FiveM so it must first be bundled into html/css/js.

We provide an easy way for you to do this by downloading a pre-bundled release, which you can get from [here](https://github.com/overextended/ox_inventory/releases/latest).  
Make sure you download the `ox_inventory.zip` file as that one contains the bundled files and others are raw source code.

If in case you wanted to edit the inventory UI you would have to build these files yourself.  
To do so please read our [_Installation_](../ox_inventory#installation) guide.
```

--------------------------------

### Install and Use pnpm

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/guides/pnpm.mdx

This snippet demonstrates the basic commands for installing pnpm globally and using it to install project dependencies. It also shows how to execute scripts defined in a package.json file.

```bash
npm install -g pnpm
pnpm i
pnpm build
```

--------------------------------

### OxAccount.addBalance Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Server/OxAccount.mdx

Example of how to add funds to an account using the addBalance method.

```lua
account.addBalance({ amount = 1000, message = 'Paycheck' })
```

--------------------------------

### Install and Build Ox Lib

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib.mdx

Steps to clone the Ox Lib repository, install dependencies, and build the web assets.

```bash
git clone https://github.com/overextended/ox_lib.git
cd ox_lib/web
pnpm i
pnpm build
```

--------------------------------

### Resource Start Order

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_inventory.mdx

Recommended order for starting Ox Inventory and its dependencies to prevent errors.

```bash
start oxmysql   # this should be one of the first resources
start ox_lib
start framework # the name of your framework (i.e. ox_core, es_extended, qbx_core)
start ox_target
start ox_inventory
```

--------------------------------

### Install Dependencies

Source: https://github.com/overextended/overextended.github.io/blob/main/README.md

Installs the necessary project dependencies using pnpm.

```pnpm
pnpm i
```

--------------------------------

### OxAccount.transferBalance Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Server/OxAccount.mdx

Example demonstrating how to transfer funds between accounts with optional messages and notes.

```lua
account.transferBalance({
  toId = 100000000,
  amount = 20,
  message = 'Impound charge for plate ABC123',
  overdraw = false,
  note = 'Impound payment',
})
```

--------------------------------

### Install and Build Ox Core

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core.mdx

Steps to clone the Ox Core repository, install dependencies, and build the project using pnpm.

```bash
git clone https://github.com/overextended/ox_core.git
cd ox_core
pnpm i
pnpm build
```

--------------------------------

### Install and Build Ox Doorlock

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_doorlock.mdx

Steps to clone the Ox Doorlock repository, install web dependencies, and build the project.

```bash
git clone https://github.com/overextended/ox_doorlock.git
cd ox_doorlock/web
pnpm i
pnpm build
```

--------------------------------

### RegisterShop Export Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_inventory/Guides/shops.mdx

Demonstrates how to register a shop dynamically at runtime using the `RegisterShop` export from `ox_inventory`. This method is useful for adding shops after the initial server start but has limitations regarding client-only features.

```lua
exports.ox_inventory:RegisterShop('TestShop', {
    name = 'Test shop',
    inventory = {
        { name = 'burger', price = 10 },
        { name = 'water', price = 10 },
        { name = 'cola', price = 10 },
    },
    locations = {
        vec3(223.832962, -792.619751, 30.695190),
    },
    groups = {
        police = 0
    },
})
```

--------------------------------

### Ox Inventory Installation and Build

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_inventory.mdx

Steps to clone the Ox Inventory repository, install dependencies, and build the web assets for the inventory system.

```bash
git clone https://github.com/overextended/ox_inventory.git
cd ox_inventory/web
pnpm i
pnpm build
```

--------------------------------

### Start Development Server

Source: https://github.com/overextended/overextended.github.io/blob/main/README.md

Starts the development server for local testing and development. The server is accessible at localhost:3000.

```pnpm
pnpm dev
```

--------------------------------

### Install Ox Target

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_target.mdx

Clones the Ox Target repository from GitHub to install the resource.

```bash
git clone https://github.com/overextended/ox_target.git
```

--------------------------------

### Verify Node.js Installation

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/guides/nodejs.mdx

Confirms that Node.js has been successfully installed by checking its version in the command-line terminal.

```bash
node --version
```

--------------------------------

### Basic Input Dialog

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/input.mdx

Demonstrates the basic usage of `lib.inputDialog` to get simple text input from the user. It shows how to display a dialog with predefined options and process the returned values. Both Lua and JavaScript examples are provided, highlighting asynchronous behavior in JavaScript.

```Lua
local input = lib.inputDialog('Basic dialog', {'First row', 'Second row'})

if not input then return end
print(json.encode(input), input[1], input[2])
```

```JavaScript
const input = await lib.inputDialog('Basic dialog', ['First row', 'Second row']);

if (!input) return;
console.log(input, input[0], input[1]);
```

--------------------------------

### TextUI Usage Example - Basic

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/textui.mdx

A basic example demonstrating how to show a simple TextUI prompt in both Lua and JavaScript.

```lua
lib.showTextUI('[E] - Fuel vehicle')
```

```javascript
import lib from '@overextended/ox_lib/client';

lib.showTextUI('[E] - Fuel vehicle');
```

--------------------------------

### Configure VSCode Lua Workspace Library

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/guides/types.mdx

This JSON configuration snippet shows how to update your VSCode `settings.json` file to include the paths to your cloned Lua type definitions. This allows VSCode's Lua language server to recognize and utilize the type definitions for improved development experience.

```json
"Lua.workspace.library": [
    "F:/GitHub/ox_types/types",
    "F:/GitHub/ox_lib"
]
```

--------------------------------

### lib.logger Example Usage

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Logger/Server.mdx

An example demonstrating how to use the lib.logger function to log vehicle creation details.

```lua
local vehicle = Ox.CreateVehicle(false, `sultanrs`, vector4(-56.479122, -1116.870362, 26.432250, 0.000030517578))
lib.logger(-1, 'CreateVehicle', json.encode(vehicle))
```

--------------------------------

### Install OxMySQL npm Package

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/oxmysql.mdx

Installs the OxMySQL npm package for JavaScript development, providing intellisense and a similar usage pattern to Lua.

```bash
# With pnpm
pnpm add @overextended/oxmysql

# With Yarn
yarn add @overextended/oxmysql

# With npm
npm install @overextended/oxmysql
```

--------------------------------

### Icon Usage Example (JavaScript)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib.mdx

Example of defining an icon using an array for type and name in JavaScript.

```javascript
const icon: ['fab', 'apple'];
```

--------------------------------

### Alert Dialog Example (Lua)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/alert.mdx

Example usage of `lib.alertDialog` in Lua, demonstrating how to set parameters and handle the return value.

```lua
local alert = lib.alertDialog({
    header = 'Hello there',
    content = 'General Kenobi  \n Markdown support!',
    centered = true,
    cancel = true
})

print(alert)
```

--------------------------------

### Interactive Marker Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Marker/Client.mdx

Shows an example of an interactive marker that displays a notification when a player is nearby and presses a key.

```lua
local center = vec3(430.452759, -1026.108032, 27.846140)
local uiText = "Press [E] to get notified"

local point = lib.points.new({
  coords = center,
  distance = 20,
})

local marker = lib.marker.new({
  coords = center,
  type = 1,
})

function point:nearby()
  marker:draw()

  if self.currentDistance < 1.5 then
    if not lib.isTextUIOpen() then
      lib.showTextUI("Press [E] to get notified")
    end

    if IsControlJustPressed(0, 51) then
      lib.notify({
        description = "Hello, World!"
      })
    end
  else
  local isOpen, currentText = lib.isTextUIOpen()
    if isOpen and currentText == uiText then
      lib.hideTextUI()
    end
  end
end
```

--------------------------------

### OxPlayer.emit Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Server/OxPlayer.mdx

Demonstrates triggering a client event for the player with arguments.

```lua
player.emit(eventName, ...args)
```

--------------------------------

### Install Ox Core JavaScript Package

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core.mdx

Instructions for installing the Ox Core npm package for use in JavaScript or TypeScript FiveM resources.

```bash
pnpm i @overextended/ox_core
```

--------------------------------

### Icon Usage Example (Lua)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib.mdx

Example of defining an icon using a string for the default 'solid' type in Lua.

```lua
icon = 'fab'
-- or
icon = {'fab', 'apple'}
```

--------------------------------

### OxPlayer.getLicenses Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Server/OxPlayer.mdx

Retrieves information for all licenses associated with the player.

```lua
player.getLicenses()
```

--------------------------------

### OxPlayer.getStatuses Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Client/OxPlayer.mdx

Shows how to retrieve all statuses and their values for a player.

```lua
local allStatuses = player.getStatuses()
```

--------------------------------

### Server-Side Callback Usage Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Callback/JavaScript/Server.mdx

An example demonstrating how to use `onClientCallback` to listen for a 'test:server' event and `triggerClientCallback` to send a request to a client and receive a response.

```ts
import { onClientCallback, triggerClientCallback } from '@overextended/ox_lib/server';
```

```ts
onClientCallback('test:server', (playerId, ...args: [number, null, number, null, null, number]) => {
  console.log('onClientCallback', playerId, ...args);
  return {
    serverValue: 3000,
  };
});
```

```ts
setTimeout(async () => {
  const response = await triggerClientCallback<{ clientValue: string }>('test:client', 1, [1, null, 3, null, null, 6])
  if (!response) return;
  console.log(response.clientValue);
  console.log('Response from client', response);
}, 100);
```

--------------------------------

### Marker Usage Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Marker/Client.mdx

Demonstrates how to create a marker and continuously draw it in a loop.

```lua
local marker = lib.marker.new({
	type = 1,
	coords = GetEntityCoords(cache.ped),
	color = { r = 255, g = 0, b = 0, a = 200 },
})

Citizen.CreateThread(function()
	while true do
		marker:draw()

		Citizen.Wait(1)
	end
end)
```

--------------------------------

### OxPlayer.getLicense Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Server/OxPlayer.mdx

Fetches details for a specific license held by the player.

```lua
player.getLicense(licenseName: string): object
```

--------------------------------

### OxPlayer.getStatus Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Client/OxPlayer.mdx

Demonstrates how to get the current value of a player's status.

```lua
local energyLevel = player.getStatus("energy")
```

--------------------------------

### OxPlayer.getCoords Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Client/OxPlayer.mdx

Illustrates how to get the player's current world coordinates.

```lua
local coords = player.getCoords()
```

--------------------------------

### Qbox Installation Configuration

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_inventory/Frameworks/qbx.mdx

This snippet shows the necessary configuration steps within the server.cfg file to integrate Qbox with ox_inventory. It involves setting a specific environment variable and ensuring the correct resource startup order.

```cfg
setr inventory:framework "qbx"
# Start ox_inventory immediately after qbx_core.
```

--------------------------------

### Clone ox_types Repository

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/guides/types.mdx

This command clones the official Overextended Lua type definitions repository from GitHub. This is a necessary step to enable type checking and autocompletion within your VSCode environment.

```bash
git clone https://github.com/overextended/ox_types.git
```

--------------------------------

### Development Server for UI

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib.mdx

Commands to start the development server for UI with hot reloads or for in-game use.

```bash
# For browser development with hot reloads:
pnpm start

# For in-game development (changes written to disk):
pnpm start:game
```

--------------------------------

### OxAccount.removeBalance Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Server/OxAccount.mdx

Example of how to remove funds from an account, including the option to overdraw.

```lua
account.removeBalance({ amount = 1000, message = 'Impound', overdraw = true })
```

--------------------------------

### OxPlayer.addLicense Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Server/OxPlayer.mdx

Demonstrates how to grant a license to a player using the addLicense method.

```lua
player.addLicense(licenseName)
```

--------------------------------

### OxPlayer.on Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_core/Classes/Client/OxPlayer.mdx

Shows how to listen for changes to a player's metadata and execute a callback.

```lua
player.on("money", function(newMoney) print("Player money updated to: " .. newMoney) end)
```

--------------------------------

### Usage Example: Progress Bar (JavaScript)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/progress.mdx

Example demonstrating how to use the `lib.progressBar` function in JavaScript, including setting duration, label, cancellation, disabling car movement, and attaching animations and props. This example uses `async/await` for handling the promise.

```typescript
import lib from '@overextended/ox_lib/client'

if (await lib.progressBar({
  duration: 2000,
  label: 'Drinking water',
  useWhileDead: false,
  canCancel: true,
  disable: {
    car: true,
  },
  anim: {
    dict: 'mp_player_intdrink',
    clip: 'loop_bottle'
  },
  prop: {
    model: `prop_ld_flow_bottle`,
    pos: {x: 0.03, y: 0.03, z: 0.02},
    rot: {x: 0.0, y: 0.0, z: -1.5}
  },
})) console.log('Do stuff when complete');
else console.log('Do stuff when cancelled')
```

--------------------------------

### TargetOption Example (Lua)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_target/TargetOptions.mdx

Illustrative Lua code demonstrating how to define a TargetOption with various properties.

```lua
local myTargetOption = {
  label = "Pick up item",
  icon = "hand-paper",
  bones = "CHLD_R_Hand",
  distance = 2.0,
  items = {
    ["keycard"] = 1
  },
  onSelect = function(data)
    print("Item picked up!")
  end,
  event = "player:itemPickup"
}
```

--------------------------------

### Build UI Dependencies and Build

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib.mdx

Commands to install Node.js dependencies and build the UI source files.

```bash
pnpm i
pnpm build
```

--------------------------------

### Datadog Configuration

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Logger/Server.mdx

Configuration commands for setting up Datadog logging. Requires setting the API key and the Datadog site.

```bash
set datadog:key "yourapikey"
set datadog:site "datadoghq.com"
```

--------------------------------

### Burger Item Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_inventory/Guides/creatingItems.mdx

Demonstrates how to define a 'Burger' item with basic properties, including weight, stacking, and client-side animation and prop for consumption.

```lua
['burger'] = {
    label = 'Burger',
    weight = 220,
    stack = true,
    close = true,
    client = {
        status = { hunger = 200000 },
        anim = { dict = 'mp_player_inteat@burger', clip = 'mp_player_int_eat_burger_fp' },
        prop = {
            model = 'prop_cs_burger_01',
            pos = { x = 0.02, y = 0.02, y = -0.02},
            rot = { x = 0.0, y = 0.0, y = 0.0}
        },
        usetime = 2500,
    }
}
```

--------------------------------

### Example package.json Scripts

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/guides/pnpm.mdx

This JSON snippet shows a typical 'scripts' section in a package.json file, defining various build, watch, and formatting tasks that can be executed using pnpm.

```json
{
  "scripts": {
    "start": "vite",
    "watch": "vite build --watch",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "format": "prettier --write \"./src/**/*.{ts,tsx,css}\""
  }
}
```

--------------------------------

### Alert Dialog Example (JavaScript/TypeScript)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/alert.mdx

Example usage of `lib.alertDialog` in JavaScript/TypeScript, showing asynchronous handling with `await`.

```typescript
import lib from '@overextended/ox_lib/client';

const alert = await lib.alertDialog({
  header: 'Hello there',
  content: 'General Kenobi  \n Markdown support!',
  centered: true,
  cancel: true,
});

console.log(alert);
```

--------------------------------

### Displaying a Context Menu via Command

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/context.mdx

Provides an example of registering a command that, when executed, displays a specific context menu to the user.

```Lua
RegisterCommand('testcontext', function()
  lib.showContext('some_menu')
end)
```

```JavaScript
RegisterCommand('testcontext', () => {
  lib.showContext('some_menu');
});
```

--------------------------------

### lib.notify Usage Example (Standard)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/notify.mdx

A standard example of using the lib.notify function to display a notification with a title, description, and type.

```lua
lib.notify({
    title = 'Notification title',
    description = 'Notification description',
    type = 'success'
})
```

```typescript
import lib from '@overextended/ox_lib/client';

lib.notify({
  title: 'Notification title',
  description: 'Notification description',
  type: 'success',
});
```

--------------------------------

### Fivemanage Configuration

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Logger/Server.mdx

Configuration commands for setting up Fivemanage logging. Requires setting the logger service and the Fivemanage API key.

```bash
set ox:logger "fivemanage"
set fivemanage:key "YOUR_API_KEY"
```

--------------------------------

### Next.js Theme Docs Setup

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_fuel.mdx

Imports necessary components for a Next.js documentation site using nextra-theme-docs. It includes Steps for sequential instructions and ResourceLinks for external repository links.

```javascript
import { Steps } from 'nextra-theme-docs';
import ResourceLinks from '@components/resource-links';
```

--------------------------------

### Register and Show Menu (JavaScript)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/menu.mdx

Provides a JavaScript example for registering a menu with similar functionalities as the Lua version, including callbacks for interactions and options for different button types. It also shows how to register a command to display the menu.

```javascript
import lib from '@overextended/ox_lib/client';

lib.registerMenu(
  {
    id: 'some_menu_id',
    title: 'Menu title',
    position: 'top-right',
    onSideScroll: (selected, scrollIndex, args) => {
      console.log('Scroll: ', selected, scrollIndex, args);
    },
    onSelected: (selected, secondary, args) => {
      if (!secondary) {
        console.log('Normal button');
      } else {
        if (args.isCheck) {
          console.log('Check button');
        }

        if (args.isScroll) {
          console.log('Scroll button');
        }
      }
      console.log(selected, secondary, JSON.stringify(args, null, 2));
    },
    onCheck: (selected, checked, args) => {
      console.log('Check: ', selected, checked, args);
    },
    onClose: (keyPressed) => {
      console.log('Menu closed');
      if (keyPressed) {
        console.log(`Pressed ${keyPressed} to close the menu`);
      }
    },
    options: [
      { label: 'Simple button', description: 'It has a description!' },
      { label: 'Checkbox button', checked: true },
      { label: 'Scroll button with icon', icon: 'arrows-up-down-left-right', values: ['hello', 'there'] },
      { label: 'Button with args', args: { someArg: 'nice_button' } },
      {
        label: 'List button',
        values: ['You', 'can', 'side', 'scroll', 'this'],
        description: 'It also has a description!',
      },
      { label: 'List button with default index', values: ['You', 'can', 'side', 'scroll', 'this'], defaultIndex: 5 },
      {
        label: 'List button with args',
        values: ['You', 'can', 'side', 'scroll', 'this'],
        args: { someValue: 3, otherValue: 'value' },
      },
    ],
  },
  (selected, scrollIndex, args) => {
    console.log(selected, scrollIndex, args);
  }
);

RegisterCommand(
  'testmenu',
  () => {
    lib.showMenu('some_menu_id');
  },
  false
);
```

--------------------------------

### Skill Check Usage Example

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/skillcheck.mdx

Demonstrates how to use the lib.skillCheck function with a mix of preset and custom difficulties, along with a set of input keys.

```lua
local success = lib.skillCheck({'easy', 'easy', {areaSize = 60, speedMultiplier = 2}, 'hard'}, {'w', 'a', 's', 'd'})
```

```typescript
import lib from '@overextended/ox_lib/client';

const success = await lib.skillCheck(
  ['easy', 'easy', { areaSize: 60, speedMultiplier: 2 }, 'hard'],
  ['w', 'a', 's', 'd']
);
```

--------------------------------

### Qbox Project GitHub Import

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_inventory/Frameworks/qbx.mdx

This JavaScript snippet demonstrates how to import Callout and Tabs components from 'nextra/components' and 'nextra-theme-docs' respectively, likely for use in documentation pages.

```javascript
import { Callout } from 'nextra/components';
import { Tabs, Tab } from 'nextra-theme-docs';
```

--------------------------------

### lib.notify Usage Example (Custom)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/notify.mdx

A custom example demonstrating advanced usage of lib.notify with options for ID, duration, position, styling, icons, and sounds.

```lua
lib.notify({
    id = 'some_identifier',
    title = 'Notification title',
    description = 'Notification description',
    showDuration = false,
    position = 'top',
    style = {
        backgroundColor = '#141517',
        color = '#C1C2C5',
        ['.description'] = {
          color = '#909296'
        }
    },
    icon = 'ban',
    iconColor = '#C53030'
})
```

```typescript
import lib from '@overextended/ox_lib/client';

lib.notify({
  id: 'some_identifier',
  title: 'Notification title',
  description: 'Notification description',
  showDuration: false,
  position: 'top',
  style: {
    backgroundColor: '#141517',
    color: '#C1C2C5',
    '.decription': {
      color: '#909296',
    },
  },
  icon: 'ban',
  iconColor: '#C53030',
});
```

--------------------------------

### TextUI Usage Example - Custom Styling

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/textui.mdx

An example showcasing custom styling options for the TextUI, including position, icon, and background color, in both Lua and JavaScript.

```lua
lib.showTextUI('[E] - Pick apple', {
    position = "top-center",
    icon = 'hand',
    style = {
        borderRadius = 0,
        backgroundColor = '#48BB78',
        color = 'white'
    }
})
```

```javascript
import lib from '@overextended/ox_lib/client';

lib.showTextUI('[E] - Pick apple', {
  position: 'top-center',
  icon: 'hand',
  style: {
    borderRadius: 0,
    backgroundColor: '#48BB78',
    color: 'white',
  },
});
```

--------------------------------

### rawExecute Callback Example (JS)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/oxmysql/Functions/rawExecute.mdx

Provides an example of rawExecute with a callback in JavaScript for fetching user details. The callback function logs the stringified response to the console.

```JS
MySQL.rawExecute('SELECT `firstname`, `lastname` FROM `users` WHERE `identifier` = ?', [
  identifier
], (response) => {
  console.log(JSON.stringify(response))
})
```

--------------------------------

### Usage Example: Progress Bar (Lua)

Source: https://github.com/overextended/overextended.github.io/blob/main/pages/ox_lib/Modules/Interface/Client/progress.mdx

Example demonstrating how to use the `lib.progressBar` function in Lua, including setting duration, label, cancellation, disabling car movement, and attaching animations and props.

```lua
if lib.progressBar({
    duration = 2000,
    label = 'Drinking water',
    useWhileDead = false,
    canCancel = true,
    disable = {
        car = true,
    },
    anim = {
        dict = 'mp_player_intdrink',
        clip = 'loop_bottle'
    },
    prop = {
        model = `prop_ld_flow_bottle`,
        pos = vec3(0.03, 0.03, 0.02),
        rot = vec3(0.0, 0.0, -1.5)
    },
}) then print('Do stuff when complete') else print('Do stuff when cancelled') end
```