📄Fluent

This page contains information that will help you create Fluent interface

Creating Library

local Fluent = loadstring(game:HttpGet("https://github.com/dawid-scripts/Fluent/releases/latest/download/main.lua"))()

Accessibility

Fluent is accessible from any function

function Init()
    local Fluent = loadstring(game:HttpGet("https://github.com/dawid-scripts/Fluent/releases/latest/download/main.lua"))()
end

function Test()
    print(Fluent.Options)
end

Init()
Test()

Creating Window

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
})

Themes

Amethyst

Aqua

Rose

Light

Dark

Darker

Key Codes

KeyCode | Documentation - Roblox Creator Hubrobloxdevrel

Documentation

Creating Options

local Options = Fluent.Options

Options are used by the library to save the elements to access them in the future

Creating Notifications

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

Creating Dialogs

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 
        }
    }
})

Creating Tabs

-- Fluent provides Lucide Icons, they are optional
local Tabs = {
    Main = Window:AddTab({ Title = "Main", Icon = "" }),
    Settings = Window:AddTab({ Title = "Settings", Icon = "settings" })
}

Tab (Settings) With Interface And Configs

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"))()

SaveManager:SetLibrary(Fluent)
InterfaceManager:SetLibrary(Fluent)

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

Selecting Main Tab

Window:SelectTab(1)

Icons

Lucide IconsLucide

Creating Sections

local Section = Tab:AddSection("Section Name")

Section can be used as a parent for any element instead of a tab

local Section = Tab:AddSection("Section Name")
Section:AddParagraph({
    Title = "Paragraph"
})

Creating Paragraphs

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

Creating Buttons

Tab:AddButton({
    Title = "Button",
    Description = "Very important button",
    Callback = function()
        print("Hello, world!")
    end
})

Creating Toggles

local Toggle = Tab:AddToggle("MyToggle", 
{
    Title = "Toggle", 
    Description = "Toggle description",
    Default = false
    Callback = function(state)
	if state then
	    print("Toggle On")
	else
	    print("Toggle Off")
        end
    end 
})

Event Handling

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

Changing Value

Toggle:SetValue(false)

Creating Sliders

local Slider = Tab: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
})

Event Handling

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

Changing Value

Slider:SetValue(3)

Creating Dropdowns

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

Multiple Dropdown

local MultiDropdown = Tab: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"},
})

Event Handling

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

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)

Changing Value

Dropdown:SetValue("four")

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

Creating Colorpickers

local Colorpicker = Tab:AddColorpicker("Colorpicker", {
    Title = "Colorpicker",
    Description = "Description for colorpicker",
    Default = Color3.fromRGB(96, 205, 255)
})

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

Transparency Colorpicker

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

Event Handling

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

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

Changing Value

Colorpicker:SetValueRGB(Color3.fromRGB(0, 255, 140))

TColorpicker:SetValue({0, 100, 100}, 0.5) -- hsv, transparency

Creating Keybinds

local Keybind = Tab:AddKeybind("Keybind", {
    Title = "Keybind",
    Description = "Keybind Description",
    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
})

Event Handling

-- 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)

Changing Value

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

Creating Inputs

local Input = Tab:AddInput("Input", {
    Title = "Input",
    Description = "Input Description",
    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
})

Event Handling

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

Changing Value

Input:SetValue("Text")

Toggle Gui Transparency

Fluent:ToggleTransparency(false) and Fluent:ToggleTransparency(true)

Toggle Acrylic (Blur)

Fluent:ToggleAcrylic(false) or Fluent:ToggleAcrylic(true)

Destroy Fluent

Fluent:Destroy()