Undetected Fluent UI Library for Roblox Scripts

[exi]

Fluent is an open‑source UI library with many features for Roblox scripts and modern user interfaces that are both flexible and easy to customize. This fluent library helps you create menus and other interfaces that look modern and clean, even if you are not very experienced with UI lib design. With this fluent interface you can quickly build Roblox UI library elements that are tailored to your specific needs and use them in your script without big downtime.

Description of Fluent Roblox package​

Maybe you often saw in different Roblox scripts, free scripts from YouTube or from themed websites with Roblox scripts, a nice fluent gui menu and you was asking yourself how to make same UI library in your own script. With Fluent UI Library you finally can easily create menus and other interfaces in your Roblox lua script, without writing your own complex ui lib from zero.

Fluent is a Roblox UI library that focuses on a modern and customizable fluent interface for script developers. It is especially popular now because fluent ui library looks very clean compared with many other libs, and fluent library works good with most executors on PC and mobile.

Features​

This open-source UI library with many controls gives you not only visual elements, but also ready systems for configs and themes. Fluent UI library is written for Roblox lua and works like local library inside your script, so you just require or load it and start to add elements.

Main feature modules of the fluent library:

• SaveManager – script configuration manager.
  Config name, configs list, save config, load config, overwrite config, refresh configs list, set config to autoload.
• InterfaceManager – interface appearance manager.
  Change color and full visual look of the script interface, plus keybind for open and close the UI.

UI elements and other features of this Roblox UI library:

1. Creation of Toggle (on/off).
2. Creation of Button that calls callback on press.
3. Tabs system (multi-level UI: window → tabs → elements).
4. Paragraphs – simple text block with title and few lines.
5. Support for Lucide icons.
6. Notifications – popup notification with timer (or without, if Duration = nil).
7. Sliders with methods: Slider:OnChanged(function(Value) ... end) and Slider:SetValue(x).
8. Colorpicker with methods: Colorpicker:SetValueRGB(Color3.fromRGB(...)), :OnChanged(function() ... end), supports transparency.
9. Keybinds with modes "Always", "Toggle", "Hold" and methods: Keybind:GetState(), Keybind:SetValue("Key", "Mode"), Keybind:OnClick(function() ... end), Keybind:OnChanged(function() ... end).
10. Input field with Input:OnChanged(function() ... end), supports only numbers (Numeric = true) and call only on Enter (Finished = true).
11. Dropdown: Tab:AddDropdown("ID", { Title, Values, Multi, Default }) with single select (Multi = false) and multi select (Multi = true), methods: Dropdown:SetValue("option"), MultiDropdown:SetValue({option = true/false, ...}), :OnChanged(function(Value) ... end).
12. UI unloading with Fluent.Unloaded.

Thanks to this extensive range of ui elements, fluent ui library is often called ultimate solution for creating stunning user interfaces that are both modern and customizable, and you can create amazing interfaces in no time.

Installation​

Installation of the fluent library is simple: you load the UI lib from GitHub release directly into your Roblox script. Fluent is usually loaded as local library with one line, and after that you can work with window, tabs and all controls inside Roblox lua.

In most cases for installation you just place the loadstring at the top of your Roblox scripts, and then use the library object to create your fluent interface. This way your script keeps original structure and still gets all UI features from the ui library.

Usage (Roblox Lua script example)​

Below is original example of usage that shows how to use fluent ui library in a Roblox lua script. It demonstrates window creation, tabs, notifications, buttons, toggles, sliders, dropdowns, colorpickers, keybinds, input field and also how to connect SaveManager and InterfaceManager to the main lib.

local Fluent = loadstring(game:HttpGet("https://github.com/dawid-scripts/Fluent/releases/latest/download/main.lua"))()
local SaveManager = loadstring(game:HttpGet("https://raw.githubusercontent.com/dawid-scripts/Fluent/master/Addons/SaveManager.lua"))()
local InterfaceManager = loadstring(game:HttpGet("https://raw.githubusercontent.com/dawid-scripts/Fluent/master/Addons/InterfaceManager.lua"))()

local Window = Fluent:CreateWindow({
    Title = "Fluent " .. Fluent.Version,
    SubTitle = "by dawid",
    TabWidth = 160,
    Size = UDim2.fromOffset(580, 460),
    Acrylic = true, -- The blur may be detectable, setting this to false disables blur entirely
    Theme = "Dark",
    MinimizeKey = Enum.KeyCode.LeftControl -- Used when theres no MinimizeKeybind
})

--Fluent provides Lucide Icons https://lucide.dev/icons/ for the tabs, icons are optional
local Tabs = {
    Main = Window:AddTab({ Title = "Main", Icon = "" }),
    Settings = Window:AddTab({ Title = "Settings", Icon = "settings" })
}

local Options = Fluent.Options

do
    Fluent:Notify({
        Title = "Notification",
        Content = "This is a notification",
        SubContent = "SubContent", -- Optional
        Duration = 5 -- Set to nil to make the notification not disappear
    })



    Tabs.Main:AddParagraph({
        Title = "Paragraph",
        Content = "This is a paragraph.\nSecond line!"
    })



    Tabs.Main:AddButton({
        Title = "Button",
        Description = "Very important button",
        Callback = function()
            Window:Dialog({
                Title = "Title",
                Content = "This is a dialog",
                Buttons = {
                    {
                        Title = "Confirm",
                        Callback = function()
                            print("Confirmed the dialog.")
                        end
                    },
                    {
                        Title = "Cancel",
                        Callback = function()
                            print("Cancelled the dialog.")
                        end
                    }
                }
            })
        end
    })



    local Toggle = Tabs.Main:AddToggle("MyToggle", {Title = "Toggle", Default = false })

    Toggle:OnChanged(function()
        print("Toggle changed:", Options.MyToggle.Value)
    end)

    Options.MyToggle:SetValue(false)


 
    local Slider = Tabs.Main:AddSlider("Slider", {
        Title = "Slider",
        Description = "This is a slider",
        Default = 2,
        Min = 0,
        Max = 5,
        Rounding = 1,
        Callback = function(Value)
            print("Slider was changed:", Value)
        end
    })

    Slider:OnChanged(function(Value)
        print("Slider changed:", Value)
    end)

    Slider:SetValue(3)



    local Dropdown = Tabs.Main:AddDropdown("Dropdown", {
        Title = "Dropdown",
        Values = {"one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen"},
        Multi = false,
        Default = 1,
    })

    Dropdown:SetValue("four")

    Dropdown:OnChanged(function(Value)
        print("Dropdown changed:", Value)
    end)


 
    local MultiDropdown = Tabs.Main:AddDropdown("MultiDropdown", {
        Title = "Dropdown",
        Description = "You can select multiple values.",
        Values = {"one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen"},
        Multi = true,
        Default = {"seven", "twelve"},
    })

    MultiDropdown:SetValue({
        three = true,
        five = true,
        seven = false
    })

    MultiDropdown:OnChanged(function(Value)
        local Values = {}
        for Value, State in next, Value do
            table.insert(Values, Value)
        end
        print("Mutlidropdown changed:", table.concat(Values, ", "))
    end)



    local Colorpicker = Tabs.Main:AddColorpicker("Colorpicker", {
        Title = "Colorpicker",
        Default = Color3.fromRGB(96, 205, 255)
    })

    Colorpicker:OnChanged(function()
        print("Colorpicker changed:", Colorpicker.Value)
    end)
 
    Colorpicker:SetValueRGB(Color3.fromRGB(0, 255, 140))



    local TColorpicker = Tabs.Main:AddColorpicker("TransparencyColorpicker", {
        Title = "Colorpicker",
        Description = "but you can change the transparency.",
        Transparency = 0,
        Default = Color3.fromRGB(96, 205, 255)
    })

    TColorpicker:OnChanged(function()
        print(
            "TColorpicker changed:", TColorpicker.Value,
            "Transparency:", TColorpicker.Transparency
        )
    end)



    local Keybind = Tabs.Main:AddKeybind("Keybind", {
        Title = "KeyBind",
        Mode = "Toggle", -- Always, Toggle, Hold
        Default = "LeftControl", -- String as the name of the keybind (MB1, MB2 for mouse buttons)

        -- Occurs when the keybind is clicked, Value is `true`/`false`
        Callback = function(Value)
            print("Keybind clicked!", Value)
        end,

        -- Occurs when the keybind itself is changed, `New` is a KeyCode Enum OR a UserInputType Enum
        ChangedCallback = function(New)
            print("Keybind changed!", New)
        end
    })

    -- OnClick is only fired when you press the keybind and the mode is Toggle
    -- Otherwise, you will have to use Keybind:GetState()
    Keybind:OnClick(function()
        print("Keybind clicked:", Keybind:GetState())
    end)

    Keybind:OnChanged(function()
        print("Keybind changed:", Keybind.Value)
    end)

    task.spawn(function()
        while true do
            wait(1)

            -- example for checking if a keybind is being pressed
            local state = Keybind:GetState()
            if state then
                print("Keybind is being held down")
            end

            if Fluent.Unloaded then break end
        end
    end)

    Keybind:SetValue("MB2", "Toggle") -- Sets keybind to MB2, mode to Hold


    local Input = Tabs.Main:AddInput("Input", {
        Title = "Input",
        Default = "Default",
        Placeholder = "Placeholder",
        Numeric = false, -- Only allows numbers
        Finished = false, -- Only calls callback when you press enter
        Callback = function(Value)
            print("Input changed:", Value)
        end
    })

    Input:OnChanged(function()
        print("Input updated:", Input.Value)
    end)
end


-- Addons:
-- SaveManager (Allows you to have a configuration system)
-- InterfaceManager (Allows you to have a interface managment system)

-- Hand the library over to our managers
SaveManager:SetLibrary(Fluent)
InterfaceManager:SetLibrary(Fluent)

-- Ignore keys that are used by ThemeManager.
-- (we dont want configs to save themes, do we?)
SaveManager:IgnoreThemeSettings()

-- You can add indexes of elements the save manager should ignore
SaveManager:SetIgnoreIndexes({})

-- use case for doing it this way:
-- a script hub could have themes in a global folder
-- and game configs in a separate folder per game
InterfaceManager:SetFolder("FluentScriptHub")
SaveManager:SetFolder("FluentScriptHub/specific-game")

InterfaceManager:BuildInterfaceSection(Tabs.Settings)
SaveManager:BuildConfigSection(Tabs.Settings)


Window:SelectTab(1)

Fluent:Notify({
    Title = "Fluent",
    Content = "The script has been loaded.",
    Duration = 8
})

-- You can use the SaveManager:LoadAutoloadConfig() to load a config
-- which has been marked to be one that auto loads!
SaveManager:LoadAutoloadConfig()

This example Roblox script shows real usage pattern for the fluent library and can be base for your own Roblox scripts with custom UI library elements. You can change titles, icons, default values, keybinds and use the same structure to create menus and other interfaces tailored to your specific needs.

Source, GitHub repository and short feature recap​

Source code of the library is fully open and available on GitHub, so you can always inspect original code, language, history and latest commit, as well as navigate repository files and folders and files structure.

Shortly speaking, what this Roblox UI library gives you:

• Multi-level UI (window → tabs → elements).
• Full set of controls (buttons, toggles, sliders, dropdowns, keybinds, inputs, colorpickers).
• Notifications and dialogs system.
• Open source code with simple repository files navigation.
• Configs and themes system with SaveManager and InterfaceManager.
• Transparency support, different themes for your fluent interface.
• Saving parameters between sessions.
• Full support of almost all current executors, both Android/iOS and PC.

With this combination of features, Fluent UI Library becomes a powerful solution for creating stunning user interfaces that are modern and customizable, while still staying lightweight and easy to use in any Roblox script.