OnyxUI v0.5.0
-
New SwapInput component ↔️
-
New Button.SizeVariant prop
-
Properly expose all state props
1 Like
Please can you provide a place with all of onyxui components in one script/gui?
Making a settings menu with OnyxUI 
2 Likes
Reformatted the original post for accessibility and aesthetics.
1 Like
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
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!
Hey! I recently started learning Fusion with OnyxUI but have hit a bit of a rough patch. Similarly to @unknownIua, 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.
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
Reformatted original post again
Loneka Suite
The same tools you love, now with new and improved branding. This change unifies OnyxUI under Loneka, my games studio. My FOSS works have always been developed tightly alongide Loneka productions, and this change in branding reflects that. Existing works will remain free, forever.
I really want to use this, but I can’t figure out how to work it because the Loneka site seems to be down, so I can’t access the documentation. I just get an error whenever I try to visit it 
EDIT: It’s fixed
Introducing OnyxUI 1.0
After months of iteration and development across an array of codebases, OnyxUI is — at least for now — finally settling on some core design patterns. From novel styling methods, to more featureful theming and overhauled docs, there is plenty for you to take advantage of.
Styling 
Nested props 
Since its creation, OnyxUI has struggled between ease of use and flexibility. And with the new nested styling props, you no longer have to make that tradeoff with your element styling.
Scope:Text {
Text = "Woah we have some text here..",
Stroke = {
Thickness = Theme.StrokeThickness["1"],
Color = Theme.Colors.Neutral.Main,
Gradient = {
Rotation = 90,
},
},
}
With this new approach, styling props are now organized into their respective dictionaries. And much more importantly, you can nest select styles within one another. This unlocks entire stylings that weren’t previously possible, and lets you do it with less keystrokes.
Unit utils 
I was sick of writing out lengthy Computeds to convert simple values into UDims or UDim2s. And now, OnyxUI supports shorthands for a handful of data types.
return function(Scope, Props)
local Scope = Fusion.innerScope(Fusion, OnyxUI.Util)
local Theme = Themer.Theme:now()
Scope:Card {
Padding = {
All = Scope:UDim(0, Theme.Padding["2"])
}
}
end
Theming 
Stroke emphasis 
A handful of components now render strokes — often with depth — by default. This can be modified using the Theme.StrokeEmphasis property.
Distinct paddings 
OnyxUI’s theming system now separates paddings into three distinct properties: Padding, Spacing and Sizing. Padding is relevant to the insides of an element, Spacing for creating gaps between elements, and Sizing for hard-set sizings like menus.
Components 
Tabs 
IconSwap 
Exported props 
Each component’s props are now exported from the top-level module, allowing you to reference them from your own code with ease.
Cleaning 
NumberSpinner, SwitchGroup, and MenuFrame have been deleted entirely, because they didn’t live up to OnyxUI’s standards, or didn’t serve enough of a purpose to justify their existence.
Additionally, many components have been renamed. I suggest looking through the list of components for yourself.
Documentation 
OnyxUI’s documentation has been heavily redone with explainers, images, and a new sheet of polish, so you can focus on learning and educating your team.
4 Likes