---
title: "UI Pro v0.1 - s&box library"
description: "A custom inspector based UI system for s&box. Build UI from components like other familiar game engines"
canonical: "https://sbox.watch/libraries/lilboi/uipro2/"
generated_at: "2026-06-19T05:24:41.110Z"
---

# UI Pro v0.1

A custom inspector based UI system for s&box. Build UI from components like other familiar game engines

- Type: library
- Ident: lilboi.uipro2
- Creator: lilboi
- Canonical: https://sbox.watch/libraries/lilboi/uipro2/
- Markdown: https://sbox.watch/libraries/lilboi/uipro2.md
- sbox.game: https://sbox.game/lilboi/uipro2/
- Generated: 2026-06-19T05:24:41.110Z

## Stats

- 24h momentum: +2
- Terry score: 43%
- Favorites: 0
- Upvotes: 2
- Downvotes: 0
- Updated: Jun 19, 2026
- Created: Jun 19, 2026
- Size: 96.2 KB
- Files: 20
- Tags: buttons, canvas, gui, inspector, ugui, ui, unity, widgets

## Description

\[WIP\] UI PRO v0.1
A code-first, inspector-driven UI system for s&box. If you've used Unity's
uGUI (RectTransform, Image, Text, Button), this will feel familiar - you
build UI out of GameObjects and components in the scene, no markup.

START HERE: OPEN THE EXAMPLE SCENE
The fastest way to understand UI Pro is to open the included example scene.
It has a working canvas, an input system, and a button that updates a text
node each time you click it. Press play, click the button, then inspect how
the GameObjects and components are wired together - that's the whole pattern.

THE THREE PIECES
Every UI Pro setup is the same three ideas:

1. CANVAS
 The root of your UI. Every UI node must be a child GameObject under a
 canvas. Handles scaling across resolutions.

2. NODES ("Image Node", "Text Node")
 The visible pieces - images and text - placed as child GameObjects and
 positioned by their Layout Settings (anchor / pivot / offset / size).

3. INPUT ("Input System")
 You need ONE Input System component somewhere in the scene.
 It reads the mouse and dispatches click/hover events. Without it, nothing
 is interactive.

4. BEHAVIOUR ("Button")
 Sits alongside a node and reacts to pointer events. Set its Target to the
 node it should recolour on hover/press, and hook up its OnClick.

MAKING A BUTTON FROM SCRATCH
1. Add an "Input System - UI Pro" to any GameObject (only one needed).
2. Add a "Canvas - UI Pro" to another GameObject.
3. Under the canvas, add a child GameObject with an "Image Node - UI Pro".
 Give it a Size in Layout Settings.
4. On that node, tick "Receive Pointer Input" so it can be clicked. (Nodes
 are non-interactive by default, so text and decoration don't eat clicks.)
5. On the same GameObject, add a "Button - UI Pro" and set its Target to the
 image node. Adjust the Default / Hovered / Pressed tints.
6. Wire the button's OnClick to your own code.

Done. Hovering recolours it, pressing recolours it, releasing over it fires
OnClick.

WHAT'S IN THIS VERSION (v0.1)
Canvas + scaler, anchor/pivot/offset layout, stretch, child padding,
rectangular and rounded clipping, Image, Text, Button, and pointer input
(enter / exit / down / up / click).

NOT yet included (planned): edit mode preview, checkboxes, sliders, layout lists, scroll
containers, text input fields, and explicit ordering between multiple
overlapping canvases. For now, keep layering within a single canvas using
the node hierarchy.

This is an early release built by one person. Bug reports are hugely appreciated, and if there's a widget you
need that's missing, say so. Real use cases drive what gets built next.