In this tutorial you'll design a complete inventory panel using UI Builder. You'll build a responsive grid of sprite-based item slots with rarity color tints, hover animations, and reusable UXML templates. You'll also learn how to organize shared USS variables across multiple stylesheets, nest UXML documents inside each other, and use Flexbox for automatic grid layout.
This tutorial is part of the Build Inventory & Equipment Systems with Unity UI Toolkit course. The full course walks you through building a complete inventory and equipment system in Unity 6 using UI Toolkit. You'll start from scratch with a reusable window system, design the full UI layout in UI Builder, wire up drag-and-drop item management, render a 3D character preview, and connect everything to player data. No prior UI Toolkit experience needed.
Check out the other parts:
| Part | Topic | Repository |
|---|---|---|
| 1 | Reusable Window System | ui-toolkit-pt1-reusable-window-system |
| 2 | Design the Inventory UI | You are here |
| 3 | Create the Inventory Data Model | ui-toolkit-pt3-inventory-data-model |
| 4 | Inventory Interactions | ui-toolkit-pt4-inventory-interactions |
| 5 | Render a 3D Character Preview | ui-toolkit-pt5-equip-char-preview |
| 6 | Equip Items with Slot Validation | ui-toolkit-pt6-equipment-interactions |
starter-project/- The starter project to follow along with the tutorial.final-project/- The completed project at the end of the tutorial.
- Item icons inspired by KayKit Adventurers by Kay Lousberg