What is UI Toolkit?

Brand new to UI Toolkit? Two-minute orientation, then you'll know what you're looking at on every page from here on.

In one sentence

UI Toolkit (UITK) is Unity's newer UI system, shipped with every install of Unity 6 — Luna is built on top of it.

Unity actually ships two UI systems: the old one (uGUI, GameObject + RectTransform based) and the new one (UI Toolkit, web-tech inspired). UITK is the future direction; Luna only targets UITK.

How it works (if you've touched web tech)

UITK is a Unity reimplementation of the same three-layer split the web uses:

If "selectors, classes, flexbox, :hover" already mean something to you, you'll feel at home. UITK supports all of that and uses similar syntax.

How it works (if you haven't touched web tech)

• A .uxml file is the layout — a hierarchy of UI elements (buttons, labels, containers) written in XML markup. You can hand-write it or design it visually in Unity's UI Builder window.
• A .uss file is the stylesheet — rules like "every element named submit-btn is purple with rounded corners". One rule can style hundreds of elements.
• The UIDocument MonoBehaviour drops a UXML tree into a scene — pick a UXML asset, pick a Panel Settings asset, done.
• VisualElement is the runtime object your C# code interacts with — query it, hook click events, toggle classes.

That's the whole mental model. The rest is detail.

What it replaces, and why

uGUI gave every UI element its own GameObject. A complex menu could spawn hundreds of them, each with a RectTransform, each affected by the scene hierarchy, each costing CPU per frame. Styling required custom scripts — there was no global "all my buttons look like this" mechanism.

UITK fixes that:

• Lightweight runtime — VisualElement is not a GameObject. Hundreds of them barely register on the profiler.
• Real layout — flexbox, the same engine modern websites use, instead of anchor presets.
• Global styling — change one USS variable to recolor every button in the project. Luna leans on this for its theming system.
• Editor tooling — UI Builder is a proper visual designer for UXML/USS, like Figma but talking to your project directly.

What you'll see in Luna

When you import Luna's samples in a few minutes, you'll encounter these file types:

• .uxml — the layout files (open in UI Builder, double-click to launch).
• .uss — stylesheets (open in any text editor; Luna ships a utility-class set like Tailwind).
• .tss — Theme Stylesheet, a special USS used as the root theme. Luna ships one; you assign it via Panel Settings.
• UIViewComponent — Luna's MonoBehaviour wrapping UIDocument with fade transitions, focus management, and input wiring.

You don't need to memorize this. Every page from here on assumes you know what UXML and USS are, which you now do.

Where next

• Still deciding between uGUI and UI Toolkit? → Why UI Toolkit? has the side-by-side comparison.
• Sold already and want to see Luna running? → Quick Start (five-minute install).
• Want the deeper UITK primer before touching code? → UI Toolkit Basics goes one level deeper on selectors, events, and the visual tree.