Install with the CLI

Add HUD Framework to your Roblox project in one command. Requires Node 18+ and a Roblox project — run robloxui init first if you don't have one yet. See the docs.

bashnpx robloxui add hud-framework

First time? Start with the documentation.

Import

tsx

import { HUD Framework } from "./src/client/ui/components/hud-framework";

Usage

tsx

local HUDManager = require(script.Parent.HUDManager)
local StatBars = require(script.Parent.StatBars)
local manager = HUDManager.new()
manager:Register("stats", function() return StatBars.new() end)
manager:MountAll(playerGui.HudGui)

HUD Framework

TSX + LuauFree

Pluggable HUD registry. HUDManager registers/mounts named module factories (mount, mountAll, unmount, setStat). Ships StatBars (health/mana/stamina with public :Set method) and a Compass that reads camera yaw each frame. Add your own modules and the manager wires them up.

by RobloxUI Team

View Source

Details

Author	RobloxUI Team
Framework	Roblox-TS + React-Luau
Category	Systems
Dependencies	@rbxts/react
Theme Tokens	colors.primary, colors.primaryLight, colors.primaryDark, colors.secondary, colors.secondaryLight, colors.secondaryDark, colors.accent, colors.accentLight, colors.accentDark, colors.bg, colors.bgSecondary, colors.bgTertiary, colors.surface, colors.border, colors.borderLight, colors.glow, colors.text, colors.textPrimary, colors.textSecondary, colors.textMuted, colors.success, colors.successLight, colors.error, colors.errorLight, colors.warning, colors.info, colors.gold, colors.goldLight, gradients.primary, gradients.gold, gradients.health, gradients.mana, gradients.purple, gradients.card, gradients.surface, gradients.surfaceLight, spacing.3xs, spacing.2xs, spacing.xs, spacing.sm, spacing.md, spacing.lg, spacing.xl, radius.sm, radius.md, radius.lg, radius.xl

HUD Framework — RobloxUI