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.
A Group lays out its child elements horizontally instead of vertically. Elements are distributed evenly across the available width; Space elements are treated as fixed-width gaps between stretchable siblings.
Create a group via Tab:Group(Config) or Section:Group(Config).
local MyGroup = Tab:Group({})
The config table is accepted but currently has no documented fields — pass an empty table {} or call Tab:Group() with no argument.
Element Methods
Groups support the same element methods as Tab:
Group:Button() · Group:Toggle() · Group:Slider() · Group:Input() · Group:Dropdown() · Group:Colorpicker() · Group:Keybind() · Group:Section() · Group:Space() · Group:Paragraph() · Group:Image() · Group:Code()
Each element added to the group receives an equal share of the group’s width. Space and Divider elements consume a fixed pixel width and reduce the remaining space shared by other elements.
Examples
Two buttons side by side
local OverviewGroup1 = OverviewTab:Group({})
OverviewGroup1:Button({
Title = "Button 1",
Justify = "Center",
Icon = "",
Callback = function()
print("clicked button 1")
end,
})
OverviewGroup1:Space()
OverviewGroup1:Button({
Title = "Button 2",
Justify = "Center",
Icon = "",
Callback = function()
print("clicked button 2")
end,
})
Mixed element types
local OverviewGroup2 = OverviewTab:Group({})
OverviewGroup2:Button({
Title = "Button 1",
Justify = "Center",
Icon = "",
Callback = function()
print("clicked button 1")
end,
})
OverviewGroup2:Space()
OverviewGroup2:Toggle({
Title = "Toggle 2",
Callback = function(v)
print("clicked toggle 2:", v)
end,
})
OverviewGroup2:Space()
OverviewGroup2:Colorpicker({
Title = "Colorpicker 3",
Default = Color3.fromHex("#30ff6a"),
Callback = function(color)
print(color)
end,
})
Sections inside a group
Groups can contain Section elements to produce two boxed columns side by side.
local OverviewGroup3 = OverviewTab:Group({})
local OverviewSection1 = OverviewGroup3:Section({
Title = "Section 1",
Desc = "Section exampleee",
Box = true,
BoxBorder = true,
Opened = true,
})
OverviewSection1:Button({
Title = "Button 1",
Justify = "Center",
Icon = "",
Callback = function()
print("clicked button 1")
end,
})
OverviewSection1:Space()
OverviewSection1:Toggle({
Title = "Toggle 2",
Callback = function(v)
print("clicked toggle 2:", v)
end,
})
OverviewGroup3:Space()
local OverviewSection2 = OverviewGroup3:Section({
Title = "Section 2",
Box = true,
BoxBorder = true,
Opened = true,
})
OverviewSection2:Button({
Title = "Button 1",
Justify = "Center",
Icon = "",
Callback = function()
print("clicked button 1")
end,
})
OverviewSection2:Space()
OverviewSection2:Button({
Title = "Button 2",
Justify = "Center",
Icon = "",
Callback = function()
print("clicked button 2")
end,
})
Place a Group:Space() between sections or elements to introduce a fixed gap. The remaining horizontal space is split equally among all non-Space, non-Divider siblings.