What is Flux?
A lightweight, minimal framework for styling Roblox UI using declarative Lua tables. Supports UI states, animations, layout utilities, components, and more. It is designed to be fast, easy to get along with, fully customizable, and flexible.
Github: Flux - Github
Guide: Guide - Flux
Releases: Download the .rbxl or the zip file here
Note: Although this is a stable release, it may have a few bugs. if you catch any, consider opening an issue.
Why Use Flux?
Flux helps you style Roblox UI faster and cleaner using declarative Lua tables. It removes repetitive property setting and adds support animations, inheritance, and more.
What’s New?
-
Flux now uses a declarative approach without regex patterns, this increases performance.
-
Component Presets: Define reusable style presets e.g. (primary-btn) and apply them anywhere with a single line.
code sample:
primary = {
bg = "blue-500",
textColor = "white",
s = "md",
textSize = "md",
round = "md",
align = "center",
hover = {
animate = {
bg = "red-500",
textSize = 50,
opacity = "75"
},
},
},
to use it:
local initializer = require(game:GetService("ReplicatedStorage").flux.lib.initializer);
initializer.init();
initializer.applyStyles(element, "primary")
-
a Fully Customizable Experience: you can define your own classes with your own values in the config module and use them anywhere.
code sample:
-- config.luau
return {
version = "1.0.0s",
classes = {
bg = {
["red-350"] = Color3.fromRGB(250, 0, 0),
["red-400"] = Color3.fromRGB(200, 0, 0),
["red-450"] = Color3.fromRGB(150, 0, 0),
["red-500"] = Color3.fromRGB(100, 0, 0),
},
textColor = {
["red-350"] = Color3.fromRGB(250, 0, 0),
["red-400"] = Color3.fromRGB(200, 0, 0),
["red-450"] = Color3.fromRGB(150, 0, 0),
["red-500"] = Color3.fromRGB(100, 0, 0),
},
animate = {
["primary"] = {
bg = "red-500",
round = "md",
s = "lg",
duration = 0.5,
easingStyle = Enum.EasingStyle.Linear,
easingDirection = Enum.EasingDirection.InOut,
repeatCount = 0,
reverse = false,
delayTime = 0,
},
}
},
}
---------
Example Code
local initializer = require(game:GetService("ReplicatedStorage").flux.lib.initializer);
initializer.init();
local playerGui = game.Players.LocalPlayer:WaitForChild("PlayerGui");
local element = Instance.new("TextButton", playerGui.Test);
initializer.applyStyles(element, {
s = "xl", -- size[both x, y]
bg = "white", -- background color
textColor = "black", -- text color
font = "arial", -- font
align = "center", -- aligning
text = "Hello, Flux!", -- text
border = "md", -- border[UIStroke]
textSize = 32, -- font size
hover = { -- hover state
animate = { -- animate class
opacity = 0.5, -- animate opacity
bg = "black", -- animate background color
textColor = "white", -- aniamte text color
}
}
});
Installation
You can install Flux using one of the following methods;
Method 1: Inserting Flux Directly into Your Place
- Download the latest
.rbxlrelease from GitHub. - Locate the
.rbxland open it
Method 2: Syncing via VS code
- Download the latest source code release from GitHub.
- Extract the Files into your project’s source directory.
Documentation
Full documentation for Flux can be found here. The API and examples will be updated as development progresses.
Contributing
Flux is an open-source project, and contributions are welcome! If you’d like to help improve the library by adding new features, fixing bugs, or improving documentation, check out the contribution guide.
Roadmap
- Responsive design support
- Themes/Theming and syncing across all UIs
- Add support to more properties.
Survey:
by applying and voting in here, you are helping me to make flux a better library.
What do you think about Flux
- Perfect
- Good
- Bad
- Terrible
How easy is it to learn Flux?
- Hard
- Intermediate
- Easy
- Very Easy
Are you satisfied with the current features Flux offers?
- Yes
- Not Really
- No
