UI Components
UI components let you create user interfaces - text displays, images, buttons, and organized layouts. These work within a Canvas and are designed for 2D screen-space elements.
Container
Section titled “Container”Canvas
Section titled “Canvas”🏷️ Category: UI
💡 Simple Explanation: The container that holds all UI elements - required for any 2D interface.
⚙️ Technical Description: The root component for UI rendering that defines how UI elements are rendered to the screen, supporting screen-space overlay, screen-space camera, and world-space render modes.
📖 Full Details & Properties
🔧 How It Works: A Canvas is the foundation for all UI. Every UI element (text, image, button) must be a child of a Canvas. The render mode determines how the UI appears:
- Screen Space - Overlay: UI draws on top of everything, always visible
- Screen Space - Camera: UI is positioned relative to a camera
- World Space: UI exists as a 3D object in the scene
✨ Perfect For:
- HUD overlays
- Menus and panels
- On-screen text and images
- Interactive UI elements
📋 Properties:
| Property | Type | Description |
|---|---|---|
| Render Mode | Dropdown | How the canvas renders (Overlay, Camera, World Space) |
| Pixel Perfect | Boolean | Snap UI to pixel boundaries for crisp rendering |
| Sort Order | Integer | Drawing priority (higher = on top of other canvases) |
| Target Display | Integer | Which monitor to render to |
🎬 Streaming Example: “Create a Canvas with Screen Space - Overlay mode for your donation alerts that always appear on top.”
🎯 Tips:
- Use Screen Space - Overlay for UI that should always be visible regardless of camera position.
- Use World Space for UI that exists in your 3D scene (like floating name tags).
- Higher Sort Order values render on top of lower values.
Visual Elements
Section titled “Visual Elements”🏷️ Category: UI
💡 Simple Explanation: Displays a 2D image or texture in your UI.
⚙️ Technical Description: A UI component that renders sprites and textures with support for different fill modes, tinting, and material effects.
📖 Full Details & Properties
🔧 How It Works: The Image component displays a sprite or texture within the UI canvas. It supports various rendering modes for different use cases - simple stretching, 9-slice scaling for UI panels, tiling for patterns, and fill modes for progress indicators.
✨ Perfect For:
- Icons and logos
- Background panels
- Progress bars (using Fill mode)
- Webcam borders and frames
- Alert graphics
📋 Properties:
| Property | Type | Description |
|---|---|---|
| Source Image | Sprite | The image to display |
| Color | Color | Tint color applied to the image |
| Material | Material | Custom material for special effects |
| Image Type | Dropdown | Rendering mode (see below) |
| Preserve Aspect | Boolean | Maintain original proportions when resized |
| Raycast Target | Boolean | Whether clicks/touches register on this image |
Image Types:
- Simple: Stretches the image to fill the area
- Sliced: 9-slice scaling (corners stay fixed, edges stretch)
- Tiled: Repeats the image to fill the area
- Filled: Partial fill for progress indicators
🎬 Streaming Example: “Use a Filled image type to create a donation goal progress bar that fills up as donations come in.”
🎯 Tips:
- Use Sliced for UI panels and buttons so corners stay crisp at any size.
- Set Raycast Target to false for decorative images that shouldn’t block clicks on elements behind them.
- The Color property can be animated to flash or fade images.
🏷️ Category: UI
💡 Simple Explanation: Displays text in your UI with full formatting options.
⚙️ Technical Description: An advanced text rendering component supporting rich text formatting, multiple fonts, and comprehensive typography controls.
📖 Full Details & Properties
🔧 How It Works: The Text component renders text with high-quality typography. It supports rich text tags for inline formatting, custom fonts, and precise control over spacing and alignment. Text automatically wraps and handles overflow based on your settings.
✨ Perfect For:
- Labels and titles
- Dynamic text displays (donations, alerts)
- Chat overlays
- Score counters
- Any on-screen text
📋 Properties:
| Property | Type | Description |
|---|---|---|
| Text | String | The text content to display |
| Font Asset | Font | The font to use |
| Font Style | Flags | Bold, Italic, Underline, Strikethrough |
| Font Size | Float | Size of the text |
| Color | Color | Text color |
| Alignment | Dropdown | Horizontal and vertical text alignment |
| Wrapping | Boolean | Allow text to wrap to multiple lines |
| Overflow | Dropdown | How to handle text that doesn’t fit |
| Character Spacing | Float | Space between characters |
| Word Spacing | Float | Space between words |
| Line Spacing | Float | Space between lines |
| Paragraph Spacing | Float | Space between paragraphs |
| Rich Text | Boolean | Enable formatting tags |
Rich Text Tags (when enabled):
<b>bold</b>- Bold text<i>italic</i>- Italic text<color=red>colored</color>- Colored text<size=20>sized</size>- Different sizes
🎬 Streaming Example: “Display donation messages with the donor name in bold and colored, using rich text tags.”
🎯 Tips:
- Enable Rich Text to use formatting tags within your text content.
- Set Overflow to “Ellipsis” to show “…” when text is too long.
- Use the
SetTextnode to change text content from node graphs.
Layout Components
Section titled “Layout Components”Layout components automatically arrange child UI elements within them.
Layout Element
Section titled “Layout Element”🏷️ Category: UI
💡 Simple Explanation: Controls how an element behaves inside a layout group.
⚙️ Technical Description: Provides size preferences and constraints for UI elements participating in automatic layout calculations.
📖 Full Details & Properties
🔧 How It Works: When a UI element is inside a layout group (Grid, Horizontal, or Vertical), the Layout Element component lets you specify size preferences. The layout system uses these to determine how much space each element gets.
✨ Perfect For:
- Making specific elements larger/smaller in a layout
- Setting minimum sizes for elements
- Controlling which elements stretch to fill space
📋 Properties:
| Property | Type | Description |
|---|---|---|
| Ignore Layout | Boolean | Exclude this element from layout calculations |
| Min Width | Float | Minimum width (won’t shrink below this) |
| Min Height | Float | Minimum height |
| Preferred Width | Float | Ideal width if space is available |
| Preferred Height | Float | Ideal height |
| Flexible Width | Float | Stretch priority for extra horizontal space |
| Flexible Height | Float | Stretch priority for extra vertical space |
🎬 Streaming Example: “In a horizontal layout of icons, use Layout Element to make the center icon twice as wide as the others.”
🎯 Tips:
- Flexible values are relative - an element with Flexible Width 2 gets twice as much extra space as one with 1.
- Set Ignore Layout to true to manually position an element while keeping it in the layout hierarchy.
Grid Layout Group
Section titled “Grid Layout Group”🏷️ Category: UI
💡 Simple Explanation: Arranges child elements in a grid pattern.
⚙️ Technical Description: Automatically positions child elements in a grid with configurable cell size, spacing, and fill direction.
📖 Full Details & Properties
🔧 How It Works: Child elements are automatically positioned in rows and columns. All cells are the same size, defined by Cell Size. Elements fill the grid in order based on the Start Corner and Start Axis settings.
✨ Perfect For:
- Icon grids
- Inventory displays
- Gallery layouts
- Button matrices
- Achievement displays
📋 Properties:
| Property | Type | Description |
|---|---|---|
| Padding | RectOffset | Space around the edges (Left, Right, Top, Bottom) |
| Cell Size | Vector2 | Width and height of each cell |
| Spacing | Vector2 | Gap between cells (X, Y) |
| Start Corner | Dropdown | Where the first element is placed |
| Start Axis | Dropdown | Fill horizontally or vertically first |
| Child Alignment | Dropdown | How to align the grid within available space |
| Constraint | Dropdown | Fixed row count, column count, or flexible |
🎬 Streaming Example: “Display subscriber badges in a 4-column grid that automatically wraps to new rows.”
🎯 Tips:
- Use Constraint to fix the number of columns or rows.
- Cell Size must be set manually - it doesn’t auto-size to children.
- Combine with a Scroll View for grids with many items.
Horizontal Layout Group
Section titled “Horizontal Layout Group”🏷️ Category: UI
💡 Simple Explanation: Arranges child elements in a horizontal row.
⚙️ Technical Description: Automatically positions child elements side by side horizontally, with optional sizing control and spacing.
📖 Full Details & Properties
🔧 How It Works: Child elements are positioned left to right (or right to left) in a single row. You can control whether children are auto-sized or maintain their own dimensions, and how they align vertically within the row.
✨ Perfect For:
- Navigation bars
- Button rows
- Icon strips
- Horizontal menus
- Side-by-side comparisons
📋 Properties:
| Property | Type | Description |
|---|---|---|
| Padding | RectOffset | Space around the edges |
| Spacing | Float | Gap between elements |
| Child Alignment | Dropdown | Vertical alignment of children |
| Reverse Arrangement | Boolean | Right-to-left instead of left-to-right |
| Control Child Size | Boolean (W/H) | Auto-size children width and/or height |
| Use Child Scale | Boolean (W/H) | Consider child scale in calculations |
| Child Force Expand | Boolean (W/H) | Force children to fill available space |
🎬 Streaming Example: “Create a row of social media icons that stay evenly spaced across the bottom of your stream.”
🎯 Tips:
- Enable Child Force Expand Width to make elements stretch to fill the row.
- Use Child Alignment to center elements vertically if they have different heights.
- Combine with Layout Element components on children for fine control.
Vertical Layout Group
Section titled “Vertical Layout Group”🏷️ Category: UI
💡 Simple Explanation: Arranges child elements in a vertical column.
⚙️ Technical Description: Automatically positions child elements stacked vertically, with optional sizing control and spacing.
📖 Full Details & Properties
🔧 How It Works: Child elements are positioned top to bottom (or bottom to top) in a single column. Works identically to Horizontal Layout Group but in the vertical direction.
✨ Perfect For:
- Vertical menus
- Chat message lists
- Leaderboards
- Stacked notifications
- Settings panels
📋 Properties:
| Property | Type | Description |
|---|---|---|
| Padding | RectOffset | Space around the edges |
| Spacing | Float | Gap between elements |
| Child Alignment | Dropdown | Horizontal alignment of children |
| Reverse Arrangement | Boolean | Bottom-to-top instead of top-to-bottom |
| Control Child Size | Boolean (W/H) | Auto-size children width and/or height |
| Use Child Scale | Boolean (W/H) | Consider child scale in calculations |
| Child Force Expand | Boolean (W/H) | Force children to fill available space |
🎬 Streaming Example: “Create a vertical list of recent donations that automatically stacks new entries below existing ones.”
🎯 Tips:
- Enable Control Child Size Width to make all children the same width as the container.
- Use Reverse Arrangement for chat-style layouts where newest items appear at the bottom.
- Combine with a Scroll View for long lists.