Forge UI

This document is organized by capability. Rendering & Effects covers the GPU drawing layer; Building UI covers components, layout, data and animation; Systems covers theming, localization, accessibility and AI; and Reference covers the demo, module map, requirements and support.

⤓ Installation

Import once. Every module lights up immediately — there is no mandatory setup step.

From the Unity Asset Store

Requirements

• Unity 6000.0.62f1 or newer (Unity 6.x). Required
• Universal Render Pipeline (URP) as the active pipeline. Required
• TextMeshPro (ships with Unity 6; Forge UI uses it for all text). Auto

See Requirements & Compatibility for the full list, optional integrations and platform notes.

Optional: create a settings asset

Forge UI works out of the box, but you can create a project-wide configuration asset to toggle module feature-flags:

⚡ Quick Start

From an empty Canvas to a themed, animated screen in a few lines.

Draw a shape

Every visual in Forge UI ultimately comes from FgShape — one component that renders any of eight primitives with gradients, stroke and fill. Add it like any UGUI graphic:

csharpusing Forge.Shapes;

var go = new GameObject("Panel", typeof(RectTransform));
go.transform.SetParent(canvas.transform, false);

var shape = go.AddComponent<FgShape>();
shape.ShapeType   = FgShapeType.RoundedRect;
shape.CornerRadius = 24f;
shape.color       = new Color(0.10f, 0.12f, 0.18f);
shape.StrokeWidth = 2f;
shape.StrokeColor = Color.white;

Drop in a component

Production controls are one-call factories on FgComponents. They return a fully-assembled, theme-bound GameObject:

csharpusing Forge.Components;

var btn   = FgComponents.CreateButton(panel.transform, "Save");
var slider = FgComponents.CreateSlider(panel.transform, 0.5f);
var picker = FgComponents.CreateColorPicker(panel.transform)
                          .GetComponent<FgColorPicker>();
picker.Changed += c => Debug.Log(picker.Color);

Theme it, bind it, animate it

csharp// Switch the whole UI to dark mode at runtime
FgTheme.SetMode("Dark");

// MVVM: change the value once, the label follows
var score = new FgObservable<int>(0);
FgBind.Text(score, scoreLabel, v => $"Score: {v}");
score.Value = 100;   // label updates automatically

// Tween: slide a panel up with an elastic ease
panel.FgMoveAnchoredY(0f, 0.4f, FgEase.BackOut);

⚙ The Hub & Design Canvas

Two editor windows: one to manage Forge UI, one to design with it directly.

Forge Hub Tools → Forge → Hub

The Hub is your control center. From here you browse the modules, toggle feature flags, manage the active theme asset, and jump to the demo and sample scenes. Useful menu items grouped under Tools → Forge:

Design Canvas Window → Forge Canvas

The Design Canvas is a dockable, drag-and-drop authoring surface inside the Editor:

• Palette — one click spawns any shape or any of the 60+ components onto your scene.
• Properties panel — edit the selected FgShape live: shape type, fill, gradient, stroke, corner radius.
• Theme preview — flip between theme modes (e.g. Light / Dark) and watch everything restyle.
• Scene-view handles — drag a corner-radius handle directly in the Scene view on a RoundedRect.

Components placed here also expose custom inspectors with live preview for stateful drivers (Gauge, Steps, Pagination, Timeline, RangeSlider, NavBar, StatCard).

★ Shapes (SDF)

One component, eight primitives, infinite resolution. Forge.Shapes.FgShape.

FgShape is a MaskableGraphic that draws its shape analytically in the Forge/Shape shader from a signed-distance field. That means perfectly anti-aliased edges at any size, no source textures, and SDF-accurate raycasting (clicks only register inside the actual shape, optionally only on its outline).

Shape types

FgShapeType: RoundedRect, Ellipse, Triangle, RegularPolygon, Star, ChamferBox, Parallelogram, Capsule. Per-corner radii, polygon sides/rotation, star points/inner-ratio, chamfer and skew are all exposed as properties.

Fills

Stroke, fill-amount & morph

• Stroke — StrokeWidth, StrokeColor, and StrokeAlign (Inside / Center / Outside).
• Fill amount — FillMode (Horizontal, Vertical, Radial360, Radial90) + FillAmount for progress rings, cooldowns and wipes.
• Edge-collapse morph — TopWidthScale smoothly collapses a rect → trapezoid → triangle.
• Patterns — procedural FgPatternMode (stripes / dots / checker / grid), see below.

csharpshape.ShapeType  = FgShapeType.Star;
shape.StarPoints = 5;
shape.FillKind   = FgFillKind.Gradient;
shape.FillMode   = FgFillMode.Radial360;   // radial progress
shape.FillAmount = 0.75f;

🎨 Gradients & Patterns

Per-pixel gradients computed in-shader, plus unlimited-stop baked gradients and procedural patterns.

Per-pixel gradients

Set FillKind = Gradient and assign an FgLinearGradient (two colors, an angle, and a FgGradientKind). Kinds: Linear, Radial, Angular (conical), Diamond. Gradients can be screen-space, and are dithered to avoid banding on flat panels.

csharpshape.FillKind = FgFillKind.Gradient;
shape.Gradient = new FgLinearGradient {
    colorA = Color.HSVToRGB(0.05f, 0.9f, 1f),
    colorB = Color.HSVToRGB(0.95f, 0.9f, 1f),
    angle  = 45f,
    kind   = FgGradientKind.Radial
};

Unlimited-stop gradients

For rainbows and complex ramps, FgGradientFill bakes a native Unity Gradient (any number of stops) into a texture and routes it through the SDF sprite-fill path — so it's still clipped perfectly to the shape, with no change to the core shader.

Procedural patterns

FgPatternMode overlays a tiling pattern computed in-shader: Stripes, Dots, Checker, Grid, with PatternScale and PatternColor. The pattern path is inert by default (None) so existing shapes render byte-identical until you opt in.

☀ Shadows & Glow

True soft, blurred shadows that follow the real shape of the caster. Forge.Effects.FgRtShadow.

FgRtShadow snapshots the caster's mesh, renders it to a padded render-texture, blurs it with a Kawase pyramid, and composites it back behind (or in front of) the caster. Because it uses the caster's actual geometry, the shadow matches stars, rounded panels and text — not just a rectangle.

csharpusing Forge.Effects;

var sh = panel.AddComponent<FgRtShadow>();
sh.Size      = 24f;
sh.Offset    = new Vector2(0, -6);
sh.Color     = new Color(0.20f, 0.22f, 0.28f, 0.7f);
sh.Inner     = false;

A lightweight CPU-only alternative, FgSoftShadow (mesh-duplication with ring sampling), is available for cases where you don't want a render-texture.

❄ Glass & Blur

Frosted-glass / glassmorphism panels that blur whatever is behind them.

The blur is produced by FgGlassController: it renders the scene to a render-texture, runs a Kawase blur pyramid (FgKawaseBlur), and publishes the result to a global shader texture. Any FgGlass panel then samples that blurred backdrop in the Forge/Glass shader and tints it.

• FgGlass properties: Vibrancy, Brightness, TintStrength, and color (tint + opacity).
• FgGlassController.ResolveQuality(strength) — a single knob that derives downsample, iterations and spread; RefreshInterval throttles re-blurring for performance.

🎞 Filters & Soft Masks

Per-graphic image filters and anti-aliased masking.

Filters FgFilter

FgFilter swaps a graphic's material for Forge/UIFilter and applies one or more effects to any Image or TMP text: Grayscale, Sepia, Negative, Posterize, Hue, Saturation, Contrast, Brightness, Pixelate, Blur, EdgeDetect, RgbShift, Dissolve, Shiny and Cutoff.

Soft masks FgSoftMask

FgSoftMask clips children to an analytic rounded-rect with a soft, anti-aliased edge — smoother than a stencil Mask. It can also mask to an arbitrary texture's alpha (a star, a logo), so you can clip content to any silhouette. Honored by both Forge/Shape and Forge/UIFilter via global shader parameters.

🧩 Components

60+ production controls, each a one-call factory on Forge.Components.FgComponents.

Every factory returns a fully-assembled GameObject built from Forge UI primitives (SDF shapes + TMP + theming + layout). All are token-themed (a Dark-mode switch restyles them live) and sprite-free. Stateful controls attach a small Fg* driver MonoBehaviour you grab with GetComponent to read state or subscribe to events.

csharpusing Forge.Components;

var picker = FgComponents.CreateColorPicker(panel.transform)
                          .GetComponent<FgColorPicker>();
picker.Changed += c => Debug.Log(picker.Color);

Forms & input

CreateButton, CreateToggle, CreateSwitch, CreateSlider, CreateRangeSlider, CreateStepper, CreateNumberField, CreateInputField, CreateTextArea, CreateInlineEdit, CreateDropdown, CreateCombobox (autocomplete), CreateTagInput, CreateRadioGroup, CreateChipGroup, CreateSegmentedControl, CreateColorSwatches, CreateColorPicker (full HSV), CreateCalendar.

Navigation

CreateTabs, CreateTabView, CreateNavBar, CreateNavRail, CreateAppBar, CreateFab, CreateBreadcrumb, CreateSteps (wizard), CreatePagination, CreatePageDots, CreateContextMenu, CreateTreeView, CreateToolbar.

Feedback & overlays

FgToast.Show, FgSnackbar.Show (with an UNDO action), CreateAlert, CreateBanner, CreateModal, CreateBottomSheet, CreateEmptyState, plus the FgTooltip and FgRipple components.

Data display

CreateProgressBar, CreateGauge (circular meter), CreateTimeline, CreateSparkline, CreateStatCard (KPI + delta), CreateKeyValueList, CreateAvatar, CreateAvatarGroup, CreateBadge, CreateChip, CreateAccordion, CreateDivider, plus the FgRating, FgCounter, FgSkeleton, FgSpinner and FgParticles components and the virtualized FgListView.

☷ Layout

Flexbox for UGUI, plus masonry, radial and curve arrangements. Forge.Layout.

FgFlexLayout

A flexbox-style container that lays out its children without injecting spacer objects:

• Direction — Horizontal, Vertical, WrapHorizontal, Grid.
• Alignment — main axis (Start/Center/End/SpaceBetween/SpaceAround/SpaceEvenly) and cross axis (Start/Center/End/Stretch).
• Spacing & padding — GapX, GapY, Padding.
• Grid — uniform or weighted column tracks.

Children can carry an optional FgFlexItem for per-child sizing: Hug / Fill / Fixed width & height, grow weight, min/max clamps, aspect ratio, and percentage sizing.

Other layouts

☰ Lists & Virtualization

Scroll 10,000+ rows with a handful of live cells. FgListView.

FgListView pools cells and only instantiates the ones in (and just around) the viewport, so memory and CPU stay flat regardless of data size. It supports uniform lists, grids, variable-height rows (via prefix-sum + binary search), and an infinite loop mode.

csharplistView.SetData(
    count: 10000,
    cellFactory: parent => FgComponents.CreateCard(parent),
    binder: (cell, i) => cell.GetComponentInChildren<TMP_Text>().text = $"Row {i}");

• SetData(count, cellFactory, binder) — uniform list (set Columns for a grid).
• SetVariableHeights(heightFunc) — per-row heights.
• SetDataLooping(count, …) — seamless infinite scroll.

It pairs directly with data binding: FgBind.List(observableList, listView, …) keeps a virtualized list synced to an observable collection.

🔗 Data Binding

MVVM observables — the piece no all-in-one rival bundles. Forge.Data.

Wrap state in an FgObservable<T> (or FgObservableList<T>) and connect it to the UI with the static FgBind helpers. Change the value once and every bound view updates itself — no manual refresh code.

csharpusing Forge.Data;

var volume = new FgObservable<float>(0.5f);

FgBind.Text(volume, label, v => $"{v:P0}");   // one-way  -> label
FgBind.TwoWay(volume, slider);                 // two-way  <-> slider

volume.Value = 0.8f;   // label AND slider both move

✏ Text Effects

Per-character effects and inline-tag animation on TextMeshPro. Forge.Text.

FgTextEffects

Applies composable per-character effects to a TMP_Text mesh: a vertical gradient (TopColor / BottomColor), a sine warp (WarpAmplitude, WarpFrequency), and a typewriter reveal (Reveal 0–1). All three can run at once.

FgTextAnimator

Drives animation from inline tags in the text itself — great for damage numbers, callouts and juicy menus. Supported tags (each takes optional a= amplitude and f= frequency):

textGrab the <wave>treasure</wave> and <shake a=3>RUN!</shake>

<wave>, <bounce>, <wobble>, <shake>, <jitter>, <pulse>, <rainbow>. A typewriter mode reveals characters over time. FgTextAnimator caches the base mesh and offsets vertices per-frame, so there's no expensive re-layout.

⟳ Animation & Tweens

A pooled, zero-GC tween engine with a fluent, chainable API. Forge.Interactions.

Tweens

FgTween animates floats, vectors, colors and curves with 30 easing functions (FgEase: Quad/Cubic/Quart/Quint/Sine/Expo/Circ/Back/Elastic/Bounce, each In/Out/InOut). Tweens are chainable, can loop / ping-pong, run on unscaled time, and be killed by id.

csharpusing Forge.Interactions;

// Extension methods on RectTransform / Graphic / CanvasGroup
panel.FgMoveAnchoredY(0f, 0.4f, FgEase.BackOut);
icon.FgScale(1.2f, 0.15f, FgEase.QuadOut);
group.FgFade(1f, 0.3f);

// Direct tween with a callback
FgTween.Float(0f, 100f, 1f, FgEase.CubicInOut, v => bar.fillAmount = v / 100f)
       .SetLoops(2, pingPong: true)
       .OnComplete(() => Debug.Log("done"));

Sequences, punch, shake & paths

• FgSequence — Append / Join (parallel) / AppendInterval / AppendCallback — a full sequence timeline.
• Punch and Shake for snappy feedback.
• FgPathAnchored(waypoints, …) — move along a Catmull-Rom or linear spline.

👆 Interactions & Navigation

Wire behavior without scripting, capture states, and manage screens.

Variants & triggers

FgVariant captures named states (transform + color + visibility) and animates between them. FgInteraction maps a trigger to an action with no code:

• Triggers — PointerEnter/Exit/Down/Up/Click, BeginDrag/Drag/EndDrag, Scroll, AfterDelay.
• Actions — set a variant state, navigate (push/pop/show), set a theme mode, or invoke a UnityEvent.

A preset, FgInteractionPresets.AddHoverPressScale(go), wires the common hover/press scale feedback in one call.

Screen navigation

FgScreenStack manages a stack of screens with push / pop / show and transitions (Fade, Slide, Scale) — the backbone for menus, dialogs and flows.

🎨 Theming & Tokens

Design tokens with modes that restyle the entire UI live. Forge.Theming.

An FgThemeAsset is a ScriptableObject of typed design tokens (colors, numbers, fonts) organized into modes (e.g. Light, Dark, Brand). Tokens can be aliases that resolve to core tokens, so you change primary in one place and everything that references it follows.

csharpusing Forge.Theming;

FgTheme.SetTheme(myThemeAsset, "Light");
FgTheme.SetMode("Dark");          // every binder recolors instantly
FgTheme.ModeChanged += m => Debug.Log($"now in {m}");

Bind any property to a token with FgThemeBinder — targets include a graphic's color, an FgShape stroke color or corner radius, and a text's color or font size. Forge UI's own components are all token-bound, which is why a single SetMode call re-themes the entire screen.

🌐 Localization & RTL

Provider-agnostic translation with automatic right-to-left mirroring. Forge.Localization.

FgLocalization is a small controller backed by a pluggable IFgLocalizationProvider. The built-in FgDictionaryProvider works with zero external packages; bridges to Unity Localization and I2 are available behind version-defines.

csharpusing Forge.Localization;

var provider = new FgDictionaryProvider();
provider.Add("en", "greeting", "Hello");
provider.Add("ar", "greeting", "مرحبا");
provider.SetRightToLeft("ar");

FgLocalization.SetProvider(provider, "en");
FgLocalization.SetLanguage("ar");   // fires LanguageChanged

Put FgLocalizedText on a TMP label to bind it to a key (it also sets TMP's isRightToLeftText), and FgRtlFlex on an FgFlexLayout to mirror row alignment for RTL languages.

♿ Accessibility

Keyboard & gamepad focus navigation plus screen-reader semantics. Forge.A11y.

• FgFocusNav — auto-wires directional focus between selectables in Vertical, Horizontal, Grid (by column count) or Automatic mode. Call Build() after adding selectables at runtime.
• FgAccessibleNode — attaches semantic Label, Role and Hint; GetAnnouncement() returns a "Label, Role. Hint" string ready for a screen-reader bridge.

🤖 AI / MCP Generation

A structured tool layer that lets an AI agent build & edit Forge UI screens. Forge.Mcp.

FgMcpTools exposes Forge UI's authoring surface as a set of discrete, structured operations — the same operations the Canvas uses — so an agent can compose a screen from a description and then read it back to self-correct:

🎬 Demo & Studio

See — and tweak — every feature live.

Guided demo

Tools → Forge → Build Demo Scene generates a guided, sidebar-navigated tour of 49 interactive sections — shapes, gradients, shadows, filters, glass, soft masks, text effects, theming, localization, layout, every component, animation, lists of 10,000 rows, data binding and more. The content is generated at runtime, so it builds to a tiny, fast WebGL player; every page is hands-on (drag, type, tweak sliders).

Forge Studio

Tools → Forge → Build Studio Scene builds Forge Studio — an in-play visual design playground that ships inside your build: a tool palette, a center artboard, and a right-hand inspector. Add shapes and components, select and drag them, resize via corner handles, edit fill / corner-radius / stroke live, duplicate, delete, and toggle Dark mode. It's built from the same factories your game uses.

Kitchen-sink sample

Tools → Forge → Build Kitchen-Sink Demo creates Assets/Forge/Samples/ForgeKitchenSink.unity — a dense single-scene showcase of shapes, gradients, morph, glass, shadows, tabs and dropdowns.

🏗 Architecture

One assembly per module under the Forge.* namespace; Runtime never references Editor.

Forge UI is split into independent modules, each with its own assembly definition. Runtime assemblies never depend on editor assemblies, so everything compiles into player builds cleanly. All public types use the Fg prefix.

Shaders

Forge/Shape, Forge/UIFilter, Forge/RtShadow, Forge/Glass, Forge/KawaseBlur.

✅ Requirements & Compatibility

What Forge UI needs, what it integrates with, and what's honestly out of scope.

Required

• Unity 6000.0.62f1+ (Unity 6.x).
• Universal Render Pipeline active (com.unity.render-pipelines.universal).
• TextMeshPro (bundled with Unity 6).

Optional integrations

• Input System (com.unity.inputsystem) — for WebGL/gamepad input; the demo uses the legacy module by default and notes the swap.
• Unity Localization or I2 Localization — bridges behind version-defines if you already use a translation table.

Scope & honest limits

Forge UI contains no third-party code — every technique (IQ-style 2D SDFs, Kawase blur) is reimplemented from public math. See Assets/Forge/THIRD-PARTY-NOTICES.txt.

💡 Troubleshooting

The handful of things that trip people up.

❓ FAQ

Quick answers.

📬 Support

Questions, bugs and feature requests are welcome.

Forge UI · an all-in-one UGUI design & build toolkit for Unity 6 / URP. Namespace Forge.*, type prefix Fg.