Vault UI System

Vault UI System
Modular UI framework for building polished Roblox interfaces

Overview

A complete client-side UI framework for Roblox. Build production-quality interfaces with reusable components, layout primitives, runtime theming, animations, and screen navigation — without writing manual position math or repetitive Instance code. Drop the module into ReplicatedStorage and start composing UIs in minutes.

Features

Theming Engine — Register custom themes, switch at runtime, all components update automatically
Layout Primitives — VStack, HStack, Grid, Center, Padding, Spacer with auto-sizing
Pre-Built Components — Text, Button, Card, Divider, Badge, ProgressBar with hover/press states
Animation Presets — fadeIn, slideIn, pop, scale, pulse, fadeOut with theme-driven timing
Panel Stack Navigation — Push/pop screen flow with animated transitions, like mobile navigation
Input Router — Action bindings, focus management, gamepad selection, platform detection
Token-Based Theming — 40+ design tokens for colors, typography, spacing, radius, animation
Modal Helpers — One-line modal creation with backdrop fade and content pop animation
Auto-Sizing — Components size themselves based on content, no manual UDim2 math required
Interactive Demo — Full demo place (.rbxl) with realistic game menu, profile, inventory, settings

Code Example

Code:

local VaultUI = require(game.ReplicatedStorage.VaultUI.src.VaultUI)

-- Register a custom theme
VaultUI.Theme.register("neon", {
    primary = Color3.fromRGB(0, 255, 180),
    bg      = Color3.fromRGB(5, 5, 15),
})
VaultUI.Theme.setActive("neon")

-- Build a screen
local screen = VaultUI.createScreen("MainMenu")
local col = VaultUI.Layout.VStack(screen, { spacing = 12, padding = 24 })

VaultUI.Components.Text(col, { text = "Welcome", size = "h1" })
VaultUI.Components.Button(col, {
    text = "Play",
    style = "primary",
    onClick = function() print("clicked!") end,
})

-- Multi-screen navigation with PanelStack
local stack = VaultUI.PanelStack.new(screen)
stack:push("settings", buildSettingsPanel)
stack:pop()

Modules Included

VaultUI — Main entry point and modal/screen helpers
Theme — Theming engine with runtime switching and change listeners
Layout — VStack, HStack, Grid, Center, Padding, Spacer
Components — Text, Button, Card, Divider, Badge, ProgressBar
Animate — fadeIn, fadeOut, slideIn, slideOut, pop, scaleIn, pulse
PanelStack — Push/pop screen navigation with transitions
InputRouter — Key bindings, focus management, platform detection
Config — Default tokens and behavior settings (override per-game)

What's Included

Complete source code (8 modules)
Configurable design tokens with sensible defaults
Runnable demo .rbxl place file
Two demo scripts (modern game menu + classic component showcase)
Four example scripts (basic layout, custom theme, game menu, modal dialog)
Full documentation (installation, configuration, API reference, migration, FAQ)
Structured changelog and release notes

Requirements

Roblox Studio (latest stable version)
Module goes in ReplicatedStorage (accessible to LocalScripts)
Basic knowledge of LocalScripts and ModuleScripts

Component Styles

Buttons — Primary, Secondary, Ghost, Danger styles in Small, Medium, Large sizes
Text — H1, H2, H3, Body, Small with auto-bold for headings
Layouts — Auto-sizing stacks with configurable spacing, padding, alignment
Animations — Theme-driven durations (Fast 0.15s, Normal 0.3s, Slow 0.5s)

Support

Email: [email protected]
All future updates included at no additional cost

Vault UI System v2.4.0

Overview History