> ## Documentation Index
> Fetch the complete documentation index at: https://gabibou-ui.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`.

```lua theme={null}
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`.

```lua theme={null}
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](https://gabibou-ui.mintlify.site/reference/api.md). 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:

```lua theme={null}
window:SetLayout({Draggable = true, ShowHeader = true})
```

To restore a centered position in your own button callback:

```lua theme={null}
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.

```lua theme={null}
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](https://gabibou-ui.mintlify.site/reference/api.md) 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.

```lua theme={null}
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:

```lua theme={null}
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`.

```lua theme={null}
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](https://gabibou-ui.mintlify.site/customization/icons-and-branding.md) · [Loading screens](https://gabibou-ui.mintlify.site/customization/loading-screens.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.