# Table of Contents

- [About WindUI](#about-windui)
- [Loadstring](#loadstring)
- [Themes](#themes)
- [Window](#window)
- [Notification](#notification)
- [Key System](#key-system)
- [Tab](#tab)
- [Tag](#tag)
- [Tab Section](#tab-section)
- [Section](#section)
- [Popup](#popup)
- [Dialog](#dialog)
- [Button](#button)
- [Toggle](#toggle)
- [Dropdown](#dropdown)
- [Slider](#slider)
- [Input](#input)
- [Colorpicker](#colorpicker)
- [Paragraph](#paragraph)
- [Keybind](#keybind)
- [Code](#code)
- [Divider](#divider)
- [Space](#space)
- [HStack & VStack](#hstack-vstack)
- [Image](#image)
- [Group (deprecated)](#group-deprecated-)
- [Icons](#icons)
- [ProgressBar](#progressbar)
- [Configs](#configs)

---

# About WindUI

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

About WindUI
============

What is WindUI Library?

![Banner](https://footagesus.github.io/treehub-web//_next/static/media/main-banner.69590020.png)

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui#about-windui)

==================================================================================

WindUI is a modern, open-source UI library designed for creating beautiful and functional interfaces for scripts

This documentation will be updated.  
Banners, blogs, etc. will be added soon.

BETA

Currently in active beta, the library focuses on performance and compatibility with popular script executors, allowing you to build and iterate quickly. As a work in progress, it evolves with community feedback to improve stability and expand its features.

[Loadstring\
\
Load WindUI using loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)

---

# Loadstring

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Loadstring
==========

Load WindUI using loadstring

[Load methods](https://footagesus.github.io/treehub-web/docs/windui/loadstring#load-methods)

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

### [Selected version Recommended](https://footagesus.github.io/treehub-web/docs/windui/loadstring#selected-version-recommendedmy-updates-may-come-out-with-errors-so-its-better-to-use-the-selected-versions)

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

### [Latest version](https://footagesus.github.io/treehub-web/docs/windui/loadstring#latest-version)

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

### [`dist/main.lua` from](https://footagesus.github.io/treehub-web/docs/windui/loadstring#distmainlua-from-repo-unstableyou-can-use-the-new-features-even-before-the-releases-but-this-version-may-also-have-bugs)
 [repo](https://github.com/Footagesus/WindUI)
 Unstable

    local WindUI = loadstring(game:HttpGet("https://raw.githubusercontent.com/Footagesus/WindUI/main/dist/main.lua"))() 

[Setup (optional)](https://footagesus.github.io/treehub-web/docs/windui/loadstring#setup-optional)

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

### [Set Notification Lower](https://footagesus.github.io/treehub-web/docs/windui/loadstring#set-notification-lower)

It makes notifications appear lower, ignoring the jump button on the mobile

    WindUI:SetNotificationLower(true)

### [Set Library Font](https://footagesus.github.io/treehub-web/docs/windui/loadstring#set-library-font)

The font that will be used throughout this UI library. All fonts are available here: [https://create.roblox.com/store/fonts](https://create.roblox.com/store/fonts)

    WindUI:SetFont("rbxassetid://font-id-here")

[`WindUI` Functions](https://footagesus.github.io/treehub-web/docs/windui/loadstring#windui-functions)

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

Show Details

Name

:CreateWindow(WindowConfig: table)

:GetCurrentTheme()

:GetThemes()

:AddTheme(Theme: table)

:Gradient(Colors: table, Config: table): table

:SetFont(FontId: string)

:SetParent(Parent: Instance)

:SetLanguage(LanguageCode: string)

:Localization(Config: table)

:Notify(NotificationConfig: table)

:Popup(PopupConfig: table)

:SetNotificationLower(Lower: boolean)

:GetTransparency(): number

:GetWindowSize(): UDim2

:ToggleAcrylic(Enabled: boolean)

[About WindUI\
\
What is WindUI Library?](https://footagesus.github.io/treehub-web/docs/windui)
[Themes\
\
Create Themes or use existing ones](https://footagesus.github.io/treehub-web/docs/windui/themes)

---

# Themes

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Themes
======

Create Themes or use existing ones

![Themes](https://footagesus.github.io/treehub-web//_next/static/media/Themes.1855a86b.png)

[Set Theme](https://footagesus.github.io/treehub-web/docs/windui/themes#set-theme)

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

### [in](https://footagesus.github.io/treehub-web/docs/windui/themes#in-window-creating)
 [window](https://footagesus.github.io/treehub-web/docs/windui/window)
 creating

    local Window = WindUI:CreateWindow({
        --... ,
        Theme = "Dark" -- enter your chosen theme name
    })

### [or with function](https://footagesus.github.io/treehub-web/docs/windui/themes#or-with-function)

    WindUI:SetTheme("Dark")

[Create Own Theme](https://footagesus.github.io/treehub-web/docs/windui/themes#create-own-theme)

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

You can create theme with `WindUI:AddTheme()`

MinimalisticAdvanced

    WindUI:AddTheme({
        Name = "Dark", -- theme name
        
        Accent = Color3.fromHex("#18181b"),
        Background = Color3.fromHex("#101010"),
        Outline = Color3.fromHex("#FFFFFF"),
        Text = Color3.fromHex("#FFFFFF"),
        Placeholder = Color3.fromHex("#7a7a7a"),
        Button = Color3.fromHex("#52525b"),
        Icon = Color3.fromHex("#a1a1aa"),
    })

### All Themes

[Loadstring\
\
Load WindUI using loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Window\
\
Configure and create windows in WindUI](https://footagesus.github.io/treehub-web/docs/windui/window)

---

# Window

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Window
======

Configure and create windows in WindUI

![Window](https://footagesus.github.io/treehub-web//_next/static/media/Window.cbc43306.png)

[Window Configuration](https://footagesus.github.io/treehub-web/docs/windui/window#window-configuration)

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

SmallFull

    local Window = WindUI:CreateWindow({
        Title = "My Super Hub", -- window title
        Icon = "door-open", -- lucide icon or "rbxassetid://" or URL. optional
        Author = "by .ftgs and .ftgs", -- window subtitle. optional
    })

[Window Parameters](https://footagesus.github.io/treehub-web/docs/windui/window#window-parameters)

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

Show Details

Name

Title: string required

Icon: string

Author: string

Folder: string

Size: UDim2

MinSize: Vector2

MaxSize: Vector2

Position: UDim2

Transparent: boolean

Theme: string

Resizable: boolean

SideBarWidth: number

HideSearchBar: boolean

ScrollBarEnabled: boolean

BackgroundImageTransparency: number

Background: string|table

ShadowTransparency: number

Radius: number

ElementsRadius: number

TopBarButtonIconSize: number

ToggleKey: Enum.KeyCode

Acrylic: boolean

NewElements: boolean

IgnoreAlerts: boolean

HidePanelBackground: boolean

AutoScale: boolean

Topbar: table

Footer: table

OpenButton: table

User: table

KeySystem: table

[Window Methods](https://footagesus.github.io/treehub-web/docs/windui/window#window-methods)

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

Show Details

Name

:Tab(TabConfig: table)

:Section(SectionConfig: table)

:SetTitle(Title: string)

:SetAuthor(Author: string)

:SetIcon(Icon: string)

:SetIconSize(Size: number|UDim2)

:SetSize(Size: UDim2)

:SetToggleKey(KeyCode: Enum.KeyCode)

:SetTheme(Theme: string)

:SetBackgroundImage(ImageId: string)

:SetBackgroundImageTransparency(Transparency: number)

:SetBackgroundTransparency(Value: number)

:SetUIScale(Scale: number)

:GetUIScale(): number

:SetPanelBackground(Visible: boolean)

:IsResizable(Resizable: boolean)

:ToggleTransparency(Enabled: boolean)

:SetToTheCenter()

:Toggle()

:Open()

:Close()

:Destroy()

:ToggleFullscreen()

:SelectTab(Tab: table)

:LockAll()

:UnlockAll()

:GetLocked(): table

:GetUnlocked(): table

:OnOpen(Callback: function)

:OnClose(Callback: function)

:OnDestroy(Callback: function)

:Tag(TagConfig: table)

:EditOpenButton(Config: table)

:Dialog(DialogConfig: table)

:Divider()

:DisableTopbarButtons(Buttons: table)

:CreateTopbarButton(Config: table)

  

WARNING

`Background` thing works only for RAW URL LINK or rbxassetid://IMAGE ID !!!!!! `Background` thing will not work for a DECAL ID !!!!!!

[Themes\
\
Create Themes or use existing ones](https://footagesus.github.io/treehub-web/docs/windui/themes)
[Key System\
\
Implement access control with key validation](https://footagesus.github.io/treehub-web/docs/windui/keysystem)

---

# Notification

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Notification
============

Display system notifications to users

![Notifications](https://footagesus.github.io/treehub-web//_next/static/media/Notifications.c686f4b1.png)

[Notification System](https://footagesus.github.io/treehub-web/docs/windui/notification#notification-system)

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

Notifications are temporary messages displayed to inform users about events or status changes. They automatically disappear after a set duration.

BasicFull

    WindUI:Notify({
        Title = "Success",
        Content = "Operation completed successfully",
        Duration = 3
    })

[Notification Parameters](https://footagesus.github.io/treehub-web/docs/windui/notification#notification-parameters)

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

Show Details

NameDefault

Title: stringNotification

Content: stringnil

Icon: string?nil

Duration: number?3

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/notification#related-documentation)

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

*   [Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
     - Modal confirmation dialogs
*   [Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
     - Popup windows
*   [Window](https://footagesus.github.io/treehub-web/docs/windui/window)
     - Main window container

[Popup\
\
Create standalone popup windows](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Tag\
\
Create tag badges and labels in WindUI](https://footagesus.github.io/treehub-web/docs/windui/tag)

---

# Key System

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Key System
==========

Implement access control with key validation

[Key System Overview](https://footagesus.github.io/treehub-web/docs/windui/keysystem#key-system-overview)

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

The Key System provides access control to your WindUI window. When enabled, users must enter a valid key before accessing the interface. This is useful for restricting access to premium, admin-only, or exclusive scripts.

[Basic Usage](https://footagesus.github.io/treehub-web/docs/windui/keysystem#basic-usage)

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

SimpleFull

    local Window = WindUI:CreateWindow({ -- creating window from /docs/windui/window
        Title = "Admin Panel",
        KeySystem = {
            KeyValidator = function(key)
                return key == "admin123"
            end,
        }
    })

The KeySystem must be located inside the [Window](https://footagesus.github.io/treehub-web/docs/windui/window)
 configuration table passed to `WindUI:CreateWindow()`

[Parameters](https://footagesus.github.io/treehub-web/docs/windui/keysystem#parameters)

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

Show Details

Name

KeyValidator() required

Title: string?

Note: string?

SaveKey: boolean?

URL: string?

API: table?

Thumbnail: table?

[Examples](https://footagesus.github.io/treehub-web/docs/windui/keysystem#examples)

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

### [Simple Key Validation](https://footagesus.github.io/treehub-web/docs/windui/keysystem#simple-key-validation)

    local Window = WindUI:CreateWindow({
      Title = "My Script",
      KeySystem = {
          KeyValidator = function(key)
              return key == "mySecretKey"
          end,
      }
    })

### [Multiple Valid Keys](https://footagesus.github.io/treehub-web/docs/windui/keysystem#multiple-valid-keys)

    local Window = WindUI:CreateWindow({
      Title = "Admin Panel",
      KeySystem = {
          KeyValidator = function(key)
              local validKeys = {
                  "owner_key",
                  "admin_key", 
                  "moderator_key"
              }
              return table.find(validKeys, key) ~= nil
          end,
          SaveKey = true
      }
    })

### [With Key Link](https://footagesus.github.io/treehub-web/docs/windui/keysystem#with-key-link)

    local Window = WindUI:CreateWindow({
      Title = "Premium Features",
      KeySystem = {
          Title = "Premium Access",
          Note = "Click 'Get Key' button to open Discord",
          KeyValidator = function(key)
              return string.len(key) > 10
          end,
          SaveKey = true,
          URL = "https://discord.gg/yourserver"
      }
    })

### [With Thumbnail](https://footagesus.github.io/treehub-web/docs/windui/keysystem#with-thumbnail)

    local Window = WindUI:CreateWindow({
      Title = "VIP Tools",
      KeySystem = {
          Title = "VIP Verification",
          KeyValidator = function(key)
              return string.sub(key, 1, 4) == "VIP-"
          end,
          SaveKey = true,
          Thumbnail = {
              Image = "rbxassetid://your_image_id",
              Title = "VIP Member",
              Width = 200
          }
      }
    })

[Save Key Behavior](https://footagesus.github.io/treehub-web/docs/windui/keysystem#save-key-behavior)

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

When `SaveKey` is enabled:

1.  User enters key in the dialog
2.  Key is validated using `KeyValidator`
3.  If valid, key is saved to `[Folder]/[player.Name].key`
4.  On future runs, saved key is loaded and validated automatically

    local Window = WindUI:CreateWindow({
      Title = "App",
      Folder = "MyApp", -- key saved to "MyApp/[player.Name].key"
      KeySystem = {
          KeyValidator = function(key)
              return key == "example"
          end,
          SaveKey = true -- enables persistence
      }
    })

* * *

Deprecated: Key Property

The old `Key` property is deprecated. Use `KeyValidator` instead:

    -- Don't use this anymore
    KeySystem = {
        Key = "password123" -- deprecated
    }
     
    -- Use this instead
    KeySystem = {
        KeyValidator = function(key)
            return key == "password123"
        end
    }

[Related](https://footagesus.github.io/treehub-web/docs/windui/keysystem#related)

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

*   [Window Configuration](https://footagesus.github.io/treehub-web/docs/windui/window)
     - Other CreateWindow options
*   [Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
     - Show validation feedback

[Window\
\
Configure and create windows in WindUI](https://footagesus.github.io/treehub-web/docs/windui/window)
[Tab\
\
Create and configure tabs in WindUI windows](https://footagesus.github.io/treehub-web/docs/windui/tab)

---

# Tab

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Tab
===

Create and configure tabs in WindUI windows

![Tab](https://footagesus.github.io/treehub-web//_next/static/media/Tab.76022b0b.png)

[Tab Configuration](https://footagesus.github.io/treehub-web/docs/windui/tab#tab-configuration)

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

Tabs are used to organize content within a window into multiple sections. Each tab acts as a container for elements.

BasicFull

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

[Tab Parameters](https://footagesus.github.io/treehub-web/docs/windui/tab#tab-parameters)

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

Show Details

NameDefault

Title: stringTab

Desc: string?nil

Icon: string?nil

IconColor: Color3?nil

IconShape: string?nil

IconThemed: boolean?false

Locked: boolean?false

ShowTabTitle: boolean?false

Border: boolean?false

TabTitleAlign: string?Left

CustomEmptyPage: table?{ Icon = 'lucide:frown', IconSize = 48, Title = 'This tab is Empty', Desc = nil }

[`CustomEmptyPage` Parameters](https://footagesus.github.io/treehub-web/docs/windui/tab#customemptypage-parameters)

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

Show Details

NameDefault

Icon: string?lucide:frown

IconSize: number?48

Title: string?This tab is Empty

Desc: string?nil

[Tab Methods](https://footagesus.github.io/treehub-web/docs/windui/tab#tab-methods)

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

### [Select Tab](https://footagesus.github.io/treehub-web/docs/windui/tab#select-tab)

Select and show the tab

    Tab:Select()

### [Set Title](https://footagesus.github.io/treehub-web/docs/windui/tab#set-title)

Change tab title dynamically

    Tab:SetTitle("New Title")

### [Set Description](https://footagesus.github.io/treehub-web/docs/windui/tab#set-description)

Update tab description/tooltip

    Tab:SetDesc("New Description")

### [Lock Tab](https://footagesus.github.io/treehub-web/docs/windui/tab#lock-tab)

Disable interaction with the tab

    Tab:Lock()

### [Unlock Tab](https://footagesus.github.io/treehub-web/docs/windui/tab#unlock-tab)

Re-enable tab interaction

    Tab:Unlock()

### [Scroll To Element](https://footagesus.github.io/treehub-web/docs/windui/tab#scroll-to-element)

Automatically scroll to a specific element in the tab

    Tab:ScrollToTheElement(1)

### [Select Tab](https://footagesus.github.io/treehub-web/docs/windui/tab#select-tab-1)

Selects the tab

    Tab:Select()

[Tab Elements](https://footagesus.github.io/treehub-web/docs/windui/tab#tab-elements)

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

Add ElementsTab SectionTab Group

    local Tab = Window:Tab({ Title = "Elements" })
     
    -- Add various elements
    Tab:Button({
        Title = "Click Me",
        Callback = function()
            print("Button clicked")
        end
    })
     
    Tab:Toggle({
        Title = "Enable Feature",
        Callback = function(state)
            print("Toggle:", state)
        end
    })
     
    Tab:Slider({
        Title = "Volume",
        Value = { Min = 0, Max = 100, Default = 50 },
        Callback = function(value)
            print("Volume:", value)
        end
    })
     
    Tab:Input({
        Title = "Username",
        Callback = function(value)
            print("Username:", value)
        end
    })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/tab#related-documentation)

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

*   [Window](https://footagesus.github.io/treehub-web/docs/windui/window)
     - Create and configure windows
*   [Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
     - Organize content into sections
*   [Group](https://footagesus.github.io/treehub-web/docs/windui/group)
     - Horizontal element layout

[Key System\
\
Implement access control with key validation](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Dialog\
\
Create confirmation dialogs and prompts in WindUI](https://footagesus.github.io/treehub-web/docs/windui/dialog)

---

# Tag

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Tag
===

Create tag badges and labels in WindUI

![Tag](https://footagesus.github.io/treehub-web//_next/static/media/Tag.596e2a43.png)

[Tag Element](https://footagesus.github.io/treehub-web/docs/windui/tag#tag-element)

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

Tags are compact badges used to label, categorize, or mark elements. They're useful for status indicators, labels, and badges.

BasicFull

    Tab:Tag({
        Title = "New",
        Color = Color3.fromRGB(100, 200, 100)
    })

[Tag Parameters](https://footagesus.github.io/treehub-web/docs/windui/tag#tag-parameters)

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

Show Details

NameDefault

Title: stringTag

Icon: string?nil

Color: Color3?nil

[Tag Functions](https://footagesus.github.io/treehub-web/docs/windui/tag#tag-functions)

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

Show Details

Name

:SetTitle(Title: string)

:SetIcon(Icon: string)

:SetColor(Color: Color3)

[Usage Examples](https://footagesus.github.io/treehub-web/docs/windui/tag#usage-examples)

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

### [FPS Counter Tag](https://footagesus.github.io/treehub-web/docs/windui/tag#fps-counter-tag)

    -- your tag
    local FPSTag = Window:Tag({
        Title = "FPS: 0",
        Color = Color3.fromRGB(100, 150, 255),
    })
     
    local RunService = game:GetService("RunService")
    local lastUpdate = tick()
    local frameCount = 0
     
    RunService.RenderStepped:Connect(function()
        frameCount = frameCount + 1
        local now = tick()
        
        if now - lastUpdate >= 1 then
            local fps = math.floor(frameCount / (now - lastUpdate))
            FPSTag:SetTitle("FPS: " .. fps)
            
            if fps >= 50 then
                FPSTag:SetColor(Color3.fromRGB(0, 255, 0)) -- Green
            elseif fps >= 30 then
                FPSTag:SetColor(Color3.fromRGB(255, 200, 0)) -- Yellow
            else
                FPSTag:SetColor(Color3.fromRGB(255, 0, 0)) -- Red
            end
            
            
            frameCount = 0
            lastUpdate = now
        end
    end)

### [Ping Counter Tag](https://footagesus.github.io/treehub-web/docs/windui/tag#ping-counter-tag)

    local PingTag = Window:Tag({
        Title = "Ping: 0ms",
        Color = Color3.fromRGB(100, 200, 255),
    })
     
    task.spawn(function()
        while true do
            local success, ping = pcall(function()
                local Stats = game:GetService("Stats")
                local pingValue = Stats.Network.ServerStatsItem["Data Ping"]:GetValue()
                return math.floor(pingValue)
            end)
            
            if success and ping then
                PingTag:SetTitle("Ping: " .. ping .. "ms")
                
                if ping <= 50 then
                    PingTag:SetColor(Color3.fromRGB(0, 255, 0)) -- Green
                elseif ping <= 100 then
                    PingTag:SetColor(Color3.fromRGB(255, 200, 0)) -- Yellow
                elseif ping <= 200 then
                    PingTag:SetColor(Color3.fromRGB(255, 150, 0)) -- Orange
                else
                    PingTag:SetColor(Color3.fromRGB(255, 0, 0)) -- Red
                end
            end
            
            task.wait(2)
        end
    end)

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/tag#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
     - Text display with tags
*   [Button](https://footagesus.github.io/treehub-web/docs/windui/button)
     - Similar interactive element
*   [Section](https://footagesus.github.io/treehub-web/docs/windui/section)
     - Section containers for organizing tags

[Notification\
\
Display system notifications to users](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tab Section\
\
Create tab sections in WindUI](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

---

# Tab Section

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Tab Section
===========

Create tab sections in WindUI

![Tab Section](https://footagesus.github.io/treehub-web//_next/static/media/TabSection.803aa3d4.png)

[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection#tab-section)

===========================================================================================

Tab sections are used to organize tabs into groups

BasicFull

    Window:Section({
        Title = "Tab Section example"
    })

[Tab Section Usage](https://footagesus.github.io/treehub-web/docs/windui/tabsection#tab-section-usage)

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

    local section = Window:Section({
        Title = "Tab Section example"
    })
     
    -- creating tabs in the section
    section:Tab({ Title = "Tab 1" })
    section:Tab({ Title = "Tab 2" })
    section:Tab({ Title = "Tab 3" })

[Tab Section Parameters](https://footagesus.github.io/treehub-web/docs/windui/tabsection#tab-section-parameters)

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

Show Details

NameDefault

Title: stringSection

Icon: stringnil

IconThemed: booleannil

Opened: booleanfalse

[Tag\
\
Create tag badges and labels in WindUI](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Section\
\
Organize elements into collapsible sections in WindUI](https://footagesus.github.io/treehub-web/docs/windui/sections)

---

# Section

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Section
=======

Organize elements into collapsible sections in WindUI

![Section](https://footagesus.github.io/treehub-web//_next/static/media/Section.a7fb2b6e.png)

[Section Element](https://footagesus.github.io/treehub-web/docs/windui/sections#section-element)

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

Sections organize related elements into collapsible groups. They're useful for grouping related settings or features.

BasicFull

    local Section = Tab:Section({
        Title = "General Settings"
    })
     
    Section:Button({ Title = "Button in Section" })
    Section:Toggle({ Title = "Toggle in Section" })

[Section Parameters](https://footagesus.github.io/treehub-web/docs/windui/sections#section-parameters)

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

Show Details

NameDefault

Title: stringSection

Desc: string?nil

Icon: string?nil

IconColor: Color3?nil

TextSize: number?19

TextXAlignment: string?Left

Box: boolean?false

BoxBorder: boolean?false

Opened: boolean?true

FontWeight: Enum.FontWeight?SemiBold

DescFontWeight: Enum.FontWeight?Medium

TextTransparency: number?0.05

DescTextTransparency: number?0.4

[Section Function](https://footagesus.github.io/treehub-web/docs/windui/sections#section-function)

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

Show Details

Name

:SetTitle(Title: string)

:SetDesc(Description: string)

:Open()

:Close()

:Destroy()

[Section Variants](https://footagesus.github.io/treehub-web/docs/windui/sections#section-variants)

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

### [Simple Section](https://footagesus.github.io/treehub-web/docs/windui/sections#simple-section)

    local BasicSection = Tab:Section({
        Title = "Basic Options"
    })
     
    BasicSection:Button({ Title = "Option 1" })
    BasicSection:Button({ Title = "Option 2" })
    BasicSection:Button({ Title = "Option 3" })

### [Section with Icon](https://footagesus.github.io/treehub-web/docs/windui/sections#section-with-icon)

    local DisplaySection = Tab:Section({
        Title = "Display",
        Icon = "monitor",
        Opened = true
    })
     
    DisplaySection:Toggle({ Title = "Dark Mode" })
    DisplaySection:Slider({ 
        Title = "Brightness",
        Value = { Min = 0, Max = 100, Default = 80 }
    })

### [Section with Description](https://footagesus.github.io/treehub-web/docs/windui/sections#section-with-description)

    local AdvancedSection = Tab:Section({
        Title = "Advanced Settings",
        Desc = "Configure expert-level options",
        Icon = "zap",
        Opened = false
    })
     
    AdvancedSection:Toggle({ Title = "Enable Debug Mode" })
    AdvancedSection:Input({ Title = "API Key" })

### [Boxed Section](https://footagesus.github.io/treehub-web/docs/windui/sections#boxed-section)

    local BoxedSection = Tab:Section({
        Title = "Important Settings",
        Box = true,
        BoxBorder = true,
        Icon = "alert-circle",
        Opened = true
    })
     
    BoxedSection:Toggle({ Title = "Require Confirmation" })
    BoxedSection:Button({ Title = "Apply Changes" })

### [Closed Section](https://footagesus.github.io/treehub-web/docs/windui/sections#closed-section)

    local CollapsedSection = Tab:Section({
        Title = "Advanced Options",
        Icon = "settings",
        Opened = false,
        TextSize = 16
    })
     
    CollapsedSection:Button({ Title = "Advanced Setting 1" })
    CollapsedSection:Button({ Title = "Advanced Setting 2" })

### [Centered Section](https://footagesus.github.io/treehub-web/docs/windui/sections#centered-section)

    local CenteredSection = Tab:Section({
        Title = "Features",
        TextXAlignment = "Center",
        TextSize = 20
    })
     
    CenteredSection:Button({ Title = "Feature A" })
    CenteredSection:Button({ Title = "Feature B" })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/sections#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Elements](https://footagesus.github.io/treehub-web/docs/windui/button)
     - Available elements to add to sections
*   [Window](https://footagesus.github.io/treehub-web/docs/windui/window)
     - Create sections in window

[Tab Section\
\
Create tab sections in WindUI](https://footagesus.github.io/treehub-web/docs/windui/tabsection)
[Button\
\
Create interactive buttons in WindUI](https://footagesus.github.io/treehub-web/docs/windui/button)

---

# Popup

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Popup
=====

Create standalone popup windows

[Popup Component](https://footagesus.github.io/treehub-web/docs/windui/popup#popup-component)

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

Popups are standalone windows that display information with action buttons. They're useful for announcements, confirmations, and important messages.

BasicFull

    local Popup = WindUI:Popup({
        Title = "Welcome",
        Content = "Welcome to our application!",
        Buttons = {
            {
                Title = "Get Started",
                Callback = function()
                    print("Getting started...")
                end
            }
        }
    })

[Popup Parameters](https://footagesus.github.io/treehub-web/docs/windui/popup#popup-parameters)

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

Show Details

NameDefault

Title: stringPopup

Icon: string?nil

Content: stringnil

Buttons: table{}

[Button Configuration](https://footagesus.github.io/treehub-web/docs/windui/popup#button-configuration)

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

Each button in the Buttons array can have:

Show Details

NameDefault

Title: stringButton

Icon: string?nil

Variant: string?Primary

Callback: function?nil

[Popup Methods](https://footagesus.github.io/treehub-web/docs/windui/popup#popup-methods)

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

### [Close Popup](https://footagesus.github.io/treehub-web/docs/windui/popup#close-popup)

Close and hide the popup.

    Popup:Close()

[Differences: Popup vs Dialog](https://footagesus.github.io/treehub-web/docs/windui/popup#differences-popup-vs-dialog)

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

*   **Popup**: Standalone windows with title and full styling, for announcements
*   **Dialog**: Modal prompts that block window interaction, for confirmations
*   **Notification**: Temporary messages that auto-dismiss, for feedback

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/popup#related-documentation)

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

*   [Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
     - Modal confirmation dialogs
*   [Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
     - Temporary notification messages
*   [Window](https://footagesus.github.io/treehub-web/docs/windui/window)
     - Main window container

[Dialog\
\
Create confirmation dialogs and prompts in WindUI](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Notification\
\
Display system notifications to users](https://footagesus.github.io/treehub-web/docs/windui/notification)

---

# Dialog

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Dialog
======

Create confirmation dialogs and prompts in WindUI

[Dialog Component](https://footagesus.github.io/treehub-web/docs/windui/dialog#dialog-component)

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

Dialogs are modal windows that prompt users for confirmation or input. They block interaction with other UI elements until closed.

BasicFull

    local Dialog = Window:Dialog({
        Title = "Confirm Action",
        Content = "Are you sure?",
        Buttons = {
            {
                Title = "Yes",
                Callback = function()
                    print("Confirmed")
                end
            },
            {
                Title = "No",
                Callback = function()
                    print("Cancelled")
                end
            }
        }
    })

[Dialog Parameters](https://footagesus.github.io/treehub-web/docs/windui/dialog#dialog-parameters)

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

Show Details

NameDefault

Title: stringDialog

Icon: string?nil

IconThemed: boolean?false

Content: stringnil

Buttons: table{}

[Button Configuration](https://footagesus.github.io/treehub-web/docs/windui/dialog#button-configuration)

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

Each button in the Buttons array can have:

Show Details

NameDefault

Title: stringButton

Icon: string?nil

Variant: string?Primary

Callback: function?nil

[Dialog Methods](https://footagesus.github.io/treehub-web/docs/windui/dialog#dialog-methods)

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

### [Show Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog#show-dialog)

Display the dialog on screen. This makes it visible and interactive.

    Dialog:Show()

### [Close Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog#close-dialog)

Hide and close the dialog.

    Dialog:Close()

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/dialog#related-documentation)

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

*   [Window](https://footagesus.github.io/treehub-web/docs/windui/window)
     - Window container
*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
     - Popup notifications
*   [Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
     - System notifications

[Tab\
\
Create and configure tabs in WindUI windows](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Popup\
\
Create standalone popup windows](https://footagesus.github.io/treehub-web/docs/windui/popup)

---

# Button

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Button
======

Create interactive buttons in WindUI

[Button Element](https://footagesus.github.io/treehub-web/docs/windui/button#button-element)

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

Buttons are interactive elements that trigger callbacks when clicked. They can display icons, descriptions, and support locked states.

BasicFull

    local Button = Tab:Button({
        Title = "Click Me",
        Callback = function()
            print("Button clicked")
        end
    })

[Button Parameters](https://footagesus.github.io/treehub-web/docs/windui/button#button-parameters)

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

Show Details

NameDefault

Title: stringButton

Desc: string?nil

Icon: string?nil

IconAlign: string?Right

IconColor: Color3?nil

Color: Color3?nil

Locked: boolean?false

LockedTitle: string?nil

Justify: string?Between

Flag: string?nil

Callback: function?nil

[Button Functions](https://footagesus.github.io/treehub-web/docs/windui/button#button-functions)

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

Show Details

Name

:SetTitle(Title: string)

:SetDesc(Description: string)

:Lock()

:Unlock()

:Highlight()

:Destroy()

[Button Variants](https://footagesus.github.io/treehub-web/docs/windui/button#button-variants)

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

### [Simple Button](https://footagesus.github.io/treehub-web/docs/windui/button#simple-button)

    Tab:Button({
        Title = "Simple Action",
        Callback = function()
            print("Action triggered")
        end
    })

### [Button with Icon](https://footagesus.github.io/treehub-web/docs/windui/button#button-with-icon)

    Tab:Button({
        Title = "Save Settings",
        Icon = "save",
        IconAlign = "Left",
        Callback = function()
            print("Settings saved")
        end
    })

### [Button with Description](https://footagesus.github.io/treehub-web/docs/windui/button#button-with-description)

    Tab:Button({
        Title = "Advanced Option",
        Desc = "Click here to access advanced features",
        Callback = function()
            print("Opening advanced menu...")
        end
    })

### [Colored Button](https://footagesus.github.io/treehub-web/docs/windui/button#colored-button)

    Tab:Button({
        Title = "Delete Item",
        Color = Color3.fromRGB(255, 100, 100), -- red
        Callback = function()
            print("Item deleted")
        end
    })

### [Locked Button](https://footagesus.github.io/treehub-web/docs/windui/button#locked-button)

    local LimitedButton = Tab:Button({
        Title = "Premium Feature",
        Locked = true,
        LockedTitle = "Requires Premium",
        Callback = function()
            print("Premium feature activated")
        end
    })

### [Button with Centered Layout](https://footagesus.github.io/treehub-web/docs/windui/button#button-with-centered-layout)

    Tab:Button({
        Title = "Center Button",
        Justify = "Center",
        Callback = function()
            print("Centered button clicked")
        end
    })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/button#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)
     - Available icon references

[Section\
\
Organize elements into collapsible sections in WindUI](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Toggle\
\
Create toggle switches and checkboxes in WindUI](https://footagesus.github.io/treehub-web/docs/windui/toggle)

---

# Toggle

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Toggle
======

Create toggle switches and checkboxes in WindUI

[Toggle Element](https://footagesus.github.io/treehub-web/docs/windui/toggle#toggle-element)

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

Toggles are switch elements that represent binary states (on/off, true/false). They're ideal for enabling/disabling features.

BasicFull

    local Toggle = Tab:Toggle({
        Title = "Enable Feature",
        Callback = function(state)
            print("Toggle state:", state)
        end
    })

[Toggle Parameters](https://footagesus.github.io/treehub-web/docs/windui/toggle#toggle-parameters)

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

Show Details

NameDefault

Title: stringToggle

Desc: string?nil

Icon: string?nil

Value: boolean?false

Type: string?Toggle

Locked: boolean?false

Flag: string?nil

Callback: function?nil

[Toggle Functions](https://footagesus.github.io/treehub-web/docs/windui/toggle#toggle-functions)

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

Show Details

Name

:SetTitle(Title: string)

:SetDesc(Description: string)

:Set(Value: boolean)

:Toggle()

:Lock()

:Unlock()

:Highlight()

:Destroy()

[Toggle Variants](https://footagesus.github.io/treehub-web/docs/windui/toggle#toggle-variants)

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

### [Simple Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle#simple-toggle)

    Tab:Toggle({
        Title = "Feature Enabled",
        Value = false,
        Callback = function(state)
            print("Feature enabled:", state)
        end
    })

### [Checkbox Style Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle#checkbox-style-toggle)

    Tab:Toggle({
        Title = "Accept Terms",
        Type = "Checkbox",
        Value = false,
        Callback = function(state)
            print("Terms accepted:", state)
        end
    })

### [Toggle with Icon](https://footagesus.github.io/treehub-web/docs/windui/toggle#toggle-with-icon)

    Tab:Toggle({
        Title = "Enable Notifications",
        Icon = "bell",
        Value = true,
        Callback = function(state)
            print("Notifications:", state and "Enabled" or "Disabled")
        end
    })

### [Locked Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle#locked-toggle)

    local PremiumToggle = Tab:Toggle({
        Title = "Premium Feature",
        Locked = true,
        Value = false,
        Callback = function(state)
            print("Premium feature:", state)
        end
    })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/toggle#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
     - Dialog/prompt system

[Button\
\
Create interactive buttons in WindUI](https://footagesus.github.io/treehub-web/docs/windui/button)
[Slider\
\
Create slider controls for numeric input in WindUI](https://footagesus.github.io/treehub-web/docs/windui/slider)

---

# Dropdown

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Dropdown
========

Create dropdown select menus in WindUI

[Dropdown Element](https://footagesus.github.io/treehub-web/docs/windui/dropdown#dropdown-element)

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

Dropdowns allow users to select from a list of predefined Values. They're useful for presenting multiple choices in a compact format.

BasicFullAdvanced

    local Dropdown = Tab:Dropdown({
        Title = "Select Value",
        Values = {
            "Option 1",
            "Option 2",
            "Option 3"
        },
        Callback = function(selected)
            print("Selected:", selected)
        end
    })

[Dropdown Parameters](https://footagesus.github.io/treehub-web/docs/windui/dropdown#dropdown-parameters)

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

Show Details

NameDefault

Title: stringDropdown

Desc: string?nil

Values: table{}

Value: string?nil

AllowNone: boolean?false

SearchBarEnabled: boolean?false

Multi: boolean?false

Locked: boolean?false

Flag: string?nil

Callback: function?nil

[Dropdown Functions](https://footagesus.github.io/treehub-web/docs/windui/dropdown#dropdown-functions)

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

Show Details

Name

:SetTitle(Title: string)

:SetDesc(Description: string)

:Select(Value: string | table)

:Lock()

:Unlock()

:Highlight()

:Destroy()

[Dropdown Variants](https://footagesus.github.io/treehub-web/docs/windui/dropdown#dropdown-variants)

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

### [Simple Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown#simple-dropdown)

    Tab:Dropdown({
        Title = "Choose Theme",
        Values = {
            "Light",
            "Dark",
            "Auto"
        },
        Value = "Dark",
        Callback = function(selected)
            print("Theme:", selected)
        end
    })

### [Multi-Select Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown#multi-select-dropdown)

    Tab:Dropdown({
        Title = "Select Features",
        Desc = "Choose multiple features to enable",
        Values = {
            "Feature A",
            "Feature B",
            "Feature C",
            "Feature D"
        },
        Multi = true,
        AllowNone = true,
        Callback = function(selected)
            print("Selected features:", selected)
        end
    })

IMPORTANT

Dropdown does not support duplicate values. Each entry in the Values list must be unique.

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/dropdown#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
    
*   [Input](https://footagesus.github.io/treehub-web/docs/windui/input)
    
*   [Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
    

[Input\
\
Create text input fields in WindUI](https://footagesus.github.io/treehub-web/docs/windui/input)
[Paragraph\
\
Display static text and media content in WindUI](https://footagesus.github.io/treehub-web/docs/windui/paragraph)

---

# Slider

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Slider
======

Create slider controls for numeric input in WindUI

[Slider Element](https://footagesus.github.io/treehub-web/docs/windui/slider#slider-element)

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

Sliders allow users to select a numeric value within a range. They support both integer and floating-point numbers.

BasicFull

    local Slider = Tab:Slider({
        Title = "Volume",
        Value = {
            Min = 0,
            Max = 100,
            Default = 50
        },
        Callback = function(value)
            print("Volume:", value)
        end
    })

[Slider Parameters](https://footagesus.github.io/treehub-web/docs/windui/slider#slider-parameters)

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

Show Details

NameDefault

Title: stringSlider

Desc: string?nil

Value.Min: number0

Value.Max: number100

Value.Default: number50

Step: number?1

Locked: boolean?false

Flag: string?nil

Callback: function?nil

Width: number?130

[Slider Functions](https://footagesus.github.io/treehub-web/docs/windui/slider#slider-functions)

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

Show Details

Name

:SetTitle(Title: string)

:SetDesc(Description: string)

:Set(Value: number)

:SetMin(Min: number)

:SetMax(Max: number)

:Lock()

:Unlock()

:Highlight()

:Destroy()

[Slider Variants](https://footagesus.github.io/treehub-web/docs/windui/slider#slider-variants)

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

### [Integer Slider](https://footagesus.github.io/treehub-web/docs/windui/slider#integer-slider)

    Tab:Slider({
        Title = "Speed",
        Value = { Min = 1, Max = 10, Default = 5 },
        Step = 1, -- integer steps
        Callback = function(value)
            print("Speed:", value)
        end
    })

### [Float Slider](https://footagesus.github.io/treehub-web/docs/windui/slider#float-slider)

    Tab:Slider({
        Title = "Sensitivity",
        Value = { Min = 0, Max = 1, Default = 0.5 },
        Step = 0.1, -- decimal steps
        Callback = function(value)
            print("Sensitivity:", value)
        end
    })

### [Large Range Slider](https://footagesus.github.io/treehub-web/docs/windui/slider#large-range-slider)

    Tab:Slider({
        Title = "Population",
        Value = { Min = 0, Max = 1000000, Default = 500000 },
        Step = 10000,
        Callback = function(value)
            print("Population:", value)
        end
    })

### [Slider with Icons](https://footagesus.github.io/treehub-web/docs/windui/slider#slider-with-icons)

    Tab:Slider({
        Title = "Brightness",
        Icons = {
            From = "sfsymbols:sunMinFill",
            To = "sfsymbols:sunMaxFill",
        },
        Value = { Min = 0, Max = 100, Default = 75 },
        Callback = function(value)
            print("Brightness:", value)
        end
    })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/slider#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Input](https://footagesus.github.io/treehub-web/docs/windui/input)
     - Text input element
*   [Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
     - Boolean toggle element

[Toggle\
\
Create toggle switches and checkboxes in WindUI](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Input\
\
Create text input fields in WindUI](https://footagesus.github.io/treehub-web/docs/windui/input)

---

# Input

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Input
=====

Create text input fields in WindUI

[Input Element](https://footagesus.github.io/treehub-web/docs/windui/input#input-element)

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

Input fields allow users to enter text data. They support both single-line and multi-line (textarea) inputs.

BasicFull

    local Input = Tab:Input({
        Title = "Username",
        Callback = function(text)
            print("Input:", text)
        end
    })

[Input Parameters](https://footagesus.github.io/treehub-web/docs/windui/input#input-parameters)

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

Show Details

NameDefault

Title: stringInput

Desc: string?nil

Icon: string?nil

Type: string?Default

Placeholder: string?nil

Value: string?empty

Locked: boolean?false

Flag: string?nil

Callback: function?nil

[Input Functions](https://footagesus.github.io/treehub-web/docs/windui/input#input-functions)

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

Show Details

Name

:SetTitle(Title: string)

:SetDesc(Description: string)

:Set(Value: string)

:Lock()

:Unlock()

:Highlight()

:Destroy()

[Input Variants](https://footagesus.github.io/treehub-web/docs/windui/input#input-variants)

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

### [Textarea Input](https://footagesus.github.io/treehub-web/docs/windui/input#textarea-input)

    Tab:Input({
        Title = "Description",
        Type = "Textarea",
        Placeholder = "Enter detailed description...",
        Callback = function(text)
            print("Description:", text)
        end
    })

### [Input with Icon](https://footagesus.github.io/treehub-web/docs/windui/input#input-with-icon)

    Tab:Input({
        Title = "Icon Input",
        Icon = "key",
        Callback = function(v)
            print("Entered", v)
        end
    })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/input#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
     - Numeric input
*   [Validation Patterns](https://footagesus.github.io/treehub-web/docs/windui/dialog)
     - How to validate user input

[Slider\
\
Create slider controls for numeric input in WindUI](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Dropdown\
\
Create dropdown select menus in WindUI](https://footagesus.github.io/treehub-web/docs/windui/dropdown)

---

# Colorpicker

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Colorpicker
===========

Create color selection elements in WindUI

[Colorpicker Element](https://footagesus.github.io/treehub-web/docs/windui/colorpicker#colorpicker-element)

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

Colorpickers allow users to select colors with a visual interface. They return Color3 values for use in your application.

BasicFull

    local Colorpicker = Tab:Colorpicker({
        Title = "Select Color",
        Callback = function(color)
            print("Color selected:", color)
        end
    })

[Colorpicker Parameters](https://footagesus.github.io/treehub-web/docs/windui/colorpicker#colorpicker-parameters)

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

Show Details

NameDefault

Title: stringColorpicker

Desc: string?nil

Default: Color3?Color3.fromRGB(255, 255, 255)

Locked: boolean?false

Flag: string?nil

Callback: function?nil

[Colorpicker Functions](https://footagesus.github.io/treehub-web/docs/windui/colorpicker#colorpicker-functions)

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

Show Details

Name

:Set(Color: Color3, Transparency: number?)

:Lock()

:Unlock()

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/colorpicker#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
     - For numeric RGB values

[Keybind\
\
Create keyboard shortcut bindings in WindUI](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Code\
\
Display code blocks with syntax highlighting](https://footagesus.github.io/treehub-web/docs/windui/code)

---

# Paragraph

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Paragraph
=========

Display static text and media content in WindUI

[Paragraph Element](https://footagesus.github.io/treehub-web/docs/windui/paragraph#paragraph-element)

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

Paragraph displays text content with optional icons, thumbnails, and buttons.  
Use it for information blocks, status messages, descriptions, or annotated UI text.

BasicFull

    Tab:Paragraph({
        Title = "Info",
        Desc = "Basic paragraph text"
    })

[Paragraph Properties](https://footagesus.github.io/treehub-web/docs/windui/paragraph#paragraph-properties)

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

Show Details

NameDefault

Title: string""

Desc: string""

Image: string?nil

ImageSize: number?nil

Thumbnail: string?nil

ThumbnailSize: number?nil

Color: string | Color3?nil

Buttons: table?nil

Locked: boolean?false

[Button Properties](https://footagesus.github.io/treehub-web/docs/windui/paragraph#button-properties)

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

Show Details

NameDefault

Title: string""

Icon: string?nil

Variant: string?nil

Callback()nil

[Paragraph Functions](https://footagesus.github.io/treehub-web/docs/windui/paragraph#paragraph-functions)

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

Show Details

Name

:SetTitle(Title: string)

:SetDesc(Description: string)

:SetImage(Image: string, ImageSize: number?)

:SetThumbnail(Thumbnail: string, ThumbnailSize: number?)

:SetColor(Color: Color3)

:Destroy()

[Examples](https://footagesus.github.io/treehub-web/docs/windui/paragraph#examples)

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

### [Simple Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph#simple-paragraph)

    Tab:Paragraph({
        Title = "Version",
        Desc = "App version 2.1.0"
    })

### [With Image](https://footagesus.github.io/treehub-web/docs/windui/paragraph#with-image)

    Tab:Paragraph({
        Title = "Status",
        Desc = "All systems operational",
        Image = "check-circle",
        ImageSize = 20
    })

### [With Thumbnail](https://footagesus.github.io/treehub-web/docs/windui/paragraph#with-thumbnail)

    Tab:Paragraph({
        Title = "Feature Highlight",
        Desc = "See the new UI",
        Thumbnail = "rbxassetid://",
        ThumbnailSize = 80
    })

### [With Buttons](https://footagesus.github.io/treehub-web/docs/windui/paragraph#with-buttons)

    Tab:Paragraph({
        Title = "Update Available",
        Desc = "Version 3.0 ready to install",
        Buttons = {
            { Title = "Install", Icon = "download", Callback = function() end }
        }
    })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/paragraph#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
    
*   [Button](https://footagesus.github.io/treehub-web/docs/windui/button)
    

[Dropdown\
\
Create dropdown select menus in WindUI](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Keybind\
\
Create keyboard shortcut bindings in WindUI](https://footagesus.github.io/treehub-web/docs/windui/keybind)

---

# Keybind

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Keybind
=======

Create keyboard shortcut bindings in WindUI

[Keybind Element](https://footagesus.github.io/treehub-web/docs/windui/keybind#keybind-element)

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

Keybinds allow users to bind keyboard shortcuts to actions. They support all keyboard keys and modifier combinations.

BasicFull

    local Keybind = Tab:Keybind({
        Title = "Toggle UI",
        Value = "V", -- default key
        Callback = function(key)
            print("Keybind pressed:", key)
        end
    })

[Keybind Parameters](https://footagesus.github.io/treehub-web/docs/windui/keybind#keybind-parameters)

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

Show Details

NameDefault

Title: stringKeybind

Desc: string?nil

Value: string?nil

Locked: boolean?false

Flag: string?nil

Callback: function?nil

[Keybind Methods](https://footagesus.github.io/treehub-web/docs/windui/keybind#keybind-methods)

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

Show Details

Name

:SetTitle(Title: string)

:Set(Value: Enum.KeyCode)

:Lock()

:Unlock()

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/keybind#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
     - Advanced key system

[Paragraph\
\
Display static text and media content in WindUI](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Colorpicker\
\
Create color selection elements in WindUI](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)

---

# Code

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Code
====

Display code blocks with syntax highlighting

[Code Element](https://footagesus.github.io/treehub-web/docs/windui/code#code-element)

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

Code elements display formatted code with syntax highlighting and copy functionality.

BasicFull

    Tab:Code({
        Title = "Example Code",
        Code = "print('Hello World')"
    })

[Code Parameters](https://footagesus.github.io/treehub-web/docs/windui/code#code-parameters)

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

Show Details

NameDefault

Title: string?nil

Code: string

CodeSize: number18

CodeTheme: tablenil

CanCopied: booleantrue

Height: UDimnil

OnCopy: function?nil

[Code Functions](https://footagesus.github.io/treehub-web/docs/windui/code#code-functions)

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

Show Details

Name

:SetCode(Code: string)

:Destroy()

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/code#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
     - Text display element

[Colorpicker\
\
Create color selection elements in WindUI](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Divider\
\
Add visual dividers between elements](https://footagesus.github.io/treehub-web/docs/windui/divider)

---

# Divider

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Divider
=======

Add visual dividers between elements

[Divider Element](https://footagesus.github.io/treehub-web/docs/windui/divider#divider-element)

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

Dividers are visual separators used to organize and group elements visually.

    Your_Tab:Divider()

[Usage Examples](https://footagesus.github.io/treehub-web/docs/windui/divider#usage-examples)

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

### [Separate Sections](https://footagesus.github.io/treehub-web/docs/windui/divider#separate-sections)

    Tab:Button({ Title = "Option 1" })
    Tab:Button({ Title = "Option 2" })
     
    Tab:Divider() -- visual separator
     
    Tab:Button({ Title = "Option 3" })
    Tab:Button({ Title = "Option 4" })

### [Organize Content](https://footagesus.github.io/treehub-web/docs/windui/divider#organize-content)

    Tab:Paragraph({
        Title = "Basic Features",
        Desc = "Core functionality"
    })
     
    Tab:Button({ Title = "Feature 1" })
    Tab:Button({ Title = "Feature 2" })
     
    Tab:Divider()
     
    Tab:Paragraph({
        Title = "Advanced Features",
        Desc = "Expert options"
    })
     
    Tab:Button({ Title = "Feature 3" })
    Tab:Button({ Title = "Feature 4" })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/divider#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Space](https://footagesus.github.io/treehub-web/docs/windui/space)
     - Add spacing between elements
*   [Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
     - Group elements in collapsible sections

[Code\
\
Display code blocks with syntax highlighting](https://footagesus.github.io/treehub-web/docs/windui/code)
[Space\
\
Add spacing between elements](https://footagesus.github.io/treehub-web/docs/windui/space)

---

# Space

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Space
=====

Add spacing between elements

["Space" Element](https://footagesus.github.io/treehub-web/docs/windui/space#space-element)

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

Spaces add vertical or horizontal gaps between elements for better visual organization.

    Tab:Space({ Columns = 1 })

[Space Parameters](https://footagesus.github.io/treehub-web/docs/windui/space#space-parameters)

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

Show Details

NameDefault

Columns: number?1

[Usage Examples](https://footagesus.github.io/treehub-web/docs/windui/space#usage-examples)

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

### [Add Vertical Spacing](https://footagesus.github.io/treehub-web/docs/windui/space#add-vertical-spacing)

    Tab:Button({ Title = "Button 1" })
     
    Tab:Space()
     
    Tab:Button({ Title = "Button 2" })

### [Multi-Column Space](https://footagesus.github.io/treehub-web/docs/windui/space#multi-column-space)

    Tab:Space({ Columns = 3 })

### [Organize Groups](https://footagesus.github.io/treehub-web/docs/windui/space#organize-groups)

    Tab:Button({ Title = "Save" })
    Tab:Button({ Title = "Cancel" })
     
    Tab:Space({ Columns = 2 })
     
    Tab:Button({ Title = "Delete" })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/space#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
     - Visual divider between elements
*   [Group](https://footagesus.github.io/treehub-web/docs/windui/group)
     - Horizontal element layout

[Divider\
\
Add visual dividers between elements](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Image\
\
Display images in WindUI](https://footagesus.github.io/treehub-web/docs/windui/image)

---

# HStack & VStack

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

HStack & VStack
===============

Layout containers for horizontal and vertical organization of elements

![HStack & VStack](https://footagesus.github.io/treehub-web//_next/static/media/HStackVStack.53c45b3a.png)

[HStack & VStack Element](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack#hstack--vstack-element)

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

HStack and VStack are layout containers that allow you to organize elements horizontally or vertically, respectively.

### [HStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack#hstack)

    local Tab:HStack()

### [VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack#vstack)

    local Tab:VStack()

[HStack & VStack Parameters](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack#hstack--vstack-parameters)

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

Show Details

NameDefault

AutoSpace: boolean?nil

[Group (deprecated)\
\
Layout elements horizontally in groups](https://footagesus.github.io/treehub-web/docs/windui/group)
[ProgressBar\
\
Create determinate and indeterminate progress bars](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

---

# Image

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Image
=====

Display images in WindUI

[Image Element](https://footagesus.github.io/treehub-web/docs/windui/image#image-element)

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

Images display visual content from URLs or asset IDs `rbxassetid://`.

    Tab:Image({
        Image = "https://example.com/image.png",
        AspectRatio = "16:9",
        Radius = 12,
    })

[Image Parameters](https://footagesus.github.io/treehub-web/docs/windui/image#image-parameters)

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

Show Details

NameDefault

Image: string

AspectRatio: string?16:9

Radius: number?23 or 12

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/image#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
     - For text with images

[Space\
\
Add spacing between elements](https://footagesus.github.io/treehub-web/docs/windui/space)
[Group (deprecated)\
\
Layout elements horizontally in groups](https://footagesus.github.io/treehub-web/docs/windui/group)

---

# Group (deprecated)

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Group (deprecated)
==================

Layout elements horizontally in groups

This element is deprecated and will be removed in a future update.  
`Group` element is now replaced by [HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
 for more flexible horizontal and vertical grouping.

[Group Element](https://footagesus.github.io/treehub-web/docs/windui/group#group-element)

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

Groups arrange elements horizontally for compact layouts and side-by-side arrangements.

    local Group = Tab:Group({})
     
    Group:Button({ Title = "Button 1" })
    Group:Button({ Title = "Button 2" })
    Group:Button({ Title = "Button 3" })

[Usage Examples](https://footagesus.github.io/treehub-web/docs/windui/group#usage-examples)

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

### [Button Group](https://footagesus.github.io/treehub-web/docs/windui/group#button-group)

    local ActionGroup = Tab:Group({})
     
    ActionGroup:Button({ Title = "Save", Icon = "save", Justify = "Center" })
    ActionGroup:Button({ Title = "Edit", Icon = "edit", Justify = "Center" })
    ActionGroup:Button({ Title = "Delete", Icon = "trash", Justify = "Center" })

### [Toggle Group](https://footagesus.github.io/treehub-web/docs/windui/group#toggle-group)

    local SettingsGroup = Tab:Group({})
     
    SettingsGroup:Toggle({ Title = "Option A" })
    SettingsGroup:Toggle({ Title = "Option B" })
    SettingsGroup:Toggle({ Title = "Option C" })

### [Mixed Elements](https://footagesus.github.io/treehub-web/docs/windui/group#mixed-elements)

    local ControlGroup = Tab:Group({})
     
    ControlGroup:Input({ Title = "Search" })
    ControlGroup:Button({ Title = "Go" })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/group#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Button](https://footagesus.github.io/treehub-web/docs/windui/button)
     - Button element
*   [Space](https://footagesus.github.io/treehub-web/docs/windui/space)
     - Add spacing in groups
*   [Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
     - Vertical grouping of elements

[Image\
\
Display images in WindUI](https://footagesus.github.io/treehub-web/docs/windui/image)
[HStack & VStack\
\
Layout containers for horizontal and vertical organization of elements](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)

---

# Icons

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Icons
=====

Available icon references for WindUI elements

[Icon System](https://footagesus.github.io/treehub-web/docs/windui/icons#icon-system)

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

WindUI supports icons from multiple sources:

1.  **Built-In Icons** (recommended)
2.  **Roblox Asset IDs** - **Use** rbxassetid:// format
3.  **Image URLs** - External image RAW links

[Built-In Icons](https://footagesus.github.io/treehub-web/docs/windui/icons#built-in-icons)

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

WindUI uses [Lucide](https://lucide.dev/)
 icons by default. You can reference any Lucide icon by its name.

### [All Available Icon Sets](https://footagesus.github.io/treehub-web/docs/windui/icons#all-available-icon-sets)

|     |     |
| --- | --- |All Icon Sets
| Name | Prefix |
| --- | --- |
| [Lucide Icons](https://github.com/lucide-icons/lucide) | `lucide:` |
| [Craft Icons](https://www.figma.com/community/file/1415718327120418204) | `craft:` |
| [Geist Icons](https://vercel.com/geist/icons) | `geist:` |
| [Solar Icons](https://icones.js.org/collection/solar) | `solar:` |
| [SF Symbols](https://sf-symbols.pages.dev/) | `sfsymbols:` |
| [Gravity UI Icons](https://gravity-ui.com/ru/icons) | `gravity:` |

### [All Icons source](https://footagesus.github.io/treehub-web/docs/windui/icons#all-icons-source)

Loading...

[Using Icons](https://footagesus.github.io/treehub-web/docs/windui/icons#using-icons)

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

### [Built-In Icons](https://footagesus.github.io/treehub-web/docs/windui/icons#built-in-icons-1)

Simply use the icon name:

#### [Lucide:](https://footagesus.github.io/treehub-web/docs/windui/icons#lucide)

    Tab:Button({
        Title = "Save",
        Icon = "save" -- default Lucide icon
    })

#### [Solar:](https://footagesus.github.io/treehub-web/docs/windui/icons#solar)

    Tab:Button({
        Title = "Edit",
        Icon = "solar:pen-bold" -- Solar icon
    })

and others

### [Roblox Asset IDs](https://footagesus.github.io/treehub-web/docs/windui/icons#roblox-asset-ids)

Use `rbxassetid://` format:

    Tab:Button({
        Icon = "rbxassetid://123456789",
        IconThemed = true -- optional, applies theme colors
    })

### [Image URLs](https://footagesus.github.io/treehub-web/docs/windui/icons#image-urls)

Provide direct image URLs:

    Tab:Button({
        Icon = "https://example.com/my-icon.png"
    })

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/icons#related-documentation)

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

*   [Button](https://footagesus.github.io/treehub-web/docs/windui/button)
     - Icons in buttons
*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Icons in tabs
*   [Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
     - Icons in sections
*   [Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
     - Icons in notifications

[Configs\
\
Save and load user preferences in WindUI](https://footagesus.github.io/treehub-web/docs/windui/configs)

---

# ProgressBar

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

ProgressBar
===========

Create determinate and indeterminate progress bars

[ProgressBar Element](https://footagesus.github.io/treehub-web/docs/windui/progressbar#progressbar-element)

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

Creates a progress bar for showing completion, loading state, or a numeric value.

BasicIndeterminate

    local Progress = Tab:ProgressBar({
        Title = "Download",
        Desc = "Downloading files...",
        Value = {
            Min = 0,
            Max = 100,
            Default = 25,
        },
    })

[ProgressBar Parameters](https://footagesus.github.io/treehub-web/docs/windui/progressbar#progressbar-parameters)

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

Show Details

NameDefault

Title: string"Progress"

Desc: string?nil

Value.Min: number0

Value.Max: number100

Value.Default: numberMin

ShowValue: boolean?not Indeterminate

DisplayMode: string?"Percent"

Format: function?nil

Animate: boolean?true

AnimationDuration: number?0.15

Indeterminate: boolean?false

IndeterminateText: string?""

Speed: number?1

ControlGap: number?16

Width: number?160

ValueWidth: number?44

[ProgressBar Methods](https://footagesus.github.io/treehub-web/docs/windui/progressbar#progressbar-methods)

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

Show Details

Name

:Set(Value: number)

:Get()

:GetPercentage()

:SetRange(Min: number, Max: number)

:SetMin(Min: number)

:SetMax(Max: number)

[Examples](https://footagesus.github.io/treehub-web/docs/windui/progressbar#examples)

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

### [Custom value display](https://footagesus.github.io/treehub-web/docs/windui/progressbar#custom-value-display)

    local Progress = Tab:ProgressBar({
    	Title = "Storage",
    	Desc = "Used space",
    	Value = { Min = 0, Max = 100, Default = 72 },
    	DisplayMode = "Value",
    	Width = 220,
    })

### [Custom formatter](https://footagesus.github.io/treehub-web/docs/windui/progressbar#custom-formatter)

    local Progress = Tab:ProgressBar({
    	Title = "Bandwidth",
    	Desc = "Live traffic",
    	Value = { Min = 0, Max = 100, Default = 42 },
    	ValueWidth = 84,
    	Format = function(value, percentage, min, max)
    		return string.format("%d%% of %d", math.floor(percentage + 0.5), max)
    	end,
    })

Added by

 ![](https://github.com/BitRevenant.png?size=64) BitRevenant

from [PR #95](https://github.com/Footagesus/WindUI/pull/95)

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/progressbar#related-documentation)

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

*   [Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
     - Tab container
*   [Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
     - Input control for numeric values

[HStack & VStack\
\
Layout containers for horizontal and vertical organization of elements](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[Configs\
\
Save and load user preferences in WindUI](https://footagesus.github.io/treehub-web/docs/windui/configs)

---

# Configs

WindUI

Introducing

[About WindUI](https://footagesus.github.io/treehub-web/docs/windui)

Setup

[Loadstring](https://footagesus.github.io/treehub-web/docs/windui/loadstring)
[Themes](https://footagesus.github.io/treehub-web/docs/windui/themes)

UI

[Window](https://footagesus.github.io/treehub-web/docs/windui/window)
[Key System](https://footagesus.github.io/treehub-web/docs/windui/keysystem)
[Tab](https://footagesus.github.io/treehub-web/docs/windui/tab)
[Dialog](https://footagesus.github.io/treehub-web/docs/windui/dialog)
[Popup](https://footagesus.github.io/treehub-web/docs/windui/popup)
[Notification](https://footagesus.github.io/treehub-web/docs/windui/notification)
[Tag](https://footagesus.github.io/treehub-web/docs/windui/tag)
[Tab Section](https://footagesus.github.io/treehub-web/docs/windui/tabsection)

Elements

[Section](https://footagesus.github.io/treehub-web/docs/windui/sections)
[Button](https://footagesus.github.io/treehub-web/docs/windui/button)
[Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
[Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
[Input](https://footagesus.github.io/treehub-web/docs/windui/input)
[Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
[Paragraph](https://footagesus.github.io/treehub-web/docs/windui/paragraph)
[Keybind](https://footagesus.github.io/treehub-web/docs/windui/keybind)
[Colorpicker](https://footagesus.github.io/treehub-web/docs/windui/colorpicker)
[Code](https://footagesus.github.io/treehub-web/docs/windui/code)
[Divider](https://footagesus.github.io/treehub-web/docs/windui/divider)
[Space](https://footagesus.github.io/treehub-web/docs/windui/space)
[Image](https://footagesus.github.io/treehub-web/docs/windui/image)
[Group (deprecated)](https://footagesus.github.io/treehub-web/docs/windui/group)
[HStack & VStack](https://footagesus.github.io/treehub-web/docs/windui/hstackvstack)
[ProgressBar](https://footagesus.github.io/treehub-web/docs/windui/progressbar)

Advanced

[Configs](https://footagesus.github.io/treehub-web/docs/windui/configs)
[Icons](https://footagesus.github.io/treehub-web/docs/windui/icons)

Configs
=======

Save and load user preferences in WindUI

[Config System](https://footagesus.github.io/treehub-web/docs/windui/configs#config-system)

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

WindUI's Config system automatically saves element states to files. Use the `Flag` property on elements to enable automatic saving.

[Enable Config](https://footagesus.github.io/treehub-web/docs/windui/configs#enable-config)

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

    -- creating window from /docs/windui/window
    local Window = WindUI:CreateWindow({ 
        Title = "My Application",
        Folder = "MyApp", -- creates a folder to store configs
    })

saves at `[YOUR_EXPLOIT]/WindUI/[WIndow.Folder]/configs/`

[Save Element States](https://footagesus.github.io/treehub-web/docs/windui/configs#save-element-states)

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

Elements with a `Flag` property are automatically saved:

    local MyConfig = Window.ConfigManager:Config("MyConfigFile") -- creates/loads config file `MyConfigFile.json`
     
    -- usage example
    local DarkMode = Tab:Toggle({
        Title = "Dark Mode",
        Flag = "dark_mode_enabled", 
        Value = false,
        Callback = function(state)
            print("Dark mode:", state)
        end
    })
     
    local Volume = Tab:Slider({
        Title = "Volume",
        Flag = "master_volume", 
        Value = { Min = 0, Max = 100, Default = 75 },
        Callback = function(value)
            print("Volume:", value)
        end
    })
     
    local Theme = Tab:Dropdown({
        Title = "Theme",
        Flag = "selected_theme", 
        Options = { "Light", "Dark", "Auto" },
        Default = "Dark",
        Callback = function(selected)
            print("Theme:", selected)
        end
    })
     
    local Username = Tab:Input({
        Title = "Username",
        Flag = "user_name", 
        Callback = function(text)
            print("Username:", text)
        end
    })
     
    MyConfig:Save() -- manually save config file

[Folder Structure](https://footagesus.github.io/treehub-web/docs/windui/configs#folder-structure)

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

    -- When you set Folder = "MyApp", WindUI creates:
    -- /WindUI/MyApp/            -- Main folder
    -- /WindUI/MyApp/configs/    -- Config files
    -- /WindUI/MyApp/assets/     -- Cached assets
    -- /MyApp/                   -- Optional backup Folder

[Related Documentation](https://footagesus.github.io/treehub-web/docs/windui/configs#related-documentation)

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

*   [Window](https://footagesus.github.io/treehub-web/docs/windui/window)
     - Window Folder Config
*   [Toggle](https://footagesus.github.io/treehub-web/docs/windui/toggle)
     - Boolean Config
*   [Slider](https://footagesus.github.io/treehub-web/docs/windui/slider)
     - Numeric Config
*   [Input](https://footagesus.github.io/treehub-web/docs/windui/input)
     - Text Config
*   [Dropdown](https://footagesus.github.io/treehub-web/docs/windui/dropdown)
     - Selection Config

[ProgressBar\
\
Create determinate and indeterminate progress bars](https://footagesus.github.io/treehub-web/docs/windui/progressbar)
[Icons\
\
Available icon references for WindUI elements](https://footagesus.github.io/treehub-web/docs/windui/icons)

---