OnyxUI - Quick, customizable UI components for Fusion

Resources Community Resources
, , , ,
#21

OnyxUI v0.5.0

  • New SwapInput component ↔️

  • New Button.SizeVariant prop :mushroom:

  • Properly expose all state props :zap:

1 Like
#22

Please can you provide a place with all of onyxui components in one script/gui?

#23

More examples

Avalog
Avalog1194×654 307 KB

Rorooms
Rorooms429×524 225 KB

#24

Making a settings menu with OnyxUI :sparkles:

2 Likes
#25

Reformatted the original post for accessibility and aesthetics.

1 Like
#26

Nice work Avafe, got some projects going to include Onyx into. Avalog be a good fit for overhauling the UI into AI Outfit Creator too

1 Like
#27

I’m glad! As long as you’re modifying avatars through the HumanoidDescription class, it should work with Avalog nicely. You could use HumanoidDescriber to simplify that. Feel free to reach out if you have any questions!

#28

Hey! I recently started learning Fusion with OnyxUI but have hit a bit of a rough patch. Similarly to @UnknownWhyiDontSay, children of OnyxUI components don’t seem to be appearing. I’ve tried reducing the problem down to its core, and it seems to be a bug with OnyxUI, and not Fusion. Help would be appreciated!

Problematic Code Snippet 
local player = game.Players.LocalPlayer
local adornee = player:WaitForChild("PlayerGui") -- Get destination place to show 'work'

local Fusion = require(script.Fusion)
local OnyxUI = require(script.OnyxUI)

local scoped,children = Fusion.scoped,Fusion.Children -- Get needed things
local scope = scoped(Fusion,OnyxUI.Util,OnyxUI.Components) -- Get scope, as usual

scope:New("ScreenGui"){
	Parent = adornee,
		
	[children] = {
		scope:MenuFrame{ -- MenuFrame appears, but has no children
			Size = UDim2.fromScale(0.5,1),
			
			[children] = { -- These don't show at all
				scope:Slider{
					Size = UDim2.fromScale(0.5,0.1),
					Position = UDim2.fromOffset(100,0)
				},
				scope:New("Frame"){
					BackgroundTransparency = 0,
					Size = UDim2.fromOffset(100,100)
				},
			}
		},
		
		scope:New("Frame"){ -- Frame appears, AND has children
			Size = UDim2.fromScale(0.5,1),
			Position = UDim2.fromScale(0.5,0),
			BackgroundColor3 = Color3.new(),
			
			[children] = { -- These show correctly
				scope:Slider{
					Size = UDim2.fromScale(0.5,0.1),
					Position = UDim2.fromOffset(100,0)
				},
				scope:New("Frame"){
					BackgroundTransparency = 0,
					Size = UDim2.fromOffset(100,100)
				},
			}
		}
	}
}

P.S. I’m using the .rbxm module, if that helps at all.

#29

I think the problem might be that OnyxUI and your script are using separate copies of Fusion. Try requiring the Fusion bundled under OnyxUI. It’s not the cleanest, but it’s just kinda how it is when you’re downloading rbxms instead of using Wally.

I’m going to update the documentation to make this clearer.

2 Likes
#30

Reformatted original post again