Window

The Window is the root component of every WindUI interface. It renders a floating, draggable panel that contains a topbar, a sidebar with navigation tabs and sections, and a main content area where tab content is displayed. Create a window by calling WindUI:CreateWindow(Config).

local Window = WindUI:CreateWindow({
    Title = ".ftgs hub  |  WindUI Example",
    Folder = "ftgshub",
    Icon = "solar:folder-2-bold-duotone",
    NewElements = true,
    HideSearchBar = false,
    OpenButton = {
        Title = "Open .ftgs hub UI",
        CornerRadius = UDim.new(1, 0),
        StrokeThickness = 3,
        Enabled = true,
        Draggable = true,
        OnlyMobile = false,
        Scale = 0.5,
        Color = ColorSequence.new(
            Color3.fromHex("#30FF6A"),
            Color3.fromHex("#e7ff2f")
        ),
    },
    Topbar = {
        Height = 44,
        ButtonsType = "Mac", -- "Default" or "Mac"
    },
})

Window:Tag({
    Title = "v" .. WindUI.Version,
    Icon = "github",
    Color = Color3.fromHex("#1c1c1c"),
    Border = true,
})

Config

Title

string

default:"UI Library"

Text displayed in the topbar title area.

Author

string

Secondary text rendered beneath the title in the topbar.

Icon

string

Icon shown in the topbar next to the title. Accepts an icon name or asset ID.

IconSize

number

default:"22"

Size of the topbar icon in pixels.

IconThemed

boolean

When true, the icon color follows the active theme color.

IconRadius

number

default:"0"

Corner radius applied to the topbar icon.

Folder

string

Folder name used to persist config files. Enables the config system when set.

Size

UDim2

Initial window size. Clamped between MinSize and MaxSize.

MinSize

Vector2

default:"Vector2.new(560, 350)"

Minimum allowed window size.

MaxSize

Vector2

default:"Vector2.new(850, 560)"

Maximum allowed window size.

Resizable

boolean

default:"true"

Whether the user can drag the resize handle in the bottom-right corner.

ToggleKey

Enum.KeyCode

Keyboard key that toggles the window open or closed.

Topbar

table

default:"{ Height = 52, ButtonsType = \"Default\" }"

Topbar configuration. Height sets the bar height in pixels. ButtonsType accepts "Default" (icon buttons on the right) or "Mac" (traffic-light style buttons on the left).

OpenButton

table

Configuration for the floating open button shown when the window is closed. Accepts Title, CornerRadius, StrokeThickness, Enabled, Draggable, OnlyMobile, Scale, and Color.

Background

string | table

Window background. Accepts an rbxassetid string, an HTTPS image URL, a video:<url> string, or a UIGradient-compatible table.

BackgroundImageTransparency

number

default:"0"

Transparency of the background image or video layer.

ShadowTransparency

number

default:"0.6"

Transparency of the drop shadow rendered beneath the window.

Transparent

boolean

default:"false"

Enables a translucent window background.

Acrylic

boolean

default:"false"

Enables the acrylic (frosted glass) background effect.

Radius

number

default:"16"

Corner radius of the outer window frame.

ElementsRadius

number

Overrides the default corner radius used for all elements inside the window.

SideBarWidth

number

default:"200"

Width of the left sidebar in pixels.

HideSearchBar

boolean

default:"true"

When true (the default), the search bar at the bottom of the sidebar is hidden. Set to false explicitly to show the search bar.

ScrollBarEnabled

boolean

default:"false"

Displays a custom scrollbar in the sidebar and tab content area.

NewElements

boolean

default:"false"

Enables the updated element style with pill-shaped corners and tighter spacing.

HidePanelBackground

boolean

default:"false"

Hides the rounded background panel behind the main content area.

AutoScale

boolean

default:"true"

Automatically scales the window down on smaller viewports to keep it fully visible.

IgnoreAlerts

boolean

default:"false"

When true, clicking the close button immediately destroys the window instead of showing a confirmation dialog.

User

table

Renders a user profile card at the bottom of the sidebar. Accepts Enabled, Anonymous, and Callback.

TopBarButtonIconSize

number

Overrides the default icon size for topbar buttons. Defaults to 11 for Mac style and 16 for Default style.

Methods

Window:Tab(Config)

Tab

Creates a tab directly in the sidebar (not inside a section). Returns a Tab object.

Window:Section(SectionConfig)

Section

Creates a collapsible section header in the sidebar that can contain tabs. Returns a Section object.

Window:SelectTab(tabObject)

Programmatically selects a tab by passing the Tab object returned from Window:Tab() or Section:Tab().

Window:Divider()

Inserts a thin horizontal divider line into the sidebar between tab entries.

Topbar

Window:Tag(Config)

Tag

Adds a badge to the topbar center area.

Window:Tag({
    Title = "v2.0",
    Icon  = "github",
    Color = Color3.fromHex("#1c1c1c"),
    Border = true,
})

Field	Type	Description
`Title`	string	Text shown inside the badge.
`Icon`	string	Optional icon name shown before the text.
`Color`	Color3	Background fill color of the badge.
`Border`	boolean	Adds a glass-sheen border overlay.

Window.Topbar:Button(Config)

Instance

Adds a custom icon button to the topbar right side (or left on Mac style).

Field	Type	Description
`Name`	string	Internal identifier.
`Icon`	string	Icon name or asset ID.
`Callback`	function	Called when the button is clicked.
`LayoutOrder`	number	Controls the button’s order.
`IconThemed`	boolean	Use theme color for the icon.
`Color`	Color3	Background color (Mac style only).
`IconSize`	number	Overrides the icon size in pixels.

Visibility

Window:Open()

Opens the window with an animated expand transition. Fires the OnOpen callback.

Window:Close()

Closes the window with an animated collapse transition. Fires the OnClose callback. Returns a Close object with a :Destroy() method.

Window:Toggle()

Opens the window if it is closed, or closes it if it is open.

Window:Destroy()

Closes and destroys the window, removing all GUI instances and disconnecting all signals.

Appearance

Window:SetTitle(text)

Updates the title text displayed in the topbar.

Window:SetAuthor(text)

Updates or creates the author subtitle beneath the title in the topbar.

Window:SetUIScale(number)

Sets the UIScale for the entire window. Animates to the new scale. Returns the Window.

Window:SetPanelBackground(boolean)

Shows or hides the rounded background panel behind the main content area.

Window:SetSize(UDim2)

Animates the window to a new size.

Window:SetBackgroundImage(id)

Swaps the window background image to a new asset ID.

Window:SetBackgroundImageTransparency(number)

Sets the transparency of the background image.

Window:SetToTheCenter()

Animates the window position back to the center of the screen.

Interaction

Window:SetToggleKey(Enum.KeyCode)

Sets the keyboard key used to toggle the window open or closed.

Window:LockAll()

Calls :Lock() on every element registered in the window.

Window:UnlockAll()

Calls :Unlock() on every element registered in the window.

Window:Dialog(Config)

Opens a modal dialog over the window.

Field	Type	Description
`Title`	string	Dialog heading text.
`Content`	string	Body text (supports RichText).
`Icon`	string	Optional icon shown beside the title.
`Width`	number	Dialog width in pixels. Defaults to `320`.
`Buttons`	table	Array of `{ Title, Icon, Callback, Variant }`.

Window:Dialog({
    Title = "Close Window",
    Content = "Do you want to close this window?",
    Buttons = {
        { Title = "Cancel",       Variant = "Secondary", Callback = function() end },
        { Title = "Close Window", Variant = "Primary",   Callback = function() Window:Destroy() end },
    },
})

Callbacks

Window:OnOpen(func)

Registers a function to call whenever the window opens.

Window:OnClose(func)

Registers a function to call whenever the window closes.

Window:OnDestroy(func)

Registers a function to call when the window is destroyed.

Layout

UI Elements

Overlays & Extras

Config

Methods

Navigation

Topbar

Visibility

Appearance

Interaction

Callbacks

Build docs developers (and LLMs) love

Layout

UI Elements

Overlays & Extras

Documentation Index

​Config

​Methods

​Navigation

​Topbar

​Visibility

​Appearance

​Interaction

​Callbacks

Build docs developers (and LLMs) love

Config

Methods

Navigation

Topbar

Visibility

Appearance

Interaction

Callbacks