Inventory
A game-ready inventory layout with item slots, selected-item details, and a clear equip button.
This template stores every UI object as structured JSON, renders it in the browser, and converts the same schema into Roblox Studio-friendly Luau.
roblox inventory gui template is the single topic for this template detail page. The goal is to help creators understand what the Inventory GUI is for, how the visible layout works, what they should edit before export, and what Roblox Studio logic still belongs in their own project. The template gives a practical UI starting point without implying that interface code can replace secure gameplay systems.
Use case
Use the Inventory GUI when your Roblox experience needs to show owned items in a compact grid and give players a readable selected-item panel. It is best for pet collectors, RPG inventory systems, tool-based games, and quest reward experiences, because those games usually need a player-facing screen that is understandable in a few seconds and easy to connect to existing data. The template is deliberately shaped around one visible job, so creators are not forced to delete a pile of unrelated widgets before the UI becomes useful.
The detail page should keep that same focus. A visitor searching for roblox inventory gui template wants to inspect the layout, understand whether it matches their game, and move into the editor if the fit is strong. This page therefore explains the screen purpose, the editable parts, the safe export boundary, and the related guide rather than trying to rank for every Roblox UI phrase at the same time.
Layout anatomy
The visible layout includes inventory title, grid slots, selected item name, rarity label, equip button, and item detail panel. These pieces are ordinary Roblox UI concepts that a creator can recognize in the preview and then adjust in the editor. The important detail is that each part has a job. Decorative panels create contrast, labels explain state, buttons communicate action, and helper text prevents the player from guessing what will happen next.
Before exporting, inspect the layer names and the text that players will see. Script-friendly names make the generated Luau easier to connect later. Short labels make the page more resilient on mobile screens. A single strong action color keeps the main button from competing with every other label and panel on the screen.
Editing workflow
Start by editing copy and names before changing decoration. For this template, the most useful edits are to choose slot names that match item data, reserve room for rarity text, use one selected state color, and test the panel at phone width. Those changes make the UI feel specific to the game while preserving the structure that already works. If the creator changes spacing first and copy later, they often discover too late that real item names, reward names, or player stats do not fit.
After the text is realistic, adjust color and spacing in the editor. Keep one visual system across the template: one panel background family, one accent for the primary action, and one muted color for helper text. The exported code will be easier to review when the template is still organized around clear roles instead of many unrelated colors and one-off sizes.
Roblox Studio
The exported Luau creates the interface structure, but the Roblox Studio project still owns behavior. The most likely connections for this template are player item data, equipped item state, slot sorting, and server-validated equip action. Treat the generated ScreenGui as a view layer. It can show data and receive button clicks, but it should not be the authority for purchases, rewards, score changes, or ownership.
The inventory template creates UI structure only. It does not grant items, read DataStores, or decide whether a player owns an item.
Mobile review
Roblox players may see this UI on desktop, tablet, or phone. Before using the export in a real experience, review slot size consistency, selected panel readability, scroll behavior for long inventories, and thumb-safe equip button placement. Mobile checks should happen before a creator duplicates the template many times, because small spacing errors multiply quickly once every item, row, or reward card uses the same pattern.
The safest mobile review is to test the template with longer real text than the preview uses. Put in the longest item name, longest reward label, or most awkward player stat you expect. If the layout survives that stress test, the exported ScreenGui is more likely to remain readable during normal play.
Export review
Before copying this template into a larger place, review the generated Luau as if another creator will inherit it. Confirm that the ScreenGui name is clear, each important button has a script-friendly name, labels contain real game copy, and styling helpers such as UICorner, UIStroke, and padding are attached to the expected parent objects. This review makes the roblox inventory gui template page more than a preview; it becomes a handoff checklist.
The code should stay easy to delete and easy to connect. If a visible element does not support the template's purpose, remove it before export. If a button will later start a purchase, reward, selection, or settings action, name it for that action now. A clean visual export gives the Studio scripts a stable surface without pretending the UI itself is trusted game logic.
Accessibility
Readable UI starts with text that explains the current state. Replace placeholder labels with the words players will actually see, then check whether the most important label still fits. If the label needs to be shortened, shorten the copy before shrinking the font. Tiny text makes a template look complete in a preview but weak during real play. This check should happen before every export.
Object names matter too. A button named BuySpeedBoost is easier to connect than a generic Button1. A frame named QuestTrackerPanel is easier to find than Frame7. Clear names help the exported roblox inventory gui template remain understandable after it leaves the browser editor and becomes part of a Roblox Studio project.
Next steps
The most relevant internal path for this page is /editor, /how-to-make-an-inventory-gui-in-roblox, and /roblox-scrollingframe-uilistlayout. Those links keep the user inside the same task family: edit this template, read the guide that explains the implementation details, or compare one closely related template. This is better for users and better for SEO than sending every template page to every article on the site.
When this template is complete, the next action should be simple: open it in the editor, make the text and names match the game, copy the Luau, and then connect the interface to trusted Studio logic. That workflow is the reason this page stays centered on roblox inventory gui template.
FAQ
It is for creators who need to show owned items in a compact grid and give players a readable selected-item panel. It gives them a visible starting layout that can be edited online and exported as Roblox UI instance code.
No. The template exports UI structure only. Purchases, rewards, inventory state, scores, quest progress, and validation should be implemented in the creator Roblox project.
Yes. Open the template in the editor, change names, text, spacing, colors, and sizing, then copy the generated Luau after the preview matches your game.
Next steps
Luau export
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Name = "InventoryGUIScreenGui"
screenGui.ResetOnSpawn = false
screenGui.Parent = playerGui
local inventoryFrame = Instance.new("Frame")
inventoryFrame.Name = "InventoryFrame"
inventoryFrame.Position = UDim2.new(0.5, -360, 0.5, -225)
inventoryFrame.Size = UDim2.new(0, 720, 0, 450)
inventoryFrame.AnchorPoint = Vector2.new(0, 0)
inventoryFrame.ZIndex = 1
inventoryFrame.Visible = true
inventoryFrame.BackgroundColor3 = Color3.fromRGB(18, 38, 58)
inventoryFrame.BorderSizePixel = 0
inventoryFrame.Parent = screenGui
local inventoryFrameCorner = Instance.new("UICorner")
inventoryFrameCorner.CornerRadius = UDim.new(0, 24)
inventoryFrameCorner.Parent = inventoryFrame
local inventoryFrameStroke = Instance.new("UIStroke")
inventoryFrameStroke.Color = Color3.fromRGB(216, 226, 241)
inventoryFrameStroke.Thickness = 2
inventoryFrameStroke.Parent = inventoryFrame
local inventoryTitle = Instance.new("TextLabel")
inventoryTitle.Name = "InventoryTitle"
inventoryTitle.Position = UDim2.new(0, 28, 0, 24)
inventoryTitle.Size = UDim2.new(0, 310, 0, 46)
inventoryTitle.AnchorPoint = Vector2.new(0, 0)
inventoryTitle.ZIndex = 2
inventoryTitle.Visible = true
inventoryTitle.BackgroundTransparency = 1
inventoryTitle.Text = "Inventory"
inventoryTitle.TextColor3 = Color3.fromRGB(248, 251, 255)
inventoryTitle.TextSize = 34
inventoryTitle.Font = Enum.Font.GothamBold
inventoryTitle.Parent = inventoryFrame
local itemDetailPanel = Instance.new("Frame")
itemDetailPanel.Name = "ItemDetailPanel"
itemDetailPanel.Position = UDim2.new(1, -238, 0, 92)
itemDetailPanel.Size = UDim2.new(0, 210, 0, 310)
itemDetailPanel.AnchorPoint = Vector2.new(0, 0)
itemDetailPanel.ZIndex = 2
itemDetailPanel.Visible = true
itemDetailPanel.BackgroundColor3 = Color3.fromRGB(248, 251, 255)
itemDetailPanel.BorderSizePixel = 0
itemDetailPanel.Parent = inventoryFrame
local itemDetailPanelCorner = Instance.new("UICorner")
itemDetailPanelCorner.CornerRadius = UDim.new(0, 20)
itemDetailPanelCorner.Parent = itemDetailPanel
local itemDetailPanelPadding = Instance.new("UIPadding")
itemDetailPanelPadding.PaddingTop = UDim.new(0, 20)
itemDetailPanelPadding.PaddingRight = UDim.new(0, 18)
itemDetailPanelPadding.PaddingBottom = UDim.new(0, 18)
itemDetailPanelPadding.PaddingLeft = UDim.new(0, 18)
itemDetailPanelPadding.Parent = itemDetailPanel
local equipButton = Instance.new("TextButton")
equipButton.Name = "EquipButton"
equipButton.Position = UDim2.new(0, 18, 1, -68)
equipButton.Size = UDim2.new(1, -36, 0, 48)
equipButton.AnchorPoint = Vector2.new(0, 0)
equipButton.ZIndex = 3
equipButton.Visible = true
equipButton.BackgroundColor3 = Color3.fromRGB(42, 157, 143)
equipButton.BorderSizePixel = 0
equipButton.Text = "Equip"
equipButton.TextColor3 = Color3.fromRGB(248, 251, 255)
equipButton.TextSize = 20
equipButton.Font = Enum.Font.GothamBold
equipButton.Parent = itemDetailPanel
local equipButtonCorner = Instance.new("UICorner")
equipButtonCorner.CornerRadius = UDim.new(0, 16)
equipButtonCorner.Parent = equipButton
local selectedItemDescription = Instance.new("TextLabel")
selectedItemDescription.Name = "SelectedItemDescription"
selectedItemDescription.Position = UDim2.new(0, 18, 0, 100)
selectedItemDescription.Size = UDim2.new(1, -36, 0, 92)
selectedItemDescription.AnchorPoint = Vector2.new(0, 0)
selectedItemDescription.ZIndex = 3
selectedItemDescription.Visible = true
selectedItemDescription.BackgroundTransparency = 1
selectedItemDescription.Text = "A fast starter weapon for early-game arenas."
selectedItemDescription.TextColor3 = Color3.fromRGB(82, 102, 125)
selectedItemDescription.TextSize = 17
selectedItemDescription.Font = Enum.Font.Gotham
selectedItemDescription.TextWrapped = true
selectedItemDescription.Parent = itemDetailPanel
local selectedItemTitle = Instance.new("TextLabel")
selectedItemTitle.Name = "SelectedItemTitle"
selectedItemTitle.Position = UDim2.new(0, 18, 0, 20)
selectedItemTitle.Size = UDim2.new(1, -36, 0, 70)
selectedItemTitle.AnchorPoint = Vector2.new(0, 0)
selectedItemTitle.ZIndex = 3
selectedItemTitle.Visible = true
selectedItemTitle.BackgroundTransparency = 1
selectedItemTitle.Text = "Rare Sword"
selectedItemTitle.TextColor3 = Color3.fromRGB(18, 38, 58)
selectedItemTitle.TextSize = 26
selectedItemTitle.Font = Enum.Font.GothamBold
selectedItemTitle.TextWrapped = true
selectedItemTitle.Parent = itemDetailPanel
local itemGrid = Instance.new("Frame")
itemGrid.Name = "ItemGrid"
itemGrid.Position = UDim2.new(0, 28, 0, 92)
itemGrid.Size = UDim2.new(0, 430, 0, 310)
itemGrid.AnchorPoint = Vector2.new(0, 0)
itemGrid.ZIndex = 2
itemGrid.Visible = true
itemGrid.BackgroundColor3 = Color3.fromRGB(23, 50, 77)
itemGrid.BorderSizePixel = 0
itemGrid.Parent = inventoryFrame
local itemGridCorner = Instance.new("UICorner")
itemGridCorner.CornerRadius = UDim.new(0, 18)
itemGridCorner.Parent = itemGrid
local itemGridPadding = Instance.new("UIPadding")
itemGridPadding.PaddingTop = UDim.new(0, 18)
itemGridPadding.PaddingRight = UDim.new(0, 18)
itemGridPadding.PaddingBottom = UDim.new(0, 18)
itemGridPadding.PaddingLeft = UDim.new(0, 18)
itemGridPadding.Parent = itemGrid
local itemSlot1 = Instance.new("TextButton")
itemSlot1.Name = "ItemSlot1"
itemSlot1.Position = UDim2.new(0, 18, 0, 18)
itemSlot1.Size = UDim2.new(0, 110, 0, 110)
itemSlot1.AnchorPoint = Vector2.new(0, 0)
itemSlot1.ZIndex = 3
itemSlot1.Visible = true
itemSlot1.BackgroundColor3 = Color3.fromRGB(252, 163, 17)
itemSlot1.BorderSizePixel = 0
itemSlot1.Text = "Rare\nSword"
itemSlot1.TextColor3 = Color3.fromRGB(27, 22, 10)
itemSlot1.TextSize = 18
itemSlot1.Font = Enum.Font.GothamBold
itemSlot1.TextWrapped = true
itemSlot1.Parent = itemGrid
local itemSlot1Corner = Instance.new("UICorner")
itemSlot1Corner.CornerRadius = UDim.new(0, 20)
itemSlot1Corner.Parent = itemSlot1
local itemSlot1Stroke = Instance.new("UIStroke")
itemSlot1Stroke.Color = Color3.fromRGB(255, 244, 214)
itemSlot1Stroke.Thickness = 2
itemSlot1Stroke.Parent = itemSlot1
local itemSlot2 = Instance.new("TextButton")
itemSlot2.Name = "ItemSlot2"
itemSlot2.Position = UDim2.new(0, 150, 0, 18)
itemSlot2.Size = UDim2.new(0, 110, 0, 110)
itemSlot2.AnchorPoint = Vector2.new(0, 0)
itemSlot2.ZIndex = 3
itemSlot2.Visible = true
itemSlot2.BackgroundColor3 = Color3.fromRGB(36, 72, 102)
itemSlot2.BorderSizePixel = 0
itemSlot2.Text = "Potion"
itemSlot2.TextColor3 = Color3.fromRGB(231, 240, 249)
itemSlot2.TextSize = 18
itemSlot2.Font = Enum.Font.GothamBold
itemSlot2.TextWrapped = true
itemSlot2.Parent = itemGrid
local itemSlot2Corner = Instance.new("UICorner")
itemSlot2Corner.CornerRadius = UDim.new(0, 20)
itemSlot2Corner.Parent = itemSlot2
local itemSlot2Stroke = Instance.new("UIStroke")
itemSlot2Stroke.Color = Color3.fromRGB(58, 98, 132)
itemSlot2Stroke.Thickness = 2
itemSlot2Stroke.Parent = itemSlot2
local itemSlot3 = Instance.new("TextButton")
itemSlot3.Name = "ItemSlot3"
itemSlot3.Position = UDim2.new(0, 282, 0, 18)
itemSlot3.Size = UDim2.new(0, 110, 0, 110)
itemSlot3.AnchorPoint = Vector2.new(0, 0)
itemSlot3.ZIndex = 3
itemSlot3.Visible = true
itemSlot3.BackgroundColor3 = Color3.fromRGB(36, 72, 102)
itemSlot3.BorderSizePixel = 0
itemSlot3.Text = "Pet"
itemSlot3.TextColor3 = Color3.fromRGB(231, 240, 249)
itemSlot3.TextSize = 18
itemSlot3.Font = Enum.Font.GothamBold
itemSlot3.TextWrapped = true
itemSlot3.Parent = itemGrid
local itemSlot3Corner = Instance.new("UICorner")
itemSlot3Corner.CornerRadius = UDim.new(0, 20)
itemSlot3Corner.Parent = itemSlot3
local itemSlot3Stroke = Instance.new("UIStroke")
itemSlot3Stroke.Color = Color3.fromRGB(58, 98, 132)
itemSlot3Stroke.Thickness = 2
itemSlot3Stroke.Parent = itemSlot3
local itemSlot4 = Instance.new("TextButton")
itemSlot4.Name = "ItemSlot4"
itemSlot4.Position = UDim2.new(0, 18, 0, 150)
itemSlot4.Size = UDim2.new(0, 110, 0, 110)
itemSlot4.AnchorPoint = Vector2.new(0, 0)
itemSlot4.ZIndex = 3
itemSlot4.Visible = true
itemSlot4.BackgroundColor3 = Color3.fromRGB(36, 72, 102)
itemSlot4.BorderSizePixel = 0
itemSlot4.Text = "Empty"
itemSlot4.TextColor3 = Color3.fromRGB(231, 240, 249)
itemSlot4.TextSize = 18
itemSlot4.Font = Enum.Font.GothamBold
itemSlot4.TextWrapped = true
itemSlot4.Parent = itemGrid
local itemSlot4Corner = Instance.new("UICorner")
itemSlot4Corner.CornerRadius = UDim.new(0, 20)
itemSlot4Corner.Parent = itemSlot4
local itemSlot4Stroke = Instance.new("UIStroke")
itemSlot4Stroke.Color = Color3.fromRGB(58, 98, 132)
itemSlot4Stroke.Thickness = 2
itemSlot4Stroke.Parent = itemSlot4
local itemSlot5 = Instance.new("TextButton")
itemSlot5.Name = "ItemSlot5"
itemSlot5.Position = UDim2.new(0, 150, 0, 150)
itemSlot5.Size = UDim2.new(0, 110, 0, 110)
itemSlot5.AnchorPoint = Vector2.new(0, 0)
itemSlot5.ZIndex = 3
itemSlot5.Visible = true
itemSlot5.BackgroundColor3 = Color3.fromRGB(36, 72, 102)
itemSlot5.BorderSizePixel = 0
itemSlot5.Text = "Empty"
itemSlot5.TextColor3 = Color3.fromRGB(231, 240, 249)
itemSlot5.TextSize = 18
itemSlot5.Font = Enum.Font.GothamBold
itemSlot5.TextWrapped = true
itemSlot5.Parent = itemGrid
local itemSlot5Corner = Instance.new("UICorner")
itemSlot5Corner.CornerRadius = UDim.new(0, 20)
itemSlot5Corner.Parent = itemSlot5
local itemSlot5Stroke = Instance.new("UIStroke")
itemSlot5Stroke.Color = Color3.fromRGB(58, 98, 132)
itemSlot5Stroke.Thickness = 2
itemSlot5Stroke.Parent = itemSlot5
local itemSlot6 = Instance.new("TextButton")
itemSlot6.Name = "ItemSlot6"
itemSlot6.Position = UDim2.new(0, 282, 0, 150)
itemSlot6.Size = UDim2.new(0, 110, 0, 110)
itemSlot6.AnchorPoint = Vector2.new(0, 0)
itemSlot6.ZIndex = 3
itemSlot6.Visible = true
itemSlot6.BackgroundColor3 = Color3.fromRGB(36, 72, 102)
itemSlot6.BorderSizePixel = 0
itemSlot6.Text = "Empty"
itemSlot6.TextColor3 = Color3.fromRGB(231, 240, 249)
itemSlot6.TextSize = 18
itemSlot6.Font = Enum.Font.GothamBold
itemSlot6.TextWrapped = true
itemSlot6.Parent = itemGrid
local itemSlot6Corner = Instance.new("UICorner")
itemSlot6Corner.CornerRadius = UDim.new(0, 20)
itemSlot6Corner.Parent = itemSlot6
local itemSlot6Stroke = Instance.new("UIStroke")
itemSlot6Stroke.Color = Color3.fromRGB(58, 98, 132)
itemSlot6Stroke.Thickness = 2
itemSlot6Stroke.Parent = itemSlot6
The template exports only the visual interface. Add your own server and client inventory logic inside Roblox Studio.
Yes. Duplicate an item slot in the editor and update its name before exporting Luau.
Related templates