Appearance and responsive layout

Configure themes, styles, motion, and adaptive layouts.

Themes

Built-in themes are Graphite, Aurora, and Ember. Set Theme when creating a window or call window:SetTheme(nameOrColors). Custom theme tables use Color3 values. Partial tables inherit omitted tokens from Graphite.

Theme tokens are Background, Surface, Raised, Hover, Border, Text, Muted, Accent, AccentText, Success, and Danger.

window:SetTheme({
    Background = Color3.fromRGB(8, 8, 10),
    Surface = Color3.fromRGB(17, 18, 21),
    Raised = Color3.fromRGB(27, 29, 33),
    Border = Color3.fromRGB(65, 67, 73),
    Text = Color3.fromRGB(248, 248, 250),
    Muted = Color3.fromRGB(163, 165, 172),
    Accent = Color3.fromRGB(245, 245, 247),
})

window:BindColor(instance, property, token) binds a Color3 property on a descendant of the window GUI to a theme token.

Style and motion

UI:SetStyle and UI:SetMotion change defaults for future windows. window:SetStyle and window:SetMotion update one existing window.

Style fields include Font, FontBold, TextSize, DescriptionSize, TitleSize, WindowRadius, SectionRadius, ControlRadius, and RowPadding. Motion fields are Duration, Style, Direction, RepeatCount, Reverses, and Delay.

window:SetStyle({TitleSize = 20, WindowRadius = 18, ControlRadius = 8})
window:SetMotion({Duration = 0.24, Style = Enum.EasingStyle.Quart})
window:SetReducedMotion(true)

For valid values and ranges, see API reference. Reduced motion cancels active managed tweens and applies their final values.

Responsive settings

Responsive layout is enabled by default. Responsive accepts a table with Breakpoint (320–1000 px; default 620), TouchTarget (44–72 px; default 44), and Margin (4–40 px; default 12). The library adapts navigation and controls to window size, safe insets, and the on-screen keyboard. Test your own custom content on the devices you support; automated layouts do not verify physical-device input.

Layout options

Move a window on a phone

Drag the title strip at the top of the window with one finger. You can start on its title, subtitle or logo area. Buttons, sliders and page scrolling keep their own gestures. The header stays reachable when you move a mobile window partly beyond the edge of the screen; drag it back to reveal the rest.

Dragging is enabled by default. Keep the header visible if users need to move the window:

window:SetLayout({Draggable = true, ShowHeader = true})

To restore a centered position in your own button callback:

tab:Button({
    Title = "Center window",
    Callback = function()
        window:SetPosition(UDim2.fromScale(0.5, 0.5), Vector2.new(0.5, 0.5))
    end,
})

Mouse-only desktop windows stay inside the viewport. Touch-enabled screens can move the window partly beyond its edge in portrait or landscape. Automated gesture checks do not replace testing on a physical phone.

Set defaults for new windows with UI:SetLayout(options), or update one window with window:SetLayout(options). Settings cover tab position, mobile tab position, sidebar width, tab dimensions and gaps, content padding and spacing, header and footer sizes, search visibility, and control alignment. PanelTransparency defaults to 0.06 and affects only the main window surface; 0 is opaque and 1 is transparent.

window:SetLayout({PanelTransparency = 0.12})

Tabs and controls accept a local Layout table. Tab keys include Order, Width, Height, and IconSize. Control keys include Order, Width, Height, and Position (Left, Right, Below). See API reference for the complete defaults and ranges.

Tab categories

Categories group related tabs under a shared heading. Create a category from the window, then add tabs to it. A tab can still use the same controls and sections as any other tab.

local general = window:Category("General")
local home = general:Tab("Home", "home")
home:Toggle("Show tips", {Value = true})

local farming = window:Category("Farming")
local farm = farming:Tab("Farm", "farm")
farm:Button("Start farming", function()
    print("Farming started")
end)

You can also write window:Category({Title = "General"}). Calling window:Category again with the same title returns the existing category, so tabs added through either call stay grouped together. Change a heading with category:SetTitle("Basics"); category:Destroy() removes that category and its tabs. A category heading is hidden when it has no tabs, including when filtering hides all of its tabs.

For a single tab, pass its category in the options table. This creates the category automatically when needed and reuses a category with the same title:

local farm = window:Tab({Title = "Farm", Category = "Farming", Icon = "farm"})
farm:Slider("Plot size", {Min = 1, Max = 10, Value = 3})

Category headings follow the navigation layout: they appear inline in the tab rail when tabs run across the top or bottom, and vertically to the left or right when tabs run down the side. On mobile, their placement follows MobileTabPosition (Top or Bottom).

Window parts

window:GetParts() exposes Panel, Header, Tabs, Search, PageTitle, Pages, Footer, Reopen, Notifications, Minimize, Close, and Resize.

window:SetPartLayout("Header", {Position = UDim2.fromOffset(20, 8)})
-- Restore the calculated position later.
window:ResetPartLayout("Header")

SetPartLayout accepts Position and Size as finite UDim2 values, AnchorPoint as a Vector2 in the 0–1 range, and Visible as a boolean. Overrides apply after automatic responsive layout and can overlap or extend beyond the window. Reset parts when they should return to automatic layout.

Next: Icons and branding · Loading screens