UI Toolkit Pro's Documentation

Introduction

Converter

UI Elements

VisualElementPro GridPro GridItem ScrollViewPro ListViewPro ButtonPro ProgressBarPro LabelPro SliderPro TogglePro TextFieldPro

Style Builder

Style Extension Style Builder

Introduction

UI Toolkit Pro

UI Toolkit Pro can save you hours/days and a lot of work by converting your UI from Unity UI to Unity UI Toolkit within milliseconds/seconds. The package also includes components that can incorporate HTML-like features such as grid layouts, gap settings, gradient backgrounds and the Unity Rect Transform system. Components provided include:

Note that there's an In-Editor documentation that can be found by navigating to Tools > Toolkit Pro

Feel free to contact me over at this email [email protected] if you have any issues, requests or question. I’m also open to suggestions on how to improve the asset so feel free to give me some suggestions on what to add and what you think would make your workflow easier.

Please 🥹 make sure to drop a review on the Asset Store page if you like the asset. It helps a lot:
https://u3d.as/3i06

UI to UITK

UI Toolkit makes it easier to convert from Unity UI to UI toolkit with just one click.

Get Started

Create an empty UXML and USS file.
Attach the UIToUIToolKit script to your UI Canvas(Important).
Make sure the canvas settings match the ones on the UI Document panel settings.
Put the newly created or empty UXML file in the VisualTreeAsset on the UIToUIToolKit script.
Put the newly created or empty USS file in the Style Sheet on the UIToUIToolKit script.
Click convert and see the magic.

The USS would be automatically linked with the UXML file. And the UXML file can be opened in the UI UI Builder.

VisualElementPro

VisualElementPro is an extended version of the default VisualElement in Unity UI Toolkit. It comes with additional features that make it easier to work with layouts and styles.

Gradient

uxml

<Kostom.UIElement.VisualElementPro use-gradient=“true” gradient-top-right-color="#FFFFFF" gradient-top-left-color="#FFFFFF" gradient-bottom-right-color="#FFFF00” gradient-bottom-left-color="#FFFF00" />

uss

VisualElementPro {
	--gradient-top-right: yellow;
	--gradient-top-left: yellow;
    --gradient-bottom-right: green;
	--gradient-bottom-left: green;
}

using Kostom.UIElement;

private void VSPro() {
	var element = new VisualElementPro();
	element.SetGradient(Color.yellow, Color.yellow, Color.green, Color.green);
}

Gap

uxml

<Kostom.UIElement.VisualElementPro  gap="5" use-gap="true"/>

uss

VisualElementPro {
	--gap: 5;
}

using Kostom.UIElement;

private void VSPro() {
	var element = new VisualElementPro();
	element.SetGap(5);
}

GridPro

Features:

1. Grid-based layouting using rows and columns

2. Supports row-span, column-span and auto-sizing behavior

3. Simplified USS-based configuration or C# API for dynamic generation

4. Works seamlessly with existing VisualElements and custom controls

5. Compatible with flex layouts and other UI Toolkit layout systems

6. Ideal for editor tools, runtime UI, and dynamic content grids

Flexible Column/Row Definitions:

The grid system supports advance sizing functions inspired by CSS Grid, giving you full control over layout behaviour. You can define columns and rows using units likr fr, px, % and functions like minmax() and repeat()--all parsed and applied at runtime.

Supported Units & Functions:

1. fr - Fractional unit of remaining space e.g: 1fr, 2fr, 3fr

2. px - Fixed pixel values e.g.: 100px, 250px

3. % - Percentage of available space e.g.: 50%, 33%

4. minmax(min,max) - Constrains a track between a minimun and maximum size e.g.: minmax(100px,1fr)

5. repeat(count, size) - Repeats a track definition e.g.: repeat(3,1fr), repeat(2,minmax(100px,1fr))

Code Examples

Example Usage

// Define 3 columns: [min 100px, flexible] [1fr] [1fr]
"minmax(100px, 1fr) 1fr 1fr"

// Or repeat pattern:
"repeat(3, 1fr)"

// Or just define
"1fr 20px 10% 2fr"

uxml

<Kostom.UIElement.GridPro />

uss

GridPro {
    --grid-template-columns: "35px 2fr 1fr 40px";
	--grid-template-rows: "35px 1fr 2fr 1fr";
    --grid-gap: "4px 4px";
}

using Kostom.UIElement;

private void GPro() {
	var grid = new GridPro();
	grid.GridColRow(new Vector2(4, 4), "35px 1fr 2fr 1fr", "35px 2fr 1fr 40px");
}

GridItem

While the grid system supports any VisualElement as a child, standard elements do not support grid-specific positioning like grid-row and grid-column. That's where GridItem comes in.

GridItem extends VisualElement and adds built-in support for explicit grid placement, similar to CSS-style syntax

Key Features

1. Supports grid-row and grid-column definitions e.g.: grid-row:2; grid-column: 1/4.

2. Supports full grid-area shorthand: rowStart / columnStart / rowEnd / columnEnd e.g.: grid-area: 1 / 2 / 3 / 4.

3. Can be used like any other VisualElement (for styling, binding, nesting, etc.).

4. Easily integrates with the GridPro element system for clean, responsive layout

Code Examples

uxml

<Kostom.UIElement.GridItem grid-row="1/2" grid-column="1/3" />

uss

GridItem {
	--grid-row: 1/2;
	--grid-column: 1/3;
    --grid-area: 1/1/2/3;
}

var item = new GridItem();

//set GridArea
item.SetGridArea(1, 2, 3, 4); // row 1 to 3, column 2 to 4

//or set GridColumn span
item.SetGridColumnSpan(2, 4); // column 2 to 4

//or set GridRow span
item.SetGridRowSpan(1, 3); // row 1 to 3

grid.Add(item);

ScrollViewPro

This element was created to make it easier to set easily the handle size and slider area size and color. You set the value easily by using the custom style property provided. You can easily access the SlidingArea VisualElement by using (verticalSlidingArea or horizontalSlidingArea). You can easily access the Handle VisualElement by using (verticalSlidingAreaHandle or horizontalSlidingAreaHandle).

Code Examples

uxml

<Kostom.UIElement.ScrollViewPro />

//To set Gap
<Kostom.UIElement.ScrollViewPro gap="10" use-gap="true" />

//To set fill percentage
//and handle fill percentage
<Kostom.UIElement.ScrollViewPro handle-fill-percentage="50" slider-area-size="50" />

//Set handle and slider's area color
<Kostom.UIElement.ScrollViewPro handle-color="#878787FF" slider-area-color="<color>#FFFFFFFF"/>

uss

<ScrollViewPro {
	--handle-fill: 50;
    --slider-area-size: 50;
	--gap: 5;

	--handle-color: gray;
	--slider-area-color: black;
}

using Kostom.UIElement;

private void SVPro() {
	var element = new ScrollViewPro();
	
	//Set Gap
	element.SetGap(5);

	//Set Handle Fill Size
	element.SetHandleFillSize(50);

	//Set Slider Area Size
	element.SetSliderAreaSize(50);

	//Set Handle Color
	element.SetHandleColor(Color.gray);

	//Set Slider Area's Color
	element.SetSliderAreaColor(Color.gray);

	//Alternatively you can chain the method
          element.SetGap(50).SetHandleFillSize(50).SetSliderAreaSize(50).SetHandleColor(Color.gray).SetSliderAreaColor(Color.black);

}

ListViewPro

Code Examples

uxml

<Kostom.UIElement.ListViewPro />

//To set fill percentage
//and handle fill percentage
<Kostom.UIElement.ListViewPro handle-fill-percentage="50" slider-area-size="50" />

//Set handle and slider's area color
<Kostom.UIElement.ListViewPro handle-color="#878787FF" slider-area-color="<color>#FFFFFFFF"/>

uss

ListViewPro {
	--handle-fill: 50;
    --slider-area-size: 50;

	--handle-color: gray;
	--slider-area-color: black;
}

using Kostom.UIElement;

private void LVPro() {
	var element = new ListViewPro();

	//Set Handle Fill Size
	element.SetHandleFillSize(50);

	//Set Slider Area Size
	element.SetSliderAreaSize(50);

	//Set Handle Color
	element.SetHandleColor(Color.gray);

	//Set Slider Area's Color
	element.SetSliderAreaColor(Color.gray);

	//Alternatively you can chain the method
          element.SetHandleFillSize(50).SetSliderAreaSize(50).SetHandleColor(Color.gray).SetSliderAreaColor(Color.black);

}

Join Us

Email UsUITK Text Animator UI Toolkit Animation UI Toolkit Pro