### Example Script: Full Config Workflow

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/configs.mdx

A comprehensive example demonstrating the creation, saving, loading, and registration of a toggle element within a configuration.

```luau
local ConfigManager = Window.ConfigManager
local myConfig = ConfigManager:CreateConfig("config1") -- will be saved as config1.json

Tab:Toggle({
    Title = "Toggle Example",
    Flag = "ToggleElement",
    Callback = function(v)
        print("Toggle: " .. v)
    end
})

myConfig:Save()
myConfig:Load()
```

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

### Create Window (Short Example)

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/window.mdx

A concise example for creating a WindUI window with only the essential parameters. Suitable for basic window creation.

```luau
local Window = WindUI:CreateWindow({
    Title = "My Super Hub",
    Icon = "door-open", -- lucide icon. optional
    Author = ".ftgs and .ftgs", -- optional
})

```

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

### Install Dependencies with npm and aftman

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/installation.mdx

Navigate to the cloned directory and install npm packages. Requires aftman for darklua installation.

```bash
cd WindUI

npm install
aftman install
```

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

### Create Section (Full Example)

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/section.mdx

Use this snippet to create a section with detailed configuration options.

```luau
local Section = Tab:Section({
    Title = "Section",
    Box = false,
    FontWeight = "SemiBold",
    TextTransparency = 0.05,
    TextXAlignment = "Left",
    TextSize = 17, -- Default Size
    Opened = true,
})
```

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

### Creating a Popup

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/popup.mdx

Example of how to create a basic popup with a title, icon, content, and buttons.

```APIDOC
## Creating Popup

```luau
WindUI:Popup({
    Title = "Popup Title",
    Icon = "info",
    Content = "Popup content",
    Buttons = {
        {
            Title = "Cancel",
            Callback = function() end,
            Variant = "Tertiary",
        },
        {
            Title = "Continue",
            Icon = "arrow-right",
            Callback = function() end,
            Variant = "Primary",
        }
    }
})
```
```

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

### Create Window (Full Example)

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/window.mdx

Demonstrates the creation of a WindUI window with all available configuration options. Use this for detailed customization.

```luau
local Window = WindUI:CreateWindow({
    Title = "My Super Hub",
    Icon = "door-open", -- lucide icon
    Author = ".ftgs and .ftgs",
    Folder = "MySuperHub",
    
    -- ↓ This all is Optional. You can remove it.
    Size = UDim2.fromOffset(580, 460),
    MinSize = Vector2.new(560, 350),
    MaxSize = Vector2.new(850, 560),
    ToggleKey = Enum.KeyCode.LeftShift,
    Transparent = true,
    Theme = "Dark",
    Resizable = true,
    SideBarWidth = 200,
    BackgroundImageTransparency = 0.42,
    HideSearchBar = true,
    ScrollBarEnabled = false,
    
    -- ↓ Optional. You can remove it.
    --[[ You can set 'rbxassetid://' or video to Background.
        'rbxassetid://':
            Background = "rbxassetid://", -- rbxassetid
        Video:
            Background = "video:YOUR-RAW-LINK-TO-VIDEO.webm", -- video 
    --]]
    
    -- ↓ Optional. You can remove it.
    User = {
        Enabled = true,
        Anonymous = true,
        Callback = function()
            print("clicked")
        end,
    },
    
    --       remove this all, 
    -- !  ↓  if you DON'T need the key system
    KeySystem = { 
        -- ↓ Optional. You can remove it.
        Key = { "1234", "5678" },
        
        Note = "Example Key System.",
        
        -- ↓ Optional. You can remove it.
        Thumbnail = {
            Image = "rbxassetid://",
            Title = "Thumbnail",
        },
        
        -- ↓ Optional. You can remove it.
        URL = "YOUR LINK TO GET KEY (Discord, Linkvertise, Pastebin, etc.)",
        
        -- ↓ Optional. You can remove it.
        SaveKey = false, -- automatically save and load the key.
        
        -- ↓ Optional. You can remove it.
        -- API = {} ← Services. Read about it below ↓
    },
})

```

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

### Configure Key System with Multiple Services

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/keysystem.mdx

Set up the KeySystem with configurations for PlatoBoost and Panda Development. This example shows how to include optional parameters like Title, Desc, and Icon for services.

```luau
local Window = WindUI:CreateWindow({
    -- ...
    
    KeySystem = {
        Note = "Example Key System. With platoboost, etc.",
        API = {
            { -- PlatoBoost
                --[[ Here you can write your title, description, and icon --]]
                Title = "Platoboost",-- optional . you can remove it
                Desc = "Click to copy.", -- optional . you can remove it
                Icon = "rbxassetid://", -- optional . you can remove it
                
                Type = "platoboost", -- type
                ServiceId = 1234, -- service id
                Secret = "platoboost-secret", -- platoboost secret
            },
            { -- Panda development
                Type = "pandadevelopment", -- type
                ServiceId = "myServiceId", -- service id
            },
        },
    },
})
```

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

### Build WindUI for Development

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/installation.mdx

Run this command to start a local build server for development. It automatically builds changes and serves a development bundle.

```bash
npm run dev
```

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

### Keybind Methods

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/keybind.mdx

Provides examples of methods available to manipulate a Keybind after creation.

```APIDOC
### Set Title
    ```luau
    Keybind:SetTitle("Title Example")
    ```

### Set Description
    ```luau
    Keybind:SetDesc("Description Example")
    ```

### Lock Element
    ```luau
    Keybind:Lock()
    ```

### Unlock Element
    ```luau
    Keybind:Unlock()
    ```

### Destroy Element
    ```luau
    Keybind:Destroy()
    ```
```

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

### Build WindUI for Live Development

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/installation.mdx

Starts a local build server at http://localhost:8642 that automatically builds and serves changes for instant testing in Roblox.

```bash
npm run live-build
```

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

### Creating a Tab Section

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/tabsection.mdx

Example of how to create a new section for tabs with a title and icon.

```APIDOC
## Creating Section for the Tabs

```luau
local Section = Window:Section({
    Title = "Section for the tabs",
    Icon = "bird",
    Opened = true,
})
```
```

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

### Dropdown Creation

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/dropdown.mdx

Examples of creating different types of Dropdowns, including multi-select, single-select, and advanced configurations with custom callbacks and icons.

```APIDOC
## Creating Dropdown

### Dropdown

#### Multi Dropdown
```luau
local Dropdown = Tab:Dropdown({
    Title = "Dropdown (Multi)",
    Desc = "Dropdown Description",
    Values = { "Category A", "Category B", "Category C" },
    Value = { "Category A" },
    Multi = true,
    AllowNone = true,
    Callback = function(option)
        -- option is a table: { "Category A", "Category B" }
        print("Categories selected: " .. game:GetService("HttpService"):JSONEncode(option))
    end
})
```

#### No Multi Dropdown
```luau
local Dropdown = Tab:Dropdown({
    Title = "Dropdown",
    Desc = "Dropdown Description",
    Values = { "Category A", "Category B", "Category C" },
    Value = "Category A",
    Callback = function(option)
        print("Category selected: " .. option)
    end
})
```

#### Advanced Dropdown
```luau
local Dropdown = Tab:Dropdown({
    Title = "Advanced Dropdown",
    Desc = "Dropdown Description",
    Values = {
        {
            Title = "Category A",
            Icon = "bird"
        },
        {
            Title = "Category B",
            Icon = "house"
        },
        {
            Title = "Category C",
            Icon = "droplet"
        },
    },
    Value = "Category A",
    Callback = function(option)
        print("Category selected: " .. option.Title .. " with icon " .. option.Icon)
    end
})
```

#### Advanced Dropdown 2
```luau
local Dropdown = Tab:Dropdown({
    Title = "Advanced Dropdown 2 (example)",
    Values = {
        {
            Title = "New file",
            Desc = "Create a new file",
            Icon = "file-plus",
            Callback = function()
                print("Clicked 'New File'")
            end
        },
        {
            Title = "Copy link",
            Desc = "Copy the file link",
            Icon = "copy",
            Callback = function()
                print("Clicked 'Copy link'")
            end
        },
        {
            Title = "Edit file",
            Desc = "Allows you to edit the file",
            Icon = "file-pen",
            Callback = function()
                print("Clicked 'Edit file'")
            end
        },
        { Type = "Divider" },
        {
            Title = "Delete file",
            Desc = "Permanently delete the file",
            Icon = "trash",
            Callback = function()
                print("Clicked 'Delete file'")
            end
        },
    }
})
```
```

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

### Create Section (Short Example)

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/section.mdx

A simplified way to create a section with only the required title.

```luau
local Section = Tab:Section({
    Title = "Section",
})
```

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

### Button Methods

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/button.mdx

Provides examples of methods to modify button properties after creation.

```APIDOC
### Set Title
    ```luau
    Button:SetTitle("Title Example")
    ```

### Set Description
    ```luau
    Button:SetDesc("Description Example")
    ```

### Lock Element
    ```luau
    Button:Lock()
    ```

### Unlock Element
    ```luau
    Button:Unlock()
    ```

### Destroy Element
    ```luau
    Button:Destroy()
    ```
```

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

### Get All Elements

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/window.mdx

Retrieves a list of all elements within the window.

```luau
Window.AllElements
```

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

### Get All Config Files

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/configs.mdx

Retrieve a table containing the names of all currently saved configuration files.

```luau
ConfigManager:AllConfigs() -- returns a table
```

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

### Get Available WindUI Themes

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/load-windui.mdx

Retrieve a list of all available themes that can be applied to WindUI.

```luau
WindUI:GetThemes()
```

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

### Gradient Definition

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/theme.mdx

Provides an example of how to define a gradient for theme properties. This function allows specifying color stops and rotation for the gradient effect.

```lua
WindUI:Gradient({
    ["0"] = { Color = Color3.fromHex("#1f1f23"), Transparency = 0 },
    ["100"]   = { Color = Color3.fromHex("#18181b"), Transparency = 0 },
}, {
    Rotation = 0,
}),
```

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

### Locking UI Elements with Button Example

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/faq.mdx

Demonstrates how to lock a button element, preventing its callback from firing. The element can be locked or unlocked programmatically.

```luau
local MySuperButton = Tab:Button({
    Title = "Button",
    Locked = true, -- lock the element
    Callback = function() -- callback will not work. element is locked.
        print("clicked")
    end
})
```

```luau
MySuperButton:Lock()
```

```luau
MySuperButton:Unlock()
```

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

### Add Button to Section

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/section.mdx

Example of adding a button element within a section.

```luau
Section:Button({ ... })
```

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

### Creating Keybind

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/keybind.mdx

Demonstrates the basic structure for creating a new Keybind with essential properties.

```APIDOC
## Creating Keybind 

```luau
local Keybind = Tab:Keybind({
    Title = "Keybind",
    Desc = "Keybind to open ui",
    Value = "G",
    Callback = function(v)
        Window:SetToggleKey(Enum.KeyCode[v])
    end
})
```
```

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

### Get Unlocked Elements

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/window.mdx

Retrieves a list of all unlocked elements within the window.

```luau
Window:Unlocked()
```

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

### Build WindUI for Production

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/installation.mdx

Use this command to create a production build of WindUI.

```bash
npm run build
```

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

### Get Locked Elements

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/window.mdx

Retrieves a list of all locked elements within the window.

```luau
Window:GetLocked()
```

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

### Creating a Section

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/section.mdx

Demonstrates how to create a new section with various configuration options.

```APIDOC
## Creating Section

### Full example
```luau
local Section = Tab:Section({
    Title = "Section",
    Box = false,
    FontWeight = "SemiBold",
    TextTransparency = 0.05,
    TextXAlignment = "Left",
    TextSize = 17, -- Default Size
    Opened = true,
})
```

### Short example
```luau
local Section = Tab:Section({
    Title = "Section",
})
```
```

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

### Creating Input

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/input.mdx

Demonstrates how to create a new Input element with various configuration options.

```APIDOC
## Creating Input 

```luau
local Input = Tab:Input({
    Title = "Input",
    Desc = "Input Description",
    Value = "Default value",
    InputIcon = "bird",
    Type = "Input", -- or "Textarea"
    Placeholder = "Enter text...",
    Callback = function(input) 
        print("text entered: " .. input)
    end
})
```
```

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

### Create Main UI Window with WindUI

Source: https://context7.com/footagesus/windui-docs/llms.txt

Initializes the main UI window, which serves as the root container. Configure appearance, behavior, and optional features like key systems and user display. Returns a Window object for further component creation.

```luau
local WindUI = loadstring(game:HttpGet("https://github.com/Footagesus/WindUI/releases/latest/download/main.lua"))()

local Window = WindUI:CreateWindow({
    Title   = "My Script Hub",
    Icon    = "door-open",           -- Lucide icon name, rbxassetid://, or URL
    Author  = ".ftgs",
    Folder  = "MyScriptHub",         -- folder name used for saving keys/configs

    -- Optional appearance
    Size                       = UDim2.fromOffset(580, 460),
    MinSize                    = Vector2.new(560, 350),
    MaxSize                    = Vector2.new(850, 560),
    ToggleKey                  = Enum.KeyCode.LeftShift,
    Transparent                = true,
    Theme                      = "Dark",
    Resizable                  = true,
    SideBarWidth               = 200,
    Background                 = "rbxassetid://123456789",
    BackgroundImageTransparency = 0.42,
    HideSearchBar              = false,
    ScrollBarEnabled           = false,

    -- Optional: display the local player's avatar & name
    User = {
        Enabled   = true,
        Anonymous = false,
        Callback  = function() print("user icon clicked") end,
    },

    -- Optional: key authentication gate
    KeySystem = {
        Key      = { "KEY-ALPHA", "KEY-BETA" },  -- valid keys
        Note     = "Get your key on our Discord.",
        SaveKey  = true,                          -- persist the key locally
        Thumbnail = {
            Image = "rbxassetid://987654321",
            Title = "My Hub",
        },
        URL = "https://discord.gg/example",
    },
})

-- Window actions
Window:Open()
Window:Close()
Window:Toggle()

-- Window event callbacks
Window:OnOpen(function()    print("opened")    end)
Window:OnClose(function()   print("closed")    end)
Window:OnDestroy(function() print("destroyed") end)

-- Appearance setters
Window:SetBackgroundImage("rbxassetid://111111")
Window:SetBackgroundImageTransparency(0.5)
Window:SetToggleKey(Enum.KeyCode.RightAlt)
Window:ToggleTransparency(true)
Window:IsResizable(false)
Window:SetIconSize(48)

-- Element lock helpers
Window:LockAll()
Window:UnlockAll()
local locked   = Window:GetLocked()
local unlocked = Window:Unlocked()
local all      = Window.AllElements

-- OpenButton customisation
Window:EditOpenButton({
    Title         = "Open Hub",
    Icon          = "monitor",
    CornerRadius  = UDim.new(0, 16),
    StrokeThickness = 2,
    Color         = ColorSequence.new(Color3.fromHex("FF0F7B"), Color3.fromHex("F89B29")),
    OnlyMobile    = false,
    Enabled       = true,
    Draggable     = true,
})

-- Topbar buttons
Window:DisableTopbarButtons({ "Close", "Minimize", "Fullscreen" })
Window:CreateTopbarButton("MyBtn", "bird", function() print("clicked") end, 990)

-- User icon helpers
Window.Icon:Enable()
Window.Icon:Disable()
Window.Icon:SetAnonymous(true)
```

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

### Get WindUI Window Size

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/load-windui.mdx

Retrieve the current size of the WindUI window in UDim2 format.

```luau
WindUI:GetWindowSize()
```

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

### Creating a Toggle

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/toggle.mdx

Demonstrates how to initialize a new Toggle element with various configuration options.

```APIDOC
## Creating Toggle

```luau
local Toggle = Tab:Toggle({
    Title = "Toggle",
    Desc = "Toggle Description",
    Icon = "bird",
    Type = "Checkbox",
    Value = false, -- default value
    Callback = function(state)
        print("Toggle Activated" .. tostring(state))
    end
})
```
```

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

### Creating Tab

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/tab.mdx

Demonstrates how to create a new Tab with specified properties.

```APIDOC
## Creating Tab

```luau
local Tab = Window:Tab({
    Title = "Tab Title",
    Icon = "bird", -- optional
    Locked = false,
})
```
```

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

### Get Current WindUI Theme

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/load-windui.mdx

Obtain the name or identifier of the currently active theme in WindUI.

```luau
WindUI:GetCurrentTheme()
```

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

### Configure Built-in and Custom Key Systems in WindUI

Source: https://context7.com/footagesus/windui-docs/llms.txt

Demonstrates how to configure built-in key services (PlatoBoost, Panda Development, Luarmor) and register a custom key service plugin for WindUI windows.

```luau
-- Using built-in services
local Window = WindUI:CreateWindow({
    Title  = "My Hub",
    Folder = "MyHub",
    KeySystem = {
        Note = "Get your key on Discord.",
        API  = {
            {
                Type      = "platoboost",
                ServiceId = 1234,
                Secret    = "your-platoboost-secret",
            },
            {
                Type      = "pandadevelopment",
                ServiceId = "your-service-id",
            },
            {
                Type      = "luarmor",
                ScriptId  = 5678,
                Discord   = "https://discord.gg/example",
            },
        },
    },
})

-- Registering a custom key service
WindUI.Services.mykeyservice = {
    Name = "My Key Service",
    Icon = "key",
    Args = { "ServiceId" },
    New  = function(ServiceId)
        local function validateKey(key)
            if not key or key ~= "VALID-KEY" then
                return false, "Invalid key!"
            end
            return true, "Key accepted!"
        end
        local function copyLink()
            setclipboard("https://example.com/get-key")
        end
        return { Verify = validateKey, Copy = copyLink }
    end,
}

-- Use the custom service
local Window2 = WindUI:CreateWindow({
    Title  = "Hub 2",
    Folder = "Hub2",
    KeySystem = {
        Note = "Enter your key.",
        API  = {
            { Type = "mykeyservice", ServiceId = 9999 },
        },
    },
})
```

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

### Creating a Dialog

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/dialog.mdx

Demonstrates how to instantiate a new dialog with specified properties like icon, title, content, and buttons.

```APIDOC
## Creating Dialog

```luau
local Dialog = Window:Dialog({
    Icon = "bird",
    Title = "Dialog Title",
    Content = "Content Text",
    Buttons = {
        {
            Title = "Confirm",
            Callback = function()
                print("Confirmed!")
            end,
        },
        {
            Title = "Cancel",
            Callback = function()
                print("Cancelled!")
            end,
        },
    },
})
```
```

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

### Set Input Placeholder

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/input.mdx

Changes the placeholder text displayed in the Input field. Useful for guiding user input.

```luau
Input:SetPlaceholder("New Placeholder")
```

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

### CreateWindow

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/window.mdx

Creates a new window with specified properties. Supports full and short configurations.

```APIDOC
## CreateWindow

### Description
Creates a new window instance. You can provide a comprehensive set of options for customization or a minimal set for basic window creation.

### Method Signature
`WindUI:CreateWindow(options: table)`

### Parameters
- **options** (table) - Required - A table containing configuration options for the window.
  - **Title** (string) - Required - The title of the window.
  - **Icon** (string) - Optional - The icon for the window (e.g., a lucide icon name).
  - **Author** (string) - Optional - The author of the window.
  - **Folder** (string) - Optional - The folder name for the window.
  - **Size** (UDim2) - Optional - The initial size of the window.
  - **MinSize** (Vector2) - Optional - The minimum size the window can be resized to.
  - **MaxSize** (Vector2) - Optional - The maximum size the window can be resized to.
  - **ToggleKey** (Enum.KeyCode) - Optional - The keybind to toggle the window's visibility.
  - **Transparent** (boolean) - Optional - Whether the window should be transparent.
  - **Theme** (string) - Optional - The theme of the window (e.g., 'Dark').
  - **Resizable** (boolean) - Optional - Whether the window can be resized.
  - **SideBarWidth** (number) - Optional - The width of the sidebar.
  - **BackgroundImageTransparency** (number) - Optional - Transparency level for the background image (0 to 1).
  - **HideSearchBar** (boolean) - Optional - Whether to hide the search bar.
  - **ScrollBarEnabled** (boolean) - Optional - Whether the scroll bar is enabled.
  - **Background** (string) - Optional - The background image or video URL (e.g., 'rbxassetid://' or 'video:URL').
  - **User** (table) - Optional - Configuration for user-related features.
    - **Enabled** (boolean) - Optional - Enables user features.
    - **Anonymous** (boolean) - Optional - If user is anonymous.
    - **Callback** (function) - Optional - Callback function when user is clicked.
  - **KeySystem** (table) - Optional - Configuration for the key system.
    - **Key** (table<string>) - Optional - Array of valid keys.
    - **Note** (string) - Optional - A note for the key system.
    - **Thumbnail** (table) - Optional - Thumbnail configuration.
      - **Image** (string) - Optional - Thumbnail image ID.
      - **Title** (string) - Optional - Thumbnail title.
    - **URL** (string) - Optional - URL to get the key.
    - **SaveKey** (boolean) - Optional - Whether to automatically save and load the key.
    - **API** (table) - Optional - API configuration for the key system.

### Request Example (Full)
```luau
local Window = WindUI:CreateWindow({
    Title = "My Super Hub",
    Icon = "door-open", -- lucide icon
    Author = ".ftgs and .ftgs",
    Folder = "MySuperHub",
    Size = UDim2.fromOffset(580, 460),
    MinSize = Vector2.new(560, 350),
    MaxSize = Vector2.new(850, 560),
    ToggleKey = Enum.KeyCode.LeftShift,
    Transparent = true,
    Theme = "Dark",
    Resizable = true,
    SideBarWidth = 200,
    BackgroundImageTransparency = 0.42,
    HideSearchBar = true,
    ScrollBarEnabled = false,
    Background = "rbxassetid://",
    User = {
        Enabled = true,
        Anonymous = true,
        Callback = function()
            print("clicked")
        end,
    },
    KeySystem = {
        Key = { "1234", "5678" },
        Note = "Example Key System.",
        Thumbnail = {
            Image = "rbxassetid://",
            Title = "Thumbnail",
        },
        URL = "YOUR LINK TO GET KEY (Discord, Linkvertise, Pastebin, etc.)",
        SaveKey = false,
    },
})
```

### Request Example (Short)
```luau
local Window = WindUI:CreateWindow({
    Title = "My Super Hub",
    Icon = "door-open", -- lucide icon. optional
    Author = ".ftgs and .ftgs", -- optional
})
```
```

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

### Creating Image

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/image.mdx

Demonstrates how to create an image component with specified properties.

```APIDOC
## Creating Image

```luau
Tab:Image({
    Image = "raw link or rbxassetid://",
    AspectRatio = "16:9",
    Radius = 9, -- optional. image corner radius
})
```

### Image Options

This section details the available options for configuring the Image component.

#### Parameters

- **Image** (string) - Required - Specifies the image source, which can be a raw URL or an `rbxassetid://` link.
- **AspectRatio** (string) - Required - Defines the aspect ratio of the image, e.g., "16:9".
- **Radius** (number) - Optional - Sets the radius for the image corners. Defaults to `nil`.
```

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

### Get WindUI Window Transparency

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/load-windui.mdx

Check if the WindUI window has transparency enabled. Returns true if transparent, false otherwise.

```luau
WindUI:GetTransparency()
```

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

### Use Localized Strings in Window Creation

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/localization.mdx

Demonstrates how to use the defined localization prefix to apply translated strings to window properties.

```luau
local Window = WindUI:CreateWindow({
    Title = "loc:WINDUI_EXAMPLE", -- using with prefix 'loc:'
    Icon = "loc:LOGO",
    Author = "loc:WELCOME", -- too
    Folder = "MyTestHub",
    Theme = "Dark",
})
```

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

### Creating a Paragraph

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/paragraph.mdx

Demonstrates how to initialize a new Paragraph element with its properties.

```APIDOC
## Creating Paragraph 
```luau
local Paragraph = Tab:Paragraph({
    Title = "Paragraph with Image, Thumbnail, Buttons",
    Desc = "Test Paragraph",
    Color = "Red",
    Image = "",
    ImageSize = 30,
    Thumbnail = "",
    ThumbnailSize = 80,
    Locked = false,
    Buttons = {
        {
            Icon = "bird",
            Title = "Button",
            Callback = function() print("1 Button") end,
        }
    }
})
```
```

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

### Disabling the OpenButton in a Window

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/faq.mdx

Provides an example of how to disable the 'OpenButton' for a window if it is not needed, using the `EditOpenButton` method with the `Enabled` property set to false.

```luau
Window:EditOpenButton({
    Enabled = false
})
```

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

### Creating Button

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/button.mdx

Demonstrates how to create a default and an advanced button with various customization options.

```APIDOC
## Creating Button 

```luau tab="Default"
local Button = Tab:Button({
    Title = "Button",
    Desc = "Test Button",
    Locked = false,
    Callback = function()
        -- ...
    end
})
```

```luau tab="Advanced"
local Button = Tab:Button({
    Title = "Advanced Button",
    Color = Color3.fromHex("#a2ff30"), -- paint the button
    Justify = "Center", -- align items in the center (Center or Between or Left or Right)
    IconAlign = "Left", -- Left or Right of the text
    Icon = "", -- removing icon
    Callback = function()
        -- ...
    end
})
```
```

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

### Create a New Keybind

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/keybind.mdx

Initializes a new Keybind with essential properties like Title, Description, default Value, and a Callback function. The Callback is executed when the keybind is triggered.

```luau
local Keybind = Tab:Keybind({
    Title = "Keybind",
    Desc = "Keybind to open ui",
    Value = "G",
    Callback = function(v)
        Window:SetToggleKey(Enum.KeyCode[v])
    end
})
```

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

### Create a Dialog

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/dialog.mdx

Use the `Window:Dialog` constructor to create a new dialog instance. Configure its title, icon, content, and buttons with associated callbacks.

```luau
local Dialog = Window:Dialog({
    Icon = "bird",
    Title = "Dialog Title",
    Content = "Content Text",
    Buttons = {
        {
            Title = "Confirm",
            Callback = function()
                print("Confirmed!")
            end,
        },
        {
            Title = "Cancel",
            Callback = function()
                print("Cancelled!")
            end,
        },
    },
})
```

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

### Create a New Config File

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/configs.mdx

Instantiate a new configuration object with a unique name. This name will be used for the configuration file.

```luau
local myConfig = ConfigManager:CreateConfig("myConfigExample")
```

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

### Create Dropdown with Actions and Dividers

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/dropdown.mdx

Build a dropdown menu with distinct actions, descriptions for each action, icons, and visual dividers between groups of options.

```lua
local Dropdown = Tab:Dropdown({
    Title = "Advanced Dropdown 2 (example)",
    Values = {
        {
            Title = "New file",
            Desc = "Create a new file",
            Icon = "file-plus",
            Callback = function() 
                print("Clicked 'New File'")
            end
        },
        {
            Title = "Copy link",
            Desc = "Copy the file link",
            Icon = "copy",
            Callback = function() 
                print("Clicked 'Copy link'")
            end
        },
        {
            Title = "Edit file",
            Desc = "Allows you to edit the file",
            Icon = "file-pen",
            Callback = function() 
                print("Clicked 'Edit file'")
            end
        },
        { Type = "Divider", },
        {
            Title = "Delete file",
            Desc = "Permanently delete the file",
            Icon = "trash",
            Callback = function() 
                print("Clicked 'Delete file'")
            end
        },
    }
})
```

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

### WindUI:CreateWindow()

Source: https://context7.com/footagesus/windui-docs/llms.txt

Creates the main UI window, which serves as the root container for all tabs and elements. It accepts a configuration table for appearance and behavior, and returns a Window object for further manipulation.

```APIDOC
## WindUI:CreateWindow()

### Description
Creates the main UI window, which is the root container for all tabs and elements. Accepts a configuration table with required and optional fields covering appearance, behavior, key system, and user display. Returns a `Window` object used to create tabs, dialogs, and other top-level components.

### Parameters
#### Configuration Table
- **Title** (string) - Required - The title of the window.
- **Icon** (string) - Optional - Lucide icon name, rbxassetid://, or URL for the window icon.
- **Author** (string) - Optional - The author's name.
- **Folder** (string) - Optional - Folder name used for saving keys/configs.
- **Size** (UDim2) - Optional - The initial size of the window.
- **MinSize** (Vector2) - Optional - The minimum size of the window.
- **MaxSize** (Vector2) - Optional - The maximum size of the window.
- **ToggleKey** (Enum.KeyCode) - Optional - The keybind to toggle the window.
- **Transparent** (boolean) - Optional - Whether the window is transparent.
- **Theme** (string) - Optional - The theme of the window ('Dark' or 'Light').
- **Resizable** (boolean) - Optional - Whether the window can be resized.
- **SideBarWidth** (number) - Optional - The width of the sidebar.
- **Background** (string) - Optional - URL or rbxassetid:// for the background image.
- **BackgroundImageTransparency** (number) - Optional - Transparency of the background image.
- **HideSearchBar** (boolean) - Optional - Whether to hide the search bar.
- **ScrollBarEnabled** (boolean) - Optional - Whether the scroll bar is enabled.
- **User** (table) - Optional - Configuration for displaying user information.
  - **Enabled** (boolean) - Required - Whether to enable user display.
  - **Anonymous** (boolean) - Required - Whether to display anonymously.
  - **Callback** (function) - Optional - Function to call when the user icon is clicked.
- **KeySystem** (table) - Optional - Configuration for the key authentication system.
  - **Key** (table) - Required - A list of valid keys.
  - **Note** (string) - Optional - A note displayed to the user.
  - **SaveKey** (boolean) - Optional - Whether to save the key locally.
  - **Thumbnail** (table) - Optional - Thumbnail configuration.
    - **Image** (string) - Required - Image URL or rbxassetid://.
    - **Title** (string) - Required - Title for the thumbnail.
  - **URL** (string) - Optional - URL for key acquisition.

### Returns
- `Window` - The created Window object.

### Example
```luau
local WindUI = loadstring(game:HttpGet("https://github.com/Footagesus/WindUI/releases/latest/download/main.lua"))()

local Window = WindUI:CreateWindow({
    Title   = "My Script Hub",
    Icon    = "door-open",
    Author  = "by .ftgs",
    Folder  = "MyScriptHub",
    Size    = UDim2.fromOffset(580, 460),
    ToggleKey = Enum.KeyCode.LeftShift,
    Transparent = true,
    Theme = "Dark",
    Resizable = true,
    User = {
        Enabled   = true,
        Anonymous = false,
        Callback  = function() print("user icon clicked") end,
    },
    KeySystem = {
        Key      = { "KEY-ALPHA", "KEY-BETA" },
        Note     = "Get your key on our Discord.",
        SaveKey  = true,
        Thumbnail = {
            Image = "rbxassetid://987654321",
            Title = "My Hub",
        },
        URL = "https://discord.gg/example",
    },
})

-- Window actions
Window:Open()
Window:Close()
Window:Toggle()

-- Window event callbacks
Window:OnOpen(function()    print("opened")    end)
Window:OnClose(function()   print("closed")    end)
Window:OnDestroy(function() print("destroyed") end)

-- Appearance setters
Window:SetBackgroundImage("rbxassetid://111111")
Window:SetBackgroundImageTransparency(0.5)
Window:SetToggleKey(Enum.KeyCode.RightAlt)
Window:ToggleTransparency(true)
Window:IsResizable(false)
Window:SetIconSize(48)

-- Element lock helpers
Window:LockAll()
Window:UnlockAll()
local locked   = Window:GetLocked()
local unlocked = Window:Unlocked()
local all      = Window.AllElements

-- OpenButton customisation
Window:EditOpenButton({
    Title         = "Open Hub",
    Icon          = "monitor",
    CornerRadius  = UDim.new(0, 16),
    StrokeThickness = 2,
    Color         = ColorSequence.new(Color3.fromHex("FF0F7B"), Color3.fromHex("F89B29")),
    OnlyMobile    = false,
    Enabled       = true,
    Draggable     = true,
})

-- Topbar buttons
Window:DisableTopbarButtons({ "Close", "Minimize", "Fullscreen" })
Window:CreateTopbarButton("MyBtn", "bird", function() print("clicked") end, 990)

-- User icon helpers
Window.Icon:Enable()
Window.Icon:Disable()
Window.Icon:SetAnonymous(true)
```
```

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

### Initialize Localization

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/localization.mdx

Call this before creating any windows to set up localization. It automatically detects the user's language if enabled.

```luau
-- Paste this before 'CreateWindow()'
WindUI:Localization({
    Enabled = true,
    Prefix = "loc:",
    DefaultLanguage = "en",
    Translations = {
        ["ru"] = {
            ["WINDUI_EXAMPLE"] = "WindUI Пример",
            ["WELCOME"] = "Добро пожаловать в WindUI!",
            ["SETTINGS"] = "Настройки",
            ["FEATURES"] = "Функционал",
            ["LOGO"] = "rbxassetid://...", -- russian logo
        },
        ["en"] = {
            ["WINDUI_EXAMPLE"] = "WindUI Example",
            ["WELCOME"] = "Welcome to WindUI!",
            ["SETTINGS"] = "Settings",
            ["FEATURES"] = "Features",
            ["LOGO"] = "rbxassetid://...", -- english logo
        },
        -- and more languages...
    }
})
```

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

### Using Different Icon Packs in WindUI

Source: https://context7.com/footagesus/windui-docs/llms.txt

Shows how to reference icons from Lucide, Geist, and Craft icon packs, as well as custom rbxassetid or HTTPS URLs.

```luau
-- Lucide Icons  (https://lucide.dev)
local Icon = "lucide:bird"
local Icon = "bird"         -- shorthand (Lucide is the default)

-- Geist Icons  (https://vercel.com/geist/icons)
local Icon = "geist:window"

-- Craft Icons  (Figma Community)
local Icon = "craft:macbook-stroke"

-- rbxassetid or HTTPS URL also accepted anywhere an icon string is used
local Icon = "rbxassetid://123456789"
local Icon = "https://example.com/icon.png"
```

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

### Create and Configure a Button

Source: https://context7.com/footagesus/windui-docs/llms.txt

Use Tab:Button to add clickable buttons. Supports custom titles, descriptions, colors, icon alignment, and justification. Callback functions are executed on click.

```Lua
-- Default button
local Button = Tab:Button({
    Title    = "Execute Script",
    Desc     = "Runs the selected script",
    Locked   = false,
    Callback = function()
        print("Script executed!")
    end,
})

-- Advanced button
local FancyButton = Tab:Button({
    Title     = "Fancy Action",
    Color     = Color3.fromHex("#a2ff30"),
    Justify   = "Center",   -- "Center" | "Between" | "Left" | "Right"
    IconAlign = "Left",     -- "Left" | "Right"
    Icon      = "",         -- empty string removes the icon
    Callback  = function() print("fancy!") end,
})

-- Element methods available on all interactive elements
Button:SetTitle("New Title")
Button:SetDesc("New Description")
Button:Lock()
Button:Unlock()
Button:Destroy()
```

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

### Create Code Snippet

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/code.mdx

Initializes a new code snippet with a title and its content. The 'Code' option expects a string.

```lua
local Code = Tab:Code({
    Title = "Code",
    Code = [[print("Hello World!")]]
})
```

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

### Using Icons in WindUI

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/icons.mdx

Demonstrates how to reference icons from different libraries (Lucide, Geist, Craft) within WindUI. Ensure the correct icon name format is used for each library.

```luau
-- lucide
local Icon = "lucide:bird"

-- geist
local Icon = "geist:window"

-- craft
local Icon = "craft:macbook-stroke"
```

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

### Define Custom Service with Tips

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/keysystem.mdx

Define a custom service for the WindUI Key System, including tips for configuration and validation logic. Ensure the 'Verify' and 'Copy' functions are correctly implemented.

```luau
--              ↓ Change this to your service (like `luarmor`, `platoboost`, `keyguardian`)
WindUI.Services.mysuperservicetogetkey = {
    Name = "My Super Service",
    Icon = "droplet", -- <-- lucide or rbxassetid or raw link to img
    
    Args = { "ServiceId", "SuperId" }, --      <-
                                       --         |
    New = function(ServiceId, SuperId) -- <------ | Args!!!!!!!!!!!!
        function validateKey(key) -- <--- this too important!!!
            -- your function to validate key
            -- see examples at src/utils/ in WindUI Repo
            
            if not key then
                return false, "Key is invalid!" 
                
            end
            
            return true, "Key is valid!" 
        end
        
        function copyLink()
            return setclipboard("link to key system service.")
        end
        
        return {
            --↓↓ do not change this!!
            Verify = validateKey, -- <-- important!!!
            Copy = copyLink -- <-- important!!!
        }
    end
}
```

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

### Keybind Options

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/keybind.mdx

Details the available options for configuring a Keybind during its creation.

```APIDOC
## Keybind Options

<TypeTable
  type={{
    Title:         {{ type: 'string',   required: true,  description: 'Title of the Keybind.',                             default: "Keybind" }},
    Desc:          {{ type: 'string',   required: false, description: 'Description of the Keybind.',                       default: "nil" }},
    Value:         {{ type: 'string',   required: true, description:  'Default value of the Keybind',                      default: "F" }},
    Locked:        {{ type: 'boolean',  required: false, description: 'Locks the Element',                                 default: "false" }},
    Callback:      {{ type: 'function', required: false, description: 'Callback of the Keybind',                           default: "nil" }},
  }}
/>
```

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

### Set up Localization with WindUI:Localization() and WindUI:SetLanguage()

Source: https://context7.com/footagesus/windui-docs/llms.txt

Enable internationalization by registering translation tables with WindUI:Localization(), defining a prefix for keys and a default language. Use WindUI:SetLanguage() to override automatic detection. Translation keys can be used in any string field.

```luau
-- Set up localization before CreateWindow()
WindUI:Localization({
    Enabled         = true,
    Prefix          = "loc:",        -- prefix used in string fields
    DefaultLanguage = "en",          -- fallback if the player's locale is unmapped
    Translations    = {
        ["en"] = {
            ["TITLE"]    = "My Script Hub",
            ["SETTINGS"] = "Settings",
            ["LOGO"]     = "rbxassetid://111111",
        },
        ["ru"] = {
            ["TITLE"]    = "Мой Скрипт Хаб",
            ["SETTINGS"] = "Настройки",
            ["LOGO"]     = "rbxassetid://222222",
        },
    },
})

-- Override automatic detection
WindUI:SetLanguage("ru")

-- Use translation keys in any string field
local Window = WindUI:CreateWindow({
    Title  = "loc:TITLE",
    Icon   = "loc:LOGO",
    Folder = "MyHub",
})
local Tab = Window:Tab({ Title = "loc:SETTINGS" })
```

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

### Configure PlatoBoost Key System

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/keysystem.mdx

Integrate with the PlatoBoost key system. Ensure you provide the correct Type, ServiceId, and Secret for authentication.

```luau
local Window = WindUI:CreateWindow({
    -- ...
    
    KeySystem = {
        Note = "Example Key System. With platoboost.",
        API = {
            { -- PlatoBoost
                Type = "platoboost",
                ServiceId = 1234, -- service id
                Secret = "platoboost-secret", -- platoboost secret
            },
        },
    },
})
```

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

### Create and Configure a Dropdown

Source: https://context7.com/footagesus/windui-docs/llms.txt

Use Tab:Dropdown for selection elements. Supports single/multi-select, search, custom items with icons/descriptions, and dividers. Callbacks receive selected options.

```Lua
-- Simple single-select
local Dropdown = Tab:Dropdown({
    Title    = "Game Mode",
    Desc     = "Select a game mode",
    Values   = { "Normal", "Hard", "Insane" },
    Value    = "Normal",
    Callback = function(option)
        print("Selected: " .. option)
    end,
})

-- Multi-select with search
local MultiDropdown = Tab:Dropdown({
    Title             = "Active Cheats",
    Values            = { "Aimbot", "ESP", "Speed", "Fly" },
    Value             = { "Aimbot" },
    Multi             = true,
    AllowNone         = true,
    SearchBarEnabled  = true,
    Callback          = function(options)
        -- options is a table e.g. { "Aimbot", "ESP" }
        for _, v in ipairs(options) do print(v) end
    end,
})

-- Advanced items with per-item icons and callbacks (context-menu style)
local ContextMenu = Tab:Dropdown({
    Title  = "File Actions",
    Values = {
        { Title = "New file",  Desc = "Create a new file",  Icon = "file-plus", Callback = function() print("new") end },
        { Title = "Copy link", Desc = "Copy the file link", Icon = "copy",      Callback = function() print("copy") end },
        { Type = "Divider" },
        { Title = "Delete",    Desc = "Delete the file",    Icon = "trash",     Callback = function() print("del") end },
    },
})

Dropdown:Select("Hard")
MultiDropdown:Select({ "ESP", "Fly" })
Dropdown:Refresh({ "Easy", "Medium", "Hard" })
Dropdown:SetTitle("Updated Label")
Dropdown:SetDesc("Updated description")
Dropdown:Lock()
Dropdown:Unlock()
Dropdown:Destroy()
```

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

### Load ConfigManager

Source: https://github.com/footagesus/windui-docs/blob/main/content/docs/configs.mdx

Access the ConfigManager instance. This is the first step to managing configurations.

```luau
local ConfigManager = Window.ConfigManager
```