Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Footagesus/WindUI/llms.txt

Use this file to discover all available pages before exploring further.

Tabs are the primary navigation unit in WindUI. Each tab renders a clickable entry in the sidebar and owns a scrollable content panel in the main area. Create a tab directly on the window or inside a Section. 
local MyTab = Window:Tab({
    Title = "Overview",
    Icon  = "solar:home-2-bold",
})

-- or inside a section
local ElementsSection = Window:Section({ Title = "Elements" })

local OverviewTab = ElementsSection:Tab({
    Title    = "Overview",
    Icon     = "solar:home-2-bold",
    IconColor = Color3.fromHex("#83889E"),
    IconShape = "Square",
    Border    = true,
})

​
Config

​
Title
string
default:"Tab"
Label shown on the sidebar entry.
​
Desc
string
Tooltip text displayed when the user hovers over the tab entry for a short delay.
​
Icon
string
Icon name or asset ID displayed on the sidebar entry.
​
IconColor
Color3
Tints the icon and wraps it in a small colored background chip when set.
​
IconShape
string
Shape of the icon chip when IconColor is provided. "Square" produces a squircle chip; omit for a round chip.
​
IconThemed
boolean
When true, the icon color follows the active theme instead of IconColor.
​
Locked
boolean
Prevents the tab from being selected. The entry renders at reduced opacity and ignores clicks.
​
ShowTabTitle
boolean
When true, renders a large title heading at the top of the content panel.
​
TabTitleAlign
"Left" | "Center" | "Right"
default:"\"Left\""
Horizontal alignment of the in-panel title heading. Only applies when ShowTabTitle is true.
​
CustomEmptyPage
table
Overrides the placeholder shown when the tab content panel has no elements.
FieldTypeDescription
IconstringIcon name for the empty state graphic.
IconSizenumberSize of the empty state icon.
TitlestringHeading text for the empty state.
DescstringSubtext for the empty state.
​
Border
boolean
Renders a glass-sheen border on the selected tab entry.

​
Elements

All element methods are available directly on the Tab object. Each method accepts a config table and returns the created element.

Tab:Button(Config)

A clickable button row.

Tab:Toggle(Config)

An on/off switch or checkbox.

Tab:Slider(Config)

A draggable value slider.

Tab:Input(Config)

A single-line or textarea text input.

Tab:Dropdown(Config)

A dropdown menu with single or multi-select.

Tab:Colorpicker(Config)

An HSBA color picker.

Tab:Keybind(Config)

A key capture field.

Tab:Group(Config)

A horizontal row of elements.

Tab:Section(Config)

An inline content section with an optional collapsible body.

Tab:Notification(Config)

Toast notifications triggered from any callback.

Tab:Dialog(Config)

A modal dialog with configurable buttons.

Tab:Popup(Config)

A floating popup overlay.

​
Methods

​
Tab:Select()
Programmatically selects this tab, switching the content panel into view.
​
Tab:LockAll()
Calls :Lock() on every element that belongs to this tab.
​
Tab:UnlockAll()
Calls :Unlock() on every element that belongs to this tab.
​
Tab:GetLocked()
table
Returns a list of all locked elements belonging to this tab.
​
Tab:GetUnlocked()
table
Returns a list of all unlocked elements belonging to this tab.
​
Tab:ScrollToTheElement(elemindex)
Smoothly scrolls the content panel to bring the element at elemindex into view, then briefly highlights it.

​
Example

The example below reproduces several tabs from main.client.lua, showing standalone tabs, tabs inside a section, and the full icon chip syntax. 
-- Standalone tab (no section)
local AboutTab = Window:Tab({
    Title     = "About WindUI",
    Desc      = "Description Example",
    Icon      = "solar:info-square-bold",
    IconColor = Color3.fromHex("#83889E"),
    IconShape = "Square",
    Border    = true,
})

-- Section grouping
local ElementsSection = Window:Section({ Title = "Elements" })

local ToggleTab = ElementsSection:Tab({
    Title     = "Toggle",
    Icon      = "solar:check-square-bold",
    IconColor = Color3.fromHex("#10C550"),
    IconShape = "Square",
    Border    = true,
})

local ButtonTab = ElementsSection:Tab({
    Title     = "Button",
    Icon      = "solar:cursor-square-bold",
    IconColor = Color3.fromHex("#257AF7"),
    IconShape = "Square",
    Border    = true,
})

-- Adding elements to a tab
ButtonTab:Button({
    Title    = "Highlight Button",
    Icon     = "mouse",
    Callback = function()
        print("clicked")
    end,
})

ButtonTab:Space()

ButtonTab:Button({
    Title    = "Blue Button",
    Color    = Color3.fromHex("#305dff"),
    Icon     = "",
    Callback = function() end,
})

Build docs developers (and LLMs) love

Get started for freeTalk to us